:root {
    --lh-bg: #f6f6f6;
    --lh-text: #19202a;
    --lh-muted: #5d6879;
    --lh-line: #d8dde3;
    --lh-dark: #3b414f;
    --lh-dark-2: #2d313c;
    --lh-cyan: #111111;
    --lh-cyan-2: #1f2937;
    --lh-soft: #eef3f7;
    --lh-shadow: 0 14px 30px rgba(21, 28, 38, 0.16);
    --lh-topline-h: 48px;
    --lh-nav-h: 58px;
    --lh-topline-start: rgba(10, 18, 30, 0.52);
    --lh-topline-end: rgba(8, 15, 24, 0.42);
    --lh-header-start: rgba(8, 16, 28, 0.58);
    --lh-header-end: rgba(5, 12, 22, 0.46);
    --lh-header-scrolled-start: rgba(8, 15, 25, 0.72);
    --lh-header-scrolled-end: rgba(4, 10, 18, 0.64);
    --lh-nav-active-start: #111827;
    --lh-nav-active-end: #374151;
}

.admin-page-appointments-calendar {
    --appointments-hour-height: 108px;
    --appointments-sticky-top: 68px;
    --appointments-toolbar-sticky-height: 74px;
}

.admin-body.admin-page-appointments-calendar .admin-content {
    padding: 0;
}

.admin-body.admin-page-appointments-calendar .admin-topbar {
    margin: 0;
}

.appointments-page-shell {
    display: grid;
    gap: 0;
}

.admin-body.admin-page-appointments-sales .admin-content {
    background: #f7f7f8;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-appointments-sales .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-appointments-sales .clients-pro-header {
    /* Aumentar espacio superior para que el encabezado quede un poco más abajo */
    margin: 1.15rem 0 1rem;
}

.admin-body.admin-page-appointments-sales .clients-pro-main {
    padding: 0 1rem 1.2rem;
}

.admin-body.admin-page-appointments-sales .clients-pro-layout {
    margin-top: 0;
}

.admin-body.admin-page-appointments-sales .clients-pro-side {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.admin-body.admin-page-appointments-sales .clients-pro-side-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    gap: 0.22rem;
    min-height: calc(100vh - 68px - 60px);
    min-height: calc(100dvh - 68px - 60px);
}

@media (min-width: 981px) {
    .admin-body.admin-page-appointments-sales .clients-pro-layout {
        display: block;
        min-height: calc(100vh - 68px);
    }

    .admin-body.admin-page-appointments-sales .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        min-height: 0;
        max-height: none;
        border-top: 0;
        border-right: 1px solid #dedfe4;
        border-bottom: 0;
        border-left: 0;
        overflow-y: auto;
        z-index: 14;
    }

    .admin-body.admin-page-appointments-sales .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-appointments-sales .clients-pro-main {
        margin-left: 210px;
        padding: 0 1rem 1.2rem;
    }
}

@media (max-width: 980px) {
    .admin-body.admin-page-appointments-sales .clients-pro-side {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: auto;
        height: calc(100dvh - 68px);
        min-height: calc(100dvh - 68px);
        max-height: calc(100dvh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
    }
}

.appointments-sales-header {
    align-items: flex-start;
}

.appointments-sales-export {
    flex-shrink: 0;
}

.appointments-sales-panel {
    margin-bottom: 1rem;
}

.admin-body.admin-page-appointments-sales .clients-pro-side-nav {
    align-content: start;
    grid-auto-rows: max-content;
}

.admin-body.admin-page-appointments-sales .clients-pro-side-nav a {
    justify-content: flex-start;
}

.appointments-sales-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.72rem 0.9rem;
    border-radius: 16px;
    background: #f3f4f6;
    border: 1px solid #eceff4;
}

.appointments-sales-toolbar-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}

.appointments-sales-toolbar-end {
    margin-left: auto;
    flex-shrink: 0;
}

.appointments-sales-search .material-symbols-outlined,
.appointments-sales-chip .material-symbols-outlined,
.appointments-sales-filter-btn .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.appointments-sales-search {
    flex: 0 1 420px;
    min-width: 260px;
    min-height: 48px;
}

.appointments-sales-search input {
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-sales-search-clear {
    width: 32px;
    height: 32px;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #8a99ad !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: none !important;
    cursor: pointer;
}

.appointments-sales-search-clear:hover,
.appointments-sales-search-clear:focus-visible {
    background: #f3f4f6 !important;
    color: #152137 !important;
}

.appointments-sales-search-clear[hidden] {
    display: none !important;
}

.appointments-sales-search-clear .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.appointments-sales-chip {
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid #d7dce6;
    background: #ffffff;
    color: #152137;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.appointments-sales-chip:hover {
    background: #f5f7fb;
    border-color: #d0d7e3;
}

.appointments-sales-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
    padding-inline: 1rem;
    border-radius: 999px;
    background: #ffffff;
    color: #152137;
    border: 1px solid #d7dce6;
    box-shadow: none;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline,
.admin-body.admin-page-appointments-sales button.appointments-sales-filter-btn {
    background: #ffffff !important;
    color: #152137 !important;
    border-color: #d7dce6 !important;
}

.appointments-sales-filter-btn:hover,
.appointments-sales-filter-btn:focus-visible {
    background: #f8fafc;
    border-color: #cfd6e2;
    color: #152137;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn:hover,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn:focus-visible,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline:hover,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline:focus-visible,
.admin-body.admin-page-appointments-sales button.appointments-sales-filter-btn:hover,
.admin-body.admin-page-appointments-sales button.appointments-sales-filter-btn:focus-visible {
    background: #f8fafc !important;
    color: #152137 !important;
    border-color: #cfd6e2 !important;
}

.appointments-sales-date-btn {
    appearance: none;
    border: 1px solid #d7dce6;
    cursor: pointer;
}

.appointments-sales-filter-btn.is-active {
    background: #eef0ff;
    border-color: #d8dcff;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.is-active,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.is-active,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline.is-active {
    background: #ffffff !important;
    color: #152137 !important;
    border-color: #d7dce6 !important;
}

.appointments-sales-sort {
    min-width: 360px;
    margin-left: auto;
}

.appointments-sales-sort select {
    min-height: 48px;
    background: #ffffff;
}

.appointments-sales-filters-modal[hidden] {
    display: none;
}

.appointments-sales-filters-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.appointments-sales-filters-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(2px);
}

.appointments-sales-filters-dialog {
    position: relative;
    width: min(720px, 100%);
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #e7eaf1;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
    padding: 2rem;
}

.appointments-sales-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filters-header h2 {
    margin: 0;
    font-size: 1.35rem !important;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.appointments-sales-filters-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-filters-close:hover,
.appointments-sales-filters-close:focus-visible {
    background: #f3f4f6;
}

.appointments-sales-filters-form {
    display: grid;
    gap: 1.5rem;
}

.appointments-sales-filters-field {
    display: grid;
    gap: 0.6rem;
}

.appointments-sales-filters-field > span {
    font-size: 1.02rem;
    font-weight: 800;
    color: #111827;
}

.appointments-sales-filters-field select {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid #d6dce8;
    background: #ffffff;
    color: #152137;
    padding: 0 1rem;
    font-size: 1.04rem;
}

.appointments-sales-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.appointments-sales-filters-reset,
.appointments-sales-filters-apply {
    min-height: 52px;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-filters-reset {
    background: #ffffff;
    border: 1px solid #d7dce6;
    color: #111827;
}

.appointments-sales-filters-apply {
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff;
}

.appointments-sales-date-modal[hidden] {
    display: none;
}

.appointments-sales-date-modal {
    position: fixed;
    inset: 0;
    z-index: 3001;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.appointments-sales-date-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(2px);
}

.appointments-sales-date-dialog {
    position: relative;
    width: min(760px, 100%);
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #e7eaf1;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
    padding: 1.6rem;
}

.appointments-sales-date-form {
    display: grid;
    gap: 1.35rem;
}

.appointments-sales-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-body.admin-page-appointments-sales .appointments-sales-date-header h2 {
    margin: 0;
    color: #101828;
    font-size: 1.35rem !important;
    line-height: 1.2;
    font-weight: 800;
}

.appointments-sales-date-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-date-close:hover,
.appointments-sales-date-close:focus-visible {
    background: #f3f4f6;
}

.appointments-sales-date-field {
    display: grid;
    gap: 0.55rem;
}

.appointments-sales-date-field > span {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
}

.appointments-sales-date-field select,
.appointments-sales-date-field input {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid #d6dce8;
    background: #ffffff;
    color: #152137;
    padding: 0 1rem;
    font-size: 1.04rem;
}

.appointments-sales-date-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.appointments-sales-date-calendars {
    border-top: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
    padding: 1rem 0 0.9rem;
}

.appointments-sales-date-calendars-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.appointments-sales-date-month-titles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.appointments-sales-date-month-titles strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
    text-transform: lowercase;
}

.appointments-sales-date-nav {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-date-nav:hover,
.appointments-sales-date-nav:focus-visible {
    background: #f3f4f6;
    color: #0f172a;
}

.appointments-sales-date-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.appointments-sales-date-weekdays,
.appointments-sales-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.appointments-sales-date-weekdays {
    margin-bottom: 0.45rem;
}

.appointments-sales-date-weekdays span {
    text-align: center;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: lowercase;
}

.appointments-sales-date-empty {
    display: block;
    min-height: 42px;
}

.appointments-sales-date-day {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-sales-date-day.is-in-range {
    background: #f2f4f7;
    border-radius: 12px;
}

.appointments-sales-date-day.is-start,
.appointments-sales-date-day.is-end {
    background: #111111;
    color: #ffffff;
}

.appointments-sales-date-day.is-today:not(.is-start):not(.is-end) {
    box-shadow: inset 0 0 0 1px #d6dce8;
}

.appointments-sales-date-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
}

.appointments-sales-date-cancel,
.appointments-sales-date-apply {
    min-height: 52px;
    padding: 0 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-date-cancel {
    background: #ffffff;
    border: 1px solid #d7dce6;
    color: #111827;
}

.appointments-sales-date-apply {
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff;
}

body.appointments-sales-filters-open {
    overflow: hidden;
}

body.appointments-sales-dates-open {
    overflow: hidden;
}

.appointments-sales-table {
    min-width: 1280px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.appointments-sales-table th {
    white-space: nowrap;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
    background: #f7f9fc;
    color: #111827;
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid #e6edf5;
}

.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table th {
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
    color: #111827 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.appointments-sales-sort-header-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.appointments-sales-sort-header {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.appointments-sales-sort-header:hover,
.appointments-sales-sort-header:focus-visible {
    color: #0f172a;
}

.appointments-sales-sort-header:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.2);
    outline-offset: 3px;
    border-radius: 10px;
}

.appointments-sales-sort-arrows {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.02rem;
    line-height: 0.9;
    color: #98a2b3;
    transform: translateY(0);
}

.appointments-sales-sort-arrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    text-shadow: 0 0 0 currentColor;
}

.appointments-sales-sort-header.is-active .appointments-sales-sort-arrows {
    color: #667085;
}

.appointments-sales-sort-header.is-asc .appointments-sales-sort-arrow-up,
.appointments-sales-sort-header.is-desc .appointments-sales-sort-arrow-down {
    color: #0f172a;
    transform: scale(1.08);
}

.appointments-sales-table td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: top;
    color: #182233;
    font-size: 0.78rem;
    line-height: 1.35;
}

.appointments-sales-table tbody tr {
    transition: background-color 0.18s ease;
}

.appointments-sales-table tbody tr:hover td {
    background: #fbfcff;
}

.appointments-sales-table td:nth-child(2),
.appointments-sales-table td:nth-child(3) {
    color: #101828;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.appointments-sales-client-link {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f56ff;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.16s ease;
}

.appointments-sales-client-link:hover,
.appointments-sales-client-link:focus-visible {
    color: #4f46e5;
    text-decoration: underline;
}

.appointments-sales-client-text {
    color: #101828;
    font: inherit;
    font-weight: 600;
}

.appointments-sales-table td:nth-child(4),
.appointments-sales-table td:nth-child(8),
.appointments-sales-table td:nth-child(9) {
    color: #415066;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.appointments-sales-table th:nth-child(5),
.appointments-sales-table th:nth-child(6),
.appointments-sales-table td:nth-child(5),
.appointments-sales-table td:nth-child(6) {
    text-align: center;
}

.appointments-sales-table th:nth-child(4),
.appointments-sales-table td:nth-child(4) {
    text-align: left;
}

.appointments-sales-table th:nth-child(10),
.appointments-sales-table th:nth-child(11) {
    text-align: center;
}

.appointments-sales-table td:nth-child(10) {
    text-align: right;
}

.appointments-sales-table td:nth-child(11) {
    text-align: center;
}

.appointments-sales-table td:nth-child(11) .appointments-sales-status-stack {
    align-items: center;
}

.appointments-sales-table td:nth-child(5),
.appointments-sales-table td:nth-child(6) {
    color: #415066;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.appointments-sales-table td:nth-child(7) {
    color: #334155;
    font-size: 0.76rem;
}

.appointments-sales-ref {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #f3f1ff;
    border: 1px solid #e2defe;
    color: #5f56ff;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.appointments-sales-ref:hover,
.appointments-sales-ref:focus-visible {
    background: #ece9ff;
    border-color: #d7d0ff;
    color: #4f46e5;
}

.appointments-sales-price {
    white-space: nowrap;
    color: #101828;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: normal;
}

.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table td.appointments-sales-price {
    color: #101828 !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    font-variant-numeric: normal !important;
    text-align: right !important;
}

.appointments-sales-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0.14rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-sales-status-pill.is-reserved {
    background: #e8efff;
    color: #3667f5;
}

.appointments-sales-status-pill.is-confirmed {
    background: #ece7ff;
    color: #5f56ff;
}

.appointments-sales-status-pill.is-waiting {
    background: #fff2dc;
    color: #b46a00;
}

.appointments-sales-status-pill.is-started {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-status-pill.is-completed {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-status-pill.is-canceled,
.appointments-sales-status-pill.is-no-show {
    background: #fde7ec;
    color: #d34163;
}

.appointments-sales-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.appointments-sales-payment-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-size: 0.77rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-sales-payment-pill.is-paid {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-payment-pill.is-partial {
    background: #fff2dc;
    color: #b46a00;
}

.appointments-sales-payment-pill.is-pending {
    background: #edf1f5;
    color: #4d5a6d;
}

.appointments-sales-payment-note {
    display: block;
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
}

.appointments-sales-placeholder {
    min-height: 300px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #64748b;
}

.appointments-sales-placeholder h3 {
    margin: 0 0 0.35rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.appointments-sales-placeholder p {
    margin: 0;
    max-width: 420px;
    font-size: 0.96rem;
    font-weight: 600;
}

@media (max-width: 980px) {
    .appointments-sales-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .appointments-sales-toolbar-main,
    .appointments-sales-toolbar-end {
        width: 100%;
    }

    .appointments-sales-sort {
        min-width: 0;
        width: 100%;
        margin-left: 0;
    }

    .appointments-sales-search {
        min-width: 0;
        width: 100%;
        flex-basis: auto;
    }
}

form[data-appointments-filters] {
    display: contents;
}

.appointments-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-page-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8c6b3d;
}

.appointments-page-head h1 {
    margin: 0;
}

.appointments-page-copy {
    margin: 0.45rem 0 0;
    max-width: 780px;
    color: #5d6b82;
}

.appointments-page-badge {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.6rem 1rem;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #22324b;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-toolbar-panel,
.appointments-calendar-panel,
.appointments-editor-panel,
.appointments-list-panel {
    overflow: hidden;
}

.appointments-toolbar-panel {
    position: sticky;
    top: var(--appointments-sticky-top);
    overflow: visible;
    z-index: 14;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 10px 24px rgba(22, 33, 48, 0.07);
}

.appointments-calendar-panel {
    overflow: visible;
    margin-top: 0;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.appointments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.appointments-toolbar-cluster,
.appointments-toolbar-nav,
.appointments-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.appointments-toolbar-cluster-right {
    margin-left: auto;
}

.appointments-toolbar-chip,
.appointments-toolbar-icon,
.appointments-toolbar-range,
.appointments-toolbar-view,
.appointments-toolbar-picker,
.appointments-toolbar-view-select,
.appointments-toolbar-add-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #ffffff;
    color: #16243c;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.appointments-toolbar-panel button.appointments-toolbar-chip,
.appointments-toolbar-panel button.appointments-toolbar-icon,
.appointments-toolbar-panel button.appointments-toolbar-view-select,
.appointments-toolbar-panel button.appointments-centers-trigger,
.appointments-toolbar-panel button.appointments-members-trigger {
    background: #ffffff;
    color: #16243c;
    border-color: #d7dfe9;
}

.admin-body.admin-page-appointments-calendar [aria-label="Lista de espera"],
.admin-body.admin-page-appointments-calendar [title="Lista de espera"],
.admin-body.admin-page-appointments-calendar [data-tooltip="Lista de espera"],
.admin-body.admin-page-appointments-calendar a[href*="section=waitlist"],
.admin-body.admin-page-appointments-calendar [data-appointments-waitlist-toggle],
.admin-body.admin-page-appointments-calendar [data-waitlist-toggle] {
    display: none !important;
}

.appointments-toolbar-icon {
    width: 46px;
    padding: 0;
}

.appointments-toolbar-icon .material-symbols-outlined,
.appointments-toolbar-picker .material-symbols-outlined,
.appointments-toolbar-view-select .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-toolbar-date-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
}

.appointments-toolbar-date-group .appointments-toolbar-icon,
.appointments-toolbar-date-group .appointments-toolbar-range {
    min-height: 46px;
    border: 0;
    border-radius: 0;
}

.appointments-toolbar-date-group .appointments-toolbar-icon {
    font-size: 0;
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    overflow: hidden;
    text-indent: -9999px;
}

.appointments-toolbar-date-group .appointments-toolbar-icon::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: #172235;
    font-size: 1.15rem;
    line-height: 1;
    text-indent: 0;
}

.appointments-toolbar-icon-prev::before {
    content: 'chevron_left';
}

.appointments-toolbar-icon-next::before {
    content: 'chevron_right';
}

.appointments-toolbar-date-group .appointments-toolbar-range,
.appointments-toolbar-date-group .appointments-toolbar-icon + .appointments-toolbar-range,
.appointments-toolbar-date-group .appointments-toolbar-range + .appointments-toolbar-icon {
    border-left: 1px solid #d7dfe9;
}

.appointments-toolbar-range {
    min-width: 208px;
}

.appointments-toolbar-date-group-with-picker {
    position: relative;
    gap: 0;
    padding: 0;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.appointments-toolbar-date-group-with-picker::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    pointer-events: none;
}

.appointments-week-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    z-index: 80;
}

.appointments-toolbar-date-group-with-picker .appointments-week-picker {
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button {
    min-width: 208px;
    padding: 0 1rem 0 1.1rem;
    gap: 0.42rem;
    line-height: 1;
    border-left: 1px solid #d7dfe9;
    cursor: pointer;
    user-select: none;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-range,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
    width: auto;
    min-width: 0;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-range,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon + .appointments-toolbar-range,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range + .appointments-toolbar-icon,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
    border-left: 0;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
    justify-content: center;
    min-width: 188px;
    padding: 0 1rem 0 1rem;
    gap: 0.3rem;
    white-space: nowrap;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon {
    position: relative;
    z-index: 1;
}

.appointments-toolbar-date-group-with-picker > .appointments-toolbar-icon:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.appointments-toolbar-date-group-with-picker > .appointments-toolbar-icon:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon + .appointments-week-picker,
.appointments-toolbar-date-group-with-picker .appointments-week-picker + .appointments-toolbar-icon {
    box-shadow: inset 1px 0 0 #d7dfe9;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button > span:first-child {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1rem;
    color: #64748b;
    pointer-events: none;
}

.appointments-toolbar-date-group .appointments-week-picker + .appointments-toolbar-icon {
    border-left: 1px solid #d7dfe9;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button:focus-visible {
    outline: 2px solid rgba(95, 79, 255, 0.36);
    outline-offset: -2px;
}

.appointments-week-popover[hidden] {
    display: none;
}

.appointments-week-popover {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: 50%;
    z-index: 81;
    width: min(316px, calc(100vw - 1.25rem));
    padding: 0.9rem;
    border: 1px solid rgba(213, 221, 233, 0.92);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.appointments-week-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.appointments-week-popover-head strong {
    flex: 1 1 auto;
    text-align: center;
    color: #16243c;
    font-size: 1rem;
    font-weight: 800;
    text-transform: capitalize;
}

.appointments-week-nav {
    width: 40px;
    height: 40px;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    background: #ffffff;
    color: #16243c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-week-nav .material-symbols-outlined {
    font-size: 1.22rem;
    line-height: 1;
}

.appointments-week-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin-bottom: 0.9rem;
    color: #5f6f86;
    font-size: 0.72rem;
    font-weight: 700;
}

.appointments-week-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.appointments-week-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    display: inline-block;
}

.appointments-week-status-dot.is-high {
    background: #22c55e;
}

.appointments-week-status-dot.is-medium {
    background: #f59e0b;
}

.appointments-week-status-dot.is-low {
    background: #ef4444;
}

.appointments-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.32rem;
    margin-bottom: 0.42rem;
}

.appointments-weekdays span {
    color: #68778d;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.appointments-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.appointments-week-day {
    position: relative;
    min-width: 0;
    height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #132238;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    padding: 0.2rem 0.14rem;
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    overflow: visible;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.appointments-week-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 0.28rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-week-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 0.12rem);
    min-width: 0;
    min-height: 22px;
    padding: 0.14rem 0.12rem;
    border-radius: 10px;
    background: #eef2f7;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    opacity: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-week-day-count[hidden] {
    display: none !important;
}

.appointments-week-day:hover,
.appointments-week-day:focus-visible {
    background: #f8fbff;
    border-color: #cfd8e5;
    color: #111827;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.appointments-week-day.is-outside {
    color: #94a3b8;
    opacity: 0.58;
    font-weight: 500;
}

.appointments-week-day.is-outside .appointments-week-day-count {
    opacity: 0.82;
}

.appointments-week-day.is-disabled,
.appointments-week-day:disabled {
    cursor: not-allowed;
    pointer-events: auto;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
    opacity: 0.6;
}

.appointments-week-day.is-disabled .appointments-week-day-number,
.appointments-week-day:disabled .appointments-week-day-number {
    background: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
}

.appointments-week-day.is-disabled .appointments-week-day-count,
.appointments-week-day:disabled .appointments-week-day-count {
    background: #e2e8f0;
    color: #64748b;
    box-shadow: none;
}

.appointments-week-day.is-disabled:hover,
.appointments-week-day.is-disabled:focus-visible,
.appointments-week-day:disabled:hover,
.appointments-week-day:disabled:focus-visible {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
}

.appointments-week-day.is-today {
    border-color: #0ea5e9;
    outline: 2px solid rgba(14, 165, 233, 0.55);
    outline-offset: 1px;
    background:
        linear-gradient(180deg, rgba(14, 165, 233, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(14, 165, 233, 0.28),
        0 0 0 3px rgba(186, 230, 253, 0.72);
}

.appointments-week-day.is-today .appointments-week-day-number {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

.appointments-week-day.is-today .appointments-week-day-count {
    border: 1px solid rgba(14, 165, 233, 0.22);
}

.appointments-week-day.is-availability-high {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.32);
    color: #14532d;
}

.appointments-week-day.is-availability-high .appointments-week-day-number {
    background: rgba(34, 197, 94, 0.18);
}

.appointments-week-day.is-availability-high .appointments-week-day-count {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.24);
}

.appointments-week-day.is-availability-medium {
    background: rgba(250, 204, 21, 0.2);
    border-color: rgba(245, 158, 11, 0.34);
    color: #92400e;
}

.appointments-week-day.is-availability-medium .appointments-week-day-number {
    background: rgba(250, 204, 21, 0.3);
}

.appointments-week-day.is-availability-medium .appointments-week-day-count {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.24);
}

.appointments-week-day.is-availability-low {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.24);
    color: #991b1b;
}

.appointments-week-day.is-availability-low .appointments-week-day-number {
    background: rgba(239, 68, 68, 0.18);
}

.appointments-week-day.is-availability-low .appointments-week-day-count {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
}

.appointments-week-day.is-in-week {
    box-shadow: inset 0 0 0 2px rgba(101, 88, 245, 0.45);
}

.appointments-week-day.is-week-start,
.appointments-week-day.is-week-end {
    box-shadow: inset 0 0 0 2px rgba(101, 88, 245, 0.72);
}

.appointments-week-day.is-week-start .appointments-week-day-number,
.appointments-week-day.is-week-end .appointments-week-day-number {
    background: #6558f5;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78);
}

.appointments-week-day.is-today.is-week-start .appointments-week-day-number,
.appointments-week-day.is-today.is-week-end .appointments-week-day-number {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

.appointments-week-day[data-availability-summary][data-availability-times]:hover::before,
.appointments-week-day[data-availability-summary][data-availability-times]:focus-visible::before {
    content: attr(data-availability-summary) "\A" attr(data-availability-times);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.7rem);
    z-index: 3;
    width: min(228px, 78vw);
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(31, 41, 55, 0.96);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.24);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;
    transform: translateX(-50%);
    pointer-events: none;
}

.appointments-week-day[data-availability-summary][data-availability-times]:hover::after,
.appointments-week-day[data-availability-summary][data-availability-times]:focus-visible::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.34rem);
    z-index: 2;
    width: 12px;
    height: 12px;
    background: rgba(31, 41, 55, 0.96);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

@media (max-width: 720px) {
    .appointments-week-popover {
        left: auto;
        right: 0;
        transform: none;
    }
}

.appointments-toolbar-picker {
    position: relative;
    width: 46px;
    padding: 0;
}

.appointments-toolbar-picker.is-disabled {
    opacity: 0.72;
}

.appointments-toolbar-picker .material-symbols-outlined {
    color: #1f2a3b;
}

.appointments-toolbar-picker select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    appearance: none;
    opacity: 0;
    cursor: pointer;
}

.appointments-toolbar-picker select:disabled {
    cursor: default;
}

.appointments-toolbar-icon-muted {
    color: #1f2a3b;
}

.appointments-toolbar-view-select {
    gap: 0.45rem;
    padding-right: 0.85rem;
    cursor: default;
}

.appointments-centers-filter,
.appointments-members-filter {
    position: relative;
}

.appointments-centers-trigger {
    gap: 0.45rem;
    min-width: 118px;
    justify-content: space-between;
    padding-right: 0.85rem;
}

.appointments-centers-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-members-trigger.is-disabled {
    opacity: 0.72;
}

.appointments-centers-menu,
.appointments-members-menu {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 0;
    z-index: 60;
    width: min(300px, calc(100vw - 2rem));
}

.appointments-centers-menu-inner,
.appointments-members-menu-inner {
    padding: 0.65rem;
    border: 1px solid #dde5ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.16);
    text-align: left;
}

.appointments-centers-section + .appointments-centers-section {
    margin-top: 0.75rem;
}

.appointments-centers-section-title {
    display: block;
    padding: 0 0.2rem 0.55rem;
    color: #526176;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.appointments-centers-list,
.appointments-members-presets,
.appointments-members-list {
    display: grid;
    gap: 0.2rem;
}

.appointments-centers-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #172235;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.appointments-centers-item:hover {
    background: #f7f9fc;
}

.appointments-centers-item.is-active {
    background: #f0efff;
}

.appointments-centers-name {
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-centers-check {
    font-size: 1.1rem;
    line-height: 1;
    color: #172235;
}

.appointments-members-preset,
.appointments-members-current-card,
.appointments-members-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.68rem 0.7rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #172235;
    font-size: 0.94rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.appointments-members-preset:hover,
.appointments-members-current-card:hover,
.appointments-members-item:hover {
    background: #f7f9fc;
}

.appointments-members-preset.is-active,
.appointments-members-current-card,
.appointments-members-item.is-active {
    background: #f0efff;
}

.appointments-members-preset.is-disabled,
.appointments-members-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.appointments-members-preset .material-symbols-outlined,
.appointments-members-resource-icon .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.appointments-members-current {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
}

.appointments-members-section {
    margin-top: 0.55rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e9eef5;
}

.appointments-members-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.appointments-members-section-head strong {
    color: #161f32;
    font-size: 0.88rem;
}

.appointments-members-clear {
    border: 0;
    background: transparent;
    color: #5e52ff;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.appointments-members-clear.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.appointments-members-check {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #d1dae6;
    border-radius: 6px;
    background: #ffffff;
    flex: 0 0 22px;
}

.appointments-members-item.is-active .appointments-members-check {
    border-color: #6b5bff;
    background: #6b5bff;
    color: #ffffff;
}

.appointments-members-check .material-symbols-outlined {
    font-size: 0.88rem;
    line-height: 1;
}

.appointments-members-avatar,
.appointments-members-resource-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--member-color, #1e6eb3);
    color: #ffffff;
    overflow: hidden;
    flex: 0 0 24px;
    font-size: 0.82rem;
    font-weight: 700;
}

.appointments-members-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointments-members-resource-icon {
    background: color-mix(in srgb, var(--resource-color, #f3d58c) 22%, #ffffff);
    color: #a47a17;
    border-radius: 8px;
}

.appointments-members-name {
    min-width: 0;
    color: #172235;
    font-size: 0.94rem;
    font-weight: 600;
}

body.has-appointments-filters-drawer {
    overflow: hidden;
}

.appointments-toolbar-filters-trigger {
    position: relative;
}

.appointments-toolbar-filters-trigger.is-active {
    border-color: #5f56ff;
    color: #5f56ff;
}

.appointments-toolbar-filter-count {
    position: absolute;
    top: -0.2rem;
    right: -0.1rem;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #5f56ff;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-filters-drawer[hidden] {
    display: none !important;
}

.appointments-filters-drawer {
    position: fixed;
    inset: 0;
    z-index: 220;
}

.appointments-filters-backdrop {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 14, 24, 0.16);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: none;
    cursor: pointer;
}

.appointments-filters-backdrop:hover,
.appointments-filters-backdrop:focus-visible,
.appointments-filters-backdrop:active {
    background: rgba(9, 14, 24, 0.16);
    border: 0;
    color: transparent;
    box-shadow: none;
    outline: none;
}

.appointments-filters-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    height: 100%;
    background: #ffffff;
    box-shadow: -24px 0 54px rgba(15, 23, 42, 0.12);
}

.appointments-filters-panel-top {
    position: relative;
    padding: 1.15rem 1.15rem 0;
}

.appointments-filters-close {
    position: absolute;
    top: 1.05rem;
    left: 1.05rem;
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d9e1ec;
    border-radius: 999px;
    background: #ffffff;
    color: #172235;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.appointments-filters-close:hover,
.appointments-filters-close:focus-visible {
    background: #f4f7fb;
    border-color: #cfd9e6;
    color: #172235;
}

.appointments-filters-close .material-symbols-outlined {
    font-size: 1.35rem;
}

.appointments-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 4rem;
    padding-right: 0.2rem;
}

.appointments-filters-head h2 {
    margin: 0;
    color: #0d1525;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.appointments-filters-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0 1rem;
    border: 1px solid #d8e0ea;
    border-radius: 999px;
    background: #ffffff;
    color: #111928;
    font-size: 0.96rem;
    font-weight: 700;
}

.appointments-filters-saved {
    display: none !important;
}

.appointments-filters-saved:hover,
.appointments-filters-saved:focus-visible {
    background: #ffffff;
    border-color: #cfd9e6;
    color: #111928;
}

.appointments-filters-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.2rem 1.15rem 1rem;
}

.appointments-filters-section {
    border-bottom: 1px solid #e8edf4;
}

.appointments-filters-section:last-child {
    border-bottom: 0;
}

.appointments-filters-summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 64px;
    padding: 0 1rem;
    list-style: none;
    cursor: pointer;
}

.appointments-filters-summary::-webkit-details-marker {
    display: none;
}

.appointments-filters-summary.is-highlighted {
    border-radius: 12px;
    background: #f4f5f7;
}

.appointments-filters-summary-icon {
    flex: 0 0 auto;
    color: #111928;
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-filters-summary-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #111928;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-filters-summary-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.38rem;
    border-radius: 999px;
    background: #6b5bff;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-filters-summary-count[hidden] {
    display: none !important;
}

.appointments-filters-summary-clear {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111928;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-filters-summary-clear[hidden] {
    display: none !important;
}

.appointments-filters-summary-clear:hover,
.appointments-filters-summary-clear:focus-visible {
    background: transparent;
    color: #111928;
    text-decoration: underline;
}

.appointments-filters-summary-chevron {
    margin-left: auto;
    color: #111928;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.appointments-filters-section[open] .appointments-filters-summary-chevron {
    transform: rotate(180deg);
}

.appointments-filters-options {
    display: grid;
    gap: 0.65rem;
    padding: 0.35rem 1rem 1.25rem 3.35rem;
}

.appointments-filters-options--scroll {
    max-height: 248px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.appointments-filters-check,
.appointments-filters-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #101828;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.appointments-filters-check input,
.appointments-filters-radio input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #5f56ff;
    flex: 0 0 24px;
}

.appointments-filters-check.is-disabled,
.appointments-filters-radio.is-disabled {
    color: #9aa6b6;
}

.appointments-filters-check.is-disabled input,
.appointments-filters-radio.is-disabled input {
    opacity: 0.55;
    cursor: not-allowed;
}

.appointments-filters-help {
    margin: 0.15rem 0 0;
    color: #8b98aa;
    font-size: 0.84rem;
    font-weight: 600;
}

.appointments-filters-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.15rem 1.25rem;
    border-top: 1px solid #e8edf4;
    background: #ffffff;
}

.appointments-filters-reset,
.appointments-filters-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 54px;
    padding: 0 1.3rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.appointments-filters-reset {
    border: 1px solid #d8e0ea;
    background: #ffffff;
    color: #121a29;
}

.appointments-filters-reset:hover,
.appointments-filters-reset:focus-visible {
    background: #f6f8fb;
    border-color: #cfd9e6;
    color: #121a29;
}

.appointments-filters-apply {
    border: 1px solid #0b0b10;
    background: #0b0b10;
    color: #ffffff;
}

.appointments-filters-apply:hover,
.appointments-filters-apply:focus-visible {
    background: #1b1d24;
    border-color: #1b1d24;
}

@media (max-width: 900px) {
    .appointments-filters-panel {
        width: 100vw;
    }

    .appointments-filters-panel-top {
        padding: 1rem 0.85rem 0;
    }

    .appointments-filters-close {
        top: 0.9rem;
        left: 0.85rem;
        width: 46px;
        height: 46px;
    }

    .appointments-filters-head {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-top: 4rem;
    }

    .appointments-filters-head h2 {
        font-size: 1.55rem;
    }

    .appointments-filters-body {
        padding: 1rem 0.85rem;
    }

    .appointments-filters-summary {
        min-height: 60px;
        padding-inline: 0.8rem;
    }

    .appointments-filters-options {
        padding: 0.2rem 0.8rem 1rem 2.85rem;
    }

    .appointments-filters-footer {
        padding: 0.85rem;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .appointments-filters-reset,
    .appointments-filters-apply {
        width: 100%;
        min-width: 0;
    }
}

.appointments-toolbar-add-trigger {
    position: relative;
    gap: 0.45rem;
    padding: 0 1rem;
    border-color: #0f1115;
    background: #0f1115;
    color: transparent;
    font-size: 0;
}

.appointments-toolbar-add-trigger::before {
    content: 'Añadir';
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.appointments-toolbar-add-trigger::after {
    content: '\25BE';
    margin-left: 0.55rem;
    color: #ffffff;
    font-size: 0.9rem;
}

.appointments-toolbar-add-trigger:hover,
.appointments-toolbar-add-trigger:focus-visible {
    background: #1a1d24;
    color: transparent;
}

.appointments-toolbar-chip:hover,
.appointments-toolbar-icon:hover,
.appointments-toolbar-icon:focus-visible,
.appointments-toolbar-view-select:focus-visible {
    border-color: #b7c4d6;
    background: #ffffff;
    color: #111927;
}

.appointments-toolbar-panel button.appointments-toolbar-chip:hover,
.appointments-toolbar-panel button.appointments-toolbar-chip:focus-visible,
.appointments-toolbar-panel button.appointments-toolbar-icon:hover,
.appointments-toolbar-panel button.appointments-toolbar-icon:focus-visible,
.appointments-toolbar-panel button.appointments-toolbar-view-select:hover,
.appointments-toolbar-panel button.appointments-toolbar-view-select:focus-visible,
.appointments-toolbar-panel button.appointments-centers-trigger:hover,
.appointments-toolbar-panel button.appointments-centers-trigger:focus-visible,
.appointments-toolbar-panel button.appointments-members-trigger:hover,
.appointments-toolbar-panel button.appointments-members-trigger:focus-visible,
.appointments-toolbar-panel button.appointments-toolbar-chip:active,
.appointments-toolbar-panel button.appointments-toolbar-icon:active,
.appointments-toolbar-panel button.appointments-toolbar-view-select:active,
.appointments-toolbar-panel button.appointments-centers-trigger:active,
.appointments-toolbar-panel button.appointments-members-trigger:active {
    background: #ffffff;
    color: #111927;
    border-color: #b7c4d6;
}

.appointments-calendar-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: -0.55rem;
    margin-bottom: 0;
    padding: 0 1.2rem 0.9rem;
}

.appointments-calendar-summary-staff {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.appointments-calendar-summary-avatar {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--member-color, #6b5bff);
    color: #ffffff;
    overflow: hidden;
    flex: 0 0 52px;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-calendar-summary-avatar.is-photo {
    background: #eef2ff;
}

.appointments-calendar-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointments-calendar-summary-copy {
    min-width: 0;
}

.appointments-calendar-summary h2,
.appointments-panel-head h2 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.2;
}

.appointments-calendar-summary p,
.appointments-panel-head p {
    margin: 0.3rem 0 0;
    color: #5d6b82;
    font-size: 0.95rem;
}

.appointments-calendar-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    color: #617188;
    font-size: 0.92rem;
}

.appointments-calendar-empty-state {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding: 1.1rem 1.2rem;
    border: 1px dashed #cad2dc;
    border-radius: 14px;
    background: #fbfcfe;
    color: #526176;
}

.appointments-calendar-empty-state strong {
    color: #172235;
    font-size: 1rem;
    font-weight: 700;
}

.appointments-calendar-empty-state p {
    margin: 0;
    color: #5d6b82;
    font-size: 0.93rem;
}

.appointments-calendar-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: #9ad9f5;
}

.appointments-calendar-dot.is-blocked {
    background: repeating-linear-gradient(135deg, #d7deea 0, #d7deea 4px, #f1f4f9 4px, #f1f4f9 8px);
}

.appointments-calendar-dot.is-timeoff {
    background: linear-gradient(135deg, #f5f6fb 0%, #dfe4f1 100%);
    border: 1px solid rgba(102, 117, 143, 0.28);
}

.appointments-calendar-dot.is-buffer {
    background: #c8b6ff;
}

.appointments-calendar-board {
    width: 100%;
    min-width: 1040px;
}

.appointments-calendar-top {
    position: sticky;
    top: calc(var(--appointments-sticky-top) + var(--appointments-toolbar-sticky-height));
    z-index: 10;
    background: #ffffff;
    width: 100%;
}

.appointments-calendar-head {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.appointments-calendar-head-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    position: sticky;
    left: 0;
    border-right: 1px solid #e4eaf2;
    border-bottom: 1px solid #e4eaf2;
    background: #ffffff;
    color: #68788f;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 3;
}

.appointments-calendar-head-days,
.appointments-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(160px, 1fr));
}

.appointments-calendar-day-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 66px;
    padding: 0 1rem;
    border-right: 1px solid #e4eaf2;
    border-bottom: 1px solid #e4eaf2;
    background: #ffffff;
}

.appointments-calendar-day-title small {
    display: block;
    color: #94a0b3;
    font-size: 0.9rem;
}

.appointments-calendar-day-title strong {
    color: #243149;
    font-size: 1rem;
}

.appointments-calendar-day-chip {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #eef2f7;
    color: #243149;
    font-weight: 800;
}

.appointments-calendar-day-title.is-today .appointments-calendar-day-chip {
    background: #6b5bff;
    color: #ffffff;
}

.appointments-calendar-day-title.is-today small,
.appointments-calendar-day-title.is-today strong {
    color: #4d3bf1;
}

.appointments-calendar-grid-wrap {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    width: 100%;
}

.appointments-calendar-time-rail {
    position: sticky;
    left: 0;
    border-right: 1px solid #e4eaf2;
    background: #ffffff;
    z-index: 2;
}

.appointments-calendar-time-cell {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-end;
    height: calc(var(--appointments-hour-height) / 4);
    padding: 0 0.45rem 0 0;
    border-bottom: 1px solid #f1f4f8;
    color: #9aa4b3;
    font-size: 0.72rem;
    font-weight: 600;
}

.appointments-calendar-time-cell.is-hour {
    color: #172235;
    font-weight: 800;
}

.appointments-calendar-time-cell.is-selected,
.appointments-calendar-time-cell.is-hover {
    position: relative;
    z-index: 3;
    color: #5f4fff;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 0 0 2px #6a59ff;
}

.appointments-calendar-time-cell.is-hover {
    color: rgba(95, 79, 255, 0.9);
    box-shadow: inset 0 0 0 2px rgba(106, 89, 255, 0.72);
    background: rgba(255, 255, 255, 0.84);
}

.appointments-calendar-time-selection {
    position: absolute;
    inset-inline: 0.1rem 0.18rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.42rem 0 0.28rem;
    border: 2px solid #6a59ff;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.98);
    color: #5f4fff;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.appointments-calendar-time-selection.is-hover {
    border-color: rgba(106, 89, 255, 0.72);
    background: rgba(255, 255, 255, 0.84);
    color: rgba(95, 79, 255, 0.9);
}

.appointments-calendar-day {
    position: relative;
    height: calc(var(--appointments-hour-height) * var(--appointments-visible-minutes, 1440) / 60);
    border-right: 1px solid #e4eaf2;
    border-bottom: 1px solid #eef2f7;
    background-color: #ffffff;
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(117, 131, 151, 0.1) 0,
            rgba(117, 131, 151, 0.1) 1px,
            transparent 1px,
            transparent calc(var(--appointments-hour-height) / 4)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--appointments-hour-height) - 1px),
            rgba(117, 131, 151, 0.18) calc(var(--appointments-hour-height) - 1px),
            rgba(117, 131, 151, 0.18) var(--appointments-hour-height)
        );
}

.appointments-calendar-day.is-clickable {
    cursor: default;
}

.appointments-calendar-day.is-past {
    background-color: #fbfcfe;
}

.appointments-calendar-day.is-past.is-clickable {
    cursor: not-allowed;
}

.appointments-calendar-day.is-today {
    background-color: #fcfdff;
}

.appointments-calendar-blocked {
    position: absolute;
    inset-inline: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(220, 227, 237, 0.85) 0,
        rgba(220, 227, 237, 0.85) 4px,
        rgba(248, 250, 252, 0.96) 4px,
        rgba(248, 250, 252, 0.96) 8px
    );
    border-top: 1px solid rgba(163, 174, 189, 0.16);
    border-bottom: 1px solid rgba(163, 174, 189, 0.16);
    z-index: 1;
    pointer-events: none;
}

.appointments-calendar-timeoff {
    position: absolute;
    inset-inline: 0.24rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.34rem 0.38rem;
    border: 1px solid rgba(124, 137, 163, 0.34);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(248, 249, 253, 0.97) 0%, rgba(233, 237, 246, 0.95) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    color: #314055;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.appointments-calendar-timeoff::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(173, 181, 198, 0.12) 0,
        rgba(173, 181, 198, 0.12) 6px,
        rgba(255, 255, 255, 0) 6px,
        rgba(255, 255, 255, 0) 12px
    );
    pointer-events: none;
}

.appointments-calendar-timeoff strong,
.appointments-calendar-timeoff small {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-timeoff strong {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
}

.appointments-calendar-timeoff small {
    font-size: 0.69rem;
    font-weight: 700;
    color: #526179;
    line-height: 1.1;
}

.appointments-calendar-now-line {
    position: absolute;
    inset-inline: 0;
    height: 2px;
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
    z-index: 5;
    pointer-events: none;
}

.appointments-calendar-selection {
    position: absolute;
    inset-inline: 0.04rem;
    display: flex;
    align-items: center;
    min-height: calc(var(--appointments-hour-height) / 4);
    height: calc(var(--appointments-hour-height) / 4);
    padding: 0 0.55rem;
    border: 2px solid #6a59ff;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.96);
    color: #5f4fff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.appointments-calendar-selection.is-hover {
    border-color: rgba(106, 89, 255, 0.72);
    background: rgba(255, 255, 255, 0.82);
    color: rgba(95, 79, 255, 0.9);
}

.appointments-calendar-event {
    position: absolute;
    inset-inline: 0.04rem;
    display: block;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--appointment-accent, #6b5bff) 34%, #d8e6f5);
    border-radius: 6px;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 26%, #ffffff);
    box-shadow: none;
    text-decoration: none;
    z-index: 4;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.appointments-calendar-event:hover {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.appointments-calendar-event[data-appointment-status="no_show"] {
    border-color: #f29ab0;
    background: #ffe3ea;
    cursor: default;
}

.appointments-calendar-event[data-appointment-status="no_show"]:hover {
    box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.appointments-calendar-event[data-appointment-status="no_show"].is-slot-exposing {
    transform: translateX(-18px);
}

.appointments-calendar-event.is-compact .appointments-calendar-event-core,
.appointments-calendar-event.is-compact .appointments-calendar-event-plain {
    justify-content: center;
    gap: 0;
    padding-top: 0.18rem;
    padding-right: 1.35rem;
    padding-bottom: 0.18rem;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-buffer {
    display: none !important;
}

.appointments-calendar-event.is-compact.has-processing-time .appointments-calendar-event-core {
    justify-content: flex-start;
    padding-top: 0.18rem;
    padding-bottom: 0.08rem;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 32%, #ffffff);
    box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.16);
    z-index: 2;
}

.appointments-calendar-event.is-compact.has-processing-time {
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 22%, #ffffff);
}

.appointments-calendar-event.is-compact.has-processing-time::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(100% - var(--appointment-after-visible-percent, 0%));
    border-top: 1px dashed rgba(99, 102, 241, 0.36);
    z-index: 1;
    pointer-events: none;
}

.appointments-calendar-event.is-compact.has-processing-time .appointments-calendar-event-buffer.is-after {
    display: flex !important;
    align-items: flex-start;
    inset-inline: 0;
    padding: 0.06rem 0.34rem 0 0.34rem;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 18%, #ffffff);
    border-top: 1px dashed rgba(99, 102, 241, 0.36);
    z-index: 1;
}

.appointments-calendar-event.is-compact.has-processing-time .appointments-calendar-event-buffer.is-after span {
    display: block !important;
    font-size: 0.64rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5f4fff;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-service,
.appointments-calendar-event.is-compact .appointments-calendar-event-services,
.appointments-calendar-event.is-compact small,
.appointments-calendar-event.is-compact .appointments-calendar-event-meta {
    display: none !important;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-client {
    display: block !important;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.05;
    color: #17253d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-calendar-event.is-compact strong {
    font-size: 0.78rem;
    line-height: 1.08;
}

.appointments-calendar-event.is-drag-origin {
    opacity: 0.2;
    cursor: grabbing;
}

.appointments-calendar-event.is-preview-hidden {
    opacity: 0;
    pointer-events: none;
}

.appointments-calendar-event.appointments-calendar-event-preview {
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.appointments-calendar-event.appointments-calendar-event-preview .appointments-calendar-event-status-icon {
    opacity: 0.95;
}

.appointments-calendar-drag-preview {
    z-index: 9;
    pointer-events: none;
    opacity: 0.94;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    cursor: grabbing;
}

body.appointments-calendar-dragging,
body.appointments-calendar-dragging * {
    cursor: grabbing !important;
}

.appointments-calendar-event-core,
.appointments-calendar-event-plain {
    position: absolute;
    inset-inline: 0.12rem 0.16rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.18rem;
    padding: 0.28rem 1.55rem 0.28rem 0.42rem;
    border-radius: 0;
    background: transparent;
    color: #17253d;
    box-sizing: border-box;
    overflow: hidden;
}

.appointments-calendar-event-plain {
    inset: 0.12rem 0.14rem;
}

.appointments-calendar-event-core {
    padding-bottom: 0.36rem;
}

.appointments-calendar-event.has-processing-time {
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 20%, #ffffff);
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-core {
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 32%, #ffffff);
    box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.16);
    gap: 0.08rem;
    padding: 0.16rem 1.3rem 0.04rem 0.34rem;
}

.appointments-calendar-event.has-processing-time strong {
    font-size: 0.78rem;
    line-height: 1.04;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-client {
    font-size: 0.73rem;
    line-height: 1.02;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-service {
    font-size: 0.72rem;
    line-height: 1.02;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-services {
    gap: 0.02rem;
}

.appointments-calendar-event-buffer {
    position: absolute;
    inset-inline: 0.12rem 0.16rem;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    padding: 0 0.42rem;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
}

.appointments-calendar-event-buffer.is-before {
    border-bottom: 1px dashed rgba(99, 102, 241, 0.24);
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 14%, #ffffff);
    align-items: flex-end;
    padding-bottom: 0.08rem;
}

.appointments-calendar-event-buffer.is-after {
    border-top: 2px dashed rgba(99, 102, 241, 0.32);
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 18%, #ffffff);
    padding-top: 0.08rem;
}

.appointments-calendar-event[data-appointment-status="no_show"] .appointments-calendar-event-buffer.is-before {
    border-bottom-color: rgba(225, 29, 72, 0.24);
    background: rgba(225, 29, 72, 0.08);
}

.appointments-calendar-event[data-appointment-status="no_show"] .appointments-calendar-event-buffer.is-after {
    border-top-color: rgba(225, 29, 72, 0.24);
    background: rgba(225, 29, 72, 0.1);
}

.appointments-calendar-event-buffer span {
    display: block;
    width: 100%;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.02;
    color: #5b4b94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-calendar-event-status-icon {
    position: absolute;
    top: 0.14rem;
    right: 0.14rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--appointment-status-color, #1f2937);
    font-size: 1.36rem;
    line-height: 1;
    pointer-events: auto;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-status-icon {
    top: 50%;
    right: 0.22rem;
    transform: translateY(-50%);
    font-size: 1.18rem;
}

.appointments-calendar-event strong,
.appointments-calendar-event span,
.appointments-calendar-event small,
.appointments-calendar-event-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-event strong {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.12;
}

.appointments-calendar-event span {
    font-size: 0.8rem;
    line-height: 1.12;
}

.appointments-calendar-event-client {
    color: #1f2f46;
    font-size: 0.78rem;
    font-weight: 800;
}

.appointments-calendar-event-service {
    color: #17253d;
    font-weight: 500;
}

.appointments-calendar-event-services {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.appointments-calendar-event small,
.appointments-calendar-event-meta {
    display: none;
}

.appointments-calendar-event-meta {
    position: absolute;
    inset-inline: 0.48rem;
    bottom: 0.22rem;
}

.appointments-calendar-hover-card {
    --appointment-hover-color: #3b82f6;
    position: fixed;
    z-index: 1450;
    width: min(370px, calc(100vw - 2rem));
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    pointer-events: none;
}

.appointments-calendar-hover-card[hidden] {
    display: none !important;
}

.appointments-calendar-status-tooltip {
    position: fixed;
    z-index: 1505;
    padding: 0.34rem 0.58rem;
    border-radius: 0.72rem;
    background: #0b0b0f;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.appointments-calendar-status-tooltip[hidden] {
    display: none !important;
}

.appointments-calendar-hover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--appointment-hover-color);
    color: #ffffff;
}

.appointments-calendar-hover-head strong,
.appointments-calendar-hover-head span {
    color: inherit;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-calendar-hover-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.appointments-calendar-hover-status .material-symbols-outlined {
    font-size: 1.18rem;
    line-height: 1;
}

.appointments-calendar-hover-body {
    display: grid;
    gap: 1.45rem;
    padding: 1.15rem 1.2rem 1.25rem;
}

.appointments-calendar-hover-client {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.appointments-calendar-hover-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #eef0ff;
    color: #5f4fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.appointments-calendar-hover-copy {
    min-width: 0;
}

.appointments-calendar-hover-copy strong,
.appointments-calendar-hover-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-hover-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-calendar-hover-copy span {
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.95rem;
}

.appointments-calendar-hover-folio {
    margin-top: 0.34rem;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.appointments-calendar-hover-service-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-calendar-hover-service-copy {
    min-width: 0;
}

.appointments-calendar-hover-service-copy strong,
.appointments-calendar-hover-service-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-hover-service-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.appointments-calendar-hover-service-copy span {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.94rem;
}

.appointments-calendar-hover-price {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.appointments-calendar-hover-channel {
    margin-top: -0.55rem;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.appointments-bottom-grid {
    position: fixed;
    top: 68px;
    right: 0;
    bottom: 0;
    z-index: 1350;
    display: none !important;
    width: min(460px, calc(100vw - 1.25rem));
    margin: 0;
    padding: 0;
    background: transparent;
}

.appointments-bottom-grid[hidden] {
    display: none !important;
}

.appointments-editor-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border-radius: 18px 0 0 18px;
    border-right: 0;
    box-shadow: -14px 0 32px rgba(15, 23, 42, 0.12);
    overflow: auto;
}

.appointments-list-panel {
    display: none !important;
}

.appointments-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-editor-close {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2d43;
    cursor: pointer;
}

.appointments-editor-close .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-editor-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.appointments-editor-form textarea {
    min-height: 120px;
}

.appointments-editor-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.appointments-list-actions {
    min-width: 240px;
}

.appointments-status-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.appointments-status-form select {
    min-width: 150px;
}

body.has-appointments-modal,
body.has-appointments-reschedule-modal,
body.has-appointments-cancel-modal {
    overflow: hidden;
}

.appointments-cancel-modal {
    position: fixed;
    inset: 0;
    z-index: 1652;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #ffffff;
}

.appointments-cancel-modal.is-open {
    display: flex;
}

.appointments-cancel-dialog {
    width: 100vw;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow-y: auto;
}

.appointments-cancel-form {
    display: grid;
    gap: 1.75rem;
    min-height: 100vh;
    align-content: start;
    padding: 2rem 2.5rem 3rem;
}

.appointments-cancel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(1240px, 100%);
    margin: 0 auto;
}

.appointments-cancel-topbar-spacer {
    min-width: 1px;
    min-height: 1px;
}

.appointments-cancel-close {
    min-height: 48px;
    padding: 0 1.3rem;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-cancel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
    gap: 2rem;
    align-items: start;
    width: min(1240px, 100%);
    margin: 3.75rem auto 0;
}

.appointments-cancel-main {
    display: grid;
    gap: 1.25rem;
    padding: 1.2rem 0 0;
}

.appointments-cancel-head h2 {
    margin: 0;
    color: #111827;
    font-size: 3rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.appointments-cancel-head p {
    margin: 0.7rem 0 0;
    color: #64748b;
    font-size: 1.12rem;
    line-height: 1.45;
}

.appointments-cancel-note {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid #d8ddff;
    border-radius: 12px;
    background: #eef0ff;
}

.appointments-cancel-note-icon {
    color: #6358e7;
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-cancel-note-copy {
    display: grid;
    gap: 0.26rem;
}

.appointments-cancel-note-copy strong,
.appointments-cancel-note-copy small {
    display: block;
}

.appointments-cancel-note-copy strong {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.appointments-cancel-note-copy small {
    color: #5f6b81;
    font-size: 0.94rem;
    line-height: 1.5;
}

.appointments-cancel-field {
    display: grid;
    gap: 0.55rem;
}

.appointments-cancel-field > span {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointments-cancel-field select {
    width: 100%;
    min-height: 56px;
    border: 1px solid #d5dbe7;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.85rem 1rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.appointments-cancel-notify {
    margin-top: 0.15rem;
}

.appointments-cancel-side {
    display: grid;
    gap: 1rem;
    padding: 2.35rem 2rem 2rem;
    border: 1px solid #e3e6ee;
    border-radius: 22px;
    background: #ffffff;
}

.appointments-cancel-side h3 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
}

.appointments-cancel-side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eaedf3;
}

.appointments-cancel-side-row span {
    color: #374151;
    font-size: 0.98rem;
    line-height: 1.45;
}

.appointments-cancel-side-row strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-cancel-side-copy {
    margin: -0.15rem 0 0;
    color: #6b7280;
    font-size: 0.98rem;
    line-height: 1.55;
}

.appointments-cancel-submit {
    min-height: 58px;
    margin-top: 1rem;
    border: 0;
    border-radius: 999px;
    background: #dc143c;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-no-show-modal .appointments-cancel-form {
    padding-top: 0.8rem;
}

.appointments-no-show-header {
    width: min(1260px, calc(100% - 4rem));
    margin: 2.2rem auto 0;
}

.appointments-no-show-modal .appointments-cancel-topbar,
.appointments-no-show-modal .appointments-cancel-layout {
    width: min(1260px, calc(100% - 4rem));
}

.appointments-no-show-modal .appointments-cancel-layout {
    grid-template-columns: minmax(0, 1.62fr) minmax(410px, 0.82fr);
    gap: 5.8rem;
    margin-top: 1.9rem;
}

.appointments-no-show-modal .appointments-cancel-main {
    gap: 1.7rem;
    padding-top: 0.15rem;
}

.appointments-no-show-modal .appointments-cancel-head h2 {
    font-size: 2.95rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.appointments-no-show-modal .appointments-cancel-note {
    max-width: 646px;
    padding: 1.15rem 1.2rem;
}

.appointments-no-show-modal .appointments-cancel-note-copy strong {
    font-size: 0.96rem;
    font-weight: 500;
}

.appointments-no-show-modal .appointments-cancel-side {
    max-width: 446px;
    padding: 2.3rem 2.35rem 2.15rem;
    border-radius: 20px;
}

.appointments-no-show-modal .appointments-cancel-side h3 {
    font-size: 1.02rem;
}

.appointments-no-show-modal .appointments-cancel-side-copy {
    margin-top: -0.05rem;
}

.appointments-no-show-modal .appointments-cancel-submit {
    margin-top: 1.5rem;
}

.appointments-reschedule-modal {
    position: fixed;
    inset: 0;
    z-index: 1650;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(2px);
}

.appointments-reschedule-modal.is-open {
    display: flex;
}

.appointments-reschedule-dialog {
    position: relative;
    width: min(720px, 100%);
    border: 1px solid #dfe4ec;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 54px rgba(15, 23, 42, 0.18);
}

.appointments-reschedule-close {
    position: absolute;
    top: 1.15rem;
    right: 1.2rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1f2937;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-reschedule-form {
    display: grid;
    gap: 1.6rem;
    padding: 1.9rem 2.4rem 2rem;
}

.appointments-reschedule-head h2 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.1;
}

.appointments-reschedule-head p {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
}

.appointments-reschedule-toggle {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 0.95rem;
    cursor: pointer;
}

.appointments-reschedule-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointments-reschedule-check {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 0.05rem;
    border: 1px solid #d4daea;
    border-radius: 7px;
    background: #ffffff;
    color: transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.appointments-reschedule-check .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.appointments-reschedule-toggle input[type="checkbox"]:checked + .appointments-reschedule-check {
    border-color: #6a59ff;
    background: #6a59ff;
    color: #ffffff;
}

.appointments-reschedule-toggle input[type="checkbox"]:disabled + .appointments-reschedule-check {
    opacity: 0.45;
}

.appointments-reschedule-toggle.is-disabled {
    cursor: default;
}

.appointments-reschedule-copy strong,
.appointments-reschedule-copy small {
    display: block;
}

.appointments-reschedule-copy strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.appointments-reschedule-copy small {
    margin-top: 0.35rem;
    color: #94a3b8;
    font-size: 0.98rem;
    line-height: 1.55;
}

.appointments-reschedule-toggle.is-disabled .appointments-reschedule-copy strong {
    color: #64748b;
}

.appointments-reschedule-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.appointments-reschedule-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 0.8rem;
    border: 1px solid #d8deef;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.appointments-reschedule-channel.is-on {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.appointments-reschedule-channel.is-off {
    color: #94a3b8;
    text-decoration: line-through;
    opacity: 0.9;
}

.appointments-reschedule-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.appointments-reschedule-cancel,
.appointments-reschedule-submit {
    min-height: 52px;
    padding: 0 1.7rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-reschedule-cancel {
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #111827;
}

.appointments-reschedule-submit {
    border: 0;
    background: #0f1115;
    color: #ffffff;
}

@media (max-width: 980px) {
    .appointments-cancel-layout {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 1.75rem;
    }

    .appointments-cancel-main {
        padding-left: 0;
    }

    .appointments-cancel-head h2 {
        font-size: 2.35rem;
    }

    .appointments-cancel-side {
        padding: 1.4rem 1.2rem 1.25rem;
    }

    .appointments-cancel-form {
        padding: 1.2rem 1rem 1.75rem;
    }

    .appointments-cancel-topbar {
        width: 100%;
    }

    .appointments-cancel-layout {
        width: 100%;
    }
}

.appointments-quick-popover {
    position: fixed;
    z-index: 1400;
}

.appointments-quick-card {
    min-width: 306px;
    padding: 0 0 0.45rem;
    border: 1px solid #dfe3ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.appointments-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 50px;
    padding: 0 1.05rem;
    margin-bottom: 0.2rem;
    background: #f7f7f8;
    border-bottom: 1px solid #eceff4;
}

.appointments-quick-head strong {
    color: #111927;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
}

.appointments-quick-close {
    border: 0;
    background: transparent;
    color: #1f2d43;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-quick-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    width: 100%;
    min-height: 50px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2d43;
    font-size: 0.96rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.appointments-quick-action span:last-child {
    flex: 1 1 auto;
    text-align: left;
}

.appointments-quick-action .material-symbols-outlined {
    flex: 0 0 22px;
    color: #1f2d43;
    font-size: 1.18rem;
    line-height: 1;
}

.appointments-quick-action:hover {
    background: #f4f6fb;
}

.appointments-quick-action.is-disabled {
    opacity: 1;
    color: #1f2d43;
    cursor: default;
}

.appointments-quick-link {
    display: block;
    padding: 0.8rem 1.05rem 0.55rem;
    color: #6b5bff;
    font-size: 0.95rem;
    font-weight: 700;
}

.appointments-service-selector {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 78px;
    z-index: 1500;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: transparent;
    backdrop-filter: none;
}

.appointments-service-selector[hidden] {
    display: none !important;
}

.appointments-service-selector:not(.is-summary) [data-service-summary-view] {
    display: none !important;
}

.appointments-service-selector.is-summary [data-service-picker-view] {
    display: none !important;
}

.appointments-service-selector-shell {
    display: grid;
    grid-template-columns: 84px var(--appointments-client-panel-width, 272px) minmax(0, 1fr);
    width: min(960px, calc(100vw - 78px));
    height: 100%;
    margin: 0;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.appointments-service-selector.is-summary {
    --appointments-client-panel-width: 305px;
}

.appointments-service-selector.is-summary .appointments-service-selector-shell {
    width: min(860px, calc(100vw - 78px));
}

.admin-body {
    --appointments-checkout-drawer-width: 1400px;
    --appointments-checkout-side-width: 430px;
    --appointments-payment-dialog-width: 760px;
    --appointments-payment-cash-width: 560px;
    --appointments-payment-giftcard-width: 520px;
    --appointments-payment-split-width: 760px;
}

.appointments-service-selector.is-checkout .appointments-service-selector-shell {
    grid-template-columns: 84px minmax(0, 1fr);
    width: min(var(--appointments-checkout-drawer-width), calc(100vw - 78px));
}

.appointments-service-selector.is-checkout .appointments-service-selector-tools {
    padding: 0.45rem 0.55rem;
    background: #0f1724;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.appointments-service-selector.is-checkout .appointments-service-selector-tool {
    border-color: rgba(203, 213, 225, 0.65);
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.appointments-service-selector.is-checkout .appointments-service-selector-tool.is-static {
    background: #f8fafc;
}

.appointments-service-selector.is-checkout .appointments-service-selector-side {
    display: none;
}

.appointments-service-selector.is-checkout .appointments-service-selector-main {
    padding: 0;
}

.appointments-service-selector.is-picker-returnable {
    --appointments-client-panel-width: 305px;
}

.appointments-service-selector.is-picker-returnable .appointments-service-selector-shell {
    width: min(860px, calc(100vw - 78px));
}

.appointments-service-selector.is-client-picker-open {
    --appointments-client-panel-width: 336px;
}

.appointments-service-selector-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.75rem 0.85rem 0.5rem;
    background: transparent;
    border-right: 0;
}

.appointments-service-selector-tool {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #22324b;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.appointments-service-selector-tool .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.appointments-service-selector-close {
    cursor: pointer;
}

.appointments-service-selector-tool.is-static {
    color: #2a3850;
}

.appointments-service-selector-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: #f6f7f9;
    border-left: 1px solid #e6ecf3;
    border-right: 1px solid #e4eaf2;
    overflow: hidden;
}

.appointments-service-selector-client-trigger {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 100%;
    padding: 2rem 1.2rem 1.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.appointments-service-selector-client-trigger[hidden] {
    display: none !important;
}

.appointments-service-selector.is-client-picker-open .appointments-service-selector-client-trigger,
.appointments-service-selector.is-client-picker-open .appointments-service-selector-context,
.appointments-service-selector.is-client-picker-open .appointments-service-selector-client-current {
    display: none !important;
}

.appointments-service-selector-sidecopy {
    width: 100%;
    margin-top: 4.1rem;
    text-align: center;
}

.appointments-service-selector-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1.35rem;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.1);
    color: #6b5bff;
}

.appointments-service-selector-icon .material-symbols-outlined {
    font-size: 1.8rem;
    line-height: 1;
}

.appointments-service-selector-sidecopy h3 {
    margin: 0;
    color: #1d2c44;
    font-size: 1.02rem;
    line-height: 1.35;
}

.appointments-service-selector-sidecopy p {
    margin: 0.45rem auto 0;
    max-width: 116px;
    color: #65748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.appointments-service-selector-sidecopy[hidden],
.appointments-service-selector-client-trigger[hidden],
.appointments-service-selector-client-current[hidden] {
    display: none !important;
}

.appointments-service-selector-client-current {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
}

.appointments-service-selector-client-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.12);
    color: #6b5bff;
    font-size: 1.15rem;
    font-weight: 800;
}

.appointments-service-selector-client-avatar--hero {
    width: 98px;
    height: 98px;
    margin: 0 auto;
    font-size: 2rem;
}

.appointments-service-selector-client-copy {
    display: grid;
    gap: 0.18rem;
}

.appointments-service-selector-client-copy strong {
    color: #1d2c44;
    font-size: 1.02rem;
    line-height: 1.35;
}

.appointments-service-selector-client-copy small {
    color: #65748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.appointments-service-selector-client-card {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 0.82rem;
    min-height: 100%;
    padding: 1.35rem 0 1.05rem;
}

.appointments-service-selector-client-card .appointments-service-selector-client-copy {
    justify-items: center;
    padding: 0 1.25rem;
    text-align: center;
    gap: 0.22rem;
}

.appointments-service-selector-client-card .appointments-service-selector-client-copy strong {
    display: block;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.12;
    font-weight: 700;
}

.appointments-service-selector-client-card .appointments-service-selector-client-copy small {
    display: block;
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.2;
}

.appointments-service-selector-client-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.2rem 1rem 1.1rem;
    border-bottom: 1px solid #e8eef5;
}

.appointments-service-selector-client-actions-wrap {
    position: relative;
    flex: 0 0 auto;
}

.appointments-service-selector-client-actions-toggle,
.appointments-service-selector-client-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: auto;
    min-height: 42px;
    min-width: 106px;
    padding: 0 1.05rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.appointments-service-selector-client-profile-link {
    flex: 0 0 auto;
    min-width: 96px;
    border-color: #d6deea;
    background: #ffffff;
    color: #111827;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
}

.appointments-service-selector-client-actions-toggle:hover,
.appointments-service-selector-client-profile-link:hover {
    text-decoration: none;
}

.appointments-service-selector-client-actions-toggle .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointments-service-selector-client-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: grid;
    min-width: 286px;
    padding: 0.5rem 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.appointments-service-selector-client-actions-menu[hidden] {
    display: none !important;
}

.appointments-service-selector-client-actions-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.95rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 500;
    text-decoration: none;
}

.appointments-service-selector-client-actions-option:hover {
    background: #f8fafc;
}

.appointments-service-selector-client-actions-option .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-selector-client-actions-option.is-danger {
    color: #e11d48;
}

.appointments-service-selector-client-actions-divider {
    height: 1px;
    margin: 0.35rem 0.95rem;
    background: #e8eef5;
}

.appointments-service-selector-client-actions-title {
    margin: 0.3rem 0.95rem 0.35rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appointments-service-selector-client-actions-option[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.appointments-service-selector-client-profile-link[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.appointments-service-selector-client-details {
    display: grid;
    gap: 1rem;
    padding: 0 1.5rem;
    align-content: flex-start;
}

.appointments-service-selector-client-detail {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    color: #5f6f86;
    font-size: 0.93rem;
    line-height: 1.4;
}

.appointments-service-selector-client-detail .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
    color: #1f2d43;
}

.appointments-service-selector-context {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.7rem;
}

.appointments-service-selector-context[hidden] {
    display: none !important;
}

.appointments-service-selector-context small {
    display: block;
    margin-bottom: 0.18rem;
    color: #7b889d;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.appointments-service-selector-context strong {
    color: #1d2c44;
    font-size: 1rem;
}

.appointments-service-selector-main {
    display: grid;
    padding: 1.95rem 2rem 1.5rem;
    min-height: 0;
    background: #ffffff;
    overflow: hidden;
}

.appointments-service-selector-stage,
.appointments-service-client-picker,
.appointments-service-summary,
.appointments-service-checkout {
    display: grid;
    min-height: 0;
}

.appointments-service-selector-stage,
.appointments-service-summary,
.appointments-service-checkout {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    will-change: transform, opacity;
}

.appointments-service-selector-stage.is-view-active,
.appointments-service-summary.is-view-active,
.appointments-service-checkout.is-view-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.appointments-service-selector-stage.is-enter-from-right,
.appointments-service-summary.is-enter-from-right,
.appointments-service-checkout.is-enter-from-right {
    opacity: 0;
    transform: translateX(34px);
}

.appointments-service-selector-stage.is-enter-from-left,
.appointments-service-summary.is-enter-from-left,
.appointments-service-checkout.is-enter-from-left {
    opacity: 0;
    transform: translateX(-34px);
}

.appointments-service-selector-stage.is-exit-to-left,
.appointments-service-summary.is-exit-to-left,
.appointments-service-checkout.is-exit-to-left {
    opacity: 0;
    transform: translateX(-34px);
    pointer-events: none;
}

.appointments-service-selector-stage.is-exit-to-right,
.appointments-service-summary.is-exit-to-right,
.appointments-service-checkout.is-exit-to-right {
    opacity: 0;
    transform: translateX(34px);
    pointer-events: none;
}

.appointments-service-selector-stage[hidden],
.appointments-service-client-picker[hidden],
.appointments-service-summary[hidden],
.appointments-service-checkout[hidden] {
    display: none !important;
}

body.has-appointments-modal .appointments-bottom-grid {
    display: none !important;
}

.appointments-service-selector-stage {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1.35rem;
}

.appointments-service-checkout {
    grid-template-columns: minmax(0, 1fr) var(--appointments-checkout-side-width);
    background: #ffffff;
    min-height: 100%;
}

.appointments-service-checkout-main {
    display: grid;
    align-content: start;
    gap: 1.55rem;
    min-height: 0;
    padding: 2.05rem 1.95rem 2.2rem;
    border-right: 1px solid #e6ecf3;
    overflow: auto;
}

.appointments-service-checkout-side {
    display: grid;
    align-content: start;
    grid-template-rows: auto auto auto 1fr auto auto;
    gap: 1.15rem;
    min-height: 0;
    padding: 1.55rem 1.2rem 1.2rem;
    background: #ffffff;
    overflow: auto;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-side {
    grid-template-rows: auto minmax(0, 1fr);
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-services,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-add,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-totals,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-actions {
    display: none !important;
}

.appointments-service-checkout-crumbs {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #8a94a6;
    font-size: 0.88rem;
    font-weight: 600;
}

.appointments-service-checkout-crumb {
    padding: 0;
    border: 0;
    background: transparent;
    color: #69778d;
    font: inherit;
    cursor: pointer;
}

.appointments-service-checkout-crumbs .is-current {
    color: #111827;
    font-weight: 700;
}

.appointments-service-checkout-copy {
    display: grid;
    gap: 0.65rem;
}

.appointments-service-checkout-copy h2 {
    margin: 0;
    color: #172033;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appointments-service-checkout-copy h2[data-service-checkout-title] {
    font-size: 2.1rem;
    letter-spacing: -0.04em;
}

.appointments-service-checkout-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 0.98rem;
    line-height: 1.45;
}

.appointments-service-checkout-tip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: 700px;
}

.appointments-service-tip-card {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.42rem;
    min-height: 112px;
    padding: 0.85rem 0.9rem;
    border: 1px solid #d6dfeb;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.appointments-service-tip-card:hover {
    transform: translateY(-1px);
}

.appointments-service-tip-card.is-selected {
    border-color: #6b63ff;
    box-shadow: inset 0 0 0 1.5px #6b63ff;
}

.appointments-service-tip-card[data-tip-mode="none"] {
    gap: 0;
}

.appointments-service-tip-card[data-tip-mode="none"] small[hidden] {
    display: none !important;
}

.appointments-service-tip-card strong {
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 800;
}

.appointments-service-tip-card small {
    color: #7b8798;
    font-size: 0.84rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointments-service-tip-card--custom .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-tip-card--custom small {
    margin-top: -0.1rem;
}

.appointments-service-tip-custom {
    display: none !important;
}

.appointments-service-tip-custom span {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.appointments-service-tip-custom-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 50px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-tip-custom-input input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.appointments-service-tip-custom-input small {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
}

.appointments-service-checkout-client {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 0.85rem;
    padding: 1.2rem 1.15rem;
    border: 1px solid #e6ecf3;
    border-radius: 14px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.appointments-service-checkout-client-copy {
    display: grid;
    gap: 0.2rem;
}

.appointments-service-checkout-client-copy strong {
    color: #1f2937;
    font-size: 0.96rem;
    line-height: 1.25;
    font-weight: 800;
}

.appointments-service-checkout-client-copy span {
    color: #778297;
    font-size: 0.86rem;
    line-height: 1.35;
}

.appointments-service-checkout-client-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: #f2efff;
    color: #7c6cff;
    font-size: 1.8rem;
    line-height: 1;
}

.appointments-service-checkout-client-shell {
    display: grid;
    align-content: start;
    gap: 0.95rem;
}

.appointments-service-checkout-client[hidden],
.appointments-service-checkout-client-current[hidden],
.appointments-service-checkout-client-picker[hidden] {
    display: none !important;
}

.appointments-service-checkout-client-current-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1.25rem 1.2rem;
    border: 1px solid #e6ecf3;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-checkout-client-current-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 0.85rem;
}

.appointments-service-checkout-client-current-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.appointments-service-checkout-client-current-copy strong {
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointments-service-checkout-client-current-copy span {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.35;
}

.appointments-service-checkout-client-current-avatar {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.1);
    color: #6b5bff;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-service-checkout-client-current-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.appointments-service-checkout-client-current-actions-wrap {
    position: relative;
}

.appointments-service-checkout-client-current-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 42px;
    min-width: 118px;
    padding: 0 1rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.appointments-service-checkout-client-current-actions-toggle .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointments-service-checkout-client-current-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 35;
    display: grid;
    min-width: 286px;
    padding: 0.5rem 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.appointments-service-checkout-client-current-actions-menu[hidden] {
    display: none !important;
}

.appointments-service-checkout-client-current-actions-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.95rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 500;
    text-decoration: none;
}

.appointments-service-checkout-client-current-actions-option:hover {
    background: #f8fafc;
    text-decoration: none;
}

.appointments-service-checkout-client-current-actions-option .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-checkout-client-current-actions-option.is-danger {
    color: #e11d48;
}

.appointments-service-checkout-client-current-actions-divider {
    height: 1px;
    margin: 0.35rem 0.95rem;
    background: #e8eef5;
}

.appointments-service-checkout-client-current-actions-title {
    margin: 0.3rem 0.95rem 0.35rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appointments-service-checkout-client-current-actions-option[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.appointments-service-checkout-client-picker {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 0;
    height: 100%;
    padding-top: 0.1rem;
}

.appointments-service-checkout-client-search-shell {
    max-width: none;
}

.appointments-service-checkout-client-list-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding-top: 0.15rem;
}

.appointments-service-checkout-client-special,
.appointments-service-checkout-client-option {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 0.85rem 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.appointments-service-checkout-client-special[hidden],
.appointments-service-checkout-client-option[hidden] {
    display: none !important;
}

.appointments-service-checkout-client-special:hover,
.appointments-service-checkout-client-option:hover {
    background: #fafbfd;
}

.appointments-service-checkout-client-special.is-empty,
.appointments-service-checkout-client-option.is-selected {
    background: #f7f8fc;
}

.appointments-service-checkout-client-special + .appointments-service-checkout-client-special {
    margin-top: 0.05rem;
}

.appointments-service-checkout-client-list {
    display: grid;
    min-height: 0;
    max-height: 420px;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid #e8eef5;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e6 transparent;
}

.appointments-service-checkout-client-special .appointments-service-client-special-avatar,
.appointments-service-checkout-client-option .appointments-service-client-avatar--list {
    width: 48px;
    height: 48px;
}

.appointments-service-checkout-client-special .appointments-service-client-special-copy strong,
.appointments-service-checkout-client-option .appointments-service-client-option-copy strong {
    font-size: 0.98rem;
    line-height: 1.32;
}

.appointments-service-checkout-client-option .appointments-service-client-option-copy small {
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.4;
}

.appointments-service-checkout-client-list::-webkit-scrollbar,
.appointments-service-checkout-client-list-wrap::-webkit-scrollbar {
    width: 10px;
}

.appointments-service-checkout-client-list::-webkit-scrollbar-track,
.appointments-service-checkout-client-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-checkout-client-list::-webkit-scrollbar-thumb,
.appointments-service-checkout-client-list-wrap::-webkit-scrollbar-thumb {
    background: #cfd8e6;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-checkout-services {
    display: grid;
    align-content: start;
    gap: 0.95rem;
}

.appointments-service-checkout-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 40px;
    padding: 0 1.05rem;
    border: 1px solid #d6dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #202939;
    font-size: 0.94rem;
    font-weight: 700;
}

.appointments-service-checkout-add .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointments-service-checkout-service {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
}

.appointments-service-checkout-service-accent {
    width: 4px;
    min-height: 68px;
    border-radius: 999px;
    background: var(--service-accent, #9ad9f5);
}

.appointments-service-checkout-service-copy strong {
    display: block;
    color: #202939;
    font-size: 0.96rem;
    line-height: 1.28;
    font-weight: 800;
}

.appointments-service-checkout-service-copy small {
    display: block;
    margin-top: 0.2rem;
    color: #8390a4;
    font-size: 0.89rem;
    line-height: 1.35;
}

.appointments-service-checkout-service-price {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-service-checkout-totals {
    display: grid;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.35rem;
    border-top: 1px solid #e7edf5;
}

.appointments-service-checkout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #7c8798;
    font-size: 0.93rem;
}

.appointments-service-checkout-row strong {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-service-checkout-row.is-total,
.appointments-service-checkout-row.is-payable {
    color: #111827;
}

.appointments-service-checkout-row.is-total strong,
.appointments-service-checkout-row.is-payable strong {
    font-weight: 800;
}

.appointments-service-checkout-row.is-total {
    margin-top: 0.2rem;
}

.appointments-service-checkout-row.is-payable {
    margin-top: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid #e7edf5;
    font-size: 1.04rem;
}

.appointments-service-checkout-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.appointments-service-checkout-actions .appointments-service-summary-more {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
}

.appointments-service-checkout-submit {
    flex: 1 1 auto;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: #111318;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    box-shadow: none;
}

.appointments-service-checkout-tip-stage,
.appointments-service-checkout-payment-stage,
.appointments-service-checkout-split-stage {
    display: grid;
    align-content: start;
    gap: 1.1rem;
    min-height: 0;
}

.appointments-service-checkout-tip-stage[hidden],
.appointments-service-checkout-payment-stage[hidden],
.appointments-service-checkout-split-stage[hidden] {
    display: none !important;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-payments {
    display: none !important;
}

.appointments-service-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    max-width: 740px;
}

.appointments-service-payment-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.9rem;
    min-height: 128px;
    padding: 1.1rem;
    border: 1px solid #d8dfeb;
    border-radius: 16px;
    background: #ffffff;
    color: #111827;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.appointments-service-payment-card:hover {
    background: #fbfcfe;
    transform: translateY(-1px);
}

.appointments-service-payment-card.is-selected {
    border-color: #6b5bff;
    box-shadow: inset 0 0 0 1.5px #6b5bff;
    background: #fbfaff;
}

.appointments-service-payment-card strong {
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointments-service-payment-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #f6f8fc;
}

.appointments-service-payment-icon .material-symbols-outlined {
    font-size: 1.4rem;
    line-height: 1;
}

.appointments-service-payment-icon[data-tone="cash"] {
    color: #2d9b3f;
}

.appointments-service-payment-icon[data-tone="gift"] {
    color: #2d9b3f;
}

.appointments-service-payment-icon[data-tone="split"] {
    color: #111827;
}

.appointments-service-payment-icon[data-tone="other"] {
    color: #6b5bff;
}

.appointments-service-checkout-split-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 46px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 14px;
    background: #ffffff;
    color: #5f56ff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-service-checkout-split-add .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-checkout-split-list {
    display: grid;
    gap: 0.85rem;
}

.appointments-service-checkout-split-empty {
    padding: 1rem 1.1rem;
    border: 1px dashed #d8dfeb;
    border-radius: 14px;
    color: #64748b;
    font-size: 0.95rem;
}

.appointments-service-checkout-split-item,
.appointments-service-checkout-payment-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-checkout-split-item-copy,
.appointments-service-checkout-payment-line-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.appointments-service-checkout-split-item-copy strong,
.appointments-service-checkout-payment-line-copy span {
    color: #111827;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
}

.appointments-service-checkout-split-item-copy small,
.appointments-service-checkout-payment-line-copy small {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.35;
}

.appointments-service-checkout-split-item-side,
.appointments-service-checkout-payment-line-side {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
}

.appointments-service-checkout-split-item-side strong,
.appointments-service-checkout-payment-line-side strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-service-checkout-payments {
    display: grid;
    gap: 0.65rem;
}

.appointments-service-checkout-payment-remove {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.appointments-service-checkout-payment-remove:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #111827;
}

.appointments-service-checkout-payment-remove .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

body.has-appointments-payment-modal {
    overflow: hidden;
}

.appointments-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
}

.appointments-payment-modal[hidden] {
    display: none !important;
}

.appointments-payment-dialog {
    position: relative;
    width: min(var(--appointments-payment-dialog-width), calc(100vw - 2rem));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
    padding: 1.9rem 2rem 1.8rem;
}

.appointments-payment-dialog--cash {
    width: min(var(--appointments-payment-cash-width), calc(100vw - 2rem));
}

.appointments-payment-dialog--giftcard {
    width: min(var(--appointments-payment-giftcard-width), calc(100vw - 2rem));
}

.appointments-payment-dialog--split {
    width: min(var(--appointments-payment-split-width), calc(100vw - 2rem));
}

.appointments-payment-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-payment-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 800;
}

.appointments-payment-body {
    display: grid;
    justify-items: center;
    gap: 1.35rem;
    padding: 1.85rem 0 1.35rem;
}

.appointments-payment-display {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    min-width: 180px;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #d6dbe6;
}

.appointments-payment-display-prefix,
.appointments-payment-display-value {
    color: #111827;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.appointments-payment-display-prefix {
    font-size: 1.45rem;
    line-height: 1.1;
}

.appointments-payment-display-value {
    font-size: 3.5rem;
    line-height: 0.95;
}

.appointments-payment-suggestions {
    display: flex;
    gap: 0.7rem;
    width: 100%;
    padding-bottom: 0.15rem;
    overflow: auto;
    scrollbar-width: thin;
}

.appointments-payment-suggestion {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-payment-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    width: min(390px, 100%);
}

.appointments-payment-key {
    display: grid;
    place-items: center;
    min-height: 58px;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-payment-key .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-payment-actions--cash {
    align-items: flex-end;
}

.appointments-payment-action-copy {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.appointments-payment-meta {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.35;
}

.appointments-payment-actions--giftcard,
.appointments-payment-actions--split-picker {
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.appointments-payment-summary {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
}

.appointments-payment-submit,
.appointments-payment-cancel {
    min-height: 52px;
    padding: 0 1.6rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-payment-submit {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-payment-submit:disabled {
    background: #b5b8c0;
    cursor: not-allowed;
}

.appointments-payment-cancel {
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-payment-body--giftcard {
    justify-items: stretch;
}

.appointments-payment-field {
    display: grid;
    gap: 0.7rem;
}

.appointments-payment-field span {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.appointments-payment-field input {
    min-height: 54px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 0.98rem;
}

.appointments-payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1.35rem;
}

.appointments-service-selector-head {
    display: grid;
    gap: 1rem;
}

.appointments-service-selector-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.appointments-client-create-modal {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: block;
    padding: 0;
    background: rgba(7, 12, 22, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.appointments-client-create-modal[hidden] {
    display: none !important;
}

.appointments-client-create-dialog {
    position: relative;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.appointments-client-create-close {
    display: none;
}

.appointments-client-create-close .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-client-create-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.appointments-client-create-modal.is-drawer {
    background: transparent;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.appointments-client-create-modal.is-drawer .appointments-client-create-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(1240px, calc(100vw - 48px));
    max-width: 100%;
    height: 100vh;
    border-left: 1px solid rgba(214, 220, 232, 0.9);
    box-shadow: 0 24px 50px rgba(10, 16, 26, 0.22);
    transform: translateX(48px);
    opacity: 0;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
    pointer-events: auto;
    overflow: visible;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer .appointments-client-create-dialog {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    width: min(1120px, calc(100vw - 48px));
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
    border-left: 0;
    box-shadow: none;
    overflow: hidden;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-client-view .appointments-client-create-dialog {
    width: min(1280px, calc(100vw - 48px));
    max-width: 100%;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-checkout-view .appointments-client-create-dialog {
    width: min(var(--appointments-checkout-drawer-width), calc(100vw - 48px));
    max-width: 100%;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer .appointments-client-create-frame {
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointments-client-create-modal.is-drawer.is-open {
    opacity: 1;
}

.appointments-client-create-modal.is-drawer.is-open .appointments-client-create-dialog {
    transform: translateX(0);
    opacity: 1;
}

.appointments-sales-summary-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.85rem 0.75rem 0.85rem 0.5rem;
    background: transparent;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-ready .appointments-sales-summary-tools,
.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-ready .appointments-client-create-frame {
    opacity: 1;
    transform: translateX(0);
}

.appointments-sales-summary-tool {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #22324b;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.appointments-sales-summary-loading {
    padding: 2.5rem 2.75rem;
    color: #4b5563;
    font-size: 0.95rem;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-embed-topbar {
    display: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-pro-header,
.appointments-client-create-modal[data-sales-summary-modal] .clients-pro-title-wrap {
    display: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-empty-card,
.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-box {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin-top: 0.8rem;
    box-shadow: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-panel,
.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-layout,
.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-main {
    height: 100%;
    min-height: 100%;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-sticky-head-appointments {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-appointments-shell {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-appointments-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.appointments-sales-summary-tool .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.appointments-sales-summary-tool-close {
    cursor: pointer;
}

.appointments-sales-summary-tool:hover,
.appointments-sales-summary-tool:focus-visible {
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.appointments-sales-summary-tool.is-static {
    color: #2a3850;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer .appointments-client-create-close {
    display: none !important;
}

.appointments-client-create-modal.is-drawer.is-open .appointments-client-create-dialog {
    transform: translateX(0);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close {
    position: absolute;
    top: 0.9rem;
    left: -42px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d8dde6;
    background: #f4f6f8;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    z-index: 6;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.10),
        0 1px 2px rgba(15, 23, 42, 0.05);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close::before,
.appointments-client-create-modal.is-drawer .appointments-client-create-close::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2.5px;
    border-radius: 999px;
    background: #111827;
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close::before {
    transform: rotate(45deg);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close::after {
    transform: rotate(-45deg);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close .material-symbols-outlined {
    display: none;
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close:hover {
    background: #ffffff;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.13),
        0 1px 2px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.appointments-service-picker-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2d43;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-service-picker-back[hidden] {
    display: none !important;
}

.appointments-service-picker-back .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-search-shell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 50px;
    max-width: 450px;
    padding: 0 1rem;
    border: 1px solid #6b5bff;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.appointments-service-search-shell .material-symbols-outlined {
    color: #22324b;
    font-size: 1.35rem;
    line-height: 1;
}

.appointments-service-search-shell:focus-within {
    border-color: #6b5bff;
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.1);
}

.appointments-service-search-shell input {
    width: 100%;
    min-height: 48px;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    color: #22324b;
    font-size: 0.96rem;
}

.appointments-service-search-shell input:focus,
.appointments-service-search-shell input:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
}

.appointments-service-groups {
    min-height: 0;
    overflow: auto;
    padding-right: 0.35rem;
}

.appointments-service-client-picker {
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 1rem;
    min-height: 0;
    height: 100%;
    padding-top: 0.25rem;
    background: #ffffff;
    box-shadow: inset -1px 0 0 #e8eef5;
}

.appointments-service-client-picker .appointments-service-selector-head,
.appointments-service-client-picker .appointments-service-client-search-shell {
    padding: 0 1.6rem;
}

.appointments-service-client-picker .appointments-service-selector-head h2 {
    font-size: 1.28rem;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.appointments-service-client-search-shell {
    max-width: none;
}

.appointments-service-client-list-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
    padding-top: 0.1rem;
    align-content: start;
}

.appointments-service-client-picker .appointments-service-client-special,
.appointments-service-client-picker .appointments-service-client-option {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 80px;
    margin: 0;
    padding: 0.8rem 1.55rem;
    border: 0;
    border-bottom: 1px solid #e8eef5;
    border-radius: 0 !important;
    background: #ffffff;
    color: #111827;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s ease;
}

.appointments-service-client-picker .appointments-service-client-special[hidden],
.appointments-service-client-picker .appointments-service-client-option[hidden] {
    display: none !important;
}

.appointments-service-client-picker .appointments-service-client-special:hover,
.appointments-service-client-picker .appointments-service-client-option:hover {
    background: #f8fafc;
}

.appointments-service-client-picker .appointments-service-client-special.is-empty,
.appointments-service-client-picker .appointments-service-client-option.is-selected {
    background: #f7f8fc;
}

.appointments-service-client-picker .appointments-service-client-special-avatar,
.appointments-service-client-picker .appointments-service-client-avatar--list {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.1);
    color: #6b5bff;
    font-size: 1.15rem;
    font-weight: 800;
}

.appointments-service-client-picker .appointments-service-client-special-avatar .material-symbols-outlined {
    font-size: 1.6rem;
    line-height: 1;
}

.appointments-service-client-picker .appointments-service-client-special-copy,
.appointments-service-client-picker .appointments-service-client-option-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.appointments-service-client-picker .appointments-service-client-special-copy strong,
.appointments-service-client-picker .appointments-service-client-option-copy strong {
    color: #111827;
    font-size: 1rem;
    line-height: 1.35;
}

.appointments-service-client-picker .appointments-service-client-option-copy small {
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.45;
}

.appointments-service-client-list {
    display: block;
    min-height: 0;
    height: 100%;
    max-height: none;
    margin-top: 0;
    padding-top: 0.25rem;
    border-top: 1px solid #e8eef5;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e6 transparent;
}

.appointments-service-client-list .appointments-service-client-option {
    width: 100%;
}

.appointments-service-client-list::-webkit-scrollbar,
.appointments-service-client-list-wrap::-webkit-scrollbar {
    width: 10px;
}

.appointments-service-client-list::-webkit-scrollbar-track,
.appointments-service-client-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-client-list::-webkit-scrollbar-thumb,
.appointments-service-client-list-wrap::-webkit-scrollbar-thumb {
    background: #cfd8e6;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-client-list::-webkit-scrollbar-thumb:hover,
.appointments-service-client-list-wrap::-webkit-scrollbar-thumb:hover {
    background: #b8c5d8;
}

.appointments-service-summary {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1.4rem;
    min-height: 0;
}

.appointments-service-summary-head {
    position: relative;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid #e7edf5;
}

.appointments-service-selector.is-editing .appointments-service-summary-head {
    margin: -1.95rem -2rem 0;
    padding: 1.85rem 2rem 1.5rem;
    background: #3b73e6;
    border-bottom: 0;
}

.appointments-service-selector.is-editing.is-status-no-show .appointments-service-summary-head {
    background: #df173f;
    padding-bottom: 0.55rem;
}

.appointments-service-summary-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.15;
}

.appointments-service-selector.is-editing .appointments-service-summary-head h2,
.appointments-service-selector.is-editing .appointments-service-summary-head p {
    color: #ffffff;
}

.appointments-service-summary-head .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-summary-head p {
    margin: 0.45rem 0 0;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 600;
}

.appointments-service-summary-status {
    position: absolute;
    top: 1.55rem;
    right: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.appointments-service-summary-status .material-symbols-outlined {
    font-size: 1rem;
}

.appointments-service-summary-status-wrap {
    position: absolute;
    top: 1.55rem;
    right: 2rem;
}

.appointments-service-summary-status-wrap[hidden] {
    display: none !important;
}

.appointments-service-summary-status {
    position: static;
    top: auto;
    right: auto;
    justify-content: center;
    min-width: 160px;
    padding: 0 1.1rem;
    box-shadow: none;
}

.appointments-service-summary-status-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 192px;
    padding: 0.7rem 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    transform: translateY(-25px);
}

.appointments-service-selector.is-editing.is-status-no-show .appointments-service-summary-status-menu {
    top: 100% !important;
    transform: translateY(-25px);
}

.appointments-service-summary-status-menu[hidden] {
    display: none !important;
}

.appointments-service-summary-status-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 0.85rem;
    min-height: 46px;
    padding: 0 1rem;
    background: transparent;
    border: 0;
    color: #111827;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
}

.appointments-service-summary-status-option[hidden] {
    display: none !important;
}

.appointments-service-summary-status-option:hover {
    background: #f6f8fc;
}

.appointments-service-summary-status-option .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-summary-status-option .appointments-service-summary-status-check {
    display: none;
    justify-self: end;
    font-size: 1.2rem;
}

.appointments-service-summary-status-option.is-danger {
    color: #e11d48;
}

.appointments-service-summary-status-option.is-selected {
    font-weight: 700;
}

.appointments-service-summary-status-option.is-selected .appointments-service-summary-status-check {
    display: inline-flex;
}

.appointments-service-summary-status-undo {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-height: 46px;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
}

.appointments-service-summary-status-undo:hover {
    background: #f6f8fc;
}

.appointments-service-summary-status-undo[hidden] {
    display: none !important;
}

.appointments-service-summary-status-undo .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-summary-body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.35rem;
}

.appointments-service-summary-section-head h3 {
    margin: 0 0 1rem;
    color: #111827;
    font-size: 1rem;
    line-height: 1.2;
}

.appointments-service-summary-list {
    display: grid;
    gap: 0.72rem;
}

.appointments-service-summary-add-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.appointments-service-summary-duration-total {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.appointments-service-summary-duration-total[hidden] {
    display: none !important;
}

.appointments-service-summary-card {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem 0.95rem 0.8rem 0;
    border-radius: 14px;
    transition: background-color 0.18s ease;
}

.appointments-service-summary-card:hover,
.appointments-service-summary-card:focus-within {
    background: #f6f8fc;
}

.appointments-service-summary-card-accent {
    width: 4px;
    min-height: 72px;
    border-radius: 999px;
    background: var(--service-accent, #9ad9f5);
}

.appointments-service-summary-card-copy strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    line-height: 1.35;
    order: 1;
}

.appointments-service-summary-card-copy small {
    display: block;
    margin-top: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    order: 2;
}

.appointments-service-summary-card-copy {
    display: grid;
    gap: 0.28rem;
}

.appointments-service-summary-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    order: 3;
}

.appointments-service-summary-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.78rem;
    border: 1px solid #d8dfe9;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.1;
}

.appointments-service-summary-card-price {
    align-self: flex-start;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-service-summary-card-side {
    display: grid;
    justify-items: end;
    gap: 0.65rem;
}

.appointments-service-summary-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.appointments-service-summary-card:hover .appointments-service-summary-card-actions,
.appointments-service-summary-card:focus-within .appointments-service-summary-card-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.appointments-service-summary-card-action {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #111827;
    border-radius: 999px;
}

.appointments-service-summary-card-action:hover {
    background: rgba(15, 23, 42, 0.06);
}

.appointments-service-summary-card-action .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-summary-card-action.is-danger {
    color: #111827;
}

.appointments-service-summary-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    margin-top: 0;
    padding: 0 1rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-service-summary-add .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-summary-comments {
    margin-top: 1.6rem;
}

.appointments-service-summary-comments-box {
    display: block;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 0;
    border-radius: 12px;
    background: #eef0ff;
    color: #111827;
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
    white-space: pre-wrap;
    cursor: pointer;
}

.appointments-service-summary-comments-box.is-clickable:hover {
    background: #e7eafe;
}

.appointments-service-summary-footer {
    display: grid;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e7edf5;
}

.appointments-service-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-service-summary-total strong,
.appointments-service-summary-total span {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-service-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.appointments-service-summary-actions.is-checkout-only .appointments-service-summary-secondary {
    flex: 1 1 auto;
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-service-summary-actions.is-no-show-state .appointments-service-summary-secondary {
    flex: 1 1 auto;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-more,
.appointments-service-summary-secondary,
.appointments-service-summary-primary {
    min-height: 44px;
    border-radius: 999px;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-service-summary-more {
    width: 40px;
    min-width: 40px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-secondary,
.appointments-service-summary-primary {
    min-width: 0;
    padding: 0 1.55rem;
}

.appointments-service-summary-secondary {
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-secondary.is-primary-action {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-service-summary-primary {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-service-summary-more[hidden] {
    display: none !important;
}

.appointments-service-summary-more-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    z-index: 28;
    display: grid;
    width: min(320px, calc(100vw - 2rem));
    padding: 1rem 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    border: 1px solid #e8eef6;
}

.appointments-service-summary-more-menu[hidden] {
    display: none !important;
}

.appointments-service-summary-more-title {
    display: block;
    margin: 0;
    padding: 0 1.2rem 0.8rem;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-service-summary-more-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.68rem 1.2rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.35;
}

.appointments-service-summary-more-item[hidden] {
    display: none !important;
}

.appointments-service-summary-more-item:hover {
    background: #f7f9fc;
}

.appointments-service-summary-more-item.is-section-start {
    position: relative;
    margin-top: 0.45rem;
    padding-top: 1rem;
}

.appointments-service-summary-more-item.is-section-start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.2rem;
    right: 1.2rem;
    height: 1px;
    background: #e7edf5;
}

.appointments-service-summary-more-item > span {
    min-width: 0;
    white-space: normal;
}

.appointments-service-summary-more-item > span:only-child {
    grid-column: 1 / -1;
}

.appointments-service-summary-more-item .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 0.08rem;
}

.appointments-service-summary-more-item.is-danger {
    color: #e11d48;
}

.appointments-service-summary-more-divider {
    height: 1px;
    margin: 0.55rem 1.2rem;
    background: #e7edf5;
}

.appointments-service-summary-more-divider[hidden] {
    display: none !important;
}

.appointments-comment-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.3);
}

.appointments-comment-modal[hidden] {
    display: none !important;
}

body.has-appointments-comment-modal {
    overflow: hidden;
}

body.has-appointments-tip-modal {
    overflow: hidden;
}

.appointments-comment-dialog {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
    padding: 2rem 2rem 1.9rem;
    isolation: isolate;
}

.appointments-discard-modal {
    position: fixed;
    inset: 0;
    z-index: 5300;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
}

.appointments-tip-modal {
    position: fixed;
    inset: 0;
    z-index: 5400;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
}

.appointments-tip-modal[hidden] {
    display: none !important;
}

.appointments-tip-dialog {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
    padding: 2rem 2rem 1.8rem;
}

.appointments-tip-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-tip-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.appointments-tip-body {
    display: grid;
    justify-items: center;
    gap: 1.15rem;
    padding: 1.9rem 0 1.2rem;
}

.appointments-tip-display {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    min-width: 180px;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #d6dbe6;
}

.appointments-tip-display-prefix,
.appointments-tip-display-value {
    color: #b8bfcb;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.appointments-tip-display-prefix {
    font-size: 1.3rem;
    line-height: 1.1;
}

.appointments-tip-display-value {
    font-size: 3rem;
    line-height: 0.95;
}

.appointments-tip-kind-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    background: #f3f5f9;
}

.appointments-tip-kind {
    display: grid;
    place-items: center;
    width: 60px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 1.35rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-tip-kind.is-active {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #d8dfeb;
}

.appointments-tip-kind .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-tip-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    width: min(390px, 100%);
}

.appointments-tip-key {
    display: grid;
    place-items: center;
    min-height: 58px;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-tip-key .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-tip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.2rem;
}

.appointments-tip-summary {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-tip-submit {
    min-width: 120px;
    min-height: 48px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-tip-submit[disabled] {
    background: #bdbdbd;
    cursor: not-allowed;
}

.appointments-discard-modal[hidden] {
    display: none !important;
}

body.has-appointments-discard-modal {
    overflow: hidden;
}

.appointments-discard-dialog {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    min-height: 332px;
    padding: 2rem 2.8rem 2rem;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
}

.appointments-discard-close {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-discard-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.appointments-discard-body {
    margin-top: 2rem;
    max-width: 480px;
}

.appointments-discard-body p {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.55;
}

.appointments-discard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 5.1rem;
}

.appointments-discard-cancel,
.appointments-discard-confirm {
    min-width: 186px;
    min-height: 50px;
    padding: 0 1.6rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-discard-cancel {
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #111827;
}

.appointments-discard-confirm {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-comment-close {
    position: absolute;
    top: 1.15rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-comment-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 800;
}

.appointments-comment-body {
    margin-top: 2rem;
}

.appointments-comment-body textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem 1.05rem;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    resize: vertical;
    color: #111827;
    font-size: 1rem;
    line-height: 1.5;
}

.appointments-comment-body p {
    margin: 0.45rem 0 0;
    color: #6b7280;
    font-size: 0.92rem;
}

.appointments-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.9rem;
}

.appointments-comment-delete,
.appointments-comment-submit {
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-comment-delete {
    border: 1px solid #f3c3cf;
    background: #ffffff;
    color: #e11d48;
}

.appointments-comment-submit {
    border: 0;
    background: #0f1014;
    color: #ffffff;
}

.appointments-service-summary-secondary {
    padding: 0 1.4rem;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-primary {
    flex: 1 1 auto;
    padding: 0 1.5rem;
    border: 0;
    background: #0f1014;
    color: #ffffff;
}

.appointments-service-group + .appointments-service-group {
    margin-top: 1.95rem;
}

.appointments-service-group-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.95rem;
}

.appointments-service-group-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    line-height: 1.3;
}

.appointments-service-group-head span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #f0f3f8;
    color: #66758b;
    font-size: 0.82rem;
    font-weight: 700;
}

.appointments-service-group-list {
    display: grid;
    gap: 0.75rem;
}

.appointments-service-option {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 0.95rem 1rem 0.95rem 0.5rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.appointments-service-option:hover {
    background: #f8fafc;
}

.appointments-service-option.is-selected {
    background: #f3f4f6;
}

.appointments-service-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(107, 91, 255, 0.22);
}

.appointments-service-option-accent {
    width: 4px;
    height: 100%;
    min-height: 70px;
    border-radius: 999px;
    background: var(--service-accent, #9ad9f5);
}

.appointments-service-option-copy strong {
    display: block;
    color: #1b2940;
    font-size: 0.94rem;
    line-height: 1.32;
}

.appointments-service-option-copy small {
    display: block;
    margin-top: 0.2rem;
    color: #6c788d;
    font-size: 0.88rem;
}

.appointments-service-option-price {
    color: #1f2d43;
    align-self: center;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .appointments-page-head,
    .appointments-calendar-summary,
    .appointments-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointments-toolbar-cluster {
        width: 100%;
    }

    .appointments-toolbar-cluster-right {
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .admin-page-appointments-calendar {
        --appointments-hour-height: 88px;
        --appointments-sticky-top: 76px;
        --appointments-toolbar-sticky-height: 124px;
    }

    .appointments-toolbar-nav,
    .appointments-toolbar-cluster,
    .appointments-calendar-legend,
    .appointments-editor-actions,
    .appointments-status-form {
        width: 100%;
    }

    .appointments-toolbar-date-group,
    .appointments-toolbar-range,
    .appointments-toolbar-chip,
    .appointments-toolbar-icon,
    .appointments-toolbar-picker,
    .appointments-toolbar-view-select,
    .appointments-toolbar-add-trigger {
        width: 100%;
    }

    .appointments-centers-filter,
    .appointments-members-filter {
        width: 100%;
    }

    .appointments-centers-menu,
    .appointments-members-menu {
        right: 0;
        left: 0;
        width: 100%;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range {
        min-width: 0;
        flex: 1 1 auto;
    }

    .appointments-calendar-head,
    .appointments-calendar-grid-wrap {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .appointments-calendar-head-days,
    .appointments-calendar-days {
        grid-template-columns: repeat(7, minmax(140px, 1fr));
    }

    .appointments-editor-time-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointments-service-selector {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        justify-content: flex-start;
        background: rgba(12, 18, 29, 0.16);
    }

    .appointments-service-selector-shell {
        grid-template-columns: minmax(0, 1fr);
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        background: #ffffff;
    }

    .appointments-service-selector-tools {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.85rem 1rem;
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
    }

    .appointments-service-selector-side {
        padding: 1rem 1.25rem 1.2rem;
        background: #f7f8fb;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid #e4eaf2;
    }

    .appointments-service-selector-sidecopy {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0;
        text-align: left;
    }

    .appointments-service-selector-icon {
        margin: 0;
        flex: 0 0 auto;
    }

    .appointments-service-selector-sidecopy p {
        margin-left: 0;
        max-width: none;
    }

    .appointments-service-selector-main {
        padding: 1.35rem 1.25rem 1.25rem;
        background: #ffffff;
    }

    .appointments-service-selector.is-checkout .appointments-service-selector-shell {
        grid-template-columns: 1fr;
        width: 100vw;
    }

    .appointments-service-checkout {
        grid-template-columns: 1fr;
    }

    .appointments-service-checkout-main,
    .appointments-service-checkout-side {
        padding: 1.35rem 1.25rem;
    }

    .appointments-service-checkout-main {
        border-right: 0;
        border-bottom: 1px solid #e6ecf3;
    }

    .appointments-service-checkout-tip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointments-service-search-shell {
        max-width: none;
    }

    .appointments-service-option {
        grid-template-columns: 4px minmax(0, 1fr);
    }

    .appointments-service-option-price {
        grid-column: 2;
        font-size: 1.05rem;
    }

    .appointments-bottom-grid {
        top: 68px;
        width: 100vw;
    }

    .appointments-editor-panel {
        border-radius: 0;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--lh-bg);
    color: var(--lh-text);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

p {
    margin-top: 0;
}

.container {
    width: min(1180px, calc(100% - 2.2rem));
    margin-inline: auto;
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #cfd6df;
    border-radius: 8px;
    background: #fff;
    color: #18212b;
    padding: 0.7rem 0.8rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(31, 198, 215, 0.7);
    box-shadow: 0 0 0 3px rgba(31, 198, 215, 0.18);
}

textarea {
    min-height: 92px;
    resize: vertical;
}

.btn,
button,
[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn,
button.btn,
[type='submit'].btn {
    color: #fff;
    background: var(--lh-cyan);
    font-weight: 700;
}

.btn:hover,
.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible,
[type='submit'].btn:hover,
[type='submit'].btn:focus-visible {
    background: var(--lh-cyan-2);
}

.btn-outline {
    background: #fff;
    color: #12343a;
    border-color: rgba(18, 52, 58, 0.34);
}

.btn-outline:hover {
    background: rgba(18, 52, 58, 0.08);
}

.btn-danger {
    background: #b23a3a;
}

.btn-danger:hover {
    background: #8f2f2f;
}

.w-full {
    width: 100%;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.panel {
    border-radius: 12px;
    border: 1px solid var(--lh-line);
    background: #fff;
    box-shadow: 0 10px 24px rgba(22, 33, 48, 0.07);
    padding: 1.2rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    color: #556172;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.flash-wrap {
    margin-top: 1rem;
    display: grid;
    gap: 0.6rem;
}

.flash {
    border-radius: 10px;
    border: 1px solid;
    padding: 0.72rem 0.85rem;
    font-size: 0.9rem;
}

.flash-success {
    color: #215139;
    background: #e8f4ec;
    border-color: #bedbc9;
}

.flash-warning {
    color: #7a4f1d;
    background: #fceddf;
    border-color: #efcc9d;
}

.flash-danger {
    color: #7d2e2e;
    background: #faecec;
    border-color: #e6bcbc;
}

.flash-info {
    color: #1f4860;
    background: #eaf3fa;
    border-color: #bdd3e4;
}

.empty {
    border: 1px dashed #cad2dc;
    border-radius: 10px;
    padding: 0.85rem;
    color: #586576;
    font-size: 0.9rem;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 0.62rem;
    border-bottom: 1px solid #dfe5ec;
    font-size: 0.88rem;
    vertical-align: top;
}

th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4f5d6f;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.48rem;
    font-weight: 700;
}

.badge-pending {
    background: #faecd9;
    color: #8a5920;
}

.badge-confirmed {
    background: #dff4f6;
    color: #1c6a73;
}

.badge-completed {
    background: #e2f2e5;
    color: #255b3d;
}

.badge-canceled {
    background: #f7e3e3;
    color: #8b3333;
}

.badge-channel {
    background: #e7f7fb;
    color: #1e6170;
}

.lh-scroll-up {
    position: fixed;
    right: 22px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(127, 214, 224, 0.55);
    background: linear-gradient(160deg, #27d1df 0%, #17b0c2 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(11, 28, 38, 0.34);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s ease, box-shadow 0.2s ease;
    z-index: 145;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .clients-pro-main {
    display: grid;
    gap: 1.2rem;
}

.admin-body.admin-page-team-staff .team-staff-header {
    margin: 0.25rem 0 0;
}

.admin-body.admin-page-team-staff .team-staff-list-panel,
.admin-body.admin-page-team-staff .team-staff-form-panel {
    border-radius: 18px;
    border: 1px solid #d9e1ec;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-toolbar {
    grid-template-columns: minmax(0, 1.45fr) auto minmax(250px, 0.6fr);
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-table {
    min-width: 980px;
}

.admin-body.admin-page-team-staff .team-staff-contact-copy,
.admin-body.admin-page-team-staff .team-staff-state-copy,
.admin-body.admin-page-team-staff .team-staff-centers {
    display: grid;
    gap: 0.28rem;
}

.admin-body.admin-page-team-staff .team-staff-contact-copy strong {
    color: #23344c;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-contact-copy small,
.admin-body.admin-page-team-staff .team-staff-state-copy small,
.admin-body.admin-page-team-staff .team-staff-center-muted {
    color: #708199;
    font-size: 0.88rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.1rem;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #d8dee8;
    background: #ffffff;
    color: #8b95a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut .material-symbols-outlined {
    font-size: 0.82rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut.is-active {
    border-color: #cfd7e5;
    background: #f7f9fc;
    color: #2f3a49;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:hover,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:focus-visible {
    transform: translateY(-1px);
    border-color: #bcc8da;
    color: #111827;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::after,
.team-staff-hub-pay-shortcut::before,
.team-staff-hub-pay-shortcut::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::before,
.team-staff-hub-pay-shortcut::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    transform: translate(-50%, 6px);
    padding: 0.42rem 0.62rem;
    border-radius: 10px;
    background: #06080f;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(6, 8, 15, 0.24);
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::after,
.team-staff-hub-pay-shortcut::after {
    content: '';
    bottom: calc(100% + 4px);
    transform: translate(-50%, 6px);
    width: 10px;
    height: 10px;
    background: #06080f;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:hover::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:hover::after,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:focus-visible::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:focus-visible::after,
.team-staff-hub-pay-shortcut:hover::before,
.team-staff-hub-pay-shortcut:hover::after,
.team-staff-hub-pay-shortcut:focus-visible::before,
.team-staff-hub-pay-shortcut:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.admin-body.admin-page-team-staff .team-staff-centers {
    gap: 0.42rem;
}

.admin-body.admin-page-team-staff .team-staff-center-chip {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #d8e0ec;
    background: #f7f9fc;
    color: #24344a;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-body.admin-page-team-staff .team-staff-state-copy {
    justify-items: start;
}

.admin-body.admin-page-team-staff .team-staff-actions-cell {
    text-align: right;
    position: relative;
    overflow: visible;
}

.admin-body.admin-page-team-staff .team-staff-row-menu {
    position: relative;
    z-index: 2;
}

.admin-body.admin-page-team-staff .team-staff-row-menu[open] {
    z-index: 24;
}

.admin-body.admin-page-team-staff .team-staff-row-menu summary {
    min-height: 44px;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    user-select: none;
}

.admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-options-menu {
    min-width: 180px;
    top: auto;
    bottom: calc(100% + 0.42rem);
    right: 0;
}

.admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-options-menu form {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-option-item {
    display: flex;
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-list-row:focus-visible {
    outline: 2px solid #6358e7;
    outline-offset: -2px;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav-spaced {
    gap: 0.55rem;
    padding: 0.95rem 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav-spaced > a {
    border: 1px solid #e4e8f1;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav-spaced > a.is-active {
    border-color: #ddd9ff;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-shell {
    align-content: start;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane {
    display: grid;
    gap: 1.55rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-head h2 {
    margin: 0;
    color: #101a2b;
    font-size: 1.55rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-edit-btn {
    min-height: 46px;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    font-size: 0.96rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-hub-edit-btn .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section {
    display: grid;
    gap: 1rem;
    padding-top: 1.55rem;
    border-top: 1px solid #e6ebf2;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section h3 {
    margin: 0;
    color: #101a2a;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 850;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-subsection {
    display: grid;
    gap: 0.78rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-subsection h4 {
    margin: 0;
    color: #101a2a;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section-head a {
    color: #5f56ff;
    font-size: 0.92rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section-head a:hover {
    text-decoration: underline;
}

.admin-body.admin-page-team-staff .team-staff-hub-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.8rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card {
    display: grid;
    gap: 0.28rem;
    align-content: start;
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card small {
    color: #101a2a;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card strong {
    color: #5f6f84;
    font-size: 0.98rem;
    line-height: 1.45;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card span {
    color: #6a7b91;
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-color-value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--staff-hub-color, #dfe6ef);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 1px rgba(18, 28, 43, 0.08);
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-centers-list {
    display: grid;
    gap: 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.88rem;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admin-body.admin-page-team-staff .team-staff-hub-center-card.is-empty {
    grid-template-columns: minmax(0, 1fr);
}

.admin-body.admin-page-team-staff .team-staff-hub-center-media {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: #eef3fb;
    color: #1c2d45;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-media.is-photo {
    background: #ffffff;
    color: transparent;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-copy strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #132033;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 850;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-copy span {
    color: #5f6f84;
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-badge {
    min-height: 24px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #edf1ff;
    color: #445fc0;
    font-size: 0.76rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-form-panel {
    padding: 1.5rem;
}

.admin-body.admin-page-team-staff .team-staff-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.admin-body.admin-page-team-staff .team-staff-form-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.admin-body.admin-page-team-staff .team-staff-form-head p {
    margin: 0.38rem 0 0;
    color: #66768c;
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-body.admin-page-team-staff .team-staff-editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 0.35rem;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 3400;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 1rem 7rem;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-panel {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-header {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 -1rem 1rem;
    padding: 0.9rem 1.35rem 0.95rem;
    align-items: center;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #e5e7eb;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-title h1 {
    font-size: clamp(1.35rem, 1.6vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-title p,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-actions-float {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-actions {
    gap: 0.8rem;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-options summary,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-close,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save {
    min-height: 48px;
    padding: 0.72rem 1.25rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-close {
    border-color: #d5dde9;
    background: #ffffff;
    color: #101828;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save:hover {
    background: #000000;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save.is-disabled-save,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save[disabled] {
    opacity: 0.45;
    background: #111111;
    color: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-panel {
    margin-bottom: 0;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-nav {
    position: sticky;
    top: 5.35rem;
    max-height: calc(100vh - 6.4rem);
    overflow-y: auto;
    overflow-x: visible;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-actions-float {
    z-index: 3401;
}

.admin-body.admin-page-team-staff .team-staff-editor-header {
    align-items: flex-start;
}

.admin-body.admin-page-team-staff .team-staff-editor-title h1 {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-editor-title h1.clients-pro-title-edit small {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    margin-top: 0.25rem;
    padding: 0.34rem 0.9rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f1f5ff 0%, #e5eeff 100%);
    border: 1px solid #ccdafb;
    color: #34548e;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px rgba(74, 110, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.admin-body.admin-page-team-staff .team-staff-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.admin-body.admin-page-team-staff .team-staff-editor-options summary,
.admin-body.admin-page-team-staff .team-staff-editor-close,
.admin-body.admin-page-team-staff .team-staff-editor-save {
    min-height: 42px;
    padding: 0.58rem 1rem;
    font-size: 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-panel {
    padding: 1rem 1.05rem 1.15rem;
    border-radius: 18px;
    border: 1px solid #d9e1ec;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-profile-shell {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.45rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav h3 {
    margin-top: 0.45rem;
    font-size: 0.86rem;
    text-transform: none;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav h3:first-child {
    margin-top: 0;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav a {
    justify-content: space-between;
    gap: 0.65rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav {
    position: sticky;
    top: calc(68px + 1rem);
    max-height: calc(100vh - 84px);
    overflow-y: auto;
}

.admin-body.admin-page-team-staff .team-staff-profile-section {
    display: grid;
    gap: 0.78rem;
    scroll-margin-top: 84px;
}

.admin-body.admin-page-team-staff .team-staff-profile-section[hidden],
.admin-body.admin-page-team-staff .team-staff-editor-avatar-wrap[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-profile-form {
    gap: 0.85rem;
    max-width: 980px;
}

.admin-body.admin-page-team-staff .team-staff-profile-span-2 {
    grid-column: 1 / -1;
}

.admin-body.admin-page-team-staff .team-staff-profile-basic-grid {
    align-items: start;
}

.admin-body.admin-page-team-staff .team-staff-profile-form textarea {
    min-height: 122px;
}

.admin-body.admin-page-team-staff .team-staff-date-display {
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-phone-group {
    grid-template-columns: 92px minmax(0, 1fr);
}

.admin-body.admin-page-team-staff .team-staff-profile-form .clients-pro-divider {
    margin: 1.3rem 0 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-form h3 {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-profile-form .clients-pro-muted {
    max-width: 720px;
}

.admin-body.admin-page-team-staff .team-staff-profile-form .clients-pro-field-help {
    margin-top: 0.34rem;
}

.admin-body.admin-page-team-staff .team-staff-nav-link-label {
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-nav-count {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #25354d;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-services-pane {
    display: grid;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-services-search {
    position: relative;
    display: block;
}

.admin-body.admin-page-team-staff .team-staff-services-search .material-symbols-outlined {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #737d8d;
    pointer-events: none;
}

.admin-body.admin-page-team-staff .team-staff-services-search input {
    min-height: 48px;
    padding-left: 3.15rem;
    border-radius: 12px;
}

.admin-body.admin-page-team-staff .team-staff-services-list {
    display: grid;
}

.admin-body.admin-page-team-staff .team-staff-service-group[hidden],
.admin-body.admin-page-team-staff .team-staff-service-row[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-service-group {
    display: grid;
}

.admin-body.admin-page-team-staff .team-staff-service-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e7ebf1;
}

.admin-body.admin-page-team-staff .team-staff-service-row.is-group {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}

.admin-body.admin-page-team-staff .team-staff-service-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-check input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #6a5af9;
}

.admin-body.admin-page-team-staff .team-staff-service-check input:focus,
.admin-body.admin-page-team-staff .team-staff-service-check input:focus-visible {
    box-shadow: none;
    border-color: transparent;
}

.admin-body.admin-page-team-staff .team-staff-service-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.admin-body.admin-page-team-staff .team-staff-service-copy strong {
    color: #141d2b;
    font-size: 0.98rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-copy small {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-service-price {
    color: #141d2b;
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-services-empty {
    margin-top: 0.25rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-section {
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-card {
    max-width: 860px;
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid #dde4ee;
    border-radius: 14px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-lead {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-lead .material-symbols-outlined {
    margin-top: 0.02rem;
    color: #293140;
    font-size: 1.12rem;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-lead p,
.admin-body.admin-page-team-staff .team-staff-payroll-copy-empty {
    margin: 0;
    color: #273444;
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-empty {
    color: #667085;
    font-size: 0.86rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls {
    max-width: 680px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .form-group {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .btn .material-symbols-outlined {
    font-size: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card {
    max-width: 860px;
    display: grid;
    gap: 1.05rem;
    padding: 0.1rem 0 0;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card.is-disabled {
    opacity: 0.78;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card .team-payroll-form-grid,
.admin-body.admin-page-team-staff .team-staff-payroll-editor-card .team-payroll-section {
    max-width: 860px;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card .sales-tips-divider {
    margin: 0.1rem 0 0;
}

.admin-body.admin-page-team-staff .team-staff-payroll-note {
    max-width: 860px;
    padding: 1rem 1.05rem;
    border: 1px solid #e3e7ef;
    border-radius: 12px;
    background: #fafbfc;
}

.admin-body.admin-page-team-staff .team-staff-payroll-note .team-commissions-copy {
    gap: 0.28rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-note .team-commissions-copy small {
    font-size: 0.87rem;
}

.admin-body.admin-page-team-staff .team-staff-commissions-section {
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-commissions-date-card,
.admin-body.admin-page-team-staff .team-staff-commissions-editor-card {
    max-width: 860px;
}

.admin-body.admin-page-team-staff .team-staff-commissions-date-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.admin-body.admin-page-team-staff .team-staff-commissions-date-card strong[data-staff-commission-effective-label] {
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-commissions-editor-card {
    gap: 0;
}

.admin-body.admin-page-team-staff .team-staff-commission-row-services {
    padding-bottom: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-row {
    padding: 1.55rem 0;
}

.admin-body.admin-page-team-staff .team-staff-commission-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-row .sales-tips-switch {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-body {
    display: grid;
    gap: 1.55rem;
    padding: 0.32rem 0 1.6rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-body[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-editor[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields[hidden],
.admin-body.admin-page-team-staff [data-staff-service-commission-summary-secondary][hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.55rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.95rem;
    border: 1px solid #d5dbe7;
    border-radius: 12px;
    background: #fff;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell span {
    color: #506174;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell input {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell input:focus {
    outline: none;
    box-shadow: none;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0.28rem;
    padding: 0.22rem;
    border: 1px solid #dde3ec;
    border-radius: 12px;
    background: #f3f5f8;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.72rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #161f2f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn .material-symbols-outlined {
    font-size: 1.18rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn.is-active {
    border-color: #d8dde7;
    background: #ffffff;
    color: #171f30;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary {
    display: grid;
    gap: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-copy {
    display: grid;
    gap: 0.75rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-copy > strong,
.admin-body.admin-page-team-staff .team-staff-service-commission-calculation > strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.95rem;
    padding: 1.05rem 1.25rem;
    border: 1px solid #dde3ee;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-card:disabled {
    cursor: default;
    opacity: 0.7;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-card .material-symbols-outlined {
    color: #1f2937;
    font-size: 1.45rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-text span {
    color: #1f2937;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-text small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-action {
    color: #635bff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-editor {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid #e4e9f1;
    border-radius: 14px;
    background: #fbfcfe;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
    gap: 1rem;
    padding: 0.85rem 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row + .team-staff-service-commission-row {
    border-top: 1px solid #e7edf5;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy {
    display: grid;
    gap: 0.18rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
    display: grid;
    gap: 0.75rem;
    justify-items: end;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #1f2937;
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation {
    display: grid;
    gap: 0.38rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation > small {
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-options {
    display: grid;
    gap: 0.82rem;
    margin-top: 0.28rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: #1f2937;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option input {
    width: 24px;
    height: 24px;
    margin: 0.08rem 0 0;
    accent-color: #6a5af9;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option span {
    display: grid;
    gap: 0.18rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option strong {
    color: #111827;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-commissions-help-link {
    color: #635bff;
    font-weight: 600;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-category-group[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100vw - 2.5rem));
    height: calc(100vh - 2rem);
    margin: 1rem auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-close {
    width: 48px;
    height: 48px;
    border: 1px solid #d4d9e2;
    border-radius: 999px;
    background: #ffffff;
    color: #101828;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-close .material-symbols-outlined {
    font-size: 1.5rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-apply {
    min-height: 48px;
    padding: 0.85rem 1.45rem;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-shell {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 1.35rem;
    padding: 1rem 2.4rem 2rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-head h3 {
    margin: 0;
    color: #111827;
    font-size: clamp(2rem, 3vw, 2.45rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-empty {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 2rem 0 3rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 18px;
    background: #f7f7f8;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-search {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-search .material-symbols-outlined {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #697586;
    font-size: 1.18rem;
    pointer-events: none;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-search input {
    min-height: 46px;
    padding-left: 3rem;
    border-radius: 999px;
    border-color: #d0d5dd;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-filter-toggle {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-filter-pill {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #171a20;
    font-size: 0.97rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-filter-pill.is-active {
    background: #111111;
    color: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-editor {
    min-height: 0;
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-table-head {
    display: grid;
    grid-template-columns: 48px minmax(260px, 1.1fr) 170px minmax(420px, 0.95fr);
    align-items: center;
    gap: 1rem;
    padding: 0 1rem 1rem;
    border-bottom: 1px solid #e7ebf1;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-table-body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.4rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-group {
    display: grid;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-row,
.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row {
    display: grid;
    grid-template-columns: 48px minmax(260px, 1.1fr) 170px minmax(420px, 0.95fr);
    align-items: center;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-row {
    padding: 1.3rem 1rem 1rem;
    border-bottom: 1px solid #e7ebf1;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-title strong {
    color: #101828;
    font-size: 1rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-count {
    min-width: 28px;
    height: 28px;
    padding: 0 0.55rem;
    border: 1px solid #d8dee8;
    border-radius: 999px;
    background: #ffffff;
    color: #344054;
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check span {
    display: none;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:checked,
.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:indeterminate {
    border-color: #6a5af9;
    background: #6a5af9;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 10px;
    width: 12px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row {
    padding: 1.6rem 1rem;
    border-bottom: 1px solid #e7ebf1;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy {
    display: grid;
    gap: 0.18rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy small {
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-price {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
    justify-items: stretch;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(0, 140px) auto;
    align-items: center;
    gap: 0.75rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields.is-using-default {
    opacity: 0.72;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields select {
    min-height: 46px;
    border-radius: 12px;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row .team-staff-commission-value-shell {
    min-height: 46px;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row .team-staff-commission-type-toggle {
    justify-self: start;
}

@media (max-width: 920px) {
    .admin-body.admin-page-team-staff .team-staff-service-commission-grid,
    .admin-body.admin-page-team-staff .team-staff-service-commission-row {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
        justify-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-fields,
    .admin-body.admin-page-team-staff .team-staff-service-commission-rate {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-commission-type-toggle {
        justify-content: flex-start;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-dialog {
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        margin: 0.5rem auto;
        border-radius: 24px;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-shell {
        padding: 0.6rem 1rem 1rem;
        gap: 1rem;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-table-head {
        display: none;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-category-row,
    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-row {
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-price,
    .admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
        grid-column: 2;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-fields {
        grid-template-columns: 1fr;
    }
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-field {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-grid {
    max-width: 620px;
    gap: 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-option {
    width: 34px;
    height: 34px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-option:hover {
    transform: translateY(-1px);
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint {
    position: fixed;
    left: 50%;
    bottom: 7.2rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(169, 189, 216, 0.68);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 34px rgba(15, 23, 36, 0.18);
    color: #2f6df6;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    transform: translateX(-50%);
    animation: teamStaffScrollHintFloat 1.8s ease-in-out infinite;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint:hover {
    background: #ffffff;
    border-color: rgba(116, 155, 227, 0.9);
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint-icon {
    width: 16px;
    height: 16px;
    position: relative;
    flex: 0 0 16px;
    animation: teamStaffScrollHintArrow 1.1s ease-in-out infinite;
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #2f6df6;
    border-bottom: 2px solid #2f6df6;
    transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes teamStaffScrollHintFloat {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-8px);
    }
}

@keyframes teamStaffScrollHintArrow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

.admin-body.admin-page-team-staff .team-staff-editor-avatar-wrap {
    margin-bottom: 1rem;
    overflow-anchor: none;
}

.admin-body.admin-page-team-staff .team-staff-avatar-label {
    position: relative;
}

.admin-body.admin-page-team-staff .team-staff-avatar-label::after {
    content: 'photo_camera';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d7deea;
    background: #ffffff;
    color: #324154;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-size: 0.95rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    box-shadow: 0 6px 14px rgba(26, 38, 54, 0.14);
}

.admin-body.admin-page-team-staff .team-staff-avatar-fallback {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-inline-note {
    margin: 0;
    padding: 0.82rem 0.95rem;
    border: 1px solid #e2e7ef;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.48;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-toggle-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-toggle-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 0.18rem;
    accent-color: #6358e7;
}

.admin-body.admin-page-team-staff .team-staff-toggle-copy {
    display: grid;
    gap: 0.14rem;
}

.admin-body.admin-page-team-staff .team-staff-toggle-copy strong {
    color: #131b2a;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
}

.admin-body.admin-page-team-staff .team-staff-toggle-copy small {
    color: #6a7b90;
    font-size: 0.86rem;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-hub-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #d9e1ec;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: calc(100vh - 190px);
}

.admin-body.admin-page-team-staff .team-staff-hub-sidebar {
    border-right: 1px solid #e5e8f0;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-profile-card {
    position: relative;
    padding: 1.35rem 1.2rem 1rem;
    border-bottom: 1px solid #e5e8f0;
    display: grid;
    gap: 0.95rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-back {
    position: absolute;
    top: 0.8rem;
    right: 0.85rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #1a2333;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-profile-copy h2 {
    margin: 0;
    color: #121c2d;
    font-size: 1.05rem;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.admin-body.admin-page-team-staff .team-staff-hub-profile-copy p {
    margin: 0.26rem 0 0;
    color: #617089;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-hub-avatar {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid #9fd3f6;
    background: #0f5ea2;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-body.admin-page-team-staff .team-staff-hub-avatar.is-photo {
    background: #ffffff;
    color: transparent;
}

.admin-body.admin-page-team-staff .team-staff-hub-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-body.admin-page-team-staff .team-staff-hub-actions summary {
    min-height: 44px;
    padding: 0.58rem 1rem;
    border-radius: 999px;
    justify-content: center;
    font-size: 0.95rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta li {
    display: grid;
    gap: 0.14rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta strong {
    color: #111a2a;
    font-size: 0.84rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta span {
    color: #63728a;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav {
    padding: 1rem;
    display: grid;
    gap: 0.45rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav a {
    padding: 0.78rem 0.9rem;
    border-radius: 12px;
    color: #162031;
    font-size: 0.96rem;
    font-weight: 750;
    line-height: 1.25;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav a.is-active,
.admin-body.admin-page-team-staff .team-staff-hub-nav a:hover {
    background: #ecebff;
    color: #171f31;
}

.admin-body.admin-page-team-staff .team-staff-hub-main {
    padding: 1.55rem 1.4rem 1.4rem;
    background: #ffffff;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.admin-body.admin-page-team-staff .team-staff-hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-head h1 {
    margin: 0;
    color: #111a2a;
    font-size: clamp(1.8rem, 2.2vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.admin-body.admin-page-team-staff .team-staff-hub-head h2 {
    margin: 0.9rem 0 0;
    color: #121c2d;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-link {
    display: inline-block;
    margin-top: 0.35rem;
    color: #5f56ff;
    font-size: 0.96rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-link:hover {
    text-decoration: underline;
}

.admin-body.admin-page-team-staff .team-staff-hub-range-form select {
    min-height: 44px;
    padding: 0.65rem 2.75rem 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid #d6dfeb;
    background: #ffffff;
    color: #121b2b;
    font-size: 0.95rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-card,
.admin-body.admin-page-team-staff .team-staff-hub-activity,
.admin-body.admin-page-team-staff .team-staff-hub-empty {
    border: 1px solid #dce3ef;
    border-radius: 16px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-card {
    padding: 1.2rem 1.15rem;
    display: grid;
    gap: 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-card-wide,
.admin-body.admin-page-team-staff .team-staff-hub-activity {
    grid-column: 1 / -1;
}

.admin-body.admin-page-team-staff .team-staff-hub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-card-head h3 {
    margin: 0;
    color: #121b2c;
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-info {
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 1px solid #d9e1eb;
    color: #7b8799;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-value {
    margin: 0;
    color: #091322;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change span {
    min-height: 30px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #d7deeb;
    background: #ffffff;
    color: #131c2b;
    font-size: 0.9rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change.is-negative span {
    color: #c03b56;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change small {
    color: #65758c;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart {
    margin-top: 0.3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 0.9rem;
    align-items: end;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-col {
    display: grid;
    gap: 0.45rem;
    align-items: end;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-amount {
    color: #6b7a90;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-bar-shell {
    height: 132px;
    border-bottom: 1px solid #d8e1ec;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.1rem;
    background-image: linear-gradient(to top, transparent 24%, rgba(220, 227, 239, 0.9) 24%, rgba(220, 227, 239, 0.9) 25%, transparent 25%, transparent 49%, rgba(220, 227, 239, 0.9) 49%, rgba(220, 227, 239, 0.9) 50%, transparent 50%, transparent 74%, rgba(220, 227, 239, 0.9) 74%, rgba(220, 227, 239, 0.9) 75%, transparent 75%);
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-bar {
    width: 100%;
    height: calc(var(--staff-bar-ratio, 0.04) * 100%);
    min-height: 6px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #9fd3f6 0%, #0f5ea2 100%);
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-col small {
    color: #5f6f87;
    font-size: 0.83rem;
    line-height: 1.35;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity {
    padding: 1.1rem 1.15rem;
    display: grid;
    gap: 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-empty {
    padding: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-empty h4 {
    margin: 0;
    color: #101a2a;
    font-size: 1rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-empty p {
    margin: 0.35rem 0 0;
    color: #66768d;
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-list {
    display: grid;
    gap: 0.78rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #e2e8f1;
    border-radius: 14px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-item strong {
    color: #131b2b;
    font-size: 0.98rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-item p {
    margin: 0.2rem 0 0;
    color: #66768d;
    font-size: 0.9rem;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-meta {
    display: grid;
    justify-items: end;
    gap: 0.32rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-meta small {
    color: #6e7d93;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-status {
    min-height: 28px;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-pending {
    background: #f3eaff;
    color: #6c52df;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-confirmed {
    background: #e7f4ff;
    color: #1f6fbb;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-completed {
    background: #e8f8ef;
    color: #268154;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-canceled {
    background: #ffecef;
    color: #be3553;
}

@media (max-width: 980px) {
    .admin-body.admin-page-team-staff .team-staff-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-form-head {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-row-menu {
        width: 100%;
    }

    .admin-body.admin-page-team-staff .team-staff-row-menu summary {
        width: 100%;
        justify-content: center;
    }

    .admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-options-menu {
        position: static;
        right: auto;
        bottom: auto;
        top: auto;
        width: 100%;
        min-width: 0;
        margin-top: 0.45rem;
    }

    .admin-body.admin-page-team-staff .team-staff-editor-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-editor-actions {
        justify-content: flex-start;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-pane-head,
    .admin-body.admin-page-team-staff .team-staff-hub-pane-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-facts-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .admin-body.admin-page-team-staff .team-staff-profile-shell {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-shell,
    .admin-body.admin-page-team-staff .team-staff-hub-main-grid {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-sidebar {
        border-right: 0;
        border-bottom: 1px solid #e5e8f0;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-head,
    .admin-body.admin-page-team-staff .team-staff-hub-activity-item {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-activity-meta {
        justify-items: start;
    }
}

.lh-lang-fab {
    display: block;
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 146;
}

.lh-lang-fab-toggle {
    min-width: 62px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(116, 205, 218, 0.56);
    background: linear-gradient(160deg, #27d1df 0%, #17b0c2 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    box-shadow: 0 12px 24px rgba(11, 28, 38, 0.3);
    padding: 0 0.9rem;
    cursor: pointer;
}

.lh-lang-fab-code {
    font-size: 0.82rem;
    line-height: 1;
}

.lh-lang-fab-toggle .lh-lang-flag,
.lh-lang-fab-menu .lh-lang-flag {
    width: 14px;
    height: 10px;
    box-shadow: 0 0 0 1px rgba(7, 19, 31, 0.35);
}

.lh-lang-fab-caret {
    font-size: 0.78rem;
    line-height: 1;
    transform: translateY(1px);
    transition: transform 0.2s ease;
}

.lh-lang-fab.is-open .lh-lang-fab-caret {
    transform: rotate(180deg) translateY(-1px);
}

.lh-lang-fab-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.45rem);
    display: none;
    flex-direction: column;
    gap: 0.32rem;
    background: rgba(10, 21, 33, 0.94);
    border: 1px solid rgba(122, 150, 178, 0.4);
    border-radius: 10px;
    padding: 0.34rem;
    min-width: 84px;
    box-shadow: 0 12px 24px rgba(8, 19, 29, 0.3);
}

.lh-lang-fab.is-open .lh-lang-fab-menu {
    display: flex;
}

.lh-lang-fab-menu a {
    min-height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #d2e4fb;
    letter-spacing: 0.03em;
    padding: 0 0.56rem;
}

.lh-lang-fab-menu a:hover {
    background: rgba(49, 74, 103, 0.42);
}

.lh-lang-fab-menu a.is-active {
    background: rgba(31, 198, 215, 0.24);
    color: #8af1ff;
}

.lh-scroll-up svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-scroll-up.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.lh-scroll-up:hover {
    box-shadow: 0 16px 30px rgba(10, 24, 34, 0.42);
    transform: translateY(-2px) scale(1.02);
}

.lh-retell-assistant {
    position: fixed;
    left: 22px;
    bottom: 24px;
    z-index: 148;
    --lh-retell-accent: #111111;
}

.lh-retell-launcher {
    position: relative;
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    border: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    transform-origin: left bottom;
    cursor: pointer;
}

.lh-retell-launcher:hover {
    transform: translateY(-1px) scale(1.01);
}

.lh-retell-launcher:focus-visible {
    outline: none;
}

.lh-retell-launcher-hovertext {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px) scale(0.92);
    transform-origin: left center;
    display: block;
    width: max-content;
    max-width: min(360px, calc(100vw - 128px));
    border-radius: 14px;
    border: 1px solid rgba(235, 224, 248, 0.95);
    background: linear-gradient(170deg, #ffffff 0%, #f8f3ff 100%);
    color: #7a2b9a;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    padding: 0.72rem 0.9rem;
    box-shadow: 0 14px 28px rgba(39, 16, 50, 0.28);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.lh-retell-launcher-hovertext::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 10px solid #fbf6ff;
}

.lh-retell-launcher:hover .lh-retell-launcher-hovertext,
.lh-retell-launcher:focus-visible .lh-retell-launcher-hovertext {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.lh-retell-assistant.is-intro-open .lh-retell-launcher-hovertext {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.lh-retell-assistant.is-open .lh-retell-launcher-hovertext {
    opacity: 0;
    visibility: hidden;
}

.lh-retell-launcher-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 28% 20%, #f9edff 0%, rgba(249, 237, 255, 0.2) 35%, rgba(249, 237, 255, 0) 62%),
        linear-gradient(155deg, #b14ee2 0%, #722ca2 64%, #521e76 100%);
    border: 4px solid rgba(255, 255, 255, 0.93);
    box-shadow: 0 16px 28px rgba(38, 11, 56, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: retellAvatarFloat 2.8s ease-in-out infinite;
}

.lh-retell-launcher-avatar::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(230, 175, 255, 0.56) 0%, rgba(230, 175, 255, 0.2) 45%, rgba(230, 175, 255, 0) 72%);
    filter: blur(1.1px);
    opacity: 0.75;
    z-index: 0;
    animation: retellAvatarGlow 2.4s ease-in-out infinite;
}

.lh-retell-launcher-avatar::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8cffcf;
    border: 2px solid #64278c;
    box-shadow: 0 0 0 0 rgba(140, 255, 207, 0.65);
    animation: retellPulse 1.9s ease infinite;
}

.lh-retell-bot-svg {
    width: 94%;
    height: 94%;
    position: relative;
    z-index: 1;
}

.lh-retell-bot-svg .bot-bg {
    fill: #ede6ff;
}

.lh-retell-bot-svg .bot-hair {
    fill: #6f2f9d;
}

.lh-retell-bot-svg .bot-face {
    fill: #f9f6ff;
}

.lh-retell-bot-svg .bot-eye {
    fill: #6b2f97;
}

.lh-retell-bot-svg .bot-line {
    fill: none;
    stroke: #6d3299;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-retell-bot-svg .bot-neck {
    fill: #ede6ff;
}

.lh-retell-bot-svg .bot-shoulders {
    fill: none;
    stroke: #ab72d1;
    stroke-width: 3;
    stroke-linecap: round;
}

.lh-retell-bot-svg .bot-ear {
    fill: #ba8bde;
}

@keyframes retellPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(140, 255, 207, 0.55);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(140, 255, 207, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(140, 255, 207, 0);
    }
}

@keyframes retellAvatarFloat {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 16px 28px rgba(38, 11, 56, 0.42);
    }
    50% {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 22px 34px rgba(38, 11, 56, 0.5);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 16px 28px rgba(38, 11, 56, 0.42);
    }
}

@keyframes retellAvatarGlow {
    0% {
        transform: scale(0.94);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.95;
    }
    100% {
        transform: scale(0.94);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lh-retell-launcher-avatar,
    .lh-retell-launcher-avatar::before,
    .lh-retell-launcher-avatar::after {
        animation: none !important;
    }
}

.lh-retell-panel {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 0.66rem);
    width: min(360px, calc(100vw - 1.2rem));
    max-height: min(560px, calc(100vh - 2.2rem));
    border-radius: 16px;
    border: 1px solid rgba(124, 149, 178, 0.32);
    background: rgba(246, 249, 253, 0.98);
    box-shadow: 0 20px 45px rgba(7, 17, 28, 0.28);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.lh-retell-assistant.is-open .lh-retell-panel {
    display: flex;
}

.lh-retell-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.9rem 0.95rem 0.78rem;
    background: linear-gradient(150deg, rgba(17, 33, 50, 0.98) 0%, rgba(10, 20, 33, 0.95) 100%);
    color: #f2f6ff;
}

.lh-retell-head-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.62rem;
}

.lh-retell-head-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(199, 220, 248, 0.86);
    background: linear-gradient(145deg, #edf4ff, #dce9fd);
    box-shadow: 0 7px 13px rgba(5, 15, 24, 0.28);
}

.lh-retell-head-copy {
    min-width: 0;
}

.lh-retell-kicker {
    margin: 0;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(161, 210, 255, 0.9);
}

.lh-retell-panel-head h3 {
    margin: 0.18rem 0 0;
    font-size: 1.02rem;
    line-height: 1.1;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lh-retell-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(159, 181, 206, 0.42);
    background: rgba(255, 255, 255, 0.06);
    color: #e6efff;
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lh-retell-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.65rem 0.75rem 0.32rem;
    background: #f8fbff;
    border-bottom: 1px solid rgba(212, 220, 233, 0.88);
}

.lh-retell-tabs button {
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid #d7deeb;
    background: #ffffff;
    color: #1b2b42;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.45rem 0.82rem;
}

.lh-retell-tabs button.is-active {
    border-color: rgba(31, 198, 215, 0.68);
    background: rgba(31, 198, 215, 0.16);
    color: #113651;
}

.lh-retell-view {
    display: none;
}

.lh-retell-view.is-active {
    display: block;
}

.lh-retell-messages {
    height: 278px;
    overflow-y: auto;
    padding: 0.8rem 0.75rem 0.65rem;
    background: #f2f6fb;
    display: grid;
    gap: 0.5rem;
}

.lh-retell-message {
    max-width: calc(100% - 1rem);
    border-radius: 12px;
    box-sizing: border-box;
    padding: 0.64rem 0.82rem;
    font-size: 0.84rem;
    line-height: 1.55;
    box-shadow: 0 6px 12px rgba(11, 21, 34, 0.06);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;
    text-align: left;
}

.lh-retell-message strong {
    font-weight: 700;
    color: inherit;
}

.lh-retell-message-paragraph {
    margin: 0;
}

.lh-retell-message-paragraph + .lh-retell-message-paragraph {
    margin-top: 0.5rem;
}

.lh-retell-option-list {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.48rem;
}

.lh-retell-message-paragraph + .lh-retell-option-list {
    margin-top: 0.7rem;
}

.lh-retell-option-item {
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    align-items: start;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    background: rgba(31, 198, 215, 0.08);
    border: 1px solid rgba(31, 198, 215, 0.18);
}

.lh-retell-option-badge {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.22);
}

.lh-retell-option-text {
    min-width: 0;
}

.lh-retell-message.is-assistant {
    justify-self: start;
    background: #ffffff;
    border: 1px solid rgba(210, 220, 233, 0.92);
    color: #132338;
}

.lh-retell-message.is-user {
    justify-self: end;
    background: rgba(31, 198, 215, 0.22);
    border: 1px solid rgba(31, 198, 215, 0.42);
    color: #0f2d45;
}

.lh-retell-wa-inline {
    justify-self: start;
    max-width: min(94%, 320px);
    display: grid;
    gap: 0.46rem;
    padding: 0.58rem 0.62rem;
    background: linear-gradient(160deg, #ffffff 0%, #f6fbf8 100%);
    border: 1px solid rgba(141, 209, 172, 0.66);
    box-shadow: 0 10px 18px rgba(16, 50, 34, 0.11);
}

.lh-retell-wa-inline p {
    margin: 0;
    color: #173329;
    font-size: 0.82rem;
    line-height: 1.38;
    font-weight: 650;
}

.lh-retell-inline-wa-btn {
    justify-self: start;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(37, 182, 124, 0.68);
    background: linear-gradient(156deg, #2acf80 0%, #16a765 100%);
    color: #ffffff;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.32rem 0.82rem;
    box-shadow: 0 8px 14px rgba(14, 87, 53, 0.22);
}

.lh-retell-inline-wa-btn:hover,
.lh-retell-inline-wa-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.lh-retell-form {
    padding: 0.58rem 0.7rem 0.72rem;
    border-top: 1px solid rgba(213, 221, 233, 0.88);
    background: #f9fbff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.52rem;
}

.lh-retell-form input {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid #cfd8e6;
    background: #ffffff;
    padding: 0.62rem 0.72rem;
    font-size: 0.86rem;
}

.lh-retell-form button {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 0.9rem;
    white-space: nowrap;
}

.lh-retell-chat-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.7rem 0.78rem;
    border-top: 1px solid rgba(213, 221, 233, 0.88);
    background: #f9fbff;
}

.lh-retell-chat-actions button {
    flex: 1 1 0;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.77rem;
    font-weight: 780;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.lh-retell-chat-actions button:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

.lh-retell-end-btn {
    background: linear-gradient(160deg, #fff5f5 0%, #ffe9e9 100%);
    border-color: rgba(219, 77, 77, 0.4);
    color: #8f1f2c;
    box-shadow: 0 8px 14px rgba(155, 38, 51, 0.12);
}

.lh-retell-end-btn:hover,
.lh-retell-end-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.01);
    box-shadow: 0 12px 18px rgba(155, 38, 51, 0.18);
}

.lh-retell-exit-btn {
    background: linear-gradient(165deg, #ffffff 0%, #edf3fb 100%);
    border-color: rgba(177, 194, 216, 0.86);
    color: #18324c;
    box-shadow: 0 8px 14px rgba(24, 50, 76, 0.11);
}

.lh-retell-exit-btn:hover,
.lh-retell-exit-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 12px 18px rgba(24, 50, 76, 0.16);
}

.lh-retell-voice-status {
    margin: 0;
    padding: 0.88rem 0.8rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #18314a;
}

.lh-retell-voice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.8rem 0.72rem;
}

.lh-retell-voice-actions button {
    flex: 1 1 auto;
    min-height: 41px;
    border-radius: 10px;
}

.lh-retell-voice-wa {
    margin: 0 0.8rem 0.8rem;
    padding: 0.58rem 0.62rem;
    border-radius: 12px;
    border: 1px solid rgba(141, 209, 172, 0.66);
    background: linear-gradient(160deg, #ffffff 0%, #f6fbf8 100%);
    box-shadow: 0 10px 18px rgba(16, 50, 34, 0.11);
    display: grid;
    gap: 0.5rem;
}

.lh-retell-voice-wa[hidden] {
    display: none !important;
}

.lh-retell-voice-wa p {
    margin: 0;
    color: #173329;
    font-size: 0.82rem;
    line-height: 1.38;
    font-weight: 650;
}

.lh-retell-voice-wa .lh-retell-inline-wa-btn {
    width: 100%;
    min-height: 36px;
}

.lh-retell-inline-wa-btn.is-suggested {
    animation: retellWhatsappPulse 0.95s ease-in-out 2;
}

@keyframes retellWhatsappPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 14px rgba(14, 87, 53, 0.22);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 6px rgba(42, 207, 128, 0.2), 0 10px 18px rgba(14, 87, 53, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 8px 14px rgba(14, 87, 53, 0.22);
    }
}

.lh-retell-transcript {
    border-top: 1px solid rgba(214, 221, 233, 0.88);
    background: #f4f8fd;
    padding: 0.7rem 0.75rem 0.8rem;
}

.lh-retell-transcript-title {
    margin: 0 0 0.45rem;
    color: #4e5f77;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.lh-retell-transcript-body {
    max-height: 162px;
    overflow-y: auto;
    display: grid;
    gap: 0.42rem;
}

.lh-retell-transcript-line {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    border-radius: 9px;
    padding: 0.42rem 0.52rem;
}

.lh-retell-transcript-line.is-assistant {
    background: #ffffff;
    border: 1px solid rgba(210, 220, 234, 0.95);
    color: #1f3148;
}

.lh-retell-transcript-line.is-user {
    background: rgba(169, 216, 246, 0.24);
    border: 1px solid rgba(150, 203, 236, 0.52);
    color: #1d3f5e;
}

@media (max-width: 980px) {
    .lh-retell-assistant {
        left: 18px;
        bottom: 20px;
    }

    .lh-lang-fab {
        right: 18px;
        bottom: 82px;
    }
}

@media (max-width: 760px) {
    .site-body.page-home .lh-hero {
        min-height: auto;
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        min-height: auto;
    }

    .lh-scroll-up {
        width: 50px;
        height: 50px;
        right: 14px;
        bottom: 14px;
    }

    .lh-retell-assistant {
        left: 14px;
        bottom: 12px;
    }

    .lh-retell-launcher {
        width: 54px;
        height: 54px;
        min-width: 54px;
        min-height: 54px;
    }

    .lh-retell-launcher-hovertext {
        display: none;
    }

    .lh-retell-assistant.is-intro-open .lh-retell-launcher-hovertext {
        display: block;
        max-width: min(250px, calc(100vw - 96px));
        left: calc(100% + 9px);
        font-size: 0.8rem;
        padding: 0.62rem 0.74rem;
    }

    .lh-retell-panel {
        width: min(340px, calc(100vw - 1rem));
    }

    .lh-retell-messages {
        height: 250px;
    }

    .lh-lang-fab {
        right: 14px;
        bottom: 74px;
    }

    .lh-lang-fab-toggle {
        min-width: 58px;
        height: 42px;
        padding: 0 0.82rem;
    }

    .lh-scroll-up svg {
        width: 21px;
        height: 21px;
    }
}

/* Hide third-party floating "back to top" buttons */
#toTop,
.to-top,
.back-to-top,
.scroll-top,
.scrollToTop,
.go-top,
a[href="#top"],
a[aria-label*="top" i],
a[aria-label*="arriba" i],
button[aria-label*="top" i],
button[aria-label*="arriba" i],
[title*="back to top" i],
[title*="volver arriba" i] {
    display: none !important;
}

/* Public template */

.site-body {
    --lh-header-offset: calc(var(--lh-topline-h) + var(--lh-nav-h));
    background: #f6f6f6;
    padding-top: var(--lh-header-offset);
    transition: padding-top 0.68s cubic-bezier(0.16, 0.72, 0.24, 1);
}

.site-body main {
    display: flex;
    flex-direction: column;
}

.site-body.page-home .lh-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
    min-height: calc(660px + var(--lh-header-offset));
}

.site-body.page-home .lh-hero .lh-hero-inner {
    min-height: calc(574px + var(--lh-header-offset));
}

section[id] {
    scroll-margin-top: calc(var(--lh-topline-h) + var(--lh-nav-h) + 14px);
}

.site-body.topline-hidden section[id] {
    scroll-margin-top: calc(var(--lh-nav-h) + 14px);
}

.lh-topline {
    background: linear-gradient(90deg, var(--lh-topline-start) 0%, var(--lh-topline-end) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #d8deea;
    font-size: 0.84rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    border-bottom: 0;
    box-shadow: none;
    transition: transform 0.68s ease, opacity 0.5s ease, filter 0.5s ease;
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.lh-topline-inner {
    min-height: var(--lh-topline-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.lh-topline-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
}

.lh-topline p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: #dce4f3;
    flex: 1 1 auto;
    min-width: 0;
}

.lh-topline-copy {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lh-topline-icon {
    width: 22px;
    height: 22px;
    color: var(--lh-cyan);
    flex: 0 0 auto;
    display: inline-flex;
}

.lh-topline-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-topline-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: 0.25rem;
}

.lh-topline-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: rgba(18, 34, 52, 0.66);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(4, 12, 22, 0.32);
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.lh-topline-social a::after {
    content: none;
}

.lh-topline-social a:hover {
    transform: translateY(-2px) scale(1.04);
    filter: saturate(1.08) brightness(1.05);
    box-shadow: 0 10px 18px rgba(3, 14, 25, 0.42);
}

.lh-topline-social svg {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
}

.lh-topline-social a[aria-label='Instagram'] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.lh-topline-social a[aria-label='Facebook'] svg {
    fill: currentColor;
    stroke: none;
}

.lh-topline-social a[aria-label='Facebook'] {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}

.lh-topline-social a[aria-label='Facebook']:hover {
    background: #166fe5;
    border-color: #166fe5;
}

.lh-topline-social a[aria-label='Instagram'] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.lh-topline-social a[aria-label='Instagram']:hover {
    filter: saturate(1.15) brightness(1.06);
}

.lh-topline-social a[aria-label='Google'] {
    background: #ffffff;
    border-color: #d5deea;
}

.lh-topline-social a[aria-label='Google'] svg {
    width: 17px;
    height: 17px;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(1) {
    fill: #4285f4;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(2) {
    fill: #34a853;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(3) {
    fill: #fbbc05;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(4) {
    fill: #ea4335;
}

.lh-topline-social a[aria-label='Google']:hover {
    background: #f9fbff;
}

.lh-topline-contact {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.lh-topline-contact a {
    color: #d4dced;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    font-size: 0.9rem;
    line-height: 1.1;
    white-space: nowrap;
}

.lh-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(77, 89, 106, 0.72);
    border: 1px solid rgba(131, 153, 182, 0.36);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 980px) {
    .lh-hero-slide[data-mobile-skip="1"] {
        display: none !important;
    }
}

.lh-lang-switch a {
    min-width: 50px;
    min-height: 26px;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #c9d2e0;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    line-height: 1;
}

.lh-lang-switch a.is-active {
    border-color: rgba(46, 230, 246, 0.95);
    background: rgba(8, 43, 63, 0.48);
    color: #89f3ff;
    box-shadow: 0 0 0 1px rgba(46, 230, 246, 0.16) inset;
}

.lh-lang-flag {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(11, 25, 42, 0.35);
}

.lh-lang-flag-es {
    background: linear-gradient(to bottom, #c63232 0 25%, #f6d050 25% 75%, #c63232 75% 100%);
}

.lh-lang-flag-en {
    background:
        linear-gradient(to bottom, #cf3f3f 0 14%, #fff 14% 28%, #cf3f3f 28% 42%, #fff 42% 56%, #cf3f3f 56% 70%, #fff 70% 84%, #cf3f3f 84% 100%);
    position: relative;
}

.lh-lang-flag-en::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 38%;
    height: 57%;
    background: #264b9f;
    border-top-left-radius: 2px;
}

.site-header {
    background: linear-gradient(90deg, var(--lh-header-start) 0%, var(--lh-header-end) 100%);
    color: #fff;
    position: fixed;
    top: var(--lh-topline-h);
    left: 0;
    right: 0;
    z-index: 115;
    backdrop-filter: blur(9px) saturate(110%);
    -webkit-backdrop-filter: blur(9px) saturate(110%);
    border-bottom: 1px solid rgba(117, 149, 182, 0.34);
    transition: top 0.26s ease, transform 0.68s ease, box-shadow 0.24s ease, background 0.24s ease, opacity 0.5s ease, filter 0.5s ease;
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.site-body.topline-hidden .lh-topline {
    transform: translateY(-112%);
    opacity: 0;
    filter: blur(1.6px);
    pointer-events: none;
}

.site-body.topline-hidden .site-header {
    top: 0;
}

.site-header.is-scrolled {
    background: linear-gradient(90deg, var(--lh-header-scrolled-start) 0%, var(--lh-header-scrolled-end) 100%);
    box-shadow: 0 10px 22px rgba(6, 11, 18, 0.35);
}

.site-body.nav-is-hidden .lh-topline {
    transform: translateY(-110%) scale(0.84) rotateX(18deg);
    opacity: 0;
    filter: blur(1.8px);
    pointer-events: none;
}

.site-body.nav-is-hidden .site-header {
    transform: translateY(calc(-1 * (var(--lh-topline-h) + var(--lh-nav-h) + 12px))) scale(0.8) rotateX(16deg);
    opacity: 0;
    filter: blur(2px);
    pointer-events: none;
}

.site-body.nav-is-hidden {
    padding-top: 0;
}

.site-body.nav-is-showing .site-header {
    animation: nav-forward 0.82s cubic-bezier(0.17, 0.84, 0.28, 1.08);
}

.site-body.nav-is-showing:not(.topline-hidden) .lh-topline {
    animation: nav-forward 0.82s cubic-bezier(0.17, 0.84, 0.28, 1.08);
}

@keyframes nav-forward {
    0% {
        transform: translateY(-14px) scale(0.82) rotateX(16deg);
        opacity: 0.18;
        filter: blur(1.8px);
    }
    70% {
        transform: translateY(2px) scale(1.02) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) scale(1) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

.lh-nav-shell {
    min-height: var(--lh-nav-h);
    display: grid;
    grid-template-columns: 240px 1fr 210px;
    align-items: stretch;
    gap: 0;
}

.lh-logo-wrap {
    background: transparent;
    padding: 0.24rem 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand {
    font-family: 'Great Vibes', cursive;
    font-size: 2.35rem;
    line-height: 0.9;
    color: #d8aa4d;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lh-logo-wrap .brand-logo {
    max-height: 52px;
}

.lh-logo-wrap p {
    margin: 0.06rem 0 0;
    font-size: 0.67rem;
    color: #f2f5fb;
    font-weight: 600;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 42px;
    margin: auto 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2.4px;
    border-radius: 999px;
    background: #f6f9ff;
    margin: 0;
    box-shadow: 0 0 0 0.2px rgba(255, 255, 255, 0.75);
}

.menu-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(6.4px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-6.4px) rotate(-45deg);
}

.menu-toggle span {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.site-nav a {
    color: #e2e8f4;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0 0.76rem;
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
    background: rgba(46, 82, 117, 0.55);
    color: #fff;
}

.site-nav a.is-active {
    background: linear-gradient(160deg, var(--lh-nav-active-start) 0%, var(--lh-nav-active-end) 100%);
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.28);
}

.lh-nav-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: 0.35rem;
}

.lh-nav-cta-title {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    line-height: 1;
}

.lh-nav-cta-label {
    font-size: 0.73rem;
    color: #d3dced;
    font-weight: 700;
}

.lh-nav-cta-icon {
    width: 31px;
    height: 31px;
    color: var(--lh-cyan);
    display: inline-flex;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 7px rgba(42, 209, 228, 0.28));
}

.lh-nav-cta-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-nav-cta a {
    font-size: 1.02rem;
    color: var(--lh-cyan);
    font-weight: 800;
    line-height: 1.05;
}

.lh-hero {
    min-height: 660px;
    position: relative;
    isolation: isolate;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 2.2rem;
    overflow: hidden;
}

.lh-hero-slides {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.lh-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.75s ease, transform 6s linear;
    pointer-events: none;
}

.lh-hero-slide img {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.lh-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.lh-hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
}

.lh-hero-slide.is-contain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    filter: blur(10px) saturate(0.9);
    transform: scale(1.06);
    opacity: 0.36;
}

.lh-hero-slide.is-contain::before {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lh-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(45, 50, 62, 0.76), rgba(57, 67, 84, 0.72));
    z-index: -1;
}

.lh-hero-controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.65rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .lh-hero:hover .lh-hero-controls,
    .lh-hero:focus-within .lh-hero-controls {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 980px) {
    .site-body.page-home .lh-hero .lh-hero-controls {
        top: var(--lh-hero-mobile-top-offset, 0px);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h, clamp(320px, 62vw, 420px));
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 0.5rem;
    }

    .site-body.page-home .lh-hero:hover .lh-hero-controls,
    .site-body.page-home .lh-hero:focus-within .lh-hero-controls,
    .site-body.page-home .lh-hero.lh-hero-controls-visible .lh-hero-controls {
        opacity: 1;
        visibility: visible;
    }
}

.lh-hero-control {
    width: 40px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid rgba(216, 186, 151, 0.76);
    background: linear-gradient(90deg, #8f6a44 0%, #674629 100%);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        0 10px 24px rgba(67, 42, 20, 0.34),
        inset 0 1px 0 rgba(247, 230, 209, 0.24);
    text-shadow: 0 1px 2px rgba(55, 33, 16, 0.38);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.lh-hero-control-prev {
    border-radius: 0 12px 12px 0;
    margin-left: -0.65rem;
}

.lh-hero-control-next {
    border-radius: 12px 0 0 12px;
    margin-right: -0.65rem;
}

.lh-hero-control:not(:disabled):not(.is-disabled):hover,
.lh-hero-control:not(:disabled):not(.is-disabled):focus-visible {
    background: linear-gradient(90deg, #a2784c 0%, #795134 100%);
    border-color: rgba(225, 198, 167, 0.92);
    color: #ffffff;
    box-shadow:
        0 12px 24px rgba(85, 53, 25, 0.36),
        0 0 0 2px rgba(172, 128, 86, 0.28);
    transform: scale(1.03);
}

.lh-hero-control:not(:disabled):not(.is-disabled):active {
    background: linear-gradient(90deg, #7b5b3d 0%, #5a3a22 100%);
    border-color: rgba(201, 169, 133, 0.84);
    color: #ffffff;
    box-shadow:
        0 6px 14px rgba(70, 43, 21, 0.33),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: scale(0.97);
}

.lh-hero-control:focus-visible {
    outline: none;
}

.lh-hero-control.is-disabled,
.lh-hero-control:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow:
        0 6px 12px rgba(83, 60, 29, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: none;
}

.lh-hero-inner {
    min-height: 574px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f5f7fb;
    max-width: 700px;
    margin-left: auto;
}

.lh-hero .lh-script {
    margin: 0;
    font-family: 'Great Vibes', cursive;
    font-size: clamp(3.4rem, 9vw, 6.4rem);
    line-height: 0.94;
    letter-spacing: 0.01em;
    color: #d8aa4d;
    background: linear-gradient(180deg, #f6df9b 0%, #e2bf6c 48%, #b8862b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 2px 10px rgba(20, 16, 8, 0.35),
        0 1px 0 rgba(255, 238, 180, 0.35);
}

.lh-hero h1 {
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: clamp(2.05rem, 5.2vw, 3.5rem);
    line-height: 1;
    color: var(--lh-cyan);
}

.lh-hero p {
    margin-bottom: 1.35rem;
    font-size: 1.06rem;
    color: #f0f5ff;
}

.lh-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    border-radius: 999px;
    padding: 0.88rem 1.25rem;
    background: var(--lh-cyan);
    color: #fff;
    font-weight: 800;
    transition: background 0.2s ease;
}

.lh-btn-primary:hover {
    background: var(--lh-cyan-2);
}

.site-body.page-about .lh-about-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
    min-height: calc(320px + var(--lh-header-offset));
}

.lh-about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 320px;
    background-image: var(--about-hero-bg);
    background-size: cover;
    background-position: center 38%;
}

.lh-about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(22, 31, 46, 0.78) 0%, rgba(25, 36, 54, 0.7) 46%, rgba(25, 38, 57, 0.58) 100%);
    z-index: -1;
}

.lh-about-hero-inner {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 1rem 0 1.1rem;
    color: #f4f8ff;
    max-width: 760px;
}

.lh-about-hero h1 {
    margin: 0 0 0.42rem;
    color: #ffffff;
    font-size: clamp(2.18rem, 4.5vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
}

.lh-about-hero p {
    margin: 0.08rem 0 0;
    color: rgba(238, 245, 255, 0.92);
    font-size: clamp(0.94rem, 1.45vw, 1.13rem);
    max-width: 640px;
    line-height: 1.45;
}

.lh-about-hero .lh-contact-breadcrumb {
    margin-top: 0.74rem;
    justify-content: flex-start;
    color: #e6efff;
}

.lh-about-overview {
    background: #f2f4f8;
    padding: 0;
}

.lh-about-overview .container {
    width: 100%;
    max-width: none;
    margin: 0;
}

.lh-about-overview-grid {
    margin-top: 0;
    border-radius: 0;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 660px;
}

.lh-about-overview-image {
    margin: 0;
    min-height: 660px;
    position: relative;
}

.lh-about-overview-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 30, 44, 0.5) 0%, rgba(20, 30, 44, 0.22) 38%, rgba(20, 30, 44, 0) 100%),
        linear-gradient(180deg, rgba(11, 20, 34, 0.12) 0%, rgba(11, 20, 34, 0.34) 100%);
}

.lh-about-overview-image img {
    width: 100%;
    height: 100%;
    min-height: 660px;
    object-fit: cover;
}

.lh-about-overview-play {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.46);
    background: rgba(23, 33, 50, 0.24);
    box-shadow: 0 12px 26px rgba(11, 21, 35, 0.36);
    pointer-events: none;
}

.lh-about-overview-play::before,
.lh-about-overview-play::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lh-about-overview-play::after {
    left: 39px;
    top: 31px;
    border: 0;
    width: 0;
    height: 0;
    border-left: 18px solid #f555a7;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: none;
}

.lh-about-overview-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.6rem 5vw 3.1rem;
    max-width: 760px;
    margin-inline: auto;
}

.lh-about-overview-card h2 {
    margin: 0;
    color: #101b2d;
    font-size: clamp(2.25rem, 4.2vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.lh-about-overview-card p {
    margin: 0.95rem 0 0;
    color: #3f4e64;
    font-size: 1.03rem;
    line-height: 1.58;
    font-weight: 600;
}

.lh-about-why-list {
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.62rem;
}

.lh-about-why-list li {
    position: relative;
    padding-left: 1.55rem;
    color: #4a5a71;
    font-size: 1rem;
    line-height: 1.38;
}

.lh-about-why-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #1bbfd1;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

.lh-about-stats {
    margin-top: 1.55rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

.lh-about-stat {
    border-top: 0;
    padding-top: 0;
    text-align: center;
}

.lh-about-stat strong {
    color: #121b2b;
    display: inline-flex;
    align-items: baseline;
    gap: 0.04rem;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lh-about-stat > span {
    display: block;
    margin-top: 0.22rem;
    color: #56657a;
    font-size: clamp(0.92rem, 1.12vw, 1.03rem);
    font-weight: 500;
    line-height: 1.25;
}

.lh-about-stat-number {
    font: inherit;
}

.lh-about-stat-suffix {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-0.12em);
}

.lh-about-team {
    background: #f2f4f8;
    padding: 2.4rem 0 4.8rem;
}

.lh-about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.lh-about-member-card {
    border: 1px solid #d8e1ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 22px rgba(18, 29, 43, 0.11);
}

.lh-about-member-photo {
    margin: 0;
    background: #bec2c8;
    min-height: 0;
}

.lh-about-member-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lh-about-member-body {
    background: #f0f2f4;
    padding: 0.95rem 1.05rem 1.05rem;
}

.lh-about-member-body h3 {
    margin: 0;
    color: #1ebfd1;
    font-size: 1.6rem;
    line-height: 1.14;
}

.lh-about-member-body p {
    margin: 0.2rem 0 0;
    color: #616f80;
    font-size: 0.98rem;
    line-height: 1.35;
}

.site-body.page-contact .lh-contact-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
}

.lh-contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 360px;
    background-image: var(--contact-hero-bg);
    background-size: cover;
    background-position: center;
}

.lh-contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(17, 24, 36, 0.78) 0%, rgba(20, 31, 48, 0.66) 52%, rgba(24, 37, 57, 0.48) 100%);
    z-index: -1;
}

.lh-contact-hero-inner {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.4rem 0 2.2rem;
    color: #f4f8ff;
    max-width: 760px;
}

.lh-contact-hero h1 {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1.02;
    color: #ffffff;
}

.lh-contact-hero p {
    margin: 0.56rem 0 0;
    font-size: clamp(0.95rem, 1.65vw, 1.15rem);
    color: rgba(238, 245, 255, 0.92);
    max-width: 620px;
}

.lh-contact-breadcrumb {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #e6efff;
}

.lh-contact-breadcrumb a {
    color: #65deec;
    font-weight: 700;
}

.lh-contact-breadcrumb strong {
    font-weight: 700;
    color: #ffffff;
}

.lh-terms-doc {
    padding: 2.35rem 0 3.4rem;
}

.lh-terms-paper {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.35rem;
}

.lh-terms-item + .lh-terms-item {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #dce3ec;
}

.lh-terms-item h3 {
    margin: 0 0 0.45rem;
    color: #132033;
    font-size: 1.14rem;
    line-height: 1.25;
    font-weight: 800;
}

.lh-terms-item p {
    margin: 0 0 0.42rem;
    color: #4c5d73;
    font-size: 0.96rem;
    line-height: 1.65;
}

.lh-terms-item p:last-child {
    margin-bottom: 0;
}

.lh-terms-document-html h1,
.lh-terms-document-html h2,
.lh-terms-document-html h3,
.lh-terms-document-html h4,
.lh-terms-document-html h5,
.lh-terms-document-html h6 {
    margin: 0 0 0.45rem;
    color: #132033;
    line-height: 1.25;
}

.lh-terms-document-html p,
.lh-terms-document-html li {
    color: #4c5d73;
    font-size: 0.96rem;
    line-height: 1.65;
}

.lh-terms-document-html p {
    margin: 0 0 0.42rem;
}

.lh-terms-document-html ul,
.lh-terms-document-html ol {
    margin: 0 0 0.8rem 1.3rem;
    padding: 0;
}

.lh-terms-document-html a {
    color: #0daec0;
    text-decoration: underline;
}

.lh-terms-document-html hr {
    border: 0;
    border-top: 1px solid #cfd9e5;
    margin: 1rem 0 1.1rem;
}

/* Unified hero for internal pages (everything except home) */
.site-body:not(.page-home) .lh-page-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
    min-height: calc(320px + var(--lh-header-offset));
}

.lh-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 320px;
    background-image: var(--lh-page-hero-bg);
    background-size: cover;
    background-position: center 38%;
}

.lh-page-hero > .container {
    width: min(1180px, calc(100% - 2.2rem));
    margin-inline: auto;
}

.lh-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(22, 31, 46, 0.78) 0%, rgba(25, 36, 54, 0.7) 46%, rgba(25, 38, 57, 0.58) 100%);
    z-index: -1;
}

.lh-page-hero-inner {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0.4rem 0;
    color: #f4f8ff;
    max-width: 760px;
}

.lh-page-hero h1 {
    margin: 0 0 0.42rem;
    color: #ffffff;
    font-size: clamp(2.18rem, 4.5vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
}

.lh-page-hero p {
    margin: 0.08rem 0 0;
    color: rgba(238, 245, 255, 0.92);
    font-size: clamp(0.94rem, 1.45vw, 1.13rem);
    max-width: 640px;
    line-height: 1.45;
}

.lh-page-hero .lh-contact-breadcrumb {
    margin-top: 0.74rem;
    justify-content: flex-start;
    color: #e6efff;
}

.lh-contact-map-section {
    padding: 1rem 0 2rem;
    background: #eef2f7;
}

.lh-contact-map-frame {
    border-radius: 12px;
    border: 1px solid #d3e1ef;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(14, 28, 44, 0.12);
    background: linear-gradient(180deg, #f8fcff 0%, #eef5fb 100%);
    position: relative;
    isolation: isolate;
}

.lh-contact-map-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

.lh-contact-map-frame iframe {
    width: 100%;
    height: clamp(310px, 45vw, 430px);
    border: 0;
    display: block;
    filter: brightness(1.06) saturate(1.04) contrast(1.01);
}

.lh-contact-main {
    background: #eef2f7;
    padding: 0 0 4.2rem;
}

.lh-contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.lh-contact-form-card,
.lh-contact-info-panel {
    border-radius: 8px;
    border: 1px solid #d3dbe7;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 33, 49, 0.1);
    padding: 1.2rem 1.2rem 1.25rem;
}

.lh-contact-head h2 {
    margin: 0;
    color: #162338;
    font-size: clamp(1.35rem, 2.1vw, 1.95rem);
    line-height: 1.06;
}

.lh-contact-head p {
    margin: 0.55rem 0 0;
    color: #5f6d81;
    font-size: 0.94rem;
    line-height: 1.5;
}

.lh-contact-form {
    margin-top: 1rem;
    display: grid;
    gap: 0.72rem;
}

.lh-contact-form .form-group {
    gap: 0.3rem;
}

.lh-contact-form .form-group label {
    color: #546274;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lh-contact-form input,
.lh-contact-form textarea {
    border-radius: 4px;
    border-color: #c8d2df;
    min-height: 48px;
    padding: 0.68rem 0.78rem;
}

.lh-contact-form textarea {
    min-height: 145px;
}

.lh-contact-submit {
    margin-top: 0.15rem;
    min-height: 44px;
    min-width: 170px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
}

.lh-contact-info-list {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.72rem;
}

.lh-contact-info-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.7rem;
    border: 1px solid #d8e0eb;
    border-radius: 4px;
    padding: 0.85rem 0.9rem;
    background: #f9fbfe;
}

.lh-contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(31, 198, 215, 0.13);
    color: #1ab9cb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.05rem;
}

.lh-contact-info-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-contact-info-copy h3 {
    margin: 0;
    color: #132035;
    font-size: 1.3rem;
    line-height: 1.08;
}

.lh-contact-info-copy p {
    margin: 0.38rem 0 0;
    color: #5d6c82;
    font-size: 0.93rem;
    line-height: 1.47;
}

.lh-contact-info-copy a {
    color: #365684;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lh-contact-info-copy a:hover {
    color: var(--lh-cyan);
}

.lh-contact-cards {
    margin-top: 0.9rem;
    position: relative;
    z-index: 10;
}

.lh-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.lh-card {
    --lh-card-tint: rgba(129, 157, 196, 0.2);
    --lh-card-border: #dbe4ef;
    --lh-card-hover-border: #9ab5d8;
    --lh-card-glow: rgba(22, 39, 64, 0.2);
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid var(--lh-card-border);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    padding: 1.25rem;
    min-height: 205px;
    box-shadow: 0 14px 26px rgba(16, 28, 44, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.lh-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 34%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, var(--lh-card-tint) 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.lh-card > * {
    position: relative;
    z-index: 1;
}

.lh-card:hover,
.lh-card:focus-within {
    transform: translateY(-7px);
    border-color: var(--lh-card-hover-border);
    box-shadow:
        0 20px 34px rgba(10, 20, 34, 0.2),
        0 0 0 1px var(--lh-card-hover-border) inset,
        0 0 26px var(--lh-card-glow);
}

.lh-card:hover::before,
.lh-card:focus-within::before {
    opacity: 1;
}

.lh-card img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 10px 20px rgba(12, 23, 37, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.lh-card:hover img,
.lh-card:focus-within img {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 26px rgba(12, 23, 37, 0.26);
    filter: saturate(1.08) contrast(1.03);
}

.lh-card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.28rem;
    font-weight: 650;
    color: #1f2a39;
    transition: color 0.28s ease;
}

.lh-card p {
    margin: 0;
    color: #576376;
    font-size: 0.96rem;
    line-height: 1.45;
    transition: color 0.28s ease;
}

.lh-card a {
    display: inline-flex;
    margin-top: 0.72rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #1cbfd1;
    color: #ffffff;
    font-weight: 700;
    padding: 0.42rem 1.05rem;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.lh-card:hover a,
.lh-card:focus-within a {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(6, 21, 35, 0.24);
}

.lh-card-time {
    --lh-card-tint: rgba(160, 186, 224, 0.26);
    --lh-card-hover-border: #8daed8;
    --lh-card-glow: rgba(83, 121, 176, 0.2);
}

.lh-card-address {
    --lh-card-tint: rgba(130, 220, 232, 0.28);
    --lh-card-hover-border: #58becf;
    --lh-card-glow: rgba(27, 149, 166, 0.22);
}

.lh-card-address a {
    background: #1caec2;
}

.lh-card-address a:hover {
    background: #179bad;
}

.lh-card-phone {
    --lh-card-tint: rgba(247, 213, 118, 0.28);
    --lh-card-hover-border: #e3be4f;
    --lh-card-glow: rgba(162, 128, 26, 0.2);
}

.lh-card-phone a {
    background: #d4a31f;
}

.lh-card:hover h3,
.lh-card:focus-within h3 {
    color: #16283f;
}

.lh-card:hover p,
.lh-card:focus-within p {
    color: #4c5f78;
}

@media (min-width: 981px) {
    .site-body.page-home .lh-hero {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        gap: clamp(0.55rem, 1.3vh, 0.95rem);
        padding-bottom: clamp(0.85rem, 1.6vh, 1.4rem);
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        flex: 1 1 auto;
        min-height: clamp(320px, calc(100dvh - 21rem), calc(574px + var(--lh-header-offset)));
        max-width: min(700px, 56vw);
        padding-top: clamp(0.4rem, 1vh, 0.85rem);
        padding-bottom: 0;
    }

    .site-body.page-home .lh-hero .lh-script {
        margin-bottom: 0;
        font-size: clamp(2.8rem, min(6.8vw, 10dvh), 6rem);
    }

    .site-body.page-home .lh-hero h1 {
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
        font-size: clamp(1.95rem, min(4.5vw, 5.7dvh), 3.35rem);
    }

    .site-body.page-home .lh-hero p {
        margin-bottom: clamp(0.8rem, 1.8vh, 1.2rem);
        font-size: clamp(0.94rem, min(1.08vw, 2.05dvh), 1.06rem);
        line-height: 1.4;
        max-width: 36ch;
    }

    .site-body.page-home .lh-hero .lh-contact-cards {
        margin-top: 0;
    }

    .site-body.page-home .lh-hero .lh-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.65rem, 1vw, 0.9rem);
    }

    .site-body.page-home .lh-hero .lh-card {
        min-height: clamp(150px, 19vh, 205px);
        gap: clamp(0.75rem, 1vw, 1.05rem);
        padding: clamp(0.95rem, 1.25vw, 1.25rem);
    }

    .site-body.page-home .lh-hero .lh-card > div {
        min-width: 0;
    }

    .site-body.page-home .lh-hero .lh-card img {
        width: clamp(76px, 5.2vw, 104px);
        height: clamp(76px, 5.2vw, 104px);
    }

    .site-body.page-home .lh-hero .lh-card h3 {
        margin-bottom: 0.3rem;
        font-size: clamp(1.08rem, 1.45vw, 1.28rem);
    }

    .site-body.page-home .lh-hero .lh-card p {
        margin-bottom: 0;
        font-size: clamp(0.88rem, 0.98vw, 0.96rem);
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    .site-body.page-home .lh-hero .lh-card a {
        margin-top: 0.55rem;
        padding: 0.4rem 0.95rem;
    }
}

.lh-services {
    --parallax-y: 0px;
    position: relative;
    overflow: hidden;
    padding: 4.25rem 0 5rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(116, 226, 228, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(255, 201, 218, 0.22) 0%, transparent 28%),
        linear-gradient(180deg, #f8fbfd 0%, #edf4f7 100%);
}

.lh-services::before,
.lh-services::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.lh-services::before {
    top: 88px;
    left: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(87, 217, 226, 0.16) 0%, rgba(87, 217, 226, 0) 72%);
}

.lh-services::after {
    right: -100px;
    bottom: 44px;
    width: 290px;
    height: 290px;
    background: radial-gradient(circle, rgba(255, 182, 206, 0.16) 0%, rgba(255, 182, 206, 0) 70%);
}

.lh-services-bg {
    position: absolute;
    inset: -140px 0 -120px;
    z-index: 0;
    transform: translate3d(0, var(--parallax-y), 0) scale(1.05);
    transform-origin: center;
    transition: transform 0.09s linear;
    background-image:
        linear-gradient(180deg, rgba(252, 253, 255, 0.6), rgba(247, 250, 252, 0.64)),
        var(--services-bg),
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18) 0%, transparent 38%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, cover;
    background-position: center center, center center, center center;
}

.lh-services .container {
    position: relative;
    z-index: 1;
}

.lh-services .lh-section-header {
    max-width: 940px;
    margin-inline: auto;
}

.lh-services .lh-section-header h2 {
    color: #162236;
    text-shadow: 0 3px 14px rgba(255, 255, 255, 0.36);
}

.lh-services .lh-section-header p {
    margin: 0.25rem auto 0;
    max-width: min(760px, 100%);
    padding: 0.7rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(161, 180, 204, 0.46);
    background: rgba(252, 254, 255, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 10px 24px rgba(23, 38, 58, 0.12);
    color: #2e3e56;
    font-weight: 600;
    line-height: 1.45;
}

.lh-section-header {
    text-align: center;
    margin-bottom: 2.2rem;
}

.lh-section-header h2 {
    margin-bottom: 0.25rem;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    color: #1c2737;
    font-weight: 700;
}

.lh-section-header span,
.lh-calm-head span,
.lh-booking-head span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(160px, 14vw, 220px);
    height: 22px;
    margin: 0.45rem 0 0.75rem;
    background: transparent;
}

.lh-section-header span::before,
.lh-calm-head span::before,
.lh-booking-head span::before {
    content: '';
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(31, 198, 215, 0) 0%,
        rgba(31, 198, 215, 0.2) 14%,
        rgba(31, 198, 215, 0.8) 50%,
        rgba(31, 198, 215, 0.2) 86%,
        rgba(31, 198, 215, 0) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: lh-separator-flow 4.8s ease-in-out infinite;
}

.lh-section-header span::after,
.lh-calm-head span::after,
.lh-booking-head span::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: linear-gradient(135deg, #4be0eb, #18b4c2);
    border: 2px solid #f8fbff;
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px rgba(31, 198, 215, 0.24);
    animation: lh-separator-pulse 2.6s ease-in-out infinite;
}

@keyframes lh-separator-flow {
    0% {
        background-position: 0% 50%;
        opacity: 0.62;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.62;
    }
}

@keyframes lh-separator-pulse {
    0%,
    100% {
        transform: rotate(45deg) scale(1);
        box-shadow: 0 0 0 2px rgba(31, 198, 215, 0.24);
    }
    50% {
        transform: rotate(45deg) scale(1.16);
        box-shadow: 0 0 0 4px rgba(31, 198, 215, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lh-section-header span::before,
    .lh-calm-head span::before,
    .lh-booking-head span::before,
    .lh-section-header span::after,
    .lh-calm-head span::after,
    .lh-booking-head span::after {
        animation: none;
    }

    .lh-circle-card {
        animation: none;
        transform: none;
    }
}

.lh-section-header p {
    margin: 0;
    color: #5a6778;
    font-size: 0.96rem;
}

.lh-service-circles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 1.8vw, 1.7rem);
    align-items: center;
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0.75rem 0 0.8rem;
}

.lh-service-circles::before {
    content: '';
    position: absolute;
    inset: 18% 10% 4% 10%;
    z-index: 0;
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 50%, rgba(101, 223, 228, 0.16) 0%, transparent 24%),
        radial-gradient(circle at 80% 40%, rgba(255, 202, 219, 0.14) 0%, transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 0.8;
}

.lh-service-circles::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0.45rem;
    height: 26px;
    z-index: 0;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(28, 51, 77, 0.08) 0%, rgba(28, 51, 77, 0.02) 44%, transparent 72%);
    filter: blur(9px);
    pointer-events: none;
}

.lh-circle-card {
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    --lh-service-size: 294px;
    width: min(var(--lh-service-size), 100%);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 8px solid rgba(247, 251, 255, 0.98);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    z-index: 1;
    background: #ffffff;
    box-shadow:
        0 20px 34px rgba(23, 38, 58, 0.12),
        0 8px 18px rgba(23, 38, 58, 0.08);
    animation: lh-service-float 6.6s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.lh-circle-card::before {
    content: '';
    position: absolute;
    inset: 7%;
    z-index: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.lh-circle-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(165deg, rgba(19, 185, 210, 0.98) 0%, rgba(20, 122, 179, 0.98) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.42s ease;
}

.lh-circle-card:nth-child(1) {
    --lh-service-size: 294px;
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    animation-delay: -0.9s;
}

.lh-circle-card:nth-child(2) {
    --lh-service-size: 294px;
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    animation-delay: -2.4s;
}

.lh-circle-card:nth-child(3) {
    --lh-service-size: 294px;
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    animation-delay: -1.6s;
}

.lh-circle-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
    transform: scale(1);
    opacity: 1;
    filter: saturate(0.98) contrast(1.02);
    transition: transform 0.55s ease, filter 0.55s ease, opacity 0.42s ease;
    backface-visibility: hidden;
}

.lh-circle-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(22, 44, 68, 0.02) 0%, rgba(22, 44, 68, 0.16) 14%, rgba(32, 194, 212, 0.86) 44%, rgba(20, 156, 182, 0.94) 100%);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding: 0.95rem 0.95rem 1rem;
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.34s ease, transform 0.34s ease;
    overflow: hidden;
}

.lh-circle-caption h3 {
    margin: 0;
    font-size: clamp(1.08rem, 1.45vw, 1.28rem);
    line-height: 1.1;
    font-weight: 700;
    text-wrap: balance;
    text-shadow: 0 8px 18px rgba(13, 31, 54, 0.24);
}

.lh-circle-hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.15rem 1.15rem 1rem;
    gap: 0.55rem;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
    transition: opacity 0.42s ease, transform 0.42s ease;
    backface-visibility: hidden;
}

.lh-circle-hover h3 {
    margin: 0;
    font-size: clamp(1.18rem, 1.7vw, 1.46rem);
    line-height: 1.12;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.lh-circle-hover p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    max-width: 210px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
    position: relative;
    z-index: 1;
}

.lh-circle-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 0.2rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.98);
    color: #19adc2;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 24px rgba(18, 44, 66, 0.18);
    position: relative;
    z-index: 1;
}

.lh-circle-card:hover img,
.lh-circle-card:focus-within img {
    transform: scale(1.03);
    opacity: 0;
    filter: saturate(1.02) contrast(1);
}

.lh-circle-card:hover .lh-circle-caption,
.lh-circle-card:focus-within .lh-circle-caption {
    opacity: 0;
    transform: translateY(16px);
}

.lh-circle-card:hover .lh-circle-hover,
.lh-circle-card:focus-within .lh-circle-hover {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.lh-circle-card:hover::after,
.lh-circle-card:focus-within::after {
    opacity: 1;
}

.lh-circle-card:hover,
.lh-circle-card:focus-within {
    animation-play-state: paused;
    box-shadow:
        0 28px 48px rgba(19, 38, 58, 0.16),
        0 12px 24px rgba(19, 38, 58, 0.11);
}

@keyframes lh-service-float {
    0%,
    100% {
        transform: translate3d(0, var(--lh-service-float-start), 0) rotate(var(--lh-service-float-tilt-start));
    }
    50% {
        transform: translate3d(0, var(--lh-service-float-mid), 0) rotate(var(--lh-service-float-tilt-mid));
    }
}

@media (max-width: 1080px) {
    .lh-service-circles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .lh-circle-card:nth-child(n) {
        --lh-service-size: 276px;
        --lh-service-float-start: 0px;
        --lh-service-float-mid: -5px;
        --lh-service-float-tilt-start: 0deg;
        --lh-service-float-tilt-mid: 0deg;
    }
}

@media (max-width: 767px) {
    .lh-services {
        padding: 3.6rem 0 4.2rem;
    }

    .lh-service-circles {
        padding-top: 0.3rem;
    }

    .lh-service-circles::after {
        display: none;
    }

    .lh-circle-card:nth-child(n) {
        --lh-service-size: min(320px, 100%);
        --lh-service-float-start: 0px;
        --lh-service-float-mid: -8px;
        --lh-service-float-tilt-start: 0deg;
        --lh-service-float-tilt-mid: 0deg;
    }
}

.lh-catalog-strip {
    margin: 2rem auto 0;
    max-width: 1140px;
    border-radius: 16px;
    border: 1px solid rgba(181, 198, 218, 0.54);
    background: linear-gradient(118deg, rgba(247, 251, 255, 0.95) 0%, rgba(238, 246, 254, 0.93) 58%, rgba(229, 240, 252, 0.95) 100%);
    box-shadow: 0 16px 30px rgba(14, 32, 51, 0.12);
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 540px);
    gap: 1.2rem;
    align-items: center;
    padding: 1.05rem;
}

.lh-catalog-copy {
    padding: 0.55rem 0.3rem 0.55rem 0.6rem;
}

.lh-catalog-copy h3 {
    margin: 0;
    color: #14253a;
    font-size: clamp(1.24rem, 2.05vw, 1.9rem);
    line-height: 1.12;
    font-weight: 800;
}

.lh-catalog-copy p {
    margin: 0.55rem 0 0;
    color: #4b617b;
    font-size: 0.96rem;
    line-height: 1.55;
    max-width: 650px;
}

.lh-catalog-open-btn {
    margin-top: 0.9rem;
    min-width: 190px;
}

.lh-catalog-preview {
    margin: 0;
    position: relative;
    padding: 0.12rem;
}

.lh-catalog-preview::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 18px;
    background: radial-gradient(circle at 70% 18%, rgba(74, 148, 214, 0.2), rgba(74, 148, 214, 0.02) 60%, rgba(74, 148, 214, 0) 75%);
    z-index: 0;
    pointer-events: none;
}

.lh-catalog-preview-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 0;
    background: linear-gradient(155deg, #ffffff 0%, #f2f8ff 100%);
    padding: 0.42rem;
    cursor: zoom-in;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(164, 190, 220, 0.62);
    overflow: hidden;
    box-shadow: 0 18px 30px rgba(13, 30, 50, 0.28);
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.lh-catalog-preview-btn img {
    width: 100%;
    height: clamp(280px, 36vw, 410px);
    object-fit: contain;
    display: block;
    border-radius: 10px;
    background: #ffffff;
    filter: contrast(1.08) saturate(1.05) brightness(1.01);
    transition: transform 0.38s ease, filter 0.38s ease;
}

.lh-catalog-preview-btn:hover img,
.lh-catalog-preview-btn:focus-visible img {
    transform: scale(1.035);
    filter: contrast(1.12) saturate(1.1) brightness(1.03);
}

.lh-catalog-preview-btn:hover,
.lh-catalog-preview-btn:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(96, 151, 207, 0.7);
    box-shadow: 0 24px 38px rgba(9, 26, 44, 0.36);
}

body.is-modal-open,
.admin-body.admin-page-team-staff.is-staff-editor-modal-open .admin-content,
.site-body.is-modal-open {
    overflow: hidden;
}

.lh-catalog-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: clamp(0.8rem, 2vw, 1.6rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.lh-catalog-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lh-catalog-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(8, 16, 28, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.lh-catalog-dialog {
    position: relative;
    z-index: 1;
    width: min(1280px, 96vw);
    max-height: calc(100vh - 2rem);
    border-radius: 14px;
    border: 1px solid rgba(194, 208, 226, 0.5);
    background: #f8fbff;
    box-shadow: 0 24px 44px rgba(3, 12, 22, 0.45);
    padding: 0.8rem;
    overflow: auto;
}

.lh-catalog-dialog h3 {
    margin: 0 2.5rem 0.6rem 0;
    color: #12243a;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.2;
}

.lh-catalog-dialog img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid #d8e3f0;
    background: #fff;
}

.lh-catalog-close {
    position: absolute;
    top: 0.52rem;
    right: 0.52rem;
    width: 36px;
    height: 36px;
    border: 1px solid #cad8e9;
    border-radius: 999px;
    background: #ffffff;
    color: #16314e;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lh-catalog-close:hover {
    background: #eef6ff;
}

.lh-portfolio {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 4.2rem;
    background:
        radial-gradient(920px 460px at -10% 18%, rgba(221, 188, 205, 0.44) 0%, transparent 70%),
        radial-gradient(860px 440px at 110% 24%, rgba(230, 196, 214, 0.4) 0%, transparent 68%),
        linear-gradient(180deg, #faeff4 0%, #f6e8f0 100%);
}

.lh-portfolio::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url('https://images.unsplash.com/photo-1463320898484-cdee8141c787?auto=format&fit=crop&w=1200&q=80'),
        url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=1200&q=80');
    background-repeat: no-repeat, no-repeat;
    background-size: 560px auto, 620px auto;
    background-position: left -140px top -70px, right -150px bottom -120px;
    opacity: 0.12;
    filter: saturate(0.82);
    pointer-events: none;
}

.lh-portfolio::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 16% 34%, rgba(255, 255, 255, 0.34) 0 10px, transparent 11px),
        radial-gradient(circle at 83% 72%, rgba(255, 255, 255, 0.22) 0 10px, transparent 11px);
    opacity: 0.52;
    pointer-events: none;
}

.lh-portfolio-shell {
    width: 100%;
    padding-inline: 0.65rem;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.lh-portfolio-head {
    text-align: center;
    margin-bottom: 1rem;
}

.lh-portfolio-head h2 {
    margin: 0;
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(2.5rem, 4.9vw, 4.2rem);
    line-height: 1;
    color: #c16d98;
}

.lh-portfolio-canvas {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-auto-rows: 275px;
    gap: 1rem;
    align-items: stretch;
}

.lh-portfolio-shot {
    margin: 0;
    background: #e9dee5;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 22px rgba(38, 32, 45, 0.12);
}

.lh-portfolio-shot:nth-of-type(1) {
    grid-column: 1 / span 6;
    grid-row: 1;
}

.lh-portfolio-shot:nth-of-type(2) {
    grid-column: 7 / span 4;
    grid-row: 1;
}

.lh-portfolio-shot:nth-of-type(3) {
    grid-column: 11 / span 3;
    grid-row: 1;
}

.lh-portfolio-shot:nth-of-type(4) {
    grid-column: 14 / span 3;
    grid-row: 1;
}

.lh-portfolio-shot:nth-of-type(5) {
    grid-column: 1 / span 5;
    grid-row: 2;
}

.lh-portfolio-shot:nth-of-type(6) {
    grid-column: 6 / span 5;
    grid-row: 2;
}

.lh-portfolio-shot:nth-of-type(7) {
    grid-column: 11 / span 6;
    grid-row: 2;
}

.lh-portfolio-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.56s ease, filter 0.36s ease;
}

.lh-portfolio-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.lh-portfolio-shot:hover img,
.lh-portfolio-shot:focus-within img {
    transform: scale(1.07);
    filter: saturate(1.05);
}

.lh-portfolio-shot:hover::after,
.lh-portfolio-shot:focus-within::after {
    opacity: 1;
}

.lh-facebook-showcase {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 4.2rem;
    background:
        radial-gradient(920px 460px at -12% 18%, rgba(78, 127, 227, 0.38) 0%, transparent 72%),
        radial-gradient(860px 440px at 112% 24%, rgba(112, 163, 248, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #eaf2ff 0%, #dce9ff 100%);
    border-top: 1px solid #c3d5f7;
    border-bottom: 1px solid #c3d5f7;
}

.lh-facebook-showcase::before {
    content: 'f';
    position: absolute;
    left: -54px;
    top: -210px;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(320px, 42vw, 560px);
    font-weight: 800;
    line-height: 1;
    color: rgba(24, 119, 242, 0.11);
    pointer-events: none;
}

.lh-facebook-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 34%, rgba(255, 255, 255, 0.42) 0 10px, transparent 11px),
        radial-gradient(circle at 83% 72%, rgba(255, 255, 255, 0.28) 0 10px, transparent 11px);
    opacity: 0.58;
    pointer-events: none;
}

.lh-facebook-showcase-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 500px);
    gap: 1.1rem 2rem;
    align-items: start;
}

.lh-facebook-showcase-copy {
    padding: 0.55rem 0 0;
}

.lh-facebook-showcase-copy h2 {
    margin: 0 0 0.42rem;
    color: #10408f;
    font-size: clamp(1.75rem, 3.1vw, 2.65rem);
    line-height: 1.08;
}

.lh-facebook-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0 0 0.45rem;
    color: #2f4f7f;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.lh-facebook-brand-mark {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1877f2;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(24, 119, 242, 0.25);
}

.lh-facebook-showcase-copy p {
    margin: 0 0 1rem;
    max-width: 42ch;
    color: #3e5f93;
    font-size: 1rem;
    line-height: 1.5;
}

.lh-facebook-showcase-frame {
    justify-self: end;
    width: min(100%, 500px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(96, 135, 198, 0.44);
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(26, 57, 107, 0.22);
}

.lh-facebook-showcase-frame iframe {
    width: 100%;
    height: 700px;
    border: 0;
    display: block;
}

.lh-facebook-video-grid {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 108px;
    gap: 0.82rem;
}

.lh-facebook-video-card {
    position: relative;
    grid-column: span 4;
    grid-row: span 3;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid rgba(96, 135, 198, 0.36);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(26, 57, 107, 0.16);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.lh-facebook-video-card:nth-of-type(1) {
    grid-column: span 5;
}

.lh-facebook-video-card:nth-of-type(2) {
    grid-column: span 4;
}

.lh-facebook-video-card:nth-of-type(3) {
    grid-column: span 3;
}

.lh-facebook-video-card:nth-of-type(4) {
    grid-column: span 7;
}

.lh-facebook-video-card:nth-of-type(5) {
    grid-column: span 5;
}

.lh-facebook-video-card:nth-of-type(6) {
    grid-column: span 6;
}

.lh-facebook-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(22, 50, 98, 0.24);
}

.lh-facebook-video-card::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.lh-facebook-video-card:hover::after {
    opacity: 1;
}

.lh-facebook-video-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #ffffff;
    min-height: 240px;
}

.lh-facebook-video-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0.56rem;
    right: 0.56rem;
    bottom: 0.56rem;
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(181, 207, 247, 0.46);
    background: rgba(18, 53, 109, 0.86);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    backdrop-filter: blur(2px);
    z-index: 1;
}

.lh-facebook-video-card:hover .lh-facebook-video-link {
    opacity: 1;
    transform: translateY(0);
}

.lh-facebook-video-link:hover {
    background: rgba(24, 119, 242, 0.94);
    color: #ffffff;
}

@media (max-width: 1040px) {
    .lh-facebook-showcase-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lh-facebook-showcase-frame {
        justify-self: center;
        width: min(100%, 500px);
    }

    .lh-facebook-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 148px;
        gap: 0.78rem;
    }

    .lh-facebook-video-card,
    .lh-facebook-video-card:nth-of-type(n) {
        grid-column: span 1;
        grid-row: span 2;
    }

    .lh-facebook-video-card:nth-of-type(1),
    .lh-facebook-video-card:nth-of-type(4) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .lh-facebook-showcase {
        padding: 2.5rem 0 2.9rem;
    }

    .lh-facebook-showcase-copy p {
        max-width: none;
        font-size: 0.94rem;
    }

    .lh-facebook-showcase-frame iframe {
        height: 560px;
    }

    .lh-facebook-video-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .lh-facebook-video-card,
    .lh-facebook-video-card:nth-of-type(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .lh-facebook-video-card iframe {
        height: 246px;
        min-height: 246px;
    }

    .lh-facebook-video-link {
        opacity: 1;
        transform: translateY(0);
        min-height: 34px;
        font-size: 0.76rem;
    }
}

.lh-calm {
    position: relative;
    isolation: isolate;
    background-image: var(--calm-image);
    background-size: cover;
    background-position: center;
    padding: 4.8rem 0;
    color: #fff;
}

.lh-calm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: -1;
}

.lh-calm-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 1.95rem;
}

.lh-calm-head h2 {
    margin-bottom: 0.2rem;
    font-size: clamp(1.95rem, 4.1vw, 3.2rem);
}

.lh-calm-head p {
    margin: 0;
    font-size: 1.15rem;
    color: #f4f8ff;
}

.lh-calm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.lh-calm-card {
    text-align: center;
    color: #fff;
}

.lh-icon {
    margin-inline: auto;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 800;
    color: #ff8bd3;
}

.lh-calm-card h3 {
    margin: 0.85rem 0 0.5rem;
    font-size: 2.2rem;
    line-height: 1.12;
}

.lh-calm-card p {
    margin: 0;
    color: #eef3ff;
    font-size: 1.05rem;
}

.lh-proof {
    --parallax-y: 0px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #eceff3;
}

.lh-proof::before,
.lh-proof::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(52vw, 760px);
    min-width: 460px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.98;
    filter: saturate(1.06) contrast(1.03);
    transition: transform 0.09s linear;
}

.lh-proof::before {
    left: -20vw;
    background-image: var(--proof-deco-left);
    transform: translate3d(0, calc(var(--parallax-y) * 0.8), 0);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
}

.lh-proof::after {
    right: -20vw;
    background-image: var(--proof-deco-right);
    transform: translate3d(0, calc(var(--parallax-y) * 0.8), 0);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
}

.lh-proof-bg {
    position: absolute;
    inset: -170px 0 -160px;
    z-index: 0;
    transform: translate3d(0, var(--parallax-y), 0) scale(1.06);
    transform-origin: center;
    transition: transform 0.09s linear;
    background: linear-gradient(180deg, #eceff3, #eceff3);
    filter: none;
}

.lh-proof-stats,
.lh-proof-testimonials {
    position: relative;
    z-index: 2;
}

.lh-proof-stats {
    background: #eceff3;
    border-top: 1px solid #e4e8ef;
    border-bottom: 1px solid #e4e8ef;
}

.lh-proof-stats-grid {
    max-width: 780px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 205px;
}

.lh-proof-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.55rem 1rem;
}

.lh-proof-stat + .lh-proof-stat {
    border-left: 1px solid #dde3ec;
}

.lh-proof-icon {
    width: 38px;
    height: 38px;
    color: #ee64a7;
}

.lh-proof-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-proof-value {
    margin: 0.14rem 0 0;
    color: #111b2c;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(2.9rem, 5.4vw, 4.2rem);
    line-height: 1;
}

.lh-proof-label {
    margin: 0.27rem 0 0;
    font-size: 1.04rem;
    color: #5c6678;
}

.lh-proof-testimonials {
    position: relative;
    overflow: hidden;
    padding: 3.9rem 0 3.4rem;
    background: #eceff3;
}

.lh-proof-testimonials .container {
    position: relative;
    z-index: 2;
}

.lh-proof-slides {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    min-height: 286px;
    border-radius: 24px;
    border: 1px solid rgba(214, 223, 236, 0.9);
    background: #f7f9fc;
    box-shadow: 0 16px 30px rgba(24, 33, 47, 0.1);
}

.lh-proof-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.42s ease, transform 0.42s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.4rem;
}

.lh-proof-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.lh-proof-quote {
    margin: 0 auto;
    max-width: 760px;
    color: #586275;
    font-size: clamp(1.4rem, 2.65vw, 2.18rem);
    line-height: 1.48;
}

.lh-proof-slide h3 {
    margin: 1rem 0 0.2rem;
    font-size: clamp(1.35rem, 2.2vw, 1.82rem);
    color: #121b2a;
}

.lh-proof-role {
    margin: 0;
    color: #6a7485;
    font-size: 1rem;
}

.lh-proof-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.45rem;
}

.lh-proof-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #d2d9e5;
    background: rgba(255, 255, 255, 0.95);
    color: #5e697d;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.lh-proof-arrow:hover {
    background: #fff;
    color: #ea5ca2;
    transform: translateY(-1px);
}

.lh-proof-dots {
    display: flex;
    align-items: center;
    gap: 0.52rem;
}

.lh-proof-dot {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: transparent;
    opacity: 0.72;
    transition: transform 0.24s ease, opacity 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.lh-proof-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lh-proof-dot.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px #d9e0ed;
    opacity: 1;
    transform: translateY(-2px);
}

.lh-team {
    padding: 4rem 0 4.6rem;
    background: #ffffff;
}

.lh-team-header {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.lh-team-header h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
}

.lh-team-header p {
    font-size: 1.08rem;
}

.lh-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.lh-team-card {
    position: relative;
    min-height: 376px;
    perspective: 1300px;
    background: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
}

.lh-team-card-inner {
    position: relative;
    min-height: 376px;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.84s cubic-bezier(0.2, 0.72, 0.18, 1.02);
}

.lh-team-card:hover .lh-team-card-inner,
.lh-team-card:focus-within .lh-team-card-inner,
.lh-team-card.is-flipped .lh-team-card-inner {
    transform: rotateY(180deg);
}

.lh-team-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dce3ea;
    box-shadow: 0 10px 22px rgba(18, 29, 43, 0.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

.lh-team-front {
    background: #fff;
    display: grid;
    grid-template-rows: clamp(228px, 23vw, 248px) minmax(122px, auto);
}

.lh-team-back {
    transform: rotateY(180deg);
    background: linear-gradient(162deg, #31384d 0%, #262d3e 100%);
    color: #f5f8ff;
    padding: 1.15rem 1.1rem 1rem;
    justify-content: center;
}

.lh-team-photo {
    height: 100%;
    background: #bec2c8;
    min-height: 0;
}

.lh-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.lh-team-body {
    padding: 1rem 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.lh-team-front .lh-team-body {
    background: #f0f2f4;
    border-top: 0;
    padding: 1rem 1.1rem 1.05rem;
    min-height: 122px;
    justify-content: flex-start;
}

.lh-team-body h3,
.lh-team-name {
    margin: 0;
    color: #b88334;
    background: linear-gradient(180deg, #e3c27b 0%, #c39243 46%, #8e6220 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.38rem, 1.45vw, 1.85rem);
    font-weight: 700;
    line-height: 1.1;
    min-height: 2.2em;
    display: grid;
    align-content: start;
    gap: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.18);
}

.lh-team-name-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-team-body p {
    margin: 0;
    color: #616f80;
    font-size: clamp(1rem, 0.95vw, 1.2rem);
    font-weight: 500;
    line-height: 1.22;
}

.lh-team-back-copy h3,
.lh-team-back-name {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
    color: #fff;
    line-height: 1.16;
}

.lh-team-role {
    margin: 0.28rem 0 0.62rem;
    color: #7de6f1;
    font-size: 1rem;
    font-weight: 600;
}

.lh-team-bio {
    margin: 0;
    color: #e9eefb;
    font-size: 0.98rem;
    line-height: 1.55;
}

.lh-team-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.lh-team-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(219, 229, 245, 0.72);
    background: #fff;
    color: #243147;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lh-team-socials a:hover {
    transform: translateY(-2px);
    background: var(--lh-cyan);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.9);
}

.lh-team-socials svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.4;
}

.lh-booking {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5rem 0;
    background-image: var(--booking-bg);
    background-size: cover;
    background-position: center;
}

.lh-booking-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(17, 22, 30, 0.58), rgba(17, 22, 30, 0.46));
}

.lh-booking-shell {
    position: relative;
    z-index: 1;
}

.lh-booking-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
}

.lh-booking-hours {
    display: none;
}

.lh-booking-card {
    width: min(1220px, 100%);
    margin-inline: auto;
    border-radius: 28px;
    border: 1px solid rgba(220, 228, 239, 0.98);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(9, 14, 24, 0.18);
    padding: 1.8rem 1.8rem 2rem;
}

.lh-booking-head {
    text-align: center;
    margin-bottom: 1.3rem;
}

.lh-booking-head h2 {
    margin: 0;
    color: #1a2537;
    font-size: clamp(1.9rem, 2.8vw, 2.75rem);
}

.lh-booking-head p {
    margin: 0 auto;
    max-width: 640px;
    color: #5f6c7d;
    font-size: 0.98rem;
    line-height: 1.6;
}

.lh-booking-card .form-grid {
    gap: 1.05rem;
}

.lh-booking-stage-controls {
    order: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lh-booking-stage-controls.is-stage-hidden,
.lh-booking-stage-agenda.is-stage-hidden,
.lh-booking-stage-checkout.is-stage-hidden {
    display: none;
}

.lh-booking-stage-controls.is-stage-open,
.lh-booking-stage-agenda.is-stage-open,
.lh-booking-stage-checkout.is-stage-open {
    display: block;
}

.lh-booking-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.lh-booking-progress-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.lh-booking-progress-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: rgba(198, 208, 222, 0.9);
}

.lh-booking-progress-step-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #17253d;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 800;
}

.lh-booking-progress-step-copy {
    min-width: 0;
}

.lh-booking-progress-step-copy p {
    margin: 0 0 0.14rem;
    color: #7f8fa4;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lh-booking-progress-step-copy strong {
    display: block;
    color: #1b2942;
    font-size: 0.98rem;
    line-height: 1.2;
}

.lh-booking-progress-step.is-active {
    border-color: rgba(121, 140, 184, 0.34);
    box-shadow: 0 10px 18px rgba(53, 187, 204, 0.08);
}

.lh-booking-progress-step.is-active::before {
    background: linear-gradient(90deg, #1cc8d4 0%, #7be5ea 100%);
}

.lh-booking-progress-step.is-active .lh-booking-progress-step-number {
    background: linear-gradient(135deg, #15233c 0%, #274368 100%);
}

.lh-booking-progress-step.is-complete {
    border-color: rgba(29, 199, 139, 0.28);
    box-shadow: 0 10px 18px rgba(29, 199, 139, 0.08);
}

.lh-booking-progress-step.is-complete::before {
    background: linear-gradient(90deg, #1fc98b 0%, #8ae5ba 100%);
}

.lh-booking-progress-step.is-complete .lh-booking-progress-step-number {
    background: linear-gradient(135deg, #17b97d 0%, #31d698 100%);
}

.lh-booking-progress-step.is-locked {
    opacity: 0.62;
    background: #f8fafc;
    box-shadow: none;
}

.lh-booking-service-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.lh-booking-service-group {
    margin-bottom: 0;
}

.lh-booking-service-native {
    display: none;
}

.lh-booking-center-native,
.lh-booking-center-native[hidden] {
    display: none !important;
}

.lh-booking-center-native select[multiple] {
    width: 100%;
    min-height: 168px;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(186, 198, 212, 0.98);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    color: #1b2942;
    font-size: 0.95rem;
    line-height: 1.45;
}

.lh-booking-center-native select[multiple]:focus-visible {
    outline: none;
    border-color: rgba(53, 187, 204, 0.72);
    box-shadow: 0 0 0 4px rgba(53, 187, 204, 0.16);
}

.lh-booking-center-native option {
    padding: 0.45rem 0.35rem;
}

.lh-booking-center-help {
    margin: 0;
    color: #6a7a90;
    font-size: 0.83rem;
    line-height: 1.45;
}

.lh-booking-service-picker-wrap {
    position: relative;
    display: grid;
    gap: 0.75rem;
    text-align: left;
}

.lh-booking-service-picker-wrap.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(4px);
    z-index: 29;
}

.lh-booking-service-picker-label {
    margin: 0;
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 700;
}

.lh-booking-service-trigger {
    min-height: 62px;
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(186, 198, 212, 0.98);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.lh-booking-service-trigger:hover,
.lh-booking-service-trigger.is-open {
    border-color: rgba(53, 187, 204, 0.52);
    box-shadow: 0 16px 30px rgba(17, 32, 58, 0.09);
}

.lh-booking-service-trigger:focus-visible {
    outline: 2px solid rgba(36, 53, 70, 0.18);
    outline-offset: 2px;
}

.lh-booking-service-trigger-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
    justify-items: start;
    text-align: left;
}

.lh-booking-service-trigger-copy strong {
    color: #1b2942;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.lh-booking-service-trigger-copy strong.is-compact {
    font-size: 0.88rem;
    line-height: 1.18;
}

.lh-booking-service-trigger-copy span {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.lh-booking-service-trigger-icon {
    color: #4a5c75;
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}

.lh-booking-service-trigger.is-open .lh-booking-service-trigger-icon {
    transform: rotate(180deg);
}

.lh-booking-service-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 2rem));
    max-height: min(78vh, 760px);
    border: 1px solid rgba(214, 224, 236, 0.98);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.26);
    overflow: hidden;
    z-index: 30;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.lh-booking-service-popover[hidden] {
    display: none !important;
}

.lh-booking-service-popover-head {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    justify-items: stretch;
}

.lh-booking-service-popover-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lh-booking-service-popover-title {
    margin: 0;
    color: #1b2942;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: left;
}

.lh-booking-service-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(206, 216, 229, 0.98);
    border-radius: 12px;
    background: #ffffff;
    color: #41536d;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lh-booking-service-close:hover,
.lh-booking-service-close:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.35);
    box-shadow: 0 10px 22px rgba(27, 41, 66, 0.12);
    color: #1b2942;
}

.lh-booking-service-search-wrap {
    position: relative;
    display: block;
}

.lh-booking-service-search-icon {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    color: #7b8796;
    font-size: 0.98rem;
}

.lh-booking-service-search {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 6.6rem 0.75rem 2.25rem;
    border: 1px solid rgba(206, 216, 229, 0.98);
    border-radius: 14px;
    background: #ffffff;
    color: #1b2942;
    font-size: 0.92rem;
}

.lh-booking-service-search-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    min-width: 88px;
    min-height: 36px;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(53, 187, 204, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, #35bbcc 0%, #289daf 100%);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.lh-booking-service-search-button:hover,
.lh-booking-service-search-button:focus-visible {
    transform: translateY(calc(-50% - 1px));
    box-shadow: 0 10px 20px rgba(40, 157, 175, 0.2);
    filter: brightness(1.02);
}

.lh-booking-service-options {
    max-height: none;
    overflow: auto;
    padding: 0.9rem 1rem 1rem;
    display: grid;
    gap: 0.9rem;
    overscroll-behavior: contain;
    text-align: left;
}

.lh-booking-service-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem 1rem;
    border-top: 1px solid rgba(223, 231, 241, 0.98);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.lh-booking-service-selection-count {
    margin: 0;
    color: #4b5870;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.lh-booking-service-confirm-button {
    min-width: 132px;
    min-height: 42px;
    padding: 0.72rem 1.15rem;
    border: 1px solid rgba(29, 199, 139, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #1fc98b 0%, #17b97d 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.lh-booking-service-confirm-button:hover,
.lh-booking-service-confirm-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(23, 185, 125, 0.24);
    filter: brightness(1.02);
}

@media (max-width: 768px) {
    .lh-booking-service-popover {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1.5rem);
        border-radius: 18px;
    }

    .lh-booking-service-popover-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .lh-booking-service-confirm-button {
        width: 100%;
    }
}

.lh-booking-service-category {
    display: grid;
    gap: 0.65rem;
    text-align: left;
}

.lh-booking-service-category[hidden] {
    display: none !important;
}

.lh-booking-service-category-title {
    margin: 0;
    color: #53657d;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lh-booking-service-category-list {
    display: grid;
    gap: 0.55rem;
}

.lh-booking-service-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed rgba(206, 216, 229, 0.98);
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.lh-booking-service-empty[hidden] {
    display: none !important;
}

.lh-booking-service-option {
    width: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(220, 228, 239, 0.98);
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-service-option[hidden] {
    display: none !important;
}

.lh-booking-service-option:hover,
.lh-booking-service-option.is-selected {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.52);
    box-shadow: 0 14px 26px rgba(17, 32, 58, 0.08);
}

.lh-booking-service-option.is-selected {
    background: linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
}

.lh-booking-service-option-check {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(186, 198, 212, 0.98);
    background: #ffffff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0;
    font-weight: 900;
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.lh-booking-service-option-check::before {
    content: "\2713";
    font-size: 0.82rem;
    line-height: 1;
    color: inherit;
}

.lh-booking-service-option.is-selected .lh-booking-service-option-check {
    border-color: #17b97d;
    background: #17b97d;
    color: #ffffff;
    transform: scale(1.04);
}

.lh-booking-service-option-copy {
    width: 100%;
    display: grid;
    gap: 0.28rem;
    justify-items: start;
    text-align: left;
}

.lh-booking-service-option-name {
    color: #1b2942;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.3;
}

.lh-booking-service-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

.lh-booking-member-group {
    margin-bottom: 0;
}

.lh-booking-member-native {
    display: none;
}

.lh-booking-member-picker-wrap {
    display: grid;
    gap: 0.75rem;
}

.lh-booking-selected-services {
    display: grid;
    gap: 0.72rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(214, 224, 236, 0.98);
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.lh-booking-selected-services[hidden] {
    display: none !important;
}

.lh-booking-selected-services-label {
    margin: 0;
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.lh-booking-selected-services-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.lh-booking-selected-service {
    min-height: 78px;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(210, 220, 232, 0.92);
    border-radius: 18px;
    background: #ffffff;
    display: grid;
    gap: 0.32rem;
    align-content: start;
    box-shadow: 0 10px 22px rgba(23, 37, 61, 0.05);
}

.lh-booking-selected-service-name {
    color: #18284a;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.25;
}

.lh-booking-selected-service-meta {
    color: #64748b;
    font-size: 0.81rem;
    line-height: 1.45;
}

.lh-booking-center-picker-wrap {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.lh-booking-center-picker-wrap[hidden] {
    display: none !important;
}

.lh-booking-center-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.lh-booking-member-picker-label {
    margin: 0;
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 700;
}

.lh-booking-member-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.lh-booking-member-picker.is-disabled {
    opacity: 0.7;
}

.lh-booking-member-picker-empty {
    margin: 0;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(186, 198, 212, 0.98);
    background: #f8fafc;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
}

.lh-booking-member-card {
    min-height: 94px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(210, 220, 232, 0.98);
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-member-card:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.48);
    box-shadow: 0 14px 26px rgba(17, 32, 58, 0.08);
}

.lh-booking-member-card:disabled {
    cursor: not-allowed;
}

.lh-booking-member-card.is-selected {
    border-color: rgba(36, 53, 70, 0.72);
    background: linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
    box-shadow: 0 16px 28px rgba(32, 60, 97, 0.12);
}

.lh-booking-member-card.is-selected .lh-booking-member-card-name {
    color: #18284a;
}

.lh-booking-member-card.is-selected .lh-booking-member-card-meta {
    color: #365a86;
}

.lh-booking-center-card.is-any .lh-booking-member-card-avatar {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

.lh-booking-center-chip {
    min-height: 52px;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(210, 220, 232, 0.98);
    border-radius: 999px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-center-chip:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.48);
    box-shadow: 0 12px 24px rgba(17, 32, 58, 0.08);
}

.lh-booking-center-chip:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.lh-booking-center-chip.is-selected {
    border-color: rgba(36, 53, 70, 0.72);
    background: linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
    box-shadow: 0 14px 26px rgba(32, 60, 97, 0.1);
}

.lh-booking-center-chip-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(186, 198, 212, 0.98);
    background: #ffffff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex: 0 0 auto;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lh-booking-center-chip.is-selected .lh-booking-center-chip-check {
    border-color: #243546;
    background: #243546;
    color: #ffffff;
}

.lh-booking-center-chip-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.lh-booking-center-chip-name {
    color: #1b2942;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
}

.lh-booking-center-chip-meta {
    color: #64748b;
    font-size: 0.77rem;
    line-height: 1.35;
}

.lh-booking-member-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #44546c 100%);
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 22px rgba(31, 41, 55, 0.18);
}

.lh-booking-member-card-avatar.has-photo {
    background: #e2e8f0;
    box-shadow: none;
}

.lh-booking-member-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-booking-member-card-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.lh-booking-member-card-name {
    color: #1b2942;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.2;
}

.lh-booking-member-card-meta {
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.45;
}

.lh-booking-service-note {
    margin: 0;
    color: #6a7a90;
    font-size: 0.85rem;
    line-height: 1.5;
}

.lh-booking-stage-card {
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(223, 231, 241, 0.98);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.lh-booking-stage-card.is-stage-hidden {
    display: none;
}

.lh-booking-stage-card .lh-booking-stage-head {
    margin-bottom: 0.9rem;
}

.lh-booking-stage-card .form-group {
    margin-bottom: 0;
}

.lh-booking-stage-note {
    margin: 0.75rem 0 0;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.lh-booking-stage-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.lh-booking-stage-button {
    min-height: 46px;
    padding: 0.82rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: #243546;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(36, 53, 70, 0.16);
}

.lh-booking-stage-button.is-secondary {
    background: #ffffff;
    color: #243546;
    border: 1px solid rgba(186, 198, 212, 0.98);
    box-shadow: none;
}

.lh-booking-stage-agenda {
    order: 2;
}

.lh-booking-stage-checkout {
    order: 3;
}

.lh-booking-stage-details {
    order: 4;
}

.lh-booking-client-field {
    order: 5;
}

.lh-booking-stage-details,
.lh-booking-client-field {
    align-self: start;
}

.lh-booking-card .form-group label {
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

.lh-booking-card input,
.lh-booking-card select,
.lh-booking-card textarea {
    border-color: #bac6d4;
    background: #fff;
    min-height: 48px;
}

.lh-booking-readonly-display {
    background: #eef5fb;
    border-color: #c4d3e4;
    color: #23324b;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.lh-booking-readonly-display::placeholder {
    color: #8393aa;
}

.lh-booking-card textarea {
    min-height: 92px;
}

.lh-booking-card .empty {
    border-style: solid;
    border-color: #cfdae7;
    background: #f5f9fc;
    color: #4f5e74;
}

.lh-booking-submit {
    margin-top: 0.95rem;
    min-width: 170px;
    min-height: 48px;
    border: 1px solid #1c9b5f;
    background: linear-gradient(180deg, #2dcf80 0%, #1fa966 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(31, 169, 102, 0.22);
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lh-booking-submit:hover,
.lh-booking-submit:focus-visible {
    background: linear-gradient(180deg, #34d889 0%, #229f63 100%);
    border-color: #1b8c56;
    box-shadow: 0 18px 32px rgba(31, 169, 102, 0.28);
    color: #ffffff;
}

.lh-booking-submit:hover {
    transform: translateY(-1px);
}

.lh-booking-submit:focus-visible {
    outline: 3px solid rgba(52, 216, 137, 0.24);
    outline-offset: 2px;
}

.lh-booking-submit:disabled,
.lh-booking-submit[disabled] {
    border-color: #b9d8c7;
    background: linear-gradient(180deg, #d7efe1 0%, #c8e5d4 100%);
    box-shadow: none;
    color: #6b8a76;
    cursor: not-allowed;
    transform: none;
}

.lh-booking-card .form-group-full {
    grid-column: 1 / -1;
}

.lh-booking-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    padding: 0 0 0.7rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-steps.is-legacy-hidden {
    display: none;
}

.lh-booking-step-card.is-step-hidden {
    display: none;
}

.lh-booking-step-card {
    position: relative;
    overflow: visible;
    min-height: 0;
    padding: 0.9rem 0 0.85rem;
    border-radius: 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    display: grid;
    grid-template-rows: auto;
    gap: 0.3rem;
    box-shadow: none;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

.lh-booking-step-card.is-clickable {
    cursor: pointer;
}

.lh-booking-step-card.is-clickable:hover {
    border-bottom-color: rgba(36, 53, 70, 0.42);
}

.lh-booking-step-card.is-clickable:focus-visible {
    outline: 2px solid rgba(36, 53, 70, 0.22);
    outline-offset: 2px;
}

.lh-booking-step-card::before {
    display: none;
}

.lh-booking-step-card::after {
    display: none;
}

.lh-booking-step-card:last-child::after {
    display: none;
}

.lh-booking-step-card.is-active {
    opacity: 1;
}

.lh-booking-step-card.is-complete {
    opacity: 0.95;
}

.lh-booking-step-card.is-locked {
    opacity: 0.45;
}

.lh-booking-step-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.lh-booking-stage-head {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
}

.lh-booking-step-card-head p {
    display: none;
}

.lh-booking-step-card-head h4 {
    margin: 0;
    color: #9aa7b8;
    font-size: 0.99rem;
    font-weight: 600;
    line-height: 1.2;
}

.lh-booking-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid rgba(155, 167, 184, 0.88);
    color: #66758a;
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 auto;
    box-shadow: none;
}

.lh-booking-step-card.is-active .lh-booking-step-card-head h4,
.lh-booking-step-card.is-complete .lh-booking-step-card-head h4 {
    color: #1b2942;
}

.lh-booking-step-card.is-active {
    opacity: 1;
    border-bottom-color: #243546;
}

.lh-booking-step-card.is-active .lh-booking-step-badge {
    border-color: #243546;
    color: #243546;
}

.lh-booking-step-card.is-complete .lh-booking-step-badge {
    background: linear-gradient(135deg, #18b979 0%, #33d28f 100%);
    border-color: #18b979;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(24, 185, 121, 0.18);
}

.lh-booking-step-card.is-complete {
    opacity: 1;
}

.lh-booking-step-card.is-complete .lh-booking-step-badge {
    font-size: 0;
}

.lh-booking-step-card.is-complete .lh-booking-step-badge::before {
    content: "✓";
    font-size: 0.9rem;
    line-height: 1;
}

.lh-booking-checkout-card {
    padding: 1.05rem 1.05rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #fbfcfe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lh-booking-checkout-card.is-locked {
    opacity: 0.72;
    background: #f8fafc;
}

.lh-booking-checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1rem;
    align-items: start;
}

.lh-booking-checkout-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-checkout-kicker {
    margin: 0 0 0.24rem;
    color: #7f8fa4;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lh-booking-checkout-head h3 {
    margin: 0;
    color: #1b2942;
    font-size: 1.18rem;
    line-height: 1.2;
}

.lh-booking-checkout-note {
    margin: 0;
    max-width: 420px;
    color: #6a7a90;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: right;
}

.lh-booking-checkout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.lh-booking-checkout-grid .form-group {
    margin-bottom: 0;
}

.lh-booking-checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.lh-booking-checkout-actions .lh-booking-submit {
    margin-top: 0;
    margin-left: auto;
}

.lh-booking-checkout-summary {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.lh-booking-checkout-summary-kicker {
    margin: 0;
    color: #5e6f86;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lh-booking-checkout-summary-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #f7fafc;
    box-shadow: 0 12px 24px rgba(17, 32, 58, 0.05);
}

.lh-booking-checkout-summary-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.lh-booking-checkout-summary-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #3d4c63 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lh-booking-checkout-summary-avatar.has-photo {
    background: #e2e8f0;
}

.lh-booking-checkout-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-booking-checkout-summary-category {
    margin: 0 0 0.18rem;
    color: #6a7a90;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lh-booking-checkout-summary-title {
    margin: 0;
    color: #1b2942;
    font-size: 1.12rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.lh-booking-checkout-summary-list {
    display: grid;
    gap: 0.55rem;
}

.lh-booking-checkout-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-checkout-summary-item span {
    color: #61718a;
    font-size: 0.82rem;
    font-weight: 600;
}

.lh-booking-checkout-summary-item strong {
    color: #1b2942;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: right;
}

.lh-booking-step-fields {
    display: grid;
    gap: 0.62rem;
    align-content: start;
}

.lh-booking-step-fields .lh-booking-service-bar {
    grid-template-columns: 1fr;
    gap: 0.62rem;
    align-items: start;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.lh-booking-step-fields .lh-booking-service-note {
    font-size: 0.8rem;
}

.lh-booking-step-note {
    display: none;
}

.lh-booking-agenda {
    border: 1px solid rgba(223, 231, 241, 0.98);
    border-radius: 24px;
    background: #ffffff;
    padding: 0;
    display: grid;
    gap: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 16px 34px rgba(17, 32, 58, 0.06);
}

.lh-booking-agenda.is-disabled {
    opacity: 0.7;
}

.lh-booking-agenda-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
    align-items: end;
    gap: 1rem;
    padding: 1rem 1.1rem 0.9rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-agenda-kicker {
    margin: 0 0 0.2rem;
    color: #67788e;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lh-booking-agenda h3 {
    margin: 0;
    color: #162640;
    font-size: 1.02rem;
    line-height: 1.35;
}

.lh-booking-agenda-status {
    margin: 0;
    max-width: 430px;
    padding: 0.58rem 0.76rem;
    border-radius: 12px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #fafcfe;
    color: #5e6f86;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: left;
    box-shadow: none;
}

.lh-booking-agenda-status[data-tone="success"] {
    color: #18784d;
    background: rgba(234, 251, 242, 0.95);
    border-color: rgba(168, 226, 194, 0.92);
}

.lh-booking-agenda-status[data-tone="warning"] {
    color: #9a6300;
    background: rgba(255, 248, 230, 0.95);
    border-color: rgba(241, 214, 153, 0.92);
}

.lh-booking-agenda-status[data-tone="error"] {
    color: #b02d2d;
    background: rgba(255, 241, 241, 0.95);
    border-color: rgba(240, 193, 193, 0.92);
}

.lh-booking-agenda-status[data-tone="loading"] {
    color: #1f5fbf;
    background: rgba(239, 246, 255, 0.95);
    border-color: rgba(186, 210, 245, 0.92);
}

.lh-booking-scheduler {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto auto;
    background: rgba(255, 255, 255, 0.98);
    overflow: hidden;
    box-shadow: none;
}

.lh-booking-summary-panel,
.lh-booking-calendar-panel,
.lh-booking-times-panel {
    padding: 1rem 1.05rem;
}

.lh-booking-summary-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1rem;
    background: #f7fafc;
    border-left: 1px solid rgba(223, 231, 241, 0.98);
    border-right: 0;
}

.lh-booking-calendar-panel {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
    background: #ffffff;
}

.lh-booking-times-panel {
    grid-column: 1;
    grid-row: 2;
    background: #ffffff;
}

.lh-booking-summary-lead {
    margin: 0;
    color: #2e3b52;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-summary-profile {
    display: grid;
    justify-items: start;
    gap: 0.78rem;
    margin-bottom: 0;
}

.lh-booking-summary-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #3d4c63 100%);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.18);
}

.lh-booking-summary-avatar.has-photo {
    background: #e2e8f0;
    box-shadow: none;
}

.lh-booking-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-booking-summary-copy {
    display: grid;
    gap: 0.18rem;
}

.lh-booking-summary-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.lh-booking-summary-chip:has([data-booking-staff-value]) {
    order: 1;
}

.lh-booking-summary-chip:has([data-booking-duration-value]) {
    order: 2;
}

.lh-booking-summary-chip:has([data-booking-timezone-value]) {
    order: 3;
}

.lh-booking-summary-chip {
    display: grid;
    gap: 0.16rem;
    min-height: 0;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(90, 104, 121, 0.35);
    background: rgba(255, 255, 255, 0.98);
}

.lh-booking-summary-chip-label {
    color: #33405a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.lh-booking-summary-chip-value {
    color: #61718a;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
}

.lh-booking-summary-eyebrow,
.lh-booking-calendar-kicker,
.lh-booking-times-kicker {
    margin: 0;
    color: #62758d;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lh-booking-summary-title,
.lh-booking-calendar-head h4,
.lh-booking-times-head h4 {
    margin: 0;
    color: #18284a;
    font-size: 1.08rem;
    line-height: 1.2;
}

.lh-booking-summary-title {
    font-size: 1.3rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.lh-booking-summary-title.is-compact,
.lh-booking-checkout-summary-title.is-compact {
    font-size: 1.05rem;
    line-height: 1.18;
}

.lh-booking-summary-title.has-tooltip,
.lh-booking-checkout-summary-title.has-tooltip {
    position: relative;
    cursor: help;
}

.lh-booking-summary-title.has-tooltip::after,
.lh-booking-checkout-summary-title.has-tooltip::after {
    content: attr(data-service-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 0.55rem);
    min-width: 220px;
    max-width: 320px;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(24, 40, 74, 0.96);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: pre-line;
    box-shadow: 0 18px 34px rgba(17, 32, 58, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 6;
}

.lh-booking-summary-title.has-tooltip::before,
.lh-booking-checkout-summary-title.has-tooltip::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: calc(100% + 0.08rem);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid rgba(24, 40, 74, 0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
    transform: translateY(6px);
}

.lh-booking-summary-title.has-tooltip:hover::after,
.lh-booking-summary-title.has-tooltip:hover::before,
.lh-booking-summary-title.has-tooltip:focus-visible::after,
.lh-booking-summary-title.has-tooltip:focus-visible::before,
.lh-booking-checkout-summary-title.has-tooltip:hover::after,
.lh-booking-checkout-summary-title.has-tooltip:hover::before,
.lh-booking-checkout-summary-title.has-tooltip:focus-visible::after,
.lh-booking-checkout-summary-title.has-tooltip:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

.lh-booking-summary-list,
.lh-booking-summary-item {
    display: none;
}

.lh-booking-calendar-head,
.lh-booking-times-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-calendar-nav {
    display: flex;
    gap: 0.45rem;
}

.lh-booking-calendar-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(218, 227, 239, 0.96);
    background: #fff;
    color: #243147;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lh-booking-calendar-nav-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(45, 152, 176, 0.5);
    box-shadow: 0 12px 22px rgba(24, 43, 71, 0.08);
}

.lh-booking-calendar-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lh-booking-weekdays {
    display: none;
}

.lh-booking-calendar-grid {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2rem 0 0.5rem;
    scroll-behavior: smooth;
}

.lh-booking-calendar-day {
    min-width: 64px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    padding: 0.3rem 0.15rem;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.2rem;
    text-align: center;
    box-shadow: none;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.lh-booking-calendar-day:hover:not(:disabled) {
    transform: translateY(-1px);
}

.lh-booking-calendar-day.is-outside-month {
    opacity: 1;
}

.lh-booking-calendar-day.is-unavailable {
    background: transparent;
}

.lh-booking-calendar-day.is-unavailable .lh-booking-calendar-day-weekday,
.lh-booking-calendar-day.is-unavailable .lh-booking-calendar-day-number {
    color: #c0c8d4;
}

.lh-booking-calendar-day.is-active {
    background: transparent;
}

.lh-booking-calendar-day.is-active .lh-booking-calendar-day-weekday {
    color: #1c2d43;
}

.lh-booking-calendar-day.is-active .lh-booking-calendar-day-number {
    background: #243546;
    color: #ffffff;
}

.lh-booking-calendar-day.is-active .lh-booking-calendar-day-indicator {
    opacity: 1;
}

.lh-booking-calendar-day.is-today:not(.is-active) .lh-booking-calendar-day-number {
    background: #eef5ff;
    color: #2f6fe0;
}

.lh-booking-calendar-day:disabled {
    cursor: not-allowed;
}

.lh-booking-calendar-day-weekday {
    color: #17253d;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
}

.lh-booking-calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 18px;
    color: #17253d;
    font-size: 1.05rem;
    font-weight: 800;
    background: transparent;
}

.lh-booking-calendar-day:not(.is-active):not(.is-unavailable) .lh-booking-calendar-day-number {
    color: #111827;
}

.lh-booking-calendar-day-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #243546;
    opacity: 0;
}

.lh-booking-calendar-day-meta {
    display: none;
}

.lh-booking-time-format {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: #eef3f8;
}

.lh-booking-time-format button {
    min-width: 50px;
    min-height: 34px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #57677d;
    font-size: 0.88rem;
    font-weight: 700;
}

.lh-booking-time-format button.is-active {
    background: #fff;
    color: #17253d;
    box-shadow: 0 8px 18px rgba(23, 37, 61, 0.08);
}

.lh-booking-slot-list {
    display: grid;
    gap: 1rem;
    align-content: start;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.lh-booking-slot-group {
    display: grid;
    gap: 0.7rem;
}

.lh-booking-slot-group-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.lh-booking-slot-group-title {
    margin: 0;
    color: #18284a;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.lh-booking-slot-group-line {
    flex: 1;
    height: 1px;
    background: rgba(208, 217, 229, 0.95);
}

.lh-booking-slot-group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.lh-booking-slot-chip {
    appearance: none;
    border: 1px solid rgba(59, 72, 92, 0.32);
    border-radius: 7px;
    background: #ffffff;
    padding: 0.5rem 0.82rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 76px;
    min-height: 44px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-slot-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(36, 53, 70, 0.58);
    box-shadow: 0 10px 20px rgba(24, 43, 71, 0.08);
}

.lh-booking-slot-chip.is-active {
    border-color: rgba(89, 97, 242, 0.5);
    background: rgba(242, 244, 255, 0.98);
    box-shadow: 0 10px 20px rgba(89, 97, 242, 0.1);
}

.lh-booking-slot-dot {
    display: none;
}

.lh-booking-slot-body {
    display: grid;
    gap: 0.05rem;
    width: 100%;
    justify-items: center;
}

.lh-booking-slot-time {
    color: #18284a;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.1;
}

.lh-booking-slot-meta {
    display: none;
}

.lh-booking-selection {
    margin: 0;
    padding: 0.84rem 0.96rem;
    border-radius: 18px;
    border: 1px solid rgba(185, 225, 233, 0.9);
    background: rgba(230, 249, 252, 0.85);
    color: #16596a;
    font-size: 0.9rem;
    font-weight: 700;
}

.lh-booking-manual-hint,
.lh-booking-empty {
    margin: 0;
    color: #6b7b90;
    font-size: 0.85rem;
    line-height: 1.45;
}

.lh-booking-manual-hint {
    display: none;
}

.lh-booking-card input[data-booking-date],
.lh-booking-card input[data-booking-time] {
    background: linear-gradient(180deg, #fbfdff 0%, #f1f6fb 100%);
    font-weight: 700;
}

.site-footer {
    background:
        radial-gradient(900px 420px at 8% -15%, rgba(36, 57, 83, 0.48), transparent 72%),
        linear-gradient(180deg, #0c121c 0%, #080f18 100%);
    color: #d6dfed;
    border-top: 1px solid rgba(90, 128, 170, 0.34);
}

.lh-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.95fr;
    gap: 2.2rem;
    padding: 3rem 0 1.7rem;
}

.site-footer .brand {
    color: #cd9a3b;
    font-size: clamp(3rem, 4.6vw, 4.6rem);
    line-height: 0.88;
}

.site-footer .brand-logo {
    max-height: 124px;
}

.site-footer h4 {
    margin: 0;
    color: #f2f6ff;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem);
    font-weight: 600;
}

.lh-footer-line {
    width: 92px;
    height: 2px;
    display: block;
    margin: 1rem 0 1.25rem;
    background: linear-gradient(90deg, #2dd1df, #67dae6);
}

.lh-footer-tagline {
    margin: 0.8rem 0 0.7rem;
    color: #39d8e6;
    font-size: 1.48rem;
    font-style: italic;
    font-weight: 700;
}

.lh-footer-photo {
    margin: 0;
    width: min(280px, 100%);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(121, 152, 188, 0.34);
}

.lh-footer-photo img {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

.lh-footer-contact {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
    max-width: 420px;
}

.lh-footer-contact li {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 0.52rem;
}

.lh-footer-icon {
    width: 18px;
    height: 18px;
    color: #9eb5d0;
    margin-top: 0.2rem;
}

.lh-footer-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-footer-contact a {
    color: #d4dfef;
    font-size: 1.08rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lh-footer-contact a:hover {
    color: #49deeb;
}

.lh-footer-map-frame {
    width: 100%;
    max-width: 430px;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(111, 145, 183, 0.34);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.34);
}

.lh-footer-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.lh-footer-map-link {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    padding: 0.48rem 1rem;
    background: var(--lh-cyan);
    color: #fff;
    font-size: 0.96rem;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lh-footer-map-link:hover {
    background: #18b2c4;
    transform: translateY(-1px);
}

.lh-footer-nav {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.lh-footer-nav a {
    color: #8ec7ff;
    font-size: 1.08rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lh-footer-nav a:hover {
    color: #55e1ff;
}

.lh-footer-social {
    margin-top: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: fit-content;
    padding: 0.45rem 0.6rem;
    border-radius: 12px;
    background: rgba(188, 201, 218, 0.26);
    border: 1px solid rgba(197, 211, 230, 0.3);
}

.lh-footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    background: #fff;
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 16, 27, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.lh-footer-social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(8, 16, 27, 0.36);
    filter: brightness(1.04);
}

.lh-footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

.lh-footer-social a[aria-label='Facebook'] {
    background: #1877f2;
    color: #ffffff;
}

.lh-footer-social a[aria-label='Instagram'] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 62%, #285aeb 90%);
    color: #ffffff;
}

.lh-footer-social a[aria-label='Instagram'] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-footer-social a[aria-label='Google'] {
    background: #ffffff;
    color: #1f2e45;
}

.lh-footer-social a[aria-label='Google'] svg {
    width: 18px;
    height: 18px;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(1) {
    fill: #4285f4;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(2) {
    fill: #34a853;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(3) {
    fill: #fbbc05;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(4) {
    fill: #ea4335;
}

.site-footer p {
    margin: 0;
    color: #a8b7cc;
}

.lh-footer-bottom {
    border-top: 1px solid rgba(84, 116, 151, 0.36);
    padding: 0.95rem 0 1.1rem;
}

.lh-footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #9fb0c8;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-body .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Admin */

.admin-body {
    background: linear-gradient(180deg, #eef3fa 0%, #e7edf7 100%);
    font-family: 'Manrope', sans-serif;
    color: #17263a;
}

.admin-layout {
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns 0.22s ease;
}

.admin-body.admin-sidebar-collapsed .admin-layout {
    grid-template-columns: 78px minmax(0, 1fr);
}

.admin-sidebar {
    position: relative;
    background: linear-gradient(180deg, #0b0f15 0%, #070b11 100%);
    color: #dfe7f3;
    padding: 0.75rem 0.45rem 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    border-right: 1px solid rgba(142, 158, 182, 0.22);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(123, 141, 163, 0.42) rgba(10, 14, 20, 0.34);
}

.admin-sidebar::-webkit-scrollbar {
    width: 8px;
}

.admin-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(112, 129, 150, 0.55);
}

.admin-sidebar::-webkit-scrollbar-track {
    background: rgba(10, 14, 20, 0.34);
}

.admin-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.admin-sidebar .brand {
    position: relative;
    z-index: 1;
    color: transparent;
    font-size: 0;
    font-family: 'Manrope', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0;
}

.admin-sidebar .brand::before {
    content: 'LS';
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #e8f9ff;
    background: linear-gradient(145deg, #30bfd8 0%, #1f95cb 100%);
    box-shadow: 0 8px 16px rgba(5, 15, 26, 0.34);
}

.admin-nav {
    display: grid;
    gap: 0.44rem;
    position: relative;
    z-index: 1;
    justify-items: center;
}

.admin-nav > a {
    position: relative;
    width: 44px;
    min-height: 44px;
    color: #e9eef8;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0;
    font-size: 0;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-nav-group {
    position: relative;
}

.admin-nav-group > summary {
    position: relative;
    width: 44px;
    min-height: 44px;
    color: #e9eef8;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0;
    font-size: 0;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    list-style: none;
    cursor: pointer;
}

.admin-nav-group > summary::-webkit-details-marker {
    display: none;
}

.admin-nav-group > summary::before {
    content: attr(data-icon);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-weight: 500;
    line-height: 1;
}

.admin-nav-group > summary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(186, 201, 220, 0.16);
    color: #ffffff;
}

.admin-nav-group.is-active > summary {
    background: linear-gradient(145deg, #6d57ff 0%, #5b47ea 100%);
    border-color: rgba(144, 124, 255, 0.78);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(64, 47, 167, 0.42);
}

.admin-nav-flyout {
    position: fixed;
    display: none;
    width: 280px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 18px;
    border: 1px solid rgba(214, 223, 237, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 46px rgba(10, 16, 26, 0.18);
    padding: 0.7rem 0.65rem;
    z-index: 230;
    backdrop-filter: blur(10px);
    overflow: auto;
}

.admin-nav-group[open] > .admin-nav-flyout {
    display: grid;
    gap: 0.14rem;
}

.admin-nav-flyout .admin-nav-flyout-title {
    margin: 0.1rem 0.35rem 0.55rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f1828;
}

.admin-nav-flyout a {
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 750;
    color: #142237;
    padding: 0.62rem 0.7rem;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid transparent;
    width: 100%;
    justify-content: flex-start;
}

.admin-nav-flyout a:hover {
    background: #f1f5fb;
}

.admin-nav-flyout a.is-active {
    background: rgba(95, 86, 255, 0.12);
    border-color: rgba(95, 86, 255, 0.22);
}

/* Web editor side panel (same interaction style as Clients module) */
.admin-body.admin-page-web-editor .admin-nav-flyout {
    display: none !important;
}

.admin-web-editor-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 68px);
}

.admin-web-editor-side {
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid #dedfe4;
    background: #ffffff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.admin-web-editor-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d7ddea;
}

.admin-web-editor-side-head h2 {
    margin: 0;
    color: #121f33;
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-web-editor-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.48rem 0.48rem 0.9rem;
}

.admin-web-editor-nav a {
    display: block;
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    border-radius: 10px;
    color: #0f1930;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    border: 1px solid transparent;
}

.admin-web-editor-nav a:hover {
    background: #f4f6fd;
}

.admin-web-editor-nav a.is-active {
    background: #e8e7f8;
    border-color: #d7d0f4;
}

.admin-web-editor-main {
    min-width: 0;
    padding: 0.75rem 1rem 1.2rem;
}

/* Reusable admin module shell (same visual grammar as clients) */
.admin-module-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 68px);
}

.admin-module-side {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 1px solid #dedfe4;
    box-shadow: none;
    overflow-y: auto;
}

.admin-module-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d7ddea;
    position: relative;
}

.admin-module-side-head h2 {
    margin: 0;
    color: #111b2b;
    font-size: 1.03rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-module-side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    overflow-y: auto;
    background: #ffffff;
    padding: 0.48rem 0.48rem 0.9rem;
}

.admin-module-side-nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 10px;
    color: #1a2739;
    border: 1px solid transparent;
}

.admin-module-side-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6f0;
}

.admin-module-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
    color: #1b2230;
}

.admin-module-side-nav a[aria-disabled='true'] {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.admin-module-side-section {
    margin: 0.6rem 0.58rem 0.2rem;
    color: #16283d;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.admin-module-side-divider {
    margin: 0.45rem 0.5rem;
    border: 0;
    border-top: 1px solid #e3e7ef;
}

.admin-module-side-toggle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #d7dce5;
    background: #f5f6f8;
    color: #2a303a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(18, 35, 55, 0.12);
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.admin-module-side-toggle:hover {
    background: #eef1f5;
}

.admin-module-main {
    min-width: 0;
    padding: 0.75rem 1rem 1.2rem;
}

@media (min-width: 981px) {
    .admin-body.admin-page-module-pro .admin-module-layout {
        display: block;
    }

    .admin-body.admin-page-module-pro .admin-module-side {
        position: fixed;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        z-index: 14;
    }

    .admin-body.admin-page-module-pro .admin-module-main {
        margin-left: 210px;
    }
}

@media (max-width: 980px) {
    .admin-module-layout {
        display: block;
        min-height: 0;
    }

    .admin-module-side {
        position: static;
        height: auto;
        min-height: 0;
        max-height: none;
        border: 1px solid #d5deeb;
        border-radius: 14px;
        margin: 0 0 0.85rem;
    }

    .admin-module-side-toggle {
        display: none;
    }

    .admin-module-main {
        margin-left: 0;
        padding: 0;
    }
}

.admin-body.admin-page-services-catalog .admin-module-side {
    border-right-color: #dadde3;
}

.admin-body.admin-page-services-catalog .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-services-catalog .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-services-form .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-services-form .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-services-order .admin-layout {
    grid-template-columns: 1fr;
}

.admin-body.admin-page-services-order .admin-sidebar,
.admin-body.admin-page-services-order .admin-topbar {
    display: none;
}

.admin-body.admin-page-services-order .admin-content {
    min-height: 100vh;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
}

.admin-body.admin-page-inventory-catalog .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-inventory-catalog .admin-topbar {
    margin: 0;
}

.inventory-page-shell {
    width: min(1080px, calc(100% - 2rem));
    margin: 0 auto 2rem;
}

.inventory-page-shell-form {
    width: min(980px, calc(100% - 2rem));
}

.inventory-top-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: min(1080px, calc(100% - 2rem));
    padding: 0 0 0.9rem;
    margin: 0 auto 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

.inventory-top-title-form {
    width: min(980px, calc(100% - 2rem));
    justify-content: flex-start;
    text-align: left;
    padding: 0.72rem 0.82rem;
    background: rgba(247, 251, 255, 0.88);
    border: 1px solid #d4deec;
    box-shadow: 0 10px 22px rgba(17, 35, 55, 0.06);
}

.inventory-kicker {
    margin: 0 0 0.45rem;
    color: #746251;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.inventory-top-title h1 {
    margin: 0;
    color: #1f1c18;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.12;
}

.inventory-top-title p:last-of-type {
    margin: 0.55rem 0 0;
    max-width: 54ch;
    color: #6b6259;
    line-height: 1.6;
}

.inventory-top-title-form p:last-of-type {
    margin-left: 0;
    margin-right: 0;
}

.inventory-editor,
.inventory-list-shell {
    display: grid;
}

.inventory-product-form {
    display: grid;
    gap: 1rem;
}

.inventory-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 298px);
    gap: 1.1rem;
    align-items: start;
}

.inventory-product-main,
.inventory-product-aside {
    display: grid;
    gap: 1rem;
}

.inventory-product-card,
.inventory-list-card {
    padding: 0;
    border-radius: 12px;
    border: 1px solid #d6d0c8;
    background: #fcfcfb;
    box-shadow: 0 10px 28px rgba(36, 30, 23, 0.05);
    overflow: hidden;
}

.inventory-product-card-head,
.inventory-list-head {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid #ece5de;
}

.inventory-product-card-head h2,
.inventory-list-head h2 {
    margin: 0;
    color: #171411;
    font-size: 0.98rem;
}

.inventory-product-card-head p,
.inventory-list-head p {
    margin: 0;
    color: #6f665d;
    font-size: 0.74rem;
    line-height: 1.45;
}

.inventory-card-kicker {
    color: #7b6858;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.inventory-product-card-body {
    display: grid;
    gap: 1rem;
    padding: 0.95rem 1.1rem 1.15rem;
}

.inventory-fields-grid,
.inventory-inline-fields,
.inventory-split-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1rem;
}

.inventory-fields-grid .is-full,
.inventory-inline-fields .is-full,
.inventory-split-fields .is-full {
    grid-column: 1 / -1;
}

.inventory-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.38rem;
    color: #171411;
    font-size: 0.75rem;
    font-weight: 800;
}

.inventory-field-hint {
    color: #7e7368;
    font-size: 0.68rem;
    font-weight: 800;
}

.inventory-field-helper {
    margin: 0.38rem 0 0;
    color: #7b736a;
    font-size: 0.72rem;
    line-height: 1.45;
}

.inventory-inline-link {
    color: #6f5dcd;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
}

.inventory-product-card input,
.inventory-product-card select,
.inventory-product-card textarea {
    border-color: #d3cdc5;
    background: #ffffff;
    box-shadow: none;
}

.inventory-product-card textarea {
    min-height: 116px;
}

.inventory-measure-fields {
    align-items: end;
}

.inventory-quantity-shell {
    display: flex;
    align-items: center;
    min-height: 46px;
    border: 1px solid #d3cdc5;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-quantity-shell:focus-within {
    border-color: rgba(31, 198, 215, 0.7);
    box-shadow: 0 0 0 3px rgba(31, 198, 215, 0.18);
}

.inventory-quantity-prefix {
    flex: 0 0 auto;
    color: #6f7f94;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.inventory-quantity-shell input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.7rem 0 0.7rem 0.72rem;
}

.inventory-photo-drop {
    min-height: 196px;
    border: 1px solid #ddd8ea;
    border-radius: 10px;
    background: #f2f1fb;
    color: #706887;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.48rem;
    padding: 1.2rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.inventory-photo-drop.is-compact {
    width: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
    min-height: var(--inventory-photo-thumb-size, 132px);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    padding: 0.9rem 0.75rem;
    justify-self: start;
    align-content: center;
    border-radius: 12px;
}

.inventory-photo-drop:hover,
.inventory-photo-drop:focus-within {
    border-color: #8e82da;
    box-shadow: 0 10px 20px rgba(122, 108, 255, 0.12);
    transform: translateY(-2px);
}

.inventory-photo-drop .material-symbols-outlined {
    font-size: 2.25rem;
    color: #7a6df0;
}

.inventory-photo-drop.is-compact .material-symbols-outlined {
    font-size: 1.9rem;
}

.inventory-photo-drop strong {
    color: #6f5dcd;
    font-size: 0.84rem;
}

.inventory-photo-drop small {
    color: #7d7592;
    font-size: 0.73rem;
}

.inventory-photo-drop.is-compact small {
    display: none;
}

.inventory-photo-drop.is-compact::before,
.inventory-photo-drop.is-compact::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.inventory-photo-drop.is-compact::before {
    content: '';
    left: 1rem;
    bottom: calc(100% + 2px);
    transform: translateY(4px);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(20, 24, 34, 0.94) transparent transparent transparent;
    z-index: 3;
}

.inventory-photo-drop.is-compact::after {
    content: attr(data-inventory-photo-tooltip);
    left: 0;
    bottom: calc(100% + 8px);
    transform: translateY(4px);
    min-width: 188px;
    max-width: 240px;
    padding: 0.6rem 0.72rem;
    border-radius: 10px;
    background: rgba(20, 24, 34, 0.94);
    color: #ffffff;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.35;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(12, 18, 28, 0.24);
    white-space: normal;
    z-index: 4;
}

.inventory-photo-drop.is-compact:hover::before,
.inventory-photo-drop.is-compact:hover::after,
.inventory-photo-drop.is-compact:focus-within::before,
.inventory-photo-drop.is-compact:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}

.inventory-edit-photo-stack {
    display: grid;
    gap: 0.8rem;
}

.inventory-edit-photo-card {
    position: relative;
    border: 1px solid #ddd8ea;
    border-radius: 12px;
    background: #f6f4fb;
    overflow: hidden;
    cursor: grab;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.inventory-edit-photo-card.has-image {
    background: #ffffff;
}

.inventory-edit-photo-card:not(.is-primary):hover {
    border-color: #b9b0ea;
    box-shadow: 0 10px 22px rgba(64, 41, 145, 0.08);
}

.inventory-edit-photo-card.is-primary {
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.inventory-edit-photo-badge {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 1;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #241f37;
    font-size: 0.74rem;
    font-weight: 800;
}

.inventory-edit-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--inventory-photo-thumb-size, 132px), var(--inventory-photo-thumb-size, 132px)));
    gap: 0.8rem;
    justify-content: start;
}

.inventory-edit-photo-image {
    display: block;
    width: 100%;
    min-height: 184px;
    object-fit: cover;
    pointer-events: none;
}

.inventory-edit-photo-card.is-primary .inventory-edit-photo-image {
    min-height: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
}

.inventory-edit-photo-grid .inventory-edit-photo-image {
    min-height: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
}

.inventory-edit-photo-grid .inventory-edit-photo-card {
    min-height: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
}

.inventory-edit-photo-card.is-dragging {
    opacity: 0.64;
    transform: scale(0.98);
    cursor: grabbing;
}

.inventory-edit-photo-card.is-drop-target {
    border-color: #7a6dff;
    box-shadow: 0 0 0 3px rgba(122, 109, 255, 0.16);
}

.inventory-edit-photo-actions {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

@media (hover: hover) {
    .inventory-edit-photo-actions {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .inventory-edit-photo-card:hover .inventory-edit-photo-actions,
    .inventory-edit-photo-card:focus-within .inventory-edit-photo-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.inventory-edit-photo-action {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(24, 30, 44, 0.72);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
}

.inventory-edit-photo-action:hover,
.inventory-edit-photo-action:focus-visible {
    background: rgba(227, 19, 63, 0.92);
    color: #ffffff;
    outline: none;
}

.inventory-edit-photo-action .material-symbols-outlined {
    font-size: 1.2rem;
}

.inventory-edit-photo-action.is-primary-toggle {
    background: rgba(122, 109, 255, 0.9);
}

.inventory-edit-photo-action.is-primary-toggle:hover,
.inventory-edit-photo-action.is-primary-toggle:focus-visible {
    background: rgba(89, 70, 235, 0.96);
}

.inventory-edit-photo-art {
    min-height: 116px;
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 219, 160, 0.9), transparent 18%),
        linear-gradient(180deg, rgba(63, 39, 30, 0.1), rgba(63, 39, 30, 0.18)),
        linear-gradient(135deg, #78625b 0%, #b69076 58%, #d6c7bf 100%);
}

.inventory-edit-photo-art-primary {
    min-height: 184px;
    background:
        radial-gradient(circle at 74% 26%, rgba(255, 219, 160, 0.96), transparent 16%),
        radial-gradient(circle at 26% 72%, rgba(110, 55, 31, 0.52), transparent 18%),
        linear-gradient(180deg, rgba(35, 23, 18, 0.1), rgba(35, 23, 18, 0.2)),
        linear-gradient(135deg, #6f5a53 0%, #9c7867 45%, #ddd1c9 100%);
}

.inventory-edit-photo-art-alt {
    background:
        linear-gradient(180deg, rgba(73, 115, 201, 0.22), rgba(111, 71, 207, 0.28)),
        linear-gradient(135deg, #e2ebff 0%, #b2c6ff 100%);
}

.inventory-edit-photo-art-alt-two {
    background:
        linear-gradient(180deg, rgba(32, 28, 24, 0.18), rgba(32, 28, 24, 0.08)),
        linear-gradient(135deg, #2f2544 0%, #6d4ca5 50%, #ff9c4b 100%);
}

.inventory-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ece5de;
}

.inventory-toggle-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.inventory-toggle-copy strong {
    color: #171411;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-toggle-copy span {
    color: #70675e;
    font-size: 0.76rem;
    line-height: 1.5;
}

.inventory-low-stock-note {
    padding: 0.95rem 1rem;
    border-radius: 10px;
    border: 1px solid #e7e0d8;
    background: #f8f5f1;
    color: #6f665e;
    font-size: 0.76rem;
    line-height: 1.55;
}

.inventory-center-stock-intro {
    display: grid;
    gap: 0.22rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e3ebf5;
    border-radius: 12px;
    background: #f8fbff;
}

.inventory-center-stock-intro strong {
    color: #171411;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-center-stock-intro span {
    color: #6c7684;
    font-size: 0.76rem;
    line-height: 1.5;
}

.inventory-product-centers-grid {
    display: grid;
    gap: 0.95rem;
}

.inventory-product-center-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.inventory-product-center-card.is-enabled {
    border-color: #cad8ea;
    box-shadow: 0 8px 20px rgba(18, 38, 63, 0.05);
}

.inventory-product-center-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.inventory-product-center-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.inventory-product-center-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef3fb;
    color: #6457f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.inventory-product-center-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inventory-product-center-meta {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.inventory-product-center-meta strong {
    color: #171411;
    font-size: 0.9rem;
    font-weight: 900;
}

.inventory-product-center-meta span,
.inventory-product-center-meta small {
    color: #6c7684;
    font-size: 0.76rem;
    line-height: 1.45;
}

.inventory-product-center-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #4f4a45;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.inventory-product-center-toggle input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.inventory-product-center-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.inventory-product-center-card:not(.is-enabled) {
    background: #fbfcfe;
}

.inventory-product-center-card:not(.is-enabled) .inventory-product-center-fields {
    opacity: 0.64;
}

.inventory-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #5d554d;
    font-size: 0.78rem;
    line-height: 1.5;
}

.inventory-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 0.1rem;
}

.inventory-product-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.1rem;
}

.inventory-product-actions-float {
    position: fixed;
    left: calc(78px + 210px + 0.75rem);
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 42;
    margin: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(78, 118, 153, 0.42);
    border-radius: 16px;
    background: linear-gradient(104deg, rgba(8, 17, 31, 0.98) 0%, rgba(15, 39, 66, 0.98) 54%, rgba(25, 73, 102, 0.98) 100%);
    box-shadow: 0 16px 30px rgba(8, 17, 30, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.inventory-product-actions-float .btn,
.inventory-product-actions-float button {
    min-height: 42px;
    border-radius: 12px;
    padding: 0.56rem 1.22rem;
}

.inventory-product-actions-float .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #ebf4ff;
    border-color: rgba(183, 205, 229, 0.38);
}

.inventory-product-actions-float .btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(211, 226, 241, 0.62);
}

.inventory-product-form.is-editing-product {
    padding-bottom: 6rem;
}

.admin-body.inventory-product-editor-open {
    overflow: hidden;
}

.admin-body.inventory-product-editor-open .admin-content,
.admin-body.inventory-product-editor-open .clients-pro-main,
.admin-body.inventory-product-editor-open .clients-pro-side,
.admin-body.inventory-product-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.inventory-product-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.inventory-product-editor-form.inventory-product-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    gap: 0;
    overflow: hidden;
}

.inventory-product-editor-form.inventory-product-form.is-editing-product {
    padding-bottom: 0;
}

.inventory-product-editor-shell {
    display: grid;
    place-items: start center;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 1.55rem 1.25rem 2.4rem;
}

.inventory-product-editor-main {
    width: min(100%, 980px);
    display: grid;
    gap: 1.2rem;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

.inventory-product-editor-head {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
    padding-bottom: 0.15rem;
}

.inventory-product-editor-head h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.45rem, 1.9vw, 1.8rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}

.inventory-product-editor-head .inventory-count-create-eyebrow,
.inventory-product-editor-head p:last-child {
    display: none;
}

.inventory-product-editor-topbar-copy {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 26rem);
    min-width: 0;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px));
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    text-align: center;
}

.inventory-product-editor-topbar-copy strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 900;
}

.inventory-product-editor-form.is-title-docked .inventory-product-editor-topbar-copy {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.inventory-product-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 1.35rem;
    height: auto;
    min-height: 0;
    align-items: start;
}

.inventory-product-editor-grid .inventory-product-main,
.inventory-product-editor-grid .inventory-product-aside {
    display: grid;
    gap: 1.1rem;
    min-height: 0;
    overflow: visible;
    padding: 0;
}

.inventory-product-editor-page .inventory-product-card {
    padding: 0;
    border-radius: 12px;
    border: 1px solid #d6dde8;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(17, 27, 44, 0.04);
    overflow: hidden;
}

.inventory-product-editor-page .inventory-product-card-head {
    display: grid;
    gap: 0.24rem;
    padding: 1.15rem 1.45rem 1rem;
    border-bottom: 1px solid #e7edf6;
}

.inventory-product-editor-page .inventory-product-card-head h2 {
    color: #171411;
    font-size: 1.02rem;
    font-weight: 900;
}

.inventory-product-editor-page .inventory-product-card-head p {
    color: #667284;
    font-size: 0.78rem;
    line-height: 1.45;
}

.inventory-product-editor-page .inventory-product-card-body {
    display: grid;
    gap: 1rem;
    padding: 1.05rem 1.45rem 1.3rem;
}

.inventory-product-editor-page .inventory-product-aside .inventory-product-card {
    overflow: visible;
}

.inventory-product-editor-page .inventory-field-label {
    color: #171411;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 0.38rem;
}

.inventory-product-editor-page .inventory-field-hint {
    color: #7e7368;
    font-size: 0.72rem;
    font-weight: 800;
}

.inventory-product-editor-page .inventory-product-card input,
.inventory-product-editor-page .inventory-product-card select,
.inventory-product-editor-page .inventory-product-card textarea {
    border-color: #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
}

.inventory-product-editor-page .inventory-product-card input,
.inventory-product-editor-page .inventory-product-card select {
    min-height: 48px;
}

.inventory-product-editor-page .inventory-product-card textarea {
    min-height: 120px;
}

.inventory-product-editor-page .inventory-quantity-shell {
    min-height: 48px;
    border-color: #cfd7e3;
    border-radius: 12px;
}

.inventory-product-editor-page .inventory-photo-drop {
    min-height: 272px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    align-items: center;
    gap: 0.7rem;
    padding: 1.55rem 1.25rem;
    border-color: #e2dff7;
    border-radius: 12px;
    background: #f1efff;
    box-shadow: inset 0 0 0 1px rgba(104, 88, 243, 0.04);
    text-align: center;
}

.inventory-product-editor-page .inventory-product-center-card {
    border-radius: 14px;
}

@media (max-width: 720px) {
    .inventory-product-center-fields {
        grid-template-columns: 1fr;
    }

    .inventory-product-center-head {
        flex-direction: column;
    }
}

.staff-centers-grid {
    display: grid;
    gap: 0.65rem;
}

.staff-center-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d8e0eb;
    border-radius: 12px;
    background: #ffffff;
    color: #171411;
    font-size: 0.9rem;
    line-height: 1.45;
}

.staff-center-option input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.staff-center-option span {
    flex: 1 1 auto;
}

.staff-center-option small {
    color: #6457f6;
    font-size: 0.72rem;
    font-weight: 800;
}

.inventory-product-editor-page .inventory-photo-drop.is-compact {
    width: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
    min-height: var(--inventory-photo-thumb-size, 132px);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 0.8rem 0.7rem;
}

.inventory-product-editor-page .inventory-photo-drop.is-compact strong {
    font-size: 0.8rem;
    line-height: 1.2;
}

.inventory-product-editor-page .inventory-photo-drop .material-symbols-outlined {
    font-size: 2.15rem;
    color: #7367f5;
}

.inventory-product-editor-page .inventory-photo-drop strong {
    color: #6a5cf1;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-product-editor-page .inventory-photo-drop small {
    color: #8a84a8;
    font-size: 0.76rem;
    line-height: 1.45;
}

.inventory-product-editor-page .inventory-product-aside .inventory-product-card-head {
    padding-bottom: 0.85rem;
}

.inventory-product-editor-page .inventory-product-aside .inventory-product-card-body {
    padding-top: 1rem;
    --inventory-photo-thumb-size: 132px;
}

@media (max-width: 1080px) {
    .inventory-product-editor-page {
        overflow-y: auto;
    }

    .inventory-product-editor-form.inventory-product-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .inventory-product-editor-shell,
    .inventory-product-editor-main,
    .inventory-product-editor-grid .inventory-product-main,
    .inventory-product-editor-grid .inventory-product-aside {
        height: auto;
        overflow: visible;
    }

    .inventory-product-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .inventory-product-editor-shell {
        padding: 1.3rem 1rem 1.8rem;
    }

    .inventory-product-editor-head {
        justify-items: start;
        text-align: left;
    }

    .inventory-product-editor-head h1 {
        font-size: 1.6rem;
    }

    .inventory-product-editor-topbar-copy strong {
        font-size: 1rem;
    }
}

.inventory-order-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.inventory-order-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.inventory-order-editor-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    border-bottom: 1px solid #e5e8ef;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.inventory-order-editor-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.inventory-order-editor-saved {
    color: #6d7888;
    font-size: 0.92rem;
    font-weight: 500;
}

.inventory-order-editor-close {
    min-height: 46px;
    padding-inline: 1.32rem;
    border-radius: 999px;
    background: #ffffff;
    color: #172132;
    border-color: #d4dbe5;
}

.inventory-order-editor-close:hover,
.inventory-order-editor-close:focus-visible {
    background: #f6f8fb;
    color: #172132;
    border-color: #c7d0dc;
}

.inventory-order-editor-submit {
    min-height: 46px;
    padding-inline: 1.35rem;
    border-radius: 999px;
    border-color: #07080d;
    background: #07080d;
    color: #ffffff;
    gap: 0.58rem;
    box-shadow: none;
}

.inventory-order-editor-submit:hover,
.inventory-order-editor-submit:focus-visible {
    border-color: #191c22;
    background: #191c22;
    color: #ffffff;
}

.inventory-order-editor-submit:disabled,
.inventory-order-editor-submit.is-disabled {
    border-color: #d7dee8;
    background: #eef2f7;
    color: #7d889a;
    cursor: not-allowed;
    box-shadow: none;
}

.inventory-order-editor-submit:disabled .material-symbols-outlined,
.inventory-order-editor-submit.is-disabled .material-symbols-outlined {
    color: inherit;
}

.inventory-order-editor-submit .material-symbols-outlined {
    font-size: 1.16rem;
}

.inventory-order-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.inventory-order-editor-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 1.7rem;
    box-sizing: border-box;
    height: 100%;
    padding: 1.6rem 1.9rem 1.35rem;
    min-height: 0;
    overflow: hidden;
}

.inventory-order-editor-head {
    display: grid;
    gap: 0.38rem;
}

.inventory-order-editor-head h1 {
    margin: 0;
    color: #1f1c18;
    font-size: clamp(1.18rem, 1.8vw, 1.56rem);
    line-height: 1.12;
    font-weight: 800;
}

.inventory-order-editor-head p {
    margin: 0;
    color: #6b6259;
    font-size: 0.9rem;
    line-height: 1.6;
}

.inventory-order-editor-table {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: start;
    border-top: 1px solid #e5e8ef;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.inventory-order-editor-table.is-empty {
    grid-template-rows: minmax(0, 1fr) auto;
}

.inventory-order-editor-table-head,
.inventory-order-editor-row {
    display: grid;
    grid-template-columns: minmax(320px, 1.8fr) 136px 214px 132px 40px;
    align-items: center;
    gap: 1rem;
}

.inventory-order-editor-table-head[hidden],
.inventory-order-editor-rows[hidden],
.inventory-order-editor-empty[hidden] {
    display: none !important;
}

.inventory-order-editor-table-head {
    padding: 0.95rem 1.5rem;
    color: #0f1728;
    font-size: 0.96rem;
    font-weight: 900;
}

.inventory-order-editor-table-head .is-actions {
    width: 40px;
}

.inventory-order-editor-rows {
    display: grid;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-order-editor-row {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8ecf2;
}

.inventory-order-editor-product {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.inventory-order-editor-thumb {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dfe4ec;
    background: #f6f7fa;
}

.inventory-order-editor-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-order-editor-thumb-scene {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 72% 26%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
}

.inventory-order-editor-thumb-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05));
}

.inventory-order-editor-thumb-jar,
.inventory-order-editor-thumb-candle {
    position: absolute;
    bottom: 21%;
    border-radius: 10px 10px 8px 8px;
    box-shadow: 0 10px 16px rgba(38, 22, 15, 0.18);
}

.inventory-order-editor-thumb-jar {
    left: 12%;
    width: 27%;
    height: 42%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #6d4430 0%, #8f593d 62%, #4a2d20 100%);
}

.inventory-order-editor-thumb-jar::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 26%;
    width: 48%;
    height: 16%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #d5d7dc, #a9b0b8);
}

.inventory-order-editor-thumb-candle {
    left: 55%;
    width: 31%;
    height: 45%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #eee8dd 0%, #d4c7b6 70%, #96806c 100%);
}

.inventory-order-editor-thumb-candle::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 45%;
    width: 8%;
    height: 16%;
    border-radius: 999px;
    background: #202328;
}

.inventory-order-editor-thumb-candle::after {
    content: "";
    position: absolute;
    top: -24%;
    left: 33%;
    width: 26%;
    height: 26%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.9) 34%, rgba(255, 175, 73, 0.9) 60%, rgba(255, 138, 45, 0.1) 100%);
}

.inventory-order-editor-thumb-surface {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(
            90deg,
            rgba(108, 125, 153, 0.55) 0 18%,
            rgba(240, 226, 196, 0.9) 18% 36%,
            rgba(108, 125, 153, 0.45) 36% 54%,
            rgba(240, 226, 196, 0.9) 54% 72%,
            rgba(108, 125, 153, 0.45) 72% 100%
        );
    opacity: 0.9;
}

.inventory-order-editor-product-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.inventory-order-editor-product-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 900;
}

.inventory-order-editor-product-copy p,
.inventory-order-editor-product-copy small {
    margin: 0;
    color: #697689;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-order-editor-field input,
.inventory-order-editor-money input {
    height: 48px;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-order-editor-field input {
    width: 100%;
    text-align: left;
    padding-inline: 1rem;
}

.inventory-order-editor-money {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
}

.inventory-order-editor-money span {
    color: #6f7f94;
    font-size: 0.95rem;
    font-weight: 700;
}

.inventory-order-editor-money input {
    border: 0;
    min-height: 0;
    padding: 0;
    background: transparent !important;
}

.inventory-order-editor-total {
    color: #0b1220;
    font-size: 1rem;
    font-weight: 900;
    text-align: right;
}

.inventory-order-editor-remove {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #202837;
    box-shadow: none;
}

.inventory-order-editor-remove:hover,
.inventory-order-editor-remove:focus-visible {
    background: #f4f6fb;
    color: #202837;
}

.inventory-order-editor-empty {
    display: grid;
    place-items: center;
    gap: 0.7rem;
    min-height: 0;
    height: 100%;
    align-content: center;
    padding: 1.7rem 1rem 1.35rem;
    text-align: center;
    color: #647286;
}

.inventory-order-editor-empty-visual {
    position: relative;
    width: 88px;
    height: 72px;
    display: grid;
    place-items: center;
}

.inventory-order-editor-empty-bottle {
    position: absolute;
    width: 34px;
    height: 44px;
    border-radius: 11px 11px 10px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #efeaff 0%, #d9cdfd 68%, #b3a1f0 100%);
    box-shadow: 0 14px 26px rgba(108, 89, 214, 0.16);
}

.inventory-order-editor-empty-bottle::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 10px;
    width: 14px;
    height: 12px;
    border-radius: 7px 7px 4px 4px;
    background: linear-gradient(180deg, #e5e8f1, #c6cfdb);
}

.inventory-order-editor-empty-bottle::after {
    content: "";
    position: absolute;
    inset: 13px 8px 12px;
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.18);
}

.inventory-order-editor-empty-bottle.is-accent {
    width: 28px;
    height: 40px;
    left: 47px;
    top: 17px;
    z-index: -1;
    border-radius: 10px 10px 9px 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.04)),
        linear-gradient(180deg, #c86dff 0%, #955dff 100%);
    box-shadow: 0 18px 30px rgba(151, 93, 255, 0.24);
}

.inventory-order-editor-empty-bottle.is-accent::before,
.inventory-order-editor-empty-bottle.is-accent::after {
    content: none;
}

.inventory-order-editor-empty strong {
    color: #0f1728;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.inventory-order-editor-empty p {
    margin: 0;
    max-width: 420px;
    font-size: 0.98rem;
    line-height: 1.6;
}

.inventory-order-editor-add {
    width: fit-content;
    margin: 0 auto;
    align-self: end;
    justify-self: center;
    min-height: auto;
    padding: 0.9rem 1.3rem;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #6257ff;
    gap: 0.65rem;
    font-size: 0.96rem;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(18, 31, 47, 0.08);
}

.inventory-order-editor-add:hover,
.inventory-order-editor-add:focus-visible {
    background: #f8faff;
    border-color: #cfd8e6;
    color: #564ae8;
}

.inventory-order-editor-add .material-symbols-outlined {
    font-size: 1.2rem;
}

.inventory-order-editor-aside {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    box-sizing: border-box;
    height: 100%;
    padding: 1.6rem 1.7rem 1.35rem;
    border-left: 1px solid #e5e8ef;
    background: #fbfcfd;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-order-editor-aside::-webkit-scrollbar {
    width: 5px;
}

.inventory-order-editor-aside::-webkit-scrollbar-track {
    background: transparent;
}

.inventory-order-editor-aside::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(126, 141, 163, 0.42);
}

.inventory-order-editor-aside::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 141, 163, 0.6);
}

.inventory-order-editor-side-card {
    display: grid;
    gap: 0.9rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid #e3e8f0;
}

.inventory-order-editor-side-card + .inventory-order-editor-side-card {
    padding-top: 0.15rem;
}

.inventory-order-editor-side-card:last-of-type {
    padding-bottom: 0.2rem;
    border-bottom: 0;
}

.inventory-order-editor-side-card h2 {
    margin: 0;
    color: #0f1728;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-order-editor-side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.inventory-order-editor-side-inline {
    display: grid;
    gap: 0.25rem;
}

.inventory-order-editor-side-value {
    color: #0f1728;
    font-size: 1rem;
    font-weight: 850;
}

.inventory-order-editor-surcharge-list {
    display: grid;
    gap: 0.45rem;
    max-height: 118px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.15rem;
}

.inventory-order-editor-surcharge-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: #0f1728;
    font-size: 0.98rem;
}

.inventory-order-editor-surcharge-item strong {
    color: #0b1220;
    font-size: 0.98rem;
    font-weight: 850;
    text-align: right;
}

.inventory-order-editor-surcharge-empty {
    margin: 0;
    color: #6f7b8f;
    font-size: 0.94rem;
}

.inventory-order-editor-side-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.inventory-order-editor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #ecebfa;
    color: #6358e7;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 900;
}

.inventory-order-editor-delivery-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.88), transparent 24%),
        linear-gradient(180deg, #7f7170 0%, #a79f9c 58%, #ddd4cc 100%);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 900;
    box-shadow: inset 0 -8px 12px rgba(47, 38, 35, 0.14);
}

.inventory-order-editor-side-copy {
    display: grid;
    gap: 0.18rem;
}

.inventory-order-editor-side-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 850;
}

.inventory-order-editor-side-copy p,
.inventory-order-editor-side-copy small {
    margin: 0;
    color: #697689;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-order-editor-side-button {
    width: fit-content;
    min-height: 38px;
    padding: 0.48rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #d3d9e3;
    background: #ffffff;
    color: #101928;
    gap: 0.48rem;
    font-size: 0.94rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-editor-side-button:hover,
.inventory-order-editor-side-button:focus-visible {
    background: #f6f8fb;
    color: #101928;
    border-color: #c6cfdb;
}

.inventory-order-editor-side-button .material-symbols-outlined {
    font-size: 1.08rem;
}

.inventory-order-editor-summary {
    display: grid;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 1.35rem;
    border-top: 1px solid #dfe5ee;
}

.inventory-order-editor-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    color: #121c2d;
    font-size: 0.98rem;
    font-weight: 600;
}

.inventory-order-editor-summary > div strong {
    color: #0f1728;
    font-size: 1rem;
    font-weight: 850;
}

.inventory-order-editor-summary > div.is-total {
    margin-top: 0.45rem;
    padding-top: 0.7rem;
    border-top: 1px solid #d9e0eb;
}

.inventory-order-editor-summary > div.is-total strong {
    font-size: 1.5rem;
    font-weight: 900;
}

@media (max-width: 1360px) {
    .inventory-order-editor-shell {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .inventory-order-editor-table-head,
    .inventory-order-editor-row {
        grid-template-columns: minmax(250px, 1.55fr) 124px 188px 120px 36px;
        gap: 0.85rem;
    }
}

@media (max-width: 1080px) {
    .inventory-order-editor-page {
        overflow-y: auto;
    }

    .inventory-order-editor-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .inventory-order-editor-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .inventory-order-editor-main,
    .inventory-order-editor-table,
    .inventory-order-editor-rows,
    .inventory-order-editor-aside {
        height: auto;
        overflow: visible;
    }

    .inventory-order-editor-aside {
        border-left: 0;
        border-top: 1px solid #e5e8ef;
    }

    .inventory-order-editor-summary {
        margin-top: 0;
    }
}

@media (max-width: 860px) {
    .inventory-order-editor-page {
        width: 100vw;
        border-radius: 0;
    }

    .inventory-order-editor-topbar {
        padding: 0.9rem 1rem;
    }

    .inventory-order-editor-topbar-actions {
        justify-content: flex-start;
    }

    .inventory-order-editor-main,
    .inventory-order-editor-aside {
        padding: 1.25rem 1rem 1.35rem;
    }

    .inventory-order-editor-table-head {
        display: none;
    }

    .inventory-order-editor-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 1rem;
    }

    .inventory-order-editor-total {
        text-align: left;
    }

    .inventory-order-editor-remove {
        width: 44px;
        justify-self: start;
    }

    .inventory-order-editor-add {
        width: fit-content;
    }
}

.admin-body.inventory-order-editor-open {
    overflow: hidden;
}

.admin-body.inventory-order-editor-open .admin-content,
.admin-body.inventory-order-editor-open .clients-pro-main,
.admin-body.inventory-order-editor-open .clients-pro-side,
.admin-body.inventory-order-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.admin-body.inventory-count-editor-open {
    overflow: hidden;
}

.admin-body.inventory-count-editor-open .admin-content,
.admin-body.inventory-count-editor-open .clients-pro-main,
.admin-body.inventory-count-editor-open .clients-pro-side,
.admin-body.inventory-count-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.inventory-count-create-page,
.inventory-count-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    isolation: isolate;
}

.inventory-count-create-form,
.inventory-count-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.inventory-count-create-topbar,
.inventory-count-editor-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    border-bottom: 1px solid #e5e8ef;
    background: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.inventory-count-create-progress {
    width: min(100%, 760px);
    height: 4px;
    border-radius: 999px;
    background: #eceef5;
    overflow: hidden;
}

.inventory-count-create-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6d5afc 0%, #6958f5 100%);
}

.inventory-count-create-topbar-actions,
.inventory-count-editor-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-count-create-shell {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 1.6rem 2.4rem;
}

.inventory-count-create-content {
    width: min(100%, 860px);
    display: grid;
    gap: 1.7rem;
}

.inventory-count-create-eyebrow {
    margin: 0;
    color: #7a7f8a;
    font-size: 0.96rem;
    font-weight: 500;
}

.inventory-count-create-head {
    display: grid;
    gap: 0.6rem;
}

.inventory-count-create-head h1 {
    margin: 0;
    max-width: 620px;
    color: #111827;
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.inventory-count-create-head p {
    margin: 0;
    max-width: 720px;
    color: #6d7685;
    font-size: 0.98rem;
    line-height: 1.6;
}

.inventory-count-center-grid {
    display: grid;
    gap: 1rem;
}

.inventory-count-center-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(18, 31, 47, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.inventory-count-center-card:hover,
.inventory-count-center-card:focus-visible {
    border-color: #cfd8e6;
    box-shadow: 0 22px 44px rgba(18, 31, 47, 0.08);
    transform: translateY(-1px);
}

.inventory-count-center-card-static {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.inventory-count-center-card-media {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f0efff;
    color: #6557f2;
    display: grid;
    place-items: center;
    font-size: 1.22rem;
    font-weight: 900;
}

.inventory-count-center-card-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.inventory-count-center-card-copy strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-count-center-card-copy p {
    margin: 0;
    color: #687589;
    font-size: 0.97rem;
    line-height: 1.45;
}

.inventory-count-center-card-link {
    color: #6557f2;
    font-size: 0.98rem;
    font-weight: 800;
    text-decoration: none;
}

.inventory-count-create-section {
    display: grid;
    gap: 1.15rem;
}

.inventory-count-create-section h2 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
    font-weight: 900;
}

.inventory-count-create-fields {
    display: grid;
    gap: 1rem;
}

.inventory-count-create-fields .form-group {
    display: grid;
    gap: 0.52rem;
}

.inventory-count-create-fields label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.inventory-count-create-fields label small,
.inventory-count-create-fields label strong {
    color: #6e7989;
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: auto;
}

.inventory-count-create-fields input,
.inventory-count-create-fields textarea {
    width: 100%;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
    color: #0f1728;
    box-shadow: none;
}

.inventory-count-create-fields input {
    height: 50px;
}

.inventory-count-create-fields textarea {
    min-height: 152px;
    resize: vertical;
}

.inventory-count-editor-topbar-copy h1 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 900;
}

.inventory-count-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid #e5e8ef;
}

.inventory-count-editor-main {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 1.4rem;
    min-height: 0;
    padding: 1.7rem 1.9rem 1.35rem;
    overflow: hidden;
}

.inventory-count-editor-head {
    display: grid;
    gap: 0.8rem;
    padding-top: 0.15rem;
}

.inventory-count-editor-head-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 2.1rem;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.inventory-count-editor-head-copy p {
    margin: 0.3rem 0 0;
    color: #687589;
    font-size: 1rem;
    line-height: 1.55;
}

.inventory-count-editor-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.inventory-count-editor-head-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.inventory-count-editor-head-meta .material-symbols-outlined {
    font-size: 1.1rem;
    color: #4c5a6e;
}

.inventory-count-editor-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.35rem 1.5rem;
    border-radius: 18px;
    background: #f7f8fb;
}

.inventory-count-editor-search input {
    height: 48px;
}

.inventory-count-editor-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
}

.inventory-count-editor-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inventory-count-editor-toggle-track {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d8dce5;
    transition: background 0.18s ease;
}

.inventory-count-editor-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.15);
    transition: transform 0.18s ease;
}

.inventory-count-editor-toggle input:checked + .inventory-count-editor-toggle-track {
    background: #6557f2;
}

.inventory-count-editor-toggle input:checked + .inventory-count-editor-toggle-track::after {
    transform: translateX(20px);
}

.inventory-count-editor-toggle .material-symbols-outlined {
    font-size: 1.15rem;
    color: #6b7280;
}

.inventory-count-editor-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-count-editor-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 38px;
    padding: 0.42rem 0.9rem;
    border: 1px solid #d4dbe5;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
}

.inventory-count-editor-filter strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f0f2f6;
    color: #667085;
    display: grid;
    place-items: center;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-count-editor-filter.is-active {
    border-color: #6557f2;
    background: #6557f2;
    color: #ffffff;
}

.inventory-count-editor-filter.is-active strong {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.inventory-count-editor-table {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    border-top: 1px solid #e5e8ef;
    overflow: hidden;
}

.inventory-count-editor-table-head,
.inventory-count-editor-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 160px 194px;
    align-items: center;
    gap: 1rem;
}

.inventory-count-editor-table-head {
    padding: 1rem 1.5rem;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 900;
    border-bottom: 1px solid #e5e8ef;
}

.inventory-count-editor-rows {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 0.35rem;
}

.inventory-count-editor-row {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8ecf2;
}

.inventory-count-editor-row.is-counted {
    background: #fcfdfd;
}

.inventory-count-editor-product {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.inventory-count-editor-product strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-count-editor-product p {
    margin: 0;
    color: #697689;
    font-size: 0.94rem;
    line-height: 1.5;
}

.inventory-count-editor-expected {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.inventory-count-editor-count {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.inventory-count-editor-field {
    min-width: 0;
}

.inventory-count-editor-field input {
    width: 100%;
    height: 48px;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-count-editor-row.is-counted .inventory-count-editor-field input {
    border-color: #bcd6ff;
    background: #fbfdff;
}

.inventory-count-editor-status {
    width: 30px;
    height: 30px;
    border: 1px solid #d5ddea;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #ffffff;
    color: #8b97a8;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.inventory-count-editor-status .material-symbols-outlined {
    font-size: 0.98rem;
    font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 24;
}

.inventory-count-editor-row.is-empty .inventory-count-editor-status {
    border-color: #d7dde8;
    background: #ffffff;
    color: #9aa8ba;
}

.inventory-count-editor-row.is-match .inventory-count-editor-status {
    border-color: #b6ddb5;
    background: #eef9ea;
    color: #43a047;
}

.inventory-count-editor-row.is-over .inventory-count-editor-status {
    border-color: #f0d38b;
    background: #fff6de;
    color: #cb8a0f;
}

.inventory-count-editor-row.is-under .inventory-count-editor-status {
    border-color: #f0c0c0;
    background: #fff1f1;
    color: #d64545;
}

.inventory-count-editor-aside {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 0;
    padding: 1.55rem 1.7rem 1.35rem;
    border-left: 1px solid #e5e8ef;
    background: #fbfcfd;
    overflow-y: auto;
    overflow-x: hidden;
}

.inventory-count-editor-aside::-webkit-scrollbar {
    width: 5px;
}

.inventory-count-editor-aside::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(126, 141, 163, 0.42);
}

.inventory-count-editor-recent-head {
    display: grid;
    gap: 1rem;
}

.inventory-count-editor-recent-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    font-weight: 900;
}

.inventory-count-editor-recent-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 1rem;
    color: #7a8596;
    font-size: 0.9rem;
    font-weight: 700;
}

.inventory-count-editor-recent-columns span:last-child {
    text-align: right;
}

.inventory-count-editor-recent-empty,
.inventory-count-editor-recent-list {
    min-height: 0;
}

.inventory-count-editor-recent-empty.is-hidden,
.inventory-count-editor-recent-list.is-hidden {
    display: none;
}

.inventory-count-editor-recent-empty {
    display: grid;
    place-items: center;
    gap: 1rem;
    margin: auto 0;
    padding: 2rem 1rem;
    text-align: center;
    color: #697689;
}

.inventory-count-editor-recent-empty .material-symbols-outlined {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #f1efff;
    color: #6557f2;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
}

.inventory-count-editor-recent-empty p {
    margin: 0;
    max-width: 290px;
    font-size: 0.96rem;
    line-height: 1.55;
}

.inventory-count-editor-recent-list {
    display: grid;
    align-content: start;
    gap: 0;
}

.inventory-count-editor-recent-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid #e5e8ef;
}

.inventory-count-editor-recent-item:first-child {
    border-top: 0;
}

.inventory-count-editor-recent-item strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.inventory-count-editor-recent-item p {
    margin: 0.15rem 0 0;
    color: #697689;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-hub-order-status.is-active {
    border-color: #bfd6ff;
    background: #edf4ff;
    color: #3567cc;
}

@media (max-width: 1260px) {
    .inventory-count-editor-shell {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .inventory-count-editor-table-head,
    .inventory-count-editor-row {
        grid-template-columns: minmax(240px, 1fr) 128px 172px;
    }
}

@media (max-width: 1080px) {
    .inventory-count-create-page,
    .inventory-count-editor-page {
        overflow-y: auto;
    }

    .inventory-count-create-form,
    .inventory-count-editor-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .inventory-count-editor-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .inventory-count-editor-main,
    .inventory-count-editor-aside,
    .inventory-count-editor-table,
    .inventory-count-editor-rows {
        height: auto;
        overflow: visible;
    }

    .inventory-count-editor-aside {
        border-left: 0;
        border-top: 1px solid #e5e8ef;
    }

    .inventory-count-editor-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-count-editor-toggle {
        justify-self: start;
    }
}

@media (max-width: 860px) {
    .inventory-count-create-topbar,
    .inventory-count-editor-topbar {
        padding: 0.9rem 1rem;
    }

    .inventory-count-create-shell,
    .inventory-count-editor-main,
    .inventory-count-editor-aside {
        padding-inline: 1rem;
    }

    .inventory-count-create-head h1,
    .inventory-count-editor-head-copy h2 {
        font-size: 1.9rem;
    }

    .inventory-count-center-card,
    .inventory-count-center-card-static {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .inventory-count-center-card .material-symbols-outlined,
    .inventory-count-center-card-link {
        grid-column: 2;
        justify-self: start;
    }

    .inventory-count-editor-table-head {
        display: none;
    }

    .inventory-count-editor-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .inventory-count-editor-count {
        max-width: 280px;
    }
}

.inventory-count-summary-page {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    max-height: calc(100vh - 68px);
    min-height: 0;
    padding: 1.5rem 0 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.inventory-count-summary-header {
    display: grid;
    gap: 0.6rem;
}

.inventory-count-summary-breadcrumb {
    margin: 0;
    color: #6a7688;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-count-summary-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.inventory-count-summary-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.inventory-count-summary-title-row h1 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.inventory-count-summary-copy {
    margin: 0;
    color: #687589;
    font-size: 1rem;
    line-height: 1.6;
}

.inventory-count-summary-card {
    overflow: visible;
    border: 1px solid #dfe5ef;
    border-radius: 20px;
    background: #fff;
}

.inventory-count-summary-card-head {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid #e6ebf2;
}

.inventory-count-summary-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 900;
}

.inventory-count-summary-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    padding: 1.25rem 1.35rem 1.45rem;
}

.inventory-count-summary-detail-group {
    display: grid;
    gap: 1rem;
}

.inventory-count-summary-detail-item {
    display: grid;
    gap: 0.22rem;
}

.inventory-count-summary-detail-item strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 900;
}

.inventory-count-summary-detail-item span {
    color: #111827;
    font-size: 1rem;
    line-height: 1.5;
}

.inventory-count-summary-toolbar-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.35rem 0;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf2;
}

.inventory-count-summary-toolbar {
    align-items: center;
}

.inventory-count-summary-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-count-summary-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0.44rem 0.9rem;
    border: 1px solid #d3dae5;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
}

.inventory-count-summary-filter strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eef1f6;
    color: #667085;
    display: inline-grid;
    place-items: center;
    font-size: 0.82rem;
}

.inventory-count-summary-filter.is-active {
    border-color: #6557f2;
    background: #6557f2;
    color: #fff;
}

.inventory-count-summary-filter.is-active strong {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.inventory-count-summary-table .inventory-count-summary-total-row td {
    background: #fbfcfd;
    color: #111827;
    font-weight: 900;
}

.inventory-count-summary-product {
    display: grid;
    gap: 0.2rem;
}

.inventory-count-summary-product strong {
    color: #111827;
    font-size: 0.97rem;
    font-weight: 900;
}

.inventory-count-summary-product span {
    color: #6c798c;
    font-size: 0.9rem;
}

.inventory-count-summary-difference {
    font-weight: 900;
}

.inventory-count-summary-difference.is-match {
    color: #2e9b4f;
}

.inventory-count-summary-difference.is-over {
    color: #cb8a0f;
}

.inventory-count-summary-difference.is-under {
    color: #d64545;
}

.inventory-count-summary-empty {
    min-height: 220px;
}

.inventory-count-summary-empty-icon::before,
.inventory-count-summary-empty-icon::after {
    content: "";
    position: absolute;
}

.inventory-count-summary-empty-icon {
    position: relative;
    width: 56px;
    height: 42px;
    border: 4px solid #6557f2;
    border-radius: 8px;
    display: inline-block;
}

.inventory-count-summary-empty-icon::before {
    top: -10px;
    left: 10px;
    right: 10px;
    height: 8px;
    border: 4px solid #6557f2;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.inventory-count-summary-empty-icon::after {
    top: 14px;
    left: 14px;
    right: 14px;
    height: 4px;
    background: #6557f2;
    border-radius: 999px;
}

.inventory-table-row.is-clickable {
    cursor: pointer;
}

.inventory-table-row.is-clickable:focus-visible {
    outline: 2px solid #6557f2;
    outline-offset: -2px;
}

@media (max-width: 980px) {
    .inventory-count-summary-details-grid {
        grid-template-columns: 1fr;
    }
}

.inventory-list-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.inventory-list-head > div {
    display: grid;
    gap: 0.35rem;
}

.inventory-catalog-copy p {
    margin: 0.26rem 0 0;
    color: #627182;
    font-size: 0.84rem;
    line-height: 1.4;
}

.inventory-catalog-price-wrap {
    min-width: 138px;
    display: grid;
    justify-items: end;
    gap: 0.18rem;
}

.inventory-catalog-stock {
    color: #767982;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.inventory-list-panel {
    padding: 0.8rem;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.inventory-table-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.inventory-table-filter-pill {
    min-height: 40px;
    padding: 0.56rem 0.95rem;
    font-size: 0.9rem;
}

.inventory-table-filter-button {
    border: 1px solid #d5ddeb;
    background: #ffffff;
}

.inventory-sort-menu {
    justify-self: end;
}

.inventory-table-order-button {
    min-height: 42px;
    padding: 0.56rem 1rem 0.56rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #d5ddeb;
    background: #ffffff;
    color: #101927;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-sort-dropdown {
    min-width: 276px;
    padding: 0.45rem;
    gap: 0.16rem;
    overflow: visible;
}

.inventory-sort-menu.is-dropup .inventory-sort-dropdown {
    top: auto;
    bottom: calc(100% + 0.42rem);
}

.inventory-sort-dropdown a {
    min-height: 0;
    border-radius: 8px;
    padding: 0.1rem 0.56rem;
    color: #151f30;
    font-size: 0.78rem;
    line-height: 1.05;
    font-weight: 650;
}

.inventory-sort-dropdown a.is-active {
    background: #f3f6fb;
    color: #0d1625;
}

.inventory-table {
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.inventory-table th {
    color: #0f1828;
    font-size: 0.78rem;
    font-weight: 800;
    padding-top: 0.7rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #e6ebf3;
    background: #f8fbff;
}

.inventory-table td {
    color: #162133;
    font-size: 0.9rem;
    background: #ffffff;
    border-top: 0;
    border-bottom: 1px solid #e3e9f2;
    padding-top: 0.98rem;
    padding-bottom: 0.98rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.inventory-product-name-cell {
    min-width: 220px;
    gap: 0.68rem;
}

.clients-pro-table .inventory-product-thumb.clients-pro-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
    border: 1px solid rgba(205, 214, 226, 0.96);
    background: #f5f6fa;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(25, 37, 55, 0.08);
}

.clients-pro-table .inventory-product-thumb.clients-pro-avatar.is-photo {
    background: #ffffff;
}

.inventory-product-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-product-thumb-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 22%, rgba(255, 218, 163, 0.96), transparent 15%),
        radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.44), transparent 20%),
        linear-gradient(180deg, rgba(24, 17, 14, 0.12), rgba(24, 17, 14, 0.18)),
        linear-gradient(135deg, #70615c 0%, #9f7f6f 48%, #dbc8bc 100%);
}

.inventory-product-thumb-flare {
    position: absolute;
    left: 16%;
    bottom: 34%;
    width: 34%;
    height: 34%;
    border-radius: 999px;
    background: rgba(255, 214, 148, 0.42);
    filter: blur(8px);
}

.inventory-product-thumb-jar,
.inventory-product-thumb-candle {
    position: absolute;
    bottom: 14%;
    border-radius: 7px 7px 6px 6px;
    box-shadow: 0 7px 12px rgba(42, 26, 19, 0.2);
}

.inventory-product-thumb-jar {
    left: 14%;
    width: 26%;
    height: 39%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.06)),
        linear-gradient(180deg, #623822 0%, #8f5231 60%, #44271b 100%);
}

.inventory-product-thumb-jar::before {
    content: '';
    position: absolute;
    top: -12%;
    left: 23%;
    width: 54%;
    height: 18%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #d8dbe0, #aab1b9);
}

.inventory-product-thumb-candle {
    left: 57%;
    width: 30%;
    height: 43%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #f1ece4 0%, #dbcdbd 72%, #9c8875 100%);
}

.inventory-product-thumb-candle::before {
    content: '';
    position: absolute;
    top: -14%;
    left: 46%;
    width: 8%;
    height: 22%;
    border-radius: 999px;
    background: #23252b;
}

.inventory-product-thumb-candle::after {
    content: '';
    position: absolute;
    top: -28%;
    left: 28%;
    width: 42%;
    height: 36%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.92) 34%, rgba(255, 176, 76, 0.94) 60%, rgba(255, 138, 45, 0.08) 100%);
}

.inventory-product-thumb-surface {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: 0;
    height: 22%;
    background:
        linear-gradient(90deg, rgba(89, 112, 146, 0.52) 0 14%, rgba(243, 228, 196, 0.86) 14% 28%, rgba(110, 130, 162, 0.48) 28% 42%, rgba(243, 228, 196, 0.86) 42% 56%, rgba(110, 130, 162, 0.48) 56% 70%, rgba(243, 228, 196, 0.86) 70% 84%, rgba(110, 130, 162, 0.48) 84% 100%);
    opacity: 0.96;
}

.inventory-product-name-copy {
    gap: 0.18rem;
}

.inventory-product-name-copy small {
    color: #5d6b7f;
    font-size: 0.77rem;
    font-weight: 700;
}

.inventory-product-subcopy {
    color: #7a8799;
    font-size: 0.8rem;
    line-height: 1.25;
}

.inventory-table-tag,
.inventory-table-stock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 999px;
    padding: 0.38rem 0.82rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.inventory-table-tag {
    background: color-mix(in srgb, var(--inventory-row-accent, #d9e3f3) 18%, white 82%);
    color: #2b4157;
    border: 1px solid color-mix(in srgb, var(--inventory-row-accent, #d9e3f3) 55%, #d7e0eb 45%);
}

.inventory-table-supplier {
    color: #223247;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

.inventory-table-center-name {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
}

.inventory-table-stock-pill {
    min-width: 54px;
    background: linear-gradient(180deg, #f1f7ff 0%, #e8f2ff 100%);
    color: #2b5d93;
    border: 1px solid #cfe0f6;
}

.inventory-table-price {
    color: #132238;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.suppliers-list-panel .clients-pro-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
}

.suppliers-table-name-cell {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.suppliers-table-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 999px;
    border: 1px solid #dfe5ef;
    background: linear-gradient(180deg, #f4f1ff 0%, #ece7ff 100%);
    color: #624de3;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-grid;
    place-items: center;
}

.suppliers-table-name-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.suppliers-table-name-copy strong {
    color: #132238;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
}

.suppliers-table-name-copy small,
.suppliers-table-phone,
.suppliers-table-email,
.suppliers-table-updated {
    color: #5f6e84;
    font-size: 0.9rem;
    line-height: 1.35;
}

.suppliers-table-email {
    color: #223247;
    font-weight: 600;
}

.suppliers-table-count {
    color: #132238;
    font-size: 0.96rem;
    font-weight: 800;
}

.admin-body.supplier-form-editor-open {
    overflow: hidden;
}

.admin-body.supplier-form-editor-open .admin-content,
.admin-body.supplier-form-editor-open .clients-pro-main,
.admin-body.supplier-form-editor-open .clients-pro-side,
.admin-body.supplier-form-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.supplier-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.supplier-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.supplier-editor-topbar-spacer {
    min-height: 4px;
}

.supplier-editor-shell {
    place-items: start center;
    padding-top: 1.7rem;
}

.supplier-editor-content {
    width: min(100%, 760px);
    display: grid;
    gap: 1.75rem;
}

.supplier-editor-section {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 1.55rem;
    border-bottom: 1px solid #e5e8ef;
}

.supplier-editor-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.supplier-editor-section h2 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
    font-weight: 900;
}

.supplier-editor-fields {
    gap: 1rem;
}

.supplier-editor-grid {
    display: grid;
    gap: 1rem;
}

.supplier-editor-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-editor-fields input,
.supplier-editor-fields textarea,
.supplier-editor-fields select {
    width: 100%;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
    color: #0f1728;
    box-shadow: none;
}

.supplier-editor-fields input,
.supplier-editor-fields select {
    height: 50px;
}

.supplier-editor-fields textarea {
    min-height: 138px;
    resize: vertical;
}

.supplier-editor-fields select {
    padding-right: 2.6rem;
}

@media (max-width: 860px) {
    .supplier-editor-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .supplier-editor-page {
        overflow-y: auto;
    }

    .supplier-editor-shell {
        padding: 1.3rem 1rem 1.8rem;
    }

    .supplier-editor-grid.cols-2 {
        grid-template-columns: 1fr;
    }
}

.supplier-hub-panel .inventory-hub-layout {
    grid-template-columns: 300px minmax(0, 1fr);
}

.supplier-hub-avatar-circle {
    width: 128px;
    height: 128px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4f1ff 0%, #ece7ff 100%);
    color: #624de3;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
}

.supplier-hub-status-pill {
    width: fit-content;
    margin: 0 auto 1.3rem;
    padding: 0.42rem 0.88rem;
    border-radius: 999px;
    border: 1px solid #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
    font-size: 0.88rem;
    font-weight: 700;
}

.supplier-hub-status-pill.is-idle {
    border-color: #d9e1ec;
    background: #f8fafc;
    color: #6a778a;
}

.supplier-hub-products-list {
    display: grid;
    gap: 1rem;
}

.supplier-hub-product-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #fff;
}

.supplier-hub-product-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
    position: relative;
}

.supplier-hub-product-thumb .inventory-product-thumb-scene {
    position: absolute;
    inset: 0;
}

.supplier-hub-product-copy {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.supplier-hub-product-copy strong {
    color: #132238;
    font-size: 0.98rem;
    font-weight: 800;
}

.supplier-hub-product-copy small,
.supplier-hub-product-copy span {
    color: #617189;
    font-size: 0.88rem;
    line-height: 1.35;
}

.supplier-hub-product-meta {
    display: grid;
    justify-items: end;
    gap: 0.28rem;
    text-align: right;
}

.supplier-hub-product-meta span {
    color: #617189;
    font-size: 0.86rem;
    font-weight: 600;
}

.supplier-hub-product-meta strong {
    color: #132238;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-table-empty-cell {
    padding: 2.6rem 1rem !important;
    border-bottom: 0 !important;
    background: #ffffff !important;
}

.inventory-table-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-align: center;
}

.inventory-table-empty-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border: 4px solid #5a49da;
    border-radius: 999px;
    box-sizing: border-box;
}

.inventory-table-empty-icon::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 15px;
    height: 4px;
    border-radius: 999px;
    background: #5a49da;
    transform: rotate(45deg);
    transform-origin: center;
}

.inventory-table-empty-state strong {
    color: #121b2b;
    font-size: 0.95rem;
    font-weight: 900;
}

.inventory-table-empty-state p {
    margin: 0;
    color: #6d7a8c;
    font-size: 0.84rem;
    font-weight: 500;
}

.inventory-table-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e3e9f2;
}

.inventory-table-pagination {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    justify-content: center;
}

.inventory-table-results {
    margin: 0;
    color: #6f7f95;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.admin-body.admin-page-appointments-sales .clients-pro-table-wrap + .inventory-table-footer {
    margin-top: 0;
    padding-top: 0.85rem;
    border-top: 0;
}

.inventory-table-page-link,
.inventory-table-page-nav {
    min-width: 36px;
    min-height: 36px;
    padding: 0.42rem 0.72rem;
    border-radius: 10px;
    border: 1px solid #d9e1ec;
    background: #ffffff;
    color: #203149;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.inventory-table-page-link:hover,
.inventory-table-page-nav:hover {
    background: #f5f9ff;
    border-color: #c8d8eb;
}

.inventory-table-page-link.is-active {
    background: #10233b;
    border-color: #10233b;
    color: #ffffff;
}

.inventory-table-page-nav.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.inventory-filters-modal .lh-catalog-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inventory-filters-dialog {
    width: min(720px, calc(100vw - 2.8rem));
    max-height: calc(100vh - 4rem);
    border-radius: 18px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    box-shadow: 0 28px 54px rgba(12, 23, 36, 0.2);
    padding: 1.9rem 2rem 1.7rem;
}

.inventory-filters-close {
    top: 1.15rem;
    right: 1.2rem;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #202734;
    font-size: 2rem;
    line-height: 1;
    box-shadow: none;
}

.inventory-filters-head h3 {
    margin: 0;
    color: #0e1828;
    font-size: 1.1rem;
    font-weight: 900;
}

.inventory-filters-form {
    display: grid;
    gap: 1.35rem;
}

.inventory-filters-grid {
    display: grid;
    gap: 1.15rem;
}

.inventory-filters-form .form-group {
    display: grid;
    gap: 0.46rem;
}

.inventory-filters-form .form-group label {
    color: #121d2d;
    font-size: 0.94rem;
    font-weight: 800;
}

.inventory-filters-form .form-group select {
    min-height: 48px;
    border-radius: 10px;
    border-color: #d4dbe6;
    background: #ffffff;
    color: #111b2c;
    font-size: 0.96rem;
    font-weight: 600;
    padding-inline: 1rem 2.6rem;
}

.inventory-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding-top: 0.25rem;
}

.inventory-filters-actions .btn,
.inventory-filters-actions .btn-outline {
    min-height: 46px;
    border-radius: 999px;
    padding-inline: 1.25rem;
    font-size: 0.96rem;
    font-weight: 800;
}

.inventory-filters-actions .btn {
    background: #0b0b10;
    border-color: #0b0b10;
}

.inventory-filters-actions .btn:hover {
    background: #1d1e25;
    border-color: #1d1e25;
}

.inventory-filters-actions .btn-outline {
    background: #ffffff;
    color: #141c28;
    border-color: #d4dbe6;
}

.inventory-filters-actions .btn-outline:hover {
    background: #f5f7fb;
    color: #141c28;
    border-color: #c6d1df;
}

.inventory-table tbody tr {
    position: relative;
}

.inventory-table tbody tr:last-child td {
    border-bottom: 0;
}

.inventory-table tbody tr:hover td,
.inventory-table tbody tr:focus-within td {
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    border-color: #d7e3f2;
}

.inventory-table tbody tr:hover .inventory-product-thumb,
.inventory-table tbody tr:focus-within .inventory-product-thumb {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 18px rgba(34, 52, 77, 0.08);
}

.inventory-table td:nth-child(3),
.inventory-table td:nth-child(4),
.inventory-table td:nth-child(5),
.inventory-table td:nth-child(6) {
    font-weight: 600;
}

.inventory-table td:nth-child(6) {
    white-space: nowrap;
}

.inventory-stock-orders-row td {
    vertical-align: middle;
}

.inventory-stock-orders-table td:last-child {
    width: 150px;
}

.inventory-stock-order-link {
    display: inline-flex;
    align-items: center;
    color: #132238;
    font-size: 0.94rem;
    font-weight: 900;
    text-decoration: none;
}

.inventory-stock-order-link:hover,
.inventory-stock-order-link:focus-visible {
    color: #3f57f5;
}

.inventory-stock-order-link.is-static {
    color: #132238;
}

.inventory-count-title-link {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.inventory-count-title-link:hover,
.inventory-count-title-link:focus-visible {
    color: #111827;
}

.inventory-stock-order-status {
    justify-self: start;
    text-transform: none;
}

.inventory-stocktake-status {
    min-width: 0;
}

.inventory-table-results {
    margin-top: 1rem;
}

.inventory-options-dropdown .clients-pro-options-menu {
    min-width: 256px;
    padding: 0.55rem;
    gap: 0.12rem;
}

.inventory-counts-add-form {
    margin: 0;
}

.inventory-counts-add-form .clients-pro-add-btn {
    border: 0;
    cursor: pointer;
}

.inventory-options-menu .clients-pro-option-item {
    width: 100%;
    justify-content: flex-start;
    text-decoration: none;
}

.inventory-options-menu button.clients-pro-option-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.inventory-options-menu .clients-pro-options-label {
    margin-top: 0.32rem;
}

.inventory-options-export-ico {
    min-width: 28px;
    width: 28px;
    height: 22px;
    border-radius: 0;
    color: #0f1625;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.inventory-import-top {
    margin-bottom: 0.5rem;
}

.inventory-import-hero {
    display: grid;
    gap: 0.18rem;
}

.inventory-import-eyebrow {
    margin: 0;
    color: #6d7582;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-import-shell {
    max-width: 1040px;
}

.inventory-import-panel {
    padding: 2rem 2.2rem;
}

.inventory-import-dropzone {
    min-height: 310px;
    border: 1px dashed #d3dae5;
    border-radius: 18px;
    background: #fafbfc;
    display: grid;
    place-items: center;
    gap: 0.55rem;
    text-align: center;
    cursor: pointer;
}

.inventory-import-dropzone .material-symbols-outlined {
    font-size: 2.4rem;
    color: #141b28;
}

.inventory-import-dropzone strong {
    color: #121b2c;
    font-size: 1.06rem;
    font-weight: 900;
}

.inventory-import-cta {
    min-height: 42px;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 1px solid #d0d6e0;
    background: #ffffff;
    color: #141d2d;
    font-size: 0.96rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inventory-import-note {
    margin: 1rem 0 0;
    color: #6c7685;
    font-size: 0.96rem;
    line-height: 1.5;
}

.inventory-directory-modal .lh-catalog-backdrop,
.inventory-entity-modal .lh-catalog-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inventory-directory-dialog,
.inventory-entity-dialog {
    width: min(720px, calc(100vw - 3rem));
    max-height: calc(100vh - 3rem);
    border-radius: 20px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    box-shadow: 0 30px 56px rgba(12, 23, 36, 0.22);
    padding: 2rem 2rem 1.8rem;
}

.inventory-directory-close {
    top: 1.25rem;
    right: 1.3rem;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #161d2a;
    font-size: 2rem;
    line-height: 1;
    box-shadow: none;
}

.inventory-directory-head h3 {
    margin: 0;
    color: #121b2c;
    font-size: clamp(1.6rem, 2.3vw, 2rem);
    font-weight: 900;
}

.inventory-directory-search {
    margin-top: 1.55rem;
}

.inventory-directory-search input {
    font-weight: 600;
}

.inventory-directory-add-link {
    margin-top: 1.4rem;
    border: 0;
    background: transparent;
    color: #5f56ff;
    font-size: 0.98rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    cursor: pointer;
}

.inventory-directory-add-link .material-symbols-outlined {
    font-size: 1.32rem;
}

.inventory-directory-list {
    margin-top: 1.35rem;
    border-top: 1px solid #ebeef4;
}

.inventory-directory-item {
    padding: 1.05rem 0;
    border-bottom: 1px solid #ebeef4;
    display: grid;
    gap: 0.14rem;
}

.inventory-directory-item strong {
    color: #131c2d;
    font-size: 0.98rem;
    font-weight: 900;
}

.inventory-directory-item span,
.inventory-directory-empty {
    color: #697789;
    font-size: 0.92rem;
    font-weight: 500;
}

.inventory-directory-empty {
    margin: 0;
    padding: 1rem 0 0.2rem;
}

.inventory-entity-form {
    display: grid;
    gap: 1.4rem;
    margin-top: 1.8rem;
}

.inventory-entity-form .form-group {
    display: grid;
    gap: 0.48rem;
}

.inventory-entity-form .form-group label {
    color: #121c2d;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-entity-form .form-group input {
    min-height: 50px;
    border-radius: 10px;
    border-color: #d4dbe6;
    background: #ffffff;
    font-size: 0.98rem;
    font-weight: 600;
}

.inventory-entity-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding-top: 0.3rem;
}

.inventory-entity-actions .btn,
.inventory-entity-actions .btn-outline {
    min-height: 46px;
    border-radius: 999px;
    padding-inline: 1.35rem;
    font-size: 0.96rem;
    font-weight: 800;
}

.inventory-entity-actions .btn {
    background: #0b0b10;
    border-color: #0b0b10;
}

.inventory-entity-actions .btn:hover {
    background: #1d1e25;
    border-color: #1d1e25;
}

.inventory-entity-actions .btn-outline {
    background: #ffffff;
    color: #141c28;
    border-color: #d4dbe6;
}

.inventory-entity-actions .btn-outline:hover {
    background: #f5f7fb;
    border-color: #c6d1df;
}

@media (max-width: 1180px) {
    .inventory-product-grid {
        grid-template-columns: 1fr;
    }

    .inventory-product-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .inventory-top-title,
    .inventory-toggle-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .inventory-top-title {
        padding-bottom: 0.4rem;
    }

    .inventory-product-aside,
    .inventory-fields-grid,
    .inventory-inline-fields,
    .inventory-split-fields {
        grid-template-columns: 1fr;
    }

    .inventory-list-head {
        grid-template-columns: 1fr;
    }

    .inventory-catalog-price-wrap {
        min-width: 0;
    }

    .inventory-table-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-table-pagination {
        justify-content: center;
    }

    .inventory-sort-menu {
        justify-self: stretch;
    }

    .inventory-table-order-button {
        width: 100%;
        justify-content: space-between;
    }

    .inventory-import-panel,
    .inventory-directory-dialog,
    .inventory-entity-dialog {
        padding: 1.4rem 1.2rem 1.2rem;
    }

    .inventory-import-dropzone {
        min-height: 240px;
    }

    .inventory-sort-dropdown {
        min-width: 0;
        width: 100%;
    }

    .inventory-filters-dialog {
        width: min(100%, calc(100vw - 1.4rem));
        padding: 1.3rem 1.1rem 1.15rem;
    }

    .inventory-filters-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-entity-actions {
        flex-direction: column-reverse;
    }

    .inventory-entity-actions .btn,
    .inventory-entity-actions .btn-outline {
        width: 100%;
    }

    .inventory-product-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-product-actions .btn,
    .inventory-product-actions button {
        width: 100%;
    }

    .inventory-product-actions-float {
        left: calc(78px + 0.82rem);
        right: 0.82rem;
        bottom: 0.7rem;
        padding: 0.66rem 0.72rem;
    }
}

@media (max-width: 980px) {
    .inventory-product-actions-float {
        left: 0.82rem;
        right: 0.82rem;
        bottom: 0.62rem;
    }
}

@media (max-width: 640px) {
    .inventory-product-actions-float {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-product-actions-float .btn,
    .inventory-product-actions-float button {
        width: 100%;
    }
}

.admin-body.admin-page-services-form .clients-pro-main {
    padding-top: 0.18rem;
}

.admin-body.admin-page-services-catalog .clients-pro-layout,
.admin-body.admin-page-inventory-catalog .clients-pro-layout {
    min-height: calc(100vh - 68px);
}

.admin-body.admin-page-services-catalog .clients-pro-side,
.admin-body.admin-page-inventory-catalog .clients-pro-side {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.admin-body.admin-page-services-catalog .clients-pro-side-head,
.admin-body.admin-page-services-catalog .clients-pro-side-nav,
.admin-body.admin-page-inventory-catalog .clients-pro-side-head,
.admin-body.admin-page-inventory-catalog .clients-pro-side-nav {
    background: #ffffff !important;
}

.admin-body.admin-page-services-catalog .clients-pro-side-nav,
.admin-body.admin-page-inventory-catalog .clients-pro-side-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    gap: 0.22rem;
    min-height: calc(100vh - 68px - 60px);
    min-height: calc(100dvh - 68px - 60px);
}

@media (min-width: 981px) {
    .admin-body.admin-page-services-catalog .clients-pro-layout,
    .admin-body.admin-page-inventory-catalog .clients-pro-layout {
        display: block;
        min-height: calc(100vh - 68px);
    }

    .admin-body.admin-page-services-catalog .clients-pro-side,
    .admin-body.admin-page-inventory-catalog .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        min-height: 0;
        max-height: none;
        border-top: 0;
        border-right: 1px solid #dedfe4;
        border-bottom: 0;
        border-left: 0;
        overflow-y: auto;
        z-index: 14;
    }

    .admin-body.admin-page-services-catalog .clients-pro-side-nav,
    .admin-body.admin-page-inventory-catalog .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-services-catalog .clients-pro-main,
    .admin-body.admin-page-inventory-catalog .clients-pro-main {
        margin-left: 210px;
        padding: 0.75rem 1rem 1.2rem;
    }

    .admin-body.admin-page-services-catalog.admin-page-services-form .clients-pro-main {
        padding-top: 0.12rem;
    }
}

@media (max-width: 980px) {
    .admin-body.admin-page-services-catalog .clients-pro-side,
    .admin-body.admin-page-inventory-catalog .clients-pro-side {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: auto;
        height: calc(100dvh - 68px);
        min-height: calc(100dvh - 68px);
        max-height: calc(100dvh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
    }
}

.admin-body.admin-page-services-catalog .admin-module-side-head {
    min-height: 74px;
    padding: 0 1.35rem;
}

.admin-body.admin-page-services-catalog .admin-module-side-head h2 {
    color: #111111;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav {
    gap: 0.36rem;
    padding: 0.95rem 1.15rem 1.35rem;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a {
    min-height: 40px;
    padding: 0.38rem 0.1rem;
    border-radius: 0;
    border: 0;
    font-size: 1.05rem;
    font-weight: 560;
    color: #000000;
    line-height: 1.35;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a:hover {
    background: transparent;
    border: 0;
    color: #000000;
    opacity: 0.82;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a.is-active {
    background: transparent;
    border: 0;
    color: #000000;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a[aria-disabled='true'] {
    opacity: 1;
    color: #000000;
}

.admin-body.admin-page-services-catalog .admin-module-side-divider {
    margin: 0.62rem 0 0.56rem;
    border-top-color: #d8d8dc;
}

.admin-body.admin-page-services-catalog .admin-module-side-section {
    margin: 0.68rem 0 0.16rem;
    color: #000000;
    font-size: 1.85rem;
    line-height: 1.3;
    font-weight: 740;
    letter-spacing: 0;
}

.admin-body.admin-page-services-catalog .admin-module-side-toggle {
    width: 46px;
    height: 46px;
    right: -23px;
    border-color: #d9dce2;
    background: #f2f2f3;
    font-size: 1.45rem;
}

@media (max-width: 980px) {
    .admin-body.admin-page-services-catalog .admin-module-side-head h2 {
        font-size: 1.42rem;
    }

    .admin-body.admin-page-services-catalog .admin-module-side-nav {
        padding: 0.7rem 0.85rem 0.95rem;
    }

    .admin-body.admin-page-services-catalog .admin-module-side-nav a {
        font-size: 0.96rem;
        min-height: 35px;
    }

    .admin-body.admin-page-services-catalog .admin-module-side-section {
        font-size: 1.03rem;
    }
}

@media (min-width: 981px) {
    .admin-body.admin-page-web-editor .admin-web-editor-layout {
        display: block;
    }

    .admin-body.admin-page-web-editor .admin-web-editor-side {
        position: fixed;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        overflow-y: auto;
        z-index: 14;
    }

    .admin-body.admin-page-web-editor .admin-web-editor-main {
        margin-left: 210px;
    }
}

@media (max-width: 980px) {
    .admin-web-editor-layout {
        display: block;
        min-height: 0;
    }

    .admin-web-editor-side {
        border: 1px solid #d5deeb;
        border-radius: 14px;
        margin: 0 0 0.85rem;
    }

    .admin-web-editor-side-head {
        padding: 0.8rem 0.85rem 0.6rem;
    }

    .admin-web-editor-side-head h2 {
        font-size: 1.03rem;
    }

    .admin-web-editor-nav a {
        font-size: 0.84rem;
    }

    .admin-web-editor-main {
        margin-left: 0;
        padding: 0;
    }
}

.admin-nav > a::before {
    content: attr(data-icon);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-weight: 500;
    line-height: 1;
}

.admin-nav > a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(186, 201, 220, 0.16);
    color: #ffffff;
}

.admin-nav > a.is-active {
    background: linear-gradient(145deg, #6d57ff 0%, #5b47ea 100%);
    border-color: rgba(144, 124, 255, 0.78);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(64, 47, 167, 0.42);
}

.admin-user {
    margin-top: auto;
    border-top: 1px solid rgba(178, 191, 209, 0.22);
    padding: 0.62rem 0 0.1rem;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.admin-user p {
    display: none;
}

.admin-user a {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(176, 191, 213, 0.22);
    background: transparent;
    color: #e9eef8;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-user a::before {
    content: 'logout';
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.admin-user a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(188, 202, 222, 0.3);
}

.admin-nav-tooltip {
    position: fixed;
    z-index: 3200;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    background: #07080b;
    color: #ffffff;
    border-radius: 10px;
    padding: 0.34rem 0.62rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(5, 8, 14, 0.45);
}

.admin-nav-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #07080b;
}

.admin-nav-tooltip.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.admin-content {
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 0 1.15rem 1.6rem;
    background:
        radial-gradient(960px 380px at 89% -18%, rgba(71, 171, 255, 0.12), transparent 68%),
        linear-gradient(180deg, #edf3fb 0%, #e7eef8 100%);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 158, 220, 0.48) rgba(118, 139, 163, 0.2);
}

.admin-content::-webkit-scrollbar {
    width: 9px;
}

.admin-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(86, 158, 220, 0.48);
}

.admin-content::-webkit-scrollbar-track {
    background: rgba(131, 149, 171, 0.2);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -1.15rem 1.35rem;
    min-height: 68px;
    border-bottom: 1px solid rgba(136, 156, 185, 0.28);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #070b12 0%, #0a101a 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(9, 14, 22, 0.82), 0 12px 22px rgba(3, 7, 13, 0.28);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.62rem 1.15rem;
}

.admin-topbar-brand {
    display: none;
    align-items: center;
    color: #101826;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.admin-topbar-copy {
    min-width: 0;
}

.admin-sidebar-toggle {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #c5d4e6;
    background: #ffffff;
    color: #29445f;
    box-shadow: 0 6px 14px rgba(17, 35, 55, 0.08);
    display: none;
}

.admin-sidebar-toggle:hover {
    background: #f2f7fd;
}

.admin-topbar-kicker {
    margin: 0;
    color: #dbe7f8;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-topbar-subtitle {
    margin: 0.12rem 0 0;
    color: #9fb0c9;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-topbar-pro-actions {
    display: none;
    align-items: center;
    gap: 0.44rem;
}

.admin-topbar-pro-cta {
    min-height: 40px;
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    background: linear-gradient(135deg, #5f4cf6 0%, #7a57ff 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 18px rgba(90, 74, 230, 0.24);
}

.admin-topbar-pro-cta:hover {
    filter: brightness(1.04);
}

.admin-topbar-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #d5deeb;
    background: #ffffff;
    color: #192637;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}

.admin-topbar-icon-btn:hover {
    background: #f4f8fd;
}

.admin-topbar-quick {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-body .admin-topbar-quick {
    display: none !important;
}

.admin-topbar-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c9d8e9;
    background: #ffffff;
    color: #294460;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-topbar-chip:hover {
    background: #eef5fd;
}

.admin-topbar-search-wrap {
    position: relative;
}

.admin-topbar-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: min(280px, 44vw);
    padding: 0.42rem 0.58rem;
    border-radius: 11px;
    border: 1px solid rgba(162, 183, 213, 0.34);
    background: rgba(234, 243, 255, 0.06);
}

.admin-topbar-search-icon {
    color: #8fb4e1;
    font-size: 0.86rem;
    line-height: 1;
}

.admin-topbar-search input[type='search'] {
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e6efff;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-topbar-search input[type='search']::placeholder {
    color: #9db0cb;
}

.admin-topbar-search input[type='search']:focus {
    box-shadow: none;
}

.admin-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    border: 1px solid #cfddec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(17, 35, 55, 0.14);
    overflow: hidden;
    z-index: 34;
}

.admin-search-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-top: 1px solid #e3ebf4;
    background: #ffffff;
    color: #243c56;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.54rem 0.65rem;
    cursor: pointer;
}

.admin-search-item:first-child {
    border-top: 0;
}

.admin-search-item:hover {
    background: #f2f8ff;
}

.admin-search-empty {
    margin: 0;
    padding: 0.6rem 0.65rem;
    color: #5d738f;
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-topbar-ghost {
    min-height: 34px;
    padding: 0.44rem 0.78rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.admin-topbar-user {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c7d6e8;
    background: #ffffff;
    color: #2a4460;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-body .flash-wrap {
    position: sticky;
    top: 4.95rem;
    z-index: 14;
    margin-bottom: 0.8rem;
}

.admin-body.admin-sidebar-collapsed .admin-sidebar .brand {
    justify-content: center;
    font-size: 0;
    padding-left: 0;
    padding-right: 0;
}

.admin-body.admin-sidebar-collapsed .admin-sidebar .brand::before {
    margin: 0;
}

.admin-body.admin-sidebar-collapsed .admin-nav > a,
.admin-body.admin-sidebar-collapsed .admin-nav-group > summary {
    min-height: 42px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.admin-body.admin-sidebar-collapsed .admin-nav > a::before,
.admin-body.admin-sidebar-collapsed .admin-nav-group > summary::before {
    position: static;
    transform: none;
}

.admin-body.admin-sidebar-collapsed .admin-nav-group > summary::after {
    display: none;
}

.admin-body.admin-sidebar-collapsed .admin-subnav {
    display: none;
}

.admin-body.admin-sidebar-collapsed .admin-nav > a:hover,
.admin-body.admin-sidebar-collapsed .admin-nav-group:hover > summary {
    transform: none;
}

.admin-body .flash {
    border-radius: 12px;
    border-width: 1px;
    box-shadow: 0 10px 18px rgba(18, 34, 51, 0.08);
}

.admin-body .panel {
    border-radius: 14px;
    border: 1px solid #d4dfec;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 24px rgba(17, 35, 55, 0.08);
}

.admin-body .table-wrap {
    border: 1px solid #d5e0ed;
    border-radius: 12px;
    background: #ffffff;
}

.admin-body table {
    background: #fff;
}

.admin-body th,
.admin-body td {
    border-bottom-color: #d9e3ef;
}

.admin-body th {
    background: #f4f8fd;
}

.admin-body .form-grid {
    gap: 1.05rem;
}

.admin-body .form-group {
    gap: 0.18rem;
}

.admin-body .form-group > label {
    margin: 0;
    color: #223247;
    font-size: 0.94rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.admin-body .form-group small {
    margin-top: 0.45rem;
    color: #6a778a;
    font-size: 0.8rem;
    line-height: 1.4;
}

.admin-body .form-group input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']),
.admin-body .form-group select,
.admin-body .form-group textarea {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #112338;
    font-size: 0.94rem;
    padding: 0.78rem 0.9rem;
    box-shadow: none;
}

.admin-body .form-group textarea {
    min-height: 120px;
}

.admin-body .form-group input[type='file'] {
    min-height: 46px;
    border-radius: 12px;
    border: 1px dashed #cfd8e7;
    background: #fff;
    font-size: 0.9rem;
    padding: 0.72rem 0.85rem;
}

.admin-body .form-group input::placeholder,
.admin-body .form-group select::placeholder,
.admin-body .form-group textarea::placeholder {
    color: #b1b8c4;
}

.admin-body .form-group input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):focus,
.admin-body .form-group select:focus,
.admin-body .form-group textarea:focus,
.admin-body .form-group input[type='file']:focus {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.admin-body .form-group.mt-1,
.admin-body .form-grid.mt-1 {
    margin-top: 0.82rem;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
    border-radius: 10px;
    border-color: #b9cbdf;
    background: #fbfdff;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
    border-color: #69c6e3;
    box-shadow: 0 0 0 3px rgba(57, 183, 219, 0.2);
}

.admin-body button,
.admin-body .btn,
.admin-body [type='submit'] {
    min-height: 40px;
    border-radius: 10px;
    font-weight: 700;
}

.top-title {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    border: 1px solid #d4deec;
    background: rgba(247, 251, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 22px rgba(17, 35, 55, 0.06);
}

.top-title h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.1vw, 2.05rem);
    color: #11253b;
    line-height: 1.1;
}

.top-title p {
    margin: 0;
    color: #556983;
    font-weight: 500;
    font-size: 0.92rem;
}

.cms-editor {
    display: grid;
    gap: 1rem;
    padding-bottom: 7.5rem;
}

.cms-main-white {
    background: #ffffff !important;
    border-color: #d7e1ee !important;
    box-shadow: 0 12px 22px rgba(17, 35, 55, 0.08) !important;
}

.cms-main-white .cms-block {
    background: #ffffff;
}

.admin-body.admin-page-content .admin-content {
    background: #ffffff;
    --cms-sidebar-width: 240px;
}

.admin-body.admin-page-content .top-title {
    background: #ffffff;
    border-color: #dce5f0;
    box-shadow: 0 8px 18px rgba(17, 35, 55, 0.06);
}

.admin-body.admin-page-content .cms-actions,
.admin-body.admin-page-content .cms-nav {
    background: #ffffff;
}

.cms-nav {
    position: sticky;
    top: 4.8rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.65rem;
    border-radius: 12px;
    border: 1px solid #d3deec;
    background: rgba(248, 251, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cms-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #c9d8eb;
    background: #f9fcff;
    color: #2a4464;
    font-size: 0.84rem;
    font-weight: 700;
    transition: all 0.18s ease;
}

.cms-nav a:hover {
    border-color: #79cde4;
    background: #ecf9ff;
    color: #19466f;
}

.cms-tools {
    display: grid;
    gap: 0.72rem;
    border: 1px solid #d5e0ed;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
    padding: 0.72rem;
}

.cms-search-wrap {
    display: grid;
    gap: 0.4rem;
}

.cms-search-wrap label {
    margin: 0;
    color: #4f6683;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.cms-search-wrap input[type='search'] {
    border-radius: 10px;
    border-color: #bcd0e6;
    background: #ffffff;
    color: #19314d;
    font-size: 0.9rem;
}

.cms-tools-hint {
    margin: 0;
    color: #5f7590;
    font-size: 0.82rem;
    font-weight: 600;
}

.cms-module-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cms-module-filters button {
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid #c9d8eb;
    background: #f8fbff;
    color: #24415f;
    padding: 0.34rem 0.72rem;
    font-size: 0.79rem;
    font-weight: 700;
    transition: all 0.18s ease;
}

.cms-module-filters button:hover {
    border-color: #7dcfe4;
    background: #ecf9ff;
}

.cms-module-filters button.is-active {
    border-color: #2dbfd9;
    background: linear-gradient(145deg, #31c7e0, #1eaed1);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(20, 66, 95, 0.18);
}

.cms-block {
    border: 1px solid #d5e0ed;
    border-radius: 14px;
    background: #fcfdff;
    padding: 0.95rem;
}

.cms-block-head {
    margin-bottom: 0.8rem;
}

.cms-block-head h2 {
    margin: 0;
    color: #132a45;
    font-size: clamp(1.28rem, 1.65vw, 1.65rem);
    line-height: 1.14;
}

.cms-block-head p {
    margin: 0.3rem 0 0;
    color: #60758e;
    font-size: 0.9rem;
}

.cms-cards {
    display: grid;
    gap: 0.8rem;
}

.cms-cards-text {
    grid-template-columns: 1fr;
}

.cms-cards-global {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cms-card {
    border: 1px solid #d8e2ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 18px rgba(16, 35, 58, 0.06);
    padding: 0.85rem 0.85rem 0.9rem;
}

.cms-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
}

.cms-card-head h3 {
    margin: 0;
    color: #152d49;
    font-size: 1rem;
    line-height: 1.2;
}

.cms-card-title-wrap {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
}

.cms-module-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #d3e0f0;
    background: #f5f9ff;
    color: #39597b;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.cms-card-head code {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #d4e0ef;
    background: #f7faff;
    color: #4f6f92;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.cms-translate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
    align-items: stretch;
}

.cms-lang-col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 0;
}

.cms-lang-col label {
    color: #4f6580;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.cms-card input,
.cms-card textarea {
    border-radius: 9px;
    border-color: #bfd0e4;
    background: #fbfdff;
    color: #1f3552;
    font-size: 0.92rem;
}

.cms-card textarea {
    min-height: 90px;
}

.cms-check-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.2rem;
    color: #1f3552;
    font-size: 0.9rem;
    font-weight: 600;
}

.cms-check-row input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 4px;
    accent-color: #1fb8d4;
    flex: 0 0 auto;
}

.cms-check-row span {
    line-height: 1.3;
}

.cms-rich-editor {
    border: 1px solid #bfd0e4;
    border-radius: 10px;
    overflow: hidden;
    background: #fbfdff;
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.cms-lang-col .cms-rich-editor {
    height: 100%;
}

.cms-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    padding: 0.42rem;
    border-bottom: 1px solid #d7e3f2;
    background: #f4f8fd;
}

.cms-rich-toolbar button {
    border: 1px solid #c9d8ea;
    background: #ffffff;
    color: #1e3552;
    border-radius: 8px;
    min-width: 30px;
    min-height: 30px;
    padding: 0.24rem 0.38rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cms-rich-toolbar button.is-hr {
    min-width: 38px;
}

.cms-rich-toolbar button:hover {
    background: #ebf3fb;
}

.cms-rich-toolbar button:focus {
    outline: none;
    border-color: #85b2df;
    box-shadow: 0 0 0 3px rgba(71, 136, 201, 0.2);
}

.cms-rich-editable {
    min-height: 180px;
    flex: 1 1 auto;
    padding: 0.72rem 0.8rem;
    color: #1f3552;
    font-size: 0.92rem;
    line-height: 1.52;
}

.cms-rich-editable:focus {
    outline: none;
    background: #fff;
}

.cms-rich-editable p {
    margin: 0 0 0.52rem;
}

.cms-rich-editable ul,
.cms-rich-editable ol {
    margin: 0 0 0.62rem 1.3rem;
}

.cms-rich-editable hr {
    border: 0;
    border-top: 1px solid #b8cbe1;
    margin: 0.9rem 0;
}

.cms-card-image {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cms-image-preview {
    margin: 0.62rem 0 0;
    width: min(280px, 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d5dfec;
    box-shadow: 0 10px 18px rgba(20, 38, 58, 0.12);
}

.cms-image-preview img {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
}

.cms-upload-wrap {
    margin-top: 0.58rem;
    display: grid;
    gap: 0.3rem;
}

.cms-upload-wrap label {
    margin: 0;
    color: #4f6683;
    font-size: 0.82rem;
    font-weight: 700;
}

.cms-upload-wrap input[type='file'] {
    border: 1px dashed #bfd0e3;
    background: #f8fbff;
    padding: 0.55rem 0.62rem;
}

.cms-actions {
    position: fixed;
    left: calc(var(--cms-sidebar-width, 240px) + 1rem);
    right: 1rem;
    bottom: max(0.35rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.6rem 0.72rem;
    border-radius: 14px;
    border: 1px solid #c7d7ea;
    background: rgba(251, 254, 255, 0.96);
    box-shadow: 0 14px 28px rgba(14, 34, 56, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cms-actions-copy {
    display: grid;
    gap: 0.12rem;
}

.cms-actions-copy strong {
    color: #173353;
    font-size: 0.9rem;
    line-height: 1.1;
}

.cms-actions-copy span {
    color: #5f7590;
    font-size: 0.8rem;
    line-height: 1.2;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d1deeb;
    box-shadow: 0 10px 22px rgba(14, 34, 56, 0.08);
    padding: 0.95rem 1rem;
}

.metric-card .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5f728a;
    font-weight: 700;
}

.metric-card .value {
    margin-top: 0.3rem;
    font-size: 1.92rem;
    line-height: 1;
    color: #163f64;
    font-weight: 700;
}

.dashboard-top-title p {
    margin-top: 0.2rem;
    color: #60738c;
    font-size: 0.9rem;
    font-weight: 600;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.dashboard-kpi-card {
    border-radius: 14px;
    border: 1px solid #d1deeb;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96));
    box-shadow: 0 10px 24px rgba(19, 37, 58, 0.08);
    padding: 0.92rem 0.95rem;
    display: grid;
    gap: 0.28rem;
}

.dashboard-kpi-card-wide {
    grid-column: span 2;
}

.dashboard-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-kpi-label {
    margin: 0;
    color: #5f728a;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 24px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(38, 196, 217, 0.2), rgba(21, 151, 175, 0.24));
    color: #0f6071;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.dashboard-kpi-value,
.dashboard-kpi-money {
    margin: 0.08rem 0 0;
    font-size: clamp(1.68rem, 2.05vw, 2.24rem);
    color: #133a5d;
    line-height: 1;
    font-weight: 800;
}

.dashboard-kpi-money {
    color: #124d4d;
}

.dashboard-kpi-meta {
    margin: 0.08rem 0 0;
    color: #69809c;
    font-size: 0.82rem;
    font-weight: 600;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.95rem;
    align-items: start;
}

.dashboard-side-stack {
    display: grid;
    gap: 0.95rem;
}

.dashboard-panel {
    padding: 0.95rem;
}

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-panel-kicker {
    margin: 0;
    color: #5f7691;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-panel-head h2 {
    margin: 0.2rem 0 0;
    color: #132c48;
    font-size: 1.1rem;
    line-height: 1.15;
}

.dashboard-activity-list,
.dashboard-agenda-list,
.dashboard-next-list {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.52rem;
}

.dashboard-activity-item,
.dashboard-agenda-item,
.dashboard-next-item {
    border: 1px solid #d8e4f0;
    border-radius: 11px;
    background: #fcfeff;
    padding: 0.54rem 0.58rem;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
}

.dashboard-activity-status {
    min-width: 92px;
    text-align: center;
}

.dashboard-activity-copy {
    min-width: 0;
}

.dashboard-activity-title {
    margin: 0;
    color: #18324d;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-activity-meta {
    margin: 0.08rem 0 0;
    color: #627993;
    font-size: 0.79rem;
    font-weight: 600;
}

.dashboard-row-link {
    min-height: 30px;
    padding: 0.28rem 0.6rem;
    font-size: 0.76rem;
}

.dashboard-agenda-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.62rem;
    align-items: center;
}

.dashboard-agenda-time {
    margin: 0;
    min-width: 50px;
    text-align: center;
    border-radius: 8px;
    background: #eaf5fd;
    color: #1f5e86;
    padding: 0.3rem 0.44rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.dashboard-agenda-copy {
    min-width: 0;
}

.dashboard-agenda-title {
    margin: 0;
    color: #1b3652;
    font-size: 0.84rem;
    font-weight: 800;
}

.dashboard-agenda-meta {
    margin: 0.1rem 0 0;
    color: #607793;
    font-size: 0.78rem;
    font-weight: 600;
}

.dashboard-next-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
}

.dashboard-next-date {
    margin: 0;
    min-width: 46px;
    border-radius: 8px;
    background: #f0f6fb;
    color: #234f70;
    text-align: center;
    padding: 0.3rem 0.42rem;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-next-copy {
    min-width: 0;
}

.dashboard-next-title {
    margin: 0;
    color: #18314c;
    font-size: 0.82rem;
    font-weight: 800;
}

.dashboard-next-meta {
    margin: 0.1rem 0 0;
    color: #607793;
    font-size: 0.76rem;
    font-weight: 600;
}

.dashboard-next-link {
    color: #1f8fa8;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-next-link:hover {
    color: #166f83;
}

.dashboard-quick-grid {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
}

.dashboard-quick-card {
    border: 1px solid #d5e2ef;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    padding: 0.58rem 0.62rem;
    display: grid;
    gap: 0.12rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-quick-card strong {
    color: #1b3652;
    font-size: 0.84rem;
    font-weight: 800;
}

.dashboard-quick-card span {
    color: #5f7792;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-quick-card:hover {
    transform: translateY(-2px);
    border-color: #b7cfeb;
    box-shadow: 0 12px 20px rgba(18, 40, 62, 0.12);
}

.dashboard-table-panel {
    margin-top: 0.95rem;
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-hero-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.dashboard-hero-menu {
    color: #4c5e74;
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-hero-money {
    margin: 0.3rem 0 0;
    color: #0d2137;
    font-size: clamp(2rem, 2.8vw, 2.72rem);
    line-height: 1.05;
    font-weight: 800;
}

.dashboard-hero-meta {
    margin: 0.5rem 0 0;
    color: #5f738c;
    font-size: 0.92rem;
    font-weight: 600;
}

.dashboard-mini-chart {
    margin-top: auto;
    min-height: 204px;
    border: 1px solid #e0e7f0;
    border-radius: 12px;
    padding: 0.8rem 0.65rem 0.45rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.34rem;
    align-items: end;
    background:
        linear-gradient(to top, rgba(200, 214, 229, 0.36) 1px, transparent 1px) 0 0 / 100% 25%,
        #ffffff;
}

.dashboard-mini-bar {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 0.32rem;
}

.dashboard-mini-bar-fill {
    width: 18px;
    min-height: 8px;
    max-height: 100%;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #1cc18f 0%, #15a278 100%);
    box-shadow: 0 7px 12px rgba(14, 135, 100, 0.2);
}

.dashboard-mini-bar small {
    color: #647a93;
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-empty-state {
    margin: auto 0;
    min-height: 250px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.3rem;
}

.dashboard-empty-icon {
    margin: 0;
    font-size: 3.1rem;
    color: #1d2f45;
    line-height: 1;
}

.dashboard-empty-title {
    margin: 0;
    color: #121f31;
    font-size: clamp(1.3rem, 1.8vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
}

.dashboard-empty-copy {
    margin: 0;
    color: #5f748d;
    font-size: 0.96rem;
    font-weight: 600;
}

.dashboard-next-list-hero {
    margin-top: 0.95rem;
}

.admin-body.admin-page-dashboard-pro .admin-layout {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 0;
}

.admin-body.admin-page-dashboard-pro .admin-sidebar {
    border-radius: 0;
    border-right: 0;
    background: #08090d;
    padding: 0.6rem 0.48rem;
}

.admin-body.admin-page-dashboard-pro .admin-sidebar .brand,
.admin-body.admin-page-dashboard-pro .admin-user,
.admin-body.admin-page-dashboard-pro .admin-subnav {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-nav {
    margin-top: 0;
    gap: 0.4rem;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary {
    min-height: 44px;
    border-radius: 12px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    font-size: 0;
    border: 1px solid transparent;
    background: transparent;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a::before,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary::before {
    position: static;
    transform: none;
    font-size: 0.86rem;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: #e4ebf7;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a:hover,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary:hover {
    transform: none;
    background: #111420;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a.is-active,
.admin-body.admin-page-dashboard-pro .admin-nav-group.is-active > summary {
    background: #171b29;
    border-color: rgba(133, 110, 255, 0.65);
}

.admin-body.admin-page-dashboard-pro .admin-nav-group > summary::after {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-content {
    background: #f3f4f6;
    padding: 0 0 1.2rem;
}

.admin-body.admin-page-dashboard-pro .admin-topbar {
    margin: 0 0 0.7rem;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    min-height: 68px;
    padding: 0.62rem 0.86rem;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(15, 23, 36, 0.08);
}

.admin-body.admin-page-dashboard-pro .admin-topbar-brand {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-copy,
.admin-body.admin-page-dashboard-pro .admin-topbar-search-wrap {
    display: block;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-quick,
.admin-body.admin-page-dashboard-pro .admin-topbar-ghost {
    display: inline-flex;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-left {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-body.admin-page-dashboard-pro .admin-sidebar-toggle {
    border-radius: 10px;
    border-color: #d7dfeb;
    box-shadow: none;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-right {
    margin-left: auto;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-pro-actions {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-user {
    min-height: 32px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c7d6e8;
    background: #ffffff;
    color: #2a4460;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-body.admin-page-dashboard-pro .flash-wrap,
.admin-body.admin-page-dashboard-pro .admin-content > .top-title,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-hero-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-kpi-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-main-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-table-panel {
    width: min(1220px, calc(100% - 2.1rem));
    margin-left: auto;
    margin-right: auto;
}

.admin-body.admin-page-dashboard-pro .flash-wrap {
    margin-top: 1rem;
}

.admin-body.admin-page-dashboard-pro .top-title.dashboard-top-title {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1rem 0 0.35rem;
    margin: 0 auto;
}

.admin-body.admin-page-dashboard-pro .dashboard-top-title .btn {
    background: linear-gradient(135deg, #5f4cf6 0%, #7a57ff 100%);
    box-shadow: 0 10px 18px rgba(89, 73, 229, 0.24);
}

.admin-body.admin-page-dashboard-pro .dashboard-kpi-card,
.admin-body.admin-page-dashboard-pro .dashboard-panel,
.admin-body.admin-page-dashboard-pro .dashboard-hero-card,
.admin-body.admin-page-dashboard-pro .dashboard-table-panel {
    border: 1px solid #d9e0ea;
    border-radius: 13px;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-dashboard-pro .dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-live-panel {
    border-color: #cfe0f0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 249, 255, 0.92));
}

.dashboard-live-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.56rem;
    border-radius: 999px;
    border: 1px solid #c7d9eb;
    background: #f3f8fd;
    color: #3d5f83;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-live-status.is-ok {
    border-color: #c3e6da;
    background: #eaf8f1;
    color: #256347;
}

.dashboard-live-status.is-error {
    border-color: #e8c9c9;
    background: #fff3f3;
    color: #8f3b3b;
}

.dashboard-live-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.52rem;
}

.dashboard-live-box {
    border: 1px solid #d8e6f4;
    border-radius: 10px;
    background: #fcfeff;
    padding: 0.5rem 0.56rem;
}

.dashboard-live-label {
    margin: 0;
    color: #607893;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.dashboard-live-value {
    margin: 0.14rem 0 0;
    color: #14395b;
    font-size: clamp(1.22rem, 1.58vw, 1.58rem);
    font-weight: 800;
    line-height: 1;
}

.dashboard-live-list {
    margin: 0.72rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.44rem;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.dashboard-live-list::-webkit-scrollbar {
    width: 6px;
}

.dashboard-live-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(104, 138, 173, 0.55);
}

.dashboard-live-item {
    border: 1px solid #d9e5f2;
    border-left: 4px solid #8cb7dc;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.45rem 0.52rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.dashboard-live-item.is-warning {
    border-left-color: #e2b04d;
}

.dashboard-live-item.is-info {
    border-left-color: #5aafd3;
}

.dashboard-live-item.is-success {
    border-left-color: #55b186;
}

.dashboard-live-item.is-danger {
    border-left-color: #d07676;
}

.dashboard-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #eef4fb;
    color: #3d5f82;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.dashboard-live-copy {
    min-width: 0;
}

.dashboard-live-title {
    margin: 0;
    color: #17324f;
    font-size: 0.81rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-live-meta {
    margin: 0.08rem 0 0;
    color: #5f7793;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-live-link {
    color: #1e8ba6;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-live-link:hover {
    color: #166f84;
}

.dashboard-live-updated {
    margin: 0.55rem 0 0;
    color: #617994;
    font-size: 0.75rem;
    font-weight: 600;
}

.services-catalog-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
}

.services-catalog-hero h1 {
    margin: 0;
    color: #0f1827;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(1.22rem, 1.5vw, 1.55rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.services-catalog-hero h1 span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d9dce3;
    background: #ffffff;
    color: #506177;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(13, 24, 39, 0.08);
}

.services-catalog-hero p {
    margin: 0.3rem 0 0;
    color: #6c7280;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
}

.services-catalog-hero p a {
    color: #5f56ff;
    font-weight: 700;
}

.services-catalog-top-actions {
    display: flex;
    align-items: center;
    gap: 0.56rem;
    flex-wrap: wrap;
}

.services-catalog-top .clients-pro-options summary,
.services-catalog-top .clients-pro-add-btn,
.services-catalog-top .clients-pro-options.clients-pro-add-dropdown summary {
    min-height: 46px;
    padding: 0.54rem 1.12rem;
    font-size: 0.95rem;
}

.services-catalog-top .clients-pro-options summary {
    border-color: #d7dbe3;
}

.services-catalog-menu {
    position: relative;
}

.services-catalog-menu summary::-webkit-details-marker,
.service-catalog-card-menu summary::-webkit-details-marker {
    display: none;
}

.services-catalog-pill,
.services-catalog-filter-pill,
.services-catalog-order-btn {
    min-height: 50px;
    border-radius: 999px;
    border: 1px solid #d1d4da;
    background: #ffffff;
    color: #171a20;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.18rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.services-catalog-pill-dark {
    border-color: #0d0d12;
    background: #09090d;
    color: #ffffff;
}

.services-catalog-filter-pill {
    min-height: 44px;
    padding: 0.56rem 1rem;
    font-size: 0.94rem;
}

.services-catalog-filter-pill-tight {
    min-height: 42px;
    padding: 0.52rem 0.95rem;
}

.services-catalog-pill-icon,
.services-catalog-search-icon,
.services-catalog-order-btn span[data-icon],
.services-catalog-menu-dropdown a span[data-icon],
.services-catalog-menu-dropdown button span[data-icon],
.services-catalog-menu-dropdown .appointment-resource-action-item span[data-icon],
.service-catalog-card-menu summary span[data-icon],
.services-category-color-chevron[data-icon],
.services-category-ai-icon[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-catalog-pill-icon[data-icon]::before,
.services-catalog-search-icon[data-icon]::before,
.services-catalog-order-btn span[data-icon]::before,
.services-catalog-menu-dropdown a span[data-icon]::before,
.services-catalog-menu-dropdown button span[data-icon]::before,
.services-catalog-menu-dropdown .appointment-resource-action-item span[data-icon]::before,
.service-catalog-card-menu summary span[data-icon]::before,
.services-category-color-chevron[data-icon]::before,
.services-category-ai-icon[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.15rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.services-catalog-menu-dropdown,
.service-catalog-card-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.42rem);
    left: 0;
    min-width: 248px;
    border-radius: 14px;
    border: 1px solid #d9dde5;
    background: #ffffff;
    box-shadow: 0 18px 32px rgba(19, 24, 34, 0.14);
    padding: 0.52rem;
    display: grid;
    gap: 0.18rem;
    z-index: 16;
}

.service-catalog-card-menu-dropdown {
    position: fixed;
    top: var(--service-card-menu-top, auto);
    left: var(--service-card-menu-left, auto);
    right: auto;
    z-index: 320;
}

.services-catalog-menu-dropdown-right {
    left: auto;
    right: 0;
}

.service-catalog-card-menu-dropdown {
    left: var(--service-card-menu-left, auto);
    right: auto;
}

.services-catalog-menu-dropdown a,
.services-catalog-menu-dropdown button,
.service-catalog-card-menu-dropdown a,
.service-catalog-card-menu-dropdown button {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #1d2431;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.58rem;
    padding: 0.58rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.services-catalog-menu-dropdown a:hover,
.services-catalog-menu-dropdown button:hover,
.service-catalog-card-menu-dropdown a:hover,
.service-catalog-card-menu-dropdown button:hover {
    background: #f2f4f8;
}

.service-catalog-card-menu-item.is-featured,
.service-catalog-card-menu-dropdown a.is-featured,
.service-catalog-card-menu-dropdown button.is-featured {
    box-shadow: none;
    background: #ffffff;
}

.service-catalog-card-menu-item.is-featured:hover,
.service-catalog-card-menu-dropdown a.is-featured:hover,
.service-catalog-card-menu-dropdown button.is-featured:hover {
    background: #f2f4f8;
}

.service-catalog-card-menu-divider {
    height: 1px;
    margin: 0.18rem 0 0.1rem;
    background: #eceef3;
}

.service-catalog-card-menu-dropdown button.is-danger,
.service-catalog-card-menu-dropdown a.is-danger {
    color: #e63f59;
}

.service-catalog-card-menu-dropdown button.is-danger:hover,
.service-catalog-card-menu-dropdown a.is-danger:hover {
    background: #fff0f4;
}

.services-catalog-menu-dropdown form,
.service-catalog-card-menu-dropdown form {
    margin: 0;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #1d2431;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.58rem;
    padding: 0.62rem 0.72rem;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item:hover {
    background: #f2f4f8;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item.is-disabled {
    color: #a1a8b6;
    cursor: default;
    pointer-events: none;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item.is-danger {
    color: #e63f59;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item.is-disabled.is-danger {
    color: #c9cdd8;
}

.appointment-resource-actions-sep {
    height: 1px;
    margin: 0.25rem 0;
    background: #eceef3;
}

.services-catalog-toolbar {
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    box-shadow: none;
}

.services-catalog-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.services-catalog-search-box {
    min-height: 44px;
    min-width: min(420px, 100%);
    max-width: 560px;
    flex: 1 1 560px;
    display: flex;
    align-items: center;
    gap: 0.58rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid #cfd4dd;
    background: #ffffff;
}

.services-catalog-search-box input[type='search'] {
    min-height: 38px;
    width: 100%;
    border: 0;
    background: transparent;
    color: #22242a;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0;
}

.services-catalog-search-box input[type='search']::placeholder {
    color: #a5a7ae;
}

.services-catalog-search-box input[type='search']:focus {
    box-shadow: none;
}

.services-catalog-order-btn {
    min-height: 44px;
    padding: 0.56rem 1rem;
    font-size: 0.95rem;
    margin-left: auto;
}

.services-catalog-toolbar .services-catalog-menu-inline {
    flex: 0 0 auto;
}

.services-catalog-centers-menu {
    flex: 0 0 auto;
}

.services-catalog-filter-pill-center {
    min-width: 220px;
    justify-content: space-between;
}

.services-catalog-filter-button {
    flex: 0 0 auto;
}

.services-catalog-filter-button.is-active {
    border-color: #101319;
    background: #101319;
    color: #ffffff;
}

.services-catalog-filter-button.is-active .services-catalog-pill-icon::before {
    color: #ffffff;
}

.services-catalog-toolbar .services-catalog-filter-pill,
.services-catalog-toolbar .services-catalog-order-btn {
    border-color: #d1d6de;
    gap: 0.5rem;
}

.services-catalog-menu-dropdown-centers {
    min-width: 220px;
}

.services-catalog-menu-dropdown a.is-active,
.services-catalog-menu-dropdown button.is-active {
    background: #eef2ff;
    color: #1a1f2b;
}

.services-filters-dialog {
    width: min(560px, calc(100vw - 2.6rem));
}

.services-catalog-grid {
    margin-top: 1.15rem;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.services-catalog-empty-panel {
    padding: 1rem 1.1rem;
}

.services-categories-panel {
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: 92px;
    box-shadow: none;
}

.services-categories-head {
    padding: 1.15rem 1.1rem 0.55rem;
}

.services-categories-head h2 {
    margin: 0;
    color: #181b21;
    font-size: 1.18rem;
    line-height: 1.2;
    font-weight: 800;
}

.services-categories-nav {
    padding: 0.4rem 0.75rem 0.72rem;
    display: grid;
    gap: 0.34rem;
}

.services-categories-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.5rem 0.86rem;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #1c212c;
    font-size: 0.88rem;
    font-weight: 700;
}

.services-categories-nav a:hover {
    border-color: #dde5f0;
    background: #f4f7fd;
}

.services-categories-nav a.is-active {
    border-color: #d9d7ef;
    background: #ebebf7;
}

.services-categories-nav a strong {
    min-width: 24px;
    min-height: 24px;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid #d8dce3;
    background: #f9fafb;
    color: #7b7e86;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-add-category-link {
    display: flex;
    width: calc(100% - 2.3rem);
    min-height: 46px;
    margin: 0 1.15rem 1.15rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0.82rem 1rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #5549bc;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.services-add-category-link:hover,
.services-add-category-link:active,
.services-add-category-link.is-active {
    background: #e5e9ef;
    border-color: #cbd1da;
    color: #181b21;
}

.services-add-category-link:focus-visible {
    outline: none;
    background: #e5e9ef;
    border-color: #bcc5d1;
    box-shadow: 0 0 0 3px rgba(152, 163, 180, 0.2);
}

.services-catalog-main {
    min-width: 0;
    display: grid;
    gap: 1.45rem;
}

.services-catalog-section {
    display: grid;
    gap: 0.6rem;
    isolation: isolate;
    position: relative;
    z-index: 0;
}

.services-catalog-section:has(.service-catalog-card-menu[open]),
.services-catalog-section:has(.services-catalog-menu[open]) {
    z-index: 90;
}

.services-categories-nav a[hidden],
.services-catalog-section[hidden],
.service-catalog-card[hidden],
.services-catalog-empty-panel[hidden] {
    display: none !important;
}

.services-catalog-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-catalog-section-head h2 {
    margin: 0;
    color: #1d2027;
    font-size: 1.22rem;
    font-weight: 800;
}

.services-catalog-list {
    display: grid;
    gap: 0.78rem;
    isolation: isolate;
}

.service-catalog-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.95rem;
    align-items: center;
    padding: 1rem 1.08rem;
    border: 1px solid #d8dce3;
    border-left: 8px solid var(--service-category-accent, #a7e1f7);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    position: relative;
    overflow: visible;
    z-index: 0;
}

.service-catalog-card.is-inactive {
    border-left-color: #d8dee6;
    background: #fbfcfe;
}

.service-catalog-card.is-inactive .service-catalog-main,
.service-catalog-card.is-inactive .service-catalog-price-wrap {
    opacity: 0.82;
}

.service-catalog-card.is-inactive .service-catalog-card-menu,
.service-catalog-card.is-inactive .service-catalog-card-menu-dropdown {
    opacity: 1;
}

.service-catalog-main {
    min-width: 0;
}

.service-catalog-main h3 {
    margin: 0;
    color: #171a20;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 700;
}

.service-catalog-main p {
    margin: 0.25rem 0 0;
    color: #597089;
    font-size: 0.86rem;
    line-height: 1.4;
}

.service-catalog-duration {
    display: inline-flex;
    margin-top: 0.32rem;
    color: #767982;
    font-size: 0.82rem;
    font-weight: 600;
}

.service-catalog-price-wrap {
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
}

.service-catalog-price {
    color: #22252b;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
}

.service-catalog-card-menu {
    position: relative;
}

.service-catalog-card-menu[open] {
    z-index: 60;
}

.service-catalog-card:has(.service-catalog-card-menu[open]) {
    z-index: 50;
}

.service-catalog-card-menu summary {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #23262d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
}

.service-catalog-card-menu summary:hover {
    background: #f1f3f6;
}

.services-form-top {
    align-items: flex-end;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.services-admin-grid {
    align-items: start;
}

.services-form-panel,
.services-list-panel {
    padding: 0;
    overflow: hidden;
}

.services-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #d7e2ef;
    background:
        linear-gradient(180deg, rgba(247, 251, 255, 0.96) 0%, rgba(238, 245, 253, 0.9) 100%);
}

.services-panel-kicker {
    margin: 0;
    color: #5f7691;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.71rem;
    font-weight: 700;
}

.services-panel-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.12rem;
    color: #132c48;
    line-height: 1.15;
}

.services-head-btn {
    min-height: 34px;
    padding-inline: 0.78rem;
    font-size: 0.82rem;
}

.services-panel-body {
    padding: 0.95rem 1rem 1rem;
}

.services-form .form-group label {
    color: #4f6580;
}

.service-form-preview {
    margin: 0.2rem 0 0;
    border: 1px solid #d2dfee;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 16px rgba(18, 38, 59, 0.08);
}

.service-form-preview img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.service-form-preview figcaption {
    margin: 0;
    padding: 0.5rem 0.68rem 0.55rem;
    color: #546a84;
    font-size: 0.78rem;
    font-weight: 600;
}

.services-portfolio-shell {
    display: grid;
    gap: 1rem;
}

.services-portfolio-dropzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 92px;
    padding: 1rem 1.1rem;
    border: 1px dashed #d9e3ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.services-portfolio-dropzone:hover,
.services-portfolio-dropzone.is-dragover {
    border-color: #8bcfdf;
    background: #f4fcfe;
    box-shadow: 0 0 0 4px rgba(38, 198, 214, 0.08);
}

.services-portfolio-dropzone-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.services-portfolio-dropzone-copy strong {
    color: #112235;
    font-size: 1rem;
    font-weight: 800;
}

.services-portfolio-dropzone-copy small {
    color: #61748c;
    font-size: 0.9rem;
    line-height: 1.45;
}

.services-portfolio-dropzone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #d2dce8;
    border-radius: 999px;
    background: #ffffff;
    color: #112235;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.services-portfolio-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: #65778e;
}

.services-portfolio-status {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #1d3047;
    font-size: 0.92rem;
    font-weight: 700;
}

.services-portfolio-status strong {
    font-size: 1rem;
    font-weight: 800;
}

.services-portfolio-meta small {
    color: #65778e;
    font-size: 0.82rem;
    line-height: 1.45;
}

.services-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.8rem;
}

.services-portfolio-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: visible;
    cursor: grab;
    transition: transform 0.18s ease;
}

.services-portfolio-item-media {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #eef3f8;
    box-shadow: inset 0 0 0 1px rgba(216, 224, 235, 0.9);
    transition: box-shadow 0.18s ease;
}

.services-portfolio-item:hover {
    transform: translateY(-2px);
}

.services-portfolio-item:hover .services-portfolio-item-media {
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(216, 224, 235, 0.9);
}

.services-portfolio-item.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.services-portfolio-item.is-drag-over {
    z-index: 3;
}

.services-portfolio-item.is-drag-over .services-portfolio-item-media {
    box-shadow: 0 0 0 3px rgba(38, 198, 214, 0.22), inset 0 0 0 1px rgba(216, 224, 235, 0.9);
}

.services-portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.services-portfolio-item-menu,
.services-portfolio-item-order,
.services-portfolio-item-badge {
    position: absolute;
    z-index: 2;
}

.services-portfolio-item-menu {
    top: 0.45rem;
    right: 0.45rem;
}

.services-portfolio-item-menu-trigger [data-icon],
.services-portfolio-item-menu-action [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-portfolio-item-menu-trigger [data-icon]::before,
.services-portfolio-item-menu-action [data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
}

.services-portfolio-item-menu-trigger {
    list-style: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #1c2f46;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.services-portfolio-item-menu-trigger::-webkit-details-marker {
    display: none;
}

.services-portfolio-item-menu:hover .services-portfolio-item-menu-trigger,
.services-portfolio-item-menu[open] .services-portfolio-item-menu-trigger {
    background: #ffffff;
}

.services-portfolio-item-menu-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 132px;
    padding: 0.4rem;
    border-radius: 14px;
    border: 1px solid #dfe5ee;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.services-portfolio-item-menu-action {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1c2f46;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.services-portfolio-item-menu-action:hover {
    background: #f7f9fc;
}

.services-portfolio-item-menu-action.is-danger {
    color: #ea3c53;
}

.services-portfolio-item-menu-action.is-danger:hover {
    background: #fff3f5;
}

.services-portfolio-item-badge {
    top: 0.55rem;
    left: 0.55rem;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: rgba(17, 34, 53, 0.82);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

.services-portfolio-item-order {
    right: 0.5rem;
    bottom: 0.5rem;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #13263a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.services-portfolio-empty {
    margin: 0;
    color: #66788f;
    font-size: 0.92rem;
}

.services-portfolio-cover-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #ffffff;
}

.services-portfolio-cover-copy {
    display: grid;
    gap: 0.18rem;
}

.services-portfolio-cover-copy strong {
    color: #122235;
    font-size: 0.98rem;
    font-weight: 800;
}

.services-portfolio-cover-copy p {
    margin: 0;
    color: #64778f;
    line-height: 1.5;
}

.service-toggle {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #2d4561;
    font-weight: 700;
}

.service-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.service-toggle-pill {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #c1d1e4;
    background: #e9f0f8;
    transition: all 0.2s ease;
}

.service-toggle-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(17, 35, 55, 0.22);
    transition: transform 0.2s ease;
}

.service-toggle input:checked + .service-toggle-pill {
    border-color: rgba(38, 198, 214, 0.62);
    background: linear-gradient(145deg, #2ac7dc 0%, #199bc5 100%);
}

.service-toggle input:checked + .service-toggle-pill::after {
    transform: translateX(20px);
}

.services-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-form-actions button {
    margin-left: auto;
}

.services-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c8d8ea;
    background: #f7fbff;
    color: #2c4765;
    font-size: 0.77rem;
    font-weight: 700;
}

.services-admin-list {
    display: grid;
    gap: 0.7rem;
}

.service-admin-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    border: 1px solid #d5e1ee;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.75rem;
    box-shadow: 0 8px 16px rgba(18, 38, 59, 0.06);
}

.service-admin-item.is-inactive {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border-color: #d8dee7;
}

.service-admin-main {
    display: flex;
    gap: 0.72rem;
    min-width: 0;
}

.service-admin-thumb {
    width: 86px;
    min-width: 86px;
    height: 86px;
    border-radius: 10px;
    border: 1px solid #cfdbeb;
    background: linear-gradient(145deg, #2ac8dd 0%, #168fbe 100%);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 14px rgba(14, 39, 61, 0.16);
}

.service-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-admin-thumb span {
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
}

.service-admin-copy {
    min-width: 0;
}

.service-admin-copy h3 {
    margin: 0;
    color: #132b47;
    font-size: 1.03rem;
    line-height: 1.2;
}

.service-admin-copy p {
    margin: 0.32rem 0 0;
    color: #5d718a;
    font-size: 0.88rem;
    line-height: 1.45;
}

.service-admin-copy .service-admin-alt {
    color: #3f5d7f;
    font-size: 0.82rem;
    font-weight: 700;
}

.service-admin-meta {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.service-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #cfdcec;
    background: #f8fbff;
    color: #365271;
    font-size: 0.76rem;
    font-weight: 700;
}

.service-chip-price {
    border-color: rgba(31, 198, 215, 0.4);
    background: rgba(31, 198, 215, 0.1);
    color: #0d5f73;
}

.service-chip-state {
    border-color: rgba(46, 177, 117, 0.34);
    background: rgba(70, 190, 126, 0.14);
    color: #216142;
}

.service-chip-state.is-inactive {
    border-color: rgba(188, 74, 74, 0.34);
    background: rgba(188, 74, 74, 0.11);
    color: #7d3333;
}

.service-admin-actions {
    display: grid;
    gap: 0.46rem;
    align-content: start;
    min-width: 132px;
}

.service-admin-actions form {
    margin: 0;
}

.service-admin-actions .btn,
.service-admin-actions button {
    width: 100%;
}

.services-editor-layout {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}

.services-editor-side {
    position: sticky;
    top: 5.4rem;
    padding: 0;
    overflow: hidden;
}

.services-editor-nav {
    display: grid;
    gap: 0.32rem;
    padding: 1rem;
    background: #ffffff;
}

.services-editor-nav a {
    min-height: 44px;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    color: #202c3f;
    font-size: 0.98rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.services-editor-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6ef;
}

.services-editor-nav a.is-active {
    background: #efedf9;
    border-color: #ddd8f7;
}

.services-editor-nav a strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dce4;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #70798b;
    font-size: 0.78rem;
}

.services-editor-nav-divider {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid #dfe5ee;
}

.services-editor-nav-group {
    margin: 0.2rem 0 0.1rem;
    color: #141f31;
    font-size: 1rem;
    font-weight: 800;
}

.services-editor-main {
    min-width: 0;
}

.services-editor-form {
    display: grid;
    gap: 1rem;
}

.services-editor-section {
    padding: 0;
    overflow: hidden;
    scroll-margin-top: 6rem;
}

.services-editor-layout.is-tabbed .services-editor-section[hidden] {
    display: none !important;
}

.services-editor-layout.is-tabbed .services-editor-section.is-active {
    display: block;
}

.services-editor-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #dfe5ee;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.97) 0%, rgba(239, 245, 252, 0.92) 100%);
}

.services-editor-section-head h2 {
    margin: 0;
    font-size: 1.24rem;
    color: #111b2b;
}

.services-editor-section-head p {
    margin: 0.26rem 0 0;
    color: #62758e;
    line-height: 1.5;
}

.services-editor-section-body {
    padding: 1rem 1.1rem 1.1rem;
}

.services-editor-two-cols,
.services-editor-pricing-grid,
.services-editor-addon-grid,
.services-editor-three-cols {
    display: grid;
    gap: 0.9rem;
}

.services-editor-two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-editor-pricing-grid,
.services-editor-addon-grid,
.services-editor-three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-editor-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
}

.services-editor-field-head span,
.services-editor-counter-field span[data-char-counter] {
    color: #758092;
    font-weight: 700;
}

.services-editor-hint {
    display: block;
    margin-top: 0.35rem;
    color: #6a778a;
    font-size: 0.82rem;
    line-height: 1.4;
}

.services-editor-textarea-shell {
    position: relative;
}

.services-editor-textarea-shell textarea {
    min-height: 170px;
    padding-bottom: 4.6rem;
}

.services-editor-ai-bar {
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.services-editor-price-input {
    min-height: 46px;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.9rem;
}

.services-editor-price-input span {
    color: #5d728b;
    font-weight: 800;
}

.services-editor-price-input input {
    border: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
    background: transparent;
}

.services-editor-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.services-editor-pill-btn {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #18253a;
    padding: 0.6rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.services-editor-pill-btn--green {
    border-color: #1ca66f;
    background: linear-gradient(180deg, #2dc78b 0%, #1ca66f 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(28, 166, 111, 0.18);
}

.services-editor-pill-btn--green:hover {
    border-color: #178a5d;
    background: linear-gradient(180deg, #27b77d 0%, #178a5d 100%);
    color: #ffffff;
}

.services-editor-pill-btn--green [data-icon]::before {
    color: inherit;
}

.services-editor-pill-btn [data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.services-editor-extra-time {
    margin-top: 0.9rem;
}

.services-editor-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.services-editor-team-card {
    border: 1px solid #d6e1ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.services-editor-team-card input {
    display: none;
}

.services-editor-team-card.is-selected {
    border-color: rgba(94, 106, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2ac8dd 0%, #168fbe 100%);
    color: #fff;
    font-weight: 800;
}

.services-editor-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-editor-team-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.services-editor-team-copy strong {
    color: #15283f;
}

.services-editor-team-copy small {
    color: #68788d;
}

.services-editor-resource-intro {
    border: 1px solid #d9e3f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
    padding: 1rem 1.05rem;
    margin-bottom: 0.9rem;
}

.services-editor-resource-intro strong {
    display: block;
    color: #17304d;
    margin-bottom: 0.3rem;
}

.services-editor-resource-intro p {
    margin: 0;
    color: #61748a;
    line-height: 1.55;
}

.services-editor-resource-list {
    display: grid;
    gap: 0.8rem;
}

.services-editor-resource-item {
    border: 1px solid #d6e1ef;
    border-radius: 16px;
    background: #fbfdff;
    padding: 0.9rem;
}

.services-editor-resource-grid,
.services-editor-addon-list {
    display: grid;
    gap: 0.8rem;
}

.services-editor-resource-grid {
    grid-template-columns: 1fr 1.4fr 120px;
}

.services-editor-addon-item {
    border: 1px solid #d6e1ef;
    border-radius: 14px;
    background: #fbfdff;
    padding: 0.9rem;
}

.services-editor-addon-remove {
    margin-top: 0.7rem;
    border: 0;
    background: transparent;
    color: #8d3f48;
    font-weight: 700;
    padding: 0;
}

.services-editor-resource-remove {
    margin-top: 0.7rem;
    border: 0;
    background: transparent;
    color: #8d3f48;
    font-weight: 700;
    padding: 0;
}

.services-editor-forms-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr) 48px;
    gap: 1rem;
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e4eaf1;
    color: #22344a;
    font-weight: 700;
}

.services-editor-form-list {
    display: grid;
}

.services-editor-form-item {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr) 48px;
    gap: 1rem;
    align-items: center;
    padding: 1.05rem 0.15rem;
    border-bottom: 1px solid #edf2f7;
}

.services-editor-form-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.services-editor-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid #d9e2ec;
    background: #fff;
    display: grid;
    place-items: center;
    color: #1d3047;
    flex-shrink: 0;
}

.services-editor-form-icon .material-symbols-outlined {
    font-size: 1.6rem;
}

.services-editor-form-copy {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.services-editor-form-title-input {
    border: 0;
    padding: 0;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #14283f;
    font-size: 1.03rem;
    font-weight: 700;
    box-shadow: none;
}

.services-editor-form-title-input:focus {
    outline: none;
    box-shadow: none;
}

.services-editor-form-status {
    color: #2f8d5a;
    font-weight: 700;
}

.services-editor-form-status.is-inactive {
    color: #b86a19;
}

.services-editor-form-policy select {
    min-height: 46px;
}

.services-editor-form-actions {
    position: relative;
}

.services-editor-form-actions summary {
    list-style: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #1e3148;
}

.services-editor-form-actions summary::-webkit-details-marker {
    display: none;
}

.services-editor-form-actions[open] summary,
.services-editor-form-actions summary:hover {
    background: #f2f5fa;
}

.services-editor-form-actions-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 220px;
    border-radius: 16px;
    border: 1px solid #d9e2ec;
    background: #fff;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
    padding: 0.45rem;
    display: grid;
    gap: 0.2rem;
    z-index: 25;
}

.services-editor-form-actions-menu button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    color: #18304a;
    font-weight: 600;
}

.services-editor-form-actions-menu button:hover {
    background: #f3f6fa;
}

.services-editor-day-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.services-editor-day-pill {
    min-height: 38px;
    border: 1px solid #d6e0ee;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    background: #fff;
    color: #213147;
    font-weight: 700;
}

.services-editor-day-pill input {
    display: none;
}

.services-editor-day-pill.is-selected,
.services-editor-day-pill:has(input:checked) {
    border-color: #c8c6f4;
    background: #efedf9;
}

.services-editor-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.4rem;
}

.services-editor-top {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 1.35rem 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(91, 192, 235, 0.18), transparent 26%),
        linear-gradient(135deg, #fbfcfe 0%, #f2f6fb 100%);
    border: 1px solid #dde6f1;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.services-editor-top .clients-pro-title-edit {
    font-size: clamp(2rem, 3.5vw, 2.85rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.services-editor-top .clients-pro-title-edit small {
    margin-top: 0.75rem;
    color: #61748c;
    font-size: 1rem;
    letter-spacing: 0;
}

.services-editor-top p {
    max-width: 68ch;
    color: #607287;
    font-size: 1rem;
    line-height: 1.65;
}

.services-editor-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}

.services-editor-side {
    position: sticky;
    top: 5.1rem;
    padding: 1.15rem;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background:
        radial-gradient(circle at top, rgba(68, 207, 255, 0.2), transparent 30%),
        linear-gradient(180deg, #0f1728 0%, #13203a 48%, #101827 100%);
    box-shadow: 0 28px 55px rgba(15, 23, 42, 0.18);
}

.services-editor-side-head {
    padding: 0.25rem 0.2rem 1rem;
    display: grid;
    gap: 0.42rem;
}

.services-editor-side-head span {
    color: #7dd3fc;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
}

.services-editor-side-head strong {
    color: #f8fbff;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.services-editor-side-head p {
    margin: 0;
    color: rgba(221, 230, 242, 0.78);
    line-height: 1.55;
    font-size: 0.92rem;
}

.services-editor-nav {
    counter-reset: editor-step;
    display: grid;
    gap: 0.42rem;
    padding: 0.4rem 0 0;
    background: transparent;
}

.services-editor-nav a {
    position: relative;
    min-height: 56px;
    border-radius: 18px;
    padding: 0.92rem 1rem 0.92rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: rgba(237, 243, 250, 0.88);
    font-size: 0.98rem;
    font-weight: 700;
    border: 1px solid rgba(164, 179, 205, 0.18);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.services-editor-nav a::before {
    counter-increment: editor-step;
    content: counter(editor-step, decimal-leading-zero);
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    color: #8dd3ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.services-editor-nav a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(171, 189, 214, 0.3);
}

.services-editor-nav a.is-active {
    background: linear-gradient(135deg, #f9fbff 0%, #ecf4ff 100%);
    border-color: rgba(141, 180, 255, 0.44);
    color: #16283d;
    box-shadow: 0 16px 28px rgba(7, 15, 31, 0.18);
}

.services-editor-nav a.is-active::before {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: #fff;
}

.services-editor-nav a strong {
    min-width: 26px;
    height: 26px;
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(164, 179, 205, 0.35);
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
}

.services-editor-nav a.is-active strong {
    border-color: #d2dff0;
    background: #fff;
    color: #5b6d82;
}

.services-editor-nav-divider {
    margin: 0.7rem 0 0.35rem;
    border: 0;
    border-top: 1px solid rgba(169, 181, 199, 0.16);
}

.services-editor-nav-group {
    margin: 0.15rem 0 0.2rem;
    color: rgba(212, 225, 242, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.73rem;
    font-weight: 800;
}

.services-editor-main {
    min-width: 0;
    display: grid;
    gap: 1rem;
}

.services-editor-form {
    display: grid;
    gap: 1.15rem;
}

.services-editor-overview {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(74, 222, 255, 0.2), transparent 30%),
        linear-gradient(135deg, #11213d 0%, #173257 54%, #123456 100%);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
}

.services-editor-overview-copy {
    display: grid;
    gap: 0.35rem;
}

.services-editor-overline {
    color: #8dd3ff;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.73rem;
    font-weight: 800;
}

.services-editor-overview h2 {
    margin: 0;
    color: #f6f9fd;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    letter-spacing: -0.04em;
}

.services-editor-overview p {
    margin: 0;
    color: rgba(224, 233, 244, 0.82);
    max-width: 58ch;
    line-height: 1.6;
}

.services-editor-overview-meta {
    min-width: 170px;
    display: grid;
    gap: 0.7rem;
    justify-items: end;
}

.services-editor-overview-meta strong {
    color: #f8fbff;
    font-size: 0.98rem;
}

.services-editor-overview-track {
    width: min(220px, 100%);
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.services-editor-overview-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #67e8f9 0%, #60a5fa 100%);
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.45);
}

.services-editor-section {
    padding: 0;
    overflow: hidden;
    scroll-margin-top: 6rem;
    border-radius: 28px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.services-editor-layout.is-tabbed .services-editor-section.is-active {
    display: block;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.09);
}

.services-editor-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.35rem 1.1rem;
    border-bottom: 1px solid #e5ebf3;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(241, 246, 252, 0.94) 100%);
}

.services-editor-section-head h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #122235;
    letter-spacing: -0.035em;
}

.services-editor-section-head p {
    margin: 0.34rem 0 0;
    color: #607287;
    line-height: 1.62;
    max-width: 62ch;
}

.services-editor-section-head p a {
    color: #2563eb;
    font-weight: 700;
}

.services-editor-section-body {
    padding: 1.3rem 1.35rem 1.4rem;
}

.services-editor-form .form-group > label,
.services-editor-form .services-editor-counter-field label,
.services-editor-form .services-editor-field-head label {
    display: block;
    margin-bottom: 0.45rem;
    color: #213449;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']),
.services-editor-form select,
.services-editor-form textarea {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid #d3deeb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #112338;
    padding: 0.9rem 1rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.services-editor-form textarea {
    min-height: 132px;
    resize: vertical;
}

.services-editor-form input[type='file'] {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px dashed #b8c8da;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #213449;
    padding: 0.8rem 0.95rem;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']):focus,
.services-editor-form select:focus,
.services-editor-form textarea:focus,
.services-editor-form input[type='file']:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
    background: #ffffff;
}

.services-editor-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.services-editor-field-head span,
.services-editor-counter-field span[data-char-counter] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: #eef4fb;
    color: #5f738c;
    font-weight: 800;
    font-size: 0.8rem;
}

.services-editor-hint {
    display: block;
    margin-top: 0.48rem;
    color: #6b7b8f;
    font-size: 0.84rem;
    line-height: 1.5;
}

.services-editor-textarea-shell textarea {
    min-height: 190px;
    padding-bottom: 4.9rem;
}

.services-editor-ai-bar {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-editor-price-input {
    min-height: 54px;
    border: 1px solid #d3deeb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1rem;
}

.services-editor-price-input span {
    color: #536881;
    font-weight: 800;
}

.services-editor-price-input input {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
}

.services-editor-pill-btn {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #cfdbeb;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    color: #18304b;
    padding: 0.62rem 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.services-editor-pill-btn:hover {
    transform: translateY(-1px);
    border-color: #adc5e5;
    box-shadow: 0 14px 24px rgba(148, 163, 184, 0.16);
}

.services-editor-extra-time {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid #e1e8f2;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
}

.services-editor-team-card,
.services-editor-resource-item,
.services-editor-addon-item {
    border-radius: 18px;
    border: 1px solid #d7e2ef;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.services-editor-team-card:hover,
.services-editor-resource-item:hover,
.services-editor-addon-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}

.services-editor-team-card {
    padding: 0.95rem;
}

.services-editor-team-card.is-selected {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12), 0 18px 34px rgba(15, 23, 42, 0.07);
}

.services-editor-team-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.services-editor-resource-intro {
    border: 1px solid #d6e2f0;
    border-radius: 20px;
    background: linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%);
    padding: 1.05rem 1.1rem;
    margin-bottom: 1rem;
}

.services-editor-addon-remove,
.services-editor-resource-remove {
    margin-top: 0.9rem;
    border: 0;
    background: transparent;
    color: #9a4c57;
    font-weight: 800;
    padding: 0;
}

.services-editor-forms-head {
    padding: 0 0.2rem 0.95rem;
    border-bottom: 1px solid #e5ebf3;
    color: #34495f;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.services-editor-form-item {
    padding: 1.15rem 0.2rem;
}

.services-editor-form-icon {
    border-radius: 16px;
    border: 1px solid #d7e1ec;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.services-editor-form-title-input {
    color: #13263d;
    font-size: 1.05rem;
    font-weight: 800;
}

.services-editor-form-status {
    color: #2f8d5a;
    font-size: 0.85rem;
    font-weight: 800;
}

.services-editor-form-policy select {
    min-height: 50px;
}

.services-editor-form-actions summary {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.services-editor-form-actions[open] summary,
.services-editor-form-actions summary:hover {
    background: #edf3fa;
}

.services-editor-day-pill {
    min-height: 42px;
    border: 1px solid #d4dfec;
    padding: 0.52rem 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #1c3149;
    font-weight: 800;
}

.services-editor-day-pill.is-selected,
.services-editor-day-pill:has(input:checked) {
    border-color: rgba(59, 130, 246, 0.35);
    background: linear-gradient(180deg, #eef5ff 0%, #e8f1ff 100%);
    color: #0f3b74;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.services-editor-footer {
    position: sticky;
    bottom: 0.85rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    border-radius: 22px;
    border: 1px solid rgba(214, 224, 235, 0.9);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.services-editor-footer .btn,
.services-editor-footer button[type='submit'] {
    min-height: 48px;
    border-radius: 16px;
    padding-inline: 1.2rem;
    font-weight: 800;
}

@media (max-width: 1320px) {
    .services-editor-layout {
        grid-template-columns: 1fr;
    }

    .services-editor-side {
        position: static;
    }

    .services-editor-overview {
        align-items: start;
    }
}

@media (max-width: 980px) {
    .services-editor-top {
        padding: 1.1rem 1.15rem;
    }

    .services-editor-side {
        padding: 1rem;
    }

    .services-editor-overview {
        flex-direction: column;
        align-items: stretch;
    }

    .services-editor-overview-meta {
        justify-items: stretch;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .services-editor-top .clients-pro-actions,
    .services-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .services-editor-top .clients-pro-actions .btn,
    .services-editor-footer .btn,
    .services-editor-footer button[type='submit'] {
        width: 100%;
    }
}

/* Compact restore for services editor */
.services-editor-top {
    position: static;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0.12rem 0 0.72rem;
}

.services-editor-top .clients-pro-title-edit {
    font-size: clamp(1.22rem, 1.5vw, 1.55rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.services-editor-top .clients-pro-title-edit small {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.84rem;
}

.services-editor-top p {
    max-width: 64ch;
    margin-top: 0.18rem;
    color: #6c7280;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
}

.services-editor-layout {
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 1.15rem;
}

.services-editor-side {
    position: sticky;
    top: 5.4rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: none;
}

.services-editor-side-head,
.services-editor-overview {
    display: none !important;
}

.services-editor-nav {
    counter-reset: none;
    gap: 0.32rem;
    padding: 1rem;
    background: #ffffff;
}

.services-editor-nav a {
    min-height: 44px;
    border-radius: 12px;
    padding: 0.72rem 0.9rem;
    color: #202c3f;
    font-size: 0.92rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.services-editor-nav a::before {
    display: none;
}

.services-editor-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6ef;
    transform: none;
}

.services-editor-nav a.is-active {
    background: #efedf9;
    border-color: #ddd8f7;
    color: #202c3f;
    box-shadow: none;
}

.services-editor-nav a.has-error {
    position: relative;
    border-color: rgba(225, 29, 72, 0.18);
}

.services-editor-nav a.has-error::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.85rem;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
    transform: translateY(-50%);
}

.services-editor-nav a strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dce4;
    background: #fff;
    color: #70798b;
    font-size: 0.76rem;
}

.services-editor-nav-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #dfe5ee;
}

.services-editor-nav-group {
    margin: 0.2rem 0 0.1rem;
    color: #141f31;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.98rem;
    font-weight: 800;
}

.services-editor-main {
    gap: 0;
}

.services-editor-form {
    gap: 1rem;
}

.services-editor-section {
    border-radius: 22px;
    border: 1px solid #dbe3ed;
    background: #fff;
    box-shadow: none;
}

.services-editor-layout.is-tabbed .services-editor-section.is-active {
    box-shadow: none;
}

.services-editor-section-head {
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #dfe5ee;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.97) 0%, rgba(239, 245, 252, 0.92) 100%);
}

.services-editor-section-head h2 {
    font-size: 1.2rem;
    color: #111b2b;
}

.services-editor-section-head p {
    margin: 0.26rem 0 0;
    color: #62758e;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: none;
}

.services-editor-section-head p a {
    color: #4f46e5;
}

.services-editor-section-body {
    padding: 1rem 1.1rem 1.1rem;
}

.services-editor-form .form-group > label,
.services-editor-form .services-editor-counter-field label,
.services-editor-form .services-editor-field-head label {
    margin-bottom: 0.12rem;
    color: #223247;
    font-weight: 700;
    font-size: 0.94rem;
    text-transform: none;
    letter-spacing: 0;
}

.services-editor-form .form-group {
    margin-bottom: 0.18rem;
}

.services-editor-form .form-group.is-invalid > label,
.services-editor-form .services-editor-counter-field.is-invalid .services-editor-field-head label {
    color: #b42318;
}

.services-editor-two-cols,
.services-editor-pricing-grid,
.services-editor-addon-grid,
.services-editor-three-cols {
    gap: 1.05rem;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']),
.services-editor-form select,
.services-editor-form textarea {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #112338;
    font-size: 0.94rem;
    padding: 0.78rem 0.9rem;
    box-shadow: none;
}

.services-editor-form textarea {
    min-height: 120px;
}

.services-editor-form input[type='file'] {
    min-height: 46px;
    border-radius: 12px;
    border: 1px dashed #cfd8e7;
    background: #fff;
    font-size: 0.9rem;
    padding: 0.72rem 0.85rem;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']):focus,
.services-editor-form select:focus,
.services-editor-form textarea:focus,
.services-editor-form input[type='file']:focus {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-field-head {
    gap: 0.7rem;
    margin-bottom: 0.12rem;
}

.services-editor-section-body > .mt-1,
.services-editor-section-body .form-group.mt-1 {
    margin-top: 0.82rem;
}

#service-basic .services-editor-two-cols.mt-1 {
    margin-top: 1.18rem;
}

#service-basic .services-editor-counter-field.mt-1 {
    margin-top: 1.18rem;
}

.services-editor-subsection {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e1e7f0;
}

.services-editor-subsection-head {
    margin-bottom: 1rem;
}

.services-editor-subsection-head h2 {
    margin: 0;
    color: #111b2b;
    font-size: 1.2rem;
    font-weight: 800;
}

.services-editor-subsection-head p {
    margin: 0.25rem 0 0;
    color: #62758e;
    font-size: 0.9rem;
    line-height: 1.45;
}

.services-editor-field-head span,
.services-editor-counter-field span[data-char-counter] {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #758092;
    font-weight: 700;
    font-size: 0.82rem;
}

.services-editor-hint {
    margin-top: 0.45rem;
    color: #6a778a;
    font-size: 0.8rem;
    line-height: 1.4;
}

.services-editor-field-error {
    display: block;
    margin-top: 0.32rem;
    color: #e11d48;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
}

.services-editor-form .form-group.is-invalid input:not([type='checkbox']):not([type='hidden']):not([type='file']),
.services-editor-form .form-group.is-invalid select,
.services-editor-form .form-group.is-invalid textarea,
.services-editor-price-input.is-invalid {
    border-color: #f04438;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.09);
}

.services-editor-textarea-shell textarea {
    min-height: 170px;
    padding-bottom: 4.6rem;
}

.services-editor-ai-bar {
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.85rem;
    gap: 0.7rem;
}

.services-editor-price-input {
    min-height: 46px;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    gap: 0.7rem;
    padding: 0 0.9rem;
}

.services-editor-price-input span {
    color: #5d728b;
    font-size: 0.92rem;
    font-weight: 800;
}

.services-editor-pill-btn {
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #18253a;
    padding: 0.58rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

.services-editor-pill-btn:hover {
    transform: none;
    border-color: #cfd8e7;
    box-shadow: none;
}

.services-editor-extra-time {
    margin-top: 0.9rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.services-editor-center-shell {
    display: grid;
    gap: 1rem;
    max-width: none;
}

.services-editor-center-shell.is-invalid .services-editor-center-all,
.services-editor-center-shell.is-invalid .services-editor-center-card {
    box-shadow: inset 0 0 0 1px rgba(240, 68, 56, 0.48);
}

.services-editor-center-all,
.services-editor-center-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid #d6e1ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.services-editor-center-all {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
}

.services-editor-center-card {
    grid-template-columns: auto 52px minmax(0, 1fr);
}

.services-editor-center-all input,
.services-editor-center-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-editor-center-check {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #cdd7e4;
    background: #fff;
    color: #6d5ef6;
    display: grid;
    place-items: center;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.services-editor-center-check::before {
    content: "check";
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 650, 'GRAD' 0, 'opsz' 20;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 160ms ease, transform 160ms ease;
}

.services-editor-center-all.is-selected .services-editor-center-check,
.services-editor-center-card.is-selected .services-editor-center-check,
.services-editor-center-all.is-partial .services-editor-center-check {
    border-color: rgba(109, 94, 246, 0.65);
    background: #fff;
    color: #6d5ef6;
    box-shadow: none;
}

.services-editor-center-all.is-partial .services-editor-center-check {
    background: #fff;
}

.services-editor-center-all.is-selected .services-editor-center-check::before,
.services-editor-center-card.is-selected .services-editor-center-check::before,
.services-editor-center-all.is-partial .services-editor-center-check::before {
    opacity: 1;
    transform: scale(1);
}

.services-editor-center-all.is-selected,
.services-editor-center-card.is-selected {
    border-color: rgba(94, 106, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-center-all.is-selected,
.services-editor-center-all.is-partial {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.services-editor-center-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f1efff 0%, #ece8ff 100%);
    color: #6d5ef6;
}

.services-editor-center-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-editor-center-avatar [data-icon] {
    font-size: 1.35rem;
}

.services-editor-center-copy {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
    justify-content: start;
}

.services-editor-center-copy strong {
    color: #142033;
    font-size: 0.95rem;
    font-weight: 700;
}

.services-editor-center-copy small {
    color: #65758b;
    font-size: 0.8rem;
    line-height: 1.34;
}

.services-editor-center-all-main {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    justify-content: flex-start;
}

.services-editor-center-all-main strong {
    color: #111b2b;
    font-size: 0.95rem;
    font-weight: 700;
}

.services-editor-center-total {
    min-width: 22px;
    height: 22px;
    padding: 0 0.28rem;
    border-radius: 999px;
    border: 1px solid #d8dce4;
    background: #fff;
    color: #70798b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    width: auto !important;
    max-width: 28px;
    justify-self: start;
    flex: 0 0 auto;
}

.services-editor-center-grid {
    display: grid;
    gap: 0.8rem;
}

.services-editor-center-all:hover,
.services-editor-center-card:hover {
    opacity: 0.92;
}

.services-editor-section-centers .services-editor-center-all,
.services-editor-section-centers .services-editor-center-card {
    max-width: none;
}

.services-editor-team-grid {
    gap: 0.8rem;
}

.services-editor-team-card,
.services-editor-resource-item,
.services-editor-addon-item {
    border-radius: 14px;
    border: 1px solid #d6e1ef;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: none;
    transform: none;
}

.services-editor-team-card:hover,
.services-editor-resource-item:hover,
.services-editor-addon-item:hover {
    transform: none;
    box-shadow: none;
}

.services-editor-team-card {
    padding: 0.85rem;
}

.services-editor-team-card.is-selected {
    border-color: rgba(94, 106, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.services-editor-team-copy strong {
    font-size: 0.95rem;
}

.services-editor-team-copy small {
    font-size: 0.84rem;
}

.services-resource-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.1rem;
}

.services-resource-search-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: min(320px, 100%);
}

.services-resource-search-shell input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d3dbe7;
    border-radius: 999px;
    background: #ffffff;
    padding: 0 1rem 0 2.65rem;
    color: #172436;
    font: inherit;
}

.services-resource-search-shell span[data-icon] {
    position: absolute;
    left: 0.9rem;
    color: #55667c;
    pointer-events: none;
}

.services-resource-search-shell span[data-icon]::before,
.services-resource-pill-icon span[data-icon]::before,
.services-resource-actions summary [data-icon]::before,
.services-resource-action span[data-icon]::before,
.services-resource-type-icon span[data-icon]::before,
.services-resource-specific-check[data-icon]::before,
.services-resource-specific-icon span[data-icon]::before,
.services-resource-center-avatar span[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.15rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
}

.services-resource-center-list {
    display: grid;
    gap: 1rem;
    overflow: visible;
}

.services-resource-center-row {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem 0 1rem;
    border-bottom: 1px solid #e4eaf2;
    overflow: visible;
}

.services-resource-center-row:last-child {
    border-bottom: 0;
}

.services-resource-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.services-resource-center-ident {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.services-resource-center-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f1efff 0%, #ece8ff 100%);
    color: #6d5ef6;
}

.services-resource-center-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-resource-center-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.services-resource-center-copy strong {
    color: #152335;
    font-size: 0.98rem;
    font-weight: 800;
}

.services-resource-center-copy small {
    color: #6e7a8b;
    font-size: 0.88rem;
    line-height: 1.4;
}

.services-resource-center-empty {
    margin: -0.15rem 0 0 calc(52px + 0.85rem);
    color: #768296;
    font-size: 0.88rem;
}

.services-resource-pill-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-left: calc(52px + 0.85rem);
}

.services-resource-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    border: 1px solid #d5dde7;
    border-radius: 999px;
    background: #ffffff;
    padding: 0.4rem 0.8rem;
    color: #1b2a3d;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.services-resource-pill:hover {
    border-color: #bfcbd9;
    background: #f8fbff;
}

.services-resource-pill-icon {
    color: #8b6b17;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-resource-actions {
    position: relative;
    flex: 0 0 auto;
    z-index: 1;
}

.services-resource-actions[open] {
    z-index: 30;
}

.services-resource-actions summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid #d3dbe7;
    border-radius: 999px;
    background: #ffffff;
    color: #172436;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.services-resource-actions summary::-webkit-details-marker {
    display: none;
}

.services-resource-actions summary:hover,
.services-resource-actions[open] summary {
    border-color: #c7d0dc;
    background: #fafcff;
}

.services-resource-actions-chevron {
    color: #5f6f84;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-resource-actions[open] .services-resource-actions-chevron {
    transform: rotate(180deg);
}

.services-resource-actions-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 20;
    min-width: 230px;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem;
    border: 1px solid #d8dfeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(18, 28, 43, 0.14);
}

#service-resources {
    overflow: visible;
}

#service-resources .services-editor-section-body {
    overflow: visible;
}

#service-resources .services-resource-center-row:last-child .services-resource-actions-menu {
    top: auto;
    bottom: calc(100% + 0.65rem);
}

.services-resource-action {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    padding: 0.7rem 0.8rem;
    color: #162437;
    font: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.services-resource-action:hover {
    background: #f4f6fb;
}

.services-resource-action.is-danger {
    color: #d93a58;
}

.services-resource-action.is-danger:hover {
    background: #fff3f5;
}

.services-resource-action.is-disabled,
.services-resource-action:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.services-resource-empty-state {
    margin: 0;
    color: #6e7a8b;
    font-size: 0.92rem;
}

.services-resource-empty-state.is-inline {
    display: grid;
    place-items: center;
    min-height: 120px;
    border: 1px dashed #d6dfea;
    border-radius: 18px;
    background: #fbfcff;
}

.services-resource-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(4px);
}

.services-resource-modal-backdrop[hidden] {
    display: none;
}

.services-resource-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.5rem;
}

.services-resource-modal-head h2 {
    margin: 0;
    color: #111924;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.services-resource-modal-head p {
    margin: 0.8rem 0 0;
    color: #687486;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 720px;
}

.services-resource-modal-actions-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.services-resource-modal-actions-top .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.services-resource-modal {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: none;
}

.services-resource-modal .services-resource-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 1.2rem 3rem 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
}

.services-resource-modal .services-resource-modal-head > div:first-child,
.services-resource-modal .services-resource-modal-body {
    width: min(980px, 100%);
    margin: 0 auto;
}

.services-resource-modal .services-resource-modal-head > div:first-child {
    padding-top: 3rem;
}

.services-resource-modal .services-resource-modal-actions-top {
    padding-top: 0.25rem;
}

.services-resource-copy-modal {
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 26, 41, 0.18);
}

.services-resource-copy-modal .services-resource-modal-head {
    padding: 2rem 2rem 1rem;
}

.services-resource-modal-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 3rem 2.25rem;
}

.services-resource-modal .services-resource-modal-body .form-group,
.services-resource-modal .services-resource-type-list,
.services-resource-modal .services-resource-choice-list,
.services-resource-modal .services-resource-specific-shell {
    width: min(760px, 100%);
}

.services-resource-type-list {
    display: grid;
    gap: 0.8rem;
}

.services-resource-type-list[hidden] {
    display: none;
}

.services-resource-type-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    width: 100%;
    min-height: 78px;
    border: 1px solid #dbe2ec;
    border-radius: 18px;
    background: #ffffff;
    padding: 0.85rem 0.95rem;
    text-align: left;
    cursor: pointer;
}

.services-resource-type-card:hover {
    border-color: #cdd8e5;
    background: #fbfcff;
}

.services-resource-type-card.is-selected {
    border-color: rgba(109, 94, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(109, 94, 246, 0.1);
}

.services-resource-type-icon,
.services-resource-specific-icon {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--resource-accent, #efe9ff) 18%, #ffffff);
    color: color-mix(in srgb, var(--resource-accent, #6d5ef6) 60%, #513fe1);
}

.services-resource-type-icon {
    width: 54px;
    height: 54px;
}

.services-resource-type-copy,
.services-resource-specific-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.services-resource-type-copy strong,
.services-resource-specific-copy strong {
    color: #152335;
    font-size: 1rem;
    font-weight: 800;
}

.services-resource-type-copy small,
.services-resource-specific-copy small {
    color: #6d7888;
    font-size: 0.9rem;
    line-height: 1.45;
}

.services-resource-type-copy small.is-warning {
    color: #b9631f;
}

.services-resource-choice-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.15rem;
}

.services-resource-choice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    cursor: pointer;
}

.services-resource-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-resource-choice-radio {
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
    border-radius: 999px;
    border: 1.5px solid #d1d8e3;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.services-resource-choice input:checked + .services-resource-choice-radio {
    border-color: #6d5ef6;
    background: radial-gradient(circle at center, #6d5ef6 0 5px, #ffffff 6px 100%);
    box-shadow: 0 0 0 4px rgba(109, 94, 246, 0.1);
}

.services-resource-choice-copy {
    display: grid;
    gap: 0.1rem;
}

.services-resource-choice-copy strong {
    color: #162437;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-resource-choice-copy small {
    color: #6b7789;
    font-size: 0.88rem;
    line-height: 1.35;
}

.services-resource-specific-shell {
    display: grid;
    gap: 0.65rem;
}

.services-resource-specific-list,
.services-resource-copy-list {
    display: grid;
    gap: 0.65rem;
}

.services-resource-specific-card,
.services-resource-copy-item {
    display: grid;
    grid-template-columns: 24px 40px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 60px;
    border: 1px solid #dbe2ec;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.7rem 0.85rem;
    text-align: left;
    cursor: pointer;
}

.services-resource-specific-card:hover,
.services-resource-copy-item:hover {
    border-color: #cdd8e5;
    background: #fbfcff;
}

.services-resource-specific-card.is-selected,
.services-resource-copy-item:has(input:checked) {
    border-color: rgba(109, 94, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(109, 94, 246, 0.1);
}

.services-resource-specific-card[data-service-resource-option-card] {
    cursor: pointer;
}

.services-resource-specific-check {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid #d0d9e6;
    background: #ffffff;
    color: transparent;
    display: grid;
    place-items: center;
}

.services-resource-specific-card.is-selected .services-resource-specific-check,
.services-resource-copy-item:has(input:checked) .services-editor-center-check {
    border-color: #6d5ef6;
    background: #6d5ef6;
    color: #ffffff;
}

.services-resource-specific-check::before {
    opacity: 0;
}

.services-resource-specific-card.is-selected .services-resource-specific-check::before {
    opacity: 1;
}

.services-resource-specific-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.services-resource-copy-item {
    grid-template-columns: 24px 52px minmax(0, 1fr);
}

.services-resource-copy-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-resource-modal-empty {
    margin: 0;
    color: #6e7a8b;
    font-size: 0.92rem;
}

.services-resource-modal .services-resource-modal-empty {
    min-height: 40px;
    display: grid;
    align-items: center;
}

.services-editor-addon-item {
    padding: 0.9rem;
}

.services-editor-addon-remove {
    margin-top: 0.7rem;
    color: #8d3f48;
    font-size: 0.88rem;
    font-weight: 700;
}

@media (max-width: 820px) {
    .services-portfolio-dropzone,
    .services-portfolio-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .services-portfolio-dropzone-btn {
        width: 100%;
    }

    .services-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-online-booking-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .services-online-booking-toggle {
        justify-content: space-between;
    }

    .services-online-booking-fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-commissions-hero,
    .services-commissions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .services-commissions-search {
        max-width: none;
    }

    .services-commissions-filter summary {
        width: 100%;
        justify-content: center;
    }

    .services-commissions-head {
        display: none;
    }

    .services-commissions-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .services-commissions-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-settings-advanced-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-settings-tax-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-settings-cost-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-settings-type-toggle {
        width: 100%;
    }

    .services-tax-modal-backdrop {
        padding: 1rem;
    }

    .services-tax-modal {
        width: min(100%, 520px);
        padding: 1.1rem 1rem;
    }

    .services-tax-modal-head {
        gap: 0.8rem;
    }

    .services-tax-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .services-tax-modal-actions .btn {
        width: 100%;
    }

    .services-settings-inline-panel,
    .services-settings-inline-fields {
        margin-left: 0;
    }

    .services-settings-inline-fields,
    .services-settings-cost-row,
    .services-settings-secondary-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .services-settings-advanced-grid {
        max-width: none;
    }

    .services-settings-tax-actions {
        max-width: none;
    }

    .services-resource-center-head {
        flex-direction: column;
        align-items: stretch;
    }

    .services-resource-pill-list {
        margin-left: 0;
    }

    .services-resource-modal-backdrop {
        padding: 0;
    }

    .services-resource-modal-head {
        flex-direction: column;
        align-items: stretch;
    }

    .services-resource-modal-actions-top {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .services-resource-modal .services-resource-modal-head,
    .services-resource-modal .services-resource-modal-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .services-resource-modal .services-resource-modal-head > div:first-child {
        padding-top: 1.25rem;
    }
}

.services-editor-forms-head {
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e4eaf1;
    color: #22344a;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.services-editor-form-item {
    padding: 1.05rem 0.15rem;
}

.services-editor-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid #d9e2ec;
    background: #fff;
}

.services-editor-form-title-input {
    color: #14283f;
    font-size: 0.98rem;
    font-weight: 700;
}

.services-editor-form-status {
    font-size: 0.83rem;
}

.services-editor-form-policy select {
    min-height: 46px;
}

.services-editor-form-actions summary {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.services-editor-form-actions[open] summary,
.services-editor-form-actions summary:hover {
    background: #f2f5fa;
}

.services-editor-day-pill {
    min-height: 38px;
    border: 1px solid #d6e0ee;
    padding: 0.45rem 0.8rem;
    background: #fff;
    color: #213147;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: none;
}

.services-editor-day-pill.is-selected,
.services-editor-day-pill:has(input:checked) {
    border-color: #c8c6f4;
    background: #efedf9;
    color: #213147;
}

.services-editor-footer {
    position: static;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.services-editor-footer .btn,
.services-editor-footer button[type='submit'] {
    min-height: 44px;
    border-radius: 14px;
    padding-inline: 1rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.services-editor-footer .services-editor-submit-btn {
    border: 1px solid #16a34a;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(34, 197, 94, 0.22);
}

.services-editor-footer .services-editor-submit-btn:hover,
.services-editor-footer .services-editor-submit-btn:focus-visible {
    border-color: #15803d;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(21, 128, 61, 0.28);
}

@media (max-width: 1320px) {
    .services-editor-layout {
        grid-template-columns: 1fr;
    }

    .services-editor-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .services-editor-top .clients-pro-actions,
    .services-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .services-editor-top .clients-pro-actions .btn,
    .services-editor-footer .btn,
    .services-editor-footer button[type='submit'] {
        width: 100%;
    }
}

.services-order-panel,
.services-settings-panel,
.services-settings-side {
    padding: 0;
    overflow: hidden;
}

.services-order-workspace {
    min-height: 100vh;
    background: #ffffff;
}

.services-order-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #edf1f6;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.services-order-topbar-spacer {
    min-width: 1px;
    min-height: 1px;
    flex: 1 1 auto;
}

.services-order-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
}

.services-order-shell {
    width: min(1240px, calc(100% - 4rem));
    margin: 0 auto;
    padding: 2.75rem 0 4rem;
}

.services-order-hero {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.services-order-hero h1 {
    margin: 0;
    color: #10151d;
    font-size: clamp(2.35rem, 4vw, 3.5rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.services-order-hero p {
    width: min(720px, 100%);
    margin: 0;
    color: #66707d;
    font-size: 1.04rem;
    line-height: 1.55;
}

.services-order-mode-field {
    width: fit-content;
}

.services-order-mode-field select {
    min-height: 52px;
    min-width: 240px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    background: #ffffff;
    color: #191f27;
    padding: 0 1rem;
    font: inherit;
    font-weight: 700;
}

.services-order-form {
    display: grid;
    gap: 1rem;
}

.services-order-groups {
    display: grid;
    gap: 1rem;
}

.services-order-group {
    margin: 0;
    padding: 1.3rem 1.45rem 1.45rem;
    border: 1px solid #d9e1eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(17, 29, 46, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.services-order-group.is-dragging {
    opacity: 0.6;
    transform: scale(0.995);
}

.services-order-group.is-drop-target {
    border-color: #85d9ff;
    box-shadow: 0 0 0 3px rgba(133, 217, 255, 0.24), 0 18px 44px rgba(17, 29, 46, 0.08);
}

.services-order-group.has-service-drop {
    border-color: #cfe3f3;
}

.services-order-group-head {
    margin-bottom: 0.95rem;
}

.services-order-group-title {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.services-order-group-title h2 {
    margin: 0;
    color: #131a23;
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 800;
}

.services-order-group-title p {
    margin: 0.22rem 0 0;
    color: #6d7581;
    font-size: 0.9rem;
}

.services-order-handle {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #717b88;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: grab;
}

.services-order-handle:active {
    cursor: grabbing;
}

.services-order-handle:hover,
.services-order-handle:focus-visible {
    background: #f4f7fb;
    color: #222c37;
    outline: none;
}

.services-order-handle .material-symbols-outlined {
    font-size: 1.35rem;
}

.services-order-handle.is-service {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 10px;
}

.services-order-group-list {
    display: grid;
    gap: 0.75rem;
    padding-left: 1.4rem;
}

.services-order-group-list.is-drop-target {
    border-radius: 16px;
}

.services-order-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid #d8e0ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(20, 31, 47, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.services-order-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 8px;
    border-radius: 14px 0 0 14px;
    background: #9ad9f5;
}

.services-order-card.is-dragging {
    opacity: 0.58;
    transform: scale(0.992);
}

.services-order-card.is-drop-target {
    border-color: #85d9ff;
    box-shadow: 0 0 0 3px rgba(133, 217, 255, 0.18), 0 10px 24px rgba(20, 31, 47, 0.05);
}

.services-order-card-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.services-order-card-copy {
    min-width: 0;
}

.services-order-card-copy h3 {
    margin: 0;
    color: #131a23;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 700;
}

.services-order-card-copy p {
    margin: 0.22rem 0 0;
    color: #6e7784;
    font-size: 0.88rem;
}

.services-order-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.services-order-empty {
    padding: 2rem;
}

.services-settings-grid {
    align-items: start;
}

.services-settings-form .form-group label {
    color: #304763;
}

.services-settings-select {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #cedaec;
    background: #fff;
    color: #22354c;
    padding: 0.7rem 0.95rem;
    font: inherit;
}

.services-settings-select:focus {
    outline: none;
    border-color: rgba(35, 192, 214, 0.7);
    box-shadow: 0 0 0 4px rgba(31, 198, 215, 0.12);
}

.services-settings-hint {
    display: block;
    margin-top: 0.34rem;
    color: #66788f;
    font-size: 0.79rem;
    line-height: 1.4;
}

.services-settings-check {
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #d5deeb;
    border-radius: 12px;
    background: #f8fbff;
    color: #24374f;
    font-weight: 600;
}

.services-settings-check input {
    margin-top: 0.22rem;
}

.services-online-booking-shell {
    display: grid;
    gap: 1rem;
}

.services-online-booking-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.services-online-booking-hero-copy {
    display: grid;
    gap: 0.4rem;
}

.services-online-booking-hero-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.services-online-booking-hero-label strong {
    color: #122235;
    font-size: 1.04rem;
    font-weight: 800;
}

.services-online-booking-hero-copy p {
    margin: 0;
    color: #62758e;
    line-height: 1.55;
    max-width: 66ch;
}

.services-online-booking-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.65rem;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    background: #f3f6fa;
    color: #607287;
    font-size: 0.78rem;
    font-weight: 800;
}

.services-online-booking-status.is-active {
    border-color: #bfe6cd;
    background: #ecfbf1;
    color: #2f7a48;
}

.services-online-booking-toggle {
    flex: 0 0 auto;
}

.services-online-booking-content {
    display: grid;
    gap: 0.9rem;
    transition: opacity 0.2s ease;
}

.services-online-booking-content.is-disabled {
    opacity: 0.58;
}

.services-online-booking-card,
.services-online-booking-note {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #ffffff;
}

.services-online-booking-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.services-online-booking-field > span {
    color: #223247;
    font-size: 0.94rem;
    font-weight: 700;
}

.services-online-booking-field small {
    color: #66788f;
    font-size: 0.82rem;
    line-height: 1.45;
}

.services-online-booking-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    cursor: pointer;
}

.services-online-booking-option input[type="checkbox"] {
    margin: 0.25rem 0 0;
    accent-color: #26c6d6;
}

.services-online-booking-option-copy {
    display: grid;
    gap: 0.12rem;
}

.services-online-booking-option-copy strong {
    color: #15263a;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-online-booking-option-copy small {
    color: #66788f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.services-online-booking-fields {
    display: grid;
    gap: 0.85rem;
}

.services-online-booking-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-online-booking-fields[hidden] {
    display: none;
}

.services-online-booking-note {
    gap: 0.35rem;
    border-style: dashed;
    background: #f8fbff;
}

.services-online-booking-note strong {
    color: #15263a;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-online-booking-note p {
    margin: 0;
    color: #65778e;
    line-height: 1.55;
}

.services-online-booking-note a {
    color: #2563eb;
    font-weight: 700;
}

.services-commissions-shell {
    display: grid;
    gap: 1rem;
}

.services-commissions-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.services-commissions-hero-copy {
    display: grid;
    gap: 0.38rem;
}

.services-commissions-hero-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.services-commissions-hero-label strong {
    color: #122235;
    font-size: 1.04rem;
    font-weight: 800;
}

.services-commissions-hero-copy p {
    margin: 0;
    color: #62758e;
    line-height: 1.55;
    max-width: 68ch;
}

.services-commissions-toggle {
    flex: 0 0 auto;
}

.services-commissions-content {
    display: grid;
    gap: 1rem;
    transition: opacity 0.2s ease;
}

.services-commissions-content.is-disabled {
    opacity: 0.58;
}

.services-commissions-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #f8fbff;
}

.services-commissions-search {
    max-width: 320px;
    flex: 1 1 280px;
}

.services-commissions-filter {
    position: relative;
    flex: 0 0 auto;
}

.services-commissions-filter summary {
    list-style: none;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid #d5deeb;
    border-radius: 999px;
    background: #ffffff;
    color: #17314a;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-weight: 700;
}

.services-commissions-filter summary::-webkit-details-marker {
    display: none;
}

.services-commissions-filter summary [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-commissions-filter summary [data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
}

.services-commissions-filter-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 180px;
    padding: 0.45rem;
    border: 1px solid #d9e2ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.2rem;
    z-index: 16;
}

.services-commissions-filter-menu button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #18304a;
    text-align: left;
    padding: 0.75rem 0.85rem;
    font-weight: 700;
}

.services-commissions-filter-menu button:hover,
.services-commissions-filter-menu button.is-active {
    background: #f3f6fa;
}

.services-commissions-table {
    display: grid;
    gap: 0;
}

.services-commissions-head,
.services-commissions-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: center;
}

.services-commissions-head {
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e4eaf1;
    color: #22344a;
    font-weight: 700;
}

.services-commissions-list {
    display: grid;
}

.services-commissions-row {
    padding: 1rem 0.15rem;
    border-bottom: 1px solid #edf2f7;
}

.services-commissions-row[hidden] {
    display: none;
}

.services-commissions-member {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.services-commissions-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.services-commissions-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.services-commissions-copy strong {
    color: #14283f;
    font-size: 1rem;
    font-weight: 800;
}

.services-commissions-copy small {
    color: #66788f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.services-commissions-controls {
    display: grid;
    grid-template-columns: minmax(0, 170px) auto;
    gap: 0.55rem;
    align-items: center;
    justify-content: start;
}

.services-commissions-value-shell input {
    min-height: 48px;
}

.services-commissions-type-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.services-commissions-value-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1px solid #cfd6df;
    border-radius: 12px;
    background: #ffffff;
}

.services-commissions-value-shell span {
    color: #586b83;
    font-size: 0.9rem;
    font-weight: 700;
}

.services-commissions-value-shell input {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.services-commissions-value-shell input:focus {
    outline: none;
    box-shadow: none;
}

.services-commissions-type-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, 42px);
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #f3f5f8;
}

.services-commissions-type-btn {
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #172e45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
}

.services-commissions-type-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.services-commissions-type-btn.is-active {
    border-color: #d5dce6;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.services-commissions-type-symbol {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}

.services-commissions-type-coins {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 16px;
}

.services-commissions-type-coins span {
    position: absolute;
    width: 10px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: #fff6e8;
    box-shadow: inset 0 -1px 0 rgba(255, 214, 153, 0.65);
}

.services-commissions-type-coins span:nth-child(1) {
    left: 0;
    top: 7px;
}

.services-commissions-type-coins span:nth-child(2) {
    left: 5px;
    top: 3px;
}

.services-commissions-type-coins span:nth-child(3) {
    left: 10px;
    top: 7px;
}

.services-commissions-empty-state {
    margin: 0;
    padding: 1rem 0.15rem 0;
    color: #66788f;
    font-size: 0.92rem;
    line-height: 1.55;
}

.services-commissions-note {
    gap: 0.35rem;
}

.services-commissions-note strong {
    color: #15263a;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-commissions-note p {
    margin: 0;
    color: #65778e;
    line-height: 1.55;
}

.services-commissions-note a {
    color: #2563eb;
    font-weight: 700;
}

.services-settings-shell {
    display: grid;
    gap: 1.25rem;
}

.services-settings-group {
    display: grid;
    gap: 0.85rem;
}

.services-settings-group-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.services-settings-checklist {
    display: grid;
    gap: 0.9rem;
}

.services-settings-row {
    padding: 0.1rem 0;
}

.services-settings-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.services-settings-card,
.services-settings-compact-field {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #ffffff;
}

.services-settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-settings-card-head strong {
    color: #122235;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.45;
}

.services-settings-card-head strong span {
    color: #66788f;
    font-size: 0.84rem;
    font-weight: 600;
}

.services-settings-tax-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.services-settings-tax-pill {
    min-height: 38px;
    padding: 0 0.9rem;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: #ffffff;
    color: #13263a;
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
}

.services-settings-inline-link {
    border: 0;
    background: transparent;
    color: #5b50f4;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: flex-start;
}

.services-settings-inline-link:hover {
    background: transparent;
    color: #4c43d8;
}

.services-settings-tax-editor[hidden] {
    display: none;
}

.services-tax-modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
    z-index: 1320;
}

.services-tax-modal-backdrop[hidden] {
    display: none;
}

.services-tax-modal {
    width: min(520px, 100%);
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem 1.3rem 1.2rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

.services-tax-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.services-tax-modal-head h2 {
    margin: 0 0 0.25rem;
    color: #101828;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.services-tax-modal-head p {
    margin: 0;
    color: #66788f;
    font-size: 0.92rem;
    line-height: 1.5;
}

.services-tax-modal-close {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #122235;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: none;
}

.services-tax-modal-close:hover {
    background: #f3f6fa;
}

.services-tax-modal-body {
    display: grid;
    gap: 1rem;
}

.services-tax-modal-row {
    display: grid;
    gap: 0.45rem;
}

.services-tax-modal-row-title {
    color: #122235;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
}

.services-tax-modal-row select {
    min-height: 46px;
    width: 100%;
}

.services-tax-modal-empty {
    margin: 0;
    color: #66788f;
    font-size: 0.92rem;
    line-height: 1.55;
}

.services-tax-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.services-tax-modal-actions .btn {
    min-width: 110px;
}

.services-settings-compact-field > label,
.services-settings-compact-field > span {
    color: #122235;
    font-size: 0.92rem;
    font-weight: 700;
}

.services-settings-compact-field input,
.services-settings-compact-field select {
    min-height: 46px;
}

.services-settings-field-note {
    color: #66788f;
    font-size: 0.8rem;
    line-height: 1.45;
}

.services-settings-cost-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.services-settings-cost-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0 0.9rem;
    border: 1px solid #cfd6df;
    border-radius: 12px;
    background: #ffffff;
}

.services-settings-cost-input span {
    color: #586b83;
    font-size: 0.88rem;
    font-weight: 700;
}

.services-settings-cost-input input {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    min-height: 44px;
}

.services-settings-cost-input input:focus {
    outline: none;
    box-shadow: none;
}

.services-settings-type-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #f3f5f8;
}

.services-settings-type-btn {
    min-width: 48px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #172e45;
    padding: 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: none;
}

.services-settings-type-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.services-settings-type-btn.is-active {
    border-color: #d5dce6;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.services-settings-group textarea {
    min-height: 128px;
}

.services-settings-shell {
    max-width: 860px;
    gap: 1.9rem;
}

.services-settings-group {
    gap: 0.8rem;
}

.services-settings-group-head h3 {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.services-settings-checklist {
    gap: 1rem;
}

.services-settings-row {
    padding: 0;
}

.services-settings-row .appointment-settings-checkbox-copy strong {
    color: #101828;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
}

.services-settings-row .appointment-settings-checkbox-copy small {
    color: #697689;
    font-size: 0.72rem;
    line-height: 1.35;
}

.services-settings-stack {
    display: grid;
    gap: 0.7rem;
}

.services-settings-inline-panel,
.services-settings-inline-fields {
    margin-left: 1.65rem;
}

.services-settings-inline-panel[hidden],
.services-settings-inline-fields[hidden] {
    display: none;
}

.services-settings-inline-panel textarea {
    min-height: 72px;
    padding: 0.8rem 0.9rem;
    border-radius: 4px;
}

.services-settings-inline-fields {
    display: grid;
    grid-template-columns: 96px minmax(0, 300px);
    gap: 0.55rem;
    max-width: 430px;
}

.services-settings-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.05rem;
    max-width: 460px;
}

.services-settings-card,
.services-settings-compact-field,
.services-settings-field-block {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.services-settings-card-head {
    gap: 0.45rem;
}

.services-settings-card-head strong {
    font-size: 0.82rem;
    line-height: 1.3;
}

.services-settings-card-head strong span {
    font-size: 0.72rem;
    font-weight: 600;
}

.services-settings-tax-actions {
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: 360px;
}

.services-settings-tax-pill {
    min-height: 30px;
    padding: 0 0.75rem;
    border: 1px solid #6d5ef7;
    border-radius: 4px;
    color: #15263a;
    font-size: 0.76rem;
    font-weight: 800;
}

.services-settings-inline-link {
    color: #6d5ef7;
    font-size: 0.78rem;
    font-weight: 800;
}

.services-settings-inline-link:hover {
    color: #5948ef;
}

.services-settings-compact-field > label,
.services-settings-compact-field > span,
.services-settings-notes-field > label {
    color: #122235;
    font-size: 0.78rem;
    font-weight: 800;
}

.services-settings-compact-field input,
.services-settings-compact-field select,
.services-settings-notes-field textarea,
.services-settings-inline-panel textarea,
.services-settings-inline-fields input,
.services-settings-inline-fields select {
    min-height: 40px;
}

.services-settings-field-note {
    color: #6e7c90;
    font-size: 0.68rem;
    line-height: 1.35;
}

.services-settings-cost-row {
    grid-template-columns: minmax(0, 190px) auto;
    gap: 0.4rem;
    max-width: 380px;
}

.services-settings-cost-input {
    min-height: 40px;
    padding: 0 0.7rem;
    border-radius: 6px;
}

.services-settings-cost-input span {
    font-size: 0.74rem;
}

.services-settings-cost-input input {
    min-height: 38px;
    font-size: 0.88rem;
}

.services-settings-type-toggle {
    gap: 0.2rem;
    padding: 0.16rem;
    border-radius: 6px;
}

.services-settings-type-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 5px;
    padding: 0 0.45rem;
    font-size: 0.82rem;
}

.services-settings-sku-field {
    max-width: 420px;
}

.services-settings-group-secondary {
    padding-top: 0.1rem;
}

.services-settings-checklist-secondary {
    max-width: 560px;
}

.services-settings-secondary-grid {
    display: grid;
    gap: 1rem;
    max-width: 620px;
}

.services-settings-compact-field-plain {
    gap: 0.38rem;
}

.services-settings-notes-field {
    display: grid;
    gap: 0.38rem;
}

.services-settings-notes-field textarea {
    min-height: 96px;
}

.services-settings-summary {
    display: grid;
    gap: 0.8rem;
}

.services-settings-summary div {
    display: grid;
    gap: 0.22rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #d6e1ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.services-settings-summary strong {
    color: #15304c;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.services-settings-summary span {
    color: #5b7088;
    line-height: 1.48;
    word-break: break-word;
}

body.has-service-category-modal {
    overflow: hidden;
}

.services-category-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(17, 20, 28, 0.26);
    z-index: 120;
}

.services-category-modal.is-open {
    display: flex;
}

.services-category-dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(14, 18, 28, 0.18);
    position: relative;
}

.services-category-form {
    padding: 2.2rem 2.2rem 1.95rem;
}

.services-category-form h2 {
    margin: 0 0 1.9rem;
    color: #0f1827;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.services-category-modal-close {
    position: absolute;
    top: 1.35rem;
    right: 1.45rem;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #2a2d34;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.services-category-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.services-category-field {
    display: grid;
    gap: 0.48rem;
}

.services-category-field label {
    color: #202228;
    font-size: 0.95rem;
    font-weight: 700;
}

.services-category-field input,
.services-category-field textarea {
    width: 100%;
    border: 1px solid #d2d5dc;
    border-radius: 11px;
    background: #ffffff;
    color: #1f2127;
    font-size: 0.98rem;
    font-weight: 600;
}

.services-category-field input {
    min-height: 56px;
    padding: 0 1rem;
}

.services-category-field input::placeholder,
.services-category-field textarea::placeholder {
    color: #b1b4bc;
}

.services-category-field input:focus,
.services-category-field textarea:focus {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.services-category-field-wide {
    margin-top: 1rem;
}

.services-category-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.48rem;
}

.services-category-counter {
    color: #787c85;
    font-size: 0.82rem;
    font-weight: 700;
}

.services-category-field textarea {
    min-height: 124px;
    resize: vertical;
    padding: 0.9rem 1rem;
}

.services-category-textarea-shell {
    position: relative;
}

.services-category-textarea-shell textarea {
    padding-bottom: 4.7rem;
}

.services-category-ai-bar {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-category-ai-btn {
    min-height: 44px;
    padding: 0.72rem 1.15rem;
    border: 1px solid #cdc6ff;
    border-radius: 999px;
    background: #ffffff;
    color: #1b1e24;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 10px 18px rgba(128, 113, 255, 0.12);
    font-size: 0.98rem;
    font-weight: 700;
}

.services-category-ai-btn:hover {
    border-color: #bcaeff;
    background: #fcfbff;
    color: #16191f;
    box-shadow: 0 12px 22px rgba(128, 113, 255, 0.16);
}

.services-category-ai-btn:focus-visible {
    outline: none;
    border-color: #a995ff;
    box-shadow: 0 0 0 4px rgba(148, 128, 255, 0.16);
}

.services-category-ai-btn:disabled {
    cursor: wait;
    opacity: 0.9;
}

.services-category-ai-icon[data-icon]::before {
    color: #7b61ff;
    font-size: 1.1rem;
}

.services-category-ai-btn.is-loading .services-category-ai-icon {
    animation: servicesAiPulse 1s ease-in-out infinite;
}

.services-category-ai-status {
    color: #707580;
    font-size: 0.79rem;
    font-weight: 700;
    text-align: right;
}

.services-category-ai-status[data-state='success'] {
    color: #3f6852;
}

.services-category-ai-status[data-state='error'] {
    color: #8a4b4b;
}

@keyframes servicesAiPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.68;
    }
}

.services-category-color-select {
    position: relative;
}

.services-category-color-trigger {
    width: 100%;
    min-height: 56px;
    border: 1px solid #d2d5dc;
    border-radius: 11px;
    background: #ffffff;
    color: #1f2127;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0 1rem;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.services-category-color-trigger:focus,
.services-category-color-select.is-open .services-category-color-trigger {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.services-category-color-trigger-value {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.services-category-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--category-color, #9ad9f5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(16, 19, 28, 0.06);
    flex: 0 0 auto;
}

.services-category-color-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-height: 430px;
    overflow: auto;
    border: 1px solid #d9dde5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(19, 24, 34, 0.2);
    padding: 0.42rem;
    display: grid;
    gap: 0.18rem;
    z-index: 24;
}

.services-category-color-dropdown[hidden] {
    display: none;
}

.services-category-color-option {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #ffffff;
    color: #1e2128;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-content: flex-start;
    position: relative;
    padding: 0.78rem 0.8rem;
    padding-right: 2.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.services-category-color-option:hover {
    background: #f3f5f8;
}

.services-category-color-option.is-selected {
    border-color: #c9cfd8;
    background: #eceff3;
    box-shadow: inset 0 0 0 1px rgba(18, 23, 31, 0.06);
    color: #15181e;
}

.services-category-color-option.is-selected::after {
    content: 'check';
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    color: #171a20;
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.services-category-color-option:focus-visible {
    outline: none;
    border-color: #bfc7d1;
    background: #f1f3f6;
    box-shadow: 0 0 0 3px rgba(172, 180, 192, 0.18);
}

.services-category-actions {
    margin-top: 1.9rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

.services-category-btn {
    min-width: 104px;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.services-category-btn-secondary {
    border: 1px solid #d0d4db;
    background: #ffffff;
    color: #171a20;
}

.services-category-btn-primary {
    border: 1px solid #09090d;
    background: #09090d;
    color: #ffffff;
}

@media (max-width: 1320px) {
    .services-catalog-grid {
        grid-template-columns: 1fr;
    }

    .services-categories-panel {
        position: static;
    }

    .services-admin-grid {
        grid-template-columns: 1fr;
    }

    .services-settings-grid {
        grid-template-columns: 1fr;
    }

    .services-editor-layout {
        grid-template-columns: 1fr;
    }

    .services-editor-side {
        position: static;
    }
}

@media (max-width: 980px) {
    .services-catalog-top,
    .services-catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .services-catalog-top-actions {
        justify-content: flex-start;
    }

    .services-catalog-search-box {
        min-width: 220px;
        max-width: none;
    }

    .service-catalog-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .service-catalog-price-wrap {
        text-align: left;
        min-width: 0;
    }

    .service-admin-item {
        grid-template-columns: 1fr;
    }

    .service-admin-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .services-category-form-row {
        grid-template-columns: 1fr;
    }

    .services-order-item-meta .btn {
        margin-left: 0;
    }

    .services-order-form-actions {
        justify-content: stretch;
    }

    .services-order-form-actions .btn,
    .services-order-form-actions button {
        width: 100%;
    }

    .services-editor-two-cols,
    .services-editor-pricing-grid,
    .services-editor-resource-grid,
    .services-editor-addon-grid,
    .services-editor-three-cols,
    .services-editor-team-grid {
        grid-template-columns: 1fr;
    }

    .services-editor-forms-head,
    .services-editor-form-item {
        grid-template-columns: 1fr;
    }

    .services-editor-forms-head span:last-child {
        display: none;
    }

    .services-editor-form-actions {
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .services-catalog-search {
        flex-direction: column;
        align-items: stretch;
    }

    .services-catalog-search-box {
        min-width: 0;
        max-width: none;
    }

    .service-catalog-card {
        grid-template-columns: 1fr;
    }

    .service-catalog-price-wrap {
        justify-content: flex-start;
    }

    .services-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-form-actions button {
        width: 100%;
        margin-left: 0;
    }

    .service-admin-main {
        flex-direction: column;
    }

    .service-admin-thumb {
        width: 100%;
        height: 150px;
    }

    .service-admin-actions {
        grid-template-columns: 1fr;
    }

    .services-category-modal {
        padding: 1rem;
        align-items: flex-start;
    }

    .services-category-dialog {
        width: 100%;
        max-height: calc(100vh - 2rem);
        margin-top: 0.4rem;
    }

    .services-category-form {
        padding: 1.55rem 1rem 1.1rem;
    }

    .services-category-modal-close {
        top: 0.9rem;
        right: 1rem;
    }

    .services-category-actions {
        flex-direction: column-reverse;
    }

    .services-category-btn {
        width: 100%;
    }

    .services-category-textarea-shell textarea {
        padding-bottom: 5.9rem;
    }

    .services-category-ai-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .services-category-ai-btn {
        width: 100%;
    }

    .services-category-ai-status {
        text-align: left;
    }

    .services-order-item-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .services-order-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-order-form-actions {
        flex-direction: column-reverse;
    }

    .services-settings-check {
        align-items: flex-start;
    }

    .services-editor-ai-bar,
    .services-editor-footer,
    .services-editor-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.portfolio-admin-grid {
    align-items: start;
}

.portfolio-form-panel,
.portfolio-list-panel {
    padding: 0;
    overflow: hidden;
}

.portfolio-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #d7e2ef;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.96) 0%, rgba(238, 245, 253, 0.9) 100%);
}

.portfolio-panel-kicker {
    margin: 0;
    color: #5f7691;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.71rem;
    font-weight: 700;
}

.portfolio-panel-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.12rem;
    color: #132c48;
    line-height: 1.15;
}

.portfolio-panel-body {
    padding: 0.95rem 1rem 1rem;
}

.portfolio-form .form-group label {
    color: #4f6580;
}

.portfolio-form-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #2f4762;
    font-weight: 600;
}

.portfolio-form-toggle input {
    width: auto;
}

.portfolio-form-actions {
    display: flex;
    justify-content: flex-end;
}

.portfolio-list-scroll {
    max-height: clamp(340px, 66vh, 760px);
    overflow: auto;
    border: 1px solid #d5e0ed;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
    scrollbar-gutter: stable both-edges;
}

.portfolio-list-scroll::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.portfolio-list-scroll::-webkit-scrollbar-track {
    background: #e9f0f8;
}

.portfolio-list-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid #e9f0f8;
    background: linear-gradient(180deg, #71c7e6 0%, #2e95c0 100%);
}

.portfolio-table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.portfolio-table th,
.portfolio-table td {
    border-bottom: 1px solid #dbe6f2;
    vertical-align: middle;
    text-align: center;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.portfolio-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, #f4f8fd 0%, #ecf3fb 100%);
    box-shadow: inset 0 -1px 0 #cfdcec;
}

.portfolio-table tbody tr {
    background: rgba(255, 255, 255, 0.9);
    transition: background 0.18s ease;
}

.portfolio-table tbody tr:hover {
    background: #f2f9ff;
}

.portfolio-thumb-cell {
    width: 172px;
}

.portfolio-thumb {
    width: 148px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid #d0ddea;
    object-fit: cover;
    box-shadow: 0 7px 14px rgba(18, 38, 59, 0.11);
    margin-inline: auto;
}

.portfolio-thumb-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    cursor: zoom-in;
}

.portfolio-thumb-btn:focus-visible {
    outline: 2px solid #3bbddc;
    outline-offset: 3px;
    border-radius: 10px;
}

.portfolio-titles {
    min-width: 220px;
    text-align: center;
}

.portfolio-titles div + div {
    margin-top: 0.22rem;
}

.portfolio-titles strong {
    color: #123657;
}

.portfolio-order-cell {
    width: 72px;
    color: #1f3f62;
    font-weight: 700;
    white-space: nowrap;
}

.portfolio-status-cell {
    width: 110px;
}

.portfolio-actions-dropdown {
    display: inline-block;
    text-align: left;
}

.portfolio-actions-trigger {
    width: 38px;
    min-height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #c8d5e6;
    background: linear-gradient(180deg, #f7fbff 0%, #ecf3fb 100%);
    color: #2f435c;
    font-size: 0.92rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 12px rgba(17, 35, 55, 0.1);
}

.portfolio-actions-trigger:hover {
    background: #eaf2fb;
}

.portfolio-actions-trigger::-webkit-details-marker {
    display: none;
}

.portfolio-actions-trigger::marker {
    content: '';
}

.portfolio-actions-menu {
    display: none;
    min-width: 188px;
    padding: 0.24rem 0;
    border: 1px solid #d4dfec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 24px rgba(17, 35, 55, 0.16);
    position: fixed;
    top: var(--portfolio-menu-top, 0);
    left: var(--portfolio-menu-left, 0);
    z-index: 220;
}

.portfolio-actions-dropdown[open] .portfolio-actions-menu {
    display: block;
}

.portfolio-actions-menu > * + * {
    border-top: 1px solid #e6edf6;
}

.portfolio-actions-menu form {
    margin: 0;
}

.portfolio-actions-item {
    appearance: none;
    border: 0;
    background: transparent;
    color: #2f425a;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 0.72rem;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.portfolio-actions-item:hover {
    background: #f3f8ff;
}

.portfolio-actions-item-icon {
    width: 15px;
    text-align: center;
    color: #667b96;
    font-size: 0.82rem;
}

.portfolio-actions-item.is-danger {
    color: #b33a3a;
}

.portfolio-actions-item.is-danger .portfolio-actions-item-icon {
    color: #b33a3a;
}

.portfolio-actions-item.is-danger:hover {
    background: #fff0f0;
}

.portfolio-row-editable {
    cursor: pointer;
}

.portfolio-row-editable:focus-visible {
    outline: 2px solid rgba(59, 189, 220, 0.55);
    outline-offset: -2px;
}

.portfolio-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 290;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.15rem;
    background: rgba(11, 18, 28, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.portfolio-preview-modal.is-open {
    display: flex;
}

.portfolio-preview-image {
    width: min(1100px, 92vw);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(191, 208, 227, 0.5);
    background: #0d121b;
    box-shadow: 0 18px 36px rgba(5, 10, 18, 0.5);
}

.portfolio-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(195, 211, 230, 0.62);
    background: rgba(20, 29, 43, 0.84);
    color: #f5f8ff;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    box-shadow: 0 8px 18px rgba(5, 10, 18, 0.42);
}

.portfolio-preview-close:hover {
    background: rgba(34, 45, 61, 0.96);
}

.portfolio-preview-caption {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(178, 197, 219, 0.58);
    background: rgba(14, 22, 34, 0.72);
    color: #e4edf9;
    font-size: 0.84rem;
    font-weight: 600;
}

@media (max-width: 1320px) {
    .portfolio-admin-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-list-scroll {
        max-height: 500px;
    }
}

@media (max-width: 760px) {
    .portfolio-panel-head {
        padding: 0.78rem 0.85rem;
    }

    .portfolio-panel-body {
        padding: 0.8rem 0.85rem 0.9rem;
    }

    .portfolio-form-actions button {
        width: 100%;
    }

    .portfolio-list-scroll {
        max-height: none;
    }

    .portfolio-table {
        min-width: 700px;
    }
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
}

.blocks-sortable {
    display: grid;
    gap: 0.75rem;
}

.block-item {
    margin: 0;
    padding: 0.96rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d2ddec;
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(17, 35, 55, 0.08);
    cursor: grab;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.block-item:active {
    cursor: grabbing;
}

.block-item.is-dragging {
    opacity: 0.4;
    border-style: dashed;
}

.block-item.drag-over {
    border-color: #2ec5db;
    box-shadow: 0 0 0 2px rgba(31, 199, 216, 0.2), 0 10px 22px rgba(17, 35, 55, 0.08);
    transform: translateY(-1px);
}

.block-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.42rem;
}

.block-item-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.block-order {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2ac8dd, #1b9cc8);
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
    box-shadow: 0 6px 12px rgba(19, 56, 84, 0.22);
}

.block-item h3 {
    margin: 0;
    font-size: 1.02rem;
}

.block-item p {
    margin: 0 0 0.62rem;
    color: #5f6d83;
}

.block-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-weight: 600;
    color: #26364a;
}

.block-drag-handle {
    border: 1px solid #c5d3e5;
    border-radius: 8px;
    background: #f4f8fd;
    color: #4d617a;
    font-weight: 700;
    line-height: 1;
    padding: 0.4rem 0.56rem;
    cursor: grab;
    transition: all 0.18s ease;
}

.block-drag-handle:hover {
    border-color: #9eb8d4;
    background: #edf4fc;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(760px 340px at 90% -20%, rgba(31, 198, 215, 0.2), transparent 62%),
        linear-gradient(180deg, #f7f9fd 0%, #eceff5 100%);
}

.login-card {
    width: min(460px, 100%);
    border-radius: 20px;
    border: 1px solid #dce2de;
    background: #fff;
    box-shadow: var(--lh-shadow);
    padding: 1.35rem;
}

.login-card h1 {
    margin-bottom: 0.25rem;
    font-size: 2.1rem;
}

.login-card p {
    color: #5f6f6d;
}

.login-page-auth {
    display: block;
    padding: 0;
    background: #ffffff;
}

.login-card-auth {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.login-auth-layout {
    display: grid;
    grid-template-columns: minmax(320px, 58%) minmax(360px, 42%);
    gap: 0;
    min-height: 100vh;
    align-items: stretch;
}

.login-brand-panel {
    position: relative;
    min-height: 100vh;
    padding: 3rem 2rem;
    background-image: var(--login-brand-bg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff6f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(197, 40, 69, 0.84) 0%, rgba(181, 79, 97, 0.58) 48%, rgba(69, 39, 61, 0.36) 100%),
        linear-gradient(180deg, rgba(19, 13, 20, 0.14), rgba(19, 13, 20, 0.18));
}

.login-brand-inner {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    text-align: center;
}

.login-brand-logo {
    display: block;
    width: min(340px, 88%);
    max-height: 180px;
    object-fit: contain;
    margin: 0 auto 1.2rem;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.14));
}

.login-brand-wordmark {
    color: #ffffff;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
}

.login-brand-description {
    display: inline-block;
    max-width: min(420px, 92%);
    margin: 0;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(39, 15, 27, 0.26);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.75;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
    box-shadow: 0 16px 32px rgba(28, 13, 24, 0.16);
}

.login-form-panel {
    position: relative;
    padding: 2.5rem 2rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-form-shell {
    width: min(420px, 100%);
}

.login-form-logo {
    display: block;
    width: min(220px, 70%);
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto 1rem;
}

.login-form-wordmark {
    margin-bottom: 1rem;
    color: #24334c;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.login-form-subtitle {
    margin: 0 0 1.9rem;
    color: #60656f;
    text-align: center;
    font-size: 0.98rem;
}

.login-auth-flashes {
    margin: 0 0 1.25rem;
}

.login-form-panel-head,
.login-form-kicker,
.login-form-panel-head h2,
.login-card .login-form-panel-head p {
    display: none;
}

.login-auth-form {
    width: 100%;
}

.login-form-panel .form-group {
    margin-bottom: 1rem;
}

.login-form-panel .form-group label {
    color: #4f5561;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.login-form-panel .form-group input {
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid #d5dce5;
    background: #ffffff;
    padding-inline: 0.95rem;
    font-size: 1.08rem;
    box-shadow: none;
}

.login-form-panel .form-group input:focus {
    border-color: #e13a4b;
    box-shadow: 0 0 0 3px rgba(225, 58, 75, 0.1);
}

.login-form-panel button.w-full {
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    background: #e33245;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    box-shadow: none;
}

.login-form-panel button.w-full:hover {
    background: #d82a3d;
    filter: none;
}

.login-form-foot {
    margin-top: 1.2rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.login-forgot-link {
    color: #e33245;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.login-forgot-link:hover {
    text-decoration: underline;
}

.login-form-divider {
    width: 100%;
    height: 1px;
    background: #dde2e9;
}

.login-form-copy {
    margin: 0;
    color: #5b6573;
    text-align: center;
    font-size: 0.92rem;
}

.login-page-forgot {
    background:
        radial-gradient(460px 240px at 50% 0%, rgba(226, 51, 69, 0.1), transparent 72%),
        linear-gradient(180deg, #f7fbff 0%, #edf2f7 100%);
}

.login-card-forgot {
    width: min(540px, 100%);
    padding: 2.2rem 2rem;
    border-radius: 22px;
    border-color: #dde5ee;
    background: #ffffff;
    box-shadow: 0 26px 62px rgba(20, 36, 66, 0.1);
}

.login-recovery-shell {
    width: min(410px, 100%);
    margin: 0 auto;
    text-align: center;
}

.login-card-forgot .flash-wrap {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left;
}

.login-recovery-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    color: #e33245;
    font-size: 3.9rem;
}

.login-card-forgot .login-recovery-title {
    margin: 0 0 0.55rem;
    color: #16233c;
    font-size: 1.42rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.login-recovery-subtitle {
    margin: 0 0 1.55rem;
    color: #607082;
    font-size: 0.9rem;
    line-height: 1.7;
}

.login-recovery-form {
    text-align: left;
}

.login-card-forgot .form-group label {
    color: #586576;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.login-recovery-input-shell {
    position: relative;
}

.login-recovery-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #647284;
    font-size: 1rem;
    pointer-events: none;
}

.login-recovery-input-shell input {
    padding-left: 2.65rem;
    font-size: 1.08rem;
}

.login-card-forgot button.w-full {
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    background: #e33245;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    text-transform: none;
    box-shadow: none;
}

.login-card-forgot button.w-full:hover {
    background: #d92c3e;
}

.login-recovery-divider {
    margin: 1.5rem 0 1rem;
    height: 1px;
    background: #dfe5ec;
}

.login-recovery-actions {
    display: flex;
    justify-content: center;
}

.login-recovery-back {
    color: #445365;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.login-recovery-back:hover {
    text-decoration: underline;
}

.login-page-reset {
    background:
        radial-gradient(520px 260px at 50% 0%, rgba(86, 143, 244, 0.12), transparent 70%),
        linear-gradient(180deg, #f7fbff 0%, #edf2f7 100%);
}

.login-card-reset {
    width: min(560px, 100%);
    padding: 2rem 1.9rem;
    border-radius: 24px;
    border: 1px solid #dde4ef;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(27, 44, 78, 0.12);
}

.login-reset-shell {
    width: min(405px, 100%);
    margin: 0 auto;
}

.login-card-reset .flash-wrap {
    margin-top: 0;
    margin-bottom: 1rem;
}

.login-reset-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 1.3rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef2f8 0%, #e2e8f1 100%);
    box-shadow: 0 10px 26px rgba(68, 84, 112, 0.12);
    color: #4a5565;
}

.login-reset-avatar svg {
    width: 42px;
    height: 42px;
}

.login-reset-avatar-alert {
    color: #e33245;
}

.login-card-reset .login-reset-title {
    margin: 0;
    color: #16233c;
    font-size: 1.9rem;
    line-height: 1.25;
    text-align: center;
    letter-spacing: -0.01em;
}

.login-reset-email {
    margin: 0.4rem 0 0;
    color: #687788;
    text-align: center;
    font-size: 0.98rem;
}

.login-reset-form {
    margin-top: 1.7rem;
}

.login-reset-field + .login-reset-field {
    margin-top: 1.35rem;
}

.login-reset-label {
    display: block;
    margin: 0 0 0.55rem;
    color: #607084;
    font-size: 0.93rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: none;
}

.login-reset-input-shell {
    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid #d7dfe9;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.login-reset-input-shell:focus-within {
    border-color: #6f99e9;
    box-shadow: 0 0 0 3px rgba(108, 150, 235, 0.14);
}

.login-reset-input-shell.is-valid {
    border-color: #19a56f;
    box-shadow: 0 0 0 3px rgba(25, 165, 111, 0.12);
}

.login-reset-input-shell.is-invalid {
    border-color: #e35a6a;
    box-shadow: 0 0 0 3px rgba(227, 90, 106, 0.12);
}

.login-reset-input-icon {
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #556478;
}

.login-reset-input-icon svg,
.login-reset-input-action svg {
    width: 18px;
    height: 18px;
}

.login-reset-input-shell input {
    flex: 1 1 auto;
    min-height: 46px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0.9rem 0 0.1rem;
    font-size: 1rem;
    color: #22324b;
}

.login-reset-input-shell input:focus {
    box-shadow: none;
}

.login-reset-input-action {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: #8c6b3d;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.login-reset-rules {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.login-reset-rule {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #a6b1c0;
    font-size: 0.99rem;
    line-height: 1.35;
}

.login-reset-rule-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #b7c0cc;
    color: transparent;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
}

.login-reset-rule.is-valid {
    color: #16895f;
}

.login-reset-rule.is-valid .login-reset-rule-icon {
    background: #169764;
    color: #ffffff;
}

.login-reset-submit {
    margin-top: 1.7rem;
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #6ea2f5 0%, #5c8de3 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    box-shadow: none;
}

.login-reset-submit:hover {
    background: linear-gradient(180deg, #679cef 0%, #547fd2 100%);
}

.login-reset-submit:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.login-reset-invalid-copy {
    margin: 0.85rem 0 0;
    color: #637385;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.7;
}

.login-reset-actions {
    margin-top: 1.55rem;
    padding-top: 1.15rem;
    border-top: 1px solid #dfe5ec;
    display: flex;
    justify-content: center;
}

.login-reset-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #445365;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
}

.login-reset-back:hover {
    text-decoration: underline;
}

@media (max-width: 1120px) {
    .login-card-auth {
        min-height: 100vh;
    }

    .login-auth-layout {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .login-brand-panel {
        min-height: 360px;
        padding: 2rem 1.4rem;
    }

    .login-form-panel {
        padding: 2rem 1.4rem 2.3rem;
    }

    .lh-nav-shell {
        grid-template-columns: 260px 1fr;
    }

    .lh-nav-cta {
        display: none;
    }

    .lh-card-grid,
    .lh-contact-main-grid,
    .lh-service-circles,
    .lh-team-grid,
    .lh-calm-grid,
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-kpi-card-wide {
        grid-column: span 3;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-live-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lh-catalog-strip {
        grid-template-columns: 1fr;
        max-width: 820px;
    }

    .lh-catalog-preview-btn img {
        height: clamp(280px, 52vw, 430px);
    }

    .lh-contact-map-frame iframe {
        height: clamp(300px, 48vw, 390px);
    }

    .lh-about-overview-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        min-height: 580px;
    }

    .lh-about-overview-card {
        padding: 2.3rem 2rem 2rem;
    }

    .lh-about-member-body h3 {
        font-size: 1.45rem;
    }

    .lh-about-member-body p {
        font-size: 0.94rem;
    }

    .cms-cards-global {
        grid-template-columns: 1fr;
    }

    .lh-team-card,
    .lh-team-card-inner {
        min-height: 360px;
    }

    .lh-portfolio-canvas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 240px;
    }

    .lh-portfolio-shell {
        padding-inline: 0.5rem;
    }

    .lh-portfolio-shot:nth-of-type(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .lh-portfolio-shot:nth-of-type(1) {
        grid-column: 1 / -1;
        min-height: 300px;
    }

    .lh-proof-slides {
        max-width: 760px;
    }

    .lh-booking-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lh-booking-hours,
    .lh-booking-card {
        max-width: 980px;
        width: 100%;
        margin-inline: auto;
    }

    .lh-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lh-footer-about {
        grid-column: 1 / -1;
    }

    .lh-footer-map-frame {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .admin-body.admin-page-content .admin-content {
        --cms-sidebar-width: 214px;
    }

    .lh-topline-inner {
        min-height: auto;
        padding: 0.6rem 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .lh-nav-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--lh-nav-h);
    }

    .lh-logo-wrap {
        background: transparent;
        padding-left: 0;
    }

    .lh-logo-wrap .brand-logo {
        max-height: 62px;
    }

    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 1rem;
        right: 1rem;
        background: #0b1422;
        border: 1px solid rgba(78, 111, 145, 0.38);
        border-radius: 10px;
        box-shadow: var(--lh-shadow);
        padding: 0.5rem;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: all 0.2s ease;
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-nav a {
        min-height: 44px;
        border-radius: 8px;
    }

    .site-body.page-home .lh-hero {
        --lh-hero-mobile-top-offset: 0px;
        --lh-hero-mobile-frame-h: clamp(320px, 62vw, 420px);
        margin-top: 0;
        padding-top: 0;
        min-height: var(--lh-hero-mobile-frame-h);
        padding-bottom: 1rem;
        background: #f3f4f6;
    }

    .site-body.page-home .lh-hero .lh-hero-slides {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        overflow: hidden;
        background: #111a28;
    }

    .site-body.page-home .lh-hero .lh-hero-overlay {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        background: linear-gradient(180deg, rgba(21, 29, 40, 0.58), rgba(20, 28, 39, 0.48));
    }

    .site-body.page-home .lh-hero .lh-hero-controls {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 0.45rem;
    }

    .site-body.page-home .lh-hero .lh-hero-control {
        width: 44px;
        height: 44px;
        font-size: 1.62rem;
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        margin-inline: auto;
        text-align: center;
        min-height: var(--lh-hero-mobile-frame-h);
        justify-content: center;
        gap: 0.55rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-body.page-home .lh-hero .lh-script {
        margin: 0;
        max-width: 16ch;
        font-size: clamp(2.05rem, 6.8vw, 2.86rem);
        line-height: 0.95;
        letter-spacing: 0.012em;
        color: #d8aa4d;
        background: linear-gradient(180deg, #f6df9b 0%, #e2bf6c 48%, #b8862b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:
            0 2px 10px rgba(20, 16, 8, 0.35),
            0 1px 0 rgba(255, 238, 180, 0.35);
    }

    .site-body.page-home .lh-hero h1 {
        margin: 0;
        max-width: 11.5ch;
        font-size: clamp(1.95rem, 6.9vw, 2.7rem);
        line-height: 1;
    }

    .site-body.page-home .lh-hero p {
        margin: 0 auto 0.75rem;
        max-width: 29ch;
        font-size: clamp(0.98rem, 3vw, 1.1rem);
        line-height: 1.34;
    }

    .site-body.page-home .lh-hero .lh-btn-primary {
        min-width: clamp(210px, 48vw, 290px);
        padding: 0.8rem 1.2rem;
    }

    .site-body.page-home .lh-hero .lh-hero-slide,
    .site-body.page-home .lh-hero .lh-hero-slide.is-active {
        transform: none;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::before {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center 34%;
        z-index: 1;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::after {
        display: none;
    }

    .lh-proof-bg {
        inset: -120px 0 -120px;
    }

    .lh-proof::before,
    .lh-proof::after {
        display: none;
    }

    .lh-proof-quote {
        font-size: clamp(1.2rem, 4.1vw, 1.8rem);
        line-height: 1.45;
    }

    .lh-proof-slides {
        min-height: 268px;
    }

    .lh-proof-slide {
        padding: 1.8rem 1.5rem;
    }

    .admin-layout {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .admin-topbar {
        margin: 0 -0.82rem 1.02rem;
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 0.52rem;
        padding-inline: 0.82rem;
    }

    .admin-topbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-topbar-quick {
        width: 100%;
        order: 2;
        overflow-x: auto;
        padding-bottom: 0.12rem;
    }

    .admin-topbar-search-wrap {
        width: 100%;
    }

    .admin-topbar-search {
        width: 100%;
        min-width: 0;
    }

    .admin-body.admin-page-dashboard-pro .admin-layout {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar {
        min-height: 60px;
        align-items: center;
        flex-direction: row;
        gap: 0.55rem;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar-right {
        width: auto;
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .site-body {
        --lh-topline-h: 36px;
        --lh-header-offset: calc(var(--lh-mobile-topline-h, var(--lh-topline-h)) + var(--lh-mobile-header-h, var(--lh-nav-h)));
        padding-top: var(--lh-header-offset);
    }

    .site-body.topline-hidden {
        padding-top: var(--lh-mobile-header-h, var(--lh-nav-h));
    }

    .site-body.nav-is-hidden {
        padding-top: var(--lh-mobile-header-h, var(--lh-nav-h));
    }

    section[id] {
        scroll-margin-top: calc(var(--lh-header-offset) + 10px);
    }

    .lh-topline {
        display: block;
        background: #ffffff;
        color: #2a3b50;
        border-top: 1px solid #ead8c6;
        border-bottom: 1px solid #eddccf;
        box-shadow: none;
    }

    .lh-topline-inner {
        min-height: var(--lh-topline-h);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.42rem;
        padding: 0.42rem 0 0.58rem;
    }

    .lh-topline-left {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }

    .lh-topline-left p {
        justify-content: center;
        text-align: center;
        color: #4b5870;
        font-size: 0.84rem;
        font-weight: 500;
        line-height: 1.33;
        letter-spacing: 0.018em;
        width: 100%;
        padding-inline: 0.2rem;
    }

    .lh-topline-copy {
        max-width: min(100%, 42ch);
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .lh-topline-social {
        display: flex;
        margin-left: 0;
        margin-top: 0.08rem;
        gap: 0.5rem;
    }

    .lh-topline-social a {
        width: 42px;
        height: 42px;
        border: 1px solid transparent;
        background: rgba(18, 34, 52, 0.66);
        color: #ffffff;
        box-shadow: 0 8px 16px rgba(4, 12, 22, 0.32);
        transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
    }

    .lh-topline-social a:hover {
        transform: translateY(-2px) scale(1.04);
        filter: saturate(1.08) brightness(1.05);
        box-shadow: 0 10px 18px rgba(3, 14, 25, 0.42);
    }

    .lh-topline-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
    }

    .lh-topline-contact a {
        color: #3f4f68;
        font-size: 0.88rem;
        font-weight: 500;
        gap: 0.52rem;
    }

    .lh-topline-contact .lh-topline-icon {
        width: 20px;
        height: 20px;
    }

    .lh-topline .lh-lang-switch {
        display: none;
    }

    .lh-topline .lh-lang-switch a {
        min-width: 46px;
        min-height: 24px;
        font-size: 0.68rem;
    }

    .site-header {
        top: var(--lh-mobile-topline-h, var(--lh-topline-h));
        background: linear-gradient(90deg, #8f6a44 0%, #674629 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
        box-shadow: none;
    }

    .site-header.is-scrolled {
        background: linear-gradient(90deg, #8f6a44 0%, #674629 100%);
        border-bottom: 0;
        box-shadow: none;
    }

    .site-body.nav-is-hidden .site-header {
        transform: translateY(-118%) scale(0.82) rotateX(16deg);
        opacity: 0;
        filter: blur(1.6px);
    }

    .lh-topline-contact {
        align-items: center;
    }

    .lh-card-grid,
    .lh-service-circles,
    .lh-team-grid,
    .lh-calm-grid,
    .lh-contact-main-grid,
    .cms-translate-grid,
    .form-grid,
    .grid-2,
    .grid-3,
    .metrics,
    .dashboard-kpi-grid,
    .lh-footer-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-card-wide {
        grid-column: span 1;
    }

    .dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-live-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-activity-item,
    .dashboard-agenda-item,
    .dashboard-next-item,
    .dashboard-live-item {
        grid-template-columns: 1fr;
        gap: 0.34rem;
    }

    .dashboard-activity-status,
    .dashboard-agenda-time,
    .dashboard-next-date,
    .dashboard-live-pill {
        width: fit-content;
    }

    .admin-body.admin-page-dashboard-pro .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-dashboard-pro .admin-sidebar {
        display: none;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar {
        padding-inline: 0.75rem;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar-brand {
        font-size: 1.36rem;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar-pro-cta {
        display: none;
    }

    .lh-catalog-strip {
        margin-top: 1.45rem;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .lh-catalog-copy {
        padding: 0.2rem;
    }

    .lh-catalog-preview-btn img {
        height: clamp(230px, 70vw, 360px);
    }

    .lh-catalog-dialog {
        width: min(1280px, 98vw);
        max-height: calc(100vh - 1rem);
        padding: 0.62rem;
    }

    .cms-nav,
    .cms-actions,
    .top-title,
    .admin-body .flash-wrap {
        position: static;
    }

    .cms-editor {
        padding-bottom: 1rem;
    }

    .cms-actions {
        left: auto;
        right: auto;
        bottom: auto;
        justify-content: flex-end;
    }

    .cms-actions-copy {
        display: none;
    }

    .cms-nav {
        padding: 0.55rem;
    }

    .cms-nav a {
        font-size: 0.8rem;
        min-height: 32px;
    }

    .cms-card {
        padding: 0.75rem;
    }

    .cms-card-head {
        flex-direction: column;
        gap: 0.35rem;
    }

    .cms-rich-toolbar button {
        min-width: 28px;
        min-height: 28px;
        font-size: 0.76rem;
        padding: 0.2rem 0.3rem;
    }

    .cms-rich-editable {
        min-height: 150px;
        font-size: 0.88rem;
    }

    .lh-contact-hero {
        min-height: 300px;
    }

    .lh-about-hero {
        min-height: 286px;
    }

    .lh-about-hero-inner {
        min-height: 226px;
        justify-content: center;
        padding: 0.82rem 0 1rem;
    }

    .lh-about-hero h1 {
        font-size: clamp(1.96rem, 8.1vw, 2.72rem);
    }

    .lh-about-hero p {
        font-size: 0.88rem;
    }

    .lh-about-overview {
        padding: 0 0 2.6rem;
    }

    .lh-about-overview-grid {
        margin-top: 0;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lh-about-overview-image {
        min-height: 350px;
    }

    .lh-about-overview-image img {
        min-height: 350px;
        max-height: 420px;
    }

    .lh-about-overview-play {
        width: 82px;
        height: 82px;
        top: 56%;
    }

    .lh-about-overview-play::before {
        inset: -12px;
    }

    .lh-about-overview-play::after {
        left: 33px;
        top: 26px;
        border-left-width: 15px;
        border-top-width: 9px;
        border-bottom-width: 9px;
    }

    .lh-about-overview-card {
        padding: 1.35rem 1rem 1.25rem;
    }

    .lh-about-overview-card p {
        font-size: 0.92rem;
        line-height: 1.5;
        font-weight: 500;
    }

    .lh-about-why-list li {
        font-size: 0.9rem;
    }

    .lh-about-stats {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .lh-about-stat {
        border-top: 1px solid #d7e0ea;
        padding-top: 0.6rem;
    }

    .lh-about-team {
        padding-bottom: 3.3rem;
    }

    .lh-about-team-grid {
        grid-template-columns: 1fr;
    }

    .lh-about-member-body h3 {
        font-size: 1.45rem;
    }

    .lh-about-member-body p {
        font-size: 0.95rem;
    }

    .lh-contact-hero-inner {
        min-height: 248px;
        padding: 1rem 0 1.4rem;
    }

    .lh-contact-hero h1 {
        font-size: clamp(2rem, 8.4vw, 2.8rem);
    }

    .lh-contact-hero p {
        font-size: 0.9rem;
    }

    .lh-page-hero {
        min-height: 286px;
    }

    .lh-page-hero-inner {
        min-height: 226px;
        justify-content: center;
        padding: 0.82rem 0 1rem;
    }

    .lh-page-hero h1 {
        font-size: clamp(1.96rem, 8.1vw, 2.72rem);
    }

    .lh-page-hero p {
        font-size: 0.88rem;
    }

    .lh-contact-map-section {
        padding: 0.75rem 0 1.35rem;
    }

    .lh-contact-map-frame iframe {
        height: 270px;
    }

    .lh-contact-main {
        padding-bottom: 3rem;
    }

    .lh-contact-form-card,
    .lh-contact-info-panel {
        padding: 1rem 0.88rem 1.05rem;
    }

    .lh-terms-doc {
        padding: 1.7rem 0 2.6rem;
    }

    .lh-terms-paper {
        padding: 1.05rem 0.9rem;
    }

    .lh-terms-item h3 {
        font-size: 1.01rem;
    }

    .lh-terms-item p {
        font-size: 0.9rem;
        line-height: 1.58;
    }

    .lh-footer-grid {
        gap: 1.6rem;
        padding: 2.1rem 0 1.25rem;
    }

    .lh-footer-about {
        grid-column: auto;
    }

    .lh-footer-line {
        margin: 0.78rem 0 1rem;
    }

    .lh-footer-tagline {
        font-size: 1.28rem;
    }

    .lh-footer-contact a,
    .lh-footer-nav a {
        font-size: 1rem;
    }

    .lh-team-card,
    .lh-team-card-inner {
        min-height: 342px;
    }

    .lh-team-back {
        padding: 1rem 0.95rem 0.9rem;
    }

    .lh-team-bio {
        font-size: 0.92rem;
    }

    .lh-booking {
        padding: 3.4rem 0;
    }

    .lh-booking-overlay {
        background: linear-gradient(180deg, rgba(17, 22, 30, 0.79), rgba(17, 22, 30, 0.62));
    }

    .lh-booking-hours {
        padding: 1.35rem 1.1rem;
    }

    .lh-booking-hours h2 {
        font-size: 2rem;
    }

    .lh-booking-hours li {
        font-size: 1rem;
    }

    .lh-booking-card {
        padding: 1rem 0.92rem 1.15rem;
    }

    .lh-booking-stage-controls,
    .lh-booking-agenda {
        padding: 0.92rem;
    }

    .lh-booking-checkout-card {
        padding: 0.92rem;
    }

    .lh-booking-checkout-shell {
        grid-template-columns: 1fr;
    }

    .lh-booking-service-bar {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .lh-booking-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lh-booking-head h2 {
        font-size: 1.9rem;
    }

    .lh-booking-agenda-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .lh-booking-agenda-status {
        max-width: none;
        text-align: left;
    }

    .lh-booking-scheduler {
        grid-template-columns: 1fr;
    }

    .lh-booking-summary-panel {
        grid-template-columns: 1fr;
        border-right: 0;
        border-bottom: 1px solid rgba(223, 231, 241, 0.98);
    }

    .lh-booking-summary-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lh-booking-steps {
        grid-template-columns: 1fr;
    }

    .lh-booking-step-card {
        min-height: 0;
    }

    .lh-booking-checkout-head {
        grid-template-columns: 1fr;
        display: grid;
    }

    .lh-booking-checkout-note {
        max-width: none;
        text-align: left;
    }

    .lh-booking-checkout-grid {
        grid-template-columns: 1fr;
    }

    .lh-booking-calendar-panel {
        border-right: 0;
        border-top: 1px solid rgba(137, 160, 190, 0.2);
        border-bottom: 1px solid rgba(137, 160, 190, 0.2);
    }

    .lh-booking-slot-list {
        max-height: none;
    }

    .lh-booking-calendar-day {
        min-height: 74px;
    }

    .lh-booking-weekdays span,
    .lh-booking-calendar-day-meta {
        font-size: 0.68rem;
    }

    .lh-portfolio-canvas {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
        gap: 0.8rem;
    }

    .lh-portfolio-shell {
        padding-inline: 0.35rem;
    }

    .lh-portfolio-shot:nth-of-type(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .lh-portfolio-shot:nth-of-type(1) {
        min-height: 250px;
    }

    .lh-proof-stats-grid {
        grid-template-columns: 1fr;
    }

    .lh-proof-stat + .lh-proof-stat {
        border-left: 0;
        border-top: 1px solid #e5e6ea;
    }

    .lh-proof-testimonials {
        padding: 2.7rem 0 2.4rem;
    }

    .lh-proof-bg {
        inset: -90px 0 -90px;
    }

    .lh-proof-slides {
        border-radius: 18px;
        min-height: 0;
    }

    .lh-proof-slide {
        position: relative;
        inset: auto;
        display: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        padding: 1.6rem 1.1rem;
    }

    .lh-proof-slide.is-active {
        display: flex;
    }

    .lh-proof-controls {
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .lh-proof-dots {
        max-width: calc(100vw - 7.8rem);
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.2rem;
        scrollbar-width: thin;
    }

    .lh-proof-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.32rem;
    }

    .lh-proof-dot {
        width: 52px;
        height: 52px;
    }

    .lh-contact-cards {
        margin-top: 0;
        padding-top: 1rem;
    }

    .lh-card {
        border-width: 1px;
        border-radius: 16px;
    }

    .site-body.page-home .lh-hero {
        --lh-hero-mobile-top-offset: 0px;
        --lh-hero-mobile-frame-h: clamp(340px, 78vw, 430px);
        margin-top: 0;
        padding-top: 0;
        min-height: var(--lh-hero-mobile-frame-h);
        padding-bottom: 1rem;
        background: #f3f4f6;
    }

    .site-body.page-home .lh-hero .lh-hero-slides {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        overflow: hidden;
        background: #111a28;
    }

    .site-body.page-home .lh-hero .lh-hero-overlay {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        background: linear-gradient(180deg, rgba(21, 29, 40, 0.58), rgba(20, 28, 39, 0.48));
    }

    .site-body.page-home .lh-hero .lh-hero-controls {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 0.35rem;
    }

    .site-body.page-home .lh-hero .lh-hero-control {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        min-height: var(--lh-hero-mobile-frame-h);
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0.95rem;
        justify-content: center;
        gap: 0.55rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-body.page-home .lh-hero .lh-script {
        margin: 0;
        max-width: 15.5ch;
        font-size: clamp(1.9rem, 7.9vw, 2.5rem);
        line-height: 0.95;
        letter-spacing: 0.01em;
        color: #d8aa4d;
        background: linear-gradient(180deg, #f6df9b 0%, #e2bf6c 48%, #b8862b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:
            0 2px 10px rgba(20, 16, 8, 0.35),
            0 1px 0 rgba(255, 238, 180, 0.35);
    }

    .site-body.page-home .lh-hero h1 {
        margin: 0;
        max-width: 11.5ch;
        font-size: clamp(1.85rem, 8vw, 2.4rem);
        line-height: 1;
    }

    .site-body.page-home .lh-hero p {
        margin: 0 auto;
        margin-inline: auto;
        margin-bottom: 0.78rem;
        font-size: clamp(0.93rem, 3.9vw, 1.03rem);
        line-height: 1.34;
        max-width: 23.5ch;
    }

    .site-body.page-home .lh-hero .lh-btn-primary {
        min-width: clamp(204px, 64vw, 266px);
        padding: 0.76rem 1.18rem;
    }

    .site-body.page-home .lh-hero .lh-hero-slide,
    .site-body.page-home .lh-hero .lh-hero-slide.is-active {
        transform: none;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::before {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center 36%;
        z-index: 1;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::after {
        display: none;
    }

    /* Skip logo-like slides in mobile/tablet hero */
    .lh-hero-slide[data-mobile-skip="1"] {
        display: none !important;
    }

    .admin-layout {
        min-height: auto;
        height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
        position: relative;
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 78px;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        padding-bottom: 1rem;
        transform: translateX(-110%);
        transition: transform 0.22s ease;
        z-index: 62;
    }

    .admin-body.admin-mobile-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-content {
        min-height: 100vh;
        height: auto;
        overflow: visible;
        padding: 0 0.82rem 0.82rem;
        position: relative;
    }

    .admin-content::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(10, 16, 27, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 58;
    }

    .admin-body.admin-mobile-sidebar-open .admin-content::before {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-body .flash-wrap {
        top: 0;
    }

    .admin-sidebar-toggle {
        display: inline-flex;
    }

    .admin-body.admin-sidebar-collapsed .admin-layout {
        grid-template-columns: 1fr;
    }

}




/* Brochure page (closer to provided flyer style) */
.lh-brochure-hero {
    --lh-page-hero-bg: linear-gradient(135deg, #545f72 0%, #7f5f70 50%, #2f405a 100%);
}

.lh-brochure-sheet {
    padding: clamp(2.1rem, 4.6vw, 4rem) 0 clamp(2.6rem, 4.8vw, 4.6rem);
    background: linear-gradient(180deg, #f7f1f4 0%, #efe8ee 100%);
}

.lh-brochure-paper {
    position: relative;
    max-width: 1460px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 3px dashed rgba(214, 74, 117, 0.62);
    box-shadow: 0 26px 60px rgba(42, 31, 43, 0.2);
    padding: 10px;
}

.lh-brochure-document-html {
    min-height: 0;
    background: linear-gradient(180deg, #fff 0%, #fffdfd 100%);
    padding: clamp(1rem, 2vw, 1.8rem);
}

.lh-brochure-document-html h1,
.lh-brochure-document-html h2,
.lh-brochure-document-html h3,
.lh-brochure-document-html h4 {
    color: #d54878;
    margin: 0.45rem 0 0.35rem;
    line-height: 1.2;
}

.lh-brochure-document-html h1 {
    font-size: clamp(1.3rem, 2vw, 1.9rem);
}

.lh-brochure-document-html h2 {
    font-size: clamp(1.14rem, 1.7vw, 1.55rem);
}

.lh-brochure-document-html h3 {
    font-size: clamp(1rem, 1.35vw, 1.28rem);
}

.lh-brochure-document-html p,
.lh-brochure-document-html li {
    color: #212430;
    font-size: clamp(0.84rem, 0.96vw, 1rem);
    line-height: 1.33;
}

.lh-brochure-document-html ul,
.lh-brochure-document-html ol {
    margin: 0.35rem 0 0.7rem 1.05rem;
}

.lh-brochure-document-html hr {
    border: 0;
    border-top: 1px dashed rgba(214, 74, 117, 0.45);
    margin: 0.75rem 0;
}

.lh-brochure-layout {
    display: grid;
    grid-template-columns: 31% 69%;
    min-height: 0;
    align-items: stretch;
}

.lh-brochure-left {
    background: linear-gradient(180deg, #f4e4e9 0%, #f8edf1 100%);
    padding: 1.35rem 1.18rem 1.2rem;
    border-right: 1px dashed rgba(214, 74, 117, 0.35);
}

.lh-brochure-left h2 {
    margin: 0 0 0.9rem;
    color: #6f2c48;
    font-size: clamp(1.72rem, 2.35vw, 2.45rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lh-brochure-main {
    background: linear-gradient(180deg, #fff 0%, #fffdfd 100%);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
}

.lh-brochure-top-photo {
    margin: 0;
    min-height: 228px;
    border-bottom: 1px dashed rgba(214, 74, 117, 0.35);
    background:
        linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
        var(--brochure-top-image, url('https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=1700&q=80')) center 26%/cover no-repeat;
}

.lh-brochure-main-columns {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: 100%;
    align-items: start;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 76%, rgba(230, 185, 205, 0.16), transparent 26%),
        radial-gradient(circle at 60% 90%, rgba(240, 221, 229, 0.22), transparent 24%);
}

.lh-brochure-main-columns::after {
    content: "";
    position: absolute;
    inset: 42% 1rem 1rem 1rem;
    border-radius: 34px;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 253, 0.76) 44%, rgba(255, 247, 250, 0.58) 100%),
        var(--brochure-spa-bg, url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=2200&q=80')) center bottom/cover no-repeat;
    opacity: 0.52;
    filter: saturate(0.9) contrast(0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.lh-brochure-center {
    position: relative;
    z-index: 1;
    padding: 0.95rem 1.05rem 1.15rem;
}

.lh-brochure-right {
    position: relative;
    z-index: 1;
    padding: 0.95rem 1.05rem 1.15rem;
    border-left: 1px dashed rgba(214, 74, 117, 0.35);
}

.lh-brochure-rich h1,
.lh-brochure-rich h2,
.lh-brochure-rich h3,
.lh-brochure-rich h4 {
    margin: 0 0 0.32rem;
    color: #d54878;
    line-height: 1.12;
    font-weight: 700;
}

.lh-brochure-left .lh-brochure-rich h2 {
    color: #6f2c48;
    font-size: clamp(1.72rem, 2.35vw, 2.45rem);
    margin-bottom: 0.7rem;
}

.lh-brochure-rich h3 {
    font-size: clamp(1rem, 1.16vw, 1.3rem);
}

.lh-brochure-rich p,
.lh-brochure-rich li {
    margin: 0;
    color: #212430;
    font-size: clamp(0.84rem, 0.94vw, 1.02rem);
    line-height: 1.29;
    font-weight: 500;
}

.lh-brochure-rich p + p {
    margin-top: 0.34rem;
}

.lh-brochure-rich ul,
.lh-brochure-rich ol {
    margin: 0.5rem 0 0;
    padding-left: 1.02rem;
}

.lh-brochure-rich hr {
    border: 0;
    border-top: 1px dashed rgba(214, 74, 117, 0.45);
    margin: 0.7rem 0 0.68rem;
}

.lh-brochure-rich > * + * {
    margin-top: 0.12rem;
}

.lh-brochure-rich-right {
    text-align: center;
}

.lh-brochure-rich-right ul,
.lh-brochure-rich-right ol {
    list-style-position: inside;
    padding-left: 0;
}

.lh-brochure-column-stack {
    display: grid;
    gap: 0.58rem;
}

.lh-brochure-column-stack-right {
    text-align: left;
}

.lh-brochure-category + .lh-brochure-category {
    border-top: 1px dashed rgba(214, 74, 117, 0.45);
    padding-top: 0.56rem;
}

.lh-brochure-category h3,
.lh-brochure-category h4 {
    margin: 0;
}

.lh-brochure-service-stack {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.24rem;
}

.lh-brochure-service-item {
    display: grid;
    gap: 0.22rem;
    position: relative;
}

.lh-brochure-service-item + .lh-brochure-service-item {
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(214, 74, 117, 0.34);
}

.lh-brochure-service-item h4 {
    margin: 0;
    color: #d54878;
    font-size: clamp(0.9rem, 1vw, 1.14rem);
    line-height: 1.12;
    font-weight: 800;
}

.lh-brochure-service-item p {
    margin: 0;
    color: #212430;
    font-size: clamp(0.79rem, 0.88vw, 0.95rem);
    line-height: 1.22;
    font-weight: 500;
}

.lh-brochure-service-copy {
    position: relative;
    display: grid;
    gap: 0.22rem;
    cursor: help;
    outline: none;
}

.lh-brochure-service-copy::after {
    content: attr(data-brochure-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    z-index: 8;
    width: min(320px, 78vw);
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
    background: rgba(28, 36, 52, 0.97);
    color: #f7f9fc;
    font-size: 0.83rem;
    line-height: 1.42;
    font-weight: 600;
    box-shadow: 0 18px 34px rgba(17, 25, 40, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.lh-brochure-service-copy::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: calc(100% + 0.16rem);
    z-index: 8;
    width: 12px;
    height: 12px;
    background: rgba(28, 36, 52, 0.97);
    transform: rotate(45deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.lh-brochure-service-copy:hover::after,
.lh-brochure-service-copy:hover::before,
.lh-brochure-service-copy:focus-visible::after,
.lh-brochure-service-copy:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.lh-brochure-service-copy:hover::after,
.lh-brochure-service-copy:focus-visible::after {
    transform: translateY(0);
}

.lh-brochure-service-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.34rem;
    margin-top: 0.1rem;
}

.lh-brochure-service-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: 0.12rem;
}

.lh-brochure-service-meta span,
.lh-brochure-service-meta strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: clamp(0.72rem, 0.82vw, 0.88rem);
    line-height: 1;
}

.lh-brochure-service-meta span {
    background: rgba(111, 44, 72, 0.08);
    color: #6f2c48;
    font-weight: 700;
}

.lh-brochure-service-meta strong {
    background: rgba(213, 72, 120, 0.12);
    color: #bf2c68;
    font-weight: 800;
}

.lh-brochure-service-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0.34rem 0.78rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #26c4d3 0%, #18afc0 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(24, 175, 192, 0.16);
}

.lh-brochure-service-book:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(24, 175, 192, 0.2);
}

@media (max-width: 640px) {
    .lh-brochure-service-actions {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .lh-brochure-service-book {
        width: fit-content;
    }
}

.lh-brochure-block + .lh-brochure-block {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
}

.lh-brochure-block h3 {
    margin: 0 0 0.3rem;
    color: #d54878;
    font-size: clamp(1rem, 1.16vw, 1.3rem);
    line-height: 1.14;
    font-weight: 700;
}

.lh-brochure-block p {
    margin: 0;
    color: #212430;
    font-size: clamp(0.84rem, 0.94vw, 1.02rem);
    line-height: 1.29;
    font-weight: 500;
}

.lh-brochure-block ul {
    margin: 0.5rem 0 0;
    padding-left: 1.02rem;
}

.lh-brochure-block li {
    color: #212430;
    font-size: clamp(0.83rem, 0.9vw, 0.99rem);
    line-height: 1.24;
}

.lh-brochure-two-cols {
    columns: 2;
    column-gap: 1.1rem;
}

.lh-brochure-align-right {
    text-align: right;
}

.lh-brochure-align-right ul {
    list-style-position: inside;
    padding-left: 0;
}

.lh-brochure-polaroids {
    position: relative;
    margin-top: 0.95rem;
    min-height: 188px;
}

.lh-polaroid {
    position: absolute;
    width: 52%;
    aspect-ratio: 4 / 3;
    border-radius: 5px;
    background: #fff;
    border: 8px solid #fff;
    box-shadow: 0 10px 24px rgba(37, 30, 42, 0.24);
}

.lh-polaroid::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
}

.lh-polaroid-a {
    left: 3%;
    top: 18px;
    transform: rotate(-12deg);
}

.lh-polaroid-a::after {
    background: var(--brochure-polaroid-a, url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?auto=format&fit=crop&w=900&q=80')) center/cover no-repeat;
}

.lh-polaroid-b {
    right: 2%;
    top: 26px;
    transform: rotate(10deg);
}

.lh-polaroid-b::after {
    background: var(--brochure-polaroid-b, url('https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?auto=format&fit=crop&w=900&q=80')) center/cover no-repeat;
}

@media (max-width: 1280px) {
    .lh-brochure-layout {
        grid-template-columns: 1fr;
    }

    .lh-brochure-left {
        border-right: 0;
        border-bottom: 1px dashed rgba(214, 74, 117, 0.35);
    }
}

@media (max-width: 860px) {
    .lh-brochure-main-columns {
        grid-template-columns: 1fr;
    }

    .lh-brochure-main-columns::after {
        display: none;
    }

    .lh-brochure-right {
        border-left: 0;
        border-top: 1px dashed rgba(214, 74, 117, 0.35);
    }

    .lh-brochure-align-right {
        text-align: left;
    }

    .lh-brochure-align-right ul {
        list-style-position: outside;
        padding-left: 1.02rem;
    }

    .lh-brochure-two-cols {
        columns: 1;
    }
}

/* Clients Pro Page */
.admin-body.admin-page-clients-pro .admin-content {
    background: #f6f7fa;
}

.clients-pro-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.12rem;
    align-items: start;
    margin-top: 0.35rem;
}

.clients-pro-side {
    position: sticky;
    top: 5.35rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dee3ee;
    box-shadow: 0 8px 16px rgba(17, 35, 55, 0.05);
}

.clients-pro-side-head {
    min-height: 74px;
    padding: 0 1rem;
    border-bottom: 1px solid #e2e8f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.clients-pro-side-head h2 {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 800;
    color: #111b2b;
}

.clients-pro-side-collapse {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 50%;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #222f44;
    box-shadow: 0 4px 10px rgba(16, 30, 48, 0.12);
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0;
}

.clients-pro-side-collapse:hover {
    background: #f2f4f9;
    color: #1e2b3f;
}

.clients-pro-side-nav {
    display: grid;
    gap: 0.3rem;
    padding: 0.8rem;
    background: #ffffff;
}

.clients-pro-side-nav a {
    border-radius: 11px;
    min-height: 46px;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    font-size: 1.04rem;
    font-weight: 700;
    color: #1a2739;
    border: 1px solid transparent;
}

.clients-pro-side-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6f0;
}

.clients-pro-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
    color: #1b2230;
}

.clients-pro-side-nav a[aria-disabled='true'] {
    opacity: 0.65;
}

@media (max-width: 640px) {
    .login-card-auth,
    .login-card-forgot,
    .login-card-reset {
        border-radius: 20px;
    }

    .login-card-auth {
        border-radius: 0;
    }

    .login-form-panel,
    .login-brand-panel {
        padding: 1.05rem;
    }

    .login-brand-panel {
        min-height: 300px;
    }

    .login-brand-logo {
        width: min(220px, 76%);
        max-height: 112px;
        margin-bottom: 0.9rem;
    }

    .login-form-panel {
        padding: 1.35rem 1.05rem 1.6rem;
    }

    .login-form-logo {
        width: min(180px, 62%);
        max-height: 72px;
    }

    .login-card-forgot {
        padding: 1.55rem 1.15rem;
    }

    .login-card-forgot .login-recovery-title {
        font-size: 1.28rem;
    }

    .login-recovery-subtitle {
        font-size: 0.95rem;
    }

    .login-recovery-back {
        font-size: 0.94rem;
    }

    .login-card-reset {
        padding: 1.55rem 1rem;
    }

    .login-reset-shell {
        width: min(100%, 360px);
    }

    .login-reset-avatar {
        width: 72px;
        height: 72px;
        margin-bottom: 1rem;
    }

    .login-card-reset .login-reset-title {
        font-size: 1.62rem;
    }

    .login-reset-email,
    .login-reset-rule,
    .login-reset-back {
        font-size: 0.93rem;
    }
}

.clients-pro-side-section {
    margin: 1.15rem 0.72rem 0.2rem;
    color: #111b2b;
    font-size: 1.04rem;
    line-height: 1.3;
    font-weight: 800;
}

.clients-pro-side-divider {
    margin: 0.55rem 0.72rem 0.35rem;
    border: 0;
    border-top: 1px solid #dfe4ec;
}

.clients-pro-main {
    min-width: 0;
}

.clients-pro-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.65rem 0 1rem;
}

.clients-pro-title-wrap h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    color: #0f1827;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.clients-pro-title-wrap h1 span {
    width: 29px;
    height: 29px;
    border-radius: 999px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #25354d;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clients-pro-title-wrap p {
    margin: 0.45rem 0 0;
    color: #5f6f84;
    font-size: 1rem;
    font-weight: 500;
}

.clients-pro-title-wrap p a {
    color: #5f56ff;
    font-weight: 700;
}

.clients-pro-title-wrap h1.clients-pro-title-edit {
    display: grid;
    align-items: start;
    justify-items: start;
    gap: 0.18rem;
    line-height: 1.04;
}

.clients-pro-title-wrap h1.clients-pro-title-edit small {
    display: block;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    font-weight: 700;
    color: #5f6f84;
    line-height: 1.2;
    margin-top: 0.02rem;
    letter-spacing: 0;
}

.clients-pro-actions {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex-shrink: 0;
}

.clients-pro-options {
    position: relative;
}

.clients-pro-options summary {
    min-height: 50px;
    border-radius: 999px;
    border: 1px solid #d5dde9;
    background: #ffffff;
    color: #111a2a;
    font-size: 1.06rem;
    font-weight: 700;
    padding: 0.68rem 1.22rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    cursor: pointer;
}

.clients-pro-options summary::-webkit-details-marker {
    display: none;
}

.clients-pro-options summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1.05rem;
    line-height: 1;
    color: #232f43;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.clients-pro-options-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.42rem);
    min-width: 210px;
    border-radius: 14px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(14, 28, 45, 0.16);
    padding: 0.4rem;
    display: grid;
    gap: 0.28rem;
    z-index: 9;
}

.clients-pro-options-menu a {
    border-radius: 10px;
    padding: 0.56rem 0.7rem;
    color: #203049;
    font-size: 0.92rem;
    font-weight: 700;
}

.clients-pro-options-menu a:hover {
    background: #eef4fb;
}

.clients-pro-options-menu form {
    margin: 0;
}

.clients-pro-options-menu button.clients-pro-option-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.clients-pro-add-btn {
    min-height: 50px;
    border-radius: 999px;
    padding: 0.7rem 1.42rem;
    background: #0b0b10;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
}

.clients-pro-add-btn:hover {
    background: #1d1e25;
}

.clients-pro-options.clients-pro-add-dropdown summary {
    min-height: 50px;
    border-radius: 999px;
    padding: 0.7rem 1.42rem;
    border: 1px solid #0b0b10;
    background: #0b0b10;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: none;
}

.clients-pro-options.clients-pro-add-dropdown summary:hover,
.clients-pro-options.clients-pro-add-dropdown[open] summary {
    background: #1d1e25;
    border-color: #1d1e25;
}

.clients-pro-options.clients-pro-add-dropdown summary::after {
    color: #ffffff;
}

.clients-pro-options.clients-pro-add-dropdown .clients-pro-options-menu {
    min-width: 210px;
    padding: 0.55rem 0;
    gap: 0;
}

.clients-pro-options.clients-pro-add-dropdown .clients-pro-options-menu a {
    padding: 0.86rem 1.12rem;
    font-size: 0.96rem;
    font-weight: 700;
    color: #1f2d40;
}

.clients-pro-options.clients-pro-add-dropdown .clients-pro-options-menu a:hover {
    background: #f3f6fb;
}

.clients-pro-form-panel {
    margin-bottom: 1rem;
}

.clients-pro-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.clients-pro-form-head h2 {
    margin: 0;
    color: #17263a;
    font-size: 1.44rem;
    line-height: 1.1;
}

.clients-pro-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.82rem;
    align-items: end;
}

.clients-pro-form-actions {
    justify-content: end;
}

.clients-pro-form-actions button {
    width: 100%;
}

.clients-pro-list-panel {
    overflow: visible;
}

.clients-pro-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.7rem;
    align-items: center;
}

.clients-pro-search {
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid #d5ddea;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    gap: 0.6rem;
}

.clients-pro-search input {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    height: auto;
    color: #1d2a3d;
    font-size: 1rem;
    font-weight: 600;
}

.clients-pro-search input:focus {
    box-shadow: none;
}

.clients-pro-search-icon {
    color: #8a99ad;
    font-size: 1rem;
    line-height: 1;
}

.clients-pro-filter-btn {
    min-height: 50px;
    border-radius: 999px;
    padding-inline: 1.1rem;
    font-size: 1rem;
}

.clients-pro-sort {
    min-width: 295px;
}

.clients-pro-sort select {
    min-height: 52px;
    border-radius: 999px;
    border-color: #d5ddeb;
    padding-inline: 1.1rem 2.3rem;
    color: #1f2c40;
    font-size: 0.98rem;
    font-weight: 700;
}

.clients-pro-table-wrap {
    border: 1px solid #e0e5ef;
    border-radius: 14px;
    overflow: auto;
}

.clients-pro-table {
    width: 100%;
    min-width: 900px;
}

.clients-pro-table th,
.clients-pro-table td {
    border-bottom: 1px solid #e6ebf3;
    padding: 0.9rem 0.72rem;
    vertical-align: middle;
}

.clients-pro-table th {
    color: #0f1828;
    font-size: 0.79rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

.clients-pro-table tbody tr:hover {
    background: #f8faff;
}

/* Make rows feel clickable (except on inputs/links). */
.clients-pro-row {
    cursor: pointer;
}

.clients-pro-row a,
.clients-pro-row button,
.clients-pro-row input,
.clients-pro-row select,
.clients-pro-row textarea,
.clients-pro-row label {
    cursor: auto;
}

.clients-pro-table .is-check {
    width: 48px;
    text-align: center;
}

.clients-pro-table .is-check input {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.clients-pro-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #111a28;
}

.clients-pro-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #eeedf9;
    color: #6656d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
}

.clients-pro-name-copy {
    display: grid;
    gap: 0.15rem;
}

.clients-pro-name-copy strong {
    color: #101a28;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 800;
}

.clients-pro-name-copy small {
    color: #607188;
    font-size: 0.97rem;
    line-height: 1.2;
    font-weight: 500;
}

.clients-pro-results {
    margin: 1rem 0 0;
    text-align: center;
    color: #697b91;
    font-size: 0.95rem;
    font-weight: 600;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1180px) {
    .clients-pro-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .clients-pro-side {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 68px);
        max-height: calc(100vh - 68px);
        min-height: calc(100vh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
        overflow-y: auto;
        background: #ffffff;
        padding: 0;
    }
}

@media (max-width: 980px) {
    .clients-pro-header {
        flex-direction: column;
        align-items: stretch;
    }

    .clients-pro-actions {
        justify-content: flex-start;
    }

    .clients-pro-toolbar {
        grid-template-columns: 1fr;
    }

    .clients-pro-sort {
        min-width: 0;
        width: 100%;
    }

    .clients-pro-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Clients Pro Refinement */
.admin-body.admin-page-clients-pro .admin-content {
    background: #f7f7f8;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-clients-pro .admin-topbar {
    margin: 0;
}

.clients-pro-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    min-height: calc(100vh - 86px);
    align-items: stretch;
}

.clients-pro-side {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 1px solid #dedfe4;
    box-shadow: none;
    overflow-y: auto;
}

.clients-pro-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
}

.clients-pro-side-head h2 {
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.clients-pro-side-collapse {
    width: 34px;
    height: 34px;
    min-height: 34px;
    box-shadow: none;
    border-color: #d9dae1;
    font-size: 1.24rem;
}

.clients-pro-side-nav {
    padding: 0.48rem 0.48rem 0.9rem;
    gap: 0.2rem;
    flex: 1 1 auto;
    overflow-y: auto;
    background: #ffffff;
}

.clients-pro-main {
    padding: 0.75rem 1rem 1.2rem;
}

.clients-pro-side-nav a {
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 10px;
}

.clients-pro-header {
    margin: 0.65rem 0 0.95rem;
}

.clients-pro-header.services-editor-top {
    margin: 0 0 0.6rem;
}

.clients-pro-title-wrap h1 {
    font-size: clamp(1.2rem, 1.45vw, 1.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.clients-pro-title-wrap h1 span {
    width: 27px;
    height: 27px;
    font-size: 0.8rem;
}

.clients-pro-title-wrap p {
    margin-top: 0.3rem;
    font-size: 0.88rem;
    font-weight: 650;
    color: #6c7280;
}

.clients-pro-title-wrap h1.clients-pro-title-edit small {
    font-size: 0.9rem;
}

.clients-pro-actions {
    gap: 0.56rem;
}

.clients-pro-options summary {
    min-height: 42px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-color: #d5d7df;
}

.clients-pro-options[open] summary::after {
    content: 'expand_less';
}

.clients-pro-options-menu {
    top: calc(100% + 0.32rem);
    min-width: 218px;
    border-radius: 14px;
    border: 1px solid #e0e2e9;
    box-shadow: 0 15px 28px rgba(21, 30, 45, 0.16);
    padding: 0.4rem;
    gap: 0.12rem;
}

.clients-pro-options-label {
    margin: 0.16rem 0.3rem 0.1rem;
    color: #646d7d;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.clients-pro-options-sep {
    height: 1px;
    background: #eceef3;
    margin: 0.22rem 0;
}

.clients-pro-option-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 10px;
    padding: 0.58rem 0.62rem;
    color: #151d2d;
    font-size: 0.91rem;
    font-weight: 700;
}

.clients-pro-option-item:hover {
    background: #f2f4f9;
}

.clients-pro-option-ico {
    width: 28px;
    min-width: 28px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4f5b6f;
    font-size: 0.98rem;
    font-weight: 800;
    border-radius: 7px;
}

.clients-pro-option-ico[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
}

.clients-pro-add-btn {
    min-height: 42px;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.clients-pro-list-panel {
    padding: 0.8rem;
    border-radius: 14px;
    box-shadow: none;
}

.clients-pro-toolbar {
    background: #f1f2f4;
    border-radius: 12px;
    padding: 0.58rem;
    gap: 0.56rem;
}

.clients-pro-search {
    min-height: 40px;
    border-color: #d8dae1;
}

.clients-pro-search input {
    font-size: 0.94rem;
    font-weight: 600;
}

.clients-pro-filter-btn {
    min-height: 40px;
    font-size: 0.9rem;
    padding-inline: 0.9rem;
}

.clients-pro-sort {
    min-width: 270px;
}

.clients-pro-sort select {
    min-height: 40px;
    font-size: 0.9rem;
    font-weight: 700;
}

.clients-pro-table-wrap {
    border: 0;
    border-radius: 0;
}

.clients-pro-table {
    min-width: 840px;
}

.clients-pro-table th,
.clients-pro-table td {
    padding: 0.72rem 0.62rem;
}

.clients-pro-table th {
    font-size: 0.88rem;
    font-weight: 800;
    color: #111827;
}

.clients-pro-table td {
    font-size: 0.9rem;
    color: #222b39;
}

.clients-pro-table .is-check {
    width: 44px;
}

.clients-pro-table .is-check input {
    width: 21px;
    height: 21px;
    border-radius: 6px;
}

.clients-pro-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
    overflow: hidden;
}

.clients-pro-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clients-pro-avatar img[hidden] {
    display: none !important;
}

.clients-pro-avatar.is-photo {
    background: #ffffff;
    color: transparent;
}

.clients-pro-name-copy strong {
    font-size: 0.99rem;
}

.clients-pro-name-copy small {
    font-size: 0.91rem;
    color: #617087;
}

.clients-pro-results {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.clients-pro-profile-panel {
    padding: 0.85rem;
    border-radius: 14px;
    box-shadow: none;
}

.clients-pro-profile-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.clients-pro-profile-nav {
    border: 1px solid #dedfe4;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.72rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.clients-pro-profile-nav h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #171d29;
    font-weight: 800;
}

.clients-pro-profile-nav a {
    min-height: 40px;
    border-radius: 10px;
    padding: 0.62rem 0.8rem;
    display: flex;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1c2534;
    margin: 0;
}

.clients-pro-profile-nav a:hover {
    background: #f3f4f8;
}

.clients-pro-profile-nav a.is-active {
    background: #eeedf9;
    color: #22263b;
}

.clients-pro-profile-nav hr {
    border: 0;
    height: 1px;
    background: #e8eaf0;
    margin: 0.5rem 0;
}

.clients-pro-profile-main {
    min-width: 0;
}

.clients-pro-profile-head h2 {
    margin: 0;
    font-size: 1.52rem;
    letter-spacing: -0.015em;
    line-height: 1.02;
    color: #131a27;
    display: inline-block;
    position: relative;
}

.clients-pro-profile-head h2::after {
    content: '';
    display: block;
    width: 92px;
    height: 3px;
    margin-top: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #6358e7 0%, #26c5da 100%);
    box-shadow: 0 3px 10px rgba(64, 90, 160, 0.22);
}

.clients-pro-profile-head p {
    margin: 0.34rem 0 0;
    font-size: 0.95rem;
    color: #6a7281;
    font-weight: 600;
    max-width: 720px;
}

.clients-pro-avatar-wrap {
    margin-top: 0.72rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.86rem;
    flex-wrap: wrap;
}

.clients-pro-avatar-lg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #ecebf9;
    color: #6358e7;
    font-size: 2rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clients-pro-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clients-pro-avatar-lg img[hidden] {
    display: none !important;
}

.clients-pro-avatar-lg-interactive {
    cursor: pointer;
    border: 2px dashed #cfd7ea;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.clients-pro-avatar-lg-interactive:hover {
    border-color: #9fb0d6;
    box-shadow: 0 8px 18px rgba(64, 82, 113, 0.16);
    transform: translateY(-1px);
}

.clients-pro-avatar-lg-interactive.has-photo {
    border-style: solid;
    border-color: #d3dced;
    background: #ffffff;
}

.clients-pro-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.clients-avatar-action-btn {
    min-height: 38px !important;
    padding: 0.4rem 0.78rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d6dde8 !important;
    box-shadow: none !important;
}

.clients-avatar-action-btn:hover,
.clients-avatar-action-btn:focus-visible {
    background: #f3f6fa !important;
    color: #0f172a !important;
    border-color: #c7d0de !important;
}

/* Ajustes para que la cabecera y avatar en `admin/clients.php` queden como en `admin/sales.php` */
.admin-body.admin-page-clients-pro .clients-pro-header {
    /* Aumentar espacio superior para que el encabezado quede un poco más abajo */
    margin: 1.15rem 0 1rem;
}

.clients-camera-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: transparent;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.clients-camera-modal-backdrop[hidden] {
    display: none !important;
}

.clients-camera-modal {
    width: min(520px, 100%);
    border-radius: 16px;
    border: 1px solid #d6dce7;
    background: #ffffff;
    box-shadow: 0 20px 42px rgba(14, 23, 36, 0.28);
    overflow: hidden;
}

.clients-camera-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.72rem 0.9rem;
    border-bottom: 1px solid #e7ebf2;
}

.clients-camera-modal-head h3 {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 800;
    color: #121a29;
}

.clients-camera-close {
    width: 34px;
    min-height: 34px !important;
    height: 34px;
    border-radius: 9px;
    border: 1px solid #d7deea;
    background: #ffffff;
    color: #243149;
    font-size: 1.42rem;
    line-height: 1;
    padding: 0;
}

.clients-camera-close:hover {
    background: #f3f6fb;
}

.clients-camera-body {
    padding: 0.9rem;
}

.clients-camera-body video {
    width: 100%;
    display: block;
    border-radius: 12px;
    border: 1px solid #d7deea;
    background: #0f1623;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.clients-camera-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.56rem;
    padding: 0.75rem 0.9rem 0.9rem;
}
}

.clients-pro-profile-form {
    display: grid;
    gap: 0.65rem;
}

.clients-pro-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.86rem 0.82rem;
}

.clients-pro-fields-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.clients-pro-phone-group {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.56rem;
}

.clients-pro-prefix-select {
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.clients-pro-date-year {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 0.56rem;
}

.clients-pro-profile-form .form-group label {
    font-size: 0.86rem;
    letter-spacing: 0;
    color: #2a3446;
    text-transform: none;
    font-weight: 700;
}

.clients-pro-profile-form input,
.clients-pro-profile-form textarea {
    min-height: 46px;
    border-radius: 9px;
    border-color: #d8dbe3;
    font-size: 0.93rem;
    color: #1f2a39;
    font-weight: 600;
    background: #ffffff;
}

.clients-pro-profile-form select {
    min-height: 46px;
    border-radius: 9px;
    border-color: #d8dbe3;
    font-size: 0.93rem;
    color: #1f2a39;
    font-weight: 600;
    background: #ffffff;
}

.clients-pro-field-year input {
    max-width: 120px;
}

.clients-pro-date-input-wrap {
    position: relative;
}

.clients-pro-date-input-wrap input {
    padding-right: 2.2rem;
}

.clients-pro-date-input-wrap #birth_day_month_display {
    cursor: pointer;
}

.clients-pro-date-picker-native {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.clients-pro-date-input-wrap::after {
    content: 'calendar_month';
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #7d8798;
    pointer-events: none;
}

.clients-pro-profile-form textarea {
    min-height: 112px;
}

.clients-pro-divider {
    border: 0;
    height: 1px;
    background: #e5e8ef;
    margin: 2.1rem 0 0.85rem;
}

.clients-pro-profile-form h3 {
    margin: 0;
    font-size: 1.22rem;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: #151d2b;
}

.clients-emergency-block {
    display: grid;
    gap: 0.78rem;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 1rem 1rem 0.96rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    box-shadow: 0 8px 20px rgba(18, 30, 48, 0.06);
}

.clients-emergency-block h3 {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.1;
    color: #141f31;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.clients-emergency-block h3::before {
    content: 'contacts';
    font-family: 'Material Symbols Outlined';
    font-size: 1.02rem;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5f54e8;
    background: rgba(95, 84, 232, 0.14);
}

.clients-emergency-block .form-group {
    margin-bottom: 0;
}

.clients-emergency-form .clients-pro-divider {
    margin: 0.36rem 0 0.24rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(99, 88, 231, 0.34) 0%, rgba(38, 197, 218, 0.28) 100%);
}

.clients-emergency-form .clients-pro-profile-actions {
    margin-top: 0.45rem;
    padding-top: 0.66rem;
    border-top: 1px solid #e3e8f2;
}

.clients-settings-form {
    gap: 0.85rem;
}

.clients-settings-group {
    display: grid;
    gap: 0.54rem;
}

.clients-settings-group h3 {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.1;
    color: #121a29;
    font-weight: 800;
}

.clients-settings-group .clients-pro-muted {
    margin: 0 0 0.34rem;
}

.clients-settings-check {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 36px;
    margin: 0;
    cursor: pointer;
    color: #1a2333;
    font-size: 0.97rem;
    font-weight: 650;
    letter-spacing: 0;
}

.clients-settings-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #6358e7;
    cursor: pointer;
}

button.is-saving,
input[type="submit"].is-saving {
    cursor: wait !important;
    pointer-events: none !important;
    opacity: 0.96;
}

button.is-disabled-save,
input[type="submit"].is-disabled-save {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.58 !important;
    filter: saturate(0.56);
    box-shadow: none !important;
}

.save-overlay-open {
    cursor: progress;
}

.global-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
}

.global-save-overlay[hidden] {
    display: none !important;
}

.global-save-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(245, 247, 251, 0.58);
    backdrop-filter: blur(6px);
}

.global-save-overlay-dialog {
    position: relative;
    min-width: min(280px, calc(100vw - 32px));
    padding: 1.35rem 1.4rem 1.2rem;
    border: 1px solid rgba(214, 222, 236, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 60px rgba(15, 23, 37, 0.2);
    display: grid;
    justify-items: center;
    gap: 0.8rem;
}

.global-save-overlay-spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(31, 198, 215, 0.16);
    border-top-color: rgba(31, 198, 215, 0.98);
    border-right-color: rgba(99, 88, 231, 0.78);
    animation: clientsDrawerSpin 0.8s linear infinite;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28);
}

.global-save-overlay-label {
    margin: 0;
    color: #1a2537;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.01em;
}

.btn-save-label {
    display: inline-flex;
    align-items: center;
}

.btn-save-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.btn-save-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.28;
    animation: btn-save-dot-pulse 1s ease-in-out infinite;
}

.btn-save-dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.btn-save-dots span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes btn-save-dot-pulse {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.25;
    }
    40% {
        transform: translateY(-2px);
        opacity: 0.92;
    }
}

.clients-pro-muted {
    margin: 0 0 0.26rem;
    font-size: 0.94rem;
    color: #697485;
    font-weight: 600;
}

.clients-pro-additional-grid {
    margin-top: 0.65rem;
}

.clients-pro-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.clients-pro-aux-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: #6358e7;
}

.clients-pro-aux-link:hover {
    text-decoration: underline;
}

.clients-pro-field-help {
    margin: 0.42rem 0 0;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #697485;
    font-weight: 600;
}

.clients-pro-field-help .clients-pro-aux-link {
    margin-left: 0.2rem;
    font-size: 0.86rem;
}

.clients-pro-field-counter {
    font-size: 0.82rem;
    font-weight: 700;
    color: #6d7687;
}

.clients-address-form {
    max-width: 860px;
}

.clients-addresses-page {
    display: grid;
    gap: 0.86rem;
}

.clients-addresses-list {
    display: grid;
    gap: 0.7rem;
}

.clients-address-card {
    position: relative;
    border: 1px solid #e1e4eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.85rem 3rem 0.85rem 0.85rem;
}

.clients-address-card-main strong {
    display: block;
    font-size: 1.02rem;
    color: #111827;
}

.clients-address-card-main p {
    margin: 0.18rem 0 0;
    font-size: 0.92rem;
    color: #394357;
    line-height: 1.35;
}

.clients-address-card-menu {
    position: absolute;
    top: 0.52rem;
    right: 0.62rem;
    z-index: 30;
}

.clients-address-card-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #dce0e8;
    background: #fff;
    display: grid;
    place-items: center;
    color: #3a4356;
    font-size: 1.1rem;
}

.clients-address-card-menu > summary::-webkit-details-marker {
    display: none;
}

.clients-address-card-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 148px;
    border: 1px solid #dce0e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 37, 0.14);
    padding: 0.24rem;
    z-index: 20;
}

.clients-address-card-menu-list form {
    margin: 0;
}

.clients-address-card-menu-list a,
.clients-address-card-menu-list button {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 0.48rem 0.62rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #212b3c;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    line-height: 1.25;
    white-space: nowrap;
}

.clients-address-card-menu-list a:hover,
.clients-address-card-menu-list button:hover {
    background: #f2f4f8;
}

.clients-address-card-menu-list form button {
    color: #bf2f2f;
}

.clients-address-card-menu-list form button:hover {
    background: #fff2f2;
}

.clients-address-add-link {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: #6358e7;
    font-size: 0.95rem;
    font-weight: 700;
}

.clients-address-add-link span {
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 1px solid #a9a0f1;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    line-height: 1;
}

.clients-address-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 1rem 1rem;
}

.clients-address-modal {
    width: min(470px, 100%);
    max-height: calc(100vh - 5rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 16px;
    border: 1px solid #dce0e8;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(18, 27, 40, 0.2);
    overflow: hidden;
}

.clients-address-modal-head {
    padding: 0.9rem 1rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eceef4;
}

.clients-address-modal-head h3 {
    margin: 0;
    font-size: 1.78rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #121a2a;
}

.clients-address-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #202a3d;
    font-size: 1.35rem;
    line-height: 1;
}

.clients-address-modal-close:hover {
    background: #f2f4f8;
}

.clients-address-modal-body {
    overflow: auto;
    padding: 0.72rem 1rem 0.2rem;
    display: grid;
    gap: 0.74rem;
}

.clients-address-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
}

.clients-address-type {
    display: block;
}

.clients-address-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.clients-address-type-box {
    border: 1px solid #d8dce5;
    border-radius: 12px;
    min-height: 98px;
    padding: 0.72rem;
    display: grid;
    place-items: center;
    gap: 0.32rem;
    background: #ffffff;
}

.clients-address-type-icon::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.32rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #1f2a3d;
}

.clients-address-type-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #131b29;
}

.clients-address-type input:checked + .clients-address-type-box {
    border-color: #6358e7;
    box-shadow: inset 0 0 0 1px #6358e7;
    background: #fbfaff;
}

.clients-address-extra {
    border: 1px solid #e1e5ed;
    border-radius: 12px;
    padding: 0.92rem;
    background: #ffffff;
}

.clients-address-extra-head {
    margin-bottom: 0.62rem;
    color: #131b29;
    font-size: 0.96rem;
}

.clients-address-actions {
    justify-content: space-between;
    border-top: 1px solid #eceef4;
    margin-top: 0;
    padding: 0.68rem 1rem;
    background: #ffffff;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.staff-address-modal-backdrop {
    background: rgba(15, 23, 42, 0.18);
    align-items: center;
    padding: 1rem;
}

.staff-address-modal {
    width: min(720px, 100%);
    max-height: calc(100vh - 2.8rem);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.staff-address-modal .clients-address-modal-head {
    padding: 1.85rem 2rem 1rem;
    border-bottom: 0;
}

.staff-address-modal .clients-address-modal-head h3 {
    font-size: 1.15rem;
    line-height: 1.2;
}

.staff-address-modal .clients-address-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 1.55rem;
}

.staff-address-modal .clients-address-modal-body {
    padding: 0.45rem 2rem 1.5rem;
    gap: 1.3rem;
}

.staff-address-modal .form-group {
    display: grid;
    gap: 0.55rem;
}

.staff-address-modal .form-group label {
    color: #101828;
    font-size: 0.98rem;
    font-weight: 700;
}

.staff-address-modal .form-group input {
    min-height: 48px;
    border-radius: 10px;
}

.staff-address-modal .form-group select,
.staff-address-modal .clients-pro-prefix-select {
    min-height: 48px;
    border-radius: 10px;
}

.staff-compact-page,
.staff-emergency-page {
    gap: 0.72rem;
    align-content: start;
}

.staff-emergency-modal .clients-address-modal-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1rem;
    padding-top: 0.7rem;
}

.staff-emergency-modal .staff-emergency-phone-group {
    grid-template-columns: 96px minmax(0, 1fr);
}

.staff-address-modal .business-centers-location-input-wrap input,
.staff-address-modal #staff_address_line {
    padding-left: 3.35rem !important;
}

.staff-address-modal .business-centers-location-input-wrap .material-symbols-outlined {
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.05rem;
    line-height: 1;
    z-index: 2;
}

.staff-address-modal .business-centers-location-suggestions {
    margin-top: 0.4rem;
}

.staff-address-modal .business-centers-suggestion-btn {
    display: block;
    text-align: left;
    justify-content: flex-start;
}

.staff-address-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    border-top: 0;
    margin-top: 0;
    padding: 0 2rem 1.8rem;
    background: transparent;
    position: static;
}

.staff-address-actions .btn,
.staff-address-actions button {
    width: 100%;
    min-height: 54px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

.staff-address-actions .btn-outline {
    border-color: #d0d5dd;
    color: #101828;
    background: #ffffff;
}

.staff-address-actions .btn-outline:hover {
    background: #f8fafc;
}

.staff-address-submit {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.staff-address-submit:hover {
    background: #000000;
}

.clients-pro-profile-actions {
    margin-top: 0.4rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.58rem;
}

.clients-pro-profile-actions.clients-pro-profile-actions-float {
    position: fixed;
    left: calc(78px + 210px + 1rem);
    right: 1rem;
    bottom: 0.75rem;
    z-index: 44;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.7rem 0.86rem;
    border: 1px solid rgba(101, 147, 182, 0.42);
    border-radius: 14px;
    background: linear-gradient(105deg, rgba(10, 18, 30, 0.96) 0%, rgba(14, 34, 54, 0.96) 52%, rgba(18, 64, 92, 0.96) 100%);
    box-shadow: 0 12px 24px rgba(8, 16, 28, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.admin-body.admin-page-clients-pro .clients-pro-profile-main > .clients-pro-profile-form {
    padding-bottom: 92px;
}

.clients-pro-profile-actions .btn,
.clients-pro-profile-actions button {
    min-height: 42px;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
}

.clients-pro-profile-actions-float .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #e8f2ff;
    border-color: rgba(180, 205, 232, 0.45);
}

.clients-pro-profile-actions-float .btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(208, 224, 245, 0.64);
}

.admin-body.admin-page-clients-embed {
    background: #f4f6f9;
}

.admin-body.admin-page-clients-embed .admin-sidebar,
.admin-body.admin-page-clients-embed .admin-topbar,
.admin-body.admin-page-clients-embed .clients-pro-side,
.admin-body.admin-page-clients-embed .clients-pro-header {
    display: none !important;
}

.admin-body.admin-page-clients-embed .admin-layout,
.admin-body.admin-page-clients-embed .admin-content {
    display: block;
    min-height: 100vh;
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
}

.admin-body.admin-page-clients-embed .admin-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
}

.admin-body.admin-page-clients-embed .flash-wrap {
    display: none;
}

.admin-body.admin-page-clients-embed .clients-pro-layout {
    display: block;
    min-height: 100vh;
    padding: 0;
}

.admin-body.admin-page-clients-embed .clients-pro-main {
    padding: 0;
    background: #ffffff;
    min-height: 100vh;
    margin-left: 0 !important;
    width: 100%;
}

.admin-body.admin-page-clients-embed,
.admin-body.admin-page-clients-embed .admin-content,
.admin-body.admin-page-clients-embed .clients-hub-main,
.admin-body.admin-page-clients-embed .clients-hub-card,
.admin-body.admin-page-clients-embed .clients-hub-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.admin-body.admin-page-clients-embed::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .admin-content::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .clients-hub-main::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .clients-hub-card::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .clients-hub-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.clients-embed-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2.5rem;
    background: #ffffff;
    border-bottom: 1px solid #eceff4;
    position: sticky;
    top: 0;
    z-index: 6;
}

.clients-embed-topbar-copy h1 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
}

.clients-embed-topbar-copy p {
    margin: 0.22rem 0 0;
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.4;
}

.clients-embed-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn,
.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline {
    min-width: 5.5rem;
    border-radius: 12px;
    box-shadow: none;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline {
    background: #ffffff;
    color: #111827;
    border-color: #d6dde8;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline:hover,
.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline:focus-visible {
    background: #f3f6fa;
    color: #0f172a;
    border-color: #c7d0de;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn:not(.btn-outline) {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn:not(.btn-outline):hover,
.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn:not(.btn-outline):focus-visible {
    background: #1f2937;
    border-color: #1f2937;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-shell {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 2.75rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem 2.5rem 3rem;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-nav {
    position: sticky;
    top: 5.9rem;
    align-self: start;
    background: #ffffff;
    border: 1px solid #e6ecf3;
    border-radius: 26px;
    padding: 1.7rem 1.35rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.admin-body.admin-page-clients-embed .clients-pro-profile-main {
    min-width: 0;
    width: 100%;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-form {
    gap: 0.9rem;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-panel {
    min-height: calc(100vh - 84px);
}

.admin-body.admin-page-clients-embed .clients-pro-profile-actions.clients-pro-profile-actions-float {
    display: none;
}

.admin-body.admin-page-clients-embed .clients-hub-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
    height: calc(100vh - 84px);
    min-height: calc(100vh - 84px);
    overflow: hidden;
}

.admin-body.admin-page-clients-embed .clients-hub-layout {
    width: 100%;
    max-width: none;
    height: calc(100vh - 84px);
    min-height: calc(100vh - 84px);
    grid-template-columns: 280px 190px minmax(0, 1fr);
    overflow: hidden;
}

.admin-body.admin-page-clients-embed .clients-hub-card,
.admin-body.admin-page-clients-embed .clients-hub-nav,
.admin-body.admin-page-clients-embed .clients-hub-main {
    min-width: 0;
}

.admin-body.admin-page-clients-embed .clients-hub-main {
    height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-body.admin-page-clients-embed .clients-hub-close {
    display: none;
}

.admin-body.admin-page-clients-embed .clients-hub-card-actions {
    display: block;
}

.admin-body.admin-page-clients-embed .clients-hub-actions-dropdown,
.admin-body.admin-page-clients-embed .clients-hub-actions-dropdown summary {
    width: 100%;
}

.admin-body.admin-page-clients-embed .clients-hub-main.is-client-data .clients-hub-kv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 2.35rem;
}

.admin-body.admin-page-clients-embed .clients-hub-main.is-client-data .clients-hub-kv-wide {
    grid-column: 1 / -1;
}

.admin-body.admin-page-clients-embed .clients-hub-actions-dropdown summary {
    justify-content: space-between;
}

.admin-body.admin-page-clients-embed .clients-hub-actions-menu {
    min-width: 100%;
    width: 100%;
    max-width: none;
}

@media (max-width: 1180px) {
    .clients-pro-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .clients-pro-side {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 68px);
        max-height: calc(100vh - 68px);
        min-height: calc(100vh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
        overflow-y: auto;
        background: #ffffff;
        padding: 0;
    }

    .clients-pro-profile-shell {
        grid-template-columns: 1fr;
    }

    .clients-pro-profile-actions.clients-pro-profile-actions-float {
        left: calc(78px + 1rem);
        right: 1rem;
        bottom: 0.7rem;
        padding: 0.62rem 0.72rem;
        border-radius: 12px;
    }
}

@media (max-width: 980px) {
    .admin-body.admin-page-clients-pro .admin-topbar {
        margin: 0;
    }

    .clients-pro-header {
        flex-direction: column;
        align-items: stretch;
    }

    .clients-pro-actions {
        justify-content: flex-start;
    }

    .clients-pro-toolbar {
        grid-template-columns: 1fr;
    }

    .clients-pro-sort {
        min-width: 0;
        width: 100%;
    }

    .clients-pro-fields-2 {
        grid-template-columns: 1fr;
    }

    .clients-pro-profile-form-grid {
        grid-template-columns: 1fr;
    }

    .clients-pro-phone-group {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-service-row {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
    }

    .admin-body.admin-page-team-staff .team-staff-service-price,
    .admin-body.admin-page-team-staff .team-staff-service-row .team-staff-nav-count {
        grid-column: 2;
        justify-self: start;
    }

    .clients-pro-date-year {
        grid-template-columns: 1fr;
    }

    .clients-pro-field-year input {
        max-width: none;
    }

    .clients-address-type-grid {
        grid-template-columns: 1fr;
    }

    .staff-address-modal {
        width: 100%;
        max-height: calc(100vh - 1.6rem);
        border-radius: 20px;
    }

    .staff-address-modal .clients-address-modal-head,
    .staff-address-modal .clients-address-modal-body,
    .staff-address-actions {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .staff-emergency-modal .clients-address-modal-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .staff-address-actions {
        grid-template-columns: 1fr;
        padding-bottom: 1.2rem;
    }

    .clients-pro-profile-nav {
        position: static;
        top: auto;
    }

    .admin-body.admin-page-team-staff .team-staff-profile-nav {
        position: static;
        top: auto;
        max-height: none;
        overflow-y: visible;
    }

    .admin-body.admin-page-team-staff .team-staff-payroll-copy-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .btn {
        width: 100%;
        justify-content: center;
    }

    .clients-pro-profile-actions.clients-pro-profile-actions-float {
        left: 0.82rem;
        right: 0.82rem;
        bottom: 0.62rem;
    }

    /* Mobile: left menu should end at last item (no long blank area) */
    .admin-body.admin-page-clients-pro .clients-pro-side {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side-nav {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible;
        padding-bottom: 0.55rem;
    }
}

/* Clients sidebar fixed on desktop */
@media (min-width: 981px) {
    .admin-body.admin-page-clients-pro .clients-pro-layout {
        display: block;
        min-height: calc(100vh - 68px);
    }

    .admin-body.admin-page-clients-pro .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        z-index: 14;
        background: #ffffff;
        padding: 0;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-clients-pro .clients-pro-main {
        margin-left: 210px;
        padding: 0.75rem 1rem 1.2rem;
    }
}

/* Clients side panel: force full-height to viewport bottom */
.admin-body.admin-page-clients-pro .admin-content {
    padding-bottom: 0 !important;
}

.admin-body.admin-page-clients-pro .clients-pro-layout {
    min-height: calc(100vh - 68px);
}

.admin-body.admin-page-clients-pro .clients-pro-side {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 981px) {
    .admin-body.admin-page-clients-pro .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        min-height: 0;
        max-height: none;
        border-top: 0;
        border-right: 1px solid #dedfe4;
        border-bottom: 0;
        border-left: 0;
        background: #ffffff;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        z-index: 14;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-clients-pro .clients-pro-main {
        margin-left: 210px;
    }
}

@media (max-width: 980px) {
    .inventory-drawer .clients-drawer-panel {
        width: 100%;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: auto;
        height: calc(100dvh - 68px);
        min-height: calc(100dvh - 68px);
        max-height: calc(100dvh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
    }
}

/* Clients left panel: keep full white area to bottom */
.admin-body.admin-page-clients-pro .clients-pro-side {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.admin-body.admin-page-clients-pro .clients-pro-side-head,
.admin-body.admin-page-clients-pro .clients-pro-side-nav {
    background: #ffffff !important;
}

.admin-body.admin-page-clients-pro .clients-pro-side-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    gap: 0.22rem;
    min-height: calc(100vh - 68px - 60px);
    min-height: calc(100dvh - 68px - 60px);
}

@media (max-width: 980px) {
    .admin-body.admin-page-clients-pro .clients-pro-side {
        border-bottom: 0 !important;
    }
}

/* Clients Drawer overlay */
.admin-body.admin-page-clients-pro.clients-drawer-open .admin-content,
.admin-body.admin-page-inventory-catalog.clients-drawer-open .admin-content {
    overflow: hidden;
}

/* Marketing module */
.admin-body.admin-page-marketing .clients-pro-layout {
    gap: 1.55rem;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .clients-pro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .clients-pro-side {
    display: none;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .clients-pro-main {
    padding-inline: clamp(1.35rem, 2.8vw, 2.8rem);
    max-width: none;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .admin-content {
    overflow: hidden;
}

.marketing-pro-page {
    display: grid;
    gap: 1.35rem;
}

.marketing-pro-header {
    margin-bottom: 0;
}

.marketing-list-panel {
    padding: 1rem;
}

.marketing-toolbar {
    gap: 0.9rem;
}

.marketing-filter-select {
    min-width: 220px;
}

.marketing-empty-state {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    padding: 2rem 1rem 1.25rem;
}

.marketing-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(56, 189, 248, 0.18));
    color: #4f46e5;
    font-size: 1.7rem;
}

.marketing-empty-state h3 {
    margin: 0;
    color: #132238;
    font-size: 1.18rem;
}

.marketing-empty-state p {
    max-width: 56ch;
    margin: 0;
    color: #64748b;
}

.marketing-offer-list {
    display: grid;
    gap: 0.95rem;
    margin-top: 0.95rem;
}

.marketing-offer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 20px;
    background: #fff;
}

.marketing-offer-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.marketing-offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.1));
    color: #5b4bff;
}

.marketing-offer-copy {
    min-width: 0;
}

.marketing-offer-copy h3 {
    margin: 0 0 0.2rem;
    color: #132238;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.marketing-offer-copy p {
    margin: 0;
    color: #516173;
    line-height: 1.45;
}

.marketing-offer-copy small {
    display: inline-block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 600;
}

.marketing-offer-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marketing-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 0.87rem;
    font-weight: 800;
    white-space: nowrap;
}

.marketing-status-pill.is-active {
    background: #e8f9ea;
    color: #1e8a3f;
    border: 1px solid #b9ebc0;
}

.marketing-status-pill.is-draft {
    background: #fff7e8;
    color: #b76f00;
    border: 1px solid #f8dfac;
}

.marketing-status-pill.is-inactive {
    background: #eef2f7;
    color: #64748b;
    border: 1px solid #d7e0ea;
}

.marketing-offer-sales {
    display: grid;
    justify-items: end;
    gap: 0.15rem;
    min-width: 120px;
}

.marketing-offer-sales span {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.marketing-offer-sales strong {
    color: #132238;
    font-size: 1.04rem;
}

.marketing-offer-actions summary {
    min-height: 40px;
}

.marketing-offer-actions .clients-pro-options-menu form {
    margin: 0;
}

.marketing-editor-card {
    padding: 1.35rem;
}

.marketing-editor-head h2 {
    margin: 0;
    color: #132238;
    font-size: 1.22rem;
}

.marketing-editor-head p {
    margin: 0.35rem 0 0;
    color: #64748b;
}

.marketing-offer-form {
    display: grid;
    gap: 1.1rem;
}

.marketing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

.marketing-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding-top: 0.4rem;
}

.marketing-pro-page.is-wizard {
    gap: 0;
}

.marketing-create-wizard {
    display: grid;
    gap: 2.35rem;
    min-height: calc(100vh - 120px);
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.35rem 0 1.4rem;
}

.marketing-create-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 3400;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 1.2rem 6rem;
    background: #ffffff;
}

.marketing-create-topbar {
    display: grid;
    gap: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 -1.2rem 1rem;
    padding: 1rem 1.35rem 1.05rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-create-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.marketing-create-progress span {
    height: 4px;
    border-radius: 999px;
    background: #eceff4;
}

.marketing-create-progress span.is-active {
    background: #6c63ff;
}

.marketing-create-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.marketing-create-back {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid #d9e0eb;
    background: #fff;
    color: #132238;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.marketing-create-toolbar-copy strong {
    display: block;
    color: #132238;
    font-size: 1.28rem;
    font-weight: 800;
}

.marketing-create-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
    justify-content: flex-end;
    margin-left: auto;
}

.marketing-create-surface {
    display: grid;
    align-content: start;
    min-height: calc(100vh - 270px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.marketing-create-step {
    display: grid;
}

.marketing-create-step[hidden] {
    display: none !important;
}

.marketing-create-wizard [data-marketing-type-only][hidden] {
    display: none !important;
}

.marketing-step-shell {
    width: min(760px, 100%);
    max-width: 100%;
    margin: 0 auto;
}

.marketing-step-shell-form {
    width: min(760px, 100%);
    max-width: 100%;
    margin: 0 auto;
}

.marketing-step-copy {
    margin-bottom: 2.35rem;
}

.marketing-step-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.marketing-step-copy p {
    max-width: 64ch;
    margin: 0.85rem 0 0;
    color: #64748b;
    font-size: 1.18rem;
    line-height: 1.62;
}

.marketing-offer-type-list {
    display: grid;
    gap: 1.15rem;
    max-width: 760px;
}

.marketing-offer-type-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.3rem;
    width: 100%;
    min-height: 104px;
    padding: 1.5rem 1.7rem;
    border: 1px solid #d9e0eb;
    border-radius: 18px;
    background: #fff;
    color: #132238;
    text-align: left;
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.marketing-offer-type-card:hover,
.marketing-offer-type-card.is-selected {
    border-color: #6c63ff;
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.18);
}

.marketing-offer-type-copy {
    display: grid;
    gap: 0.42rem;
}

.marketing-offer-type-copy strong {
    font-size: 1.18rem;
    font-weight: 800;
}

.marketing-offer-type-copy span {
    color: #516173;
    font-size: 1.02rem;
    line-height: 1.58;
}

.marketing-offer-type-icon {
    color: #111827;
    font-size: 2.05rem;
}

.marketing-wizard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.35rem;
    max-width: 760px;
}

.marketing-span-2 {
    grid-column: 1 / -1;
}

.marketing-counter-field textarea {
    min-height: 132px;
}

.marketing-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.38rem;
}

.marketing-field-head span {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
}

.marketing-discount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.marketing-discount-input {
    display: flex;
    align-items: center;
    min-height: 60px;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.marketing-discount-input span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    color: #334155;
    font-weight: 800;
}

.marketing-discount-input input {
    border: 0 !important;
    box-shadow: none !important;
}

.marketing-discount-toggle {
    display: inline-flex;
    gap: 0.45rem;
}

.marketing-toggle-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 60px;
    padding: 0.25rem 1rem;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    font-weight: 800;
    cursor: pointer;
}

.marketing-toggle-chip input {
    display: none;
}

.marketing-toggle-chip.is-active {
    border-color: #6c63ff;
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.18);
}

.marketing-info-callout {
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #dfe2ff;
    border-radius: 16px;
    background: #f3f4ff;
}

.marketing-info-callout strong {
    color: #111827;
    font-size: 0.98rem;
}

.marketing-info-callout p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.marketing-date-input-wrap {
    width: 100%;
}

.marketing-date-input-wrap .marketing-date-display {
    width: 100%;
    cursor: pointer;
    background: #ffffff;
}

.marketing-date-input-wrap.has-clear::after {
    right: 2.9rem;
}

.marketing-date-clear {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.marketing-date-clear:hover {
    background: #f1f5f9;
    color: #132238;
}

.marketing-date-clear .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.marketing-checkbox-row {
    display: grid;
}

.marketing-checkbox-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    padding: 0.2rem 0;
}

.marketing-checkbox-card input {
    width: 20px;
    height: 20px;
    margin-top: 0.18rem;
}

.marketing-checkbox-card strong {
    display: block;
    color: #111827;
    font-size: 1rem;
}

.marketing-checkbox-card small {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    line-height: 1.45;
}

.marketing-limit-stack,
.marketing-center-stack {
    display: grid;
    gap: 1.25rem;
}

.marketing-switch-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.9rem;
}

.marketing-switch {
    position: relative;
    display: inline-flex;
    width: 52px;
    height: 30px;
    flex: 0 0 auto;
}

.marketing-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.marketing-switch-ui {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #d1d5db;
    transition: background 0.18s ease;
}

.marketing-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 0.18s ease;
}

.marketing-switch input:checked + .marketing-switch-ui {
    background: #6c63ff;
}

.marketing-switch input:checked + .marketing-switch-ui::after {
    transform: translateX(22px);
}

.marketing-switch-copy {
    display: grid;
    gap: 0.18rem;
}

.marketing-switch-copy strong {
    color: #111827;
    font-size: 1.02rem;
}

.marketing-switch-copy small {
    color: #64748b;
    line-height: 1.45;
}

.marketing-limit-field {
    margin-left: 3.85rem;
}

.marketing-limit-field[hidden] {
    display: none !important;
}

.marketing-limit-amount-input span {
    width: 52px;
    color: #64748b;
    font-size: 1.1rem;
}

.marketing-helper-inline {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
}

.marketing-whatsapp-ai-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.marketing-whatsapp-test-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.85rem;
}

.marketing-whatsapp-test-field {
    display: grid;
    gap: 0.38rem;
    min-width: 240px;
    flex: 1 1 260px;
}

.marketing-whatsapp-test-field span {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.marketing-whatsapp-test-field input {
    min-height: 46px;
}

.marketing-wa-test-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid #d7def0;
    background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
    color: #111827;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.marketing-wa-test-btn:hover {
    transform: translateY(-1px);
    border-color: #22c55e;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.14);
}

.marketing-wa-test-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.marketing-wa-test-status {
    font-size: 0.92rem;
    font-weight: 700;
    color: #64748b;
    flex: 1 1 100%;
}

.marketing-wa-test-status[data-state="success"] {
    color: #15803d;
}

.marketing-wa-test-status[data-state="error"] {
    color: #dc2626;
}

.marketing-wa-test-status[data-state="loading"] {
    color: #5b50f6;
}

.marketing-wa-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d7def0;
    background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
    color: #111827;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.marketing-wa-ai-btn:hover {
    transform: translateY(-1px);
    border-color: #6c63ff;
    box-shadow: 0 10px 22px rgba(91, 80, 246, 0.14);
}

.marketing-wa-ai-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.marketing-wa-ai-btn .material-symbols-outlined {
    font-size: 1.15rem;
    color: #6c63ff;
}

.marketing-wa-ai-btn.is-loading .material-symbols-outlined {
    animation: marketing-spin 0.85s linear infinite;
}

.admin-body.admin-page-marketing.marketing-automation-modal-open .admin-content {
    overflow: hidden;
}

.marketing-automation-page {
    display: grid;
    gap: 1.4rem;
}

.marketing-automation-topline {
    display: flex;
    justify-content: flex-end;
}

.marketing-automation-balance {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.9rem;
    min-width: 250px;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    align-items: center;
    position: relative;
}

.marketing-automation-balance span {
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
}

.marketing-automation-balance strong {
    color: #111827;
    font-size: 1.62rem;
    font-weight: 800;
}

.marketing-automation-balance-menu {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-automation-balance-menu:hover {
    background: #f6f8fc;
}

.marketing-automation-balance-popover {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 12;
    min-width: 220px;
    padding: 0.35rem 0;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.marketing-automation-balance-popover[hidden] {
    display: none !important;
}

.marketing-automation-balance-popover button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    padding: 0.72rem 1rem;
}

.marketing-automation-balance-popover button:hover {
    background: #f6f8fc;
}

.admin-body.admin-page-marketing.marketing-balance-modal-open .admin-content {
    overflow: hidden;
}

.marketing-balance-modal {
    position: fixed;
    inset: 0;
    z-index: 3550;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(8px);
}

.marketing-balance-modal[hidden] {
    display: none !important;
}

.marketing-balance-shell {
    height: 100vh;
    overflow: auto;
    background: #fff;
}

.marketing-balance-view[hidden] {
    display: none !important;
}

.marketing-balance-header,
.marketing-balance-wizard-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.6rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.marketing-balance-header-copy,
.marketing-balance-wizard-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.marketing-balance-header-copy span {
    color: #475569;
    font-size: 0.96rem;
    font-weight: 600;
}

.marketing-balance-layout {
    width: min(1360px, 100%);
    margin: 0 auto;
    padding: 2rem clamp(1.4rem, 3vw, 2.4rem) 3rem;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2rem;
}

.marketing-balance-sidebar {
    align-self: start;
    padding: 1.5rem;
    border: 1px solid #dbe5f1;
    border-radius: 20px;
    background: #fff;
    display: grid;
    gap: 1rem;
}

.marketing-balance-sidebar h2,
.marketing-balance-pane-head h2,
.marketing-balance-wizard-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-balance-sidebar-nav {
    display: grid;
    gap: 0.45rem;
}

.marketing-balance-sidebar-link {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
}

.marketing-balance-sidebar-link:hover {
    background: #f6f8fc;
}

.marketing-balance-sidebar-link.is-active {
    background: #eef2ff;
    color: #4338ca;
}

.marketing-balance-content {
    display: grid;
    gap: 1.4rem;
    align-content: start;
}

.marketing-billing-pane {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.marketing-balance-pane-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.marketing-balance-pane-head p,
.marketing-balance-wizard-copy p {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 1.6;
}

.marketing-balance-stack,
.marketing-balance-overview,
.marketing-balance-invoices {
    display: grid;
    gap: 1rem;
}

.marketing-balance-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-balance-card {
    padding: 1.35rem 1.4rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    display: grid;
    gap: 0.4rem;
}

.marketing-balance-card span {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
}

.marketing-balance-card strong {
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
}

.marketing-balance-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 800;
}

.marketing-balance-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.marketing-balance-card-highlight strong {
    font-size: 2rem;
    line-height: 1;
}

.marketing-balance-quick-actions,
.marketing-billing-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.marketing-billing-info-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-billing-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-billing-field.is-full {
    grid-column: 1 / -1;
}

.marketing-billing-field span {
    color: #111827;
    font-size: 0.93rem;
    font-weight: 700;
}

.marketing-billing-field input,
.marketing-billing-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
}

.marketing-balance-invoice-month {
    display: grid;
    gap: 1rem;
}

.marketing-balance-invoice-month h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-balance-invoice-list {
    display: grid;
    gap: 0.85rem;
}

.marketing-balance-invoice-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
}

.marketing-balance-invoice-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.marketing-balance-invoice-icon.is-csv {
    background: #2f855a;
}

.marketing-balance-invoice-icon.is-pdf {
    background: #c0392b;
}

.marketing-balance-invoice-copy strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-balance-invoice-copy p {
    margin: 0.18rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.marketing-balance-invoice-action {
    min-width: 46px;
    height: 46px;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-balance-invoice-action .material-symbols-outlined,
.marketing-balance-inline-back .material-symbols-outlined {
    font-size: 1.15rem;
}

.marketing-balance-invoice-badge {
    min-height: 32px;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.marketing-balance-wizard-body {
    width: min(1360px, 100%);
    margin: 0 auto;
    padding: 2.4rem clamp(1.5rem, 4vw, 2.8rem) 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 3rem;
    align-items: start;
}

.marketing-balance-wizard-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
}

.marketing-balance-wizard-progress span {
    display: block;
    height: 4px;
    flex: 1 1 0;
    border-radius: 999px;
    background: #e5e7eb;
}

.marketing-balance-wizard-progress span.is-active {
    background: #6c63ff;
}

.marketing-balance-inline-back {
    width: 44px;
    height: 44px;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.marketing-balance-amount-block {
    display: grid;
    gap: 0.35rem;
    margin-top: 2rem;
}

.marketing-balance-amount-block span {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.marketing-balance-amount-block strong {
    color: #111827;
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.marketing-balance-amount-block small,
.marketing-balance-summary-card p {
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.55;
}

.marketing-balance-amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.marketing-balance-chip {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.marketing-balance-chip.is-active {
    border-color: #6c63ff;
    color: #4338ca;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.marketing-balance-chip-icon {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
}

.marketing-balance-custom-input {
    margin-top: 1rem;
}

.marketing-balance-custom-input label,
.marketing-balance-threshold-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-balance-custom-input span,
.marketing-balance-threshold-field span {
    color: #111827;
    font-size: 0.93rem;
    font-weight: 700;
}

.marketing-balance-custom-input input {
    width: min(280px, 100%);
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
}

.marketing-balance-money-input {
    width: min(420px, 100%);
    min-height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.marketing-balance-money-input span {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 700;
}

.marketing-balance-money-input input {
    width: 100%;
    min-height: 46px;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 1rem;
}

.marketing-balance-money-input input:focus {
    outline: none;
}

.marketing-balance-summary-card {
    padding: 1.5rem 1.6rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    display: grid;
    gap: 1.2rem;
}

.marketing-balance-summary-row,
.marketing-balance-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-balance-summary-total {
    padding-bottom: 0;
    border-bottom: 0;
}

.marketing-balance-summary-row span,
.marketing-balance-summary-total span {
    color: #475569;
    font-size: 0.98rem;
}

.marketing-balance-summary-row strong,
.marketing-balance-summary-total strong {
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.marketing-balance-summary-total strong {
    font-size: 2rem;
    line-height: 1;
}

.marketing-balance-modal button,
.marketing-balance-sidebar-link,
.marketing-balance-invoice-action {
    cursor: pointer;
}

.marketing-automation-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.8rem 1.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #6758ff 0%, #5a74f9 55%, #6b89ff 100%);
    color: #fff;
}

.marketing-automation-banner h3,
.marketing-automation-banner p {
    margin: 0;
}

.marketing-automation-banner h3 {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-banner p {
    margin-top: 0.45rem;
    max-width: 52ch;
    opacity: 0.96;
    line-height: 1.45;
    font-size: 0.96rem;
}

.marketing-automation-banner button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.marketing-automation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.marketing-automation-tab {
    min-height: 42px;
    padding: 0.68rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 0.94rem;
    font-weight: 700;
}

.marketing-automation-tab.is-active {
    background: #111111;
    color: #fff;
}

.marketing-automation-group-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
    margin-top: 1rem;
}

.marketing-automation-card,
.marketing-automation-create-card {
    min-height: 310px;
    padding: 1.4rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
}

.marketing-automation-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.marketing-automation-card:hover,
.marketing-automation-card:focus-visible {
    border-color: #cfdaf0;
    background: #fcfdff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.marketing-automation-card:focus-visible {
    outline: 0;
}

.marketing-automation-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.marketing-automation-options summary {
    min-height: 34px;
    width: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    box-shadow: none;
}

.marketing-automation-options summary::after {
    content: 'more_vert';
    font-family: 'Material Symbols Outlined';
    font-size: 1.2rem;
    line-height: 1;
    color: #111827;
}

.marketing-automation-options[open] summary,
.marketing-automation-options summary:hover {
    background: #f5f7fb;
}

.marketing-automation-options .clients-pro-options-menu {
    min-width: 160px;
    padding: 0.18rem 0;
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.marketing-automation-options .clients-pro-option-item {
    min-height: unset !important;
    padding: 0.34rem 0.9rem !important;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    gap: 0;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.08;
}

.marketing-automation-options .clients-pro-option-item span {
    line-height: 1.08;
}

.marketing-automation-options .clients-pro-option-item:hover {
    background: #f6f7fb;
}

.marketing-automation-options .clients-pro-option-ico {
    display: none;
}

.marketing-automation-options .clients-pro-option-item.is-danger {
    color: #dc2626;
}

.marketing-automation-options .clients-pro-option-item.is-danger:hover {
    background: #fff3f3;
}

.marketing-automation-card-head > .material-symbols-outlined {
    color: #c8670d;
    font-size: 2rem;
}

.marketing-automation-card h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.marketing-automation-card-meta {
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: -0.25rem;
}

.marketing-automation-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
    font-size: 0.94rem;
}

.marketing-automation-card-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
}

.marketing-automation-channel-icons {
    display: flex;
    gap: 0.55rem;
    color: #111827;
}

.marketing-automation-channel-icons [data-marketing-automation-card-channel][hidden] {
    display: none !important;
}

.marketing-automation-channel-icons[hidden] {
    display: none !important;
}

.marketing-automation-create-card {
    display: grid;
    place-items: center;
    gap: 0.7rem;
    color: #5b4bff;
    text-align: center;
}

.marketing-automation-create-card .material-symbols-outlined {
    font-size: 2rem;
}

.marketing-automation-create-card strong {
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-modal {
    position: fixed;
    inset: 0;
    z-index: 3600;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(8px);
    padding: 0;
}

.marketing-automation-modal[hidden] {
    display: none !important;
}

.marketing-automation-modal-shell {
    height: 100vh;
    background: #fff;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.marketing-automation-modal-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.marketing-automation-modal-topbar-copy span {
    color: #111827;
    font-size: 1.18rem;
    font-weight: 800;
}

.marketing-automation-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.marketing-automation-modal-actions .btn,
.marketing-automation-modal-actions .clients-pro-add-btn,
.marketing-automation-trigger-actions .btn,
.marketing-automation-trigger-actions .clients-pro-add-btn,
.marketing-automation-stage-body > .btn {
    min-height: 40px;
    padding: 0.52rem 1rem;
    font-size: 0.94rem;
    border-radius: 999px;
    width: auto;
    justify-self: start;
}

.marketing-automation-modal-body {
    padding: 2rem clamp(1.4rem, 4vw, 2.8rem) 3rem;
    height: calc(100vh - 88px);
    overflow: auto;
    min-height: 0;
}

.marketing-automation-flow {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 2rem;
    min-height: 0;
}

.marketing-automation-summary {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
    min-height: min-content;
}

.marketing-automation-summary[hidden],
.marketing-automation-flow[hidden] {
    display: none !important;
}

.marketing-automation-modal[data-mode="summary"] [data-marketing-automation-save] {
    display: none !important;
}

.marketing-automation-summary-head h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: #111827;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.marketing-automation-summary-head p {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 0.98rem;
}

.marketing-automation-summary-tabs {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.marketing-automation-summary-tab {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.marketing-automation-summary-tab.is-active {
    background: #111111;
    color: #fff;
}

.marketing-automation-summary-pane[hidden] {
    display: none !important;
}

.marketing-automation-summary-filter {
    padding: 1rem;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #fff;
    position: relative;
}

.marketing-automation-summary-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.marketing-automation-summary-filter-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 1rem;
    z-index: 12;
    width: min(620px, calc(100vw - 4rem));
    padding: 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0.9rem;
}

.marketing-automation-summary-filter-popover[hidden] {
    display: none !important;
}

.marketing-automation-summary-filter-popover-head strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-filter-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-automation-summary-filter-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-automation-summary-filter-preset-wrap {
    position: relative;
}

.marketing-automation-summary-filter-field span {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
}

.marketing-automation-summary-filter-field select,
.marketing-automation-summary-filter-field input {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
}

.marketing-automation-summary-filter-select {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
}

.marketing-automation-summary-filter-select:focus {
    outline: none;
    border-color: #6c63ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.marketing-automation-summary-filter-select-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 4;
    max-height: 280px;
    overflow: auto;
    padding: 0.35rem 0;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.marketing-automation-summary-filter-select-menu[hidden] {
    display: none !important;
}

.marketing-automation-summary-filter-select-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    padding: 0.55rem 0.95rem;
}

.marketing-automation-summary-filter-select-option:hover {
    background: #f5f7fb;
}

.marketing-automation-summary-filter-select-option.is-active {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
}

.marketing-automation-summary-filter-field input[readonly] {
    cursor: pointer;
    caret-color: transparent;
}

.marketing-automation-summary-filter-field select:focus,
.marketing-automation-summary-filter-field input:focus {
    outline: none;
    border-color: #6c63ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.marketing-automation-summary-filter-help {
    margin: 0;
    color: #dc2626;
    font-size: 0.88rem;
    font-weight: 600;
}

.marketing-automation-summary-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.marketing-automation-summary-filter-calendar {
    display: grid;
    gap: 1rem;
}

.marketing-automation-summary-filter-calendar-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) 36px;
    align-items: center;
    gap: 1rem;
}

.marketing-automation-summary-filter-calendar-nav {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.marketing-automation-summary-filter-calendar-nav:hover {
    background: #f3f4f6;
}

.marketing-automation-summary-filter-calendar-month-title {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}

.marketing-automation-summary-filter-calendar-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-automation-summary-filter-calendar-month {
    display: grid;
    gap: 0.65rem;
}

.marketing-automation-summary-filter-calendar-weekdays,
.marketing-automation-summary-filter-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.marketing-automation-summary-filter-calendar-weekdays span {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    text-transform: lowercase;
}

.marketing-automation-summary-filter-calendar-day {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.marketing-automation-summary-filter-calendar-day:hover {
    background: #e5e7eb;
}

.marketing-automation-summary-filter-calendar-day.is-outside {
    color: #94a3b8;
    background: #f8fafc;
}

.marketing-automation-summary-filter-calendar-day.is-in-range {
    background: #e5e7eb;
}

.marketing-automation-summary-filter-calendar-day.is-start,
.marketing-automation-summary-filter-calendar-day.is-end,
.marketing-automation-summary-filter-calendar-day.is-single {
    background: #111111;
    color: #ffffff;
}

.marketing-automation-summary-filter-calendar-day.is-start:hover,
.marketing-automation-summary-filter-calendar-day.is-end:hover,
.marketing-automation-summary-filter-calendar-day.is-single:hover {
    background: #111111;
    transform: translateY(-1px);
}

.marketing-automation-summary-filter-field input.is-range-target {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

@media (max-width: 860px) {
    .marketing-automation-summary-filter-popover {
        width: min(94vw, 620px);
        left: 50%;
        transform: translateX(-50%);
    }

    .marketing-automation-summary-filter-calendar-head {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .marketing-automation-summary-filter-calendar-head .marketing-automation-summary-filter-calendar-month-title:last-of-type {
        display: none;
    }

    .marketing-automation-summary-filter-calendar-months {
        grid-template-columns: minmax(0, 1fr);
    }

    .marketing-automation-summary-filter-calendar-month[data-marketing-automation-summary-filter-month="right"] {
        display: none;
    }
}

.marketing-automation-summary-chart {
    padding: 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    position: relative;
}

.marketing-automation-summary-chart.is-sparse .marketing-automation-summary-chart-labels {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: auto;
}

.marketing-automation-summary-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.marketing-automation-summary-chart-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-chart-grid {
    display: grid;
    height: 100%;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-content: stretch;
    gap: 0.7rem;
    padding: 0.2rem 0 0.8rem;
    color: #64748b;
    font-size: 0.88rem;
}

.marketing-automation-summary-chart-stage {
    position: relative;
}

.marketing-automation-summary-chart-grid span {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-automation-summary-chart-plot {
    position: absolute;
    inset: 0 0 0.8rem 0;
    pointer-events: none;
}

.marketing-automation-summary-chart-plot svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.marketing-automation-summary-chart-line {
    display: none;
}

.marketing-automation-summary-chart-line.is-email {
    stroke: #6c63ff;
}

.marketing-automation-summary-chart-line.is-sms {
    stroke: #fb923c;
}

.marketing-automation-summary-chart-line.is-whatsapp {
    stroke: #2f9e1d;
}

.marketing-automation-summary-chart-dot {
    display: none;
}

.marketing-automation-summary-chart-bar {
    opacity: 0.92;
    shape-rendering: geometricPrecision;
}

.marketing-automation-summary-chart-bar.is-email {
    fill: #6c63ff;
}

.marketing-automation-summary-chart-bar.is-sms {
    fill: #fb923c;
}

.marketing-automation-summary-chart-bar.is-whatsapp {
    fill: #2f9e1d;
}

.marketing-automation-summary-chart-dot.is-email {
    fill: #6c63ff;
}

.marketing-automation-summary-chart-dot.is-sms {
    fill: #fb923c;
}

.marketing-automation-summary-chart-dot.is-whatsapp {
    fill: #2f9e1d;
}

.marketing-automation-summary-chart-labels {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0.55rem;
    min-height: 1.9rem;
    max-height: 1.9rem;
    height: auto !important;
    overflow: hidden;
    color: #64748b;
    font-size: 0.78rem;
}

.marketing-automation-summary-chart-point {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0.2rem 0;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.marketing-automation-summary-chart.is-sparse .marketing-automation-summary-chart-point {
    flex: 0 0 auto;
    min-width: 2.75rem;
    text-align: center;
}

.marketing-automation-summary-chart-point span {
    display: inline-block;
    padding: 0.15rem 0;
}

.marketing-automation-summary-chart-point:hover span,
.marketing-automation-summary-chart-point:focus-visible span {
    color: #111827;
    font-weight: 700;
}

.marketing-automation-summary-chart-tooltip {
    position: absolute;
    top: 4.35rem;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 0.85rem 0.9rem;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    z-index: 3;
    display: grid;
    gap: 0.55rem;
    pointer-events: none;
}

.marketing-automation-summary-chart-tooltip[hidden] {
    display: none !important;
}

.marketing-automation-summary-chart-tooltip strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.marketing-automation-summary-chart-tooltip-total,
.marketing-automation-summary-chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marketing-automation-summary-chart-tooltip-total span,
.marketing-automation-summary-chart-tooltip-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #111827;
}

.marketing-automation-summary-chart-tooltip-total b,
.marketing-automation-summary-chart-tooltip-row b {
    color: #111827;
    font-weight: 800;
}

.marketing-automation-summary-chart-tooltip-row i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #6c63ff;
    display: inline-block;
}

.marketing-automation-summary-chart-tooltip-row i.is-sms {
    background: #fb923c;
}

.marketing-automation-summary-chart-tooltip-row i.is-whatsapp {
    background: #2f9e1d;
}

.marketing-automation-summary-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    color: #475569;
    font-size: 0.88rem;
}

.marketing-automation-summary-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.marketing-automation-summary-legend i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #6c63ff;
    display: inline-block;
}

.marketing-automation-summary-legend i.is-sms {
    background: #fb923c;
}

.marketing-automation-summary-legend i.is-whatsapp {
    background: #22c55e;
}

.marketing-automation-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.marketing-automation-summary-stat {
    padding: 1.25rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    display: grid;
    gap: 0.55rem;
}

.marketing-automation-summary-stat strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-stat b {
    color: #111827;
    font-size: 2rem;
    line-height: 1;
}

.marketing-automation-summary-stat small {
    color: #64748b;
    line-height: 1.55;
}

.marketing-automation-summary-preview {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1.4rem;
    min-height: 0;
}

.marketing-automation-summary-preview-pane {
    height: calc(100vh - 320px);
    max-height: calc(100vh - 320px);
    overflow: auto;
    padding-right: 0.4rem;
    scrollbar-gutter: stable;
    min-height: 0;
}

.marketing-automation-summary-preview-pane::-webkit-scrollbar {
    width: 10px;
}

.marketing-automation-summary-preview-pane::-webkit-scrollbar-thumb {
    background: #d8dde8;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.marketing-automation-summary-preview-card {
    padding: 1.35rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
}

.marketing-automation-summary-preview-card strong {
    display: block;
    margin-bottom: 0.7rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-preview-card p {
    margin: 0;
    color: #111827;
    line-height: 1.6;
}

.marketing-automation-summary-preview-card.is-phone,
.marketing-automation-summary-preview-card.is-chat {
    max-width: 420px;
    margin: 0 auto;
}

.marketing-automation-summary-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 2.5rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
}

.marketing-automation-summary-details article {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.marketing-automation-summary-details strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 800;
}

.marketing-automation-summary-details span {
    color: #475569;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .marketing-automation-summary-details {
        grid-template-columns: 1fr;
    }
}

.marketing-automation-flow-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.75rem, 2.8vw, 2.3rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.marketing-automation-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.marketing-automation-stage-icon {
    position: relative;
    width: 28px;
    min-height: 100%;
    display: flex;
    justify-content: center;
}

.marketing-automation-stage-icon::after {
    content: "";
    position: absolute;
    top: 44px;
    bottom: -28px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #d7def0;
}

.marketing-automation-stage:last-child .marketing-automation-stage-icon::after {
    display: none;
}

.marketing-automation-stage-icon .material-symbols-outlined {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #efeefe;
    color: #6c63ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.marketing-automation-stage-body {
    display: grid;
    gap: 1rem;
    justify-items: start;
}

.marketing-automation-stage-body h3,
.marketing-automation-stage-body p {
    margin: 0;
}

.marketing-automation-stage-body h3 {
    color: #111827;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-stage-body p {
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.5;
}

.marketing-automation-channel-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    min-height: 92px;
    width: 100%;
    box-sizing: border-box;
}

.marketing-automation-channel-card-secondary {
    margin-top: 1rem;
    width: 100%;
}

.marketing-automation-channel-copy {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 60px;
}

.marketing-automation-channel-copy .material-symbols-outlined {
    color: #5b4bff;
    font-size: 1.9rem;
}

.marketing-automation-channel-copy strong,
.marketing-automation-channel-copy small {
    display: block;
}

.marketing-automation-channel-copy strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
}

.marketing-automation-channel-copy small {
    color: #64748b;
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

.marketing-automation-channel-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 210px;
    justify-content: flex-end;
    flex: 0 0 210px;
}

.marketing-automation-channel-card .marketing-status-pill {
    min-height: 28px;
    padding: 0.22rem 0.72rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.marketing-automation-channel-actions summary {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid #d5dbe7;
    background: #fff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
}

.marketing-automation-channel-actions summary::after {
    font-size: 1rem;
}

.marketing-automation-channel-actions .clients-pro-options-menu {
    min-width: 160px;
    padding: 0.18rem 0 !important;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    gap: 0 !important;
}

.marketing-automation-channel-actions .clients-pro-option-item {
    width: 100%;
    border-radius: 0;
    min-height: unset !important;
    padding: 0.34rem 0.9rem !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.08 !important;
}

.marketing-automation-channel-actions .clients-pro-option-item span {
    display: block;
    line-height: 1.08 !important;
}

.marketing-automation-channel-actions .clients-pro-option-item:hover,
.marketing-automation-channel-actions .clients-pro-option-item:focus-visible,
.marketing-automation-content-options .clients-pro-option-item:hover,
.marketing-automation-content-options .clients-pro-option-item:focus-visible,
.marketing-automation-options .clients-pro-option-item:hover,
.marketing-automation-options .clients-pro-option-item:focus-visible {
    background: #f6f8fc;
}

.marketing-automation-channel-actions .clients-pro-option-ico {
    display: none;
}

.marketing-automation-channel-actions .clients-pro-option-item.is-danger {
    color: #dc2626;
}

.marketing-automation-content-options .clients-pro-options-menu {
    min-width: 180px;
    padding: 0.25rem 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    gap: 0;
}

.marketing-automation-content-options .clients-pro-option-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: unset !important;
    padding: 0.52rem 0.95rem !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: none;
    line-height: 1.22;
}

.marketing-automation-content-options .clients-pro-option-item span {
    white-space: nowrap;
    line-height: 1.22;
}

.marketing-automation-content-options .clients-pro-option-item:hover {
    background: #f6f7fb;
}

.marketing-automation-content-options .clients-pro-option-item.is-danger {
    color: #dc2626;
}

.marketing-automation-channel-split {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.marketing-automation-channel-split p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.95rem;
}

.marketing-automation-channel-split a {
    color: #5b4bff;
    text-decoration: none;
}

.marketing-automation-connector-options {
    flex: 0 0 auto;
}

.marketing-automation-connector-options > summary {
    min-width: 68px;
    justify-content: center;
}

.marketing-automation-connector-options .clients-pro-options-menu {
    min-width: 84px;
}

.marketing-automation-connector-options .clients-pro-option-item.is-active {
    background: #f4f3ff;
    color: #4338ca;
    font-weight: 700;
}

.marketing-automation-channel-toggle {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.marketing-automation-channel-toggle .material-symbols-outlined {
    color: #111827;
    font-size: 1rem;
}

.marketing-automation-trigger-modal {
    position: fixed;
    inset: 0;
    z-index: 3700;
    background: rgba(17, 24, 39, 0.28);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.marketing-automation-trigger-modal[hidden] {
    display: none !important;
}

.marketing-automation-trigger-dialog {
    width: min(720px, 100%);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
}

.marketing-automation-trigger-close {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-automation-trigger-close:hover {
    background: #f5f7fb;
}

.marketing-automation-trigger-dialog-body {
    padding: 3rem 2.2rem 1.6rem;
}

.marketing-automation-trigger-dialog-body h3 {
    margin: 0 0 1.8rem;
    color: #111827;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-trigger-dialog-body .form-label {
    margin-bottom: 0.7rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.marketing-automation-trigger-dialog-body .form-select {
    min-height: 48px;
    border-radius: 0.95rem;
    border-color: #d5dbe7;
}

.marketing-automation-trigger-actions {
    padding: 0 2.2rem 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9rem;
}

.marketing-automation-content-editor {
    position: fixed;
    inset: 0;
    z-index: 3690;
    background: #fff;
    overflow: auto;
}

.marketing-automation-content-editor[hidden] {
    display: none !important;
}

.marketing-automation-send-test-modal {
    position: fixed;
    inset: 0;
    z-index: 3710;
    background: rgba(17, 24, 39, 0.28);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.marketing-automation-send-test-modal[hidden] {
    display: none !important;
}

.marketing-automation-send-test-dialog {
    width: min(520px, 100%);
    border-radius: 1.45rem;
    background: #fff;
    box-shadow: 0 32px 60px rgba(15, 23, 42, 0.18);
    position: relative;
    overflow: hidden;
}

.marketing-automation-send-test-body {
    padding: 2.8rem 2rem 1.35rem;
    display: grid;
    gap: 1rem;
}

.marketing-automation-send-test-body h3 {
    margin: 0 0 0.55rem;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-send-test-body .marketing-automation-field {
    gap: 0.55rem;
}

.marketing-automation-send-test-status {
    border-radius: 0.95rem;
    padding: 0.8rem 0.95rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.marketing-automation-send-test-status.is-loading {
    background: #f3f4f6;
    color: #111827;
}

.marketing-automation-send-test-status.is-success {
    background: #ecfdf3;
    color: #166534;
}

.marketing-automation-send-test-status.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

.marketing-automation-send-test-body input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d5dbe7;
    border-radius: 0.95rem;
    padding: 0.85rem 1rem;
    font: inherit;
    color: #111827;
    background: #fff;
}

.marketing-automation-send-test-actions {
    padding: 0 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.marketing-automation-send-test-actions .btn,
.marketing-automation-send-test-actions .clients-pro-add-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    border-radius: 999px;
}

.marketing-automation-send-test-dialog .marketing-automation-trigger-close {
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
}

.marketing-automation-content-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #fff;
}

.swal2-container {
    z-index: 5000 !important;
}

.marketing-swal-popup {
    border-radius: 18px !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
}

.marketing-swal-actions {
    gap: 0.75rem !important;
}

.marketing-swal-confirm,
.marketing-swal-cancel {
    min-width: 122px;
    min-height: 46px;
    padding: 0.72rem 1.2rem;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

.marketing-swal-confirm {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

.marketing-swal-cancel {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.marketing-swal-confirm:hover,
.marketing-swal-cancel:hover {
    filter: brightness(0.98);
}

.marketing-automation-content-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.98);
}

.marketing-automation-content-topbar h3 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 800;
}

.marketing-automation-content-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marketing-automation-content-body {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    min-height: calc(100vh - 73px);
}

.marketing-automation-content-form {
    padding: 2rem 1.1rem 2rem 1.1rem;
    border-right: 1px solid #e5e7eb;
    display: grid;
    align-content: start;
    gap: 1.35rem;
    position: sticky;
    top: 73px;
    align-self: start;
    max-height: calc(100vh - 73px);
    overflow: auto;
    background: #fff;
    z-index: 1;
}

.marketing-automation-content-copy h4 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
}

.marketing-automation-content-copy p {
    margin: 0;
    color: #64748b;
    line-height: 1.45;
}

.marketing-automation-checkline {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: #111827;
}

.marketing-automation-checkline input {
    width: 1.35rem;
    height: 1.35rem;
}

.marketing-automation-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-automation-field label {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.marketing-automation-field-counter {
    justify-self: end;
    margin-top: -1.65rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.marketing-automation-field textarea {
    width: 100%;
    min-height: 126px;
    border: 1px solid #d5dbe7;
    border-radius: 1rem;
    padding: 1rem;
    font: inherit;
    color: #111827;
    resize: vertical;
}

.marketing-automation-field small {
    color: #6b7280;
    line-height: 1.45;
}

.marketing-automation-test-email-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marketing-automation-test-email-controls input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    border: 1px solid #d5dbe7;
    border-radius: 0.95rem;
    padding: 0.85rem 1rem;
    font: inherit;
    color: #111827;
    background: #fff;
}

.marketing-automation-test-email-btn {
    flex: 0 0 auto;
    min-height: 46px;
    white-space: nowrap;
}

.marketing-automation-content-preview {
    padding: 2rem;
    overflow: auto;
    background:
        linear-gradient(180deg, #f8f7ff 0%, #ffffff 100%);
}

.marketing-automation-preview-switch {
    width: min(700px, 100%);
    margin: 0 auto 2rem;
    padding: 0.22rem;
    border: 1px solid #d8dde8;
    border-radius: 0.85rem;
    background: #f7f7f8;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.18rem;
}

.marketing-automation-preview-switch-btn {
    min-height: 40px;
    border: 0;
    border-radius: 0.68rem;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.marketing-automation-preview-switch-btn.is-active {
    background: #fff;
    box-shadow: inset 0 0 0 1px #d5dbe7;
}

.marketing-automation-preview-stage {
    width: 100%;
    display: grid;
    place-items: start center;
}

.marketing-automation-preview-pane[hidden] {
    display: none !important;
}

.marketing-automation-preview-shell {
    width: min(900px, 100%);
    margin: 0 auto;
    border: 6px solid #ddd6fe;
    border-radius: 1.5rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(91, 75, 255, 0.08);
}

.marketing-automation-preview-browser {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.2rem;
    background: #f6f3ff;
    border-bottom: 1px solid #eadfff;
}

.marketing-automation-preview-browser span {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #c4b5fd;
}

.marketing-automation-preview-head {
    padding: 1.5rem 1.8rem;
    border-bottom: 1px solid #eceff5;
}

.marketing-automation-preview-head h4 {
    margin: 0 0 1.35rem;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.marketing-automation-preview-from {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marketing-automation-preview-from .material-symbols-outlined {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2edff;
    color: #6555ff;
}

.marketing-automation-preview-from strong,
.marketing-automation-preview-from small {
    display: block;
}

.marketing-automation-preview-from strong {
    color: #111827;
    font-size: 0.98rem;
}

.marketing-automation-preview-from small {
    color: #64748b;
}

.marketing-automation-preview-card {
    width: min(700px, calc(100% - 3rem));
    margin: 3rem auto;
    padding: 2.2rem 2rem;
    border: 1px solid #e6eaf2;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 1.4rem;
}

.marketing-automation-preview-card h5 {
    margin: 0;
    color: #111827;
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 900;
}

.marketing-automation-preview-card > p {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.55;
}

.marketing-automation-preview-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.95rem;
    padding-top: 0.3rem;
    border-top: 1px solid #eceff5;
}

.marketing-automation-preview-icon-frame {
    width: 46px;
    height: 46px;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 46px;
}

.marketing-automation-preview-icon-frame.is-circle {
    border-radius: 999px;
}

.marketing-automation-preview-icon-frame img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.marketing-automation-preview-line strong,
.marketing-automation-preview-line small {
    display: block;
}

.marketing-automation-preview-line strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.marketing-automation-preview-line small {
    color: #64748b;
    line-height: 1.45;
}

.marketing-automation-preview-note {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: #f8fafc;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.55;
}

.marketing-automation-preview-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.marketing-automation-preview-stack {
    width: min(700px, calc(100% - 3rem));
    margin: -0.6rem auto 2.4rem;
    display: grid;
    gap: 1rem;
}

.marketing-automation-preview-summary,
.marketing-automation-preview-panel {
    border: 1px solid #e6eaf2;
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
    padding: 1.35rem 1.4rem;
}

.marketing-automation-preview-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.72rem;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b4bff;
    font-size: 0.8rem;
    font-weight: 700;
}

.marketing-automation-preview-summary h6,
.marketing-automation-preview-panel h6 {
    margin: 1rem 0 0.9rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-preview-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 0.9rem;
    border-bottom: 1px solid #eceff5;
}

.marketing-automation-preview-summary-row strong,
.marketing-automation-preview-summary-row small,
.marketing-automation-preview-panel strong,
.marketing-automation-preview-panel small {
    display: block;
}

.marketing-automation-preview-summary-row strong,
.marketing-automation-preview-panel strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.marketing-automation-preview-summary-row small,
.marketing-automation-preview-panel small,
.marketing-automation-preview-reference {
    color: #64748b;
    line-height: 1.45;
}

.marketing-automation-preview-summary-row > span,
.marketing-automation-preview-summary-row.is-total > span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.marketing-automation-preview-summary-row.is-total {
    align-items: center;
    padding: 0.9rem 0 0;
    border-bottom: 0;
}

.marketing-automation-preview-reference {
    margin-top: 0.6rem;
    font-size: 0.84rem;
}

.marketing-automation-preview-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.marketing-automation-preview-panel-head .marketing-automation-preview-icon-frame {
    width: 46px;
    height: 46px;
    border-radius: 0.95rem;
    flex: 0 0 46px;
}

.marketing-automation-preview-panel-head .marketing-automation-preview-icon-frame img {
    width: 46px;
    height: 46px;
}

.marketing-automation-preview-panel .btn {
    margin-top: 1rem;
}

.marketing-automation-phone {
    width: min(390px, 100%);
    min-height: 720px;
    margin: 0 auto;
    border-radius: 3.4rem;
    border: 9px solid #ddd6fe;
    box-shadow: 0 30px 60px rgba(91, 75, 255, 0.14);
    overflow: hidden;
    position: relative;
}

.marketing-automation-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    z-index: 2;
}

.marketing-automation-phone-sms {
    background:
        radial-gradient(circle at 18% 88%, rgba(255, 40, 219, 0.92) 0%, rgba(255, 40, 219, 0) 26%),
        linear-gradient(145deg, #9b6dff 0%, #8617ff 42%, #8d00ff 68%, #7a1cf6 100%);
    padding: 4.9rem 1.35rem 1.7rem;
}

.marketing-automation-phone-clock {
    color: #fff;
    text-align: center;
    display: grid;
    gap: 0.4rem;
}

.marketing-automation-phone-clock small {
    font-size: 1.05rem;
    font-weight: 700;
}

.marketing-automation-phone-clock strong {
    font-size: 4.7rem;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.06em;
}

.marketing-automation-sms-card {
    margin-top: 3.2rem;
    border-radius: 1.45rem;
    background: #fff;
    padding: 1rem 1.15rem 1.15rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}

.marketing-automation-sms-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.marketing-automation-sms-app {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.marketing-automation-sms-app-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #8b8b8b;
    position: relative;
    flex: 0 0 22px;
}

.marketing-automation-sms-app-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-62%, -50%) rotate(45deg);
}

.marketing-automation-sms-card p {
    margin: 0;
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.45;
}

.marketing-automation-phone-whatsapp {
    background: #efeae2;
}

.marketing-automation-phone-whatsapp::before {
    content: "";
    position: absolute;
    inset: 58px 0 62px;
    background:
        radial-gradient(circle at 15% 15%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 22%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        radial-gradient(circle at 36% 70%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        radial-gradient(circle at 60% 48%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        linear-gradient(transparent, transparent);
    opacity: 0.78;
    pointer-events: none;
}

.marketing-automation-whatsapp-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 2.35rem 1rem 0.95rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-automation-whatsapp-back {
    color: #2563eb;
    font-size: 2rem;
    line-height: 1;
}

.marketing-automation-whatsapp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #7c3aed 0%, #c4b5fd 60%, #ffffff 100%);
    box-shadow: 0 0 0 3px #fff;
}

.marketing-automation-whatsapp-head strong {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
}

.marketing-automation-whatsapp-body {
    position: relative;
    z-index: 1;
    min-height: 566px;
    padding: 1.35rem 1rem 1rem;
    display: flex;
    align-items: flex-start;
}

.marketing-automation-whatsapp-bubble {
    width: min(292px, 100%);
    border-radius: 1.1rem;
    background: #fff;
    padding: 1rem 1rem 0.9rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.9rem;
    color: #111827;
}

.marketing-automation-whatsapp-bubble p,
.marketing-automation-whatsapp-bubble small,
.marketing-automation-whatsapp-row span,
.marketing-automation-whatsapp-row strong {
    margin: 0;
}

.marketing-automation-whatsapp-whole,
.marketing-automation-whatsapp-row {
    display: grid;
    gap: 0.2rem;
}

.marketing-automation-whatsapp-row strong {
    font-size: 0.86rem;
    font-weight: 800;
}

.marketing-automation-whatsapp-row span {
    font-size: 0.93rem;
    line-height: 1.4;
}

.marketing-automation-whatsapp-bubble > p {
    font-size: 0.94rem;
    line-height: 1.45;
}

.marketing-automation-whatsapp-bubble > small {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.35;
}

.marketing-automation-whatsapp-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.9rem 1rem;
    background: #efeae2;
}

.marketing-automation-whatsapp-plus {
    color: #3b82f6;
    font-size: 2rem;
    line-height: 1;
}

.marketing-automation-whatsapp-input {
    flex: 1 1 auto;
    min-height: 40px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #dbe3ef;
}

.marketing-automation-whatsapp-foot-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
}

.marketing-automation-whatsapp-foot-icon.is-mic {
    width: 14px;
    height: 20px;
    border-radius: 999px;
}

.marketing-automation-modal .clients-pro-add-btn,
.marketing-automation-trigger-actions .clients-pro-add-btn {
    background: #111111;
    border-color: #111111;
    color: #fff;
    box-shadow: none;
}

.marketing-automation-modal .clients-pro-add-btn:hover,
.marketing-automation-trigger-actions .clients-pro-add-btn:hover {
    background: #1f2937;
    border-color: #1f2937;
}

.marketing-automation-modal .btn-outline,
.marketing-automation-trigger-actions .btn-outline,
.marketing-automation-stage-body > .btn-outline {
    border-color: #d5dbe7;
    color: #111827;
    background: #fff;
}

.marketing-automation-modal .btn-outline:hover,
.marketing-automation-trigger-actions .btn-outline:hover,
.marketing-automation-stage-body > .btn-outline:hover {
    background: #f8fafc;
    border-color: #cfd7e6;
    color: #111827;
}

@media (max-width: 980px) {
    .marketing-automation-grid {
        grid-template-columns: 1fr;
    }

    .marketing-automation-banner {
        align-items: start;
        flex-direction: column;
    }

    .marketing-automation-channel-card {
        align-items: start;
        flex-direction: column;
    }

    .marketing-automation-channel-meta {
        width: 100%;
        justify-content: space-between;
    }

    .marketing-automation-channel-split {
        flex-direction: column;
        align-items: flex-start;
    }
}

.marketing-wa-ai-status {
    font-size: 0.92rem;
    font-weight: 700;
    color: #64748b;
}

.marketing-wa-ai-status[data-state="success"] {
    color: #15803d;
}

.marketing-wa-ai-status[data-state="error"] {
    color: #dc2626;
}

.marketing-wa-ai-status[data-state="loading"] {
    color: #5b50f6;
}

.marketing-whatsapp-composer {
    display: grid;
    gap: 0.85rem;
}

.marketing-whatsapp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.marketing-wa-chip {
    border: 1px solid #d8dee8;
    background: #fff;
    color: #111827;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.marketing-wa-chip:hover {
    border-color: #6c63ff;
    color: #6c63ff;
    background: #f7f5ff;
}

.marketing-wa-chip.is-variable {
    font-weight: 600;
    color: #5b50f6;
}

.marketing-whatsapp-composer textarea {
    min-height: 190px;
    resize: vertical;
}

.marketing-whatsapp-preview {
    display: grid;
    gap: 0.55rem;
}

.marketing-whatsapp-preview-label {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
}

.marketing-whatsapp-bubble {
    max-width: 620px;
    padding: 1rem 1.1rem;
    border-radius: 18px 18px 18px 6px;
    background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
    border: 1px solid #d8e7f5;
    color: #0f172a;
    line-height: 1.55;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    white-space: normal;
    word-break: break-word;
}

.marketing-whatsapp-bubble.is-empty {
    color: #94a3b8;
    font-style: italic;
}

.marketing-whatsapp-token {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    margin: 0 0.08rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #5b50f6;
    font-weight: 700;
    font-size: 0.95em;
}


@keyframes marketing-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.marketing-center-list {
    display: grid;
}

.marketing-center-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eef2f7;
}

.marketing-center-row-select-all {
    padding-top: 0;
}

.marketing-center-check {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.marketing-center-check input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.marketing-center-check > span {
    width: 24px;
    height: 24px;
    border: 2px solid #c7d2e2;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.marketing-center-check > span::after {
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    margin: 2px 0 0 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.marketing-center-check input:checked + span {
    border-color: #6c63ff;
    background: #6c63ff;
}

.marketing-center-check input:checked + span::after {
    opacity: 1;
}

.marketing-center-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-center-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketing-center-thumb.is-placeholder {
    color: #6c63ff;
}

.marketing-center-copy {
    display: grid;
    gap: 0.12rem;
}

.marketing-center-copy strong {
    color: #111827;
    font-size: 1.04rem;
}

.marketing-center-copy small {
    color: #64748b;
    line-height: 1.45;
}

.marketing-success-screen {
    min-height: calc(100vh - 120px);
}

.marketing-success-shell {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    padding-top: 3rem;
}

.marketing-success-mark {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #4ade80 0%, #22c55e 58%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(34, 197, 94, 0.22);
}

.marketing-success-mark .material-symbols-outlined {
    font-size: 2.2rem;
    line-height: 1;
}

.marketing-success-copy {
    margin-bottom: 0;
    text-align: center;
}

.marketing-success-card {
    width: min(760px, 100%);
    padding: 2rem 2.1rem;
    border: 1px solid #d8dee8;
    border-radius: 18px;
    background: #fff;
}

.marketing-success-card h3 {
    margin: 0 0 1rem;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
}

.marketing-success-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.marketing-success-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    color: #111827;
    line-height: 1.5;
}

.marketing-success-list .material-symbols-outlined {
    color: #6c63ff;
    font-size: 1.2rem;
    margin-top: 0.1rem;
}

.marketing-scope-stack {
    display: grid;
    gap: 0.8rem;
}

.marketing-scope-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: 0.95rem 1.1rem;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    background: #fff;
}

.marketing-scope-card > span,
.marketing-scope-card-copy > span {
    color: #111827;
    font-weight: 700;
}

.marketing-scope-card strong {
    color: #6c63ff;
    font-weight: 700;
}

.marketing-scope-card-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.marketing-scope-card-selectable {
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.marketing-scope-card-selectable:hover,
.marketing-scope-card-selectable:focus-visible {
    border-color: #6c63ff;
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.marketing-scope-card.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}

.marketing-scope-action {
    color: #6c63ff;
    font-weight: 800;
    white-space: nowrap;
}

.marketing-scope-error {
    margin: -0.1rem 0 0;
    color: #dc2626;
    font-size: 0.94rem;
    font-weight: 600;
}

.marketing-scope-modal {
    position: fixed;
    inset: 0;
    z-index: 3600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
}

.marketing-scope-modal[hidden] {
    display: none !important;
}

.marketing-scope-picker {
    width: min(880px, 100%);
    max-height: min(84vh, 760px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.marketing-scope-picker-head,
.marketing-scope-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-scope-picker-foot {
    border-top: 1px solid #e5e7eb;
    border-bottom: 0;
}

.marketing-scope-picker-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1.35rem;
    font-weight: 800;
}

.marketing-scope-picker-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d8dee8;
    border-radius: 999px;
    background: #fff;
    color: #132238;
    cursor: pointer;
}

.marketing-scope-picker-search {
    padding: 1rem 1.4rem 0;
}

.marketing-scope-picker-search input {
    width: 100%;
}

.marketing-scope-picker-body {
    min-height: 240px;
    overflow: auto;
    padding: 1rem 1.4rem 1.2rem;
}

.marketing-scope-picker-group + .marketing-scope-picker-group {
    margin-top: 1.1rem;
}

.marketing-scope-picker-group header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.marketing-scope-picker-group h4 {
    margin: 0;
    color: #132238;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-scope-picker-group header span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 700;
}

.marketing-scope-picker-items {
    display: grid;
}

.marketing-scope-picker-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid #eef2f7;
}

.marketing-scope-picker-item input {
    width: 18px;
    height: 18px;
}

.marketing-scope-picker-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.marketing-scope-picker-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.marketing-scope-picker-copy small {
    color: #64748b;
    font-size: 0.85rem;
}

.marketing-scope-picker-price {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.marketing-scope-picker-empty {
    padding: 2.2rem 0.5rem;
    color: #64748b;
    text-align: center;
}

.marketing-inline-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 0.75rem;
}

.marketing-offer-copy-topline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.marketing-offer-copy-topline span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.12rem 0.65rem;
    border-radius: 999px;
    background: #f4f5fb;
    color: #5b4bff;
    font-size: 0.8rem;
    font-weight: 800;
}

.marketing-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-placeholder-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.35rem;
}

.marketing-placeholder-card-soft {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.marketing-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(56, 189, 248, 0.14));
    color: #1d4ed8;
    font-size: 1.55rem;
}

.marketing-placeholder-card h3 {
    margin: 0 0 0.25rem;
    color: #132238;
}

.marketing-placeholder-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

@media (max-width: 1080px) {
    .marketing-offer-card {
        grid-template-columns: 1fr;
    }

    .marketing-offer-meta {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .marketing-form-grid,
    .marketing-placeholder-grid,
    .marketing-wizard-form-grid,
    .marketing-inline-split {
        grid-template-columns: 1fr;
    }

    .marketing-scope-picker {
        width: min(720px, 100%);
    }
}

@media (max-width: 640px) {
    .marketing-toolbar,
    .marketing-editor-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .marketing-filter-select,
    .marketing-offer-sales {
        min-width: 0;
        justify-items: start;
    }

    .marketing-offer-main {
        align-items: flex-start;
    }

    .marketing-scope-modal {
        padding: 1rem;
    }

    .marketing-scope-picker-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .marketing-scope-picker-price {
        grid-column: 2;
        padding-left: 0.1rem;
    }

    .marketing-offer-meta {
        align-items: stretch;
    }

    .marketing-create-toolbar {
        grid-template-columns: 1fr;
    }

    .marketing-create-surface {
        padding: 0;
    }

    .marketing-create-modal-shell {
        padding-inline: 0.8rem;
    }

    .marketing-create-topbar {
        margin-inline: -0.8rem;
        padding-inline: 0.95rem;
    }

    .marketing-create-toolbar-actions {
        justify-content: flex-end;
        flex-direction: column;
        align-items: stretch;
        margin-left: auto;
    }

    .marketing-create-toolbar-actions > * {
        width: 100%;
    }

    .marketing-discount-row {
        grid-template-columns: 1fr;
    }

    .marketing-scope-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

.clients-drawer[hidden] {
    display: none;
}

.clients-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: var(--clients-drawer-left, 0px);
    z-index: 120;
    pointer-events: none;
}

.clients-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: auto;
}

.clients-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(1240px, 96vw);
    background: #ffffff;
    border-left: 1px solid rgba(214, 220, 232, 0.9);
    box-shadow: 0 24px 50px rgba(10, 16, 26, 0.22);
    transform: translateX(104%);
    transition: transform 0.22s ease;
    pointer-events: auto;
    overflow: visible;
}

.clients-drawer.is-open .clients-drawer-backdrop {
    opacity: 1;
}

.clients-drawer.is-open .clients-drawer-panel {
    transform: translateX(0);
}

.clients-drawer-close,
.clients-hub-close {
    position: absolute;
    top: 0.9rem;
    left: -42px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d8dde6;
    background: #f4f6f8;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    z-index: 6;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.10),
        0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.clients-drawer-close::before,
.clients-drawer-close::after,
.clients-hub-close::before,
.clients-hub-close::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2.5px;
    border-radius: 999px;
    background: #111827;
}

.clients-drawer-close::before,
.clients-hub-close::before {
    transform: rotate(45deg);
}

.clients-drawer-close::after,
.clients-hub-close::after {
    transform: rotate(-45deg);
}

.clients-drawer-close:hover,
.clients-hub-close:hover {
    background: #ffffff;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.13),
        0 1px 2px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.clients-drawer-body {
    height: 100%;
    overflow: hidden;
}

.clients-drawer-loading {
    height: 100%;
    display: grid;
    place-content: center;
    gap: 0.65rem;
    color: #52627a;
    font-weight: 700;
}

.clients-drawer-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(31, 198, 215, 0.18);
    border-top-color: rgba(31, 198, 215, 0.95);
    animation: clientsDrawerSpin 0.75s linear infinite;
    margin-inline: auto;
}

@keyframes clientsDrawerSpin {
    to {
        transform: rotate(360deg);
    }
}

.clients-drawer-error {
    padding: 1.2rem;
    color: #6a2a2a;
    font-weight: 700;
}

.clients-drawer .clients-hub-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.clients-drawer .clients-hub-close {
    display: none;
}

.clients-drawer .clients-hub-layout {
    height: 100%;
    min-height: 0;
}

.clients-drawer .clients-hub-card,
.clients-drawer .clients-hub-nav {
    overflow-y: auto;
}

.clients-drawer .clients-hub-main {
    overflow-y: auto;
    min-height: 0;
    padding-top: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #ffffff !important;
}

.clients-drawer .clients-hub-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.clients-drawer .clients-hub-section-head {
    margin: 0;
    padding: 1.05rem 1.25rem 0.85rem;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.clients-drawer .clients-hub-sales-shell {
    gap: 0.75rem;
}

.clients-drawer .clients-hub-sticky-head,
.clients-drawer .clients-hub-sticky-head-appointments {
    top: 0 !important;
    margin-top: 0 !important;
}

.inventory-drawer .clients-drawer-panel {
    width: min(1120px, calc(100vw - var(--clients-drawer-left, 0px)));
    background: #f7f7f8;
    overflow: visible;
}

.inventory-drawer .clients-drawer-body {
    background: #f7f7f8;
    overflow: hidden;
}

.inventory-drawer .inventory-hub-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.inventory-drawer .inventory-hub-layout {
    grid-template-columns: 278px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.inventory-drawer .inventory-hub-card {
    position: relative;
    z-index: 4;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100dvh;
    scrollbar-width: thin;
    scrollbar-color: rgba(121, 164, 214, 0.7) rgba(214, 220, 230, 0.55);
}

.inventory-drawer .inventory-hub-card::-webkit-scrollbar {
    width: 5px;
}

.inventory-drawer .inventory-hub-card::-webkit-scrollbar-track {
    background: rgba(214, 220, 230, 0.55);
    border-radius: 999px;
}

.inventory-drawer .inventory-hub-card::-webkit-scrollbar-thumb {
    background: rgba(121, 164, 214, 0.7);
    border-radius: 999px;
}

.inventory-drawer .inventory-hub-main {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    min-height: 0;
}

.inventory-hub-card {
    padding: 1.45rem 1.15rem 1.15rem;
}

.inventory-hub-photo-shell {
    position: relative;
    width: 100%;
    max-width: 232px;
    margin: 0 auto;
}

.inventory-hub-photo-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    min-height: 30px;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.94);
    color: #111a2a;
    font-size: 0.82rem;
    font-weight: 700;
}

.inventory-hub-photo-stage {
    position: relative;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
}

.inventory-hub-photo-stage.has-image {
    background: #ffffff;
}

.inventory-hub-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.24s ease;
}

.inventory-hub-photo-glow {
    position: absolute;
    left: 20%;
    bottom: 31%;
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 215, 150, 0.44);
    filter: blur(20px);
}

.inventory-hub-photo-jar,
.inventory-hub-photo-candle {
    position: absolute;
    bottom: 16%;
    border-radius: 12px 12px 10px 10px;
    box-shadow: 0 14px 22px rgba(38, 22, 15, 0.22);
}

.inventory-hub-photo-jar {
    left: 13%;
    width: 29%;
    height: 40%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #5d331f 0%, #87472a 62%, #3d2318 100%);
}

.inventory-hub-photo-jar::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 26%;
    width: 48%;
    height: 17%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #d5d7dc, #a9b0b8);
}

.inventory-hub-photo-candle {
    left: 60%;
    width: 31%;
    height: 43%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #eee8dd 0%, #d4c7b6 70%, #96806c 100%);
}

.inventory-hub-photo-candle::before {
    content: "";
    position: absolute;
    top: -13%;
    left: 45%;
    width: 9%;
    height: 17%;
    border-radius: 999px;
    background: #202328;
}

.inventory-hub-photo-candle::after {
    content: "";
    position: absolute;
    top: -27%;
    left: 34%;
    width: 24%;
    height: 27%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.9) 34%, rgba(255, 175, 73, 0.9) 60%, rgba(255, 138, 45, 0.1) 100%);
}

.inventory-hub-photo-surface {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(90deg, rgba(88, 109, 141, 0.55) 0 14%, rgba(241, 226, 195, 0.85) 14% 28%, rgba(110, 128, 159, 0.5) 28% 42%, rgba(241, 226, 195, 0.85) 42% 56%, rgba(110, 128, 159, 0.5) 56% 70%, rgba(241, 226, 195, 0.85) 70% 84%, rgba(110, 128, 159, 0.5) 84% 100%);
    opacity: 0.8;
}

.inventory-hub-photo-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.8rem 0 0.95rem;
}

.inventory-hub-photo-dots.is-hidden {
    display: none;
}

.inventory-hub-photo-dots span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #dedfe4;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.inventory-hub-photo-dots span:hover {
    transform: scale(1.08);
}

.inventory-hub-photo-dots span.is-active {
    background: #c5c7cf;
}

.inventory-order-product-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.inventory-hub-card-subtitle {
    margin: 0.22rem 0 0.8rem;
    text-align: center;
    color: #6a778a;
    font-size: 0.9rem;
    font-weight: 600;
}

.inventory-hub-stock-pill {
    width: fit-content;
    margin: 0 auto 1rem;
    padding: 0.4rem 0.82rem;
    border-radius: 999px;
    border: 1px solid #d7d7f4;
    background: #f1f0ff;
    color: #5f56ff;
    font-size: 0.88rem;
    font-weight: 700;
}

.inventory-hub-pill-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.inventory-hub-pill-row .inventory-hub-stock-pill {
    margin: 0;
}

.inventory-hub-order-pill {
    width: fit-content;
    padding: 0.4rem 0.82rem;
    border-radius: 999px;
    border: 1px solid #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
    font-size: 0.88rem;
    font-weight: 700;
}

.inventory-hub-card-actions {
    justify-content: center;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown,
.inventory-hub-card-actions .clients-hub-actions-dropdown summary {
    width: 100%;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown summary {
    position: relative;
    justify-content: center;
    padding-right: 2.8rem;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown summary::after {
    content: 'expand_more';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    color: #1f2938;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown[open] summary::after {
    content: 'expand_less';
}

.inventory-hub-actions-menu {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0.42rem;
    gap: 0.2rem;
}

.inventory-hub-actions-menu .inventory-hub-action-item {
    width: 100%;
    padding: 0.8rem 0.88rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #171f30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    text-align: left;
    text-decoration: none;
    font-size: 0.96rem;
    font-weight: 650;
    cursor: pointer;
}

.inventory-hub-actions-menu .inventory-hub-action-item:hover {
    background: #f4f6fb;
}

.inventory-hub-action-item .material-symbols-outlined {
    font-size: 1.28rem;
    color: currentColor;
}

.inventory-hub-action-item.is-pending {
    opacity: 0.54;
    cursor: not-allowed;
}

.inventory-hub-action-item.is-danger {
    color: #eb2c4b;
}

.inventory-stock-modal {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.inventory-stock-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.inventory-stock-modal-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    color: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.inventory-stock-modal-backdrop:hover,
.inventory-stock-modal-backdrop:focus-visible,
.inventory-stock-modal-backdrop:active {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.inventory-stock-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    max-height: min(760px, calc(100vh - 2.4rem));
    min-height: 0;
    border-radius: 18px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    box-shadow: 0 28px 54px rgba(12, 23, 36, 0.24);
    padding: 1.7rem 1.8rem 1.9rem;
    display: grid;
    gap: 1.35rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-stock-dialog::-webkit-scrollbar {
    width: 6px;
}

.inventory-stock-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.inventory-stock-dialog::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(121, 134, 156, 0.38);
}

.inventory-stock-dialog::-webkit-scrollbar-thumb:hover {
    background: rgba(121, 134, 156, 0.56);
}

.inventory-stock-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.inventory-stock-close::before,
.inventory-stock-close::after {
    content: "";
    position: absolute;
    inset: 18px 9px auto;
    height: 2px;
    border-radius: 999px;
    background: #111827;
}

.inventory-stock-close::before {
    transform: rotate(45deg);
}

.inventory-stock-close::after {
    transform: rotate(-45deg);
}

.inventory-stock-dialog-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.75rem, 2vw, 2.1rem);
    font-weight: 900;
}

.inventory-stock-dialog-body {
    display: grid;
    gap: 1.3rem;
}

.inventory-order-email-dialog {
    width: min(760px, 92vw);
}

.inventory-order-email-form {
    display: grid;
    gap: 1.35rem;
}

.inventory-order-email-config {
    display: grid;
    gap: 0.28rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 1px solid #dbe2ed;
    background: #f7f8fb;
}

.inventory-order-email-config strong {
    color: #101a2b;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-order-email-config p {
    margin: 0;
    color: #5f7088;
    font-size: 0.9rem;
    line-height: 1.45;
}

.inventory-order-email-config.is-ready {
    border-color: #cfe7bf;
    background: #eef8e8;
}

.inventory-order-email-config.is-pending {
    border-color: #f4b8bf;
    background: #fff1f3;
}

.inventory-order-email-config.is-pending strong {
    color: #a11d33;
}

.inventory-order-email-config.is-pending p {
    color: #b42338;
}

.inventory-order-email-config.is-pending .clients-hub-section-link {
    color: #c01048;
}

.inventory-order-email-body {
    gap: 1.15rem;
}

.inventory-order-delete-modal {
    align-items: center;
    justify-items: center;
}

.inventory-order-delete-dialog {
    width: min(640px, 92vw);
    margin: 0 auto;
    padding: 2.15rem 2.5rem 1.95rem;
    justify-self: center;
    align-self: center;
}

.inventory-order-delete-head {
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 0 2.4rem;
}

.inventory-order-delete-head h3 {
    font-size: clamp(1.28rem, 1.6vw, 1.6rem);
}

.inventory-order-delete-body {
    display: grid;
    justify-items: center;
    padding-top: 0.4rem;
    text-align: center;
}

.inventory-order-delete-body p {
    max-width: 380px;
    margin: 0;
    color: #1a2434;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.55;
    font-weight: 500;
}

.inventory-order-delete-actions {
    margin-top: 0.8rem;
    justify-content: center;
}

.inventory-order-delete-actions .btn {
    min-width: 186px;
    min-height: 48px;
}

.inventory-order-delete-submit {
    border-radius: 999px;
    border-color: #e3133f;
    background: #e3133f;
    color: #ffffff;
    box-shadow: none;
}

.inventory-order-delete-submit:hover,
.inventory-order-delete-submit:focus-visible {
    border-color: #c80f37;
    background: #c80f37;
    color: #ffffff;
}

.service-delete-modal {
    z-index: 360;
}

.service-delete-modal .inventory-stock-modal-backdrop {
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.service-delete-modal .inventory-stock-modal-backdrop:hover,
.service-delete-modal .inventory-stock-modal-backdrop:focus-visible,
.service-delete-modal .inventory-stock-modal-backdrop:active {
    background: rgba(15, 23, 42, 0.28);
}

.service-delete-dialog {
    width: min(700px, 92vw);
    padding: 2.05rem 2.55rem 2rem;
    gap: 1.65rem;
}

.service-delete-head {
    display: grid;
    justify-items: start;
    text-align: left;
    padding: 0 3rem 0 0;
}

.service-delete-head h3 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.12rem, 1.32vw, 1.34rem);
    font-weight: 800;
    line-height: 1.15;
}

.service-delete-body {
    display: grid;
    justify-items: start;
    text-align: left;
    padding-top: 0;
}

.service-delete-body p {
    max-width: none;
    color: #101828;
    text-align: left;
    font-size: 1.08rem;
    line-height: 1.55;
    font-weight: 500;
}

.service-delete-actions {
    margin-top: 0.2rem;
    justify-content: center;
    gap: 1rem;
}

.service-delete-actions .btn {
    min-width: 190px;
    min-height: 52px;
}

.inventory-order-calendar-modal {
    z-index: 1260;
}

.inventory-order-calendar-dialog {
    width: min(660px, 88vw);
    padding: 1.45rem 1.8rem 1.45rem;
    gap: 1.15rem;
}

.inventory-order-calendar-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.22rem, 1.55vw, 1.55rem);
    font-weight: 900;
}

.inventory-order-calendar-body {
    display: grid;
    gap: 0.8rem;
}

.inventory-order-calendar-nav {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 0.8rem;
}

.inventory-order-calendar-title {
    color: #0f1728;
    font-size: 1.02rem;
    font-weight: 900;
    text-align: center;
}

.inventory-order-calendar-nav-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.inventory-order-calendar-nav-button:hover,
.inventory-order-calendar-nav-button:focus-visible {
    background: #f4f6fb;
    color: #111827;
}

.inventory-order-calendar-weekdays,
.inventory-order-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.inventory-order-calendar-weekdays span {
    color: #68778d;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: center;
    text-transform: lowercase;
}

.inventory-order-calendar-day {
    width: min(52px, 100%);
    height: 52px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    font-size: 0.96rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-calendar-day:hover,
.inventory-order-calendar-day:focus-visible {
    background: #f5f7fb;
    color: #111827;
    border-color: #eef2f7;
}

.inventory-order-calendar-day.is-outside {
    color: #a8b2c1;
    font-weight: 500;
}

.inventory-order-calendar-day.is-today {
    border-color: #cfd7e3;
}

.inventory-order-calendar-day.is-selected {
    border-color: #6558f5;
    background: #6558f5;
    color: #ffffff;
}

.inventory-order-calendar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.2rem;
}

.inventory-order-calendar-actions .btn {
    min-width: 112px;
}

.inventory-order-calendar-save {
    border-radius: 999px;
}

.inventory-order-center-modal {
    z-index: 1260;
}

.inventory-order-center-dialog {
    width: min(700px, 92vw);
    max-height: min(720px, calc(100vh - 2.4rem));
    box-sizing: border-box;
    min-height: 0;
    padding: 1.55rem 1.8rem 1.7rem;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 1rem;
    overflow: hidden;
}

.inventory-order-center-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    font-weight: 900;
}

.inventory-order-center-copy {
    margin: -0.2rem 0 0;
    color: #667588;
    font-size: 0.94rem;
    line-height: 1.55;
}

.inventory-order-center-list {
    display: grid;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.2rem;
}

.inventory-order-center-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid #d8e0eb;
    border-radius: 18px;
    background: #ffffff;
    color: #0f1728;
    text-align: left;
    box-shadow: none;
}

.inventory-order-center-option:hover,
.inventory-order-center-option:focus-visible {
    border-color: #c8d1df;
    background: #f9fbfe;
    color: #0f1728;
}

.inventory-order-center-option.is-selected {
    border-color: #c9c5ff;
    background: #f6f5ff;
    box-shadow: inset 0 0 0 1px rgba(99, 88, 231, 0.12);
}

.inventory-order-center-option-thumb {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ecebfa 0%, #dfe2f8 100%);
    color: #6358e7;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-order-center-option-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.inventory-order-center-option-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.inventory-order-center-option-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 850;
}

.inventory-order-center-option-copy span,
.inventory-order-center-option-copy small {
    margin: 0;
    color: #6a778b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-order-center-option-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eef1ff;
    color: #6157e8;
    font-size: 0.76rem;
    font-weight: 800;
}

.inventory-order-center-option .material-symbols-outlined {
    font-size: 1.3rem;
    color: #c6cfdd;
}

.inventory-order-center-option.is-selected .material-symbols-outlined {
    color: #6358e7;
}

.inventory-order-center-empty {
    margin: 0;
    padding: 1.1rem;
    border: 1px dashed #d8e0eb;
    border-radius: 16px;
    color: #6a778b;
    font-size: 0.94rem;
    text-align: center;
}

.inventory-order-center-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.inventory-order-center-save {
    border-radius: 999px;
}

.inventory-order-ready-modal {
    z-index: 1260;
}

.inventory-order-ready-dialog {
    width: min(980px, 94vw);
    max-height: min(820px, calc(100vh - 2.4rem));
    padding: 1.15rem 1.4rem 1.5rem;
    display: grid;
    gap: 1.2rem;
    border-radius: 28px;
    overflow-y: auto;
    overflow-x: hidden;
}

.inventory-order-ready-topbar {
    display: flex;
    justify-content: flex-end;
}

.inventory-order-ready-ok {
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    border: 1px solid #07080d;
    border-radius: 999px;
    background: #07080d;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-ready-ok:hover,
.inventory-order-ready-ok:focus-visible {
    border-color: #191c22;
    background: #191c22;
    color: #ffffff;
}

.inventory-order-ready-hero {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0 0.1rem;
    text-align: center;
}

.inventory-order-ready-badge {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.82), transparent 24%),
        linear-gradient(180deg, #58c86a 0%, #219653 100%);
    display: grid;
    place-items: center;
    color: #ffffff;
    box-shadow: 0 22px 36px rgba(34, 153, 84, 0.24);
}

.inventory-order-ready-badge .material-symbols-outlined {
    font-size: 2.3rem;
    font-weight: 700;
}

.inventory-order-ready-hero h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    font-weight: 900;
}

.inventory-order-ready-hero p {
    max-width: 620px;
    margin: 0;
    color: #667588;
    font-size: 1rem;
    line-height: 1.6;
}

.inventory-order-ready-summary {
    padding: 1.35rem 1.45rem;
    border: 1px solid #e1e8f1;
    border-radius: 22px;
    background: #ffffff;
}

.inventory-order-ready-summary h4 {
    margin: 0 0 1rem;
    color: #0f1728;
    font-size: 1.14rem;
    font-weight: 900;
}

.inventory-order-ready-summary-list {
    display: grid;
    gap: 0.8rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.inventory-order-ready-summary-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #112034;
    font-size: 1rem;
}

.inventory-order-ready-summary-list .material-symbols-outlined {
    color: #28924d;
    font-size: 1.2rem;
}

.inventory-order-ready-summary-list strong {
    color: #0f1728;
    font-weight: 900;
}

.inventory-order-ready-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.inventory-order-ready-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid #e1e8f1;
    border-radius: 22px;
    background: #ffffff;
}

.inventory-order-ready-card-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
}

.inventory-order-ready-card-copy .material-symbols-outlined {
    color: #111827;
    font-size: 1.4rem;
}

.inventory-order-ready-card-copy h4 {
    margin: 0 0 0.25rem;
    color: #0f1728;
    font-size: 1.08rem;
    font-weight: 900;
}

.inventory-order-ready-card-copy p {
    margin: 0;
    color: #697689;
    font-size: 0.94rem;
    line-height: 1.55;
}

.inventory-order-ready-action {
    justify-self: end;
    min-height: 42px;
    padding-inline: 1.1rem;
    border-radius: 999px;
}

@media (max-width: 820px) {
    .inventory-order-ready-dialog {
        width: min(94vw, 720px);
        padding: 1rem 1rem 1.2rem;
    }

    .inventory-order-ready-actions {
        grid-template-columns: 1fr;
    }

    .inventory-order-ready-action {
        justify-self: start;
    }
}

.inventory-order-surcharge-modal {
    z-index: 1260;
}

.inventory-order-surcharge-dialog {
    width: min(760px, 92vw);
    max-height: min(720px, calc(100vh - 2.4rem));
    box-sizing: border-box;
    min-height: 0;
    padding: 1.55rem 2.15rem 1.65rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 1.25rem;
    align-self: center;
    overflow: hidden;
}

.inventory-order-surcharge-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.35rem, 1.75vw, 1.8rem);
    font-weight: 900;
}

.inventory-order-surcharge-body {
    display: grid;
    gap: 1.15rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.2rem;
}

.inventory-order-surcharge-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) auto auto;
    gap: 0.75rem;
    align-items: end;
}

.inventory-order-surcharge-field {
    display: grid;
    gap: 0.42rem;
}

.inventory-order-surcharge-field span {
    color: #111c2d;
    font-size: 0.94rem;
    font-weight: 800;
}

.inventory-order-surcharge-field input {
    height: 46px;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-order-surcharge-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    min-height: 46px;
    padding: 4px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    background: #f3f5f8;
}

.inventory-order-surcharge-type {
    min-width: 56px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f1728;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-surcharge-type.is-active {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 40, 0.08);
}

.inventory-order-surcharge-remove {
    width: 40px;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #151d2a;
    box-shadow: none;
}

.inventory-order-surcharge-remove:hover,
.inventory-order-surcharge-remove:focus-visible {
    background: #f4f6fb;
    color: #151d2a;
}

.inventory-order-surcharge-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6257ff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-surcharge-add:hover,
.inventory-order-surcharge-add:focus-visible {
    color: #564ae8;
    background: transparent;
}

.inventory-order-surcharge-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.inventory-order-surcharge-save {
    border-radius: 999px;
}

.inventory-order-products-modal {
    z-index: 1260;
}

.inventory-order-products-dialog {
    width: min(1160px, 94vw);
    max-height: calc(100vh - 2rem);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 1.1rem;
    padding: 1.45rem 1.55rem 1.25rem;
    border-radius: 28px;
    border: 1px solid #e1e8f1;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 32px 72px rgba(14, 28, 44, 0.24);
    overflow: hidden;
}

.inventory-order-products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #edf1f7;
}

.inventory-order-products-copy {
    display: grid;
    gap: 0.25rem;
}

.inventory-order-products-copy h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.18rem, 1.45vw, 1.48rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.inventory-order-products-copy p {
    margin: 0;
    color: #667587;
    font-size: 0.93rem;
    line-height: 1.55;
}

.inventory-order-products-head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.inventory-order-products-submit {
    border-radius: 999px;
}

.inventory-order-products-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid #e7edf5;
    border-radius: 22px;
    background: #f7f9fc;
}

.inventory-order-products-search {
    min-width: 0;
}

.inventory-order-products-order-shell {
    justify-self: end;
    min-width: 310px;
}

.inventory-order-products-order {
    width: 100%;
    min-height: 42px;
    padding: 0.56rem 2.7rem 0.56rem 1rem;
    border: 1px solid #d5ddeb;
    border-radius: 999px;
    background: #ffffff;
    color: #101927;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-products-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    min-height: 34px;
    padding-inline: 0.15rem;
}

.inventory-order-products-supplier-pill {
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.56rem 0.92rem;
    border: 1px solid #d6ddff;
    background: #eef1ff;
    color: #584ee0;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-products-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7788;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-products-clear:hover,
.inventory-order-products-clear:focus-visible {
    background: transparent;
    color: #101927;
}

.inventory-order-products-table-shell {
    min-height: 0;
    overflow: auto;
    border: 1px solid #e6ecf4;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.inventory-order-products-table {
    min-width: 920px;
    background: transparent;
}

.inventory-order-products-check-col {
    width: 54px;
    text-align: center;
}

.inventory-order-products-table td:first-child,
.inventory-order-products-table th:first-child {
    width: 54px;
    text-align: center;
}

.inventory-order-products-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.9rem 1rem;
    background: #f8fafd;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inventory-order-products-table td {
    padding: 1rem;
    vertical-align: middle;
}

.inventory-order-products-table tbody tr.is-selected td {
    background: #f7f9ff;
}

.inventory-order-products-table tbody tr.is-selected .inventory-order-products-name-copy strong {
    color: #4d45d6;
}

.inventory-order-products-table input[type="checkbox"] {
    width: 24px;
    height: 24px;
    accent-color: #6155f6;
}

.inventory-order-products-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 280px;
}

.inventory-order-products-thumb.clients-pro-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 16px;
    border: 1px solid rgba(211, 219, 231, 0.98);
    background: #f5f7fb;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(19, 33, 51, 0.1);
}

.inventory-order-products-name-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.inventory-order-products-name-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.22;
}

.inventory-order-products-name-copy small {
    color: #6b7788;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}

.inventory-order-products-table .inventory-table-tag,
.inventory-order-products-table .inventory-table-stock-pill {
    min-height: 34px;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    font-size: 0.83rem;
}

.inventory-order-products-table .inventory-table-price {
    font-size: 0.96rem;
}

.inventory-order-products-footer {
    padding: 0.9rem 0.1rem 0;
    border-top: 1px solid #edf1f7;
}

@media (max-width: 760px) {
    .inventory-order-surcharge-dialog {
        padding: 1.25rem 1rem 1.2rem;
    }

    .inventory-order-surcharge-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .inventory-order-surcharge-toggle,
    .inventory-order-surcharge-remove {
        justify-self: start;
    }

    .inventory-order-products-dialog {
        width: min(96vw, 96vw);
        padding: 1rem 0.85rem 1rem;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        border-radius: 22px;
    }

    .inventory-order-products-head,
    .inventory-order-products-head-actions,
    .inventory-order-products-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-order-products-order-shell {
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    .inventory-order-products-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-order-products-thumb.clients-pro-avatar {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .inventory-order-products-name-cell {
        min-width: 220px;
    }
}

.inventory-stock-summary {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    text-align: center;
}

.inventory-stock-summary h4 {
    margin: 0;
    color: #111b2c;
    font-size: 1.15rem;
    font-weight: 900;
}

.inventory-stock-dialog-pill {
    margin: 0;
}

.inventory-stock-qty-block {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
}

.inventory-stock-qty-block strong {
    color: #101a2b;
    font-size: 0.92rem;
    font-weight: 900;
}

.inventory-stock-stepper {
    display: grid;
    grid-template-columns: 56px minmax(110px, 150px) 56px;
    gap: 0.55rem;
    align-items: center;
}

.inventory-stock-step {
    width: 50px;
    height: 50px;
    border: 1px solid #d8dde8;
    border-radius: 999px;
    background: #ffffff;
    color: #202939;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.inventory-stock-step span {
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-1px);
}

.inventory-stock-stepper input {
    height: 50px;
    border: 1px solid #b8c3d5;
    border-radius: 0;
    background: #ffffff;
    color: #0f1728;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
}

.inventory-stock-field {
    display: grid;
    gap: 0.42rem;
}

.inventory-stock-field label {
    color: #121c2d;
    font-size: 0.92rem;
    font-weight: 800;
}

.inventory-stock-field input,
.inventory-stock-field select,
.inventory-stock-field textarea {
    height: 48px;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-stock-field textarea {
    min-height: 152px;
    height: auto;
    padding: 0.95rem 1rem;
    resize: vertical;
}

.inventory-stock-field label span {
    color: #6b7789;
    font-weight: 600;
}

.inventory-order-email-help {
    color: #6b7789;
    font-size: 0.88rem;
    line-height: 1.45;
}

.inventory-order-email-attachment {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-height: 56px;
    padding: 0.9rem 1rem;
    border: 1px solid #d8dee9;
    border-radius: 12px;
    background: #f8f9fb;
    color: #657489;
    font-size: 0.96rem;
    font-weight: 600;
}

.inventory-order-email-attachment .material-symbols-outlined {
    color: #111c2d;
}

.inventory-stock-price-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
}

.inventory-stock-price-field span {
    color: #7a8598;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-stock-price-field input {
    border: 0;
    padding: 0;
    height: auto;
}

.inventory-stock-check {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #1d2839;
    font-size: 0.92rem;
    font-weight: 600;
}

.inventory-stock-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    accent-color: #6d5ef5;
}

.inventory-stock-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

.inventory-stock-dialog-actions .btn {
    min-width: 124px;
    justify-content: center;
}

.inventory-stock-primary {
    border-radius: 999px;
}

.inventory-order-email-submit {
    border-color: var(--lh-cyan);
    background: var(--lh-cyan);
    color: #ffffff;
    box-shadow: none;
}

.inventory-order-email-submit:hover,
.inventory-order-email-submit:focus-visible {
    border-color: var(--lh-cyan-2);
    background: var(--lh-cyan-2);
    color: #ffffff;
}

.inventory-stock-secondary {
    border-radius: 999px;
}

.inventory-hub-nav {
    padding-top: 1.1rem;
}

.inventory-hub-side-nav {
    margin-top: 1rem;
    padding: 1rem 0 0;
    border-top: 1px solid #e7ebf2;
    border-right: 0;
    background: transparent;
}

.inventory-hub-side-nav > a {
    width: 100%;
}

.inventory-hub-main {
    background: #f7f7f8;
    padding: 1.3rem 1.3rem 1.4rem;
}

.inventory-hub-main > h2,
.inventory-hub-view-panel > h2 {
    margin: 0 0 1.25rem;
}

.inventory-hub-view-panel[hidden] {
    display: none !important;
}

.inventory-hub-view-panel {
    display: none;
}

.inventory-hub-view-panel.is-active {
    display: block;
}

.inventory-hub-section-panel {
    display: none;
}

.inventory-hub-section-panel.is-active {
    display: block;
}

.inventory-hub-stack {
    gap: 1rem;
}

.inventory-hub-data-card {
    padding: 0;
    overflow: hidden;
}

.inventory-hub-data-card-compact .inventory-hub-data-body {
    padding-top: 0.9rem;
}

.inventory-hub-data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e7ebf2;
}

.inventory-hub-data-head h3 {
    margin: 0;
    color: #101a2b;
    font-size: 0.98rem;
    font-weight: 850;
}

.inventory-hub-data-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.15rem 1.1rem;
}

.inventory-hub-data-list {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.inventory-hub-data-list div {
    display: grid;
    grid-template-columns: minmax(190px, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.inventory-hub-data-list dt {
    color: #121c2d;
    font-size: 0.9rem;
    font-weight: 800;
}

.inventory-hub-data-list dd {
    margin: 0;
    color: #152235;
    font-size: 0.9rem;
    font-weight: 650;
    text-align: right;
}

.inventory-hub-copy-group {
    display: grid;
    gap: 0.95rem;
    padding-top: 1rem;
    border-top: 1px solid #eceff5;
}

.inventory-hub-copy-block h4 {
    margin: 0 0 0.24rem;
    color: #111c2d;
    font-size: 0.9rem;
    font-weight: 850;
}

.inventory-hub-copy-block p,
.inventory-hub-placeholder-copy {
    margin: 0;
    color: #203046;
    font-size: 0.92rem;
    line-height: 1.5;
}

.inventory-hub-orders-list {
    display: grid;
    gap: 1rem;
}

.inventory-hub-orders-empty {
    min-height: 248px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    padding: 2rem 1.25rem;
    border: 1px solid #dfe5ef;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
}

.inventory-hub-orders-empty-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 28%, rgba(113, 93, 255, 0.18), rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #f4f1ff 0%, #f8f7ff 100%);
    color: #5b49dc;
}

.inventory-hub-orders-empty-icon .material-symbols-outlined {
    font-size: 2.2rem;
    font-variation-settings: 'wght' 500;
}

.inventory-hub-orders-empty strong {
    color: #0f1728;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.inventory-hub-orders-empty p {
    margin: 0;
    color: #667487;
    font-size: 0.98rem;
    font-weight: 500;
}

.inventory-hub-order-card {
    width: 100%;
    appearance: none;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid #dde3ed;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 24, 38, 0.06);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.inventory-hub-order-card:hover {
    border-color: #cfd8e6;
    box-shadow: 0 18px 36px rgba(15, 24, 38, 0.1);
    transform: translateY(-1px);
}

.inventory-hub-order-card:focus-visible {
    outline: 2px solid #9fcdf3;
    outline-offset: 2px;
}

.inventory-hub-order-thumb {
    position: relative;
    width: 62px;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #dde3eb;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.96), transparent 24%),
        radial-gradient(circle at 72% 28%, rgba(255, 224, 171, 0.9), transparent 20%),
        linear-gradient(180deg, #7f7170 0%, #a79f9c 58%, #ddd4cc 100%);
    box-shadow: inset 0 -10px 16px rgba(47, 38, 35, 0.12);
}

.inventory-hub-order-thumb::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    background:
        linear-gradient(
            90deg,
            rgba(108, 125, 153, 0.55) 0 18%,
            rgba(240, 226, 196, 0.9) 18% 36%,
            rgba(108, 125, 153, 0.45) 36% 54%,
            rgba(240, 226, 196, 0.9) 54% 72%,
            rgba(108, 125, 153, 0.45) 72% 100%
        );
    opacity: 0.9;
}

.inventory-hub-order-thumb::after {
    content: "";
    position: absolute;
    left: 21%;
    bottom: 24%;
    width: 24%;
    height: 34%;
    border-radius: 9px 9px 7px 7px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #6d4430 0%, #8f593d 62%, #4a2d20 100%);
    box-shadow:
        24px 2px 0 6px rgba(233, 226, 214, 0.96),
        32px -19px 0 -10px rgba(255, 215, 121, 0.92);
}

.inventory-hub-order-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.inventory-hub-order-copy h3 {
    margin: 0;
    color: #101928;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-hub-order-copy p {
    margin: 0;
    color: #6e7a8b;
    font-size: 0.92rem;
    font-weight: 500;
}

.inventory-hub-order-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 900;
}

.inventory-hub-order-status {
    align-self: start;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #d6dce5;
    background: #f7f8fa;
    color: #7a8596;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
}

.inventory-hub-order-status .material-symbols-outlined {
    font-size: 0.92rem;
    font-variation-settings: 'wght' 500;
}

.inventory-hub-order-status.is-draft {
    border-color: #d8dde5;
    background: #f6f7fa;
    color: #7b8492;
}

.inventory-hub-order-status.is-ordered {
    border-color: #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
}

.inventory-hub-order-status.is-received {
    border-color: #b9e0a9;
    background: #e9f7e2;
    color: #3d9b16;
}

.inventory-hub-order-status.is-paused {
    border-color: #d8dde5;
    background: #f6f7fa;
    color: #7b8492;
}

.inventory-hub-order-status.is-completed {
    border-color: #b9e0a9;
    background: #e9f7e2;
    color: #3d9b16;
}

.inventory-hub-order-status.is-canceled {
    border-color: #ffd7df;
    background: #fff0f3;
    color: #c14662;
}

.inventory-order-aside-panel {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
}

.inventory-order-aside-panel.is-active {
    display: grid;
}

.inventory-order-hero {
    position: relative;
    width: max-content;
    display: grid;
    justify-items: center;
    margin: 0 auto;
    padding: 0.15rem 0 0.75rem;
}

.inventory-order-icon-tile {
    width: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 26px rgba(15, 24, 38, 0.06);
}

.inventory-order-icon-tile .material-symbols-outlined {
    font-size: 2.7rem;
    color: #171f30;
    font-variation-settings: 'wght' 300;
}

.inventory-order-hero-chip {
    position: absolute;
    right: -12px;
    bottom: -10px;
    width: 42px;
    height: 42px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6d7786;
    box-shadow: 0 14px 26px rgba(15, 24, 38, 0.16);
}

.inventory-order-hero-chip .material-symbols-outlined {
    font-size: 1.2rem;
    font-variation-settings: 'wght' 500;
}

.inventory-order-hero-chip.is-draft {
    background: #f2f3f6;
    color: #7d8695;
}

.inventory-order-hero-chip.is-ordered {
    background: #ffc21c;
    color: #34270b;
}

.inventory-order-hero-chip.is-received {
    background: #2f9d1f;
    color: #ffffff;
}

.inventory-order-created-short {
    margin: -0.25rem 0 0;
    text-align: center;
    color: #6a778a;
    font-size: 0.9rem;
    font-weight: 500;
}

.inventory-order-status-pill {
    padding: 0.34rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #d9dce3;
    background: #fafafc;
    color: #7f8795;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
}

.inventory-order-status-pill.is-draft {
    border-color: #d8dde5;
    background: #f6f7fa;
    color: #7b8492;
}

.inventory-order-status-pill.is-ordered {
    border-color: #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
}

.inventory-order-status-pill.is-received {
    border-color: #b9e0a9;
    background: #e9f7e2;
    color: #3d9b16;
}

.inventory-order-card-actions {
    width: 100%;
}

.inventory-order-action-button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: 999px;
}

.inventory-order-main-panel > h2 {
    margin: 0 0 1.3rem;
}

.inventory-order-section-panel {
    display: none;
}

.inventory-order-section-panel.is-active {
    display: block;
}

.inventory-order-product-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
}

.inventory-order-product-thumb {
    width: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
}

.inventory-order-product-thumb-stage {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
}

.inventory-order-product-thumb-glow {
    position: absolute;
    left: 20%;
    bottom: 31%;
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 215, 150, 0.44);
    filter: blur(7px);
}

.inventory-order-product-thumb-jar,
.inventory-order-product-thumb-candle {
    position: absolute;
    bottom: 16%;
    border-radius: 7px 7px 5px 5px;
}

.inventory-order-product-thumb-jar {
    left: 13%;
    width: 29%;
    height: 40%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #5d331f 0%, #87472a 62%, #3d2318 100%);
}

.inventory-order-product-thumb-candle {
    left: 60%;
    width: 31%;
    height: 43%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #eee8dd 0%, #d4c7b6 70%, #96806c 100%);
}

.inventory-order-product-thumb-candle::before {
    content: "";
    position: absolute;
    top: -13%;
    left: 45%;
    width: 9%;
    height: 17%;
    border-radius: 999px;
    background: #202328;
}

.inventory-order-product-thumb-candle::after {
    content: "";
    position: absolute;
    top: -27%;
    left: 34%;
    width: 24%;
    height: 27%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.9) 34%, rgba(255, 175, 73, 0.9) 60%, rgba(255, 138, 45, 0.1) 100%);
}

.inventory-order-product-thumb-surface {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(90deg, rgba(88, 109, 141, 0.55) 0 14%, rgba(241, 226, 195, 0.85) 14% 28%, rgba(110, 128, 159, 0.5) 28% 42%, rgba(241, 226, 195, 0.85) 42% 56%, rgba(110, 128, 159, 0.5) 56% 70%, rgba(241, 226, 195, 0.85) 70% 84%, rgba(110, 128, 159, 0.5) 84% 100%);
    opacity: 0.8;
}

.inventory-order-product-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.inventory-order-product-copy h4 {
    margin: 0;
    color: #121b2b;
    font-size: 0.96rem;
    font-weight: 900;
}

.inventory-order-product-copy p {
    margin: 0;
    color: #677588;
    font-size: 0.88rem;
    line-height: 1.4;
}

.inventory-order-product-total {
    color: #101927;
    font-size: 0.98rem;
    font-weight: 900;
    white-space: nowrap;
}

.inventory-order-activity-list {
    display: grid;
    gap: 1.05rem;
}

.inventory-order-activity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 24, 38, 0.05);
}

.inventory-order-activity-avatar-shell {
    position: relative;
    width: 58px;
    min-width: 58px;
    padding-top: 0.1rem;
}

.inventory-order-activity-avatar {
    width: 58px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 3px solid #d9ebfb;
    background: linear-gradient(180deg, #0e6dbc 0%, #0b5ea6 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    font-weight: 300;
    box-shadow: 0 12px 20px rgba(10, 88, 153, 0.16);
}

.inventory-order-activity-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 14px rgba(15, 24, 38, 0.12);
}

.inventory-order-activity-badge .material-symbols-outlined {
    font-size: 0.95rem;
    font-variation-settings: 'wght' 500;
}

.inventory-order-activity-badge.is-received {
    background: #2f9d1f;
    color: #ffffff;
}

.inventory-order-activity-badge.is-items,
.inventory-order-activity-badge.is-sent {
    background: #6b5cf0;
    color: #ffffff;
}

.inventory-order-activity-badge.is-created {
    background: #ffc21c;
    color: #3b2b05;
}

.inventory-order-activity-badge.is-draft {
    background: #f2f3f6;
    color: #7d8695;
}

.inventory-order-activity-copy {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
}

.inventory-order-activity-copy h3 {
    margin: 0;
    color: #101a2b;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-order-activity-meta {
    margin: 0;
    color: #6b7789;
    font-size: 0.9rem;
    line-height: 1.4;
}

.inventory-order-activity-body {
    margin: 0.35rem 0 0;
    color: #162437;
    font-size: 0.95rem;
    line-height: 1.45;
}

.inventory-order-activity-body strong {
    color: #111c2d;
    font-weight: 900;
}

.inventory-table-row {
    cursor: pointer;
}

.inventory-table-row:focus-visible {
    outline: 2px solid #9fd3f6;
    outline-offset: -2px;
}

@media (max-width: 900px) {
    .clients-drawer {
        left: 0;
    }

    .clients-drawer-panel {
        width: 100%;
    }

    .clients-drawer-close {
        left: 1rem;
    }

    .inventory-drawer .inventory-hub-layout {
        grid-template-columns: 1fr;
    }

    .inventory-drawer .inventory-drawer-close {
        left: 1rem;
    }

    .inventory-hub-side-nav {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
    }

    .inventory-edit-photo-grid {
        grid-template-columns: 1fr;
    }

    .inventory-stock-dialog {
        width: min(100%, 92vw);
        padding: 1.35rem 1.1rem 1.2rem;
    }

    .inventory-stock-stepper {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }

    .inventory-stock-dialog-actions {
        flex-direction: column-reverse;
    }

    .inventory-stock-dialog-actions .btn {
        width: 100%;
    }

    .inventory-hub-data-list div {
        grid-template-columns: 1fr;
    }

    .inventory-hub-data-list dd {
        text-align: left;
    }

    .inventory-hub-order-card {
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: start;
    }

    .inventory-hub-order-thumb {
        width: 56px;
    }

    .inventory-hub-order-status {
        justify-self: start;
        margin-left: calc(56px + 1rem);
    }

    .inventory-order-product-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .inventory-order-product-total {
        justify-self: start;
        margin-left: calc(52px + 0.85rem);
    }

    .inventory-order-activity-card {
        grid-template-columns: 1fr;
    }

    .inventory-order-activity-avatar-shell {
        margin-bottom: 0.2rem;
    }
}

.clients-hub-panel {
    padding: 0;
    overflow: hidden;
}

.clients-hub-layout {
    display: grid;
    grid-template-columns: 320px 200px minmax(0, 1fr);
    min-height: calc(100vh - 190px);
}

.clients-hub-card {
    border-right: 1px solid #e5e8f0;
    background: #ffffff;
    padding: 1.15rem 1.05rem 1rem;
    position: relative;
}

.clients-hub-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0.75rem auto 0.65rem;
    background: #ecebfa;
    color: #6358e7;
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clients-hub-avatar.is-photo {
    background: #ffffff;
    color: transparent;
}

.clients-hub-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clients-hub-card h3 {
    margin: 0;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.08;
    color: #0f1828;
    font-weight: 850;
}

.clients-hub-card > p {
    margin: 0.22rem 0 0.85rem;
    text-align: center;
    color: #5d6c84;
    font-size: 0.9rem;
    font-weight: 600;
}

.team-staff-hub-pay-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    margin: -0.25rem 0 0.85rem;
}

.team-staff-hub-pay-shortcut {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d8dee9;
    background: #ffffff;
    color: #7b8799;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.team-staff-hub-pay-shortcut .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.team-staff-hub-pay-shortcut.is-active {
    border-color: #cfd7e5;
    background: #f8fafc;
    color: #2c3444;
}

.team-staff-hub-pay-shortcut:hover,
.team-staff-hub-pay-shortcut:focus-visible {
    transform: translateY(-1px);
    border-color: #bfc9db;
    color: #111827;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
}

.clients-hub-card-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.clients-hub-book-btn {
    min-height: 44px;
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    background: #07080e;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clients-hub-book-btn:hover {
    background: #171a22;
}

.clients-hub-actions-dropdown {
    position: relative;
}

.clients-hub-actions-dropdown summary {
    list-style: none;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #d5ddea;
    background: #ffffff;
    color: #111a2a;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.52rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.clients-hub-actions-dropdown summary::-webkit-details-marker {
    display: none;
}

.clients-hub-actions-dropdown summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    color: #1f2e45;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.clients-hub-actions-dropdown[open] summary::after {
    content: 'expand_less';
}

.clients-hub-actions-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    min-width: 270px;
    max-width: min(340px, calc(100vw - 24px));
    border-radius: 14px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(14, 28, 45, 0.16);
    padding: 0.5rem;
    z-index: 20;
    display: grid;
    gap: 0.12rem;
}

/* In the main header area, anchor dropdowns to the right so they don't clip. */
.clients-hub-section-head .clients-hub-actions-menu {
    right: 0;
    left: auto;
}

.clients-hub-actions-title {
    margin: 0.2rem 0.45rem 0.36rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: #121a2a;
}

.clients-hub-actions-menu a {
    padding: 0.58rem 0.62rem;
    border-radius: 9px;
    color: #172337;
    font-size: 0.92rem;
    font-weight: 650;
}

.clients-hub-actions-menu-quick a {
    font-weight: 500;
}

.clients-hub-actions-menu-quick .clients-hub-actions-link-strong {
    font-weight: 700;
}

.clients-hub-actions-menu a:hover {
    background: #f1f5fb;
}

.clients-hub-actions-menu hr {
    border: 0;
    height: 1px;
    background: #e8edf5;
    margin: 0.36rem 0.2rem;
}

.clients-hub-meta {
    margin: 0.18rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid #e9edf5;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.clients-hub-meta li {
    display: grid;
    gap: 0.16rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.clients-hub-meta strong {
    color: #122033;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: -0.01em;
}

.clients-hub-meta small {
    color: #6b778a;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.clients-hub-nav {
    border-right: 1px solid #e5e8f0;
    background: #ffffff;
    padding: 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
}

.clients-hub-nav > a,
.clients-hub-docs > summary,
.clients-hub-docs > a {
    position: relative;
    min-height: 40px;
    border-radius: 10px;
    padding: 0.52rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #121c2d;
    font-size: 0.88rem;
    font-weight: 700;
}

.clients-hub-nav > a:hover,
.clients-hub-docs > summary:hover,
.clients-hub-docs > a:hover {
    background: #f3f5fb;
}

.clients-hub-nav > a.is-active,
.clients-hub-docs > summary.is-active,
.clients-hub-docs > a.is-active {
    background: #ecebfa;
    color: #121633;
    padding-left: 1.02rem;
    box-shadow: inset 0 0 0 1px #d9d3ff;
}

.clients-hub-nav > a.is-active::before,
.clients-hub-docs > summary.is-active::before,
.clients-hub-docs > a.is-active::before {
    content: '';
    position: absolute;
    left: 0.48rem;
    top: 0.48rem;
    bottom: 0.48rem;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6d60ff 0%, #5248d9 100%);
}

.clients-hub-nav > a.is-active .clients-hub-count,
.clients-hub-docs > summary.is-active .clients-hub-count,
.clients-hub-docs > a.is-active .clients-hub-count {
    border-color: #cfc7ff;
    color: #4d43cf;
    background: #ffffff;
}

.clients-hub-count {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #25354d;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}

.clients-hub-docs > summary {
    list-style: none;
    cursor: pointer;
}

.clients-hub-docs > summary::-webkit-details-marker {
    display: none;
}

.clients-hub-docs > summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    color: #1f2e45;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.2s ease;
}

.clients-hub-docs[open] > summary::after {
    content: 'expand_less';
}

.clients-hub-docs > a {
    margin-left: 0.5rem;
    width: calc(100% - 0.5rem);
    font-size: 0.93rem;
}

.clients-hub-main {
    background: #ffffff;
    padding: 1.05rem 1.25rem 1.25rem;
}

.clients-hub-main.is-client-data {
    padding-top: 0;
}

.clients-hub-main h2 {
    margin: 0 0 0.95rem;
    font-size: 1.55rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #101a2b;
}

.clients-hub-sticky-head {
    position: sticky;
    top: -1.05rem;
    z-index: 25;
    margin: -1.05rem -1.25rem 0;
    padding: 1.05rem 1.25rem 0.82rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(220, 227, 239, 0.9);
}

.clients-hub-sticky-head h2 {
    margin-bottom: 0.95rem;
}

.clients-hub-sticky-head .clients-hub-sales-tabs {
    margin-bottom: 0;
}

.clients-hub-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.72rem;
}

.clients-hub-sticky-head {
    position: sticky;
    top: 0;
    z-index: 35;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(226, 232, 243, 0.95);
    box-shadow: 0 14px 28px rgba(12, 18, 32, 0.06);
    padding: 1.05rem 1.25rem 0.85rem;
    margin: 0 -1.25rem 1rem;
}

.clients-hub-sticky-head-appointments {
    top: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 1.05rem 1.25rem 0.85rem !important;
}

.clients-drawer .clients-hub-sticky-head-appointments {
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.admin-body.admin-page-clients-embed .clients-hub-main {
    padding-top: 0 !important;
}


.clients-hub-section-head h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.1;
    font-weight: 850;
    color: #0f1828;
    letter-spacing: -0.01em;
}

.clients-hub-subhead {
    margin-bottom: 0;
}

.clients-hub-section-link {
    color: #5f56ff;
    font-weight: 750;
    font-size: 0.88rem;
}

.clients-hub-section-link:hover {
    text-decoration: underline;
}

.clients-hub-summary-stack {
    display: grid;
    gap: 0.9rem;
}

.clients-hub-section-head h2 {
    margin: 0;
}

.clients-hub-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.82rem;
}

.clients-hub-summary-grid.is-mini {
    margin-top: 0.1rem;
}

.clients-hub-summary-grid.is-statuses {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.82rem;
}

.clients-hub-summary-grid.is-statuses .clients-hub-metric-card {
    min-height: 120px;
}

.clients-hub-summary-grid.is-statuses .clients-hub-metric-value {
    font-size: 1.8rem;
}

.clients-hub-metric-card {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 1rem;
}

.clients-hub-metric-card.is-wide {
    padding: 1.05rem 1.1rem;
}

.clients-hub-metric-card h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #1b2a41;
    font-weight: 700;
}

.clients-hub-metric-value {
    margin: 0.58rem 0 0;
    font-size: 2.1rem;
    line-height: 1;
    color: #0f182a;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.clients-hub-metric-value.clients-hub-metric-empty {
    font-size: 1.8rem;
    letter-spacing: -0.01em;
}

.clients-hub-month-title {
    margin: 0.85rem 0 0.48rem;
    color: #627089;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: lowercase;
}

.clients-hub-timeline {
    display: grid;
    gap: 0.82rem;
}

.clients-hub-timeline-item {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.98rem;
}

.clients-hub-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;
}

.clients-hub-timeline-head h4 {
    margin: 0;
    color: #101a2a;
    font-size: 1.05rem;
    font-weight: 800;
}

.clients-hub-status {
    border-radius: 999px;
    padding: 0.2rem 0.62rem;
    font-size: 0.84rem;
    font-weight: 700;
}

.clients-hub-status.is-reserved {
    background: #e8ecff;
    color: #445fcb;
}

.clients-hub-status.is-confirmed {
    background: #e7f4ff;
    color: #1f6fbb;
}

.clients-hub-status.is-completed {
    background: #e8f8ef;
    color: #268154;
}

.clients-hub-status.is-canceled {
    background: #ffecef;
    color: #be3553;
}

.clients-hub-status.is-waiting {
    background: #fff3db;
    color: #a15c00;
}

.clients-hub-status.is-started {
    background: #e8f8ef;
    color: #268154;
}

.clients-hub-status.is-no-show {
    background: #ffecef;
    color: #be3553;
}

.clients-hub-muted {
    margin: 0.3rem 0;
    color: #66768e;
    font-size: 0.9rem;
    font-weight: 600;
}

.clients-hub-service-line {
    margin: 0;
    display: grid;
    gap: 0.2rem;
}

.clients-hub-service-line strong {
    color: #121d2e;
    font-size: 1rem;
}

.clients-hub-service-line span {
    color: #5f7088;
    font-size: 0.92rem;
}

.clients-hub-timeline-foot {
    margin-top: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;
}

.clients-hub-timeline-foot strong {
    color: #111c2d;
    font-size: 1.2rem;
    font-weight: 800;
}

.clients-hub-empty-card,
.clients-hub-box {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 1rem;
    margin-top: 0.6rem;
}

.clients-hub-empty-card h3,
.clients-hub-box h3 {
    margin: 0;
    color: #111b2c;
    font-size: 1.25rem;
    font-weight: 800;
}

.clients-hub-empty-card p,
.clients-hub-box p {
    margin: 0.55rem 0 0;
    color: #627089;
    font-size: 1rem;
    font-weight: 600;
}

.clients-hub-wallet-sub {
    margin: -0.35rem 0 0.95rem;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-wallet-sub a {
    margin-left: 0.25rem;
}

.clients-hub-empty-hero {
    padding: 1.35rem 1.2rem;
    text-align: center;
}

.clients-hub-empty-hero h3 {
    margin-top: 0.3rem;
    font-size: 1.18rem;
}

.clients-hub-empty-hero p {
    max-width: 420px;
    margin: 0.6rem auto 0;
    font-weight: 650;
}

.clients-hub-empty-hero .btn {
    margin-top: 0.95rem;
}

@media (max-width: 1180px) {
    .clients-hub-summary-grid.is-statuses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .clients-hub-summary-grid.is-statuses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.clients-hub-empty-illustration {
    width: 92px;
    height: 92px;
    margin: 0 auto 0.7rem;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 30%, rgba(95, 86, 255, 0.28), rgba(31, 198, 215, 0.18) 55%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 255, 0.78));
    border: 1px solid rgba(222, 228, 241, 0.9);
}

.clients-hub-empty-illustration svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 10px 18px rgba(11, 18, 32, 0.12));
}

.clients-hub-chip-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.82rem;
    position: relative;
    overflow: visible;
}

.clients-hub-chip-tabs button {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid #d5dde8;
    background: #ffffff;
    color: #1a2639;
    font-weight: 700;
    padding: 0.5rem 0.95rem;
}

.clients-hub-chip-tabs button.is-active {
    background: #090b10;
    border-color: #090b10;
    color: #ffffff;
}

.clients-hub-chip-tabs a {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #1a2639;
    font-weight: 800;
    padding: 0.5rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.clients-hub-chip-tabs a.is-active {
    background: #090b10;
    border-color: #090b10;
    color: #ffffff;
}

.clients-hub-chip-tabs a .clients-hub-count {
    margin-left: 0;
}

.clients-hub-chip-tabs a.is-active .clients-hub-count {
    border-color: rgba(255, 255, 255, 0.22);
    color: #111827;
}

.clients-hub-balance {
    margin: 0.16rem 0 0.65rem;
    font-size: 3rem;
    line-height: 1;
    color: #0e1729;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.clients-hub-edit-btn {
    gap: 0.45rem;
    padding: 0.72rem 1.15rem;
    border-radius: 999px;
    font-weight: 800;
}

.clients-hub-edit-ico {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.75;
}

.clients-hub-details {
    display: grid;
    gap: 0;
}

.clients-hub-details-section h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 850;
    color: #0f1828;
    letter-spacing: -0.01em;
}

.clients-hub-kv-grid {
    margin: 1.35rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 2.75rem;
}

.clients-hub-kv {
    min-width: 0;
}

.clients-hub-kv-wide {
    grid-column: 1 / -1;
}

.clients-hub-kv dt {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f1828;
}

.clients-hub-kv dd {
    margin: 0.22rem 0 0;
    color: #5f7088;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.32;
    word-break: break-word;
}

.clients-hub-divider {
    border: 0;
    border-top: 1px solid #e5e8f0;
    margin: 1.8rem 0;
}

.clients-hub-details-empty {
    margin: 1.1rem 0 0;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-tag-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.9rem;
    border: 1px solid #d8deea;
    border-radius: 999px;
    background: #ffffff;
    color: #0f1828;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1;
}

.clients-hub-tag-action span[aria-hidden="true"] {
    font-size: 1rem;
    font-weight: 800;
}

.clients-hub-sales-shell {
    display: grid;
    gap: 1.15rem;
}

.clients-hub-appointments-shell {
    gap: 1rem;
}

.clients-hub-sales-tabs {
    margin-bottom: 0.25rem;
}

.clients-hub-sales-more {
    position: relative;
    z-index: 20;
    overflow: visible;
}

.clients-hub-sales-more[open] {
    z-index: 30;
}

.clients-hub-sales-more summary {
    list-style: none;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #1a2639;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.clients-hub-sales-more summary::-webkit-details-marker {
    display: none;
}

.clients-hub-sales-more summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1.05rem;
    line-height: 1;
}

.clients-hub-sales-more-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    left: auto;
    z-index: 10;
    min-width: 220px;
    padding: 0.7rem 0;
    border: 1px solid rgba(220, 227, 239, 0.9);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0;
}

.clients-hub-sales-more-menu a {
    display: block;
    padding: 0.78rem 1.15rem;
    border-radius: 0;
    color: #1a2639;
    font-size: 0.98rem;
    font-weight: 650;
    white-space: nowrap;
}

.clients-hub-sales-more-menu a:hover {
    background: #f4f6fb;
}

.clients-hub-sales-timeline {
    display: grid;
    gap: 1rem;
}

.clients-hub-sales-card {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.clients-hub-sales-card-body {
    position: relative;
    padding-left: 0.2rem;
}

.clients-hub-sales-card-body::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: 0.3rem;
    bottom: -0.85rem;
    width: 2px;
    background: #d8dde8;
}

.clients-hub-sales-card:last-child .clients-hub-sales-card-body::before {
    bottom: 1.4rem;
}

.clients-hub-sales-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #090b10;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-family: 'Material Symbols Outlined';
    font-size: 0.95rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.clients-hub-sales-card-box {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 1rem 1.15rem 1.05rem;
}

.clients-hub-sales-head h3 {
    margin: 0;
    color: #101a2a;
    font-size: 1.05rem;
    font-weight: 850;
}

.clients-hub-sales-head p {
    margin: 0.18rem 0 0;
    color: #66768e;
    font-size: 0.95rem;
    font-weight: 600;
}

.clients-hub-sales-status.is-paid {
    color: #27924d;
}

.clients-hub-sales-status.is-partial {
    color: #b96b00;
}

.clients-hub-sales-status.is-pending {
    color: #66768e;
}

.clients-hub-sales-lines {
    margin-top: 1rem;
    display: grid;
    gap: 0;
}

.clients-hub-sales-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.82rem 0;
    border-top: 1px solid #e7ebf2;
    color: #101828;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-sales-lines .clients-hub-sales-line:first-child {
    border-top: 0;
    padding-top: 0;
}

.clients-hub-sales-line strong {
    color: #111c2d;
    font-size: 1rem;
    font-weight: 800;
}

.clients-hub-sales-line.is-muted {
    color: #66768e;
}

.clients-hub-sales-line.is-muted strong {
    color: #66768e;
    font-weight: 700;
}

.clients-hub-sales-line.is-total {
    padding-top: 0.6rem;
    font-weight: 800;
}

.clients-hub-sales-line.is-total strong {
    font-size: 1.08rem;
}

.clients-hub-appointments-timeline {
    gap: 1.1rem;
}

.clients-hub-appointment-head {
    align-items: flex-start;
}

.clients-hub-appointment-icon {
    font-size: 0.92rem;
}

.clients-hub-appointment-lines {
    margin-top: 1rem;
}

.clients-hub-sales-line.is-appointment-line {
    align-items: flex-start;
    padding-bottom: 0.95rem;
}

.clients-hub-appointment-service {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.clients-hub-appointment-service span {
    color: #111c2d;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.28;
}

.clients-hub-appointment-service small {
    color: #5f7088;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.28;
}

.clients-hub-appointment-actions {
    margin-top: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex-wrap: wrap;
}

.clients-hub-appointment-actions .btn {
    border-radius: 999px;
    min-height: 42px;
    padding-inline: 1.15rem;
    font-weight: 800;
}

.clients-hub-lines {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
    color: #22334c;
}

.clients-hub-lines li strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 850;
    color: #0f1828;
}

.clients-hub-lines li div {
    margin-top: 0.18rem;
    color: #5f7088;
    font-weight: 650;
    font-size: 0.96rem;
}

.clients-hub-settings-lead {
    margin: 0.35rem 0 0;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-settings-block {
    margin-top: 1.05rem;
}

.clients-hub-settings-block h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    color: #0f1828;
}

.clients-hub-settings-block p {
    margin: 0.35rem 0 0.85rem;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.clients-hub-settings-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 750;
    color: #0f1828;
    font-size: 0.92rem;
    line-height: 1.25;
}

.clients-hub-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid #cfd7e4;
    background: #ffffff;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(12, 18, 32, 0.04);
}

.clients-hub-check.is-on {
    border-color: #5f56ff;
    background: #5f56ff;
    color: #ffffff;
}

.clients-hub-check.is-on::before {
    content: '\2713';
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1;
}

.clients-hub-settings-split {
    height: 1px;
    background: #e5e8f0;
    margin-top: 1.2rem;
}

.clients-hub-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.clients-hub-data-grid article {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.95rem;
}

.clients-hub-data-grid article h3 {
    margin: 0 0 0.7rem;
    color: #121c2d;
    font-size: 1.15rem;
    font-weight: 800;
}

.clients-hub-data-grid dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.8rem;
}

.clients-hub-data-grid dt {
    margin: 0;
    color: #5f6f85;
    font-size: 0.88rem;
    font-weight: 700;
}

.clients-hub-data-grid dd {
    margin: 0.06rem 0 0;
    color: #122036;
    font-size: 0.95rem;
    font-weight: 700;
}

.clients-hub-list-plain {
    margin: 0.6rem 0 0;
    padding: 0 0 0 1rem;
    display: grid;
    gap: 0.45rem;
    color: #24354d;
}

@media (max-width: 1480px) {
    .clients-hub-layout {
        grid-template-columns: 320px 210px minmax(0, 1fr);
    }
}

@media (max-width: 1260px) {
    .clients-hub-layout {
        grid-template-columns: 1fr;
    }

    .clients-hub-card,
    .clients-hub-nav {
        border-right: 0;
        border-bottom: 1px solid #e5e8f0;
    }

    .clients-hub-close {
        position: static;
        margin-bottom: 0.45rem;
    }

    .clients-hub-data-grid {
        grid-template-columns: 1fr;
    }

    .clients-hub-kv-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .admin-body.admin-page-clients-embed .clients-hub-main.is-client-data .clients-hub-kv-grid {
        grid-template-columns: 1fr;
    }
}


.admin-body.admin-page-workspace-settings .admin-content {
    background:
        radial-gradient(circle at top left, rgba(110, 95, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #f7f7f9 0%, #f1f1f4 100%);
    padding-bottom: 3rem;
}

.admin-body.admin-page-workspace-settings .admin-topbar {
    margin-bottom: 1.2rem;
}

.workspace-settings {
    display: grid;
    gap: 1.45rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.18rem 0.24rem 0;
}

.workspace-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.35rem;
    padding: 1.45rem 1.55rem;
    border: 1px solid rgba(214, 218, 227, 0.92);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(251, 251, 253, 0.92) 100%);
    box-shadow:
        0 18px 36px rgba(19, 24, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.workspace-settings-head-main {
    max-width: 680px;
}

.workspace-settings-head-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 0.65rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(104, 87, 255, 0.1);
    color: #5f52de;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-settings-head h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(2rem, 2.35vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.workspace-settings-head p {
    margin: 0.5rem 0 0;
    color: #5c6574;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
}

.workspace-settings-head-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 0.8rem;
    width: min(360px, 100%);
}

.workspace-settings-head-stats article {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid #e2e5ee;
    background:
        linear-gradient(180deg, rgba(248, 249, 252, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.workspace-settings-head-stats span {
    color: #687385;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-settings-head-stats strong {
    color: #101828;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.workspace-settings-head-stats small {
    color: #5d6676;
    font-size: 0.84rem;
    line-height: 1.3;
}

.workspace-settings-tabs-shell {
    position: sticky;
    top: calc(68px + 0.7rem);
    z-index: 16;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    background:
        linear-gradient(180deg, rgba(247, 247, 249, 0.96) 0%, rgba(241, 241, 244, 0.92) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.workspace-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.45rem;
    border: 1px solid rgba(218, 221, 229, 0.94);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.04);
}

.workspace-settings-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.72rem 1rem;
    border: 1px solid #d8dbe3;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #1b2431;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.04);
}

.workspace-settings-back-link:hover {
    background: #ffffff;
    border-color: #cfd3dd;
}

.workspace-settings-back-link .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.workspace-settings-tab {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #151515;
    min-height: 42px;
    padding: 0.62rem 1rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.workspace-settings-tab.is-active {
    background: #0f0f12;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 15, 18, 0.22);
}

.workspace-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.workspace-settings-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 220px;
    padding: 1.4rem 1.4rem 1.25rem;
    border-radius: 22px;
    border: 1px solid #dadde6;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 251, 253, 0.96) 100%);
    color: #111827;
    text-decoration: none;
    box-shadow:
        0 14px 30px rgba(17, 24, 39, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.workspace-settings-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #6857ff 0%, #8c7cff 100%);
    opacity: 0.82;
}

.workspace-settings-card:hover {
    transform: translateY(-4px);
    border-color: #cccfdb;
    box-shadow:
        0 24px 40px rgba(17, 24, 39, 0.08),
        0 8px 18px rgba(104, 87, 255, 0.06);
}

.workspace-settings-card.is-hidden {
    display: none;
}

.workspace-settings-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.workspace-settings-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 14px;
    background: rgba(104, 87, 255, 0.1);
    color: #6857ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.workspace-settings-card-icon .material-symbols-outlined {
    font-size: 1.35rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.workspace-settings-card-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: #f3f4f7;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-settings-card-copy {
    display: grid;
    gap: 0.5rem;
}

.workspace-settings-card-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.workspace-settings-card-copy p {
    margin: 0;
    color: #586273;
    font-size: 0.98rem;
    line-height: 1.5;
}

.workspace-settings-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.95rem;
    border-top: 1px solid #eef0f4;
}

.workspace-settings-card-cta {
    color: #6857ff;
    font-size: 0.88rem;
    font-weight: 700;
    transition: color 0.18s ease;
}

.workspace-settings-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #f1f3f7;
    color: #4b5565;
    font-size: 1rem;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.workspace-settings-card:hover .workspace-settings-card-cta,
.workspace-settings-card:focus-visible .workspace-settings-card-cta {
    color: #4d3fff;
}

.workspace-settings-card:hover .workspace-settings-card-arrow,
.workspace-settings-card:focus-visible .workspace-settings-card-arrow {
    background: rgba(104, 87, 255, 0.12);
    color: #5b4bf0;
    transform: translateX(2px);
}

.workspace-settings-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 0.1rem;
}

.workspace-settings-tools {
    padding: 1.4rem;
    border-radius: 22px;
    border: 1px solid #d7dbe5;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.98) 100%);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.05);
}

.workspace-settings-tools-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.workspace-settings-tools-kicker {
    margin: 0 0 0.3rem;
    color: #6857ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workspace-settings-tools-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.1;
}

.workspace-settings-tools-head p:last-child {
    margin: 0.45rem 0 0;
    color: #5d6676;
    font-size: 0.96rem;
    line-height: 1.5;
}

.workspace-settings-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: #eceef2;
    color: #28303d;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.workspace-settings-status.is-ready {
    background: #e8f8ed;
    color: #18794e;
}

.workspace-settings-status.is-pending {
    background: #fff1e4;
    color: #b45a09;
}

.workspace-settings-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.05rem;
}

.workspace-settings-metrics article {
    display: grid;
    gap: 0.32rem;
    padding: 1rem 1.02rem;
    border-radius: 16px;
    background: #f6f7fa;
    border: 1px solid #e7e9ef;
}

.workspace-settings-metrics span {
    color: #677183;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workspace-settings-metrics strong {
    color: #111827;
    font-size: 1.12rem;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.workspace-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.workspace-settings-details {
    border-top: 1px solid #eceef2;
    padding-top: 0.95rem;
}

.workspace-settings-details summary {
    cursor: pointer;
    color: #111827;
    font-weight: 700;
    list-style: none;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: #f4f5f8;
}

.workspace-settings-details summary::-webkit-details-marker {
    display: none;
}

.workspace-settings-table-wrap {
    margin-top: 0.9rem;
    overflow-x: auto;
}

.workspace-settings-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.workspace-settings-shortcuts a {
    display: grid;
    gap: 0.42rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #e6e8ed;
    background: #f7f8fa;
    color: #111827;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.workspace-settings-shortcuts a:hover {
    border-color: #d7dbe5;
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(17, 24, 39, 0.06);
}

.workspace-settings-shortcuts .material-symbols-outlined {
    color: #6857ff;
    font-size: 1.3rem;
    line-height: 1;
}

.workspace-settings-shortcuts strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.workspace-settings-shortcuts small {
    color: #626c7c;
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 1080px) {
    .workspace-settings-head,
    .workspace-settings-tabs-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-settings-head-stats {
        width: 100%;
    }

    .workspace-settings-tabs-shell {
        top: calc(68px + 0.55rem);
    }

    .workspace-settings-grid,
    .workspace-settings-tools-grid,
    .workspace-settings-shortcuts,
    .workspace-settings-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .workspace-settings {
        padding-inline: 0;
    }

    .workspace-settings-tabs {
        gap: 0.45rem;
        padding: 0.35rem;
    }

    .workspace-settings-tabs-shell {
        top: calc(104px + 0.45rem);
        padding-top: 0.15rem;
    }

    .workspace-settings-tab {
        min-height: 38px;
        padding: 0.55rem 0.9rem;
        font-size: 0.92rem;
    }

    .workspace-settings-head,
    .workspace-settings-tools {
        padding: 1.15rem;
        border-radius: 18px;
    }

    .workspace-settings-grid,
    .workspace-settings-tools-grid,
    .workspace-settings-shortcuts,
    .workspace-settings-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-settings-card {
        min-height: 0;
        border-radius: 18px;
    }

    .workspace-settings-tools-head {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-settings-back-link {
        justify-content: center;
    }
}

.admin-body.admin-page-business-settings .admin-content {
    background: #f3f3f5;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-appointment-settings .admin-content {
    background: #f3f3f5;
}

.admin-body.admin-page-business-settings .admin-topbar {
    margin: 0;
}

.business-settings-shell {
    display: grid;
    gap: 1.15rem;
    padding: 1.1rem 1.35rem 1.9rem;
}

.business-settings-breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.business-settings-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid #d7dbe4;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #111827;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 700;
}

.business-settings-back:hover {
    background: #ffffff;
    border-color: #cfd4de;
}

.business-settings-back .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.business-settings-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #5c6676;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.business-settings-breadcrumbs a {
    color: #5c6676;
    text-decoration: none;
}

.business-settings-breadcrumbs strong {
    color: #111827;
    font-weight: 800;
}

.admin-body.admin-page-business-settings .clients-pro-layout {
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 1.35rem;
    margin-top: 0;
    align-items: start;
    min-height: auto;
}

.admin-body.admin-page-business-settings .clients-pro-side {
    position: sticky;
    top: calc(68px + 1.1rem);
    height: auto;
    max-height: calc(100vh - 92px);
    min-height: 0;
    border-radius: 18px;
    border: 1px solid #dadde6;
    box-shadow: none;
    background: #ffffff;
    overflow: hidden auto;
}

.admin-body.admin-page-business-settings .clients-pro-side-head {
    min-height: 94px;
    padding: 1.15rem 1.25rem 0.95rem;
    align-items: flex-start;
}

.admin-body.admin-page-business-settings .clients-pro-side-head h2 {
    font-size: 0.98rem;
    line-height: 1.35;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav {
    padding: 0.7rem;
    gap: 0.34rem;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a {
    min-height: 44px;
    padding: 0.82rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    justify-content: flex-start;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
}

.admin-body.admin-page-business-settings .clients-pro-side-section {
    margin: 1.15rem 0.75rem 0.25rem;
    font-size: 0.9rem;
    font-weight: 800;
}

.admin-body.admin-page-business-settings .clients-pro-side-divider {
    margin: 0.6rem 0.75rem 0.45rem;
}

.admin-body.admin-page-business-settings .clients-pro-main {
    padding: 0;
}

.business-settings-page {
    display: grid;
    gap: 1rem;
}

.business-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.2rem;
}

.business-settings-header h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.28rem, 1.45vw, 1.55rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.business-settings-header p {
    max-width: 820px;
    margin: 0.4rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.business-settings-header p a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.business-settings-card {
    padding: 1.8rem 2rem;
    border-radius: 18px;
    border: 1px solid #d9dde6;
    background: #ffffff;
    box-shadow: none;
}

.business-settings-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.45rem;
}

.business-settings-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.business-settings-edit-btn {
    min-height: 38px;
    padding-inline: 1rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

.business-settings-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.business-settings-summary-grid,
.business-settings-link-grid,
.business-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 2rem;
}

.business-settings-summary-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.business-settings-summary-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.business-settings-summary-item strong {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-settings-section-block {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e6e8ef;
}

.business-settings-section-block h3 {
    margin: 0 0 1.2rem;
    color: #111827;
    font-size: 0.88rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.business-settings-link-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.business-settings-link-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
}

.business-settings-link-item a {
    color: #6b5cff;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-settings-form .form-group {
    margin: 0;
}

.business-settings-form .form-group label {
    margin-bottom: 0.34rem;
}

.business-settings-form .form-group.is-invalid > label {
    color: #d12c4a;
}

.business-settings-form .form-group.is-invalid input,
.business-settings-form .form-group.is-invalid select,
.business-settings-form .form-group.is-invalid textarea {
    border-color: #e85a74;
    box-shadow: 0 0 0 3px rgba(232, 90, 116, 0.12);
}

.business-settings-form-span-all {
    grid-column: 1 / -1;
}

.business-settings-field-error {
    display: block;
    margin-top: 0.28rem;
    color: #d12c4a;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 600;
}

.business-settings-form textarea {
    min-height: 112px;
    resize: vertical;
}

.business-settings-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a.business-settings-shortcut {
    justify-content: space-between;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a.business-settings-shortcut::after {
    content: '\2197';
    color: #1f2937;
    font-size: 1rem;
    line-height: 1;
}

.business-centers-header-actions {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    flex-shrink: 0;
}

.business-centers-options summary,
.business-centers-card-actions summary {
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid #d5dde9;
    background: #ffffff;
    color: #111a2a;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.46rem 0.92rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.business-centers-options summary::-webkit-details-marker,
.business-centers-card-actions summary::-webkit-details-marker {
    display: none;
}

.business-centers-options summary::after,
.business-centers-card-actions summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    color: #232f43;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.business-centers-add-btn {
    min-height: 40px;
    padding: 0.48rem 1.06rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.business-centers-page {
    display: grid;
    gap: 1rem;
}

.business-centers-highlight {
    padding: 0;
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr);
    overflow: visible;
}

.business-centers-highlight-media {
    background: #eef2f8;
    min-height: 228px;
    border-right: 1px solid #d9dde6;
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
    overflow: hidden;
}

.business-centers-highlight-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-centers-highlight-media-fallback {
    height: 100%;
    min-height: 228px;
    display: grid;
    place-items: center;
    background: linear-gradient(130deg, #eef3fb 0%, #dde6f6 100%);
    color: #7b8699;
}

.business-centers-highlight-media-fallback .material-symbols-outlined {
    font-size: 2.2rem;
}

.business-centers-highlight-copy {
    padding: 1.4rem 1.28rem;
    display: grid;
    align-content: start;
    gap: 0.42rem;
}

.business-centers-highlight-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.15rem, 2vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.business-centers-highlight-reviews {
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
    font-weight: 600;
}

.business-centers-highlight-location {
    margin: 0;
    color: #5b6679;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 70ch;
}

.business-centers-card-actions {
    margin-top: 0.54rem;
    width: max-content;
}

.business-centers-actions-menu {
    min-width: 196px;
    padding: 0.42rem;
    gap: 0.26rem;
}

.business-centers-actions-menu .clients-pro-option-item {
    width: 100%;
    border-radius: 12px;
    padding: 0.58rem 0.74rem;
    text-align: left;
}

.business-centers-actions-menu .business-centers-option-view {
    border: 2px solid #101828;
    color: #101828;
    background: #ffffff;
}

.business-centers-actions-menu .business-centers-option-view:hover {
    background: #f5f7fb;
}

.business-centers-actions-menu .business-centers-option-delete {
    color: #e11d48;
    background: #ffffff;
}

.business-centers-actions-menu .business-centers-option-delete:hover {
    background: #fff1f4;
}

.business-centers-list-item {
    margin-top: 0.08rem;
}

.business-centers-edit-form {
    width: 100%;
    max-width: none;
}

.business-centers-edit-wrap {
    display: grid;
    gap: 1.05rem;
}

.business-centers-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.business-centers-edit-head-copy {
    display: grid;
    gap: 0.14rem;
}

.business-centers-edit-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.business-centers-edit-head-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}

.business-centers-edit-section {
    border-top: 1px solid #e4e7ef;
    padding-top: 1rem;
    display: grid;
    gap: 0.72rem;
}

.business-centers-edit-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
    line-height: 1.2;
}

.business-centers-edit-section p {
    margin: 0;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.45;
}

.business-centers-edit-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.business-centers-location-input-wrap {
    position: relative;
}

.business-centers-location-input-wrap .material-symbols-outlined {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #68758a;
    font-size: 1.05rem;
    pointer-events: none;
}

.business-centers-location-input-wrap input {
    padding-left: 2rem;
}

.business-centers-location-suggestions {
    margin: -0.28rem 0 0;
    padding: 0.36rem;
    list-style: none;
    border: 1px solid #dfe4ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(18, 29, 46, 0.14);
    display: grid;
    gap: 0.14rem;
}

.business-centers-suggestion-btn {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 9px;
    padding: 0.52rem 0.56rem;
    color: #111827;
    font-size: 0.83rem;
    line-height: 1.35;
    cursor: pointer;
}

.business-centers-suggestion-btn:hover {
    background: #f4f7fb;
}

.business-centers-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem 0.85rem;
}

.business-centers-address-item {
    display: grid;
    gap: 0.16rem;
}

.business-centers-address-item span {
    color: #475467;
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1.3;
}

.business-centers-address-item strong {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.business-centers-physical-checkbox {
    margin: 0;
}

.business-centers-hours-editor {
    gap: 0.9rem;
}

.business-centers-hours-list {
    display: grid;
    gap: 0.65rem;
}

.business-centers-hours-row {
    display: grid;
    grid-template-columns: auto minmax(140px, 180px) max-content max-content;
    justify-content: start;
    align-items: start;
    gap: 0.62rem 0.38rem;
    padding: 0.56rem 0.68rem;
    border: 1px solid #d9e1ec;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.business-centers-hours-row:hover,
.business-centers-hours-row:focus-within {
    border-color: #b8c7dc;
    background: #f9fbff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.business-centers-hours-row.is-closed {
    background: #f8fafc;
}

.business-centers-hours-row.is-closed:hover,
.business-centers-hours-row.is-closed:focus-within {
    background: #f3f6fb;
    border-color: #c9d4e5;
}

.business-centers-hours-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.business-centers-hours-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.business-centers-hours-day {
    display: grid;
    gap: 0.08rem;
}

.business-centers-hours-day strong {
    color: #111827;
    font-size: 0.86rem;
    line-height: 1.3;
}

.business-centers-hours-day span {
    color: #1f7a3b;
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.15;
}

.business-centers-hours-row.is-closed .business-centers-hours-day span {
    color: #8a96a8;
}

.business-centers-hours-time {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
}

.business-centers-hours-ranges {
    display: grid;
    gap: 0.45rem;
    justify-self: start;
    max-width: max-content;
    width: auto;
}

.business-centers-hours-time select {
    width: clamp(170px, 17vw, 230px);
    min-width: 170px;
    max-width: 230px;
    flex: 0 0 auto;
    padding: 0.42rem 0.5rem;
    font-size: 0.82rem;
}

.business-centers-hours-sep {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 600;
}

.business-centers-hours-remove {
    border: 0;
    background: transparent;
    color: #d92d4f;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.business-centers-hours-remove:hover {
    color: #b42342;
    background: #fde7ec;
}

.business-centers-hours-remove .material-symbols-outlined {
    font-size: 1.02rem;
}

.business-centers-hours-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    border: 0;
    background: transparent;
    color: #334155;
    width: 26px;
    height: 26px;
    margin-left: 0.06rem;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 999px;
}

.business-centers-hours-add .material-symbols-outlined {
    width: 19px;
    height: 19px;
    border: 1.5px solid #98a2b3;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
}

.business-centers-hours-add-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: #111827;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: 8px;
    padding: 0.35rem 0.46rem;
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.business-centers-hours-add-label::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #111827;
}

.business-centers-hours-add:hover {
    color: #111827;
    background: #eef2f7;
}

.business-centers-hours-add:hover .business-centers-hours-add-label,
.business-centers-hours-add:focus-visible .business-centers-hours-add-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.business-centers-hours-add:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.business-centers-hours-row.is-closed .business-centers-hours-ranges,
.business-centers-hours-row.is-closed .business-centers-hours-add {
    opacity: 0.5;
}

.business-centers-hidden-fields {
    display: none;
}

.business-centers-branch-list {
    display: grid;
    gap: 0.72rem;
}

.business-centers-branch-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.18rem;
}

.business-centers-branch-list-head h3 {
    margin: 0;
    color: #111827;
    font-size: 0.94rem;
    line-height: 1.25;
}

.business-centers-branch-list-head span {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d5dde9;
    background: #ffffff;
    color: #384457;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 0.35rem;
}

.business-centers-branch-item {
    padding: 0.98rem 1.1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.business-centers-branch-item.is-active {
    border-color: #6b5cff;
    background: #faf9ff;
    box-shadow: inset 0 0 0 2px rgba(107, 92, 255, 0.12);
}

.business-centers-branch-copy {
    min-width: 0;
    display: grid;
    gap: 0.24rem;
}

.business-centers-branch-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.25;
}

.business-centers-branch-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.business-centers-branch-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.business-centers-branch-actions .btn {
    min-height: 36px;
    padding: 0.42rem 0.95rem;
}

.business-centers-branch-empty {
    padding: 0.95rem 1.05rem;
    color: #667085;
    font-size: 0.87rem;
    line-height: 1.4;
}

.business-centers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.business-centers-detail-stack {
    display: grid;
    gap: 1rem;
}

.business-centers-info-card {
    padding: 1.4rem 1.4rem 1.2rem;
}

.business-centers-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.business-centers-info-head h2 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.business-centers-info-head a {
    color: #6b5cff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
}

.business-centers-info-stack {
    display: grid;
    gap: 0.95rem;
}

.business-centers-info-item {
    display: grid;
    gap: 0.18rem;
}

.business-centers-info-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.32;
}

.business-centers-info-item strong {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.42;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-centers-map-card {
    padding: 1.4rem 1.4rem 1.3rem;
}

.business-centers-hours-copy {
    margin: -0.2rem 0 0.62rem;
    color: #5b667a;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 86ch;
}

.business-centers-hours-copy a {
    color: #5a4cff;
    text-decoration: none;
    font-weight: 700;
}

.business-centers-hours-card {
    position: relative;
    overflow: hidden;
}

.business-centers-hours-card::before {
    content: '';
    position: absolute;
    top: -48px;
    right: -78px;
    width: 210px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(104, 87, 255, 0.1), rgba(104, 87, 255, 0));
    pointer-events: none;
}

.business-centers-hours-summary {
    margin-top: 0.06rem;
    padding: 0.68rem 0.8rem;
    border: 1px solid #dfe6f3;
    border-radius: 12px;
    background: linear-gradient(180deg, #fafcff 0%, #f4f8ff 100%);
}

.business-centers-hours-summary span {
    color: #4f5f7a;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.business-centers-hours-summary strong {
    display: block;
    margin-top: 0.2rem;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.business-centers-hours-preview-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.68rem;
}

.business-centers-hours-day-card {
    border: 1px solid #dbe3f1;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    min-height: 132px;
    box-shadow: 0 6px 14px rgba(30, 41, 59, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.business-centers-hours-day-card:hover {
    transform: translateY(-1px);
    border-color: #cdd8ea;
    box-shadow: 0 10px 20px rgba(30, 41, 59, 0.1);
}

.business-centers-hours-day-card header {
    background: linear-gradient(180deg, #f0efff 0%, #ebf2ff 100%);
    color: #4f46e5;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    padding: 0.56rem 0.38rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #e4e8f2;
}

.business-centers-hours-day-lines {
    padding: 0.54rem 0.42rem 0.62rem;
    display: grid;
    gap: 0.34rem;
    align-content: start;
}

.business-centers-hours-day-lines p {
    margin: 0;
    color: #111827;
    font-size: 0.79rem;
    line-height: 1.22;
    text-align: center;
    font-weight: 700;
    padding: 0.38rem 0.28rem;
    border-radius: 9px;
    background: #f8fafd;
    border: 1px solid #e5eaf3;
}

.business-centers-hours-day-card.is-closed header {
    color: #6f7c92;
    background: linear-gradient(180deg, #f4f6fa 0%, #eef2f7 100%);
    border-bottom-color: #e0e6ef;
}

.business-centers-hours-day-card.is-closed .business-centers-hours-day-lines p {
    color: #7a879d;
    background: #fbfcfe;
    border-style: dashed;
}

.business-centers-map-frame {
    margin-top: 0.8rem;
    border-radius: 12px;
    border: 1px solid #dce2ec;
    overflow: hidden;
    background: #eef3f9;
    min-height: 248px;
}

.business-centers-map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 248px;
    border: 0;
    display: block;
}

.business-centers-map-picker {
    position: relative;
    border-radius: 12px;
    border: 1px solid #dce2ec;
    overflow: hidden;
    background: #eef3f9;
    min-height: 248px;
    height: 248px;
}

.business-centers-map-picker-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
}

.business-centers-map-picker .leaflet-container {
    width: 100%;
    height: 100%;
}

@media (max-width: 1100px) {
    .business-settings-summary-grid,
    .business-settings-link-grid,
    .business-settings-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-highlight {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-highlight-media,
    .business-centers-highlight-media-fallback {
        min-height: 200px;
        border-right: 0;
        border-bottom: 1px solid #d9dde6;
        border-bottom-left-radius: 0;
        border-top-right-radius: 17px;
    }

    .business-centers-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-hours-preview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}

@media (max-width: 980px) {
    .business-settings-shell {
        padding: 0.95rem 0.95rem 1.35rem;
    }

    .admin-body.admin-page-business-settings .clients-pro-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .admin-body.admin-page-business-settings .clients-pro-side {
        position: static;
        top: auto;
        max-height: none;
    }
}

@media (max-width: 720px) {
    .business-settings-breadcrumb-bar,
    .business-settings-card-head,
    .business-settings-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .business-settings-card {
        padding: 1.2rem;
    }

    .business-settings-header h1 {
        font-size: 1.75rem;
    }

    .business-settings-header {
        flex-direction: column;
        align-items: stretch;
    }

    .business-centers-header-actions {
        width: 100%;
    }

    .business-centers-options,
    .business-centers-card-actions {
        width: 100%;
    }

    .business-centers-options summary,
    .business-centers-card-actions summary,
    .business-centers-add-btn {
        width: 100%;
        justify-content: center;
    }

    .business-centers-highlight-copy,
    .business-centers-edit-section,
    .business-centers-branch-item,
    .business-centers-info-card,
    .business-centers-map-card {
        padding: 1.05rem;
    }

    .business-centers-branch-item {
        flex-direction: column;
        align-items: stretch;
    }

    .business-centers-branch-actions {
        width: 100%;
    }

    .business-centers-branch-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .business-centers-map-frame,
    .business-centers-map-frame iframe,
    .business-centers-map-picker {
        min-height: 212px;
    }

    .business-centers-map-picker {
        height: 212px;
    }

    .business-centers-address-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-hours-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.52rem;
    }

    .business-centers-hours-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 0.55rem 0.65rem;
    }

    .business-centers-hours-ranges,
    .business-centers-hours-time {
        grid-column: 1 / -1;
        width: 100%;
    }

    .business-centers-hours-time select {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .business-centers-hours-add {
        grid-column: 1 / -1;
        width: 28px;
        justify-content: center;
    }

    .business-centers-hours-remove {
        justify-self: end;
    }

    .business-centers-edit-head,
    .business-centers-edit-section-head {
        flex-direction: column;
        align-items: stretch;
    }
}

.appointment-settings-page {
    gap: 1rem;
    width: 100%;
    max-width: none;
}

.appointment-settings-page.is-waitlist-edit {
    max-width: none;
}

.business-settings-shell.appointment-settings-shell.is-resource-editor {
    background: #ffffff;
}

.appointment-settings-shell .business-settings-card {
    overflow: hidden;
}

.appointment-settings-header-actions {
    justify-content: flex-end;
    align-self: flex-start;
    margin-top: 0.15rem;
}

.appointment-settings-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
}

.appointment-settings-editor-card {
    width: 100%;
    max-width: none;
    padding: 1.5rem 1.6rem 1.35rem;
    border: 1px solid #d9dde6;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
}

.appointment-settings-summary-card {
    width: 100%;
    max-width: none;
    padding: 1.9rem 2rem;
    border: 1px solid #d9dde6;
    border-radius: 18px;
    background: #ffffff;
}

.appointment-settings-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.35rem;
}

.appointment-settings-summary-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-settings-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.appointment-settings-summary-item {
    display: grid;
    gap: 0.18rem;
}

.appointment-settings-summary-item-span {
    grid-column: 1 / -1;
}

.appointment-settings-summary-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-settings-summary-item strong {
    color: #667085;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
}

.appointment-settings-summary-divider {
    margin: 1.55rem 0 1.45rem;
    height: 1px;
    background: #e5e8ef;
}

.appointment-settings-summary-foot h3 {
    margin: 0;
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.25;
}

.appointment-settings-summary-foot p {
    margin: 0.5rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.5;
}

.appointment-settings-summary-foot a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.appointment-online-grid {
    display: grid;
    gap: 0.78rem;
}

.appointment-online-card {
    width: 100%;
    max-width: none;
    padding: 1rem 1.1rem;
    border: 1px solid #d9dde6;
    border-radius: 14px;
    background: #ffffff;
}

.appointment-online-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.appointment-online-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.appointment-online-card-head p {
    margin: 0.24rem 0 0;
    color: #667085;
    font-size: 0.76rem;
    line-height: 1.45;
}

.appointment-online-checklist {
    margin: 0.72rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.52rem;
}

.appointment-online-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.5rem;
    color: #5f697d;
    font-size: 0.83rem;
    line-height: 1.42;
}

.appointment-online-check .material-symbols-outlined {
    margin-top: 0.03rem;
    color: #c6cedd;
    font-size: 1rem;
    line-height: 1;
}

.appointment-online-check.is-active {
    color: #1f2a3a;
}

.appointment-online-check.is-active .material-symbols-outlined {
    color: #28a465;
}

.appointment-online-check strong {
    color: #111827;
    font-weight: 700;
}

.appointment-online-warning {
    margin-top: 0.72rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid #efcf86;
    border-radius: 12px;
    background: #fcf4dc;
}

.appointment-online-warning .material-symbols-outlined {
    margin-top: 0.02rem;
    color: #c96b14;
    font-size: 1.05rem;
    line-height: 1;
}

.appointment-online-warning p {
    margin: 0;
    color: #1f2937;
    font-size: 0.83rem;
    line-height: 1.45;
}

.appointment-online-warning a {
    margin-top: 0.22rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.appointment-online-warning a::after {
    content: '\2192';
}

.appointment-online-important-copy {
    margin: 0.72rem 0 0;
    color: #667085;
    font-size: 0.83rem;
    line-height: 1.5;
}

.appointment-online-form {
    display: grid;
    gap: 1.2rem;
}

#online-notifications-form textarea[name="notify_emails"] {
    min-height: 122px;
}

.sales-settings-page {
    width: 100%;
    max-width: none;
}

.team-settings-page {
    width: 100%;
    max-width: none;
}

.team-timeoff-list {
    display: grid;
    gap: 0.82rem;
}

.team-timeoff-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.team-timeoff-toolbar-menu {
    position: relative;
    z-index: 20;
}

.team-timeoff-toolbar-menu[open] {
    z-index: 40;
}

.team-timeoff-toolbar-menu[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.team-timeoff-toolbar-btn,
.team-timeoff-row-action-btn {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #d6dce8;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.15rem;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.team-timeoff-toolbar-btn::-webkit-details-marker,
.team-timeoff-row-action-btn::-webkit-details-marker {
    display: none;
}

.team-timeoff-toolbar-btn .material-symbols-outlined,
.team-timeoff-row-action-btn .material-symbols-outlined {
    font-size: 1.05rem;
}

.team-timeoff-toolbar-btn-primary {
    border-color: #111827;
    background: #111827;
    color: #ffffff;
}

.team-timeoff-card {
    padding: 1rem 1.2rem;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.team-settings-shell .team-timeoff-card {
    overflow: visible;
}

.team-timeoff-main {
    min-width: 0;
}

.team-timeoff-main h3 {
    margin: 0;
    color: #111827;
    font-size: 1.07rem;
    font-weight: 700;
    line-height: 1.25;
}

.team-timeoff-card .team-timeoff-editor-copy,
.team-timeoff-editor-card {
    display: none;
}

.team-timeoff-lock {
    color: #a5adbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-timeoff-lock .material-symbols-outlined {
    font-size: 1.12rem;
    line-height: 1;
}

.team-timeoff-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.team-timeoff-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.team-timeoff-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.team-timeoff-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(17, 24, 39, 0.18);
    backdrop-filter: blur(4px);
}

.team-timeoff-modal-backdrop[hidden] {
    display: none !important;
}

.team-timeoff-modal-card {
    position: relative;
    width: min(100%, 760px);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 26px 60px rgba(17, 24, 39, 0.18);
    padding: 2.4rem 2.6rem;
}

.team-timeoff-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.team-timeoff-modal-close .material-symbols-outlined {
    font-size: 1.4rem;
}

.team-timeoff-modal-form {
    display: grid;
    gap: 1.5rem;
}

.team-timeoff-modal-form label.form-group {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.team-timeoff-modal-form label.form-group > span {
    display: inline-block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.team-timeoff-modal-head {
    display: grid;
    gap: 0.5rem;
    padding-right: 3rem;
}

.team-timeoff-modal-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.32rem, 1.7vw, 1.6rem);
    line-height: 1.12;
    letter-spacing: -0.05em;
}

.team-timeoff-modal-head p {
    margin: 0;
    color: #667085;
    font-size: 0.98rem;
    line-height: 1.5;
}

.team-timeoff-editor-card {
    max-width: 760px;
}

.team-timeoff-editor-form {
    display: grid;
    gap: 1rem;
}

.team-timeoff-config-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.team-timeoff-config-grid .form-group small {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.team-timeoff-editor-head {
    margin-bottom: 0.3rem;
}

.team-timeoff-editor-copy {
    margin: 0.35rem 0 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
}

.team-timeclock-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #e4e6eb;
    background: #f5f6f8;
    color: #525866;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.team-timeclock-status.is-active {
    border-color: #cde7d8;
    background: #edf8f2;
    color: #20613f;
}

.team-timeclock-editor-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.team-timeclock-editor-form {
    display: grid;
    gap: 1rem;
}

.team-timeclock-editor-head {
    margin-bottom: 0.45rem;
}

.team-timeclock-editor-head h2 {
    font-size: clamp(0.96rem, 1.2vw, 1.1rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.team-timeclock-proximity-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.team-timeclock-proximity-copy {
    min-width: 0;
}

.team-timeclock-proximity-copy h3 {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.team-timeclock-proximity-copy p {
    margin: 0.35rem 0 0;
    max-width: 70ch;
    color: #667085;
    font-size: 0.96rem;
    line-height: 1.5;
}

.team-timeclock-proximity-copy a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.admin-body.admin-page-staff-schedule .admin-content {
    background: #f3f3f5;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-staff-schedule .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-staff-schedule .business-settings-shell {
    padding-top: 1.1rem;
}

.staff-schedule-page {
    display: grid;
    gap: 1rem;
}

.staff-schedule-header {
    align-items: center;
}

.staff-schedule-header p {
    max-width: 880px;
}

.staff-schedule-toolbar-card,
.staff-schedule-board-card,
.staff-schedule-note-card,
.staff-schedule-empty-card {
    padding: 1.35rem 1.45rem;
}

.staff-schedule-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-schedule-toolbar-filters,
.staff-schedule-range-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.staff-schedule-range-tools .appointments-toolbar-chip,
.staff-schedule-range-tools .appointments-toolbar-range {
    font-size: 0.79rem;
}

.staff-schedule-range-tools .appointments-toolbar-chip {
    font-weight: 700;
}

.staff-schedule-range-tools .appointments-toolbar-date-group .appointments-toolbar-range {
    min-width: 164px;
    font-size: 0.8rem;
}

.staff-schedule-range-tools .appointments-toolbar-date-group {
    overflow: visible;
}

.staff-schedule-week-picker {
    position: relative;
}

.staff-schedule-range-tools .appointments-toolbar-range-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0 1rem;
    border: 0;
    background: #ffffff;
    font-weight: 700;
    color: #132238;
    cursor: pointer;
    user-select: none;
}

.staff-schedule-range-tools .appointments-toolbar-range-button:focus-visible {
    outline: 2px solid rgba(95, 79, 255, 0.42);
    outline-offset: -2px;
}

.staff-schedule-range-tools .appointments-toolbar-range-button .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
    color: #64748b;
    pointer-events: none;
}

.staff-schedule-week-popover[hidden] {
    display: none;
}

.staff-schedule-week-popover {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    z-index: 35;
    width: min(320px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid #d8e1ec;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
    transform: translateX(-50%);
}

.staff-schedule-week-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.staff-schedule-week-popover-head strong {
    color: #132238;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: capitalize;
}

.staff-schedule-week-nav {
    width: 38px;
    height: 38px;
    border: 1px solid #d8e1ec;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2a3b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.staff-schedule-week-nav:hover,
.staff-schedule-week-nav:focus-visible {
    background: #f4f7fb;
    color: #111827;
}

.staff-schedule-weekdays,
.staff-schedule-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.32rem;
}

.staff-schedule-weekdays {
    margin-bottom: 0.5rem;
}

.staff-schedule-weekdays span {
    color: #68778d;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.staff-schedule-week-day {
    min-width: 0;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #132238;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
}

.staff-schedule-week-day:not(:disabled):hover,
.staff-schedule-week-day:not(:disabled):focus-visible {
    background: #f3f6fb;
    border-color: #d8e1ec;
    color: #111827;
}

.staff-schedule-week-day.is-outside {
    color: #6f7e93;
    font-weight: 600;
}

.staff-schedule-week-day.is-disabled,
.staff-schedule-week-day:disabled {
    background: #f4f6fb;
    border-color: transparent;
    color: #97a3b5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.staff-schedule-week-day.is-disabled.is-outside,
.staff-schedule-week-day:disabled.is-outside {
    color: #b0bac8;
}

.staff-schedule-week-day.is-today {
    border-color: #cfd7e3;
}

.staff-schedule-week-day.is-in-week {
    background: rgba(101, 88, 245, 0.12);
    border-color: rgba(101, 88, 245, 0.16);
    color: #4f46e5;
}

.staff-schedule-week-day.is-week-start,
.staff-schedule-week-day.is-week-end {
    background: #6558f5;
    border-color: #6558f5;
    color: #ffffff;
}

.staff-schedule-week-day.is-disabled.is-in-week,
.staff-schedule-week-day:disabled.is-in-week {
    background: rgba(101, 88, 245, 0.08);
    border-color: rgba(101, 88, 245, 0.14);
    color: #8d84d8;
}

.staff-schedule-week-day.is-disabled.is-week-start,
.staff-schedule-week-day.is-disabled.is-week-end,
.staff-schedule-week-day:disabled.is-week-start,
.staff-schedule-week-day:disabled.is-week-end {
    background: rgba(101, 88, 245, 0.3);
    border-color: rgba(101, 88, 245, 0.3);
    color: #ffffff;
}

@media (max-width: 720px) {
    .staff-schedule-week-popover {
        left: auto;
        right: 0;
        transform: none;
    }
}

.staff-schedule-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 48px;
    padding: 0 1.05rem;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #ffffff;
    color: #132238;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.staff-schedule-filter-chip .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.staff-schedule-staff-switcher {
    position: relative;
    min-width: 244px;
}

.staff-schedule-staff-switcher summary {
    list-style: none;
}

.staff-schedule-staff-switcher summary::-webkit-details-marker {
    display: none;
}

.staff-schedule-staff-switcher-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 2px solid #8f7bff;
    background: #ffffff;
    color: #132238;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0 1rem 0 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(143, 123, 255, 0.14);
}

.staff-schedule-staff-switcher-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-schedule-staff-switcher-trigger .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.staff-schedule-staff-switcher[open] .staff-schedule-staff-switcher-trigger {
    border-color: #6b5cff;
}

.staff-schedule-staff-switcher-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 30;
    width: min(296px, calc(100vw - 2rem));
    padding: 0.8rem;
    border: 1px solid #dfe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
}

.staff-schedule-staff-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 0.8rem;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #ffffff;
}

.staff-schedule-staff-search .material-symbols-outlined {
    color: #98a2b3;
    font-size: 1.15rem;
    line-height: 1;
}

.staff-schedule-staff-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 0.88rem;
    font-weight: 600;
}

.staff-schedule-staff-search input::placeholder {
    color: #98a2b3;
}

.staff-schedule-staff-option-list {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.7rem;
}

.staff-schedule-staff-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 46px;
    padding: 0.55rem 0.7rem;
    border: 2px solid transparent;
    border-radius: 14px;
    color: #111827;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.staff-schedule-staff-option:hover {
    background: #f8faff;
}

.staff-schedule-staff-option.is-active {
    border-color: #111827;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
}

.staff-schedule-staff-option.is-hidden {
    display: none;
}

.staff-schedule-staff-option-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.staff-schedule-staff-option-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--member-color, #9ad9f5) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--member-color, #9ad9f5) 62%, #ffffff 38%) 100%);
    color: #16243c;
    font-size: 0.86rem;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.96);
}

.staff-schedule-staff-option-avatar.is-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.staff-schedule-staff-option-copy {
    display: grid;
    min-width: 0;
}

.staff-schedule-staff-option-copy strong {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.staff-schedule-staff-option-copy small {
    color: #667085;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
}

.staff-schedule-staff-option-check {
    color: #111827;
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
}

.staff-schedule-staff-option.is-active .staff-schedule-staff-option-check {
    opacity: 1;
}

.staff-schedule-staff-search-empty {
    margin: 0.8rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    font-weight: 700;
}

.staff-schedule-board-card {
    overflow: visible;
    display: grid;
    gap: 0.9rem;
}

.staff-schedule-board-card.is-guided,
.staff-schedule-hours-day-card.is-guided {
    border-color: #6b5cff;
    box-shadow: 0 0 0 3px rgba(107, 92, 255, 0.14);
}

.staff-schedule-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 0.9rem;
    align-items: stretch;
}

.staff-schedule-board-head,
.staff-schedule-board-row {
    display: grid;
    grid-template-columns: 272px repeat(7, minmax(132px, 1fr));
    gap: 0.35rem;
    align-items: stretch;
}

.staff-schedule-board-row-member {
    margin-bottom: 0.1rem;
}

.staff-schedule-board-row {
    position: relative;
    isolation: isolate;
}

.staff-schedule-board-staff-label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.25rem 0.2rem;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
}

.staff-schedule-board-side-label {
    gap: 0.55rem;
}

.staff-schedule-board-inline-link {
    border: 0;
    background: transparent;
    color: #6b5cff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0;
    text-decoration: none;
}

.staff-schedule-inline-switcher summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
}

.staff-schedule-inline-switcher summary::-webkit-details-marker {
    display: none;
}

.staff-schedule-inline-switcher .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.staff-schedule-inline-switcher .services-catalog-menu-dropdown a.is-active {
    color: #111827;
    font-weight: 800;
}

.staff-schedule-board-inline-note {
    color: #8a92a2;
    font-size: 0.78rem;
    font-weight: 700;
}

.staff-schedule-board-day-meta {
    display: grid;
    place-items: center;
    gap: 0.12rem;
    min-height: 56px;
    padding: 0.35rem 0.55rem;
    text-align: center;
}

.staff-schedule-board-day-meta strong {
    color: #111827;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 800;
}

.staff-schedule-board-day-meta span {
    color: #7b8597;
    font-size: 0.7rem;
    font-weight: 700;
}

.staff-schedule-board-day-meta.is-off span {
    color: #a0a7b5;
}

.staff-schedule-member-card,
.staff-schedule-location-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 110px;
    padding: 1rem 1.1rem;
    border: 1px solid #d9dfeb;
    border-radius: 16px;
    background: #ffffff;
}

.staff-schedule-member-main,
.staff-schedule-location-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.staff-schedule-member-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--member-color, #9ad9f5) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--member-color, #9ad9f5) 62%, #ffffff 38%) 100%);
    color: #16243c;
    font-size: 1rem;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
}

.staff-schedule-member-avatar.is-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.staff-schedule-location-thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f7ff 100%);
    color: #6b5cff;
    flex-shrink: 0;
}

.staff-schedule-location-thumb .material-symbols-outlined {
    font-size: 1.4rem;
    line-height: 1;
}

.staff-schedule-member-copy,
.staff-schedule-location-copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.staff-schedule-member-copy strong,
.staff-schedule-location-copy strong {
    color: #111827;
    font-size: 0.86rem;
    line-height: 1.15;
}

.staff-schedule-member-copy span,
.staff-schedule-member-copy small,
.staff-schedule-location-copy span,
.staff-schedule-location-copy small {
    color: #667085;
    line-height: 1.35;
}

.staff-schedule-member-copy span,
.staff-schedule-location-copy span {
    font-size: 0.8rem;
    font-weight: 700;
}

.staff-schedule-member-copy small,
.staff-schedule-location-copy small {
    font-size: 0.7rem;
    font-weight: 700;
}

.staff-schedule-member-meta,
.staff-schedule-location-meta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.staff-schedule-member-meta a,
.staff-schedule-location-meta a {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #d7deea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    text-decoration: none;
    background: #ffffff;
}

.staff-schedule-member-meta .material-symbols-outlined,
.staff-schedule-location-meta .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.staff-schedule-hours-summary {
    display: grid;
    align-content: center;
}

.staff-schedule-hours-summary small {
    display: block;
    margin-top: 0.28rem;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

.staff-schedule-hours-grid {
    margin-top: 0.15rem;
}

.staff-schedule-hours-day-card {
    min-height: 110px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.staff-schedule-hours-day-card.is-guided {
    transform: translateY(-2px);
}

.staff-schedule-hours-day-lines {
    gap: 0.42rem;
}

.staff-schedule-hours-date,
.staff-schedule-hours-minutes {
    margin: 0;
    color: #69758b;
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 800;
    padding: 0;
    border: 0;
    background: transparent;
}

.staff-schedule-hours-minutes {
    color: #4f5f7a;
    margin-top: -0.08rem;
}

.staff-schedule-day-cell {
    min-height: 110px;
    position: relative;
    min-width: 0;
    padding: 0.35rem;
    border: 1px solid #dfe5ef;
    border-radius: 16px;
    background: #f6f7fb;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    overflow: visible;
}

.staff-schedule-day-cell.is-active {
    background: #f1f0ff;
}

.staff-schedule-day-cell.is-off {
    background: #f7f7f8;
}

.staff-schedule-day-toggle-row {
    display: flex;
    justify-content: center;
}

.staff-schedule-day-surface {
    width: 100%;
    max-width: 100%;
    min-height: 68px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    text-align: center;
    min-width: 0;
}

.staff-schedule-day-cell.is-menu-open .staff-schedule-day-surface {
    box-shadow: inset 0 0 0 1px rgba(107, 92, 255, 0.18);
}

.staff-schedule-day-cell.is-timeoff-menu-open .staff-schedule-day-surface {
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
}

.staff-schedule-day-surface-state {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    padding-top: calc(var(--staff-schedule-timeoff-stack, 0) * 54px);
}

.staff-schedule-day-menu,
.staff-schedule-timeoff-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0.35rem;
    min-width: 250px;
    max-width: min(280px, calc(100vw - 2rem));
    z-index: 20;
    display: grid;
    gap: 0;
    padding: 0.45rem 0;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.staff-schedule-day-menu[hidden],
.staff-schedule-timeoff-menu[hidden] {
    display: none !important;
}

.staff-schedule-day-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    padding: 0.62rem 1rem;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
}

.staff-schedule-day-menu-item + .staff-schedule-day-menu-item {
    border-top: 1px solid #f0f2f7;
}

.staff-schedule-day-menu-item:hover,
.staff-schedule-day-menu-item:focus-visible,
.staff-schedule-day-menu-item:active {
    background: #f7f8fc;
    color: #111827;
}

.staff-schedule-day-menu-item.is-danger {
    color: #e11d48;
}

.staff-schedule-day-menu-item.is-danger:hover,
.staff-schedule-day-menu-item.is-danger:focus-visible,
.staff-schedule-day-menu-item.is-danger:active {
    background: #fff4f6;
    color: #e11d48;
}

.staff-schedule-day-pill,
.staff-schedule-shift-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
    overflow: hidden;
}

.staff-schedule-day-pill {
    background: rgba(255, 255, 255, 0.84);
    color: #7b8597;
}

.staff-schedule-day-pill.is-off {
    background: #f4f4f5;
    color: #7b8597;
}

.staff-schedule-day-pill.is-timeoff {
    background: #fff1f5;
    color: #be185d;
    border: 1px solid #f8bfd3;
}

.staff-schedule-timeoff-block {
    display: grid;
    gap: 0.1rem;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    border: 1px solid #cfd5de;
    border-radius: 10px;
    background: repeating-linear-gradient(
        -45deg,
        #eceef2 0,
        #eceef2 6px,
        #e2e5ea 6px,
        #e2e5ea 12px
    );
    color: #111827;
    text-align: center;
    justify-items: center;
    align-content: center;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}

.staff-schedule-day-cell.has-timeoff-range-start {
    z-index: 4;
}

.staff-schedule-timeoff-block-range {
    position: absolute;
    top: calc(var(--staff-schedule-timeoff-row, 0) * 54px);
    left: 0;
    width: calc((100% * var(--staff-schedule-timeoff-span, 1)) + ((var(--staff-schedule-timeoff-span, 1) - 1) * 0.35rem));
    max-width: none;
    z-index: 5;
}

.staff-schedule-timeoff-block-title {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.1;
    max-width: 100%;
    word-break: break-word;
}

.staff-schedule-timeoff-block-time,
.staff-schedule-timeoff-block-meta {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    max-width: 100%;
    word-break: break-word;
}

.staff-schedule-timeoff-block-meta {
    color: #6b7280;
}

.staff-schedule-shift-pill {
    background: rgba(255, 255, 255, 0.72);
    color: #111827;
}

.staff-schedule-day-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
}

.staff-schedule-day-add .material-symbols-outlined {
    font-size: 1.1rem;
    color: #6b5cff;
}

.staff-schedule-day-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    color: #495467;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.staff-schedule-day-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.staff-schedule-day-cell.is-active .staff-schedule-day-toggle {
    color: #2f2d73;
    background: rgba(255, 255, 255, 0.82);
}

.staff-schedule-day-editor {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.1rem;
}

.staff-schedule-day-editor[hidden] {
    display: none !important;
}

.staff-schedule-day-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.staff-schedule-day-editor-close {
    border: 0;
    background: transparent;
    color: #6b5cff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0;
}

.staff-schedule-day-editor {
    position: fixed;
    inset: 0;
    z-index: 90;
    padding: 1.5rem;
}

.staff-schedule-day-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 24, 39, 0.42);
    cursor: pointer;
}

.staff-schedule-day-modal {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    overflow: auto;
    padding: 2rem 2.1rem 1.8rem;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(17, 24, 39, 0.22);
    display: grid;
    gap: 1.2rem;
}

.staff-schedule-day-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    cursor: pointer;
}

.staff-schedule-day-modal-close .material-symbols-outlined {
    font-size: 1.35rem;
}

.staff-schedule-day-modal-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    line-height: 1.2;
}

.staff-schedule-day-modal-head p {
    margin: 0.55rem 0 0;
    color: #667085;
    font-size: 0.95rem;
    line-height: 1.55;
}

.staff-schedule-day-modal-grid-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 0.9rem;
    align-items: center;
}

.staff-schedule-day-modal-grid-head span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.staff-schedule-time-slots {
    display: grid;
    gap: 0.45rem;
}

.staff-schedule-time-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.9rem;
}

.staff-schedule-time-slot select {
    min-width: 0;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #1a2740;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0 0.8rem;
    box-shadow: none;
}

.staff-schedule-time-slot-clear {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #111827;
    cursor: pointer;
}

.staff-schedule-day-modal-tools,
.staff-schedule-day-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-schedule-day-add-shift {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid #d4d9e4;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.staff-schedule-day-add-shift .material-symbols-outlined {
    font-size: 1.1rem;
    color: #6b5cff;
}

.staff-schedule-day-total {
    color: #667085;
    font-size: 0.95rem;
    font-weight: 700;
}

.staff-schedule-day-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.staff-schedule-timeoff-backdrop[hidden] {
    display: none !important;
}

.staff-schedule-timeoff-card {
    width: min(100%, 760px);
}

.staff-schedule-timeoff-head {
    margin-bottom: 0.25rem;
}

.staff-schedule-timeoff-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.7rem, 2.2vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.staff-schedule-timeoff-form {
    display: grid;
    gap: 1.3rem;
}

.staff-schedule-timeoff-grid {
    display: grid;
    gap: 1rem;
}

.staff-schedule-timeoff-grid-row {
    display: grid;
    gap: 1rem;
}

.staff-schedule-timeoff-grid-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-schedule-timeoff-grid-row-three {
    grid-template-columns: minmax(0, 1.45fr) minmax(140px, 0.72fr) minmax(140px, 0.72fr);
}

.staff-schedule-timeoff-grid-row-four {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(140px, 0.72fr) minmax(140px, 0.72fr);
}

.staff-schedule-timeoff-field-date {
    min-width: 0;
}

.staff-schedule-timeoff-form input[type="date"] {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #1a2740;
    font-size: 0.96rem;
    font-weight: 600;
    padding: 0 0.95rem;
    box-shadow: none;
}

.staff-schedule-timeoff-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.staff-schedule-timeoff-check {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.staff-schedule-timeoff-check input {
    width: 24px;
    height: 24px;
    margin: 0;
}

.staff-schedule-timeoff-description {
    position: relative;
}

.staff-schedule-timeoff-repeat-until {
    max-width: 320px;
}

.staff-schedule-timeoff-mode-note {
    margin: -0.15rem 0 0;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.45;
}

.staff-schedule-timeoff-description textarea {
    min-height: 120px;
    resize: vertical;
}

.staff-schedule-timeoff-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #8b6a49;
    font-size: 0.92rem;
    font-weight: 700;
}

.staff-schedule-timeoff-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-schedule-timeoff-total {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.staff-schedule-timeoff-note {
    margin: -0.2rem 0 0;
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.45;
}

.staff-schedule-timeoff-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.staff-schedule-timeoff-actions .btn {
    min-width: 120px;
}

.staff-schedule-timeoff-delete-btn {
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.2);
}

.staff-schedule-timeoff-delete-btn:hover,
.staff-schedule-timeoff-delete-btn:focus-visible {
    background: #fff4f6;
    color: #e11d48;
}

.staff-schedule-timeoff-confirm-backdrop {
    z-index: 1250;
}

.staff-schedule-timeoff-confirm-backdrop[hidden] {
    display: none !important;
}

.staff-schedule-timeoff-confirm-card {
    width: min(100%, 480px);
    padding: 2.2rem 2.35rem 2rem;
    display: grid;
    gap: 1.2rem;
}

.staff-schedule-timeoff-confirm-copy p {
    margin: 0;
    color: #111827;
    font-size: 0.97rem;
    line-height: 1.55;
}

.staff-schedule-timeoff-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

.staff-schedule-timeoff-confirm-delete {
    min-width: 124px;
    background: #e11d48;
    border-color: #e11d48;
}

.staff-schedule-timeoff-confirm-delete:hover,
.staff-schedule-timeoff-confirm-delete:focus-visible {
    background: #be123c;
    border-color: #be123c;
}

.staff-schedule-modal-open {
    overflow: hidden;
}

.staff-schedule-hours-day-card.is-closed .staff-schedule-day-toggle {
    background: #fbfcfe;
    color: #7a879d;
}

.staff-schedule-hours-day-card.is-closed .staff-schedule-time-slot {
    background: #fbfcfe;
    border-style: dashed;
}

.staff-schedule-hours-day-card.is-editor-open {
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.08);
}

.staff-schedule-note-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.staff-schedule-note-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.staff-schedule-note-copy .material-symbols-outlined {
    color: #111827;
    font-size: 1.35rem;
    line-height: 1;
}

.staff-schedule-note-copy p {
    margin: 0;
    color: #5c6676;
    font-size: 0.8rem;
    line-height: 1.55;
}

.staff-schedule-empty-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.staff-schedule-empty-card h2 {
    margin: 0 0 0.35rem;
    color: #111827;
    font-size: 1.05rem;
}

.staff-schedule-empty-card p {
    margin: 0;
    color: #667085;
    line-height: 1.5;
}

@media (max-width: 1320px) {
    .staff-schedule-summary-row {
        grid-template-columns: 1fr;
    }

    .staff-schedule-board-head,
    .staff-schedule-board-row {
        grid-template-columns: 240px repeat(7, minmax(124px, 1fr));
    }
}

@media (max-width: 820px) {
    .staff-schedule-day-modal {
        width: min(100%, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
        padding: 1.35rem 1rem 1.2rem;
    }

    .staff-schedule-day-modal-grid-head,
    .staff-schedule-time-slot {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-schedule-day-modal-grid-head .sr-only {
        display: none;
    }

    .staff-schedule-day-modal-tools,
    .staff-schedule-day-modal-foot,
    .staff-schedule-day-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-schedule-day-modal-actions .btn,
    .staff-schedule-day-add-shift,
    .staff-schedule-day-toggle {
        width: 100%;
        justify-content: center;
    }

    .staff-schedule-timeoff-card {
        width: min(100%, calc(100vw - 1rem));
        padding: 1.4rem 1rem 1.2rem;
    }

    .staff-schedule-timeoff-grid {
        gap: 0.9rem;
    }

    .staff-schedule-timeoff-grid-row,
    .staff-schedule-timeoff-grid-row-two,
    .staff-schedule-timeoff-grid-row-three,
    .staff-schedule-timeoff-grid-row-four {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-schedule-timeoff-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-schedule-timeoff-actions .btn {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .staff-schedule-board-card {
        overflow-x: auto;
    }

    .staff-schedule-board-head,
    .staff-schedule-board-row {
        min-width: 1120px;
    }
}

@media (max-width: 720px) {
    .staff-schedule-toolbar-card,
    .staff-schedule-board-card,
    .staff-schedule-note-card,
    .staff-schedule-empty-card {
        padding: 1rem;
    }

    .staff-schedule-note-card,
    .staff-schedule-empty-card,
    .staff-schedule-toolbar,
    .staff-schedule-toolbar-filters,
    .staff-schedule-range-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-schedule-filter-chip,
    .staff-schedule-staff-switcher,
    .staff-schedule-staff-switcher-trigger {
        width: 100%;
    }

    .staff-schedule-staff-switcher {
        min-width: 0;
    }

    .staff-schedule-staff-switcher-panel {
        width: 100%;
    }
}

.team-timeclock-group-title {
    margin: 0.5rem 0 0;
    color: #111827;
    font-size: 0.99rem;
    font-weight: 800;
    line-height: 1.3;
}

.team-timeclock-checkbox-row {
    padding: 0.15rem 0;
}

.team-timeclock-checkbox-row .appointment-settings-checkbox-copy strong {
    font-size: 0.98rem;
}

.team-timeclock-checkbox-row .appointment-settings-checkbox-copy small {
    font-size: 0.9rem;
    line-height: 1.45;
}

.team-timeclock-note p {
    font-size: 0.98rem;
}

.team-payroll-header-btn {
    white-space: nowrap;
}

.team-payroll-list {
    gap: 1rem;
}

.team-payroll-card {
    padding: 1.4rem 1.55rem;
}

.team-payroll-card-head {
    margin-bottom: 1.05rem;
}

.team-payroll-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 1rem 1.6rem;
}

.team-payroll-editor-card {
    width: 100%;
    max-width: 860px;
}

.team-payroll-editor-form {
    display: grid;
    gap: 1.15rem;
}

.team-payroll-editor-intro {
    display: grid;
    gap: 0.45rem;
}

.team-payroll-editor-intro h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.28rem, 1.45vw, 1.55rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.team-payroll-editor-intro p {
    margin: 0;
    color: #667085;
    font-size: 0.93rem;
    line-height: 1.5;
    max-width: 72ch;
}

.team-payroll-editor-intro a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.team-payroll-section {
    display: grid;
    gap: 0.85rem;
}

.team-payroll-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.team-payroll-section > p {
    margin: -0.2rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.45;
}

.team-payroll-form-grid {
    gap: 0.75rem 0.95rem;
    max-width: 780px;
}

.team-payroll-form-grid .form-group > span {
    display: inline-block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
}

.team-payroll-form-grid label.form-group {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.team-payroll-form-grid label.form-group > span {
    display: inline-block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.team-payroll-calendar-card {
    max-width: 780px;
    margin-top: 0.2rem;
    padding: 1.05rem 1.1rem;
    border: 1px solid #e3e6ee;
    border-radius: 10px;
    background: #fafbfc;
}

.team-payroll-calendar-card h4 {
    margin: 0;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
}

.team-payroll-calendar-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0 0 0 0.96rem;
    border-left: 2px solid #e6e9ef;
    display: grid;
    gap: 0.72rem;
}

.team-payroll-calendar-item {
    position: relative;
    padding-left: 0.7rem;
}

.team-payroll-calendar-item::before {
    content: '';
    position: absolute;
    left: -1.08rem;
    top: 0.34rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #b5bcc8;
}

.team-payroll-calendar-item strong {
    display: block;
    color: #111827;
    font-size: 0.87rem;
    font-weight: 800;
    line-height: 1.35;
}

.team-payroll-calendar-item span {
    display: block;
    margin-top: 0.1rem;
    color: #4b5563;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.45;
}

.team-payroll-editor-actions {
    margin-top: 0.15rem;
}

.team-commissions-list {
    gap: 1rem;
}

.team-commissions-card {
    max-width: 980px;
    padding: 1.25rem 1.35rem;
}

.team-commissions-form {
    display: grid;
    gap: 0.95rem;
}

.team-commissions-rows {
    display: grid;
    gap: 0.25rem;
}

.team-commissions-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.72rem 0;
}

.team-commissions-row + .team-commissions-row {
    border-top: 1px solid #e8ecf2;
}

.team-commissions-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    max-width: 72ch;
}

.team-commissions-copy strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
}

.team-commissions-copy small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.44;
}

.team-commissions-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.team-commissions-note .material-symbols-outlined {
    margin-top: 0.08rem;
    color: #5f6b80;
    font-size: 1.05rem;
    line-height: 1;
}

.team-commissions-note-copy {
    display: grid;
    gap: 0.38rem;
}

.team-commissions-note-copy p {
    margin: 0;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.team-commissions-note-copy a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    color: #111827;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.3;
}

.team-commissions-actions {
    margin-top: 0.15rem;
}

.team-pin-summary-list {
    gap: 1rem;
}

.team-pin-summary-card {
    max-width: 980px;
    padding: 1.2rem 1.35rem;
}

.team-pin-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.team-pin-summary-head-copy h2 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #111827;
    font-size: 1.18rem;
    line-height: 1.2;
}

.team-pin-summary-head-copy p {
    margin: 0.32rem 0 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 68ch;
}

.team-pin-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #e2e8f3;
    background: #f2f4f8;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.team-pin-status-badge.is-active {
    border-color: #b6e3bf;
    background: #e9f8ec;
    color: #15803d;
}

.team-pin-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    flex-wrap: wrap;
}

.team-pin-summary-actions form {
    margin: 0;
}

.team-pin-danger-btn {
    color: #cf2548;
    border-color: #f2c0cc;
    background: #fff7f9;
}

.team-pin-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.6rem;
    margin-top: 0.35rem;
}

.team-pin-summary-grid .business-settings-summary-item {
    padding: 0.2rem 0;
    gap: 0.3rem;
}

.team-pin-inline-warning {
    margin-top: 1rem;
}

.team-pin-inline-warning-copy {
    margin-top: 0.55rem;
    line-height: 1.45;
}

.team-pin-inline-warning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.team-pin-inline-warning-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .team-pin-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.team-pin-wizard-card {
    width: 100%;
    max-width: 1120px;
    padding: 0.92rem 1.05rem 1rem;
    overflow: visible;
}

.team-pin-wizard-form {
    display: grid;
    gap: 1rem;
}

.team-pin-wizard-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.team-pin-back {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #d4dae6;
    background: #ffffff;
    color: #344054;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.team-pin-back .material-symbols-outlined {
    font-size: 1.3rem;
    line-height: 1;
}

.team-pin-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.48rem;
}

.team-pin-progress-step {
    height: 4px;
    border-radius: 999px;
    background: #e5e7ee;
}

.team-pin-progress-step.is-active {
    background: #6358e7;
}

.team-pin-top-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.56rem;
    flex-wrap: wrap;
}

.team-pin-wizard-body {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 0.72rem;
}

.team-pin-wizard-body > h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.16rem, 1.35vw, 1.42rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.team-pin-wizard-body > p {
    margin: -0.3rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.42;
}

.team-pin-wizard-section {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.team-pin-wizard-section + .team-pin-wizard-section {
    margin-top: 0.9rem;
}

.team-pin-wizard-section h3 {
    margin: 0;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.18;
}


.team-pin-wizard-section > p {
    margin: -0.05rem 0 0;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.38;
    max-width: 78ch;
}

.team-pin-wizard-section .appointment-settings-checkbox-row {
    gap: 0.28rem 0.65rem;
}

.team-pin-wizard-section .appointment-settings-checkbox-copy strong {
    font-size: 0.82rem;
    line-height: 1.26;
}

.team-pin-wizard-section > p a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.team-pin-minutes-row {
    margin-left: 2.15rem;
    max-width: 520px;
    margin-top: 0.15rem;
}

.team-pin-minutes-row.is-disabled {
    opacity: 0.58;
}

.team-pin-minutes-row .form-group {
    margin: 0;
}

.team-pin-minutes-row select {
    width: 100%;
    min-height: 42px;
    padding: 0.64rem 0.85rem;
    background: #ffffff;
    font-size: 0.9rem;
    line-height: 1.32;
    color: #111827;
    -webkit-text-fill-color: currentColor;
    padding-right: 2.7rem;
}

.team-pin-minutes-row select option {
    color: #111827;
}


.team-pin-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    max-width: 760px;
}

.team-pin-style-actions {
    margin-top: 0.35rem;
}

.team-pin-members-header h2 {
    margin: 0;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    line-height: 1.15;
}

.team-pin-members-header p {
    margin: 0.3rem 0 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
}

.team-pin-members-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.85rem;
}

.team-pin-members-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #ffffff;
    border: 1px solid #d7dde8;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    min-width: 240px;
}

.team-pin-members-search input {
    border: 0;
    background: transparent;
    padding: 0.35rem 0.2rem;
    font-size: 0.88rem;
    width: 100%;
    outline: none;
}

.team-pin-members-search .material-symbols-outlined {
    font-size: 1.1rem;
    color: #667085;
}

.team-pin-members-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid #d7dde8;
    background: #ffffff;
    padding: 0.4rem 0.8rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #111827;
}

.team-pin-members-sort .material-symbols-outlined {
    font-size: 1.1rem;
}

.team-pin-members-table {
    margin-top: 0.9rem;
    border: 1px solid #e3e6ee;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.team-pin-members-table table {
    width: 100%;
    border-collapse: collapse;
}

.team-pin-members-table th,
.team-pin-members-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef1f6;
    font-size: 0.9rem;
}

.team-pin-members-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
}

.team-pin-member-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: #111827;
}

.team-pin-member-row input {
    width: 16px;
    height: 16px;
}

.team-pin-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0b5aa9;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid #e6f1ff;
}

.team-pin-member-name {
    font-weight: 700;
}

.team-pin-confirm {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: 0.4rem;
}

.team-pin-confirm-hero {
    width: 200px;
    height: 200px;
    border-radius: 32px;
    background: linear-gradient(150deg, #f2e7ff 0%, #e4ddff 45%, #cdd8ff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 30px rgba(80, 56, 142, 0.18);
}

.team-pin-confirm-hero .material-symbols-outlined {
    font-size: 4rem;
    color: #6c4ae7;
}

.team-pin-confirm-content h2 {
    margin: 0;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.team-pin-confirm-content p {
    margin: 0.4rem 0 0.9rem;
    color: #667085;
    font-size: 0.92rem;
}

.team-pin-confirm-items {
    display: grid;
    gap: 0.8rem;
}

.team-pin-confirm-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.team-pin-confirm-item .material-symbols-outlined {
    font-size: 1.2rem;
    color: #111827;
    margin-top: 0.15rem;
}

.team-pin-confirm-item strong {
    display: block;
    font-size: 0.92rem;
    color: #111827;
}

.team-pin-confirm-item span {
    display: block;
    margin-top: 0.18rem;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.4;
}

.team-pin-success {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    text-align: center;
    margin-top: 1rem;
}

.team-pin-success-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f6d9ff, #b44cff 70%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2.4rem;
}

@media (max-width: 900px) {
    .team-pin-members-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-pin-confirm {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .team-pin-confirm-content {
        text-align: center;
    }
}

.team-pin-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.98rem;
    border-radius: 999px;
    border: 1px solid rgba(205, 173, 119, 0.38);
    background: linear-gradient(135deg, rgba(255, 250, 242, 0.98), rgba(244, 235, 220, 0.98));
    color: #5a4022;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 20, 30, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.team-pin-preview-btn:hover,
.team-pin-preview-btn:focus-visible {
    border-color: rgba(102, 194, 188, 0.48);
    box-shadow: 0 14px 28px rgba(15, 20, 30, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.team-pin-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.2rem);
    background-color: #f4ede5;
    background-image: var(--team-pin-overlay-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 64% 12%;
    isolation: isolate;
    overflow: auto;
}

.team-pin-preview-modal.is-open {
    display: flex;
}

.app-pin-lock {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.2rem);
    background-color: #f4ede5;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.app-pin-lock.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.team-pin-preview-modal::before {
    content: none;
}

.app-pin-lock::before {
    content: '';
    position: absolute;
    inset: -4%;
    z-index: 0;
    background-image: var(--team-pin-overlay-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 64% 12%;
    transform: scale(1.06);
    animation: teamPinOverlayDrift 28s ease-in-out infinite alternate;
    will-change: transform;
    pointer-events: none;
}

.team-pin-preview-modal::after,
.app-pin-lock::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(45, 31, 19, 0.16) 0%, rgba(16, 12, 9, 0.42) 100%);
    backdrop-filter: blur(8px) saturate(86%);
    -webkit-backdrop-filter: blur(8px) saturate(86%);
    pointer-events: none;
}

.team-pin-preview-modal > *,
.app-pin-lock > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px), (orientation: portrait) {
    .team-pin-preview-modal,
    .app-pin-lock {
        background-position: 68% 8%;
    }

    .app-pin-lock::before {
        background-position: 68% 8%;
    }
}

@keyframes teamPinOverlayDrift {
    0% {
        transform: translate3d(-1.5%, -1%, 0) scale(1.06);
    }

    50% {
        transform: translate3d(1%, 1.2%, 0) scale(1.1);
    }

    100% {
        transform: translate3d(1.8%, -0.6%, 0) scale(1.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-pin-lock::before {
        animation: none;
        transform: scale(1.06);
    }
}

.app-pin-lock-inner {
    width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
}

.app-pin-lock .team-pin-lockscreen {
    width: min(430px, 100%);
    height: auto;
    min-height: 0;
}

.app-pin-lock-note {
    margin: 0.05rem 0 0;
    max-width: 28ch;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--team-pin-note-color);
}

.app-pin-lock-status {
    margin: -0.1rem 0 0;
    min-height: 1.4em;
    max-width: 28ch;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--team-pin-subtitle-color);
}

.app-pin-lock-unlock {
    margin-top: 0.35rem;
    min-width: 170px;
    border-radius: 999px;
    border: 1px solid rgba(247, 222, 181, 0.4);
    background: linear-gradient(135deg, rgba(190, 146, 94, 0.96), rgba(111, 69, 36, 0.98));
    color: #fffaf3;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.58rem 1.18rem;
    box-shadow: 0 14px 30px rgba(10, 16, 24, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-pin-lock-unlock[disabled] {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: 0 10px 22px rgba(10, 16, 24, 0.16);
}

.app-pin-lock-unlock:hover,
.app-pin-lock-unlock:focus-visible {
    background: linear-gradient(135deg, rgba(209, 164, 110, 0.98), rgba(130, 83, 47, 0.98));
    box-shadow: 0 18px 34px rgba(10, 16, 24, 0.28);
    outline: none;
}

.app-pin-lock-unlock[disabled]:hover,
.app-pin-lock-unlock[disabled]:focus-visible {
    background: linear-gradient(135deg, rgba(190, 146, 94, 0.96), rgba(111, 69, 36, 0.98));
    transform: none;
    outline: none;
}

body.app-pin-locked {
    overflow: hidden;
}

.app-pin-warning {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 310;
    background: rgba(18, 24, 36, 0.92);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(9, 14, 22, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.app-pin-warning.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.team-pin-preview-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(247, 222, 181, 0.42);
    background: rgba(24, 28, 32, 0.32);
    color: #fffaf3;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 28px rgba(8, 14, 22, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.team-pin-preview-close:hover,
.team-pin-preview-close:focus-visible {
    border-color: rgba(255, 244, 226, 0.72);
    background: rgba(36, 41, 46, 0.46);
    box-shadow: 0 18px 34px rgba(8, 14, 22, 0.28);
    transform: scale(1.04);
    outline: none;
}

.team-pin-lockscreen {
    --team-pin-card-bg: linear-gradient(180deg, rgba(255, 250, 244, 0.82) 0%, rgba(215, 188, 157, 0.6) 52%, rgba(148, 109, 72, 0.56) 100%);
    --team-pin-border: rgba(255, 242, 219, 0.46);
    --team-pin-key-bg: linear-gradient(180deg, rgba(197, 151, 99, 0.96) 0%, rgba(120, 73, 38, 0.98) 100%);
    --team-pin-key-border: rgba(255, 239, 214, 0.34);
    --team-pin-logo-color: #8f5f2e;
    --team-pin-title-color: #4e2f18;
    --team-pin-subtitle-color: rgba(78, 47, 24, 0.8);
    --team-pin-note-color: rgba(63, 39, 21, 0.78);
    --team-pin-dots-bg: rgba(255, 255, 255, 0.28);
    --team-pin-dots-border: rgba(137, 94, 55, 0.18);
    --team-pin-logo-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
    --team-pin-title-shadow: 0 8px 24px rgba(255, 255, 255, 0.14);
    width: min(430px, calc(100% - 2rem));
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    padding: clamp(1.5rem, 4vw, 2rem);
    border-radius: 32px;
    border: 1px solid var(--team-pin-border);
    background:
        radial-gradient(circle at 16% 18%, rgba(242, 214, 158, 0.28) 0%, transparent 34%),
        radial-gradient(circle at 84% 22%, rgba(62, 215, 208, 0.14) 0%, transparent 36%),
        linear-gradient(180deg, rgba(255, 251, 245, 0.42) 0%, rgba(72, 46, 23, 0.22) 100%),
        var(--team-pin-card-bg);
    background-repeat: no-repeat;
    background-position: center, center, center, center;
    background-size: auto, auto, cover, cover;
    box-shadow:
        0 28px 70px rgba(12, 18, 24, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    overflow: hidden;
}

.team-pin-lockscreen::before,
.team-pin-lockscreen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.team-pin-lockscreen::before {
    width: 220px;
    height: 220px;
    left: -84px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(244, 217, 169, 0.16) 0%, transparent 68%);
}

.team-pin-lockscreen::after {
    width: 180px;
    height: 180px;
    top: -78px;
    right: -62px;
    background: radial-gradient(circle, rgba(83, 210, 203, 0.14) 0%, transparent 70%);
}

.team-pin-lockscreen.team-pin-style-preview-dark {
    --team-pin-card-bg: linear-gradient(180deg, rgba(71, 48, 26, 0.58) 0%, rgba(34, 22, 12, 0.78) 100%);
    --team-pin-border: rgba(248, 229, 199, 0.22);
    --team-pin-key-bg: linear-gradient(180deg, rgba(160, 112, 67, 0.95) 0%, rgba(92, 55, 26, 0.98) 100%);
    --team-pin-key-border: rgba(250, 232, 205, 0.18);
    --team-pin-logo-color: #f4d9a6;
    --team-pin-title-color: #fffaf3;
    --team-pin-subtitle-color: rgba(255, 248, 238, 0.74);
    --team-pin-note-color: rgba(255, 248, 238, 0.78);
    --team-pin-dots-bg: rgba(255, 255, 255, 0.06);
    --team-pin-dots-border: rgba(255, 255, 255, 0.08);
    --team-pin-logo-shadow: 0 12px 34px rgba(8, 14, 22, 0.32);
    --team-pin-title-shadow: 0 10px 28px rgba(8, 14, 22, 0.24);
}

.team-pin-lockscreen-content {
    position: relative;
    z-index: 1;
    width: min(100%, 310px);
    display: grid;
    gap: 0.78rem;
    justify-items: center;
    margin-top: 0;
}

.team-pin-lockscreen-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--team-pin-logo-color);
    opacity: 1;
    text-shadow: var(--team-pin-logo-shadow);
}

.team-pin-lockscreen-title {
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--team-pin-title-color);
    text-shadow: var(--team-pin-title-shadow);
}

.team-pin-lockscreen-subtitle {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--team-pin-subtitle-color);
}

.team-pin-lockscreen-dots {
    display: inline-flex;
    gap: 0.42rem;
    margin-top: 0.1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--team-pin-dots-bg);
    border: 1px solid var(--team-pin-dots-border);
}

.team-pin-lockscreen-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 250, 243, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.team-pin-lockscreen-dots span.is-filled {
    background: linear-gradient(180deg, #f6e2b6 0%, #d5ae65 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 14px rgba(213, 174, 101, 0.28);
}

.team-pin-lockscreen-dots span.is-current {
    transform: scale(1.18);
}

.team-pin-lockscreen.is-error .app-pin-lock-status {
    color: #7a1d17;
}

.team-pin-lockscreen.team-pin-style-preview-dark.is-error .app-pin-lock-status {
    color: #ffd3c7;
}

.team-pin-lockscreen.is-error .team-pin-lockscreen-dots {
    border-color: rgba(180, 49, 35, 0.28);
}

.team-pin-lockscreen-pad {
    --team-pin-key-size: clamp(58px, 7vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, var(--team-pin-key-size));
    justify-content: center;
    gap: 0.82rem 0.92rem;
    margin-top: 0.45rem;
}

.team-pin-lockscreen-pad-spacer {
    display: block;
}

.team-pin-lockscreen-pad button,
.team-pin-lockscreen-pad-spacer {
    width: var(--team-pin-key-size);
    height: var(--team-pin-key-size);
}

.team-pin-lockscreen-pad button {
    appearance: none;
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    min-width: var(--team-pin-key-size);
    min-height: var(--team-pin-key-size);
    flex: 0 0 auto;
    padding: 0;
    line-height: 1;
    border-radius: 999px;
    border: none;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 244, 225, 0.28) 0%, transparent 34%),
        linear-gradient(180deg, rgba(220, 177, 121, 0.98) 0%, rgba(146, 95, 50, 0.98) 52%, rgba(110, 67, 32, 1) 100%);
    background-clip: padding-box;
    color: #fffaf3;
    font-size: 1.12rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(60, 32, 12, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 224, 0.42),
        0 12px 24px rgba(66, 37, 14, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
}

.team-pin-lockscreen-pad button::before {
    content: none;
}

.team-pin-lockscreen-pad button:hover,
.team-pin-lockscreen-pad button:focus-visible {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 248, 232, 0.34) 0%, transparent 36%),
        linear-gradient(180deg, rgba(229, 186, 128, 0.99) 0%, rgba(159, 104, 56, 0.99) 52%, rgba(119, 72, 35, 1) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 224, 0.62),
        0 16px 28px rgba(66, 37, 14, 0.3);
    transform: translateY(-2px) scale(1.02);
    outline: none;
}

.team-pin-lockscreen-pad button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 8px 18px rgba(66, 37, 14, 0.2);
}

.team-pin-lockscreen-pad button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
}

.team-pin-lockscreen-pad button.is-delete {
    font-size: 1.34rem;
    color: #fff3df;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 233, 211, 0.18) 0%, transparent 36%),
        linear-gradient(180deg, rgba(159, 103, 62, 0.98) 0%, rgba(111, 64, 32, 0.99) 52%, rgba(82, 43, 21, 1) 100%);
}

.team-pin-lockscreen-pad button.is-delete span {
    display: inline-block;
    transform: translateY(-1px) scale(1.06);
}

@media (min-width: 1500px) and (min-height: 860px) {
    .app-pin-lock .team-pin-lockscreen {
        width: min(392px, calc(100% - 2rem));
        padding: 1.35rem 1.45rem 1.5rem;
        border-radius: 28px;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-content {
        width: min(100%, 292px);
        gap: 0.66rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-logo {
        font-size: 2.08rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-title {
        font-size: 1.38rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-subtitle,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-status,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-note {
        font-size: 0.82rem;
        line-height: 1.36;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-dots {
        padding: 0.38rem 0.82rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad {
        --team-pin-key-size: 58px;
        gap: 0.76rem 0.84rem;
        margin-top: 0.28rem;
    }
}

@media (min-width: 1500px) and (max-height: 859px) {
    .app-pin-lock {
        padding: 0.8rem 1rem;
    }

    .app-pin-lock .team-pin-lockscreen {
        width: min(356px, calc(100% - 2rem));
        padding: 1rem 1.08rem 1.12rem;
        border-radius: 24px;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-content {
        width: min(100%, 268px);
        gap: 0.5rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-logo {
        font-size: 1.72rem;
        line-height: 1;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-title {
        font-size: 1.12rem;
        line-height: 1.1;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-subtitle,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-status,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-note {
        font-size: 0.75rem;
        line-height: 1.28;
        max-width: 26ch;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-dots {
        padding: 0.32rem 0.7rem;
        margin-top: 0;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad {
        --team-pin-key-size: 50px;
        gap: 0.62rem 0.72rem;
        margin-top: 0.18rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad button {
        font-size: 1rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad button.is-delete {
        font-size: 1.18rem;
    }
}

.team-pin-style-option {
    position: relative;
    border: 1px solid #dde2ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.5rem;
    display: grid;
    gap: 0.48rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.team-pin-style-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.team-pin-style-option:has(input:checked) {
    border-color: #c99a56;
    border-width: 2px;
    padding: calc(0.5rem - 1px);
    box-shadow: 0 0 0 1px rgba(201, 154, 86, 0.24), 0 14px 34px rgba(15, 20, 30, 0.12);
}

.team-pin-style-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.team-pin-style-preview::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(168px, 70%);
    height: min(148px, 76%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background:
        radial-gradient(circle at 44% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 52% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 56% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 52%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 65% 52%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 35% 64%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 64%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 65% 64%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 35% 76%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 76%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 65% 76%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        linear-gradient(180deg, var(--team-pin-preview-glass), rgba(255, 255, 255, 0.06));
    box-shadow: 0 14px 32px rgba(15, 20, 30, 0.18);
    opacity: 0.92;
    pointer-events: none;
}

.team-pin-style-option input:checked + .team-pin-style-preview {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.team-pin-style-option:hover {
    transform: translateY(-1px);
    border-color: #c9d2e6;
    box-shadow: 0 12px 26px rgba(15, 20, 30, 0.08);
}

.team-pin-style-option:has(input:checked):hover {
    border-color: #c99a56;
    box-shadow: 0 0 0 1px rgba(201, 154, 86, 0.24), 0 16px 36px rgba(15, 20, 30, 0.14);
}

.team-pin-style-preview-light {
    --team-pin-preview-glass: rgba(255, 248, 238, 0.16);
    --team-pin-preview-dot: rgba(244, 223, 182, 0.88);
    background:
        radial-gradient(circle at 15% 20%, rgba(250, 231, 198, 0.86) 0%, rgba(250, 231, 198, 0.1) 42%, transparent 60%),
        radial-gradient(circle at 28% 82%, rgba(205, 164, 103, 0.6) 0%, rgba(205, 164, 103, 0.06) 40%, transparent 65%),
        radial-gradient(circle at 84% 18%, rgba(82, 210, 202, 0.76) 0%, rgba(82, 210, 202, 0.08) 44%, transparent 70%),
        linear-gradient(145deg, #8a6843, #22414b);
}

.team-pin-style-preview-dark {
    --team-pin-preview-glass: rgba(255, 255, 255, 0.1);
    --team-pin-preview-dot: rgba(244, 223, 182, 0.76);
    background:
        radial-gradient(circle at 18% 18%, rgba(244, 214, 152, 0.34) 0%, rgba(244, 214, 152, 0.06) 36%, transparent 62%),
        radial-gradient(circle at 82% 22%, rgba(69, 203, 196, 0.34) 0%, rgba(69, 203, 196, 0.08) 38%, transparent 66%),
        radial-gradient(circle at 24% 82%, rgba(112, 78, 48, 0.36) 0%, rgba(112, 78, 48, 0.06) 42%, transparent 66%),
        linear-gradient(145deg, #231d1b, #0f2731);
}

.team-pin-style-label {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.team-pin-wizard-section-preview {
    margin-top: 0.15rem;
}

.team-pin-inline-preview {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.team-pin-inline-preview-frame {
    padding: 0.95rem;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 18px 42px rgba(15, 20, 30, 0.08);
}

.team-pin-preview-screen.team-pin-style-preview {
    width: min(100%, 290px);
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 22px 44px rgba(15, 20, 30, 0.2);
}

.team-pin-preview-screen.team-pin-style-preview::after {
    width: min(200px, 76%);
    height: min(180px, 60%);
    border-radius: 22px;
}

.team-pin-preview-caption {
    margin: 0;
    text-align: center;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.45;
}

.team-pin-empty-state {
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px dashed #d7ddea;
    border-radius: 12px;
    background: #fafbfc;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.team-pin-members-header {
    display: grid;
    gap: 0.35rem;
}

.team-pin-members-header h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.18rem, 1.45vw, 1.42rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
}

.team-pin-members-header p {
    margin: 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.42;
    max-width: 72ch;
}

.team-pin-members-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.team-pin-members-search {
    min-width: min(360px, 100%);
    max-width: 445px;
    flex: 1 1 320px;
    border-radius: 999px;
    border: 1px solid #cfd6e2;
    background: #ffffff;
    padding: 0.45rem 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-pin-members-search:focus-within {
    border-color: #b9c4d7;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.08);
}

.team-pin-members-search input {
    border: 0;
    background: transparent;
    padding: 0.2rem 0.1rem;
    box-shadow: none;
    outline: none;
    color: #111827;
    font-size: 0.88rem;
    line-height: 1.2;
}

.team-pin-members-search input::placeholder {
    color: #8a97ac;
}

.team-pin-members-search .material-symbols-outlined {
    font-size: 1.08rem;
    color: #7b8aa1;
}

.team-pin-members-sort-menu {
    position: relative;
    flex: 0 0 auto;
}

.team-pin-members-sort-menu[open] {
    z-index: 20;
}

.team-pin-members-sort-menu > summary {
    list-style: none;
}

.team-pin-members-sort-menu > summary::-webkit-details-marker {
    display: none;
}

.team-pin-members-sort {
    border-radius: 999px;
    border: 1px solid #cfd6e2;
    background: #ffffff;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.48rem 0.95rem;
    min-height: 40px;
    min-width: 278px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
}

.team-pin-members-sort:hover,
.team-pin-members-sort:focus-visible {
    border-color: #b9c5db;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
    outline: none;
}

.team-pin-members-sort-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 214px;
    padding: 0.35rem 0;
    border: 1px solid #d7dde8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.14);
}

.team-pin-members-sort-option {
    width: 100%;
    min-height: 0 !important;
    padding: 0.8rem 1rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.87rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    box-shadow: none !important;
}

.team-pin-members-sort-option:hover,
.team-pin-members-sort-option:focus-visible {
    background: #f5f7fb !important;
    outline: none;
}

.team-pin-members-sort-option.is-selected {
    color: #111827 !important;
    font-weight: 700;
}

.team-pin-members-table-wrap {
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    background: #ffffff;
    overflow-x: auto;
    box-shadow: none;
}

.team-pin-members-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.team-pin-members-table th,
.team-pin-members-table td {
    border-bottom: 1px solid #e8ecf2;
    padding: 0.9rem 0.95rem;
    text-align: left;
    vertical-align: middle;
}

.team-pin-members-table tbody tr:last-child td {
    border-bottom: 0;
}

.team-pin-members-table th {
    background: #eff3f7;
    color: #101828;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.team-pin-members-table td {
    color: #111827;
    font-size: 0.96rem;
    line-height: 1.38;
}

.team-pin-members-table tbody tr {
    transition: background-color 0.18s ease;
}

.team-pin-members-table tbody tr:hover {
    background: #fbfcfe;
}

.team-pin-members-table th:first-child,
.team-pin-members-table td:first-child {
    width: 38px;
    max-width: 38px;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    text-align: center;
}

button.team-pin-check-all {
    -webkit-appearance: none;
    appearance: none;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 auto;
    border: 1px solid #60a5fa !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

button.team-pin-check-all:hover,
button.team-pin-check-all:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
    outline: none;
}

button.team-pin-check-all.is-active {
    border-color: #1976d2;
    background: #1976d2;
}

.team-pin-members-table th:nth-child(2),
.team-pin-members-table td:nth-child(2) {
    width: 40%;
}

.team-pin-members-table th:nth-child(3),
.team-pin-members-table td:nth-child(3) {
    width: 36%;
}

.team-pin-members-table th:nth-child(4),
.team-pin-members-table td:nth-child(4) {
    white-space: nowrap;
}

.team-pin-members-table td:last-child {
    color: #344054;
    font-weight: 600;
    font-size: 0.93rem;
}

.team-pin-check-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 auto;
}

.team-pin-check-wrap input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.team-pin-check-ui {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #7cb6ee;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-pin-check-wrap input:checked + .team-pin-check-ui {
    border-color: #1976d2;
    background: #1976d2;
}

.team-pin-check-wrap input:checked + .team-pin-check-ui::after {
    content: '';
    width: 4px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) translate(-1px, -1px);
}

.team-pin-member-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
}

.team-pin-member-identity img,
.team-pin-member-avatar-fallback {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    flex-shrink: 0;
}

.team-pin-member-identity img {
    object-fit: cover;
    border: 3px solid #cbe8ff;
    box-shadow: 0 0 0 1px #82c7f5;
}

.team-pin-member-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #cbe8ff;
    background: #0d62af;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.team-pin-member-identity strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.team-pin-member-contact {
    display: grid;
    gap: 0.12rem;
}

.team-pin-member-contact span {
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.35;
}

.team-pin-confirm {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    min-height: 360px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 1.35rem;
}

.team-pin-confirm-shield {
    width: 170px;
    height: 200px;
    border-radius: 90px 90px 70px 70px;
    background: linear-gradient(165deg, #d5d2ff 0%, #e6ccf4 46%, #d6b1f1 100%);
    color: #f5f3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-pin-confirm-shield .material-symbols-outlined {
    font-size: 5.2rem;
    line-height: 1;
}

.team-pin-confirm-copy h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.82rem, 2.4vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.team-pin-confirm-copy p {
    margin: 0.6rem 0 0;
    color: #667085;
    font-size: 0.97rem;
    line-height: 1.5;
}

.team-pin-confirm-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.team-pin-confirm-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.7rem;
}

.team-pin-confirm-list li .material-symbols-outlined {
    color: #1f2937;
    font-size: 1.18rem;
    line-height: 1;
    margin-top: 0.12rem;
}

.team-pin-confirm-list li strong {
    display: block;
    color: #111827;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.35;
}

.team-pin-confirm-list li span {
    display: block;
    margin-top: 0.16rem;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
}

.team-pin-success-card {
    max-width: 760px;
    min-height: 430px;
    margin: 0 auto;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.team-pin-success-icon {
    width: 152px;
    height: 152px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 25%, rgba(243, 240, 255, 0.84) 0%, rgba(243, 240, 255, 0.04) 45%, transparent 58%),
        radial-gradient(circle at 65% 70%, rgba(190, 20, 240, 0.7) 0%, rgba(190, 20, 240, 0.08) 48%, transparent 66%),
        linear-gradient(145deg, #6358e7, #db18ff);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-pin-success-icon .material-symbols-outlined {
    font-size: 3.3rem;
    line-height: 1;
}

.team-pin-success-card h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.55rem, 1.9vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.team-settings-shell .team-timeoff-list {
    width: 100%;
    max-width: none;
}

.team-permissions-matrix-wrap {
    display: grid;
    gap: 0.9rem;
}

.team-permissions-note {
    display: flex;
    align-items: flex-start;
    gap: 0.64rem;
    padding: 0.88rem 1rem;
    background: #ffffff;
}

.team-permissions-note .material-symbols-outlined {
    color: #667085;
    font-size: 1.05rem;
    line-height: 1;
    margin-top: 0.04rem;
}

.team-permissions-note p {
    margin: 0;
    color: #344054;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.44;
}

.team-permissions-matrix-card {
    padding: 1rem 1.1rem;
    background: #ffffff;
}

.team-permissions-matrix-form {
    display: grid;
    gap: 0.82rem;
}

.team-permissions-matrix-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.team-permissions-matrix-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.24;
}

.team-permissions-matrix-foot {
    display: flex;
    justify-content: flex-end;
}

.team-permissions-matrix-table-wrap {
    border: 1px solid #dce2ec;
    border-radius: 12px;
    background: #ffffff;
    overflow-x: auto;
}

.team-permissions-matrix-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.team-permissions-matrix-table th,
.team-permissions-matrix-table td {
    border-bottom: 1px solid #e8ecf2;
    padding: 0.62rem 0.72rem;
    background: #ffffff;
}

.team-permissions-matrix-table th {
    letter-spacing: normal;
}

.team-permissions-matrix-table tbody tr:last-child th,
.team-permissions-matrix-table tbody tr:last-child td {
    border-bottom: 0;
}

.team-permissions-matrix-group-row th {
    background: #f8f9fc;
    color: #475467;
    border-bottom-color: #dfe5ee;
}

.team-permissions-matrix-group-row th:first-child {
    text-align: left;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-permissions-matrix-group-row th:not(:first-child) {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.team-permissions-matrix-table th[scope='row'] {
    color: #101828;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    width: 34%;
    text-transform: none;
    letter-spacing: normal;
}

.team-permissions-matrix-table th[scope='row']::first-letter {
    text-transform: uppercase;
}

.team-permissions-matrix-table td {
    text-align: center;
    vertical-align: middle;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row th,
.team-permissions-matrix-table tr.team-permissions-matrix-data-row td {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover th,
.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover td {
    background: #edf3ff;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover th[scope='row'] {
    color: #0f2847;
    box-shadow: inset 3px 0 0 #8bb4ff;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover .team-permissions-matrix-checkmark {
    border-color: #a8b7d1;
}

.team-permissions-matrix-table
    tr.team-permissions-matrix-data-row:hover
    .team-permissions-matrix-cell.is-disabled
    .team-permissions-matrix-checkmark {
    border-color: #d3d9e4;
    background: #f4f6fa;
}

.team-permissions-matrix-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.team-permissions-matrix-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.team-permissions-matrix-checkmark {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #c8cfdb;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.team-permissions-matrix-check:checked + .team-permissions-matrix-checkmark {
    border-color: #6358e7;
    background: #6358e7;
}

.team-permissions-matrix-check:checked + .team-permissions-matrix-checkmark::after {
    content: '';
    width: 4px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) translate(-1px, -1px);
}

.team-permissions-matrix-check:focus-visible + .team-permissions-matrix-checkmark {
    box-shadow: 0 0 0 2px rgba(99, 88, 231, 0.2);
}

.team-permissions-matrix-cell.is-disabled .team-permissions-matrix-checkmark,
.team-permissions-matrix-check:disabled + .team-permissions-matrix-checkmark {
    border-color: #d7dde8;
    background: #f2f4f8;
    cursor: not-allowed;
}

.team-permissions-matrix-check:checked:disabled + .team-permissions-matrix-checkmark {
    border-color: #c7ccdf;
    background: #d7d9e8;
}

.team-permissions-matrix-check:disabled {
    opacity: 1;
}

.sales-settings-shell .business-settings-form-actions {
    justify-content: flex-end;
}

.sales-payment-list {
    display: grid;
    gap: 0.8rem;
}

.sales-payment-card {
    padding: 1rem 1.2rem;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.sales-settings-shell .sales-payment-card {
    overflow: visible;
}

.sales-payment-main {
    display: flex;
    align-items: center;
    gap: 0.76rem;
    min-width: 0;
}

.sales-payment-icon {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    border: 1px solid #eceff5;
    background: #f6f8fc;
    color: #4f5d72;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-payment-icon[data-tone="cash"] {
    border-color: #dcefdc;
    background: #eff9ef;
    color: #2f9838;
}

.sales-payment-icon[data-tone="other"] {
    border-color: #dcd9fb;
    background: #f3f1ff;
    color: #5f56d8;
}

.sales-payment-icon .material-symbols-outlined {
    font-size: 1.65rem;
    line-height: 1;
}

.sales-payment-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.02rem;
    line-height: 1.2;
}

.sales-payment-lock {
    color: #a5adbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-payment-lock .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.sales-payment-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.sales-payment-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.sales-payment-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.sales-tax-empty-card {
    min-height: 470px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: 2rem 1rem;
}

.sales-tax-empty-icon {
    position: relative;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-tax-empty-square {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(160deg, #4f46e5, #8b5cf6 58%, #d946ef);
}

.sales-tax-empty-circle {
    position: absolute;
    right: 2px;
    top: 6px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, #f2f2ff 0%, #d8cef9 42%, #c7bbea 100%);
    color: #f7f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-tax-empty-circle .material-symbols-outlined {
    font-size: 1.7rem;
    line-height: 1;
}

.sales-tax-empty-card h3 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sales-tax-empty-card p {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: 0.93rem;
    line-height: 1.5;
}

.sales-tax-list {
    display: grid;
    gap: 0.8rem;
}

.sales-tax-card {
    padding: 1rem 1.2rem;
    min-height: 102px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.sales-settings-shell .sales-tax-card {
    overflow: visible;
}

.sales-tax-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sales-tax-icon {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    border: 1px solid #eceff5;
    background: #f5f7fb;
    color: #1f2633;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-tax-icon .material-symbols-outlined {
    font-size: 1.7rem;
    line-height: 1;
}

.sales-tax-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.sales-tax-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.sales-tax-copy p {
    margin: 0;
    color: #667085;
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1.35;
}

.sales-tax-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.sales-tax-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.sales-tax-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.sales-tips-card {
    max-width: 960px;
}

.sales-tips-card-head {
    margin-bottom: 0.8rem;
}

.sales-tips-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sales-tips-toggle-copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.sales-tips-toggle-copy strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
}

.sales-tips-toggle-copy a {
    color: #6b5cff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-switch {
    position: relative;
    width: 48px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-tips-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sales-tips-switch-pill {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d5d8e2;
    background: #eef1f6;
    transition: all 0.2s ease;
}

.sales-tips-switch-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 22, 33, 0.2);
    transition: transform 0.2s ease;
}

.sales-tips-switch input:checked + .sales-tips-switch-pill {
    border-color: #6b5cff;
    background: #6b5cff;
}

.sales-tips-switch input:checked + .sales-tips-switch-pill::after {
    transform: translateX(20px);
}

.sales-tips-divider {
    height: 1px;
    background: #e6e8ef;
    margin: 1rem 0;
}

.sales-tips-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sales-tips-summary-row + .sales-tips-summary-row {
    margin-top: 0.8rem;
}

.sales-tips-summary-row h3 {
    margin: 0;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
}

.sales-tips-summary-row p {
    margin: 0.14rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.45;
}

.sales-tips-advanced-link {
    color: #6b5cff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-editor-card {
    max-width: 960px;
}

.sales-tips-editor-head {
    margin-bottom: 0.9rem;
}

.sales-tips-editor-copy {
    margin: 0.34rem 0 0;
    color: #667085;
    font-size: 0.91rem;
    line-height: 1.5;
}

.sales-tips-values-wrap {
    display: grid;
    gap: 0.72rem;
}

.sales-tips-values-label {
    margin: 0;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-values-list {
    display: grid;
    gap: 0.66rem;
}

.sales-tips-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.sales-tips-value-input {
    position: relative;
    margin: 0;
}

.sales-tips-value-input input[type='number'] {
    width: 100%;
    min-height: 42px;
    padding-right: 2.2rem;
}

.sales-tips-value-input span {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.sales-tips-value-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f6673;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sales-tips-value-remove:hover {
    background: #f2f4f8;
}

.sales-tips-value-remove .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.sales-tips-add-value {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    justify-self: flex-start;
    min-height: 38px;
    padding-inline: 0.95rem;
}

.sales-tips-add-value .material-symbols-outlined {
    font-size: 1.02rem;
    line-height: 1;
}

.sales-tips-calc-form {
    display: grid;
    gap: 1rem;
}

.sales-tips-calc-block {
    display: grid;
    gap: 0.7rem;
}

.sales-tips-calc-block h3 {
    margin: 0;
    color: #111827;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-calc-block > p {
    margin: -0.1rem 0 0;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sales-tips-check-list {
    display: grid;
    gap: 0.5rem;
}

.sales-tips-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.42rem 0.72rem;
    align-items: start;
}

.sales-tips-check-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.06rem;
    accent-color: #6b5cff;
}

.sales-tips-check-item span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-tips-calc-selects {
    display: grid;
    gap: 0.8rem;
}

.sales-tips-help {
    display: block;
    margin-top: 0.32rem;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sales-service-charge-empty {
    min-height: 420px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.82rem;
    padding: 2rem 1rem;
}

.sales-service-charge-empty-icon {
    position: relative;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-service-charge-empty-square {
    position: absolute;
    left: 9px;
    bottom: 8px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(160deg, #4f46e5, #8b5cf6 58%, #d946ef);
}

.sales-service-charge-empty-circle {
    position: absolute;
    right: 1px;
    top: 5px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, #f2f2ff 0%, #d8cef9 42%, #c7bbea 100%);
    color: #f7f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-service-charge-empty-circle .material-symbols-outlined {
    font-size: 1.42rem;
    line-height: 1;
}

.sales-service-charge-empty h3 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sales-service-charge-empty p {
    max-width: 650px;
    margin: 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.5;
}

.sales-service-charge-list {
    display: grid;
    gap: 0.82rem;
}

.sales-service-charge-card {
    padding: 1rem 1.2rem;
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.sales-settings-shell .sales-service-charge-card {
    overflow: visible;
}

.sales-service-charge-main {
    display: flex;
    align-items: center;
    gap: 0.78rem;
    min-width: 0;
}

.sales-service-charge-icon {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    border: 1px solid #eceff5;
    background: #f6f8fc;
    color: #5a6478;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-service-charge-icon .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.sales-service-charge-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.sales-service-charge-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.2;
}

.sales-service-charge-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.87rem;
    line-height: 1.4;
}

.sales-service-charge-description {
    margin-top: 0.08rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sales-service-charge-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.sales-service-charge-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.sales-service-charge-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.sales-service-charge-editor-card {
    max-width: 980px;
    background: #ffffff;
}

.sales-service-charge-form {
    display: grid;
    gap: 1rem;
}

.sales-service-charge-section {
    display: grid;
    gap: 0.72rem;
}

.sales-service-charge-section + .sales-service-charge-section {
    border-top: 1px solid #e6e8ef;
    padding-top: 1.04rem;
    margin-top: 0.14rem;
}

.sales-service-charge-section h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-service-charge-section > p {
    margin: -0.18rem 0 0;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sales-service-charge-section textarea {
    min-height: 110px;
    resize: vertical;
}

.sales-service-charge-radio-group {
    display: grid;
    gap: 0.52rem;
}

.sales-service-charge-radio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.74rem;
    align-items: start;
}

.sales-service-charge-radio input[type='radio'] {
    width: 18px;
    height: 18px;
    margin-top: 0.06rem;
    accent-color: #6b5cff;
}

.sales-service-charge-radio span {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-service-charge-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.74rem;
    align-items: start;
}

.sales-service-charge-check-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.06rem;
    accent-color: #6b5cff;
}

.sales-service-charge-check-item span {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-service-charge-target-types {
    display: grid;
    gap: 0.46rem;
    margin-top: -0.08rem;
    padding-left: 1.7rem;
}

.sales-service-charge-target-types[hidden] {
    display: none !important;
}

.sales-service-charge-check-item-child span {
    font-size: 0.99rem;
}

.sales-service-charge-price-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.82rem;
}

.sales-service-charge-price-row {
    display: grid;
    gap: 0.32rem;
    margin: 0;
}

.sales-service-charge-price-row > span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-service-charge-money-field,
.sales-service-charge-percent-field {
    display: flex;
    align-items: center;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.sales-service-charge-money-field > span,
.sales-service-charge-percent-field > span {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 0.88rem;
    flex: 0 0 auto;
    pointer-events: none;
    white-space: nowrap;
}

.sales-service-charge-money-field > span {
    border-right: 1px solid #e2e8f0;
}

.sales-service-charge-money-field input[type='number'] {
    width: 100%;
    min-height: 42px;
    border: 0 !important;
    border-radius: 0;
    padding: 0.78rem 0.9rem;
    box-shadow: none !important;
    background: transparent;
    outline: 0;
    flex: 1 1 auto;
}

.sales-service-charge-percent-field > span {
    border-left: 1px solid #e2e8f0;
}

.sales-service-charge-percent-field input[type='number'] {
    width: 100%;
    min-height: 42px;
    border: 0 !important;
    border-radius: 0;
    padding: 0.78rem 0.9rem;
    box-shadow: none !important;
    background: transparent;
    outline: 0;
    flex: 1 1 auto;
}

.sales-service-charge-money-field:focus-within,
.sales-service-charge-percent-field:focus-within {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.sales-gift-summary-card {
    min-height: 420px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.84rem;
    padding: 2rem 1rem;
}

.sales-gift-summary-icon {
    position: relative;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-gift-summary-square {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(160deg, #4f46e5, #8b5cf6 58%, #d946ef);
}

.sales-gift-summary-circle {
    position: absolute;
    right: 1px;
    top: 5px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, #f2f2ff 0%, #d8cef9 42%, #c7bbea 100%);
    color: #f7f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-gift-summary-circle .material-symbols-outlined {
    font-size: 1.6rem;
    line-height: 1;
}

.sales-gift-summary-card h2 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sales-gift-summary-card p {
    max-width: 640px;
    margin: 0;
    color: #667085;
    font-size: 0.93rem;
    line-height: 1.52;
}

.sales-gift-config-btn.clients-hub-book-btn {
    margin-top: 0.2rem;
    min-width: 106px;
}

.sales-gift-editor-card {
    max-width: 980px;
}

.sales-gift-editor-form {
    display: grid;
    gap: 1rem;
}

.sales-gift-editor-head {
    margin-bottom: 0.2rem;
}

.sales-gift-config-section {
    display: grid;
    gap: 0.7rem;
}

.sales-gift-config-status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sales-gift-config-status-copy {
    min-width: 0;
}

.sales-gift-config-status-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.sales-gift-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #d4d9e4;
    background: #f4f6fa;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.sales-gift-status-pill.is-active {
    border-color: #ccecd5;
    background: #e9f8ee;
    color: #1f7a38;
}

.sales-gift-config-status-copy p {
    margin: 0.32rem 0 0;
    color: #667085;
    font-size: 0.95rem;
    line-height: 1.45;
}

.sales-gift-toggle {
    margin-top: 0.2rem;
}

.sales-service-charge-section-divider {
    height: 1px;
    background: #e6e8ef;
}

.sales-gift-config-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.sales-gift-config-section > p {
    margin: -0.2rem 0 0;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.5;
    max-width: 720px;
}

.sales-gift-values-list {
    display: grid;
    gap: 0.7rem;
}

.sales-gift-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.sales-gift-money-field {
    width: 100%;
}

.sales-gift-value-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f6673;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sales-gift-value-remove:hover {
    background: #f2f4f8;
}

.sales-gift-value-remove .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.sales-gift-add-value {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    justify-self: flex-start;
    min-height: 38px;
    padding-inline: 0.95rem;
}

.sales-gift-add-value .material-symbols-outlined {
    font-size: 1.02rem;
    line-height: 1;
}

.sales-gift-expiry-field {
    max-width: 560px;
}

.sales-receipt-stack {
    display: grid;
    gap: 0.9rem;
}

.sales-receipt-card .business-settings-card-head {
    margin-bottom: 1.35rem;
}

.sales-receipt-card .business-settings-card-head > div {
    min-width: 0;
}

.sales-receipt-card-copy,
.sales-receipt-form-note {
    margin: 0.36rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.sales-receipt-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.sales-receipt-summary-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.sales-receipt-summary-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-receipt-summary-item strong {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sales-receipt-summary-item a {
    color: #6b5cff;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
}

.sales-receipt-design-form {
    display: grid;
    gap: 1rem;
}

.sales-receipt-check-stack {
    display: grid;
    gap: 0.58rem;
}

.sales-receipt-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.42rem 0.72rem;
}

.sales-receipt-check-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.08rem;
    accent-color: #6b5cff;
}

.sales-receipt-check-item span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-receipt-fields {
    display: grid;
    gap: 0.92rem;
}

.sales-receipt-field {
    display: grid;
    gap: 0.32rem;
}

.sales-receipt-field-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
}

.sales-receipt-field-head > span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-receipt-field-head small {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.sales-receipt-field input[type='text'] {
    min-height: 44px;
}

.sales-receipt-auto-print {
    margin-top: 1.1rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e6e8ef;
}

.sales-receipt-auto-print-label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.42rem 0.72rem;
}

.sales-receipt-auto-print-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    accent-color: #6b5cff;
}

.sales-receipt-auto-print-label span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-receipt-numbering-wrap {
    display: grid;
    gap: 0.8rem;
}

.sales-receipt-numbering-toolbar {
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #e4e7ee;
    background: #f6f7f9;
    box-shadow: none;
}

.sales-receipt-numbering-search.services-catalog-search-box {
    min-width: 0;
    max-width: 280px;
    min-height: 40px;
    flex: 0 0 280px;
}

.sales-receipt-numbering-search input[type='search'] {
    min-height: 34px;
    font-size: 0.9rem;
    font-weight: 600;
}

.sales-receipt-numbering-table {
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.sales-receipt-numbering-head,
.sales-receipt-numbering-row {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1.05fr) minmax(220px, 1fr) minmax(220px, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.82rem 1rem;
}

.sales-receipt-numbering-head {
    border-bottom: 1px solid #e6e9f0;
}

.sales-receipt-numbering-head span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.sales-receipt-numbering-row {
    border-bottom: 1px solid #eceff5;
}

.sales-receipt-numbering-row:last-of-type {
    border-bottom: 0;
}

.sales-receipt-numbering-check-col {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-receipt-numbering-check-col input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: #6757ef;
}

.sales-receipt-numbering-center {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.sales-receipt-numbering-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e1e5ee;
    background: #f1f4f9;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-receipt-numbering-center strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.sales-receipt-numbering-input {
    margin: 0;
}

.sales-receipt-numbering-input input {
    width: 100%;
    min-height: 38px;
    border-radius: 9px;
    border: 1px solid #cfd5e0;
    background: #ffffff;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0 0.78rem;
}

.sales-receipt-numbering-input input:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.sales-receipt-numbering-empty {
    margin: 0;
    padding: 0.95rem 1rem;
    border-top: 1px solid #eceff5;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.appointment-unavailable-list {
    display: grid;
    gap: 0.95rem;
}

.appointment-unavailable-card {
    padding: 1.15rem 1.35rem;
}

.appointment-settings-shell .appointment-unavailable-card {
    overflow: visible;
}

.appointment-unavailable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointment-unavailable-row .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-unavailable-row .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-unavailable-row .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.appointment-unavailable-main {
    display: flex;
    align-items: center;
    gap: 0.78rem;
    min-width: 0;
}

.appointment-unavailable-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #f4f6fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appointment-unavailable-icon .material-symbols-outlined {
    color: #6b778d;
    font-size: 1.9rem;
    line-height: 1;
}

.appointment-unavailable-copy {
    min-width: 0;
}

.appointment-unavailable-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.06rem;
    line-height: 1.2;
}

.appointment-unavailable-copy p {
    margin: 0.24rem 0 0;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.35;
}

.appointment-status-list {
    display: grid;
    gap: 0.76rem;
}

.appointment-status-card {
    position: relative;
    min-height: 78px;
    padding: 0.92rem 1.1rem 0.92rem 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-settings-shell .appointment-status-card {
    overflow: visible;
}

.appointment-status-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--appointment-status-color, #5f56ff);
}

.appointment-status-main {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-width: 0;
}

.appointment-status-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f4f6fa;
    border: 1px solid #eceff5;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appointment-status-icon .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointment-status-main h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

.appointment-status-lock {
    color: #a1a8b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appointment-status-lock .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointment-status-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-status-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-status-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

body.has-appointment-status-modal {
    overflow: hidden;
}

.appointment-status-modal {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(14, 18, 26, 0.3);
    backdrop-filter: blur(1px);
}

.appointment-status-modal.is-open {
    display: flex;
}

.appointment-status-dialog {
    width: min(640px, 100%);
    border: 1px solid #d8dde7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 42px rgba(15, 20, 30, 0.22);
    position: relative;
}

.appointment-status-close {
    position: absolute;
    top: 0.7rem;
    right: 0.72rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1f2633;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-status-form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.2rem 1.1rem;
}

.appointment-status-form h2 {
    margin: 0;
    color: #111827;
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.appointment-status-field,
.appointment-status-color-field {
    display: grid;
    gap: 0.55rem;
}

.appointment-status-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.appointment-status-field-head label,
.appointment-status-color-field label {
    margin: 0;
    color: #111827;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-status-field-head span {
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 700;
}

.appointment-status-name-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.5rem;
}

.appointment-status-icon-picker {
    position: relative;
}

.appointment-status-icon-picker summary {
    width: 52px;
    min-height: 46px;
    border: 1px solid #d2d6df;
    border-radius: 11px;
    background: #ffffff;
    color: #1b2130;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
}

.appointment-status-icon-picker summary::-webkit-details-marker {
    display: none;
}

.appointment-status-icon-picker[open] summary {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.appointment-status-icon-picker .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointment-status-icon-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 260px;
    border: 1px solid #d9dde5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(19, 24, 34, 0.14);
    padding: 0.45rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.38rem;
    z-index: 25;
}

.appointment-status-icon-dropdown button {
    min-height: 40px;
    border: 1px solid #dde3ee;
    border-radius: 10px;
    background: #ffffff;
    color: #162131;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointment-status-icon-dropdown button:hover {
    background: #f3f6fb;
}

.appointment-status-icon-dropdown button.is-selected {
    border-color: #6d5ef8;
    box-shadow: 0 0 0 1px rgba(109, 94, 248, 0.18);
    background: #f6f4ff;
}

.appointment-status-name-row input[type="text"] {
    min-height: 46px;
}

.appointment-status-color-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.appointment-status-color-option {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.appointment-status-color-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-status-color-option span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--appointment-status-color, #5f56ff);
    display: block;
}

.appointment-status-color-option.is-selected span,
.appointment-status-color-option input[type="radio"]:checked + span {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #5f56ff;
}

.appointment-status-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.appointment-closed-list {
    display: grid;
    gap: 0.8rem;
}

.appointment-closed-card {
    padding: 1rem 1.2rem;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-settings-shell .appointment-closed-card {
    overflow: visible;
}

.appointment-closed-main {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.appointment-closed-main .appointment-closed-date {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.appointment-closed-main .appointment-closed-name {
    margin: 0;
    color: #5c667a;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.35;
}

.appointment-closed-main .appointment-closed-scope {
    margin: 0;
    display: block;
    color: #667085;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.4;
}

.appointment-closed-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-closed-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-closed-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.appointment-closed-empty-card {
    min-height: 460px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
}

.appointment-closed-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(160deg, #4f7ff2, #8b5cf6 58%, #c084fc);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(111, 82, 235, 0.2);
}

.appointment-closed-empty-icon .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.appointment-closed-empty-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1.7rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.appointment-closed-empty-card p {
    max-width: 660px;
    margin: 0;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.45;
}

body.has-appointment-closed-modal {
    overflow: hidden;
}

.appointment-closed-modal {
    position: fixed;
    inset: 0;
    z-index: 1710;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(14, 18, 26, 0.3);
    backdrop-filter: blur(1px);
}

.appointment-closed-modal.is-open {
    display: flex;
}

.appointment-closed-dialog {
    width: min(700px, 100%);
    border: 1px solid #d8dde7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 42px rgba(15, 20, 30, 0.22);
    position: relative;
}

.appointment-closed-close {
    position: absolute;
    top: 0.7rem;
    right: 0.72rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1f2633;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-closed-form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.2rem 1.1rem;
}

.appointment-closed-form h2 {
    margin: 0;
    color: #111827;
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.appointment-closed-range {
    display: grid;
    gap: 0.42rem;
}

.appointment-closed-range-title {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.appointment-closed-range-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.appointment-closed-range-grid .form-group {
    margin: 0;
}

.appointment-closed-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.appointment-cancel-list {
    display: grid;
    gap: 0.85rem;
}

.appointment-cancel-card {
    padding: 1rem 1.35rem;
    min-height: 84px;
    display: flex;
    align-items: center;
}

.appointment-settings-shell .appointment-cancel-card {
    overflow: visible;
}

.appointment-cancel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
}

.appointment-cancel-row .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-cancel-row .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-cancel-row .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.appointment-cancel-row h3 {
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    line-height: 1.2;
}

.appointment-cancel-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a1a8b5;
}

.appointment-cancel-lock .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointment-resources-search-card {
    padding: 0.9rem 1rem;
}

.appointment-resources-search {
    max-width: 270px;
}

.appointment-resources-group {
    display: grid;
    gap: 0.75rem;
}

.appointment-resources-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-resources-group-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.22rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-resources-stack {
    display: grid;
    gap: 0.8rem;
}

.appointment-resource-card {
    padding: 1.05rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.appointment-settings-shell .appointment-resource-card {
    overflow: visible;
}

.appointment-resource-card .service-catalog-card-menu {
    position: relative;
    z-index: 5;
}

.appointment-resource-card .service-catalog-card-menu[open] {
    z-index: 40;
}

.appointment-resource-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.appointment-resource-icon {
    width: 52px;
    height: 48px;
    border-radius: 10px;
    background: #f1e5c4;
    border: 1px solid #eedeb6;
    color: #9c7024;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appointment-resource-icon .material-symbols-outlined {
    font-size: 1.45rem;
    line-height: 1;
}

.appointment-resource-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.06rem;
    line-height: 1.2;
}

.appointment-resource-empty-copy {
    margin: 0;
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.45;
}

.appointment-resource-empty-card {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.15rem;
}

.appointment-resource-empty-card .appointment-resource-empty-copy {
    text-align: center;
}

.appointment-resource-editor-layout {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 1.05rem;
    align-items: start;
}

.appointment-resource-editor-side {
    padding: 0.85rem;
}

.appointment-resource-side-nav {
    display: grid;
    gap: 0.5rem;
}

.appointment-resource-side-nav a {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #13233a;
    display: inline-flex;
    align-items: center;
    padding: 0.66rem 0.85rem;
    font-size: 0.91rem;
    font-weight: 700;
    text-decoration: none;
}

.appointment-resource-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
}

.appointment-resource-editor-card {
    padding: 1.3rem 1.45rem;
}

.appointment-resource-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.34rem;
}

.appointment-resource-field-head em {
    color: #6b7280;
    font-style: normal;
    font-size: 0.88rem;
    font-weight: 700;
}

.appointment-resource-field-head small {
    color: #6b7280;
    font-size: 0.86rem;
    font-weight: 600;
}

.appointment-resource-color-section {
    margin-top: 0.95rem;
}

.appointment-resource-color-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-resource-color-section p {
    margin: 0.34rem 0 0.85rem;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.45;
}

.appointment-resource-color-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.appointment-resource-color-option {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
}

.appointment-resource-color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-resource-color-option span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--resource-color, #8ecfee);
    border: 2px solid transparent;
    display: block;
}

.appointment-resource-color-option.is-selected span,
.appointment-resource-color-option input:checked + span {
    border-color: #fff;
    box-shadow: 0 0 0 2px #6d5ef8;
}

body.has-appointment-resource-type-modal {
    overflow: hidden;
}

.appointment-resource-type-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.3rem;
    background: rgba(15, 19, 27, 0.3);
    z-index: 122;
}

.appointment-resource-type-modal.is-open {
    display: flex;
}

.appointment-resource-type-dialog {
    width: min(760px, 100%);
    max-height: calc(100vh - 2.6rem);
    overflow: auto;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 52px rgba(11, 17, 28, 0.22);
    position: relative;
}

.appointment-resource-type-close {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #232731;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-resource-type-form {
    padding: 2.05rem 2.15rem 1.9rem;
    display: grid;
    gap: 1.15rem;
}

.appointment-resource-type-form h2 {
    margin: 0 0 0.2rem;
    color: #111827;
    font-size: clamp(2.05rem, 2.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.appointment-resource-type-field {
    display: grid;
    gap: 0.5rem;
}

.appointment-resource-type-field label {
    color: #141b27;
    font-size: 0.96rem;
    font-weight: 700;
}

.appointment-resource-type-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-resource-type-field-head span {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 700;
}

.appointment-resource-type-field-head small {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
}

.appointment-resource-type-name-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.appointment-resource-type-name-row input,
.appointment-resource-type-field textarea {
    width: 100%;
    border: 1px solid #d2d6df;
    border-radius: 11px;
    background: #ffffff;
    color: #161d2a;
    font-size: 0.98rem;
    font-weight: 600;
}

.appointment-resource-type-name-row input {
    min-height: 50px;
    padding: 0 0.95rem;
}

.appointment-resource-type-field textarea {
    min-height: 122px;
    resize: vertical;
    padding: 0.85rem 0.95rem;
}

.appointment-resource-type-name-row input::placeholder,
.appointment-resource-type-field textarea::placeholder {
    color: #b3b8c1;
}

.appointment-resource-type-name-row input:focus,
.appointment-resource-type-field textarea:focus {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.appointment-resource-type-icon-picker {
    position: relative;
}

.appointment-resource-type-icon-picker summary {
    width: 48px;
    height: 50px;
    border: 1px solid #d2d6df;
    border-radius: 11px;
    background: #ffffff;
    color: #1b2130;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
}

.appointment-resource-type-icon-picker summary::-webkit-details-marker {
    display: none;
}

.appointment-resource-type-icon-picker[open] summary {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.appointment-resource-type-icon-picker .material-symbols-outlined {
    font-size: 1.35rem;
    line-height: 1;
}

.appointment-resource-type-icon-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 230px;
    border: 1px solid #d9dde5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(19, 24, 34, 0.14);
    padding: 0.45rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
    z-index: 20;
}

.appointment-resource-type-icon-dropdown button {
    min-height: 40px;
    border: 1px solid #dde3ee;
    border-radius: 10px;
    background: #ffffff;
    color: #162131;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointment-resource-type-icon-dropdown button:hover {
    background: #f3f6fb;
}

.appointment-resource-type-icon-dropdown button.is-selected {
    border-color: #6d5ef8;
    box-shadow: 0 0 0 1px rgba(109, 94, 248, 0.18);
    background: #f6f4ff;
}

.appointment-resource-type-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.35rem;
}

.appointment-resource-type-submit {
    min-width: 92px;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: #0f1014;
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 800;
    cursor: pointer;
}

.appointment-resource-type-submit:disabled {
    background: #abacb1;
    color: #ffffff;
    cursor: not-allowed;
}

.appointment-settings-note {
    margin-top: 1.3rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e3e6ee;
    border-radius: 14px;
    background: #fafbfc;
    color: #111827;
    font-size: 0.84rem;
    line-height: 1.55;
}

.appointment-settings-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    margin-top: 1.1rem;
}

.appointment-settings-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.7rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid #e3e6ee;
    border-radius: 14px;
    background: #fafbfc;
}

.appointment-settings-check input[type="checkbox"] {
    margin: 0.15rem 0 0;
}

.appointment-settings-check span {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-settings-check small {
    grid-column: 2 / -1;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
}

.appointment-settings-list {
    display: grid;
    gap: 0.8rem;
}

.appointment-settings-row {
    display: grid;
    gap: 0.16rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e5e8ef;
    border-radius: 14px;
    background: #fafbfc;
}

.appointment-settings-row strong {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-settings-row span {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.appointment-settings-empty {
    padding: 1rem 1.05rem;
    border: 1px dashed #d5dae4;
    border-radius: 14px;
    color: #667085;
    font-size: 0.83rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.8);
}

.appointment-settings-form-copy {
    margin: 0 0 0.45rem;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
}

.appointment-settings-waitlist-form {
    display: grid;
    gap: 1.25rem;
}

.appointment-settings-form-actions {
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.appointment-settings-block {
    display: grid;
    gap: 0.72rem;
    border: 0;
    outline: 0;
    background: transparent;
}

.appointment-settings-block-tight {
    gap: 0.65rem;
}

.appointment-settings-hidden {
    display: none !important;
}

.appointment-settings-block h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-settings-block p {
    margin: -0.18rem 0 0;
    color: #667085;
    font-size: 0.81rem;
    line-height: 1.45;
}

.appointment-settings-choice-grid,
.appointment-settings-radio-stack {
    display: grid;
    gap: 0.9rem;
}

.appointment-settings-choice,
.appointment-settings-radio {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.8rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid #d8dde7;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.appointment-settings-choice input,
.appointment-settings-radio input {
    margin: 0.25rem 0 0;
}

.appointment-settings-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-settings-choice:has(input:checked),
.appointment-settings-radio:has(input:checked) {
    border-color: #6358e7;
    box-shadow: 0 0 0 1px rgba(99, 88, 231, 0.18);
    background: #ffffff;
}

.appointment-settings-choice-icon {
    color: #1f2937;
    font-size: 1.35rem;
    line-height: 1;
}

.appointment-settings-choice-copy,
.appointment-settings-radio-copy,
.appointment-settings-checkbox-copy {
    display: grid;
    gap: 0.1rem;
}

.appointment-settings-choice-copy strong,
.appointment-settings-radio-copy strong,
.appointment-settings-checkbox-copy strong {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.35;
}

.appointment-settings-choice-copy small,
.appointment-settings-radio-copy small,
.appointment-settings-checkbox-copy small {
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
}

.appointment-settings-radio {
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.65rem;
    padding: 0.12rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.appointment-settings-radio:has(input:checked) {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.appointment-settings-radio input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: #6358e7;
}

.appointment-settings-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 0.85rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid #efd58e;
    border-radius: 14px;
    background: #fbf3d8;
}

.appointment-settings-inline-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 0.75rem;
    align-items: start;
    padding: 0.85rem 0.95rem;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    background: #f6f7f8;
}

.appointment-settings-inline-note .material-symbols-outlined {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1;
}

.appointment-settings-inline-note p {
    margin: 0;
    color: #374151;
    font-size: 0.82rem;
    line-height: 1.5;
}

.appointment-settings-alert .material-symbols-outlined {
    color: #c96810;
    font-size: 1.2rem;
    line-height: 1;
}

.appointment-settings-alert p {
    margin: 0;
    color: #111827;
    font-size: 0.82rem;
    line-height: 1.55;
}

.appointment-settings-alert a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.appointment-settings-alert a::after {
    content: '\2192';
    font-size: 0.95rem;
}

.appointment-settings-divider {
    height: 1px;
    background: #e5e8ef;
    margin: 0.1rem 0 0;
}

.appointment-settings-checkbox-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.8rem;
    align-items: start;
}

.appointment-settings-checkbox-row input[type="checkbox"] {
    margin: 0.28rem 0 0;
    accent-color: #6358e7;
}

#waitlist-settings-form > .appointment-settings-block {
    border: 0;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .appointment-settings-check-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-settings-editor-card {
        max-width: none;
    }

    .appointment-settings-summary-card {
        max-width: none;
        padding: 1.2rem;
    }

    .appointment-settings-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-online-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-payment-card {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-tax-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-unavailable-row {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-cancel-row {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-status-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-closed-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-status-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .appointment-closed-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .appointment-unavailable-row .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .appointment-cancel-row .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .sales-payment-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .sales-tax-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .sales-service-charge-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .team-timeoff-card {
        flex-direction: column;
        align-items: stretch;
    }

    .team-timeoff-header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .team-timeoff-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .team-timeoff-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-timeoff-modal-card {
        padding: 1.5rem 1.25rem;
    }

    .team-timeclock-proximity-row {
        flex-direction: column;
        align-items: stretch;
    }

    .team-timeclock-proximity-row .sales-tips-switch {
        align-self: flex-start;
    }

    .team-timeclock-editor-head h2 {
        font-size: 1rem;
    }

    .team-payroll-editor-intro h2 {
        font-size: 1.3rem;
    }

    .team-payroll-section h3 {
        font-size: 1.02rem;
    }

    .team-payroll-form-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .team-payroll-calendar-card {
        max-width: none;
    }

    .team-payroll-summary-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.78rem;
    }

    .team-commissions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }

    .team-commissions-row .sales-tips-switch {
        align-self: flex-start;
    }

    .team-commissions-copy {
        max-width: none;
    }

    .team-pin-summary-head {
        flex-direction: column;
        align-items: stretch;
    }

    .team-pin-summary-actions {
        justify-content: flex-start;
    }

    .team-pin-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-pin-wizard-top {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.6rem;
    }

    .team-pin-top-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .team-pin-wizard-body > h2 {
        font-size: 1.55rem;
    }

    .team-pin-minutes-row {
        margin-left: 0;
        max-width: none;
    }

    .team-pin-large-preview {
        margin-left: 0;
    }

    .team-pin-wizard-section {
        padding: 0;
    }

    .team-pin-style-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-pin-large-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-pin-members-toolbar {
        align-items: stretch;
    }

    .team-pin-members-search {
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .team-pin-members-table {
        min-width: 680px;
    }

    .team-pin-confirm {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        min-height: 0;
        gap: 1rem;
    }

    .team-pin-confirm-list li {
        text-align: left;
    }

    .team-permissions-matrix-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-permissions-matrix-head .btn {
        align-self: flex-start;
    }

    .team-permissions-matrix-table {
        min-width: 720px;
    }

    .sales-service-charge-price-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-gift-config-status {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-gift-toggle {
        align-self: flex-start;
    }

    .sales-gift-value-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-gift-value-remove {
        justify-self: flex-end;
    }

    .sales-receipt-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-tips-toggle-row,
    .sales-tips-summary-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-tips-switch {
        align-self: flex-start;
    }

    .sales-tips-summary-row .business-settings-edit-btn {
        align-self: flex-start;
    }

    .sales-tips-value-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-tips-value-remove {
        justify-self: flex-end;
    }

    .sales-receipt-numbering-search.services-catalog-search-box {
        max-width: none;
        flex: 1 1 auto;
    }

    .sales-receipt-numbering-head {
        display: none;
    }

    .sales-receipt-numbering-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.62rem;
        align-items: stretch;
    }

    .sales-receipt-numbering-check-col {
        display: none;
    }

    .appointment-resource-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-resources-group-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .appointment-resources-search {
        max-width: none;
    }

    .appointment-resource-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-resource-card .service-catalog-card-menu {
        align-self: flex-end;
    }

    .appointment-resource-type-form {
        padding: 1.2rem 1.1rem 1.15rem;
    }

    .appointment-resource-type-name-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-resource-type-icon-picker summary {
        width: 100%;
    }

    .appointment-resource-type-icon-dropdown {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .appointment-status-form {
        padding: 1.1rem 1rem 1rem;
    }

    .appointment-status-name-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-status-icon-picker summary {
        width: 100%;
    }

    .appointment-status-icon-dropdown {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .appointment-closed-form {
        padding: 1.1rem 1rem 1rem;
    }

    .appointment-closed-range-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-closed-empty-card {
        min-height: 320px;
    }

    .appointment-closed-empty-card h3 {
        font-size: 1.35rem;
    }
}