/* Clinc
   Clean interface layer. This file intentionally loads after app.css and owns
   the visual language: minimal, compact, practical and premium. */

:root {
    --erp-bg: #f6f8f8;
    --erp-surface: #ffffff;
    --erp-surface-soft: #fbfcfd;
    --erp-line: #e5eaf1;
    --erp-line-strong: #d5dde8;
    --erp-text: #111827;
    --erp-muted: #667085;
    --erp-subtle: #98a2b3;
    --erp-primary: #17201f;
    --erp-accent: #2f6fed;
    --erp-success: #12a594;
    --erp-danger: #e6536b;
    --erp-warning: #c56b22;
    --erp-radius-sm: 10px;
    --erp-radius: 14px;
    --erp-radius-lg: 18px;
    --erp-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 28px rgba(17, 24, 39, 0.045);
    --erp-shadow-strong: 0 1px 2px rgba(17, 24, 39, 0.06), 0 20px 44px rgba(17, 24, 39, 0.075);
    --erp-sidebar: 232px;
    --erp-sidebar-closed: 72px;
    --erp-focus: 0 0 0 3px rgba(91, 92, 246, 0.13);
}

/* 2026-06-25 - SaaS admin task calendar pro view. */
body.is-authenticated .task-calendar-pro {
    display: grid !important;
    gap: 16px !important;
}

body.is-authenticated .task-calendar-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    border-color: rgba(199, 184, 255, .78) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(124, 92, 255, .13), transparent 18rem),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 255, .94)) !important;
}

body.is-authenticated .task-calendar-hero h2 {
    margin: 4px 0 0 !important;
    color: #10172f !important;
    font-size: clamp(2.05rem, 3vw, 3.25rem) !important;
    font-weight: 950 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
}

body.is-authenticated .task-calendar-hero p:not(.eyebrow) {
    max-width: 660px !important;
    margin: 10px 0 0 !important;
    color: #63708d !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
}

body.is-authenticated .task-calendar-controls,
body.is-authenticated .task-calendar-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.is-authenticated .task-calendar-controls .button,
body.is-authenticated .task-calendar-controls .icon-button,
body.is-authenticated .task-calendar-controls .segmented-control a {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 15px !important;
    border-color: #d9d1ff !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #151a34 !important;
    font-size: .88rem !important;
    font-weight: 850 !important;
    box-shadow: 0 10px 22px rgba(27, 32, 69, .04) !important;
}

body.is-authenticated .task-calendar-controls .button.primary,
body.is-authenticated .task-calendar-controls .segmented-control a.active {
    border-color: transparent !important;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 34px rgba(101, 71, 255, .24) !important;
}

body.is-authenticated .task-calendar-segments {
    padding: 4px !important;
    border: 1px solid #e2ddff !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

body.is-authenticated .task-calendar-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.is-authenticated .task-calendar-kpis article {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    min-height: 104px !important;
    padding: 18px 72px 16px 18px !important;
    overflow: hidden !important;
    border-color: rgba(217, 209, 255, .82) !important;
    background: rgba(255, 255, 255, .94) !important;
}

body.is-authenticated .task-calendar-kpis article::before {
    content: "" !important;
    position: absolute !important;
    left: auto !important;
    right: 18px !important;
    top: 18px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    background: #ede9fe !important;
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .12) !important;
}

body.is-authenticated .task-calendar-kpis article::after {
    content: "" !important;
    position: absolute !important;
    left: auto !important;
    right: 36px !important;
    top: 36px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #6547ff !important;
}

body.is-authenticated .task-calendar-kpis article.is-rose::before { background: #ffe4ee !important; }
body.is-authenticated .task-calendar-kpis article.is-rose::after { background: #ef476f !important; }
body.is-authenticated .task-calendar-kpis article.is-amber::before { background: #fff3d1 !important; }
body.is-authenticated .task-calendar-kpis article.is-amber::after { background: #f59e0b !important; }
body.is-authenticated .task-calendar-kpis article.is-purple::before { background: #e9e5ff !important; }

body.is-authenticated .task-calendar-kpis span {
    color: #64708f !important;
    font-size: .8rem !important;
    font-weight: 850 !important;
}

body.is-authenticated .task-calendar-kpis strong {
    display: block !important;
    margin-top: 4px !important;
    color: #10172f !important;
    font-size: 2.05rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body.is-authenticated .task-calendar-kpis small {
    display: block !important;
    margin-top: 8px !important;
    color: #6f7893 !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
}

body.is-authenticated .task-calendar-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    gap: 14px !important;
    align-items: start !important;
}

body.is-authenticated .task-calendar-board {
    min-width: 0 !important;
    padding: 16px !important;
    border-color: rgba(217, 209, 255, .82) !important;
    background: rgba(255, 255, 255, .96) !important;
}

body.is-authenticated .task-calendar-weekdays,
body.is-authenticated .task-calendar-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.is-authenticated .task-calendar-weekdays {
    margin-bottom: 10px !important;
}

body.is-authenticated .task-calendar-weekdays span {
    padding: 0 8px !important;
    color: #75819c !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

body.is-authenticated .task-calendar-day-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(74px, 1fr) !important;
    min-height: 132px !important;
    padding: 10px !important;
    border: 1px solid #e4e8f6 !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

body.is-authenticated .task-calendar-day-card:hover {
    transform: translateY(-2px) !important;
    border-color: #c7b8ff !important;
    box-shadow: 0 18px 42px rgba(101, 71, 255, .11) !important;
}

body.is-authenticated .task-calendar-day-card.is-muted {
    background: #f7f8fd !important;
    opacity: .68 !important;
}

body.is-authenticated .task-calendar-day-card.is-today {
    border-color: #a78bfa !important;
    background: radial-gradient(circle at 100% 0%, rgba(124, 92, 255, .14), transparent 8rem), #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .16), 0 18px 40px rgba(101, 71, 255, .12) !important;
}

body.is-authenticated .task-calendar-day-card header,
body.is-authenticated .task-week-column header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
}

body.is-authenticated .task-calendar-day-card header a,
body.is-authenticated .task-week-column header a {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
}

body.is-authenticated .task-calendar-day-card small,
body.is-authenticated .task-week-column header small {
    color: #6f7893 !important;
    font-size: .74rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

body.is-authenticated .task-calendar-day-card header strong,
body.is-authenticated .task-week-column header strong {
    color: #10172f !important;
    font-size: 1.16rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body.is-authenticated .task-calendar-day-card header button,
body.is-authenticated .task-week-column header button {
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid #d9d1ff !important;
    border-radius: 12px !important;
    background: #f5f2ff !important;
    color: #5b35ef !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body.is-authenticated .task-calendar-day-list,
body.is-authenticated .task-week-stack,
body.is-authenticated .task-focus-list,
body.is-authenticated .task-side-list {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
}

body.is-authenticated .task-chip,
body.is-authenticated .task-focus-card {
    position: relative !important;
    display: grid !important;
    gap: 6px !important;
    padding: 9px 9px 9px 11px !important;
    border: 1px solid #ded8ff !important;
    border-left: 4px solid #6547ff !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #f6f3ff 0%, #eef4ff 100%) !important;
    box-shadow: 0 10px 22px rgba(101, 71, 255, .08) !important;
}

body.is-authenticated .task-chip.is-high,
body.is-authenticated .task-focus-card.is-high,
body.is-authenticated .task-side-list article.is-high {
    border-left-color: #ef476f !important;
}

body.is-authenticated .task-chip.is-low,
body.is-authenticated .task-focus-card.is-low,
body.is-authenticated .task-side-list article.is-low {
    border-left-color: #3b82f6 !important;
}

body.is-authenticated .task-chip a,
body.is-authenticated .task-focus-card a {
    color: inherit !important;
    text-decoration: none !important;
}

body.is-authenticated .task-chip strong,
body.is-authenticated .task-focus-card strong {
    display: block !important;
    overflow: hidden !important;
    color: #111830 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis !important;
}

body.is-authenticated .task-chip small,
body.is-authenticated .task-focus-card small {
    display: block !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    color: #65708d !important;
    font-size: .75rem !important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.is-authenticated .task-chip form {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
}

body.is-authenticated .task-chip form button,
body.is-authenticated .task-focus-actions button,
body.is-authenticated .task-side-list form button {
    min-height: 26px !important;
    padding: 0 9px !important;
    border: 1px solid #d8d1ff !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #4f35dc !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
}

body.is-authenticated .task-chip:has(form) strong,
body.is-authenticated .task-chip:has(form) small {
    max-width: calc(100% - 58px) !important;
}

body.is-authenticated .task-empty-add,
body.is-authenticated .task-empty-state {
    width: 100% !important;
    min-height: 48px !important;
    padding: 8px !important;
    border: 1px dashed #c7b8ff !important;
    border-radius: 16px !important;
    background: #fbfaff !important;
    color: #6857c7 !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    text-align: center !important;
}

body.is-authenticated .task-more-link {
    justify-self: start !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #ede9fe !important;
    color: #4f35dc !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.is-authenticated .task-calendar-week-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
}

body.is-authenticated .task-week-column {
    min-height: 540px !important;
    padding: 14px !important;
    border: 1px solid #e4e8f6 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

body.is-authenticated .task-week-column.is-today {
    border-color: #a78bfa !important;
    background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%) !important;
}

body.is-authenticated .task-week-column header span {
    display: block !important;
    margin-left: 4px !important;
    color: #6f7893 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
}

body.is-authenticated .task-focus-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 16px !important;
    border-radius: 20px !important;
}

body.is-authenticated .task-focus-card span {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 8px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(101, 71, 255, .10) !important;
    color: #4f35dc !important;
    font-size: .74rem !important;
    font-weight: 900 !important;
}

body.is-authenticated .task-focus-card.is-high span {
    background: rgba(239, 71, 111, .10) !important;
    color: #b91c4c !important;
}

body.is-authenticated .task-focus-card.is-low span {
    background: rgba(59, 130, 246, .10) !important;
    color: #1d4ed8 !important;
}

body.is-authenticated .task-focus-card p {
    margin: 8px 0 0 !important;
    color: #5f6c87 !important;
    font-size: .9rem !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
}

body.is-authenticated .task-focus-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.is-authenticated .task-focus-actions a {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border: 1px solid #d8d1ff !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #4f35dc !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
}

body.is-authenticated .task-day-focus {
    display: grid !important;
    gap: 16px !important;
}

body.is-authenticated .task-day-focus-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px !important;
    border: 1px solid #e4e8f6 !important;
    border-radius: 22px !important;
    background: #fbfcff !important;
}

body.is-authenticated .task-day-focus-head h3 {
    margin: 2px 0 !important;
    color: #10172f !important;
    font-size: 1.55rem !important;
    font-weight: 950 !important;
    text-transform: capitalize !important;
}

body.is-authenticated .task-day-focus-head span {
    color: #65708d !important;
    font-size: .9rem !important;
    font-weight: 750 !important;
}

body.is-authenticated .task-calendar-empty {
    display: grid !important;
    justify-items: start !important;
    gap: 8px !important;
    padding: 24px !important;
    border: 1px dashed #c7b8ff !important;
    border-radius: 24px !important;
    background: #fbfaff !important;
}

body.is-authenticated .task-calendar-empty strong {
    color: #111830 !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

body.is-authenticated .task-calendar-empty p {
    margin: 0 !important;
    color: #65708d !important;
    font-weight: 650 !important;
}

body.is-authenticated .task-calendar-side {
    display: grid !important;
    gap: 14px !important;
    position: sticky !important;
    top: 18px !important;
}

body.is-authenticated .task-side-card {
    padding: 18px !important;
    border-color: rgba(217, 209, 255, .82) !important;
    background: rgba(255, 255, 255, .96) !important;
}

body.is-authenticated .task-side-date {
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
    width: 116px !important;
    min-height: 116px !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #ede9fe, #eef4ff) !important;
    color: #4f35dc !important;
}

body.is-authenticated .task-side-date span,
body.is-authenticated .task-side-date small {
    color: #665f8f !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

body.is-authenticated .task-side-date strong {
    color: #3722b5 !important;
    font-size: 2.7rem !important;
    font-weight: 950 !important;
    line-height: .95 !important;
}

body.is-authenticated .task-side-card h3 {
    margin: 0 0 6px !important;
    color: #111830 !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

body.is-authenticated .task-side-card p {
    margin: 0 0 14px !important;
    color: #65708d !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
}

body.is-authenticated .task-side-list article {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 10px 10px 12px !important;
    border: 1px solid #e4e8f6 !important;
    border-left: 4px solid #6547ff !important;
    border-radius: 16px !important;
    background: #fbfcff !important;
}

body.is-authenticated .task-side-list strong {
    display: block !important;
    overflow: hidden !important;
    color: #111830 !important;
    font-size: .88rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.is-authenticated .task-side-list small {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #6f7893 !important;
    font-size: .74rem !important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.is-authenticated .task-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.is-authenticated .task-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 10px !important;
    border: 1px solid #e4e8f6 !important;
    border-radius: 999px !important;
    color: #4b5875 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
}

body.is-authenticated .task-legend span::before {
    content: "" !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #6547ff !important;
}

body.is-authenticated .task-legend .is-high::before { background: #ef476f !important; }
body.is-authenticated .task-legend .is-low::before { background: #3b82f6 !important; }

body.is-authenticated .task-calendar-modal-card {
    width: min(100%, 720px) !important;
}

body.is-authenticated .task-calendar-modal-card h2 {
    margin: 4px 0 0 !important;
    color: #111830 !important;
    font-size: 1.8rem !important;
    font-weight: 950 !important;
}

@media (max-width: 1280px) {
    body.is-authenticated .task-calendar-hero,
    body.is-authenticated .task-calendar-workspace {
        grid-template-columns: 1fr !important;
    }

    body.is-authenticated .task-calendar-controls {
        justify-content: flex-start !important;
    }

    body.is-authenticated .task-calendar-side {
        position: static !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    body.is-authenticated .task-calendar-kpis,
    body.is-authenticated .task-calendar-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.is-authenticated .task-calendar-month-grid,
    body.is-authenticated .task-calendar-weekdays {
        grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body.is-authenticated .task-calendar-hero,
    body.is-authenticated .task-calendar-board,
    body.is-authenticated .task-side-card {
        padding: 14px !important;
    }

    body.is-authenticated .task-calendar-kpis,
    body.is-authenticated .task-calendar-side,
    body.is-authenticated .task-focus-card,
    body.is-authenticated .task-day-focus-head {
        grid-template-columns: 1fr !important;
    }

    body.is-authenticated .task-calendar-month-grid,
    body.is-authenticated .task-calendar-weekdays {
        grid-template-columns: 1fr !important;
    }

    body.is-authenticated .task-focus-actions {
        justify-content: flex-start !important;
    }
}


.main:has(.calendar-focus-shell) > .topbar {
    display: none !important;
}

.main:has(.calendar-focus-shell) {
    min-height: 100vh !important;
    padding: 18px 18px 22px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(20, 184, 166, .10), transparent 28rem),
        linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%) !important;
}

.calendar-focus-shell {
    max-width: 1720px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.calendar-focus-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto auto !important;
    align-items: end !important;
    gap: 16px !important;
    min-height: auto !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.calendar-breadcrumb {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.calendar-breadcrumb span {
    color: #94a3b8 !important;
}

.calendar-focus-title {
    display: block !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
}

.calendar-subtitle {
    margin: 7px 0 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 650 !important;
}

.calendar-focus-toolbar h2:not(.calendar-focus-title),
.calendar-hero-title,
.calendar-focus-toolbar .eyebrow {
    display: none !important;
}

.calendar-nav,
.calendar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.calendar-date-pill,
.calendar-focus-toolbar .button,
.calendar-focus-toolbar .icon-button,
.calendar-focus-toolbar .segmented-control a {
    min-height: 42px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #17213f !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
    font-weight: 850 !important;
}

.calendar-date-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
}

.calendar-focus-toolbar .button.primary {
    border-color: #4f46e5 !important;
    background: linear-gradient(135deg, #5b43f3, #6d4aff) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 28px rgba(79, 70, 229, .22) !important;
}

.calendar-focus-toolbar .segmented-control {
    display: inline-flex !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.calendar-focus-toolbar .segmented-control a {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.calendar-focus-toolbar .segmented-control a:first-child {
    border-radius: 10px 0 0 10px !important;
}

.calendar-focus-toolbar .segmented-control a:last-child {
    border-radius: 0 10px 10px 0 !important;
}

.calendar-focus-toolbar .segmented-control a.active {
    background: #ede9fe !important;
    color: #4f46e5 !important;
    border-color: #c4b5fd !important;
}

.calendar-filter-bar {
    display: block !important;
    padding: 14px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

.calendar-filter-bar .calendar-inline-filters {
    display: grid !important;
    grid-template-columns: 150px repeat(3, minmax(170px, 1fr)) minmax(220px, 1.1fr) auto auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.calendar-filter-bar label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.calendar-filter-bar input,
.calendar-filter-bar select {
    min-height: 42px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #17213f !important;
    padding: 0 13px !important;
}

.calendar-operations-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 18px !important;
}

.pro-calendar {
    --minute-height: 1.46px !important;
    overflow: auto !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .06) !important;
}

.pro-calendar-axis,
.pro-calendar-column,
.pro-calendar-corner,
.pro-calendar-column-head {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    min-height: 58px !important;
    padding: 12px 14px !important;
}

.pro-calendar-column-head strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.pro-calendar-column-head span,
.pro-calendar-axis-body span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.pro-calendar-lane {
    background:
        linear-gradient(to bottom, rgba(226, 232, 240, .92) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 60),
        linear-gradient(to bottom, rgba(226, 232, 240, .42) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 15),
        #ffffff !important;
}

.calendar-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--now-start) * var(--minute-height)) !important;
    z-index: 8 !important;
    border-top: 1px dashed #ef4444 !important;
    pointer-events: none !important;
}

.calendar-now-line span {
    position: absolute !important;
    left: -46px !important;
    top: -11px !important;
    min-width: 42px !important;
    border-radius: 8px !important;
    background: #ef4444 !important;
    color: #fff !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.pro-calendar .calendar-event {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-content: start !important;
    gap: 4px 8px !important;
    border-radius: 9px !important;
    border-left-width: 0 !important;
    padding: 10px !important;
    color: #111936 !important;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .08) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.pro-calendar .calendar-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 34px rgba(79, 70, 229, .16) !important;
}

.pro-calendar .calendar-event[data-status-code="scheduled"] {
    background: linear-gradient(135deg, #eef2ff, #f8f7ff) !important;
    border-color: #a5b4fc !important;
}

.pro-calendar .calendar-event[data-status-code="completed"] {
    background: linear-gradient(135deg, #eafaf0, #f7fff9) !important;
    border-color: #86efac !important;
}

.pro-calendar .calendar-event[data-status-code="cancelled"] {
    background: linear-gradient(135deg, #fff1f2, #fffafa) !important;
    border-color: #fda4af !important;
}

.pro-calendar .calendar-event[data-status-code="no_show"] {
    background: linear-gradient(135deg, #fff7ed, #fffaf4) !important;
    border-color: #fdba74 !important;
}

.pro-calendar .calendar-event .event-time {
    grid-column: 1 / -1 !important;
    display: inline-flex !important;
    width: max-content !important;
    border-radius: 999px !important;
    background: rgba(79, 70, 229, .10) !important;
    color: #3730a3 !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.pro-calendar .calendar-event strong {
    color: #111936 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.pro-calendar .calendar-event small {
    color: #475569 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.event-payment {
    justify-self: end !important;
    border-radius: 999px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.calendar-side-panel {
    top: 14px !important;
}

.calendar-side-card {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07) !important;
}

.calendar-side-actions {
    grid-template-columns: 1fr !important;
}

.calendar-side-actions .button {
    width: 100% !important;
}

.quick-appointment-panel {
    backdrop-filter: blur(12px) !important;
    background: rgba(15, 23, 42, .32) !important;
}

.quick-panel-card {
    width: min(760px, calc(100vw - 28px)) !important;
    border-radius: 22px !important;
    border: 1px solid #dbe4ef !important;
    background: #ffffff !important;
    box-shadow: 0 28px 78px rgba(15, 23, 42, .22) !important;
}

@media (max-width: 1320px) {
    .calendar-focus-toolbar,
    .calendar-filter-bar .calendar-inline-filters,
    .calendar-operations-layout {
        grid-template-columns: 1fr !important;
    }

    .calendar-nav,
    .calendar-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .calendar-side-panel {
        position: static !important;
        grid-template-columns: 1fr !important;
    }
}

/* 2026-06-11: operational calendar sidebar, tied to real appointment data. */
.calendar-operations-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.calendar-side-panel {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 18px;
}

.calendar-side-card {
    border: 1px solid color-mix(in srgb, var(--calendar-line, #dbe4ef) 85%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--calendar-surface, #ffffff) 94%, transparent);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    padding: 16px;
}

.calendar-side-head,
.calendar-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.calendar-side-head a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--calendar-line, #dbe4ef);
    border-radius: 10px;
    color: var(--calendar-text, #0f172a);
    text-decoration: none;
    background: #fff;
}

.calendar-side-head strong,
.calendar-side-title span {
    color: var(--calendar-text, #0f172a);
    font-weight: 900;
}

.calendar-side-title strong {
    border-radius: 999px;
    background: color-mix(in srgb, var(--vertical-accent, #14b8a6) 12%, #ffffff);
    color: var(--vertical-accent, #0f766e);
    font-size: 11px;
    font-weight: 900;
    padding: 6px 9px;
}

.mini-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.mini-month-grid span,
.mini-month-grid a {
    min-width: 0;
    min-height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--calendar-muted, #64748b);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.mini-month-weekdays {
    margin-bottom: 4px;
}

.mini-month-weekdays span {
    min-height: 22px;
    color: color-mix(in srgb, var(--calendar-muted, #64748b) 82%, transparent);
    font-size: 11px;
}

.mini-month-grid a:hover,
.mini-month-grid a.is-today {
    background: color-mix(in srgb, var(--vertical-accent, #14b8a6) 10%, #ffffff);
    color: var(--calendar-text, #0f172a);
}

.mini-month-grid a.is-selected {
    background: var(--vertical-accent, #14b8a6);
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--vertical-accent, #14b8a6) 26%, transparent);
}

.mini-month-grid a.is-muted {
    color: color-mix(in srgb, var(--calendar-muted, #64748b) 45%, transparent);
}

.appointment-detail-card h3 {
    margin: 0 0 12px;
    color: var(--calendar-text, #0f172a);
    font-size: 18px;
    font-weight: 950;
}

.appointment-detail-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.appointment-detail-card dl div {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.appointment-detail-card dt {
    color: var(--calendar-muted, #64748b);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.appointment-detail-card dd {
    min-width: 0;
    margin: 0;
    color: var(--calendar-text, #0f172a);
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.appointment-detail-card p {
    margin: 12px 0 0;
    border-top: 1px solid var(--calendar-line, #dbe4ef);
    padding-top: 12px;
    color: var(--calendar-muted, #64748b);
    font-size: 13px;
    line-height: 1.45;
}

.calendar-side-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.calendar-side-actions .button {
    justify-content: center;
    min-height: 38px;
}

.summary-dot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--calendar-muted, #64748b);
    font-size: 13px;
    font-weight: 800;
    padding: 7px 0;
}

.summary-dot-row span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.summary-dot-row strong {
    color: var(--calendar-text, #0f172a);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #6366f1;
}

.dot.is-confirmed { background: #6366f1; }
.dot.is-pending { background: #f59e0b; }
.dot.is-cancelled { background: #f43f5e; }
.dot.is-completed { background: #22c55e; }

@media (max-width: 1280px) {
    .calendar-operations-layout {
        grid-template-columns: 1fr;
    }

    .calendar-side-panel {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .calendar-side-panel,
    .calendar-side-actions {
        grid-template-columns: 1fr;
    }
}

/* Brand palette override. Source of truth for the ERP visual system. */
:root {
    --erp-bg: #f8fafc;
    --erp-surface: #ffffff;
    --erp-surface-soft: #f1f5f9;
    --erp-hover: #ecfdf5;
    --erp-line: #e2e8f0;
    --erp-line-strong: #cbd5e1;
    --erp-text: #0f172a;
    --erp-muted: #64748b;
    --erp-subtle: #94a3b8;
    --erp-primary: #0f766e;
    --erp-primary-hover: #115e59;
    --erp-primary-active: #134e4a;
    --erp-accent: #14b8a6;
    --erp-primary-soft: #99f6e4;
    --erp-secondary: #ccfbf1;
    --erp-success: #10b981;
    --erp-danger: #ef4444;
    --erp-warning: #f59e0b;
    --erp-sidebar-bg: #0f172a;
    --erp-sidebar-hover: #1e293b;
    --erp-sidebar-active: #134e4a;
    --erp-sidebar-text: #cbd5e1;
    --erp-focus: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    background: var(--erp-bg) !important;
}

body {
    margin: 0;
    color: var(--erp-text);
    background:
        radial-gradient(circle at 4% 0%, rgba(18, 165, 148, 0.08), transparent 28rem),
        radial-gradient(circle at 100% 0%, rgba(47, 111, 237, 0.06), transparent 30rem),
        var(--erp-bg) !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0 !important;
}

button,
input,
select,
textarea {
    font: inherit !important;
    letter-spacing: 0 !important;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    display: grid !important;
    grid-template-columns: var(--erp-sidebar) minmax(0, 1fr) !important;
    min-height: 100vh;
    transition: grid-template-columns 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-collapsed .app-shell {
    grid-template-columns: var(--erp-sidebar-closed) minmax(0, 1fr) !important;
}

.sidebar {
    position: sticky !important;
    top: 0;
    width: var(--erp-sidebar);
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--erp-line) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    padding: 18px 12px !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
    transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-collapsed .sidebar {
    width: var(--erp-sidebar-closed);
    padding: 16px 10px !important;
}

.brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 56px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    padding: 0 !important;
}

.sidebar-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 24px !important;
}

.brand:hover {
    background: transparent !important;
}

.brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #3f6df6, #13b8a6) !important;
    color: #fff;
    font-size: 14px;
    font-weight: 720;
    box-shadow: 0 12px 24px rgba(19, 184, 166, 0.14) !important;
}

.brand-title {
    color: var(--erp-text) !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    line-height: 1.1;
}

.brand-subtitle {
    margin-top: 3px;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 480 !important;
}

body.sidebar-collapsed .brand {
    width: 48px !important;
    min-height: 48px !important;
    justify-content: center !important;
}

body.sidebar-collapsed .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
}

body.sidebar-collapsed .brand > span:not(.brand-logo-mark) {
    display: none !important;
}

.sidebar-toggle {
    width: 100%;
    min-height: 34px !important;
    margin: 0 0 12px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius-sm) !important;
    background: var(--erp-surface) !important;
    color: #596579 !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    box-shadow: none !important;
    outline: none !important;
}

.sidebar-toggle:hover {
    border-color: var(--erp-line-strong) !important;
    transform: none !important;
}

.sidebar-toggle:focus-visible {
    box-shadow: var(--erp-focus) !important;
}

.sidebar-toggle-icon {
    display: inline-grid;
    place-items: center;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle-icon svg {
    width: 16px;
    height: 16px;
}

body.sidebar-collapsed .sidebar-toggle {
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
}

body.sidebar-collapsed .sidebar-toggle {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
}

body.sidebar-collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

body.sidebar-collapsed .sidebar-toggle-text {
    display: none !important;
}

.nav {
    display: grid !important;
    gap: 3px !important;
}

.nav-label {
    margin: 15px 10px 6px !important;
    color: var(--erp-subtle) !important;
    font-size: 9px !important;
    font-weight: 720 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase;
}

.nav a,
.nav-locked {
    min-height: 38px !important;
    display: flex !important;
    align-items: center;
    gap: 9px !important;
    border: 1px solid transparent !important;
    border-radius: var(--erp-radius-sm) !important;
    color: #4b5565 !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav a:hover {
    background: #f4f6f8 !important;
    color: var(--erp-text) !important;
    transform: none !important;
}

.nav a.active {
    border-color: #e3e7ff !important;
    background: #f0f2ff !important;
    color: #3730a3 !important;
    box-shadow: none !important;
}

.nav-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 9px !important;
    background: transparent !important;
    color: currentColor;
    font-size: 0 !important;
}

.nav a.active .nav-icon {
    background: #ffffff !important;
}

.nav-icon svg {
    width: 17px !important;
    height: 17px !important;
}

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav a small,
body.sidebar-collapsed .nav-locked small {
    display: none !important;
}

body.sidebar-collapsed .nav {
    justify-items: center;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 44px;
    min-height: 42px !important;
    justify-content: center;
    padding: 0 !important;
}

body.sidebar-collapsed .nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
}

.main {
    min-width: 0;
    width: 100%;
    max-width: none !important;
    padding: 20px clamp(18px, 2.2vw, 28px) !important;
    background: transparent !important;
}

.topbar {
    min-height: 68px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface) !important;
    padding: 14px 18px !important;
    box-shadow: var(--erp-shadow) !important;
}

.topbar h1 {
    margin: 0;
    color: var(--erp-text) !important;
    font-size: clamp(21px, 1.7vw, 27px) !important;
    font-weight: 720 !important;
    line-height: 1.12;
}

.eyebrow,
.metric-card span,
.chart-header span,
th,
.v2-kpi-strip span,
.v2-health-card > span {
    color: var(--erp-subtle) !important;
    font-size: 10px !important;
    font-weight: 680 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase;
}

.notes,
.metric-card small,
.chart-card small,
.control-list small,
.detail-list dt,
.v2-kpi-strip small {
    color: var(--erp-muted) !important;
    font-size: 13px !important;
    font-weight: 480 !important;
    line-height: 1.5;
}

.panel,
.metric-card,
.chart-card,
.builder-card,
.form-card,
.auth-panel,
.table-wrap,
.room-analytics-card,
.room-config-card,
.platform-service-card,
.control-list a,
.v2-kpi-strip article,
.auth-copy,
.auth-login-card {
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface) !important;
    box-shadow: var(--erp-shadow) !important;
}

.panel {
    padding: 18px !important;
}

.panel-heading {
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.panel-heading h2 {
    margin: 0;
    color: var(--erp-text) !important;
    font-size: clamp(18px, 1.35vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.16;
}

.metric-grid,
.v2-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) !important;
    gap: 12px !important;
}

.metric-card,
.v2-kpi-strip article {
    min-height: 100px !important;
    padding: 16px !important;
}

.metric-card strong,
.v2-kpi-strip strong {
    display: block;
    color: var(--erp-text) !important;
    font-size: clamp(25px, 2.2vw, 34px) !important;
    font-weight: 720 !important;
    line-height: 1.08;
}

.button,
.table-action,
.icon-button,
.segmented-control a,
.user-badge {
    min-height: 36px !important;
    border: 1px solid var(--erp-line-strong) !important;
    border-radius: var(--erp-radius-sm) !important;
    background: var(--erp-surface) !important;
    color: var(--erp-text) !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.button:hover,
.table-action:hover,
.icon-button:hover,
.segmented-control a:hover {
    border-color: #bfc8d6 !important;
    transform: none !important;
}

.button.primary,
.table-action.primary,
.segmented-control a.active {
    border-color: var(--erp-primary) !important;
    background: var(--erp-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.12) !important;
}

.button.compact,
.table-action,
.icon-button {
    min-height: 34px !important;
}

.user-menu {
    gap: 8px !important;
}

.user-badge {
    min-width: 170px !important;
    padding: 8px 12px !important;
}

.user-badge strong {
    color: var(--erp-text);
    font-size: 13px !important;
    font-weight: 680 !important;
}

.user-badge small {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    font-weight: 480 !important;
}

input,
select,
textarea {
    min-height: 38px !important;
    border: 1px solid var(--erp-line-strong) !important;
    border-radius: var(--erp-radius-sm) !important;
    background: #fff !important;
    color: var(--erp-text) !important;
    padding: 8px 11px !important;
    font-size: 14px !important;
    font-weight: 480 !important;
    outline: 0 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--erp-accent) !important;
    box-shadow: var(--erp-focus) !important;
}

label {
    color: #485568;
    font-size: 12px;
    font-weight: 650;
}

.badge {
    min-height: 22px;
    border: 1px solid var(--erp-line) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475467 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

.dashboard-grid,
.work-grid,
.platform-dashboard-grid,
.v2-platform-shell,
.v2-command-grid,
.v2-analytics-grid,
.dashboard-operations-grid {
    gap: 14px !important;
}

.v2-command-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 310px !important;
}

.v2-revenue-layout {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 14px !important;
}

.v2-analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.v2-ring,
.donut-chart {
    width: 122px !important;
    height: 122px !important;
}

.v2-line-chart-card .real-chart {
    min-height: 210px !important;
}

.ranked-bars {
    gap: 8px !important;
}

.ranked-bars div {
    min-height: 28px !important;
}

.ranked-bars span,
.ranked-bars strong {
    font-size: 12px !important;
}

.ranked-bars i,
.progress-track,
.v2-progress-stack i {
    height: 7px !important;
    border-radius: 999px !important;
}

.status-row {
    min-height: 32px !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
}

.control-list {
    gap: 9px !important;
}

.control-list a {
    padding: 13px !important;
}

.control-list strong {
    color: var(--erp-text);
    font-size: 14px !important;
    font-weight: 680 !important;
}

.empty-state {
    min-height: 92px !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface-soft) !important;
    font-weight: 580 !important;
}

.is-guest .app-shell {
    grid-template-columns: 80px minmax(0, 1fr) !important;
}

.is-guest .sidebar {
    width: 80px;
    padding: 18px 14px !important;
}

.is-guest .brand {
    justify-content: center;
}

.is-guest .brand > span:not(.brand-mark) {
    display: none !important;
}

.main:has(.auth-experience) {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: clamp(20px, 4vw, 42px) !important;
}

.main:has(.auth-experience) .topbar {
    display: none !important;
}

.auth-minimal {
    width: min(980px, 100%);
    display: grid !important;
    grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr);
    gap: 16px;
    margin: 0 auto;
}

.auth-copy,
.auth-login-card {
    padding: clamp(22px, 3vw, 34px) !important;
}

.auth-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-copy h2 {
    max-width: 430px;
    margin: 0 0 12px;
    color: var(--erp-text);
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 650;
    line-height: 1.08;
}

.auth-copy p:not(.eyebrow) {
    max-width: 430px;
    margin: 0;
    color: var(--erp-muted);
    font-size: 14px;
    line-height: 1.55;
}

.auth-login-card {
    gap: 14px !important;
}

.auth-login-card h2 {
    margin: 0;
    color: var(--erp-text);
    font-size: 22px !important;
    font-weight: 650 !important;
}

.auth-login-card .button.primary {
    width: 100%;
    min-height: 42px !important;
}

.auth-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.auth-highlights span {
    min-height: 30px;
    border: 1px solid var(--erp-line);
    border-radius: 999px;
    background: var(--erp-surface-soft);
    color: #485568;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 620;
}

.form-link {
    color: #5b5cf6 !important;
    font-size: 13px !important;
    font-weight: 620 !important;
}

.main:has(.calendar-focus-shell) {
    padding: 10px 12px !important;
}

.main:has(.calendar-focus-shell) .topbar {
    display: none !important;
}

.calendar-focus-toolbar {
    position: sticky !important;
    top: 10px;
    z-index: 20;
    min-height: 56px;
    grid-template-columns: minmax(250px, 1fr) auto auto !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface) !important;
    padding: 8px 10px !important;
    box-shadow: var(--erp-shadow) !important;
}

.calendar-hero-title {
    display: block !important;
    color: var(--erp-text) !important;
    font-size: clamp(22px, 1.65vw, 28px) !important;
    font-weight: 620 !important;
}

.calendar-focus-title,
.calendar-focus-toolbar h2:not(.calendar-hero-title) {
    display: none !important;
}

.calendar-focus-toolbar .button,
.calendar-focus-toolbar .icon-button {
    min-height: 38px !important;
    min-width: 38px !important;
    border-radius: var(--erp-radius-sm) !important;
}

.pro-calendar {
    --minute-height: clamp(0.9px, 0.112vh, 1.08px) !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: calc(100vh - 150px) !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface) !important;
    box-shadow: var(--erp-shadow) !important;
}

.pro-calendar-axis,
.pro-calendar-column {
    grid-template-rows: 46px minmax(0, 1fr) !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    min-height: 46px !important;
    background: var(--erp-surface-soft) !important;
    padding: 8px 10px !important;
}

.pro-calendar-column-head strong {
    font-size: 13px !important;
    font-weight: 680 !important;
}

.pro-calendar-column-head span {
    font-size: 11px !important;
    font-weight: 480 !important;
}

.pro-calendar-axis-body span {
    color: #5f6b7a !important;
    font-size: 11px !important;
    font-weight: 560 !important;
}

.pro-calendar .calendar-event {
    min-height: 36px !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06) !important;
}

.pro-calendar .calendar-event strong {
    font-size: 11px !important;
    font-weight: 680 !important;
}

.pro-calendar .calendar-event small,
.pro-calendar .calendar-event .event-time {
    font-size: 10px !important;
}

/* Public commercial landing */
.commercial-landing {
    min-height: 100vh;
    margin: 0;
    color: var(--erp-text);
    background:
        radial-gradient(circle at 18% 10%, rgba(47, 111, 237, 0.10), transparent 28%),
        radial-gradient(circle at 82% 4%, rgba(18, 165, 148, 0.10), transparent 26%),
        linear-gradient(180deg, #fbfcfd 0%, #f4f7f8 100%);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.commercial-landing * {
    box-sizing: border-box;
}

.landing-nav,
.landing-hero,
.landing-section {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.landing-nav {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 12px;
    margin-top: 14px;
    border: 1px solid rgba(213, 221, 232, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 46px rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(18px);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--erp-text);
    text-decoration: none;
}

.landing-brand span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #17201f 0%, #2f6fed 52%, #12a594 100%);
    box-shadow: 0 14px 28px rgba(47, 111, 237, 0.18);
}

.landing-brand strong {
    font-size: 15px;
    font-weight: 760;
}

.landing-nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.landing-nav-links a,
.landing-link-button {
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    color: var(--erp-muted);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}

.landing-nav-links a:hover,
.landing-link-button:hover {
    color: var(--erp-text);
    background: #f2f5f8;
}

.landing-nav-actions,
.landing-hero-actions,
.landing-tour-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.landing-button:hover {
    transform: translateY(-1px);
}

.landing-button.primary {
    border-color: var(--erp-primary);
    color: #fff;
    background: var(--erp-primary);
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.18);
}

.landing-button.secondary {
    color: var(--erp-text);
    background: rgba(255, 255, 255, 0.78);
}

.landing-button.large {
    min-height: 48px;
    padding-inline: 22px;
}

.landing-button.full {
    width: 100%;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
    gap: 28px;
    align-items: center;
    padding: 72px 0 34px;
}

.landing-eyebrow {
    margin: 0 0 10px;
    color: var(--erp-subtle);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--erp-text);
    font-size: clamp(42px, 7vw, 82px);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.landing-lead {
    max-width: 690px;
    margin: 24px 0 0;
    color: var(--erp-muted);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.55;
}

.landing-hero-actions {
    margin-top: 30px;
    flex-wrap: wrap;
}

.landing-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.landing-proof span,
.landing-module-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(213, 221, 232, 0.9);
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
}

.landing-product-card,
.landing-section,
.landing-access-card {
    border: 1px solid rgba(213, 221, 232, 0.9);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.09);
    backdrop-filter: blur(14px);
}

.landing-product-card {
    overflow: hidden;
    border-radius: 30px;
}

.landing-product-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid var(--erp-line);
}

.landing-product-top span {
    color: var(--erp-muted);
    font-weight: 700;
}

.landing-product-top strong {
    font-size: 22px;
}

.landing-calendar-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 310px;
    background: linear-gradient(#eef3f8 1px, transparent 1px);
    background-size: 100% 44px;
}

.landing-calendar-preview div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 12px;
    border-right: 1px solid var(--erp-line);
}

.landing-calendar-preview div:last-child {
    border-right: 0;
}

.landing-calendar-preview strong {
    padding-bottom: 10px;
    font-size: 14px;
}

.landing-calendar-preview span {
    display: block;
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid #cbd8ff;
    border-left: 4px solid #5b50f2;
    border-radius: 12px;
    color: var(--erp-text);
    background: #fff;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 0 10px 24px rgba(47, 111, 237, 0.08);
}

.landing-metric-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--erp-line);
}

.landing-metric-row div {
    padding: 18px;
    background: #fff;
}

.landing-metric-row small {
    display: block;
    color: var(--erp-muted);
    font-size: 12px;
    font-weight: 700;
}

.landing-metric-row strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
}

.landing-section {
    padding: 30px;
    margin-top: 24px;
    border-radius: 30px;
}

.landing-section-heading {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.landing-section-heading h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.landing-feature-grid article {
    padding: 22px;
    border: 1px solid var(--erp-line);
    border-radius: 22px;
    background: var(--erp-surface-soft);
}

.landing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: var(--erp-accent);
    background: #edf3ff;
    font-size: 12px;
    font-weight: 800;
}

.landing-feature-grid h3,
.landing-access-copy h3 {
    margin: 18px 0 8px;
    font-size: 20px;
}

.landing-feature-grid p,
.landing-access-copy p {
    margin: 0;
    color: var(--erp-muted);
    line-height: 1.55;
}

.landing-guide-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.landing-guide-grid article,
.landing-plan-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-height: 210px;
    padding: 22px;
    border: 1px solid var(--erp-line);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.05);
}

.landing-guide-grid article.is-featured {
    background:
        radial-gradient(circle at 88% 8%, rgba(18, 165, 148, 0.14), transparent 28%),
        linear-gradient(145deg, #111827 0%, #1f2937 100%);
    color: #fff;
}

.landing-guide-grid span,
.landing-plan-kicker {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.landing-guide-grid article.is-featured span,
.landing-guide-grid article.is-featured p {
    color: rgba(255, 255, 255, 0.72);
}

.landing-guide-grid h3,
.landing-plan-card h3 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -0.02em;
}

.landing-guide-grid p,
.landing-plan-card p {
    margin: 0;
    color: var(--erp-muted);
    line-height: 1.5;
}

.landing-pricing-section {
    background:
        radial-gradient(circle at 94% 8%, rgba(47, 111, 237, 0.09), transparent 28%),
        rgba(255, 255, 255, 0.86);
}

.landing-billing-toggle {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    margin-top: 22px;
    border: 1px solid var(--erp-line);
    border-radius: 16px;
    background: #f2f5f8;
}

.landing-billing-toggle button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    color: var(--erp-muted);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 780;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.landing-billing-toggle button.is-active {
    color: var(--erp-text);
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}

.landing-billing-toggle small {
    display: inline-block;
    margin-left: 6px;
    color: var(--erp-accent);
    font-size: 11px;
    font-weight: 850;
}

.landing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.landing-plan-card {
    min-height: 360px;
    align-content: start;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.landing-plan-card:hover,
.landing-plan-card.is-selected {
    border-color: rgba(47, 111, 237, 0.36);
    box-shadow: 0 22px 58px rgba(47, 111, 237, 0.12);
    transform: translateY(-2px);
}

.landing-plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--erp-line);
}

.landing-plan-price strong {
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.landing-plan-price small,
.landing-plan-annual {
    color: var(--erp-muted);
    font-size: 13px;
    font-weight: 700;
}

.landing-plan-annual {
    min-height: 20px;
}

.landing-plan-card ul {
    display: grid;
    gap: 9px;
    padding: 0;
    margin: 2px 0 6px;
    list-style: none;
}

.landing-plan-card li {
    position: relative;
    padding-left: 20px;
    color: #344054;
    font-size: 14px;
    font-weight: 680;
}

.landing-plan-card li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--erp-accent);
}

.landing-selected-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(47, 111, 237, 0.18);
    border-radius: 16px;
    background: #f5f8ff;
}

.landing-selected-plan span {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-selected-plan strong {
    font-size: 16px;
}

.landing-selected-plan small {
    grid-column: 2;
    color: var(--erp-muted);
    font-size: 13px;
    font-weight: 760;
}

.landing-modules {
    background: #111827;
}

.landing-modules .landing-eyebrow,
.landing-modules h2 {
    color: #fff;
}

.landing-module-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.landing-module-strip span {
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.landing-access-section {
    margin-bottom: 52px;
}

.landing-access {
    display: grid;
    grid-template-columns: 0.78fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 26px;
}

.landing-access-copy {
    padding-top: 10px;
}

.landing-access-copy h3 {
    margin-top: 0;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.landing-errors {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #ffd6a8;
    border-radius: 16px;
    color: #9a3412;
    background: #fff7ed;
    font-size: 14px;
}

.landing-access-card {
    padding: 16px;
    border-radius: 24px;
}

.landing-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: #f1f5f8;
}

.landing-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    color: var(--erp-muted);
    background: transparent;
    font: inherit;
    font-weight: 780;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.landing-tabs button.is-active {
    color: var(--erp-text);
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}

.landing-form {
    display: none;
    gap: 14px;
    margin-top: 16px;
}

.landing-form.is-active {
    display: grid;
}

.landing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.landing-form label {
    display: grid;
    gap: 8px;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.landing-form input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 14px;
    color: var(--erp-text);
    background: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    outline: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.landing-form input:focus {
    border-color: rgba(47, 111, 237, 0.65);
    box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12);
}

.landing-check {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.landing-check input {
    width: 16px;
    min-height: 16px;
}

.landing-tour[hidden] {
    display: none;
}

.landing-tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(17, 24, 39, 0.28);
    backdrop-filter: blur(4px);
}

.landing-tour-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    width: min(420px, calc(100% - 48px));
    padding: 22px;
    border: 1px solid var(--erp-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(17, 24, 39, 0.24);
    animation: landingPanelIn 220ms ease both;
}

.landing-tour-panel h2 {
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.landing-tour-panel p:not(.landing-eyebrow) {
    margin: 0;
    color: var(--erp-muted);
    line-height: 1.55;
}

.landing-tour-actions {
    justify-content: flex-end;
    margin-top: 22px;
}

.is-tour-active {
    position: relative;
    z-index: 75;
    outline: 3px solid rgba(47, 111, 237, 0.32);
    outline-offset: 8px;
}

.admin-task-shell,
.stats-shell,
.team-shell {
    display: grid;
    gap: 18px;
}

.task-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.task-hero h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.03em;
}

.task-hero-actions,
.inline-actions,
.centered-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.task-card {
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--erp-line);
    border-radius: 24px;
    color: var(--erp-text);
    background: #fff;
    text-decoration: none;
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.task-card:hover {
    transform: translateY(-2px);
    border-color: #cbd8ff;
    box-shadow: 0 20px 44px rgba(17, 24, 39, 0.09);
}

.task-card span,
.catalog-summary span {
    color: var(--erp-subtle);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.task-card strong {
    font-size: 40px;
    line-height: 1;
}

.task-card small {
    color: var(--erp-muted);
    font-size: 14px;
    line-height: 1.35;
}

.task-card.is-high {
    border-color: #fed7aa;
    background: #fff7ed;
}

.task-card.is-medium {
    border-color: #fde68a;
    background: #fffbeb;
}

.task-card.is-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.admin-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 18px;
}

.compact-list {
    display: grid;
    gap: 10px;
}

.compact-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--erp-line);
    border-radius: 16px;
    color: var(--erp-text);
    background: var(--erp-surface-soft);
    text-decoration: none;
}

.compact-list strong {
    display: block;
    font-size: 15px;
}

.compact-list small {
    display: block;
    margin-top: 3px;
    color: var(--erp-muted);
    font-size: 13px;
}

.compact-list b {
    white-space: nowrap;
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 0.8fr)) auto auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    margin: 16px 0;
    border: 1px solid var(--erp-line);
    border-radius: 20px;
    background: var(--erp-surface-soft);
}

.billing-term-editor {
    display: grid;
    gap: 12px;
}

.billing-term-editor article {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 140px 140px minmax(160px, 0.8fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--erp-line);
    border-radius: 18px;
    background: var(--erp-surface-soft);
}

.billing-term-editor label {
    display: grid;
    gap: 6px;
    color: var(--erp-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-term-editor input {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}

.billing-term-editor .term-toggle {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 12px;
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
}

.billing-term-editor .term-toggle input {
    min-height: auto;
}

.customer-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.customer-summary-grid article {
    display: grid;
    gap: 8px;
    min-height: 104px;
    padding: 18px;
    border: 1px solid var(--erp-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--erp-shadow);
}

.customer-summary-grid span {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.customer-summary-grid strong {
    font-size: 32px;
    line-height: 1;
}

.customer-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--erp-line);
    border-radius: 18px;
    background: var(--erp-surface-soft);
}

.customer-filter-bar label {
    display: grid;
    gap: 6px;
    color: var(--erp-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.customer-filter-bar input {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}

.room-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px;
}

.room-analytics-card {
    overflow: hidden;
    padding: 18px !important;
}

.room-analytics-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.room-analytics-head strong {
    display: block;
    font-size: 18px;
}

.room-analytics-head small,
.room-score small {
    color: var(--erp-muted);
    font-size: 13px;
    font-weight: 650;
}

.room-score {
    min-width: 86px;
    text-align: right;
}

.room-score strong {
    font-size: 34px;
    line-height: 1;
}

.room-day-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.room-day-strip div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.room-day-strip span,
.room-day-strip small {
    overflow: hidden;
    color: var(--erp-muted);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.room-day-strip i,
.hour-occupancy-list i {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: #e7edf4;
}

.room-day-strip b,
.hour-occupancy-list b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f6fed, #12a594);
}

.room-heatmap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.room-heatmap span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--erp-line);
    border-radius: 999px;
    background: #eefbf7;
    color: #047857;
    font-size: 13px;
    font-weight: 800;
}

.room-heatmap span.is-medium {
    background: #fff7ed;
    color: #c2410c;
}

.room-heatmap span.is-full {
    background: #fff1f2;
    color: #be123c;
}

.room-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.room-config-card {
    display: grid;
    gap: 14px;
    padding: 18px !important;
}

.room-config-meta,
.room-resource-list small {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.room-config-meta span,
.room-resource-list span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--erp-line);
    border-radius: 999px;
    background: var(--erp-surface-soft);
    color: var(--erp-muted);
    font-size: 12px;
    font-weight: 800;
}

.admin-filter-bar label {
    display: grid;
    gap: 6px;
    color: var(--erp-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-filter-bar input,
.admin-filter-bar select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--erp-text);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}

.platform-module-overview {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--erp-line);
}

.module-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.module-chip-grid article,
.team-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--erp-line);
    border-radius: 18px;
    background: var(--erp-surface-soft);
}

.module-chip-grid strong,
.team-card h3 {
    margin: 0;
    font-size: 17px;
}

.module-chip-grid small,
.module-chip-grid p,
.team-card p {
    margin: 0;
    color: var(--erp-muted);
    font-size: 13px;
    line-height: 1.4;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.team-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.team-card dl div {
    padding: 10px;
    border-radius: 14px;
    background: #fff;
}

.team-card dt {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.team-card dd {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 800;
}

.landing-compact-section {
    padding-block: 24px;
}

.admin-task-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.9fr) 140px 130px auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--erp-line);
    border-radius: 18px;
    background: var(--erp-surface-soft);
}

.admin-task-form label {
    display: grid;
    gap: 6px;
    color: var(--erp-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-task-form input,
.admin-task-form select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--erp-line-strong);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}

.task-list {
    display: grid;
    gap: 9px;
}

.task-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--erp-line);
    border-radius: 16px;
    background: #fff;
}

.task-list strong {
    display: block;
    font-size: 15px;
}

.task-list small {
    display: block;
    margin-top: 3px;
    color: var(--erp-muted);
    font-size: 13px;
}

.task-calendar-mini {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.task-calendar-mini article {
    display: grid;
    gap: 4px;
    min-height: 88px;
    padding: 10px;
    border: 1px solid var(--erp-line);
    border-radius: 16px;
    background: var(--erp-surface-soft);
}

.task-calendar-mini span {
    color: var(--erp-muted);
    font-size: 12px;
    font-weight: 800;
}

.task-calendar-mini strong {
    font-size: 24px;
}

.task-calendar-mini small {
    overflow: hidden;
    color: var(--erp-muted);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.task-calendar-full {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.task-calendar-full article {
    display: grid;
    gap: 10px;
    min-height: 142px;
    padding: 12px;
    border: 1px solid var(--erp-line);
    border-radius: 18px;
    background: var(--erp-surface-soft);
}

.task-calendar-full article.is-today {
    border-color: rgba(47, 111, 237, 0.42);
    background: #f5f8ff;
}

.task-calendar-full header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.task-calendar-full header span {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.task-calendar-full header strong {
    font-size: 22px;
}

.task-calendar-full div {
    display: grid;
    gap: 6px;
    align-content: start;
}

.task-calendar-full a {
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--erp-line);
    border-radius: 12px;
    color: var(--erp-text);
    background: #fff;
    text-decoration: none;
}

.task-calendar-full a strong {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.task-calendar-full a small,
.task-calendar-full .muted {
    color: var(--erp-muted);
    font-size: 11px;
}

.stats-main-grid,
.owner-main-grid,
.billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 18px;
}

.company-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.company-stat-grid article {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--erp-line);
    border-radius: 20px;
    background: var(--erp-surface-soft);
}

.company-stat-grid h3 {
    margin: 10px 0 4px;
    font-size: 18px;
}

.company-stat-grid p {
    margin: 0;
    color: var(--erp-muted);
}

.company-stat-grid dl,
.team-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.company-stat-grid dl div,
.team-card dl div {
    padding: 10px;
    border-radius: 14px;
    background: #fff;
}

.company-stat-grid dt {
    color: var(--erp-subtle);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.company-stat-grid dd {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 800;
}

.company-insight-list {
    display: grid;
    gap: 10px;
}

.company-insight-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(360px, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--erp-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.company-insight-row:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07);
}

.company-insight-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.company-insight-main h3 {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 17px;
    font-weight: 760;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-insight-main p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 560;
}

.company-insight-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.company-insight-metrics span {
    display: grid;
    gap: 3px;
    min-height: 54px;
    padding: 9px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.company-insight-metrics small {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.company-insight-metrics strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    font-weight: 760;
}

.status-pill.is-trial {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.status-pill.is-suspended,
.status-pill.is-inactive {
    border-color: #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

.owner-simple-dashboard,
.billing-dashboard {
    display: grid;
    gap: 18px;
}

.owner-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.owner-kpi-grid article {
    display: grid;
    gap: 7px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--erp-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.06);
}

.owner-kpi-grid span,
.owner-billing-strip span {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.owner-kpi-grid strong {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
}

.owner-kpi-grid small {
    color: var(--erp-muted);
    font-size: 13px;
}

.owner-billing-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: center;
}

.owner-billing-strip div {
    display: grid;
    gap: 5px;
}

.owner-billing-strip strong {
    font-size: 22px;
}

.compact-table table th,
.compact-table table td {
    padding-block: 11px;
}

.sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
}

.sidebar-toggle .sidebar-toggle-icon {
    margin: 0 !important;
}

.nav-lock-icon {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    align-items: center;
    justify-content: center;
}

.nav-lock-icon svg {
    width: 20px;
    height: 20px;
}

.pro-calendar-axis-body span {
    display: flex !important;
    align-items: flex-start !important;
    height: 22px !important;
    transform: translateY(-6px) !important;
}

.pro-calendar .calendar-event {
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
}

/* Fase 32: agenda operativa limpia, estilo calendario profesional. */
.main:has(.calendar-focus-shell) {
    background: #f6f8fb !important;
}

.calendar-focus-shell {
    display: grid !important;
    gap: 10px !important;
}

.calendar-focus-toolbar {
    top: 8px !important;
    min-height: 52px !important;
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    gap: 10px !important;
    border-radius: 18px !important;
    padding: 8px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

.calendar-focus-toolbar .eyebrow {
    display: none !important;
}

.calendar-hero-title {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: clamp(20px, 1.8vw, 27px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

.calendar-hero-title span {
    color: var(--erp-muted) !important;
    font-size: 0.74em !important;
    font-weight: 560 !important;
}

.calendar-nav,
.calendar-actions {
    gap: 6px !important;
}

.calendar-focus-toolbar .button,
.calendar-focus-toolbar .icon-button,
.calendar-focus-toolbar .segmented-control a {
    min-height: 36px !important;
    min-width: 36px !important;
    border-radius: 13px !important;
    padding-inline: 13px !important;
    font-size: 13px !important;
    font-weight: 720 !important;
}

.calendar-filter-drawer {
    width: fit-content !important;
    min-width: 112px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}

.calendar-filter-drawer[open] {
    width: 100% !important;
}

.pro-calendar {
    --minute-height: clamp(1px, 0.112vh, 1.18px) !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: calc(100vh - 118px) !important;
    max-height: calc(100vh - 118px) !important;
    overflow: auto !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

.pro-calendar-axis,
.pro-calendar-column {
    grid-template-rows: 54px minmax(0, 1fr) !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    min-height: 54px !important;
    border-bottom: 1px solid #dde6f0 !important;
    background: rgba(248, 250, 252, 0.96) !important;
    backdrop-filter: blur(16px) !important;
}

.pro-calendar-column-head {
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
}

.pro-calendar-corner {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.pro-calendar-axis-body {
    background: #fff !important;
}

.pro-calendar-axis-body span {
    height: calc(60 * var(--minute-height)) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    transform: translateY(-1px) !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.pro-calendar-lane {
    background-color: #fff !important;
    background-image:
        linear-gradient(to bottom, rgba(148, 163, 184, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.72) 1px, transparent 1px) !important;
    background-size: 100% calc(60 * var(--minute-height)), 100% calc(15 * var(--minute-height)) !important;
}

.calendar-closed-block {
    background: rgba(241, 245, 249, 0.82) !important;
    background-image: repeating-linear-gradient(135deg, rgba(203, 213, 225, 0.22), rgba(203, 213, 225, 0.22) 10px, transparent 10px, transparent 20px) !important;
}

.calendar-closed-block span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.pro-calendar .calendar-event {
    min-height: 26px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-content: center !important;
    border: 1px solid color-mix(in srgb, var(--event-color) 32%, #dbe4f0) !important;
    border-left: 4px solid var(--event-color) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    padding: 5px 7px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.pro-calendar .calendar-event .event-time {
    display: inline-flex !important;
    min-width: 44px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #eef4ff !important;
    color: #344054 !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

.pro-calendar .calendar-event strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event small {
    display: none !important;
}

.event-payment {
    min-height: 22px !important;
    border-radius: 999px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

.event-payment.is-pending {
    color: #b45309 !important;
    background: #fff7ed !important;
}

.event-payment.is-paid {
    color: #047857 !important;
    background: #ecfdf5 !important;
}

.simple-occupancy-list,
.simple-agenda-summary {
    display: grid !important;
    gap: 10px !important;
}

.simple-occupancy-list div,
.simple-agenda-summary article {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

.simple-occupancy-list span,
.simple-agenda-summary span {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}

.simple-occupancy-list strong,
.simple-agenda-summary strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 780 !important;
}

.simple-occupancy-list small,
.simple-agenda-summary small {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

/* Fase 33: correcciones de proporcion, tareas y calendario interno. */
.admin-task-form {
    grid-template-columns: minmax(0, 1.25fr) minmax(150px, 0.8fr) 150px 150px auto !important;
    overflow: hidden !important;
}

.admin-task-form > * {
    min-width: 0 !important;
}

.admin-task-form .button {
    width: 100% !important;
    min-width: 92px !important;
}

.nav-label {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
}

.sidebar-toggle {
    position: absolute !important;
    top: 92px !important;
    right: -18px !important;
    z-index: 30 !important;
    border-color: #d7e0ea !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18) !important;
}

.sidebar-toggle:hover {
    background: #0f766e !important;
}

body.sidebar-collapsed .sidebar-toggle {
    right: -17px !important;
}

.task-calendar-shell {
    display: grid;
    gap: 12px;
}

.task-calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.task-calendar-toolbar h2 {
    margin: 0;
    color: var(--erp-text);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 650;
    letter-spacing: 0;
}

.task-calendar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.task-calendar-actions .button,
.task-calendar-actions .icon-button,
.task-calendar-actions .segmented-control a {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 720 !important;
}

.task-calendar-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    padding: 0;
    background: #dbe4f0;
}

.task-calendar-month article {
    min-height: 112px;
    padding: 10px;
    background: #fff;
}

.task-calendar-month article.is-muted {
    background: #f8fafc;
}

.task-calendar-month article.is-today {
    background: #eff6ff;
}

.task-calendar-month header,
.task-calendar-time article header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.task-calendar-month header strong,
.task-calendar-time article header strong {
    color: #111827;
    font-size: 14px;
}

.task-calendar-month article > div {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.task-calendar-month a,
.task-calendar-item {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border: 1px solid #d8e1ee;
    border-left: 4px solid #635bff;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.task-calendar-month a strong,
.task-calendar-item strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-calendar-month a small,
.task-calendar-item small {
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
}

.task-calendar-time {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: calc(100vh - 230px);
    padding: 0;
    overflow: auto;
}

.task-calendar-time aside {
    display: grid;
    grid-template-rows: 48px repeat(13, 56px);
    background: #fff;
    border-right: 1px solid #dbe4f0;
}

.task-calendar-time aside strong {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.task-calendar-time-columns {
    display: grid;
    grid-template-columns: repeat(var(--task-days), minmax(170px, 1fr));
}

.task-calendar-time article {
    min-width: 0;
    border-right: 1px solid #dbe4f0;
}

.task-calendar-time article header {
    min-height: 48px;
    padding: 8px 12px;
    border-bottom: 1px solid #dbe4f0;
    background: #f8fafc;
}

.task-calendar-time article.is-today header {
    background: #eff6ff;
}

.task-day-lane {
    position: relative;
    display: grid;
    grid-template-rows: repeat(13, 56px);
    min-height: 728px;
    background:
        linear-gradient(to bottom, rgba(148, 163, 184, 0.28) 1px, transparent 1px),
        #fff;
    background-size: 100% 56px;
}

.task-day-lane > div:not(.task-all-day-stack) {
    border-bottom: 1px solid #eef2f7;
}

.task-all-day-stack {
    position: absolute;
    inset: 12px 12px auto;
    display: grid;
    gap: 8px;
    max-width: min(430px, calc(100% - 24px));
}

.task-all-day-stack > span,
.task-calendar-month .muted {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 650;
}

.task-calendar-item.is-high {
    border-left-color: #ef4444;
}

.task-calendar-item.is-low {
    border-left-color: #14b8a6;
}

.status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
}

.status-row {
    min-height: 74px !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
}

.status-row strong {
    font-size: 26px !important;
}

.centered-actions,
.platform-actions {
    justify-content: center !important;
    align-items: center !important;
}

.platform-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.platform-actions .table-action {
    min-width: 94px !important;
    justify-content: center !important;
}

.pro-calendar-column-head {
    overflow: visible !important;
}

.pro-calendar-column-head strong,
.pro-calendar-column-head span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.company-show-v2 > .form-actions.section-gap,
.company-show-v2 > .metric-grid {
    display: none !important;
}

.company-command {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.company-command h2 {
    margin: 0 !important;
    color: var(--erp-text) !important;
    font-size: clamp(24px, 2.2vw, 32px) !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
}

.company-command-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.company-command-actions .button,
.company-command-actions .stripe-muted {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 740 !important;
}

.stripe-muted {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #fed7aa;
    color: #9a3412;
    background: #fff7ed;
}

.company-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.company-overview-grid article {
    display: grid;
    gap: 8px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--erp-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.company-overview-grid span {
    color: var(--erp-subtle);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.company-overview-grid strong {
    overflow: hidden;
    color: var(--erp-text);
    font-size: clamp(22px, 2.4vw, 31px);
    font-weight: 760;
    line-height: 1.06;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-overview-grid small {
    color: var(--erp-muted);
    font-size: 13px;
    font-weight: 580;
}

.commercial-landing {
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f7f8 100%) !important;
}

.landing-nav {
    width: min(1120px, calc(100% - 48px)) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
}

.landing-hero {
    width: min(1120px, calc(100% - 48px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr) !important;
    gap: 42px !important;
    padding: 76px 0 26px !important;
}

.landing-hero h1 {
    max-width: 720px !important;
    font-size: clamp(44px, 6vw, 76px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
}

.landing-lead {
    max-width: 620px !important;
    font-size: clamp(17px, 1.55vw, 20px) !important;
}

.landing-proof {
    display: none !important;
}

.landing-product-card {
    border-radius: 28px !important;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.11) !important;
}

.landing-section {
    width: min(1120px, calc(100% - 48px)) !important;
    border-radius: 26px !important;
    padding: 28px !important;
}

.landing-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.landing-guide-grid article {
    min-height: 190px !important;
    border-radius: 22px !important;
}

.landing-feature-grid,
.landing-compact-section,
.landing-modules:not(.landing-compact-section) {
    display: none !important;
}

.landing-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.landing-plan-card {
    border-radius: 24px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
}

.landing-access {
    grid-template-columns: minmax(0, 0.72fr) minmax(360px, 1fr) !important;
}

.landing-access-copy {
    align-self: center !important;
}

.landing-access-copy h3 {
    font-size: clamp(30px, 3.8vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
}

@media (max-width: 1180px) {
    .admin-task-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-task-form .button {
        grid-column: 1 / -1;
    }

    .task-calendar-toolbar {
        grid-template-columns: 1fr;
    }

    .task-calendar-actions {
        justify-content: flex-start;
    }

    .task-calendar-month {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Landing 3.3: slogan-first flow inspired by simple booking marketplaces */
.commercial-landing .landing-nav-clean {
    min-height: 78px !important;
    align-items: center !important;
}

.commercial-landing .landing-nav-clean .landing-brand img {
    max-width: 150px !important;
    height: auto !important;
}

.commercial-landing .landing-nav-links {
    gap: clamp(1.2rem, 3vw, 3.2rem) !important;
}

.commercial-landing .landing-nav-links a,
.commercial-landing .landing-link-button {
    font-size: clamp(1rem, 1.05vw, 1.15rem) !important;
    font-weight: 800 !important;
    color: #334155 !important;
}

.commercial-landing .landing-commercial-hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: clamp(2.2rem, 6vw, 5.4rem) clamp(1.25rem, 4vw, 4rem) !important;
}

.commercial-landing .landing-commercial-hero .landing-hero-copy {
    width: min(1180px, 100%) !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    padding: clamp(2.25rem, 6vw, 5rem) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "eyebrow"
        "title"
        "lead"
        "note"
        "actions" !important;
    border: 1px solid rgba(15, 118, 110, .16) !important;
    border-radius: 36px !important;
    background:
        radial-gradient(circle at 7% 8%, rgba(204, 251, 241, .92), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 70%, #ecfeff 100%) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .08) !important;
}

.commercial-landing .landing-commercial-hero h1 {
    max-width: 920px !important;
    font-size: clamp(3.9rem, 7vw, 7.6rem) !important;
    line-height: .9 !important;
    letter-spacing: 0 !important;
}

.commercial-landing .landing-commercial-hero .landing-lead {
    max-width: 920px !important;
    font-size: clamp(1.16rem, 1.5vw, 1.55rem) !important;
    line-height: 1.45 !important;
}

.commercial-landing .landing-theme-note {
    max-width: 820px !important;
    font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    color: #64748b !important;
}

.commercial-landing .landing-hero-actions {
    align-items: center !important;
    gap: .9rem !important;
}

.commercial-landing .landing-hero-actions .landing-button {
    min-width: 170px !important;
    min-height: 58px !important;
}

.commercial-landing .landing-sector-proof,
.commercial-landing .landing-product-peek,
.commercial-landing .landing-demo-trio,
.commercial-landing .landing-commercial-blocks {
    display: none !important;
}

@media (max-width: 900px) {
    .commercial-landing .landing-nav-clean {
        min-height: auto !important;
        gap: .85rem !important;
        padding: .9rem !important;
    }

    .commercial-landing .landing-nav-links {
        order: 3 !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: .5rem !important;
        overflow-x: auto !important;
    }

    .commercial-landing .landing-commercial-hero .landing-hero-copy {
        padding: 2rem !important;
        border-radius: 28px !important;
    }

    .commercial-landing .landing-commercial-hero h1 {
        font-size: clamp(3.1rem, 14vw, 4.6rem) !important;
    }
}

/* Register checkout hardening: keep the flow usable at 90%-100% zoom */
body:has(.register-builder-v3) {
    background:
        radial-gradient(circle at 0 0, rgba(20, 184, 166, .16), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #f1f5f9 100%) !important;
}

.register-builder.register-builder-v3 {
    width: min(100%, 1780px) !important;
    margin-inline: auto !important;
}

.register-builder-v3 .register-builder-copy {
    justify-content: center !important;
}

.register-builder-v3 .register-builder-copy h2 {
    max-width: 11ch !important;
    font-size: clamp(2rem, 3.35vw, 4.15rem) !important;
}

.register-builder-v3 .register-builder-form.is-wizard {
    min-height: 0 !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) !important;
}

.register-builder-v3 .register-heading-row {
    margin-bottom: 0 !important;
}

.register-builder-v3 .register-heading-row h2,
.register-builder-v3 .register-section > div > h2 {
    font-size: clamp(1.7rem, 2vw, 2.35rem) !important;
}

.register-builder-v3 .register-form-grid.compact-fields {
    align-items: end !important;
}

.register-builder-v3 .register-form-grid.compact-fields label {
    gap: 7px !important;
    font-size: .86rem !important;
}

.register-builder-v3 .register-form-grid.compact-fields input {
    height: clamp(48px, 5.5vh, 58px) !important;
    border-radius: 18px !important;
}

.register-builder-v3 .register-plan-grid {
    align-items: stretch !important;
}

.register-builder-v3 .register-plan-card span {
    min-height: clamp(170px, 20vh, 212px) !important;
    padding: clamp(14px, 1.25vw, 18px) !important;
}

.register-builder-v3 .register-plan-card small {
    font-size: .74rem !important;
    letter-spacing: .05em !important;
}

.register-builder-v3 .register-plan-card strong {
    font-size: clamp(1.25rem, 1.35vw, 1.6rem) !important;
}

.register-builder-v3 .register-plan-card em {
    font-size: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.register-builder-v3 .register-plan-card b {
    color: #64748b !important;
    font-size: .82rem !important;
    line-height: 1.32 !important;
}

.register-builder-v3 .register-plan-period {
    grid-template-columns: minmax(185px, 230px) minmax(0, 1fr) minmax(130px, 170px) !important;
    gap: 10px !important;
    padding: 10px !important;
}

.register-builder-v3 .register-plan-period-copy h3 {
    font-size: clamp(1.05rem, 1.12vw, 1.28rem) !important;
}

.register-builder-v3 .register-plan-period-copy p {
    font-size: .82rem !important;
}

.register-builder-v3 .register-term-grid-four {
    gap: 8px !important;
}

.register-builder-v3 .register-term-card span {
    min-height: 82px !important;
    padding: 11px 12px !important;
}

.register-builder-v3 .register-term-card strong {
    font-size: .9rem !important;
}

.register-builder-v3 .register-term-card small,
.register-builder-v3 .register-term-card em {
    font-size: .66rem !important;
    line-height: 1.18 !important;
}

.register-builder-v3 .register-period-saving {
    min-height: 82px !important;
    padding: 10px !important;
    font-size: .92rem !important;
}

.register-builder-v3 .register-extra-grid {
    align-items: stretch !important;
}

.register-builder-v3 .register-extra-card {
    min-height: 102px !important;
}

.register-builder-v3 .register-accompaniment-layout {
    align-items: stretch !important;
}

.register-builder-v3 .register-accompaniment-copy h2 {
    font-size: clamp(1.55rem, 1.75vw, 2rem) !important;
}

.register-builder-v3 .register-accompaniment-copy .notes {
    font-size: .94rem !important;
}

.register-builder-v3 .legal-consent-grid {
    align-items: stretch !important;
}

.register-builder-v3 .legal-consent-card {
    min-height: 255px !important;
    padding: 16px !important;
    gap: 12px !important;
}

.register-builder-v3 .legal-consent-card > div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: start !important;
}

.register-builder-v3 .legal-short-copy {
    font-size: .9rem !important;
    line-height: 1.38 !important;
}

.register-builder-v3 .legal-check {
    padding: 12px !important;
    border-radius: 16px !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
}

.register-builder-v3 .register-wizard-actions {
    min-height: 76px !important;
}

.register-builder-v3 .register-submit-row {
    min-height: 86px !important;
}

@media (max-height: 780px) and (min-width: 901px) {
    .register-builder.register-builder-v3 {
        min-height: calc(100dvh - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
    }

    .register-builder-v3 .register-builder-copy {
        padding: 18px !important;
    }

    .register-builder-v3 .register-builder-copy img {
        width: 128px !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(1.75rem, 2.65vw, 3rem) !important;
    }

    .register-builder-v3 .register-builder-copy p {
        font-size: .92rem !important;
        line-height: 1.35 !important;
    }

    .register-builder-v3 .register-wizard-progress {
        min-height: 62px !important;
    }

    .register-builder-v3 .register-wizard-progress button {
        min-height: 48px !important;
        font-size: .82rem !important;
    }

    .register-builder-v3 .register-builder-form.is-wizard {
        gap: 8px !important;
        padding: 10px !important;
    }

    .register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
        padding: 14px !important;
        gap: 10px !important;
    }

    .register-builder-v3 .register-form-grid.compact-fields {
        gap: 10px 14px !important;
    }

    .register-builder-v3 .register-form-grid.compact-fields input {
        height: 46px !important;
    }

    .register-builder-v3 .register-plan-card span {
        min-height: 150px !important;
        gap: 7px !important;
    }

    .register-builder-v3 .register-plan-period {
        grid-template-columns: 1fr !important;
    }

    .register-builder-v3 .register-plan-period-copy {
        grid-template-columns: auto 1fr !important;
        gap: 4px 12px !important;
        align-items: end !important;
    }

    .register-builder-v3 .register-plan-period-copy .eyebrow {
        grid-row: span 2 !important;
        align-self: center !important;
    }

    .register-builder-v3 .register-period-saving {
        min-height: 50px !important;
    }

    .register-builder-v3 .legal-consent-card {
        min-height: 220px !important;
    }
}

/* Landing 4.0: comercial, limpia y sin demo privada en portada */
.commercial-landing {
    background:
        radial-gradient(circle at 8% 16%, rgba(204, 251, 241, .72), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f8fafc 100%) !important;
    color: #0f172a !important;
}

.commercial-landing .landing-nav-clean {
    position: sticky !important;
    top: 14px !important;
    z-index: 50 !important;
    width: min(1460px, calc(100% - 32px)) !important;
    margin: 14px auto 0 !important;
    padding: .75rem .9rem .75rem 1.1rem !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid #dbe7ee !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(18px) !important;
}

.commercial-landing .landing-nav-clean .landing-brand {
    min-width: 160px !important;
}

.commercial-landing .landing-nav-clean .landing-brand img {
    width: 136px !important;
    max-width: 136px !important;
}

.commercial-landing .landing-nav-links {
    flex: 1 !important;
    justify-content: center !important;
    gap: clamp(1.1rem, 4vw, 4.5rem) !important;
}

.commercial-landing .landing-nav-links a {
    padding: .7rem .3rem !important;
    font-size: clamp(1rem, 1.1vw, 1.16rem) !important;
    line-height: 1 !important;
    color: #334155 !important;
}

.commercial-landing .landing-nav-actions {
    gap: .55rem !important;
}

.commercial-landing .landing-link-button,
.commercial-landing .landing-nav-actions .landing-button {
    min-height: 48px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
}

.commercial-landing .landing-nav-actions .landing-link-button {
    padding-inline: 1rem !important;
    color: #334155 !important;
}

.commercial-landing .landing-nav-actions .landing-button.primary {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #fff !important;
}

.commercial-landing .landing-commercial-hero {
    padding: clamp(2.4rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 8vw, 7rem) !important;
}

.commercial-landing .landing-commercial-hero .landing-hero-copy {
    width: min(1320px, 100%) !important;
    min-height: clamp(420px, 58vh, 620px) !important;
    padding: clamp(2.6rem, 7vw, 6.5rem) !important;
    justify-content: center !important;
    align-content: center !important;
    text-align: left !important;
    background:
        radial-gradient(circle at 10% 15%, rgba(204, 251, 241, .95), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(15, 118, 110, .08), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #ecfdf5 100%) !important;
    border: 1px solid rgba(15, 118, 110, .18) !important;
    border-radius: 42px !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .09) !important;
}

.commercial-landing .landing-commercial-hero .landing-eyebrow {
    color: #0f766e !important;
    font-size: clamp(.9rem, 1vw, 1.05rem) !important;
    letter-spacing: .08em !important;
    margin-bottom: 1.1rem !important;
}

.commercial-landing .landing-commercial-hero h1 {
    width: min(980px, 100%) !important;
    max-width: 980px !important;
    margin: 0 !important;
    font-size: clamp(4.4rem, 7.6vw, 8.6rem) !important;
    line-height: .88 !important;
    letter-spacing: 0 !important;
    color: #0f172a !important;
}

.commercial-landing .landing-commercial-hero .landing-lead {
    width: min(860px, 100%) !important;
    max-width: 860px !important;
    margin-top: 1.45rem !important;
    font-size: clamp(1.15rem, 1.45vw, 1.5rem) !important;
    line-height: 1.45 !important;
    color: #475569 !important;
}

.commercial-landing .landing-theme-note {
    width: min(780px, 100%) !important;
    margin-top: .75rem !important;
    color: #64748b !important;
    font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
}

.commercial-landing .landing-hero-actions {
    margin-top: 1.8rem !important;
    gap: .9rem !important;
}

.commercial-landing .landing-hero-actions .landing-button {
    min-height: 58px !important;
    min-width: 178px !important;
    border-radius: 18px !important;
    font-size: 1.06rem !important;
}

.commercial-landing .landing-hero-actions .landing-button.primary {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #fff !important;
    box-shadow: 0 22px 42px rgba(15, 118, 110, .18) !important;
}

.commercial-landing .landing-hero-actions .landing-button.secondary {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.commercial-landing #sectores,
.commercial-landing .landing-product-peek,
.commercial-landing .landing-demo-trio,
.commercial-landing .landing-commercial-blocks,
.commercial-landing .landing-sector-proof {
    display: none !important;
}

.commercial-landing .landing-section {
    width: min(1460px, calc(100% - 32px)) !important;
    margin: 0 auto clamp(2rem, 5vw, 4rem) !important;
    padding: clamp(2rem, 4vw, 4rem) !important;
    border-radius: 34px !important;
    background: #fff !important;
    border: 1px solid #dbe7ee !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .07) !important;
}

.commercial-landing .landing-section-heading {
    max-width: 980px !important;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.commercial-landing .landing-section-heading h2 {
    font-size: clamp(2.3rem, 4.8vw, 5.4rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    color: #0f172a !important;
}

.commercial-landing .landing-section-heading p:not(.landing-eyebrow) {
    max-width: 820px !important;
    font-size: clamp(1.08rem, 1.35vw, 1.32rem) !important;
    line-height: 1.45 !important;
    color: #475569 !important;
}

.commercial-landing .service-tour-shell {
    display: grid !important;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr) !important;
    gap: 1.4rem !important;
    align-items: stretch !important;
}

.commercial-landing .service-tour-steps {
    display: grid !important;
    gap: .9rem !important;
}

.commercial-landing .service-tour-steps button {
    min-height: 104px !important;
    padding: 1.1rem 1.25rem !important;
    border-radius: 24px !important;
    background: #f8fafc !important;
    border: 1px solid #dbe7ee !important;
    text-align: left !important;
}

.commercial-landing .service-tour-steps button.is-active {
    background: #ecfdf5 !important;
    border-color: #99f6e4 !important;
    box-shadow: 0 18px 42px rgba(20, 184, 166, .12) !important;
}

.commercial-landing .service-tour-stage {
    min-height: 0 !important;
}

.commercial-landing .service-tour-stage article {
    min-height: 372px !important;
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, #fff, #f8fafc) !important;
    border: 1px solid #dbe7ee !important;
    overflow: hidden !important;
}

.commercial-landing .landing-pricing-section,
.commercial-landing .landing-access-section {
    overflow: hidden !important;
}

@media (max-width: 980px) {
    .commercial-landing .landing-nav-clean {
        width: min(100% - 20px, 760px) !important;
        grid-template-columns: 1fr !important;
    }

    .commercial-landing .landing-nav-clean .landing-brand {
        min-width: 0 !important;
    }

    .commercial-landing .landing-nav-links,
    .commercial-landing .landing-nav-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
    }

    .commercial-landing .landing-commercial-hero {
        padding-inline: .75rem !important;
    }

    .commercial-landing .landing-commercial-hero .landing-hero-copy {
        min-height: auto !important;
        padding: 2rem !important;
        border-radius: 30px !important;
    }

    .commercial-landing .landing-commercial-hero h1 {
        font-size: clamp(3.2rem, 14vw, 5.2rem) !important;
    }

    .commercial-landing .landing-section {
        width: min(100% - 20px, 760px) !important;
        padding: 1.2rem !important;
        border-radius: 26px !important;
    }

    .commercial-landing .service-tour-shell {
        grid-template-columns: 1fr !important;
    }
}

/* Landing 3.2: commercial hero without right-side demo. */
.commercial-landing .landing-nav-clean,
.commercial-landing .landing-nav {
    width: min(1840px, calc(100% - 32px)) !important;
    min-height: 76px !important;
    margin: 14px auto 0 !important;
    padding: 12px 18px !important;
    grid-template-columns: 180px minmax(420px, 1fr) auto !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 20px 52px rgba(15, 23, 42, .08) !important;
}

.commercial-landing .landing-brand img {
    width: 128px !important;
    height: auto !important;
    object-fit: contain !important;
}

.commercial-landing .landing-nav-links {
    justify-content: center !important;
    gap: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.commercial-landing .landing-nav-links a,
.commercial-landing .landing-link-button {
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    color: #334155 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.commercial-landing .landing-nav-links a:hover,
.commercial-landing .landing-link-button:hover {
    background: #ecfdf5 !important;
    color: #0f766e !important;
}

.commercial-landing .landing-nav-actions {
    gap: 10px !important;
}

.commercial-landing .landing-nav-actions .landing-button {
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
}

.commercial-landing .landing-commercial-hero {
    width: min(1840px, calc(100% - 32px)) !important;
    min-height: calc(100vh - 116px) !important;
    margin: 18px auto 0 !important;
    padding: clamp(28px, 4vw, 62px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #ecfeff 100%) !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .10) !important;
}

.commercial-landing .landing-commercial-hero .landing-hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: clamp(20px, 3vw, 48px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
    grid-template-areas:
        "eyebrow proof"
        "title proof"
        "lead proof"
        "note proof"
        "actions proof" !important;
    gap: 16px clamp(32px, 5vw, 74px) !important;
    align-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.commercial-landing .landing-commercial-hero .landing-eyebrow {
    grid-area: eyebrow !important;
    margin: 0 !important;
    color: #0f766e !important;
    font-size: clamp(.84rem, .9vw, 1rem) !important;
    letter-spacing: .08em !important;
}

.commercial-landing .landing-commercial-hero h1 {
    grid-area: title !important;
    max-width: 980px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(3.8rem, 6.2vw, 8.4rem) !important;
    line-height: .9 !important;
    letter-spacing: -0.045em !important;
}

.commercial-landing .landing-commercial-hero .landing-lead {
    grid-area: lead !important;
    max-width: 920px !important;
    margin: 0 !important;
    color: #475569 !important;
    font-size: clamp(1.08rem, 1.35vw, 1.42rem) !important;
    line-height: 1.55 !important;
}

.commercial-landing .landing-theme-note {
    grid-area: note !important;
    max-width: 800px !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.commercial-landing .landing-sector-proof {
    display: none !important;
}

.commercial-landing .landing-hero-actions {
    grid-area: actions !important;
    margin: 12px 0 0 !important;
    gap: 12px !important;
}

.commercial-landing .landing-hero-actions .landing-button {
    min-width: 180px !important;
    min-height: 60px !important;
    border-radius: 20px !important;
    font-size: 1.04rem !important;
}

.commercial-landing .landing-product-peek,
.commercial-landing .landing-demo-trio {
    display: none !important;
}

.commercial-landing .landing-commercial-blocks {
    grid-area: proof !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-self: center !important;
}

.commercial-landing .landing-commercial-blocks article {
    min-height: 310px !important;
    padding: 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    border: 1px solid #dbe7ef !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .08) !important;
}

.commercial-landing .landing-commercial-blocks article:nth-child(1) {
    background: linear-gradient(145deg, #ecfdf5, #ffffff) !important;
    border-color: #99f6e4 !important;
}

.commercial-landing .landing-commercial-blocks article:nth-child(2) {
    background: linear-gradient(145deg, #f8fafc, #ffffff) !important;
}

.commercial-landing .landing-commercial-blocks article:nth-child(3) {
    background: linear-gradient(145deg, #0f172a, #0f766e) !important;
    color: #ffffff !important;
}

.commercial-landing .landing-commercial-blocks span {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: #ccfbf1 !important;
    color: #0f766e !important;
    font-weight: 900 !important;
}

.commercial-landing .landing-commercial-blocks article:nth-child(3) span {
    background: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
}

.commercial-landing .landing-commercial-blocks strong {
    margin-top: auto !important;
    color: inherit !important;
    font-size: clamp(1.45rem, 1.8vw, 2.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
}

.commercial-landing .landing-commercial-blocks p {
    margin: 14px 0 0 !important;
    color: #64748b !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
}

.commercial-landing .landing-commercial-blocks article:nth-child(3) p {
    color: rgba(255,255,255,.78) !important;
}

@media (max-width: 1240px) {
    .commercial-landing .landing-commercial-hero .landing-hero-copy {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "eyebrow"
            "title"
            "lead"
            "note"
            "actions"
            "proof" !important;
    }

    .commercial-landing .landing-commercial-blocks {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .commercial-landing .landing-commercial-blocks article {
        min-height: 240px !important;
    }
}

@media (max-width: 860px) {
    .commercial-landing .landing-nav-clean,
    .commercial-landing .landing-nav {
        grid-template-columns: 1fr !important;
        width: min(100% - 18px, 720px) !important;
        top: 8px !important;
    }

    .commercial-landing .landing-nav-links,
    .commercial-landing .landing-nav-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .commercial-landing .landing-commercial-hero {
        width: min(100% - 18px, 720px) !important;
        min-height: auto !important;
        padding: 20px !important;
    }

    .commercial-landing .landing-commercial-hero h1 {
        font-size: clamp(3rem, 13vw, 4.8rem) !important;
    }

    .commercial-landing .landing-commercial-blocks {
        grid-template-columns: 1fr !important;
    }
}

/* Landing 3.0: clean commercial header, three-block demo and cookie consent. */
.commercial-landing .landing-nav-clean,
.commercial-landing .landing-nav {
    position: sticky !important;
    top: 14px !important;
    z-index: 90 !important;
    width: min(96vw, 1720px) !important;
    min-height: 78px !important;
    margin: 14px auto 0 !important;
    padding: 12px 16px 12px 22px !important;
    display: grid !important;
    grid-template-columns: minmax(150px, .55fr) minmax(340px, 1fr) minmax(360px, .7fr) !important;
    align-items: center !important;
    gap: 18px !important;
    border: 1px solid rgba(15, 23, 42, .1) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(18px) !important;
}

.commercial-landing .landing-brand {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
}

.commercial-landing .landing-brand span {
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
}

.commercial-landing .landing-brand img {
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
    object-fit: contain !important;
}

.commercial-landing .landing-nav-links {
    justify-content: center !important;
    gap: clamp(28px, 4vw, 72px) !important;
}

.commercial-landing .landing-nav-links a,
.commercial-landing .landing-link-button {
    min-height: 46px !important;
    padding: 0 10px !important;
    color: #334155 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

.commercial-landing .landing-nav-actions {
    justify-content: flex-end !important;
    gap: 10px !important;
}

.commercial-landing .landing-nav-actions .landing-button,
.commercial-landing .landing-nav-actions .landing-link-button {
    min-height: 54px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
}

.commercial-landing .landing-hero {
    width: min(96vw, 1720px) !important;
    min-height: calc(100vh - 124px) !important;
    margin: 0 auto !important;
    padding: clamp(36px, 5vh, 72px) 22px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(500px, .82fr) !important;
    align-items: center !important;
    gap: clamp(34px, 5vw, 76px) !important;
}

.commercial-landing .landing-hero-copy h1 {
    max-width: 880px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(4rem, 6.8vw, 7.9rem) !important;
    line-height: .92 !important;
    letter-spacing: -0.045em !important;
}

.commercial-landing .landing-lead,
.commercial-landing .landing-theme-note {
    max-width: 920px !important;
    color: #475569 !important;
    font-size: clamp(1.08rem, 1.35vw, 1.42rem) !important;
    line-height: 1.5 !important;
}

.commercial-landing .landing-hero-actions {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 26px !important;
}

.commercial-landing .landing-hero-actions .landing-button {
    min-width: 176px !important;
    min-height: 58px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
}

.commercial-landing .landing-product-peek[hidden] {
    display: none !important;
}

.commercial-landing .landing-demo-trio {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 28px !important;
    border: 1px solid rgba(20, 184, 166, .2) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 86% 8%, rgba(20, 184, 166, .32), transparent 32%),
        linear-gradient(145deg, #0f172a 0%, #134e4a 100%) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .18) !important;
    color: #ffffff !important;
}

.commercial-landing .demo-trio-header {
    display: grid !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.commercial-landing .demo-trio-header p {
    max-width: 620px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
}

.commercial-landing .demo-trio-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.commercial-landing .demo-trio-panel {
    min-height: 178px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #0f172a !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12) !important;
}

.commercial-landing .demo-trio-panel > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.commercial-landing .demo-trio-panel span {
    color: #64748b !important;
    font-weight: 900 !important;
}

.commercial-landing .demo-trio-panel strong {
    color: #0f766e !important;
    font-size: .95rem !important;
}

.commercial-landing .demo-trio-panel ul {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.commercial-landing .demo-trio-panel li {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.commercial-landing .demo-trio-panel li b {
    color: #0f172a !important;
    font-size: .9rem !important;
}

.commercial-landing .demo-trio-panel li span {
    overflow: hidden !important;
    color: #0f172a !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.commercial-landing .demo-trio-panel li em {
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    font-size: .72rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

.commercial-landing .demo-workers li {
    grid-template-columns: 18px 1fr auto !important;
}

.commercial-landing .demo-workers i {
    width: 14px !important;
    height: 14px !important;
    border-radius: 999px !important;
    background: var(--worker) !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--worker) 16%, transparent) !important;
}

.commercial-landing .demo-billing {
    grid-column: 1 / -1 !important;
    min-height: 152px !important;
    display: grid !important;
    grid-template-columns: minmax(0, .7fr) minmax(280px, 1fr) !important;
    align-items: end !important;
    gap: 18px !important;
}

.commercial-landing .demo-billing-number b {
    display: block !important;
    color: #0f172a !important;
    font-size: clamp(2rem, 3vw, 3.2rem) !important;
    line-height: .95 !important;
}

.commercial-landing .demo-billing-number small {
    color: #64748b !important;
    font-weight: 800 !important;
}

.commercial-landing .demo-mini-bars {
    height: 96px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: end !important;
    gap: 12px !important;
}

.commercial-landing .demo-mini-bars span {
    height: var(--bar) !important;
    min-height: 24px !important;
    border-radius: 18px 18px 8px 8px !important;
    background: linear-gradient(180deg, #14b8a6, #0f766e) !important;
}

.landing-cookie-banner {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 12000 !important;
    width: min(560px, calc(100vw - 48px)) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(15, 118, 110, .2) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .18) !important;
    backdrop-filter: blur(18px) !important;
}

.landing-cookie-banner strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
}

.landing-cookie-banner p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: .9rem !important;
    line-height: 1.45 !important;
}

.landing-cookie-banner button {
    min-height: 48px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #0f766e !important;
    color: #fff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

@media (max-width: 1180px) {
    .commercial-landing .landing-nav-clean,
    .commercial-landing .landing-nav {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .commercial-landing .landing-nav-links,
    .commercial-landing .landing-nav-actions {
        justify-content: flex-start !important;
        overflow-x: auto !important;
    }

    .commercial-landing .landing-hero {
        grid-template-columns: 1fr !important;
        padding-top: 34px !important;
    }

    .commercial-landing .landing-hero-copy h1 {
        font-size: clamp(3.1rem, 12vw, 5.4rem) !important;
    }
}

@media (max-width: 760px) {
    .commercial-landing .landing-demo-trio {
        padding: 18px !important;
    }

    .commercial-landing .demo-trio-grid,
    .commercial-landing .demo-billing {
        grid-template-columns: 1fr !important;
    }

    .commercial-landing .demo-trio-panel li {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    .commercial-landing .demo-trio-panel li em {
        display: none !important;
    }

    .landing-cookie-banner {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: auto !important;
        grid-template-columns: 1fr !important;
    }
}

/* Landing 3.1: hero as a premium product grid, not a split mockup. */
.commercial-landing .landing-nav-clean,
.commercial-landing .landing-nav {
    min-height: 84px !important;
    grid-template-columns: 180px 1fr auto !important;
    padding: 14px 18px 14px 24px !important;
}

.commercial-landing .landing-nav-links {
    padding: 6px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 20px !important;
    background: rgba(248, 250, 252, .8) !important;
}

.commercial-landing .landing-nav-links a {
    min-width: 128px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    color: #1f2937 !important;
    font-size: 1.04rem !important;
    font-weight: 900 !important;
}

.commercial-landing .landing-nav-links a:hover {
    background: #ecfdf5 !important;
    color: #0f766e !important;
}

.commercial-landing .landing-link-button {
    min-width: 148px !important;
    border: 1px solid rgba(15, 23, 42, .1) !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

.commercial-landing .landing-hero {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 26px !important;
    min-height: auto !important;
    padding-top: clamp(42px, 5.5vh, 72px) !important;
}

.commercial-landing .landing-hero-copy {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 28px !important;
    padding: clamp(28px, 4vw, 54px) !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(20, 184, 166, .14), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .9)) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .08) !important;
}

.commercial-landing .landing-hero-copy .landing-eyebrow,
.commercial-landing .landing-hero-copy h1,
.commercial-landing .landing-hero-copy .landing-lead,
.commercial-landing .landing-hero-copy .landing-sector-proof,
.commercial-landing .landing-hero-copy .landing-theme-note {
    grid-column: 1 / 2 !important;
}

.commercial-landing .landing-hero-copy h1 {
    max-width: 1050px !important;
    font-size: clamp(3.8rem, 6vw, 7.15rem) !important;
    line-height: .93 !important;
}

.commercial-landing .landing-hero-copy .landing-theme-note {
    margin-top: -4px !important;
    font-size: 1.04rem !important;
}

.commercial-landing .landing-hero-copy .landing-sector-proof {
    display: none !important;
}

.commercial-landing .landing-hero-actions {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 5 !important;
    align-self: end !important;
    justify-self: end !important;
    flex-direction: column !important;
    min-width: 220px !important;
    margin: 0 !important;
}

.commercial-landing .landing-hero-actions .landing-button {
    width: 100% !important;
}

.commercial-landing .landing-demo-trio {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(24px, 3vw, 38px) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(20, 184, 166, .28), transparent 30%),
        linear-gradient(135deg, #0f172a 0%, #123f3d 100%) !important;
}

.commercial-landing .demo-trio-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
}

.commercial-landing .demo-trio-header p {
    max-width: none !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: clamp(1.25rem, 2vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.commercial-landing .demo-trio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 24px) !important;
}

.commercial-landing .demo-trio-panel {
    min-height: 300px !important;
    display: grid !important;
    align-content: start !important;
    padding: clamp(18px, 2vw, 28px) !important;
    border-radius: 28px !important;
}

.commercial-landing .demo-trio-panel > div:first-child {
    min-height: 44px !important;
}

.commercial-landing .demo-trio-panel > div:first-child span {
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: .82rem !important;
}

.commercial-landing .demo-trio-panel > div:first-child strong {
    color: #0f766e !important;
    font-size: 1.02rem !important;
}

.commercial-landing .demo-trio-panel li {
    min-height: 54px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.commercial-landing .demo-billing {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    min-height: 300px !important;
}

.commercial-landing .demo-billing-number b {
    font-size: clamp(2.7rem, 4vw, 4.4rem) !important;
}

.commercial-landing .demo-mini-bars {
    height: 118px !important;
}

@media (max-width: 1100px) {
    .commercial-landing .landing-nav-clean,
    .commercial-landing .landing-nav {
        grid-template-columns: 1fr !important;
    }

    .commercial-landing .landing-hero-copy {
        grid-template-columns: 1fr !important;
    }

    .commercial-landing .landing-hero-actions {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: start !important;
        flex-direction: row !important;
        min-width: 0 !important;
    }

    .commercial-landing .demo-trio-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Clinc unified polish pass: jade premium, compact commerce and scalable admin tables. */
:root {
    --clinc-primary: #0f766e;
    --clinc-primary-hover: #115e59;
    --clinc-primary-soft: #ccfbf1;
    --clinc-primary-line: #99f6e4;
    --clinc-ink: #0f172a;
    --clinc-muted: #64748b;
    --clinc-bg: #f8fafc;
    --clinc-panel: #ffffff;
    --clinc-border: #dbe7ef;
}

.landing-vertical-general {
    --landing-accent: var(--clinc-primary) !important;
    --landing-soft: var(--clinc-primary-soft) !important;
    --landing-dark: var(--clinc-ink) !important;
}

.landing-nav {
    max-width: min(1760px, calc(100vw - 32px)) !important;
    min-height: 74px !important;
    padding: .8rem 1rem !important;
    border-radius: 28px !important;
}

.landing-brand img {
    width: 138px !important;
    height: auto !important;
    object-fit: contain !important;
}

.landing-nav-links {
    gap: clamp(1.4rem, 4vw, 4.8rem) !important;
}

.landing-nav-actions {
    gap: .7rem !important;
    margin-left: auto !important;
}

.landing-button,
.landing-link-button,
.button,
.table-action {
    letter-spacing: 0 !important;
}

.landing-button.primary,
.landing-button.secondary,
.landing-button.large {
    border-radius: 18px !important;
    min-height: 54px !important;
    padding: 0 1.55rem !important;
}

.landing-button.primary {
    background: var(--clinc-primary) !important;
    border-color: var(--clinc-primary) !important;
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(15, 118, 110, .18) !important;
}

.landing-button.secondary {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: var(--clinc-ink) !important;
}

.landing-link-button {
    color: #475569 !important;
}

.landing-commercial-hero {
    max-width: min(1760px, calc(100vw - 48px)) !important;
    min-height: calc(100svh - 130px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .82fr) !important;
    gap: clamp(2rem, 5vw, 5rem) !important;
    align-items: center !important;
    padding: clamp(2rem, 5vw, 4rem) 1rem clamp(1.5rem, 3vw, 2.4rem) !important;
    overflow: hidden !important;
}

.landing-hero-copy {
    max-width: 900px !important;
}

.landing-hero-copy h1 {
    font-size: clamp(4.2rem, 7.2vw, 8.6rem) !important;
    line-height: .94 !important;
    max-width: 950px !important;
    margin-bottom: 1.4rem !important;
}

.landing-lead {
    max-width: 880px !important;
    font-size: clamp(1.2rem, 1.55vw, 1.65rem) !important;
    line-height: 1.42 !important;
    color: #475569 !important;
}

.landing-sector-proof,
.landing-sector-section,
.landing-sector-choice {
    display: none !important;
}

.landing-theme-note {
    max-width: 760px !important;
    margin-top: .75rem !important;
    color: #64748b !important;
    font-size: 1rem !important;
}

.landing-hero-actions {
    gap: .9rem !important;
    margin-top: 1.8rem !important;
}

.landing-product-peek {
    width: min(100%, 680px) !important;
    justify-self: center !important;
    min-height: 0 !important;
    max-height: min(720px, calc(100svh - 170px)) !important;
    padding: clamp(1.5rem, 2vw, 2.2rem) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 92% 5%, rgba(20, 184, 166, .34), transparent 34%),
        linear-gradient(145deg, #0f172a, #0f3f3a) !important;
    overflow: hidden !important;
}

.landing-product-peek > strong {
    display: block !important;
    font-size: clamp(2rem, 3vw, 3.65rem) !important;
    line-height: .98 !important;
    max-width: 620px !important;
    margin: 1.1rem 0 1rem !important;
}

.peek-window {
    height: clamp(280px, 37svh, 410px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
}

.peek-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(160px, 1.25fr) minmax(90px, .75fr) !important;
    gap: .8rem !important;
    height: calc(100% - 38px) !important;
    padding: .85rem !important;
}

.peek-agenda {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
}

.peek-calendar {
    min-height: 145px !important;
    overflow: hidden !important;
}

.peek-clients,
.peek-chart {
    min-height: 92px !important;
    overflow: hidden !important;
}

.peek-people span:nth-child(n+2) {
    display: none !important;
}

.peek-micro-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .7rem !important;
    margin-top: 1rem !important;
}

.peek-micro-tabs button {
    min-width: 0 !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,.88) !important;
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.08) !important;
}

.peek-micro-tabs button.is-active {
    background: rgba(204, 251, 241, .18) !important;
    border-color: rgba(153, 246, 228, .55) !important;
    color: #fff !important;
}

.peek-micro-tabs small {
    display: none !important;
}

.landing-service-tour,
.landing-pricing-section,
#acceso {
    max-width: min(1760px, calc(100vw - 48px)) !important;
    border-radius: 30px !important;
    padding: clamp(1.6rem, 3vw, 3rem) !important;
}

.landing-section-heading h2 {
    font-size: clamp(3rem, 5vw, 5.6rem) !important;
    line-height: .98 !important;
}

.landing-billing-toggle {
    width: fit-content !important;
    max-width: 100% !important;
    padding: .35rem !important;
    border-radius: 18px !important;
    background: #f1f5f9 !important;
    border: 1px solid #dbe7ef !important;
}

.landing-billing-toggle button {
    min-height: 48px !important;
    border-radius: 14px !important;
    color: #475569 !important;
    background: transparent !important;
}

.landing-billing-toggle button small {
    color: inherit !important;
    opacity: .85 !important;
}

.landing-billing-toggle button.is-active {
    background: var(--clinc-primary) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .18) !important;
}

.landing-plan-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    overflow: visible !important;
}

.landing-plan-card {
    min-width: 0 !important;
    border-radius: 28px !important;
}

.landing-plan-card .landing-button {
    margin-top: auto !important;
}

.landing-guide-drawer {
    position: fixed !important;
    z-index: 10000 !important;
    inset: auto 32px 32px auto !important;
    width: min(520px, calc(100vw - 40px)) !important;
    max-height: min(760px, calc(100svh - 64px)) !important;
    overflow: auto !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .2) !important;
    transition: opacity .22s ease, transform .22s ease !important;
}

.landing-guide-drawer[hidden] {
    display: none !important;
}

.landing-guide-drawer::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.landing-guide-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .6rem !important;
}

.landing-guide-progress button,
.landing-guide-actions .landing-button {
    min-height: 46px !important;
}

.landing-guide-progress button.is-active {
    background: var(--clinc-primary-soft) !important;
    color: #0f766e !important;
}

/* Register flow: no horizontal scroll, legal as modal, payment after value. */
body:has(.register-builder-v3) {
    background: radial-gradient(circle at 0 0, rgba(204, 251, 241, .45), transparent 32%), #f8fafc !important;
}

@media (min-width: 1100px) {
    body:has(.register-builder-v3) {
        overflow: hidden !important;
    }

    .main:has(.register-builder-v3) {
        min-height: 100svh !important;
        height: 100svh !important;
        overflow: hidden !important;
        padding: 12px !important;
    }

    .register-builder-v3 {
        height: calc(100svh - 24px) !important;
        max-width: 1720px !important;
        grid-template-columns: minmax(300px, .34fr) minmax(0, 1fr) !important;
        gap: 16px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .register-builder-v3 .register-builder-copy {
        min-height: 0 !important;
        padding: clamp(1.4rem, 2vw, 2.2rem) !important;
        align-content: center !important;
    }

    .register-builder-v3 .register-builder-copy img {
        width: 156px !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(2.4rem, 3.2vw, 4rem) !important;
        line-height: 1.05 !important;
    }

    .register-builder-v3 .register-builder-copy p {
        font-size: clamp(1rem, 1.3vw, 1.35rem) !important;
        line-height: 1.45 !important;
    }

    .register-builder-form.is-wizard {
        height: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        padding: 14px !important;
        gap: 10px !important;
        overflow: hidden !important;
    }

    .register-wizard-progress {
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
        gap: 6px !important;
        padding: 7px !important;
        border-radius: 24px !important;
    }

    .register-wizard-progress button {
        min-height: 48px !important;
        padding: 5px !important;
        border-radius: 18px !important;
    }

    .register-builder-form.is-wizard .register-section.is-active {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: clamp(1rem, 1.5vw, 1.5rem) !important;
    }

    .register-form-grid,
    .register-term-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .register-plan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .register-extra-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .register-plan-card,
    .register-extra-card,
    .register-term-card {
        min-height: 0 !important;
    }

    .legal-consent-compact .legal-consent-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .legal-consent-compact .legal-consent-card {
        min-height: 0 !important;
        padding: 1rem !important;
    }

    .register-submit-row {
        min-height: 68px !important;
        padding: .7rem .9rem !important;
        border-radius: 22px !important;
    }
}

.register-term-card input:checked + span,
.register-extra-card input:checked + span {
    border-color: var(--clinc-primary-line) !important;
    background: #ecfdf5 !important;
    color: var(--clinc-ink) !important;
}

.register-term-card input:checked + span strong,
.register-term-card input:checked + span small,
.register-extra-card input:checked + span strong,
.register-extra-card input:checked + span small {
    color: var(--clinc-ink) !important;
}

.legal-modal {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 10050 !important;
    padding: 26px !important;
    background: rgba(15, 23, 42, .46) !important;
    backdrop-filter: blur(16px) !important;
}

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

.legal-modal-panel {
    position: relative !important;
    inset: auto !important;
    width: min(980px, calc(100vw - 52px)) !important;
    max-height: min(780px, calc(100svh - 52px)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

.legal-modal-panel .legal-scroll-box {
    overflow: auto !important;
    min-height: 0 !important;
}

/* Platform companies: scalable table and calmer company management. */
.company-index-v3 {
    display: grid !important;
    gap: 1rem !important;
}

.company-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .8fr) minmax(220px, 1fr) auto auto !important;
    align-items: end !important;
}

.company-table-shell {
    overflow: auto !important;
    border: 1px solid var(--clinc-border) !important;
    border-radius: 24px !important;
    background: #fff !important;
}

.company-table {
    width: 100% !important;
    min-width: 1060px !important;
    border-collapse: collapse !important;
}

.company-table th {
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: .76rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    padding: .95rem 1rem !important;
}

.company-table td {
    padding: .9rem 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
    color: var(--clinc-ink) !important;
    vertical-align: middle !important;
}

.company-table tbody tr:hover {
    background: #ecfdf5 !important;
}

.company-cell-main {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}

.company-cell-main span:last-child,
.company-table td {
    min-width: 0 !important;
}

.company-cell-main strong,
.company-table strong {
    color: var(--clinc-ink) !important;
}

.company-table small {
    display: block !important;
    color: #64748b !important;
    margin-top: .2rem !important;
}

.status-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
    background: #94a3b8 !important;
}

.status-dot.is-success { background: #10b981 !important; }
.status-dot.is-warning { background: #f59e0b !important; }
.status-dot.is-danger { background: #ef4444 !important; }

.status-pill.is-success {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.status-pill.is-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.status-pill.is-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.company-plan-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 .75rem !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
}

.company-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .45rem !important;
    white-space: nowrap !important;
}

.company-row-actions form {
    margin: 0 !important;
}

.company-row-actions .table-action {
    min-height: 38px !important;
    min-width: 98px !important;
    border-radius: 12px !important;
    padding: 0 .85rem !important;
}

.company-row-actions .table-action.primary {
    background: var(--clinc-primary) !important;
    color: #fff !important;
    border-color: var(--clinc-primary) !important;
}

.company-show-v3 {
    display: grid !important;
    gap: 1rem !important;
}

.company-command {
    display: flex !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    align-items: center !important;
}

.company-command-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
}

.company-command-actions form {
    margin: 0 !important;
}

.company-command-actions .button {
    min-width: 98px !important;
}

.company-health-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.company-health-grid article {
    background: #fff !important;
    border: 1px solid var(--clinc-border) !important;
    border-radius: 24px !important;
    padding: 1.1rem !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

.company-health-grid span {
    display: block !important;
    color: #94a3b8 !important;
    font-size: .78rem !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

.company-health-grid strong {
    display: block !important;
    margin-top: .45rem !important;
    font-size: clamp(1.55rem, 2vw, 2.2rem) !important;
    color: var(--clinc-ink) !important;
}

.company-health-grid small {
    color: #64748b !important;
}

.company-health-grid article.is-success { border-color: #86efac !important; background: #f0fdf4 !important; }
.company-health-grid article.is-warning { border-color: #fde68a !important; background: #fffbeb !important; }
.company-health-grid article.is-danger { border-color: #fecaca !important; background: #fef2f2 !important; }

.company-manager-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr) !important;
    gap: 1rem !important;
    align-items: start !important;
}

.company-subscription-simple,
.company-users-simple {
    display: grid !important;
    gap: 1rem !important;
}

.company-subscription-controls {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .8rem !important;
}

.company-payment-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .7rem !important;
}

.company-payment-strip span,
.module-mini-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: .85rem !important;
}

.company-payment-strip small,
.module-mini-card small {
    display: block !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

.company-payment-strip b,
.module-mini-card strong {
    color: var(--clinc-ink) !important;
}

.module-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .65rem !important;
}

.module-mini-card {
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
    cursor: pointer !important;
}

.module-mini-card input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--clinc-primary) !important;
}

.module-mini-card.is-enabled {
    border-color: var(--clinc-primary-line) !important;
    background: #ecfdf5 !important;
}

.company-user-list {
    display: grid !important;
    gap: .75rem !important;
}

.company-user-list article {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: .75rem !important;
    align-items: center !important;
    padding: .8rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #fff !important;
}

.company-user-list article em {
    grid-column: 2 / -1 !important;
    font-style: normal !important;
    color: #64748b !important;
    font-size: .88rem !important;
}

.user-avatar {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: var(--clinc-primary-soft) !important;
    color: #134e4a !important;
    font-weight: 900 !important;
}

.role-pill {
    min-height: 30px !important;
    padding: 0 .7rem !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
}

/* Do not let old vertical experiments make the ERP unreadable. */
body[class*="vertical-"] .main,
body[class*="vertical-"] main,
body[class*="vertical-"] .panel,
body[class*="vertical-"] .calendar-focus-shell,
body[class*="vertical-"] .calendar-shell,
body[class*="vertical-"] .owner-dashboard-v2 {
    background: var(--clinc-bg) !important;
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .panel,
body[class*="vertical-"] .metric-card,
body[class*="vertical-"] .owner-kpi-card,
body[class*="vertical-"] .calendar-focus-header,
body[class*="vertical-"] .calendar-focus-grid {
    background: #fff !important;
    border-color: var(--clinc-border) !important;
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .button.primary,
body[class*="vertical-"] .table-action.primary {
    background: var(--clinc-primary) !important;
    border-color: var(--clinc-primary) !important;
    color: #fff !important;
}

@media (max-width: 1180px) {
    .landing-commercial-hero,
    .company-manager-grid,
    .company-health-grid {
        grid-template-columns: 1fr !important;
    }

    .landing-product-peek {
        max-height: none !important;
    }

    .company-filter-bar,
    .company-subscription-controls,
    .company-payment-strip,
    .module-mini-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Final lock - unified Clinc jade system, Stripe-first stats and compact conversion flow. */
:root {
    --clinc-jade: #0f766e;
    --clinc-jade-hover: #115e59;
    --clinc-jade-soft: #ccfbf1;
    --clinc-bg: #f8fafc;
    --clinc-soft-bg: #f1f5f9;
    --clinc-card: #ffffff;
    --clinc-ink: #0f172a;
    --clinc-muted: #64748b;
    --clinc-border: #dbe7ef;
}

body[class*="vertical-"] {
    --vertical-accent: var(--clinc-jade) !important;
    --vertical-soft: var(--clinc-jade-soft) !important;
    --vertical-dark: var(--clinc-ink) !important;
    --vertical-surface: var(--clinc-card) !important;
    --vertical-bg: var(--clinc-bg) !important;
    --vertical-surface-soft: var(--clinc-soft-bg) !important;
    --vertical-text: var(--clinc-ink) !important;
    --vertical-muted: var(--clinc-muted) !important;
    --vertical-sidebar: #0f172a !important;
    background: var(--clinc-bg) !important;
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .main {
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.12), transparent 26rem),
        linear-gradient(135deg, #f8fafc 0%, #eefdfa 100%) !important;
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .topbar,
body[class*="vertical-"] .metric-card,
body[class*="vertical-"] .panel,
body[class*="vertical-"] .card,
body[class*="vertical-"] .dashboard-card,
body[class*="vertical-"] .owner-panel,
body[class*="vertical-"] .invoice-panel,
body[class*="vertical-"] .company-show-v2 > section,
body[class*="vertical-"] .calendar-focus-shell,
body[class*="vertical-"] .support-admin-card,
body[class*="vertical-"] .settings-panel,
body[class*="vertical-"] .task-card {
    background: var(--clinc-card) !important;
    border: 1px solid var(--clinc-border) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .topbar h1,
body[class*="vertical-"] h1,
body[class*="vertical-"] h2,
body[class*="vertical-"] h3,
body[class*="vertical-"] .metric-card strong,
body[class*="vertical-"] .metric-card span,
body[class*="vertical-"] .dashboard-card strong,
body[class*="vertical-"] .dashboard-card span {
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] p,
body[class*="vertical-"] small,
body[class*="vertical-"] .notes,
body[class*="vertical-"] .metric-card small,
body[class*="vertical-"] .eyebrow {
    color: var(--clinc-muted) !important;
}

body[class*="vertical-"] .button.primary,
body[class*="vertical-"] button[type="submit"].button,
body[class*="vertical-"] .nav a.active,
body[class*="vertical-"] .nav-locked.active {
    background: var(--clinc-jade) !important;
    border-color: var(--clinc-jade) !important;
    color: #ffffff !important;
}

body[class*="vertical-"] .button.primary:hover,
body[class*="vertical-"] button[type="submit"].button:hover {
    background: var(--clinc-jade-hover) !important;
    border-color: var(--clinc-jade-hover) !important;
}

body[class*="vertical-"] .nav a.active .nav-icon,
body[class*="vertical-"] .nav-locked.active .nav-icon {
    background: rgba(255, 255, 255, 0.13) !important;
    color: #ccfbf1 !important;
}

body[class*="vertical-"] input:focus,
body[class*="vertical-"] select:focus,
body[class*="vertical-"] textarea:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18) !important;
}

body[class*="vertical-"] .calendar-focus-shell,
body[class*="vertical-"] .pro-calendar,
body[class*="vertical-"] .calendar-grid,
body[class*="vertical-"] .calendar-column,
body[class*="vertical-"] .calendar-day-lane,
body[class*="vertical-"] .calendar-time-rail {
    background: #ffffff !important;
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .calendar-time-rail strong,
body[class*="vertical-"] .calendar-column header strong,
body[class*="vertical-"] .calendar-event strong {
    color: var(--clinc-ink) !important;
}

body[class*="vertical-"] .calendar-event {
    background: #ffffff !important;
    border-color: rgba(15, 118, 110, 0.22) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}

.stats-shell .revenue-headline {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: end !important;
    gap: 0.25rem 1rem !important;
}

.stats-shell .revenue-headline small {
    grid-column: 1 / -1 !important;
    color: var(--clinc-muted) !important;
    font-size: 0.82rem !important;
}

.company-show-v2 > .metric-grid {
    display: none !important;
}

.company-command {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 1rem !important;
}

.company-command h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem) !important;
    line-height: 1 !important;
}

.company-command-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0.65rem !important;
}

.company-command-actions .button,
.company-command-actions button {
    min-width: 118px !important;
    justify-content: center !important;
}

.company-stripe-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.65fr) auto !important;
    align-items: center !important;
    gap: 1rem !important;
}

.subscription-console {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr) !important;
}

.contract-services-panel .contract-service-grid {
    max-height: 360px !important;
    overflow-y: auto !important;
    padding-right: 0.25rem !important;
}

.commercial-landing {
    --landing-accent: var(--clinc-jade) !important;
    --landing-soft: var(--clinc-jade-soft) !important;
    --landing-dark: var(--clinc-ink) !important;
    --landing-text: var(--clinc-ink) !important;
    --landing-muted: var(--clinc-muted) !important;
    overflow-x: hidden !important;
}

body.commercial-landing .landing-nav {
    width: min(1760px, calc(100% - 32px)) !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: clamp(1rem, 3vw, 3rem) !important;
    align-items: center !important;
}

body.commercial-landing .landing-nav-links {
    justify-content: center !important;
}

body.commercial-landing .landing-nav-actions {
    justify-content: flex-end !important;
}

body.commercial-landing .landing-commercial-hero {
    width: min(1760px, calc(100% - 48px)) !important;
    min-height: calc(100dvh - 116px) !important;
    padding: clamp(22px, 4vw, 56px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.78fr) !important;
    align-items: center !important;
    gap: clamp(2rem, 4vw, 5rem) !important;
    overflow: hidden !important;
}

body.commercial-landing .landing-commercial-hero .landing-hero-copy {
    max-width: 900px !important;
}

body.commercial-landing .landing-commercial-hero h1 {
    max-width: 900px !important;
    font-size: clamp(3.7rem, 5.2vw, 6.15rem) !important;
    line-height: 0.94 !important;
    letter-spacing: 0 !important;
}

body.commercial-landing .landing-commercial-hero .landing-lead {
    max-width: 930px !important;
    font-size: clamp(1.15rem, 1.35vw, 1.5rem) !important;
    line-height: 1.48 !important;
}

body.commercial-landing .landing-button.primary,
body.commercial-landing .landing-button.primary.large,
body.commercial-landing .landing-hero-actions .landing-button.primary {
    background: var(--clinc-jade) !important;
    border-color: var(--clinc-jade) !important;
    color: #ffffff !important;
}

body.commercial-landing .landing-button.secondary,
body.commercial-landing .landing-link-button {
    background: #ffffff !important;
    color: var(--clinc-ink) !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

body.commercial-landing .landing-product-peek {
    height: min(620px, calc(100dvh - 155px)) !important;
    min-height: 500px !important;
    max-height: 620px !important;
    padding: clamp(22px, 2.2vw, 34px) !important;
    border-radius: 42px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 90% 8%, rgba(20, 184, 166, 0.34), transparent 16rem),
        linear-gradient(145deg, #0f172a 0%, #123f3b 100%) !important;
}

body.commercial-landing .landing-product-peek > strong {
    font-size: clamp(2rem, 2.55vw, 3.25rem) !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
}

body.commercial-landing .landing-product-peek > small {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(0.92rem, 1vw, 1.05rem) !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

body.commercial-landing .peek-window {
    height: 292px !important;
    overflow: hidden !important;
}

body.commercial-landing .peek-grid {
    grid-template-rows: minmax(0, 1fr) 72px !important;
}

body.commercial-landing .peek-micro-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    transform: none !important;
}

body.commercial-landing .peek-micro-tabs button {
    min-width: 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

body.commercial-landing .peek-micro-tabs button.is-active,
body.commercial-landing .peek-micro-tabs button:hover {
    background: rgba(20, 184, 166, 0.22) !important;
    border-color: rgba(153, 246, 228, 0.62) !important;
    color: #ffffff !important;
}

body.commercial-landing .landing-guide-drawer[hidden] {
    display: none !important;
}

body.commercial-landing .landing-guide-drawer {
    position: fixed !important;
    z-index: 12000 !important;
    right: clamp(18px, 3vw, 42px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 42px) !important;
    overflow: auto !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--clinc-border) !important;
    border-radius: 32px !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.24) !important;
    filter: none !important;
    backdrop-filter: blur(18px) !important;
}

body.commercial-landing.guide-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 11990 !important;
    background: rgba(15, 23, 42, 0.22) !important;
    backdrop-filter: blur(3px) !important;
}

.register-builder {
    width: min(1680px, calc(100% - 28px)) !important;
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(340px, 0.36fr) minmax(0, 1fr) !important;
    gap: 1.25rem !important;
}

.register-builder-copy {
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(26px, 3vw, 56px) !important;
    justify-content: center !important;
}

.register-builder-copy h2 {
    font-size: clamp(2.6rem, 3.25vw, 4.2rem) !important;
    line-height: 1.05 !important;
}

.register-builder-copy p {
    max-width: 420px !important;
}

.register-builder-form.is-wizard {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

.register-wizard-progress {
    min-height: 78px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.register-builder-form.is-wizard .register-section {
    min-height: 0 !important;
}

.register-builder-form.is-wizard .register-section.is-active {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(1rem, 2vw, 1.75rem) !important;
}

.register-section.compact {
    min-height: 0 !important;
}

.register-theme-step {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.82fr) !important;
    gap: 1.1rem !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.register-theme-step .vertical-style-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
    overflow: hidden !important;
}

.vertical-style-card {
    min-height: 148px !important;
    padding: 1.25rem !important;
    border-color: var(--clinc-border) !important;
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
}

.vertical-style-card::after {
    background: rgba(20, 184, 166, 0.12) !important;
}

.vertical-style-card:has(input:checked) {
    border-color: var(--clinc-jade) !important;
    background: linear-gradient(145deg, #ecfdf5, #ffffff) !important;
    box-shadow: 0 18px 42px rgba(15, 118, 110, 0.12) !important;
}

.vertical-style-swatch {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
}

.register-theme-preview {
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-color: rgba(15, 118, 110, 0.22) !important;
}

.register-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    overflow: hidden !important;
}

.register-plan-grid .plan-card {
    min-height: 0 !important;
    padding: 1.4rem !important;
}

.legal-consent-compact .legal-consent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.legal-consent-compact .legal-consent-card {
    min-height: 0 !important;
    padding: 1.35rem !important;
}

.legal-short-copy {
    max-height: 8.8rem !important;
    overflow: hidden !important;
}

.legal-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 1.25rem !important;
    background: rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(16px) !important;
}

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

.legal-modal-panel {
    width: min(1000px, calc(100vw - 40px)) !important;
    height: min(760px, calc(100dvh - 40px)) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    background: #ffffff !important;
    border: 1px solid var(--clinc-border) !important;
    border-radius: 28px !important;
    box-shadow: 0 34px 100px rgba(15, 23, 42, 0.28) !important;
}

.legal-modal-panel .legal-scroll-box {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.auth-premium {
    min-height: calc(100dvh - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: hidden !important;
    grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 0.8fr) !important;
    align-items: center !important;
    gap: clamp(1.5rem, 3vw, 3.5rem) !important;
    padding: clamp(1rem, 2.5vw, 2.5rem) !important;
}

.auth-premium-copy,
.auth-premium-card {
    min-height: 0 !important;
    height: auto !important;
}

.auth-premium-copy {
    padding: clamp(2rem, 4vw, 4rem) !important;
}

.auth-premium-copy img {
    width: clamp(150px, 11vw, 220px) !important;
    height: auto !important;
    object-fit: contain !important;
}

.auth-premium-copy h2 {
    font-size: clamp(3.4rem, 5vw, 6.2rem) !important;
    line-height: 0.96 !important;
}

.auth-premium-card {
    padding: clamp(2rem, 3.2vw, 3.6rem) !important;
}

.auth-premium-card input {
    min-height: 58px !important;
}

@media (max-width: 1280px) {
    body.commercial-landing .landing-commercial-hero {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    body.commercial-landing .landing-product-peek {
        height: auto !important;
        min-height: 0 !important;
    }

    .register-builder,
    .auth-premium {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        grid-template-columns: 1fr !important;
    }
}

/* Final palette application */
body {
    background:
        radial-gradient(circle at 4% 0%, rgba(20, 184, 166, 0.10), transparent 28rem),
        var(--erp-bg) !important;
}

.sidebar {
    border-right-color: rgba(15, 23, 42, 0.72) !important;
    background: var(--erp-sidebar-bg) !important;
}

.brand-title {
    color: #ffffff !important;
}

.brand-subtitle,
.nav-label {
    color: var(--erp-sidebar-text) !important;
}

.brand-mark {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
}

.nav a,
.nav-locked {
    color: var(--erp-sidebar-text) !important;
}

.nav a:hover {
    background: var(--erp-sidebar-hover) !important;
    color: #ffffff !important;
}

.nav a.active {
    border-color: rgba(153, 246, 228, 0.2) !important;
    background: var(--erp-sidebar-active) !important;
    color: var(--erp-sidebar-active-text, #ffffff) !important;
}

.nav a.active .nav-icon {
    background: rgba(255, 255, 255, 0.12) !important;
}

.button.primary,
.landing-button.primary,
.table-action.primary,
button.primary {
    border-color: var(--erp-primary) !important;
    background: var(--erp-primary) !important;
    color: #ffffff !important;
}

.button.primary:hover,
.landing-button.primary:hover,
.table-action.primary:hover {
    border-color: var(--erp-primary-hover) !important;
    background: var(--erp-primary-hover) !important;
}

.button.primary:active,
.landing-button.primary:active,
.table-action.primary:active {
    border-color: var(--erp-primary-active) !important;
    background: var(--erp-primary-active) !important;
}

.button.ghost,
.table-action,
.segmented-control a {
    border-color: var(--erp-line-strong) !important;
    background: #ffffff !important;
    color: var(--erp-text) !important;
}

.button.ghost:hover,
.table-action:hover,
.segmented-control a:hover {
    background: var(--erp-hover) !important;
    color: var(--erp-primary-active) !important;
}

.segmented-control a.active,
.button.secondary {
    border-color: var(--erp-secondary) !important;
    background: var(--erp-secondary) !important;
    color: var(--erp-primary-active) !important;
}

.button.warning,
.table-action.warning {
    border-color: var(--erp-warning) !important;
    background: var(--erp-warning) !important;
    color: #ffffff !important;
}

.button.danger,
.table-action.danger {
    border-color: var(--erp-danger) !important;
    background: var(--erp-danger) !important;
    color: #ffffff !important;
}

input,
select,
textarea {
    border-color: var(--erp-line-strong) !important;
    background: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--erp-subtle) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--erp-accent) !important;
    box-shadow: var(--erp-focus) !important;
    outline: none !important;
}

table thead,
.pro-calendar-column-head,
.pro-calendar-corner {
    background: var(--erp-surface-soft) !important;
}

table tr:hover td {
    background: var(--erp-hover) !important;
}

table th,
table td {
    border-color: var(--erp-line) !important;
}

.badge,
.event-payment.is-paid,
.badge.is-success {
    border-color: #bbf7d0 !important;
    background: #dcfce7 !important;
    color: #166534 !important;
}

.event-payment.is-pending,
.badge.warning,
.status-row.is-warning {
    border-color: #fde68a !important;
    background: #fef3c7 !important;
    color: #92400e !important;
}

.badge.danger,
.is-blocked .badge,
.event-payment.is-cancelled {
    border-color: #fecaca !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.pro-calendar .calendar-event {
    --event-color: var(--erp-accent);
}

.pro-calendar .calendar-event[data-status*="completed"] {
    --event-color: var(--erp-success);
}

.pro-calendar .calendar-event[data-status*="cancelled"] {
    --event-color: var(--erp-danger);
}

.pro-calendar .calendar-event[data-payment-status="pending"] {
    --event-color: var(--erp-warning);
}

.calendar-column.is-today,
.pro-calendar-column.is-today .pro-calendar-column-head,
.task-calendar-month article.is-today,
.task-calendar-time article.is-today header {
    background: #ccfbf1 !important;
}

.shared-line-chart,
.chart-panel,
.landing-calendar-preview {
    background: var(--erp-bg) !important;
}

.line-chart path,
.line-chart polyline,
svg [stroke="#635bff"],
svg [stroke="#111827"] {
    stroke: var(--erp-accent) !important;
}

/* Premium color concept cleanup: calm slate + teal, no purple active states. */
.sidebar-toggle {
    top: 104px !important;
    right: -14px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 54px !important;
    min-height: 54px !important;
    border: 2px solid rgba(153, 246, 228, 0.55) !important;
    border-radius: 16px 0 0 16px !important;
    background: #0b1220 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.32) !important;
}

.sidebar-toggle:hover {
    border-color: #99f6e4 !important;
    background: #134e4a !important;
}

body.sidebar-collapsed .sidebar-toggle {
    right: -14px !important;
}

.sidebar-toggle-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.nav a.active {
    border-color: rgba(20, 184, 166, 0.38) !important;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.88), rgba(19, 78, 74, 0.92)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(153, 246, 228, 0.08), 0 10px 22px rgba(15, 118, 110, 0.18) !important;
}

.nav a.active .nav-icon {
    background: rgba(153, 246, 228, 0.16) !important;
    color: #ccfbf1 !important;
}

.nav a.active .nav-icon svg,
.nav a.active svg {
    color: #ccfbf1 !important;
    stroke: currentColor !important;
}

.nav a:hover .nav-icon {
    background: rgba(153, 246, 228, 0.10) !important;
    color: #99f6e4 !important;
}

.team-card {
    border-left: 4px solid var(--employee-color, #14B8A6) !important;
}

.employee-color-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    background: var(--employee-color, #14B8A6);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--employee-color, #14B8A6) 28%, transparent);
    vertical-align: middle;
}

input[type="color"] {
    min-height: 42px !important;
    padding: 4px !important;
    cursor: pointer;
}

/* Final sidebar correction: internal toggle and no purple residue. */
.sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

.sidebar-toggle,
body.sidebar-collapsed .sidebar-toggle {
    position: static !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border: 1px solid rgba(153, 246, 228, 0.34) !important;
    border-radius: 14px !important;
    background: rgba(15, 118, 110, 0.18) !important;
    color: #ccfbf1 !important;
    box-shadow: none !important;
}

.sidebar-toggle:hover,
body.sidebar-collapsed .sidebar-toggle:hover {
    border-color: rgba(153, 246, 228, 0.72) !important;
    background: rgba(15, 118, 110, 0.42) !important;
}

.sidebar .nav a.active,
.sidebar .nav a[aria-current="page"] {
    border-color: rgba(153, 246, 228, 0.32) !important;
    background: #134e4a !important;
    color: #ffffff !important;
}

.sidebar .nav a.active .nav-icon,
.sidebar .nav a[aria-current="page"] .nav-icon {
    background: rgba(153, 246, 228, 0.16) !important;
    color: #99f6e4 !important;
}

.sidebar .nav a.active .nav-icon svg,
.sidebar .nav a.active svg,
.sidebar .nav a[aria-current="page"] svg {
    color: #99f6e4 !important;
    stroke: #99f6e4 !important;
}

.sidebar .nav a:hover .nav-icon svg {
    color: #ccfbf1 !important;
    stroke: #ccfbf1 !important;
}

.sidebar .nav-icon svg [stroke],
.sidebar .nav a.active .nav-icon svg [stroke] {
    stroke: currentColor !important;
}

.sidebar .nav-icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.sidebar .nav a.active * {
    --tw-text-opacity: 1 !important;
}

body.sidebar-collapsed .brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
}

body.sidebar-collapsed .sidebar-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
}

body.sidebar-collapsed .nav {
    gap: 7px !important;
    padding-top: 8px !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 10px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
}

body.sidebar-collapsed .sidebar-toggle-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.task-calendar-create {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.9fr) 150px 140px auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
}

.task-calendar-create[hidden] {
    display: none !important;
}

.task-calendar-create label {
    display: grid;
    gap: 6px;
    color: var(--erp-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.task-calendar-create input,
.task-calendar-create select,
.task-calendar-create textarea {
    min-height: 40px;
    border-radius: 12px;
}

.admin-task-form textarea,
.task-calendar-create textarea {
    width: 100%;
    border: 1px solid var(--erp-border);
    background: #ffffff;
    color: var(--erp-ink);
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.35;
}

.admin-task-form textarea:focus,
.task-calendar-create textarea:focus {
    outline: 2px solid rgba(20, 184, 166, 0.22);
    border-color: #14b8a6;
}

.admin-task-form .is-wide,
.task-calendar-create .is-wide {
    grid-column: 1 / -2;
}

.task-list article p,
.task-calendar-month a em,
.task-calendar-item em {
    display: block;
    margin: 4px 0 0;
    color: var(--erp-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .task-calendar-create {
        grid-template-columns: 1fr;
    }
}

/* Clinc final logo lockup: use the recortados as real images, no CSS cropping. */
.sidebar .sidebar-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 42px !important;
}

.sidebar .brand {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 178px !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.sidebar .brand-logo-full {
    position: static !important;
    display: block !important;
    width: 166px !important;
    height: 58px !important;
    overflow: visible !important;
}

.sidebar .brand-logo-mark {
    position: static !important;
    display: none !important;
    width: 48px !important;
    height: 48px !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

.sidebar .brand-logo-full img,
.sidebar .brand-logo-mark img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.sidebar .sidebar-toggle {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border: 1px solid rgba(153, 246, 228, 0.48) !important;
    border-radius: 18px !important;
    background: rgba(19, 78, 74, 0.72) !important;
    color: #e0fdfa !important;
    box-shadow: inset 0 0 0 4px rgba(20, 184, 166, 0.10), 0 14px 32px rgba(2, 6, 23, 0.18) !important;
}

.sidebar .sidebar-toggle:hover {
    border-color: rgba(153, 246, 228, 0.72) !important;
    background: rgba(15, 118, 110, 0.72) !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin-bottom: 34px !important;
}

body.sidebar-collapsed .sidebar .brand {
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
}

body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
}

/* LAST RULE - Clinc logo exact proportions. Do not place another sidebar logo rule below this. */
.sidebar .sidebar-head {
    display: grid !important;
    grid-template-columns: 120px 46px !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 42px !important;
    margin: 0 0 40px !important;
}

.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 120px !important;
    height: 52px !important;
    min-width: 120px !important;
    min-height: 52px !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar .brand-logo-full {
    display: block !important;
    width: 120px !important;
    height: 42px !important;
    min-width: 120px !important;
    overflow: visible !important;
}

.sidebar .brand-logo-mark {
    display: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    overflow: visible !important;
}

.sidebar .brand-logo-full img,
.sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.sidebar .sidebar-toggle {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border-radius: 18px !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin: 0 0 34px !important;
}

body.sidebar-collapsed .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
}

/* EXACT USER REFERENCE - sidebar open/collapsed proportions. Keep this as the last sidebar rule. */
:root {
    --erp-sidebar: 264px;
    --erp-sidebar-closed: 88px;
}

.sidebar {
    padding: 16px 10px !important;
}

body.sidebar-collapsed .sidebar {
    padding: 16px 14px !important;
}

.sidebar .sidebar-head {
    display: grid !important;
    grid-template-columns: 122px 46px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 0 0 56px !important;
}

.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 122px !important;
    min-width: 122px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar .brand-logo-full {
    display: block !important;
    width: 122px !important;
    min-width: 122px !important;
    height: 42px !important;
}

.sidebar .brand-logo-full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sidebar .brand-logo-mark {
    display: none !important;
}

.sidebar .sidebar-toggle,
body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    border-radius: 14px !important;
}

.sidebar .sidebar-toggle-icon svg,
body.sidebar-collapsed .sidebar .sidebar-toggle-icon svg {
    width: 18px !important;
    height: 18px !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin: 0 0 48px !important;
}

body.sidebar-collapsed .sidebar .brand {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    justify-content: center !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Final logo dimensions: keep collapse button fixed; only size the logo containers. */
body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark {
    display: block !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Current finishing pass: light-logo landing and collapsed sidebar rhythm. */
.landing-brand span {
    width: 184px !important;
    min-width: 184px !important;
    height: 52px !important;
    overflow: visible !important;
}

.landing-brand span img {
    width: 184px !important;
    height: 52px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.auth-premium-copy img {
    width: min(206px, 56%) !important;
    height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-value-path {
    align-self: end !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

.landing-value-path span {
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(203, 213, 225, .78) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .76) !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    padding: 1rem !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .05) !important;
}

body.sidebar-collapsed .nav {
    gap: 8px !important;
    justify-items: center !important;
    padding-top: 2px !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 18.5px !important;
    height: 18.5px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 20px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -13px !important;
}

@media (max-width: 980px) {
    .landing-value-path {
        grid-template-columns: 1fr !important;
    }
}

/* Fase 37 final: landing comercial premium y ritmo de sidebar contraida. */
body.commercial-landing {
    background:
        radial-gradient(circle at 14% 18%, rgba(20, 184, 166, .16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(15, 118, 110, .08), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 48%, #ffffff 100%) !important;
    color: #0f172a !important;
}

.landing-nav {
    width: min(1500px, calc(100% - 48px)) !important;
    min-height: 74px !important;
    padding: 10px 14px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(203, 213, 225, .8) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(22px) !important;
}

.landing-brand {
    min-width: 190px !important;
}

.landing-brand span,
.landing-brand span img {
    width: 186px !important;
    height: 48px !important;
}

.landing-nav-links {
    gap: clamp(1.25rem, 4vw, 3.2rem) !important;
}

.landing-nav-links a,
.landing-link-button {
    font-size: .96rem !important;
    color: #475569 !important;
}

.landing-commercial-hero {
    width: min(1500px, calc(100% - 48px)) !important;
    min-height: calc(100vh - 118px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .62fr) !important;
    align-items: center !important;
    gap: clamp(2.5rem, 7vw, 7rem) !important;
    padding: clamp(72px, 9vw, 136px) 0 clamp(42px, 7vw, 92px) !important;
}

.landing-commercial-hero .landing-hero-copy {
    max-width: 900px !important;
}

.landing-commercial-hero h1 {
    max-width: 900px !important;
    margin: 0 !important;
    font-size: clamp(4.4rem, 8.4vw, 8.4rem) !important;
    line-height: .88 !important;
    letter-spacing: 0 !important;
    font-weight: 850 !important;
}

.landing-commercial-hero .landing-lead {
    max-width: 760px !important;
    margin-top: 1.6rem !important;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem) !important;
    line-height: 1.55 !important;
    color: #475569 !important;
}

.landing-hero-actions {
    gap: .9rem !important;
    margin-top: 2.2rem !important;
}

.landing-button {
    border-radius: 18px !important;
    min-height: 48px !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}

.landing-button.primary {
    background: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 18px 42px rgba(15, 118, 110, .18) !important;
}

.landing-button.primary:hover {
    background: #115e59 !important;
    transform: translateY(-1px) !important;
}

.landing-button.secondary {
    background: rgba(255, 255, 255, .82) !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.landing-button.large {
    min-height: 58px !important;
    padding-inline: 1.55rem !important;
    font-size: 1.02rem !important;
}

.landing-demo-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 520px !important;
    border-radius: 36px !important;
    padding: clamp(28px, 4vw, 48px) !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(17, 94, 89, .92)),
        #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(153, 246, 228, .24) !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .22) !important;
}

.landing-demo-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -28% -20% auto auto !important;
    width: 320px !important;
    height: 320px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(20, 184, 166, .32), transparent 65%) !important;
    pointer-events: none !important;
}

.landing-demo-kicker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: .3rem .7rem !important;
    border-radius: 999px !important;
    background: rgba(204, 251, 241, .12) !important;
    border: 1px solid rgba(153, 246, 228, .22) !important;
    color: #99f6e4 !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.landing-demo-card strong {
    position: relative !important;
    display: block !important;
    max-width: 420px !important;
    margin-top: 1.25rem !important;
    font-size: clamp(2.2rem, 4vw, 4rem) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
}

.landing-demo-card > div {
    position: relative !important;
    display: grid !important;
    gap: .75rem !important;
    margin: 2.2rem 0 !important;
}

.landing-demo-card p {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    gap: .9rem !important;
    align-items: start !important;
    margin: 0 !important;
    padding: .95rem 0 !important;
    border-bottom: 1px solid rgba(203, 213, 225, .16) !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: .98rem !important;
    line-height: 1.45 !important;
}

.landing-demo-card p b {
    color: #ffffff !important;
    font-size: .95rem !important;
}

.landing-demo-card small {
    position: relative !important;
    display: block !important;
    max-width: 360px !important;
    color: rgba(255, 255, 255, .66) !important;
    line-height: 1.55 !important;
}

.landing-guide-section {
    width: min(1500px, calc(100% - 48px)) !important;
    margin-top: -10px !important;
}

.landing-section-heading {
    max-width: 860px !important;
}

.landing-section-heading h2 {
    font-size: clamp(2.4rem, 5vw, 5.8rem) !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
}

.landing-sales-path {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.landing-sales-path article,
.landing-sales-path article.is-featured {
    grid-column: auto !important;
    min-height: 300px !important;
    padding: 1.65rem !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .84) !important;
    border: 1px solid rgba(203, 213, 225, .82) !important;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .06) !important;
}

.landing-sales-path article:nth-child(1) {
    background: linear-gradient(160deg, rgba(204, 251, 241, .82), rgba(255, 255, 255, .9)) !important;
    border-color: rgba(20, 184, 166, .32) !important;
}

.landing-sales-path span {
    color: #0f766e !important;
}

.landing-sales-path h3 {
    margin-top: 2.2rem !important;
    font-size: clamp(1.55rem, 2vw, 2.35rem) !important;
    line-height: 1 !important;
}

.landing-sales-path p {
    margin-top: 1rem !important;
    color: #475569 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.landing-pricing-section,
.landing-access-section {
    width: min(1500px, calc(100% - 48px)) !important;
}

.landing-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.1rem !important;
}

.landing-plan-card {
    border-radius: 30px !important;
    padding: 1.5rem !important;
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid rgba(203, 213, 225, .8) !important;
    box-shadow: 0 18px 58px rgba(15, 23, 42, .06) !important;
}

.landing-tour-backdrop {
    background: rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(5px) !important;
}

.landing-tour-panel {
    right: clamp(18px, 5vw, 72px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: min(440px, calc(100vw - 36px)) !important;
    border-radius: 30px !important;
    padding: 1.55rem !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .22) !important;
}

.is-tour-active {
    outline: 2px solid rgba(20, 184, 166, .34) !important;
    outline-offset: 8px !important;
    border-radius: 32px !important;
}

body.sidebar-collapsed .sidebar {
    overflow: hidden !important;
}

body.sidebar-collapsed .nav {
    gap: 9px !important;
    justify-items: center !important;
    padding-top: 0 !important;
    transform: translateY(-4px) !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 43px !important;
    min-width: 43px !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    flex-basis: 33px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 19.5px !important;
    height: 19.5px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 24px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -16px !important;
}

@media (max-width: 1120px) {
    .landing-commercial-hero,
    .landing-sales-path,
    .landing-plan-grid {
        grid-template-columns: 1fr !important;
    }

    .landing-commercial-hero {
        min-height: auto !important;
        padding-top: 46px !important;
    }

    .landing-demo-card {
        min-height: auto !important;
    }
}

@media (max-width: 760px) {
    .landing-nav,
    .landing-commercial-hero,
    .landing-guide-section,
    .landing-pricing-section,
    .landing-access-section {
        width: min(100% - 24px, 1500px) !important;
    }

    .landing-brand {
        min-width: 140px !important;
    }

    .landing-brand span,
    .landing-brand span img {
        width: 136px !important;
        height: 38px !important;
    }

    .landing-commercial-hero h1 {
        font-size: clamp(3.25rem, 15vw, 5rem) !important;
    }

    .landing-demo-card p {
        grid-template-columns: 1fr !important;
    }
}

/* TRUE FINAL OVERRIDES - keep these after legacy blocks. */
body.is-guest .app-shell {
    display: block !important;
    min-height: 100vh !important;
}

body.is-guest .sidebar,
body.is-guest .topbar {
    display: none !important;
}

body.is-guest .main {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(22px, 4vw, 56px) !important;
    background: linear-gradient(115deg, rgba(204, 251, 241, .48) 0%, rgba(248, 250, 252, .9) 36%, #ffffff 100%) !important;
}

.auth-premium {
    width: min(1120px, 100%) !important;
    min-height: min(680px, calc(100vh - 72px)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr) !important;
    align-items: stretch !important;
    gap: clamp(18px, 3vw, 32px) !important;
    margin: 0 auto !important;
}

.auth-premium-copy,
.auth-premium-card {
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08) !important;
}

.auth-premium-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    padding: clamp(30px, 4vw, 56px) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f0fdfa 58%, #eef2ff 100%) !important;
}

.auth-premium-copy img {
    width: min(198px, 52%) !important;
    height: 56px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 0 clamp(42px, 8vh, 96px) !important;
}

.auth-premium-copy h2 {
    max-width: 680px !important;
    color: #0f172a !important;
    font-size: clamp(2.55rem, 5.3vw, 5.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: .96 !important;
    margin: 0 !important;
}

.auth-premium-card {
    align-self: center !important;
    padding: clamp(28px, 4vw, 48px) !important;
}

.landing-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 180px !important;
}

.landing-brand span {
    width: 176px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.landing-brand span img {
    width: 176px !important;
    height: 50px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-product-top,
.landing-calendar-preview,
.landing-metric-row,
.legacy-hidden {
    display: none !important;
}

.landing-pricing-section .landing-section-heading h2 {
    font-size: 0 !important;
}

.landing-pricing-section .landing-section-heading h2::before {
    content: "Planes claros para empezar pequeno y crecer sin cambiar de sistema.";
    display: block;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

body.sidebar-collapsed .sidebar {
    height: 100vh !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
}

body.sidebar-collapsed .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.sidebar-collapsed .nav {
    gap: 7px !important;
    padding-top: 0 !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 17px !important;
    height: 17px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 18px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -12px !important;
    width: 36px !important;
    opacity: .45 !important;
}

.support-admin-row {
    grid-template-columns: 188px minmax(0, 1fr) 184px !important;
    min-height: 70px !important;
    padding: .85rem 1rem !important;
}

.support-admin-row .support-ticket-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 188px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    padding: .55rem .8rem !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-main small {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    min-width: 0 !important;
}

.support-admin-row .support-ticket-main time {
    color: #64748b !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .6rem !important;
}

.support-admin-row .support-ticket-meta small {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    min-width: 64px !important;
    color: #64748b !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta small::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
}

.support-admin-row .support-ticket-meta small.is-viewed::before {
    background: #0f766e !important;
}

@media (max-width: 980px) {
    .auth-premium {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
    }
}

/* UX final polish - login, landing, support rows and collapsed sidebar. */
body.is-guest .app-shell {
    display: block !important;
    min-height: 100vh !important;
}

body.is-guest .sidebar,
body.is-guest .topbar {
    display: none !important;
}

body.is-guest .main {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(22px, 4vw, 56px) !important;
    background:
        linear-gradient(115deg, rgba(204, 251, 241, .48) 0%, rgba(248, 250, 252, .9) 36%, #ffffff 100%) !important;
}

.auth-premium {
    width: min(1120px, 100%) !important;
    min-height: min(680px, calc(100vh - 72px)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr) !important;
    align-items: stretch !important;
    gap: clamp(18px, 3vw, 32px) !important;
    margin: 0 auto !important;
}

.auth-premium-copy,
.auth-premium-card {
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08) !important;
}

.auth-premium-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    padding: clamp(30px, 4vw, 56px) !important;
    background:
        linear-gradient(145deg, #ffffff 0%, #f0fdfa 58%, #eef2ff 100%) !important;
}

.auth-premium-copy img {
    width: min(198px, 52%) !important;
    height: 56px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 0 clamp(42px, 8vh, 96px) !important;
}

.auth-premium-copy h2 {
    max-width: 680px !important;
    color: #0f172a !important;
    font-size: clamp(2.55rem, 5.3vw, 5.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: .96 !important;
    margin: 0 !important;
}

.auth-premium-copy p:not(.eyebrow) {
    max-width: 560px !important;
    color: #475569 !important;
    font-size: clamp(1rem, 1.22vw, 1.16rem) !important;
    line-height: 1.65 !important;
}

.auth-premium-card {
    align-self: center !important;
    padding: clamp(28px, 4vw, 48px) !important;
}

.auth-premium-card h2 {
    font-size: clamp(2rem, 3vw, 2.55rem) !important;
    letter-spacing: 0 !important;
}

.auth-premium-card input {
    min-height: 54px !important;
    border-radius: 16px !important;
}

.auth-premium-card .button.primary {
    min-height: 56px !important;
    border-radius: 16px !important;
    background: #0f766e !important;
}

.commercial-landing {
    background: linear-gradient(180deg, #f8fafc 0%, #eefdfa 48%, #ffffff 100%) !important;
}

.landing-nav {
    width: min(1320px, calc(100% - 40px)) !important;
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 28px !important;
    padding: 10px 14px 10px 22px !important;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(18px) !important;
}

.landing-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 180px !important;
    text-decoration: none !important;
}

.landing-brand span {
    width: 176px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.landing-brand span img {
    width: 176px !important;
    height: 50px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-hero {
    min-height: calc(100vh - 118px) !important;
    align-items: center !important;
    padding-top: clamp(58px, 8vh, 104px) !important;
    padding-bottom: clamp(42px, 7vh, 86px) !important;
}

.landing-hero h1 {
    max-width: 1040px !important;
    color: #0f172a !important;
    font-size: clamp(3.6rem, 7.8vw, 7.4rem) !important;
    letter-spacing: 0 !important;
    line-height: .92 !important;
}

.landing-lead {
    max-width: 720px !important;
    color: #475569 !important;
    font-size: clamp(1.08rem, 1.55vw, 1.32rem) !important;
}

.legacy-hidden {
    display: none !important;
}

.landing-product-card {
    min-height: 460px !important;
    display: grid !important;
    place-items: center !important;
    gap: 1rem !important;
    text-align: center !important;
    border-color: rgba(153, 246, 228, .72) !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .96) 0%, rgba(240, 253, 250, .88) 54%, rgba(248, 250, 252, .96) 100%) !important;
}

.landing-product-top,
.landing-calendar-preview,
.landing-metric-row {
    display: none !important;
}

.landing-product-card::before {
    content: "" !important;
    display: block !important;
    width: min(188px, 46vw) !important;
    aspect-ratio: 1 !important;
    background: url("/images/logo_clinc_mark.png") center / contain no-repeat !important;
    filter: drop-shadow(0 26px 42px rgba(15, 118, 110, .18)) !important;
}

.landing-product-card::after {
    content: "La demo privada ensena el flujo completo sin exponer la herramienta publica." !important;
    max-width: 390px !important;
    color: #475569 !important;
    font-size: 1.06rem !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

.landing-sales-path article {
    min-height: 190px !important;
    border-color: rgba(203, 213, 225, .85) !important;
}

.landing-pricing-section .landing-section-heading h2 {
    font-size: 0 !important;
}

.landing-pricing-section .landing-section-heading h2::before {
    content: "Planes claros para empezar pequeno y crecer sin cambiar de sistema.";
    display: block;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

body.sidebar-collapsed .sidebar {
    height: 100vh !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
}

body.sidebar-collapsed .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.sidebar-collapsed .nav {
    gap: 7px !important;
    padding-top: 0 !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 17px !important;
    height: 17px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 18px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -12px !important;
    width: 36px !important;
    opacity: .45 !important;
}

.support-admin-row {
    grid-template-columns: 188px minmax(0, 1fr) 184px !important;
    min-height: 70px !important;
    padding: .85rem 1rem !important;
}

.support-admin-row .support-ticket-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 188px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    padding: .55rem .8rem !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-main {
    min-width: 0 !important;
}

.support-admin-row .support-ticket-main small {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    min-width: 0 !important;
}

.support-admin-row .support-ticket-main time {
    color: #64748b !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .6rem !important;
}

.support-admin-row .support-ticket-meta .badge {
    min-width: 88px !important;
    justify-content: center !important;
}

.support-admin-row .support-ticket-meta small {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    min-width: 64px !important;
    color: #64748b !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta small::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
}

.support-admin-row .support-ticket-meta small.is-viewed::before {
    background: #0f766e !important;
}

@media (max-width: 980px) {
    .auth-premium {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
    }

    .auth-premium-copy {
        min-height: auto !important;
    }
}

@media (max-width: 760px) {
    .landing-nav {
        width: calc(100% - 24px) !important;
        min-height: auto !important;
    }

    .landing-brand {
        min-width: 126px !important;
    }

    .landing-brand span,
    .landing-brand span img {
        width: 126px !important;
        height: 42px !important;
    }

    .support-admin-row {
        grid-template-columns: 1fr !important;
    }
}

/* Premium login, commercial landing and compact collapsed sidebar */
body.is-guest .app-shell {
    display: block !important;
    min-height: 100vh !important;
}

body.is-guest .sidebar {
    display: none !important;
}

body.is-guest .main {
    min-height: 100vh !important;
    padding: clamp(22px, 4vw, 48px) !important;
}

.auth-premium {
    min-height: calc(100vh - 96px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
    width: min(1180px, 100%);
    margin: 0 auto;
}

.auth-premium-copy {
    display: grid;
    gap: 1.1rem;
}

.auth-premium-copy img {
    display: block;
    width: min(220px, 48vw);
    height: auto;
    object-fit: contain;
    margin-bottom: 1.2rem;
}

.auth-premium-copy h2 {
    max-width: 760px;
    color: #0f172a;
    font-size: clamp(2.8rem, 7vw, 6.2rem);
    font-weight: 880;
    letter-spacing: -0.035em !important;
    line-height: .93;
    margin: 0;
}

.auth-premium-copy p:not(.eyebrow) {
    max-width: 620px;
    color: #64748b;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    line-height: 1.65;
    margin: 0;
}

.auth-premium-card {
    border-radius: 28px !important;
    padding: clamp(1.4rem, 3vw, 2.3rem) !important;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .10) !important;
}

.auth-premium-card h2 {
    font-size: 2rem !important;
    letter-spacing: -0.02em !important;
}

.auth-premium-card input {
    min-height: 52px !important;
    border-radius: 16px !important;
}

.auth-premium-card .button.primary {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: #0f766e !important;
}

.landing-nav {
    width: min(1180px, calc(100% - 40px)) !important;
    min-height: 74px !important;
    border-radius: 28px !important;
    padding: 10px 14px !important;
}

.landing-brand span {
    width: 154px !important;
    height: 48px !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.landing-brand span img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-hero {
    min-height: 72vh !important;
    padding-top: clamp(60px, 9vh, 120px) !important;
}

.landing-hero h1 {
    max-width: 980px !important;
    font-size: clamp(3.3rem, 8vw, 7.8rem) !important;
    letter-spacing: -0.055em !important;
    line-height: .9 !important;
}

.landing-lead {
    max-width: 680px !important;
    font-size: clamp(1.08rem, 1.5vw, 1.34rem) !important;
}

.landing-product-card {
    min-height: 380px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    border-color: rgba(153, 246, 228, .7) !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(20, 184, 166, .18), transparent 9rem),
        radial-gradient(circle at 38% 38%, rgba(124, 58, 237, .16), transparent 8rem),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.landing-product-card::before {
    content: "" !important;
    display: block !important;
    width: min(180px, 42vw) !important;
    aspect-ratio: 1 !important;
    background: url("/images/logo_clinc_mark.png") center / contain no-repeat !important;
    filter: drop-shadow(0 24px 40px rgba(15, 118, 110, .18)) !important;
}

.landing-product-card::after {
    content: "La experiencia completa se muestra en una visita guiada privada." !important;
    display: block !important;
    max-width: 360px !important;
    color: #64748b !important;
    font-size: 1.05rem !important;
    font-weight: 760 !important;
    line-height: 1.45 !important;
}

.landing-product-top,
.landing-calendar-preview,
.landing-metric-row {
    display: none !important;
}

.landing-sales-path article {
    min-height: 210px !important;
}

body.sidebar-collapsed .sidebar {
    overflow: hidden !important;
    scrollbar-width: none !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
}

body.sidebar-collapsed .sidebar::-webkit-scrollbar {
    display: none !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    margin-bottom: 34px !important;
    gap: 14px !important;
}

body.sidebar-collapsed .nav {
    gap: 9px !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 17px !important;
    height: 17px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 18px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -12px !important;
}

.support-admin-row {
    grid-template-columns: 176px minmax(0, 1fr) 176px !important;
    min-height: 70px !important;
}

.support-admin-row .support-ticket-number {
    white-space: nowrap !important;
    border-radius: 999px !important;
    font-size: .88rem !important;
    line-height: 1 !important;
}

.support-admin-row .support-ticket-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
}

.support-admin-row .support-ticket-meta small {
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    .auth-premium {
        grid-template-columns: 1fr;
    }

    .auth-premium-copy h2 {
        font-size: clamp(2.5rem, 12vw, 4.5rem);
    }
}

@media (max-width: 760px) {
    .landing-nav {
        width: calc(100% - 24px) !important;
    }

    .landing-brand span {
        width: 108px !important;
    }
}

/* Final compact fixes: ticket rows and collapsed sidebar no-scroll. */
body.sidebar-collapsed .sidebar {
    overflow: hidden !important;
}

body.sidebar-collapsed .nav {
    gap: 12px !important;
    padding-top: 0 !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 4px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 20px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -13px !important;
}

.support-admin-row {
    grid-template-columns: 170px minmax(0, 1fr) 180px !important;
    min-height: 72px !important;
    padding: .9rem 1rem !important;
}

.support-admin-row .support-ticket-number {
    align-self: center !important;
    width: 100% !important;
    max-width: 170px !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    padding: .72rem .8rem !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
}

.support-admin-row .support-ticket-meta .badge {
    min-width: 86px !important;
    justify-content: center !important;
    padding: .45rem .75rem !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta small {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 64px !important;
    color: #64748b !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.support-admin-row .support-ticket-meta small::before {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin-right: .35rem !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
}

.support-admin-row .support-ticket-meta small.is-viewed::before {
    background: #0f766e !important;
}

.pro-calendar .calendar-event[data-is-completed="true"] {
    cursor: default;
}

.pro-calendar .calendar-event[data-is-completed="true"] .event-resize-handle {
    display: none;
}

/* Premium compact operational modules: billing, rooms, dashboard and team. */
.billing-dashboard {
    display: grid !important;
    gap: 16px !important;
}

.billing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px !important;
}

.billing-grid-secondary {
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr) !important;
}

.billing-chart-wide {
    grid-template-columns: 1fr !important;
}

.billing-fused-panel .apex-chart {
    min-height: 280px !important;
}

.billing-chart-totals {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.billing-chart-totals span {
    min-width: 142px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 15px !important;
    background: var(--erp-surface-soft) !important;
}

.billing-chart-totals small {
    display: block !important;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.billing-chart-totals strong {
    display: block !important;
    margin-top: 3px !important;
    color: var(--erp-text) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.billing-visual-panel,
.pending-payment-panel,
.invoice-table-panel {
    min-height: 0 !important;
}

.panel-total {
    color: var(--erp-text) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.billing-visual-panel .real-chart {
    min-height: 210px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.apex-chart {
    min-height: 220px !important;
    overflow: hidden !important;
    border: 1px solid rgba(226, 232, 240, 0.72) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(20, 184, 166, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.apex-chart.is-rendered + .real-chart {
    display: none !important;
}

.apexcharts-tooltip,
.apexcharts-xaxistooltip {
    border: 1px solid var(--erp-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

.apexcharts-tooltip-title {
    border-bottom: 1px solid var(--erp-line) !important;
    background: #f8fafc !important;
    color: var(--erp-text) !important;
    font-weight: 850 !important;
}

.pending-payment-panel {
    max-height: 430px !important;
}

.pending-payment-scroll {
    max-height: 288px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
}

.pending-payment-scroll a {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.pending-payment-scroll strong,
.pending-payment-scroll small {
    white-space: nowrap !important;
}

.pending-payment-scroll span {
    min-width: 0 !important;
}

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

.available-hours-grid a {
    display: grid !important;
    gap: 3px !important;
    padding: 14px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
    color: var(--erp-text) !important;
    text-decoration: none !important;
}

.available-hours-grid span {
    color: var(--erp-primary) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.available-hours-grid strong {
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.available-hours-grid small {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.room-simple-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px !important;
}

.room-clarity-card {
    gap: 14px !important;
    min-height: auto !important;
}

.room-clarity-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.room-clarity-summary span {
    display: grid !important;
    gap: 2px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: var(--erp-surface-soft) !important;
}

.room-clarity-summary b {
    color: var(--erp-text) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.room-clarity-summary small {
    overflow: hidden !important;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.room-simple-slots {
    align-items: center !important;
    gap: 8px !important;
}

.room-simple-slots small {
    flex-basis: 100% !important;
}

.team-availability-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 10px !important;
    margin: 14px 0 !important;
}

.team-availability-strip article {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

.team-availability-strip strong {
    display: block !important;
    overflow: hidden !important;
    color: var(--erp-text) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.team-availability-strip small {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.team-availability-strip p {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
}

.team-availability-strip b {
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

@media (max-width: 1100px) {
    .billing-grid,
    .billing-grid-secondary {
        grid-template-columns: 1fr !important;
    }
}

/* Company cards final polish: equal actions and clean Spanish labels. */
.company-preview-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.company-preview-actions form {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.company-preview-actions .table-action,
.company-preview-actions button.table-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
}

@media (max-width: 780px) {
    .company-preview-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Contracted services: compact commercial view, advanced fields only on demand. */
.contract-services-panel {
    overflow: visible !important;
}

.contract-service-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
    gap: 12px !important;
}

.contract-service-card {
    display: grid !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05) !important;
}

.contract-service-main {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.contract-service-main strong {
    display: block !important;
    color: var(--erp-text) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.contract-service-main small,
.contract-service-note {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.contract-service-facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.contract-service-facts span {
    min-width: 0 !important;
    padding: 9px !important;
    border-radius: 13px !important;
    background: var(--erp-surface-soft) !important;
}

.contract-service-facts small {
    display: block !important;
    margin-bottom: 4px !important;
    color: var(--erp-muted) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.contract-service-facts b {
    overflow: hidden !important;
    display: block !important;
    color: var(--erp-text) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.contract-service-note {
    margin: 0 !important;
    padding-top: 2px !important;
}

.contract-service-editor,
.manual-service-add {
    border-top: 1px solid var(--erp-line) !important;
    padding-top: 10px !important;
}

.contract-service-editor summary,
.manual-service-add summary {
    cursor: pointer !important;
    color: var(--erp-primary) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    list-style: none !important;
}

.contract-service-editor summary::-webkit-details-marker,
.manual-service-add summary::-webkit-details-marker {
    display: none !important;
}

.contract-service-editor form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

.contract-service-editor .wide-field {
    grid-column: span 2 !important;
}

.contract-service-editor .button {
    align-self: end !important;
    min-height: 42px !important;
}

.manual-service-add {
    margin-top: 16px !important;
}

.manual-service-add .form-panel {
    gap: 12px !important;
    margin-top: 12px !important;
}

.manual-service-add .button {
    width: min(220px, 100%) !important;
}

@media (max-width: 900px) {
    .contract-service-editor form,
    .contract-service-facts {
        grid-template-columns: 1fr !important;
    }

    .contract-service-editor .wide-field {
        grid-column: auto !important;
    }
}

/* Collapsed logo visual scale: the source PNG has internal transparent padding. */
body.sidebar-collapsed .sidebar .brand,
body.is-guest.sidebar-collapsed .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    overflow: visible !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark {
    display: grid !important;
    place-items: center !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    overflow: visible !important;
    transform: translateX(3px) !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img {
    width: 60px !important;
    max-width: none !important;
    height: 60px !important;
    object-fit: contain !important;
    transform: scale(1.68) !important;
    transform-origin: center center !important;
}

/* Collapsed sidebar polish: keep primary dashboard access visually separated. */
body.sidebar-collapsed .nav > a:first-of-type {
    position: relative !important;
    margin-bottom: 24px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -16px !important;
    width: 28px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: rgba(203, 213, 225, 0.22) !important;
    transform: translateX(-50%) !important;
}

/* Open sidebar logo only. Collapsed logo is approved and must not be changed. */
body:not(.sidebar-collapsed) .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 122px !important;
    min-width: 122px !important;
    height: 48px !important;
    min-height: 48px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body:not(.sidebar-collapsed) .sidebar .brand > span.brand-logo-full {
    position: static !important;
    display: block !important;
    width: 122px !important;
    min-width: 122px !important;
    height: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body:not(.sidebar-collapsed) .sidebar .brand > span.brand-logo-full img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
}

body:not(.sidebar-collapsed) .sidebar .brand > span.brand-logo-mark {
    display: none !important;
}

/* Open sidebar navigation sizing. Logo and collapse button are intentionally untouched. */
body:not(.sidebar-collapsed) {
    --erp-sidebar: 270px;
}

body:not(.sidebar-collapsed) .sidebar {
    padding-inline: 14px !important;
}

body:not(.sidebar-collapsed) .nav {
    gap: 8px !important;
}

body:not(.sidebar-collapsed) .nav-label {
    margin: 8px 12px 2px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
}

body:not(.sidebar-collapsed) .nav a,
body:not(.sidebar-collapsed) .nav-locked {
    grid-template-columns: 44px minmax(0, 1fr) 30px !important;
    min-height: 48px !important;
    padding: 6px 10px !important;
    border-radius: 13px !important;
}

body:not(.sidebar-collapsed) .nav-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 11px !important;
}

body:not(.sidebar-collapsed) .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
}

body:not(.sidebar-collapsed) .nav-text {
    font-size: 15px !important;
    font-weight: 740 !important;
}

/* Sidebar open compact pass: smaller components, logo and collapse button unchanged. */
body:not(.sidebar-collapsed) {
    --erp-sidebar: 262px;
}

body:not(.sidebar-collapsed) .sidebar {
    padding-inline: 12px !important;
}

body:not(.sidebar-collapsed) .nav {
    gap: 6px !important;
}

body:not(.sidebar-collapsed) .nav-label {
    margin: 7px 10px 1px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.075em !important;
}

body:not(.sidebar-collapsed) .nav a,
body:not(.sidebar-collapsed) .nav-locked {
    grid-template-columns: 40px minmax(0, 1fr) 28px !important;
    min-height: 44px !important;
    padding: 5px 9px !important;
    border-radius: 12px !important;
}

body:not(.sidebar-collapsed) .nav-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 10px !important;
}

body:not(.sidebar-collapsed) .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
}

body:not(.sidebar-collapsed) .nav-text {
    font-size: 14px !important;
    font-weight: 730 !important;
}

.task-calendar-month article,
.task-calendar-time article header {
    cursor: pointer;
}

.task-calendar-month article,
.task-calendar-time article {
    position: relative;
}

.task-day-open {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.task-calendar-month header,
.task-calendar-month article > div,
.task-calendar-time article header,
.task-day-lane {
    position: relative;
    z-index: 2;
}

.task-calendar-month .task-calendar-item,
.task-all-day-stack .task-calendar-item,
.task-more-badge {
    position: relative;
    z-index: 3;
}

.task-calendar-month article:hover,
.task-calendar-time article header:hover {
    background: #ecfdf5 !important;
}

.task-calendar-month article.has-tasks {
    background: #fafffe;
}

.task-more-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    border: 1px solid #99f6e4 !important;
    border-radius: 999px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.task-more-badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    display: inline-grid !important;
    place-items: center !important;
    min-width: 24px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border: 1px solid #99f6e4 !important;
    border-radius: 999px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.task-calendar-item:has(.task-more-badge) strong {
    padding-right: 34px !important;
}

.task-calendar-month .task-calendar-item,
.task-all-day-stack .task-calendar-item {
    border-left-color: #0f766e;
}

.task-calendar-month .task-calendar-item.is-high,
.task-all-day-stack .task-calendar-item.is-high {
    border-left-color: #ef4444;
}

.task-calendar-month .task-calendar-item.is-low,
.task-all-day-stack .task-calendar-item.is-low {
    border-left-color: #14b8a6;
}

/* LOGO ONLY LOCK - button dimensions/placement above are fixed; this only corrects logo rendering. */
.sidebar .brand-logo-full img,
.sidebar .brand-logo-mark img,
.is-guest .sidebar .brand-logo-full img,
.is-guest .sidebar .brand-logo-mark img {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.sidebar .brand > span.brand-logo-full,
.is-guest .sidebar .brand > span.brand-logo-full {
    display: block !important;
}

.sidebar .brand > span.brand-logo-mark,
.is-guest .sidebar .brand > span.brand-logo-mark {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-full,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark {
    position: static !important;
    display: block !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Sidebar final proportion lock: collapse button keeps the collapsed reference size in every state. */
.sidebar .sidebar-head {
    grid-template-columns: 112px 46px !important;
    gap: 38px !important;
    align-items: center !important;
    justify-content: start !important;
    margin: 0 0 40px !important;
}

.sidebar .brand {
    width: 112px !important;
    min-width: 112px !important;
    height: 52px !important;
    min-height: 52px !important;
}

.sidebar .brand-logo-full,
.is-guest .sidebar .brand-logo-full {
    display: block !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 39px !important;
}

.sidebar .brand-logo-mark,
.is-guest .sidebar .brand-logo-mark {
    display: none !important;
}

.sidebar .sidebar-toggle,
body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
}

.sidebar .sidebar-toggle-icon svg,
body.sidebar-collapsed .sidebar .sidebar-toggle-icon svg {
    width: 18px !important;
    height: 18px !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin: 0 0 34px !important;
}

body.sidebar-collapsed .sidebar .brand,
body.is-guest.sidebar-collapsed .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Sidebar identity correction: smaller wordmark, more air, visible mark when collapsed. */
.sidebar .sidebar-head {
    grid-template-columns: 112px 56px !important;
    gap: 20px !important;
}

.sidebar .brand,
.is-guest .sidebar .brand {
    width: 112px !important;
    min-width: 112px !important;
}

.sidebar .brand > span.brand-logo-full,
.is-guest .sidebar .brand > span.brand-logo-full {
    display: block !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 39px !important;
}

.sidebar .brand > span.brand-logo-mark,
.is-guest .sidebar .brand > span.brand-logo-mark {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand,
body.is-guest.sidebar-collapsed .sidebar .brand {
    width: 52px !important;
    min-width: 52px !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-full,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark {
    display: block !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ABSOLUTE FINAL - sidebar logo proportions. Content width is 208px: 120 logo + 56 button + 10 gap. */
.sidebar .sidebar-head {
    display: grid !important;
    grid-template-columns: 120px 46px !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 42px !important;
    margin: 0 0 40px !important;
}

.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 120px !important;
    height: 52px !important;
    min-width: 120px !important;
    min-height: 52px !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar .brand-logo-full {
    display: block !important;
    width: 120px !important;
    height: 42px !important;
    min-width: 120px !important;
    overflow: visible !important;
}

.sidebar .brand-logo-mark {
    display: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    overflow: visible !important;
}

.sidebar .brand-logo-full img,
.sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.sidebar .sidebar-toggle {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border-radius: 18px !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin: 0 0 34px !important;
}

body.sidebar-collapsed .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
}

/* FINAL SIZE TUNE - keep Clinc readable without colliding with the collapse button. */
.sidebar .sidebar-head {
    grid-template-columns: minmax(0, 1fr) 56px !important;
    gap: 12px !important;
    margin: 0 0 42px !important;
}

.sidebar .brand {
    display: flex !important;
    width: 128px !important;
    height: 52px !important;
    min-height: 52px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.sidebar .brand-logo-full {
    display: block !important;
    width: 122px !important;
    height: 42px !important;
}

.sidebar .sidebar-toggle {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 18px !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin: 0 0 34px !important;
}

body.sidebar-collapsed .sidebar .brand {
    display: flex !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
}

/* Company cards sizing: calmer, tighter and easier to scan. */
.company-index-v2 {
    padding: 22px !important;
}

.company-index-v2 .admin-filter-bar {
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 20px !important;
}

.company-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.company-preview-card {
    gap: 13px !important;
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 20px !important;
}

.company-preview-head {
    min-height: 52px !important;
}

.company-preview-head h3 {
    margin-top: 8px !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
}

.company-preview-head > strong {
    min-width: 104px !important;
    text-align: right !important;
    font-size: 17px !important;
}

.company-preview-card .status-pill {
    min-width: 84px !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
}

.company-preview-metrics {
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
    gap: 7px !important;
}

.company-preview-metrics span {
    min-height: 66px !important;
    padding: 9px !important;
    border-radius: 13px !important;
}

.company-preview-metrics small {
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
}

.company-preview-metrics b {
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.company-preview-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.company-preview-actions form {
    min-width: 0 !important;
}

.company-preview-actions .table-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    border-radius: 12px !important;
}

.company-command {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    padding: 20px !important;
}

.company-command h2 {
    font-size: clamp(28px, 3vw, 36px) !important;
    line-height: 1.05 !important;
}

.company-command-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    max-width: 640px !important;
}

.company-command-actions .button,
.company-command-actions .stripe-muted {
    min-height: 42px !important;
    border-radius: 12px !important;
}

@media (min-width: 1500px) {
    .company-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .company-preview-metrics,
    .company-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .company-command {
        grid-template-columns: 1fr !important;
    }

    .company-command-actions {
        justify-content: flex-start !important;
    }
}

/* Final brand lockup sizing: one logo per sidebar state. */
.sidebar .brand-logo-full {
    display: block !important;
    width: min(150px, 100%) !important;
    height: 52px !important;
}

.sidebar .brand-logo-mark {
    display: none !important;
}

.sidebar .brand-logo-full img {
    object-fit: contain !important;
    object-position: left center !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark img {
    object-fit: cover !important;
    object-position: center !important;
}

.sidebar .brand {
    overflow: hidden !important;
}

.sidebar .brand:hover {
    background: transparent !important;
}

@keyframes landingPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1280px) {
    :root {
        --erp-sidebar: 216px;
    }

    .v2-command-grid,
    .work-grid,
    .platform-dashboard-grid,
    .admin-work-grid,
    .stats-main-grid,
    .owner-main-grid,
    .billing-grid {
        grid-template-columns: 1fr !important;
    }

    .v2-revenue-layout,
    .task-grid {
        grid-template-columns: 1fr !important;
    }

    .v2-analytics-grid,
    .team-grid,
    .module-chip-grid,
    .company-stat-grid,
    .customer-summary-grid,
    .owner-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-filter-bar,
    .admin-task-form,
    .customer-filter-bar,
    .owner-billing-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .app-shell,
    body.sidebar-collapsed .app-shell,
    .is-guest .app-shell {
        display: block !important;
    }

    .sidebar,
    body.sidebar-collapsed .sidebar,
    .is-guest .sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px !important;
    }

    .nav {
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    }

    .auth-minimal,
    .v2-analytics-grid,
    .team-grid,
    .module-chip-grid,
    .company-stat-grid,
    .company-insight-row,
    .customer-summary-grid,
    .owner-kpi-grid,
    .room-day-strip,
    .task-calendar-mini,
    .task-calendar-full {
        grid-template-columns: 1fr !important;
    }

    .task-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-filter-bar,
    .admin-task-form,
    .billing-term-editor article,
    .customer-filter-bar,
    .owner-billing-strip {
        grid-template-columns: 1fr;
    }

    .auth-copy h2 {
        font-size: 30px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-nav {
        grid-template-columns: 1fr;
    }

    .landing-nav-links,
    .landing-nav-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .landing-hero,
    .landing-access,
    .landing-feature-grid,
    .landing-guide-grid,
    .landing-plan-grid {
        grid-template-columns: 1fr;
    }

    .landing-product-card {
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    .company-insight-main,
    .company-insight-metrics {
        grid-template-columns: 1fr;
    }

    .status-pill {
        justify-self: start;
    }

    .landing-nav,
    .landing-hero,
    .landing-section {
        width: min(100% - 24px, 1180px);
    }

    .landing-nav-links {
        display: none;
    }

    .landing-hero {
        padding-top: 46px;
    }

    .landing-product-card,
    .landing-section {
        border-radius: 22px;
    }

    .landing-section {
        padding: 22px;
    }

    .landing-calendar-preview {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .landing-calendar-preview div {
        border-right: 0;
        border-bottom: 1px solid var(--erp-line);
    }

    .landing-metric-row,
    .landing-form-grid,
    .landing-selected-plan {
        grid-template-columns: 1fr;
    }

    .landing-selected-plan small {
        grid-column: auto;
    }

    .landing-tour-panel {
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Clinc sidebar identity: crop the supplied presentation PNGs inside fixed UI lockups. */
.sidebar .sidebar-head {
    grid-template-columns: minmax(0, 1fr) 56px !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 0 0 42px !important;
}

.sidebar .brand {
    position: relative !important;
    display: block !important;
    width: 174px !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.sidebar .brand-logo-full,
.sidebar .brand-logo-mark {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

.sidebar .brand-logo-full {
    display: block !important;
}

.sidebar .brand-logo-mark {
    display: none !important;
}

.sidebar .brand-logo-full img {
    position: absolute !important;
    width: 306px !important;
    max-width: none !important;
    height: auto !important;
    left: -66px !important;
    top: -62px !important;
    object-fit: initial !important;
    object-position: initial !important;
}

.sidebar .brand-logo-mark img {
    position: absolute !important;
    width: 162px !important;
    max-width: none !important;
    height: auto !important;
    left: -59px !important;
    top: -31px !important;
    object-fit: initial !important;
    object-position: initial !important;
}

.sidebar .sidebar-toggle {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border: 1px solid rgba(153, 246, 228, 0.48) !important;
    border-radius: 18px !important;
    background: rgba(19, 78, 74, 0.72) !important;
    color: #e0fdfa !important;
    box-shadow: inset 0 0 0 4px rgba(20, 184, 166, 0.10), 0 14px 32px rgba(2, 6, 23, 0.18) !important;
}

.sidebar .sidebar-toggle:hover {
    border-color: rgba(153, 246, 228, 0.72) !important;
    background: rgba(15, 118, 110, 0.72) !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin-bottom: 34px !important;
}

body.sidebar-collapsed .sidebar .brand {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
}

body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
}

/* Polish pass: Clinc identity, proportional locks, compact cards and simple panels. */
.brand-logo-full {
    display: block !important;
    width: 136px !important;
    height: 44px !important;
    overflow: hidden !important;
}

.brand-logo-full img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.brand-logo-mark {
    display: none !important;
    width: 42px !important;
    height: 42px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

.brand-logo-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.sidebar-collapsed .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .brand-logo-mark {
    display: block !important;
}

.landing-brand span {
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.landing-brand span img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.nav a,
.nav-locked {
    grid-template-columns: 38px minmax(0, 1fr) 34px !important;
    min-height: 48px !important;
    padding: 6px 10px !important;
}

.nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
}

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

.nav-lock-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border: 1px solid rgba(153, 246, 228, 0.45) !important;
    border-radius: 999px !important;
    background: rgba(204, 251, 241, 0.94) !important;
    color: #0f766e !important;
}

.nav-lock-icon svg {
    width: 15px !important;
    height: 15px !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    grid-template-columns: 1fr !important;
    width: 44px !important;
    min-height: 44px !important;
    padding: 5px !important;
}

body.sidebar-collapsed .nav-lock-icon {
    display: none !important;
}

.employee-color-field input[type="color"] {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-bottom: 10px !important;
}

.employee-color-palette {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.employee-color-swatch {
    aspect-ratio: 1 !important;
    min-height: 34px !important;
    border: 2px solid #ffffff !important;
    border-radius: 12px !important;
    background: var(--employee-preset) !important;
    box-shadow: 0 0 0 1px var(--erp-line), 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    cursor: pointer !important;
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.employee-color-swatch:hover,
.employee-color-swatch[aria-pressed="true"] {
    transform: translateY(-1px) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22), 0 12px 22px rgba(15, 23, 42, 0.12) !important;
}

.company-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 18px !important;
}

.company-preview-card {
    display: grid !important;
    gap: 16px !important;
    padding: 18px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: var(--erp-shadow-soft) !important;
}

.company-preview-card.is-success {
    border-color: rgba(20, 184, 166, 0.24) !important;
}

.company-preview-card.is-warning {
    border-color: rgba(245, 158, 11, 0.28) !important;
}

.company-preview-card.is-danger {
    border-color: rgba(239, 68, 68, 0.28) !important;
}

.company-preview-head,
.company-preview-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.company-preview-head h3 {
    margin: 10px 0 0 !important;
    color: var(--erp-text) !important;
    font-size: 20px !important;
    font-weight: 850 !important;
}

.company-preview-head > strong {
    color: var(--erp-text) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
}

.company-preview-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.company-preview-metrics span {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 14px !important;
    background: var(--erp-surface-soft) !important;
}

.company-preview-metrics small {
    overflow: hidden !important;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.company-preview-metrics b {
    overflow: hidden !important;
    color: var(--erp-text) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.company-preview-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
}

.company-preview-actions .table-action {
    min-width: 112px !important;
    justify-content: center !important;
}

.task-modal,
.appointment-popover {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: rgba(15, 23, 42, 0.30) !important;
    backdrop-filter: blur(10px) !important;
}

.task-modal[hidden],
.appointment-popover[hidden] {
    display: none !important;
}

.task-modal-card,
.popover-panel {
    width: min(100%, 620px) !important;
    max-height: calc(100vh - 40px) !important;
    overflow: auto !important;
    padding: 22px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
}

.task-modal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 18px 0 0 !important;
}

.task-panel-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.panel-subsection {
    margin-top: 18px !important;
}

.panel-subsection h3 {
    margin: 0 0 10px !important;
    color: var(--erp-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
}

.appointment-popover-head {
    display: grid !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.appointment-popover-head h2 {
    margin: 0 !important;
    color: var(--erp-text) !important;
    font-size: 24px !important;
    font-weight: 850 !important;
}

.appointment-popover-head span {
    justify-self: start !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #115e59 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.appointment-popover-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.appointment-popover-summary article {
    padding: 12px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 16px !important;
    background: var(--erp-surface-soft) !important;
}

.appointment-popover-summary small {
    display: block !important;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.appointment-popover-summary strong {
    display: block !important;
    margin-top: 4px !important;
    color: var(--erp-text) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.appointment-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.room-simple-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 14px !important;
}

.room-simple-card {
    display: grid !important;
    gap: 14px !important;
    padding: 18px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: var(--erp-shadow-soft) !important;
}

.room-simple-head,
.room-simple-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.room-simple-head strong {
    display: block !important;
    color: var(--erp-text) !important;
    font-size: 20px !important;
    font-weight: 850 !important;
}

.room-simple-head small,
.room-simple-stats small {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.room-simple-score {
    text-align: right !important;
}

.room-simple-score strong {
    font-size: 34px !important;
    line-height: 1 !important;
}

.room-simple-meter {
    overflow: hidden !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
}

.room-simple-meter span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #14b8a6, #0f766e) !important;
}

.room-simple-stats span {
    display: grid !important;
    flex: 1 !important;
    gap: 2px !important;
    padding: 10px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 14px !important;
    background: var(--erp-surface-soft) !important;
}

.room-simple-stats strong {
    color: var(--erp-text) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
}

.room-simple-week {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    align-items: end !important;
    gap: 7px !important;
    height: 54px !important;
}

.room-simple-week > span {
    display: flex !important;
    align-items: end !important;
    overflow: hidden !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
}

.room-simple-week i {
    display: block !important;
    width: 100% !important;
    border-radius: inherit !important;
    background: #14b8a6 !important;
}

.room-simple-week .is-full i {
    background: #ef4444 !important;
}

.room-simple-week .is-medium i {
    background: #f59e0b !important;
}

.room-simple-slots {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.room-simple-slots small {
    width: 100% !important;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.room-simple-slots span {
    padding: 7px 12px !important;
    border: 1px solid #99f6e4 !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #0f766e !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.revenue-headline {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 4px 0 14px !important;
}

.revenue-headline strong {
    color: var(--erp-text) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
}

.revenue-headline span {
    color: var(--erp-muted) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.billing-health-list {
    display: grid !important;
    gap: 12px !important;
}

.billing-health-list article {
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 16px !important;
    background: var(--erp-surface-soft) !important;
}

.billing-health-list div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.billing-health-list span {
    color: var(--erp-muted) !important;
    font-weight: 800 !important;
}

.billing-health-list strong {
    color: var(--erp-text) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

.billing-health-list i {
    overflow: hidden !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
}

.billing-health-list b {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #14b8a6 !important;
}

.billing-health-list .is-danger b {
    background: #ef4444 !important;
}

.billing-health-list .is-soft b {
    background: #f59e0b !important;
}

.billing-health-list .is-muted b {
    background: #94a3b8 !important;
}

@media (max-width: 900px) {
    .company-preview-metrics,
    .appointment-popover-summary,
    .task-modal-form {
        grid-template-columns: 1fr !important;
    }
}

/* FINAL SIDEBAR LOCKUP - exact user reference. */
:root {
    --erp-sidebar: 264px;
    --erp-sidebar-closed: 88px;
}

.sidebar {
    padding: 16px 10px !important;
}

body.sidebar-collapsed .sidebar {
    padding: 16px 14px !important;
}

.sidebar .sidebar-head {
    display: grid !important;
    grid-template-columns: 122px 46px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 0 0 56px !important;
}

.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 122px !important;
    min-width: 122px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar .brand-logo-full {
    display: block !important;
    width: 122px !important;
    min-width: 122px !important;
    height: 42px !important;
}

.sidebar .brand-logo-full img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sidebar .brand-logo-mark {
    display: none !important;
}

.sidebar .sidebar-toggle,
body.sidebar-collapsed .sidebar .sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    border-radius: 14px !important;
}

.sidebar .sidebar-toggle-icon svg,
body.sidebar-collapsed .sidebar .sidebar-toggle-icon svg {
    width: 18px !important;
    height: 18px !important;
}

body.sidebar-collapsed .sidebar .sidebar-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    margin: 0 0 48px !important;
}

body.sidebar-collapsed .sidebar .brand {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    justify-content: center !important;
}

body.sidebar-collapsed .sidebar .brand-logo-full {
    display: none !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-mark {
    display: block !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* TRUE EOF LOGO LOCK - keep button untouched, correct logo dimensions only. */

/* Support tickets */
.support-shell {
    display: grid;
    gap: 1.25rem;
}

.support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.support-hero h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1;
    margin: .25rem 0 .5rem;
}

.support-stats {
    display: flex;
    gap: .75rem;
}

.support-stats span,
.support-read-state {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 1.25rem;
    background: #f8fafc;
    padding: .9rem 1rem;
}

.support-stats strong {
    display: block;
    color: #0f172a;
    font-size: 1.9rem;
    line-height: 1;
}

.support-stats small,
.support-read-state small,
.support-ticket-row small,
.support-admin-row small,
.support-side-card dt {
    color: #64748b;
    font-weight: 800;
}

.support-grid,
.support-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
}

.support-detail-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}

.support-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: .85rem;
}

.support-form .is-wide,
.support-form textarea,
.support-form .button {
    grid-column: 1 / -1;
}

.support-form label,
.support-filter-bar label {
    color: #475569;
    display: grid;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.support-form input,
.support-form select,
.support-form textarea,
.support-filter-bar input,
.support-filter-bar select {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    background: #fff;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    padding: .85rem 1rem;
    text-transform: none;
}

.support-form textarea {
    min-height: 150px;
    resize: vertical;
}

.support-ticket-list,
.support-admin-list {
    display: grid;
    gap: .75rem;
}

.support-ticket-row,
.support-admin-row {
    display: grid;
    align-items: center;
    gap: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    background: #fff;
    color: #0f172a;
    padding: 1rem;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.support-ticket-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.support-admin-row {
    grid-template-columns: 150px minmax(0, 1fr) auto;
}

.support-ticket-row:hover,
.support-admin-row:hover {
    border-color: #99f6e4;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.support-ticket-row strong,
.support-admin-row strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-ticket-row em {
    display: block;
    color: #64748b;
    font-style: normal;
    font-weight: 700;
}

.support-ticket-meta {
    display: grid;
    justify-items: end;
    gap: .35rem;
}

.support-ticket-number {
    border-radius: 999px;
    background: #ccfbf1;
    color: #134e4a;
    font-weight: 950;
    padding: .6rem .8rem;
    text-align: center;
}

.support-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) minmax(160px, .5fr) auto auto;
    gap: .75rem;
    align-items: end;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #f8fafc;
    margin-bottom: 1rem;
    padding: 1rem;
}

.support-read-state {
    display: grid;
    gap: .25rem;
    margin: 1rem 0;
}

.support-read-state strong {
    color: #0f766e;
}

.support-message {
    white-space: pre-wrap;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.7;
    margin: 1rem 0;
    padding: 1.1rem;
}

.support-message.is-admin {
    background: #ecfdf5;
    border-color: #99f6e4;
}

.support-message small {
    display: block;
    color: #0f766e;
    font-weight: 900;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.support-side-card dl {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 0;
}

.support-side-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: .75rem;
}

.support-side-card dd {
    color: #0f172a;
    font-weight: 900;
    text-align: right;
}

.support-ticket-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    gap: 1.25rem;
    align-items: start;
}

.support-admin-detail-card {
    overflow: hidden;
}

.support-ticket-topline,
.support-ticket-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.support-ticket-topline {
    margin-bottom: 1rem;
}

.support-ticket-titlebar {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1.1rem;
}

.support-ticket-titlebar h2 {
    color: #0f172a;
    font-size: clamp(1.75rem, 3vw, 2.7rem);
    line-height: 1.05;
    margin: .25rem 0 .35rem;
}

.support-ticket-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.support-ticket-facts span {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #f8fafc;
    padding: .8rem .9rem;
}

.support-ticket-facts small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.support-ticket-facts strong {
    display: block;
    color: #0f172a;
    font-size: .98rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-thread {
    display: grid;
    gap: .85rem;
    margin-top: .5rem;
}

.support-thread-item {
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    padding: 1rem;
}

.support-thread-item header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.support-thread-item header span {
    color: #0f172a;
    font-weight: 950;
}

.support-thread-item header time {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.support-thread-item p {
    color: #334155;
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
}

.support-thread-item.is-client {
    border-color: #99f6e4;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
}

.support-thread-item.is-system {
    background: #f8fafc;
}

.support-thread-item.is-admin {
    border-color: #ccfbf1;
    background: #ecfdf5;
}

.support-resolution-card {
    position: sticky;
    top: 1.25rem;
}

.support-resolution-card .support-form {
    grid-template-columns: 1fr;
}

.support-resolution-card .support-form label {
    min-width: 0;
}

.support-resolution-card .support-form select {
    min-height: 3.2rem;
}

.support-resolution-card .support-form textarea {
    min-height: 9rem;
}

@media (max-width: 1100px) {
    .support-grid,
    .support-detail-grid,
    .support-ticket-workspace {
        grid-template-columns: 1fr;
    }

    .support-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .support-hero,
    .support-stats {
        align-items: stretch;
        flex-direction: column;
    }

    .support-form,
    .support-filter-bar,
    .support-admin-row,
    .support-ticket-row,
    .support-ticket-facts {
        grid-template-columns: 1fr;
    }

    .support-ticket-meta {
        justify-items: start;
    }
}

/* LAST UI LOCK - active after all inherited sidebar, landing and support blocks. */
body.is-guest .app-shell {
    display: block !important;
    min-height: 100vh !important;
}

body.is-guest .sidebar,
body.is-guest .topbar {
    display: none !important;
}

body.is-guest .main {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(22px, 4vw, 56px) !important;
    background: linear-gradient(115deg, rgba(204, 251, 241, .48) 0%, rgba(248, 250, 252, .9) 36%, #ffffff 100%) !important;
}

.landing-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 180px !important;
}

.landing-brand span {
    width: 176px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.landing-brand span img {
    width: 176px !important;
    height: 50px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.legacy-hidden,
.landing-product-top,
.landing-calendar-preview,
.landing-metric-row {
    display: none !important;
}

body.sidebar-collapsed .sidebar {
    height: 100vh !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
}

body.sidebar-collapsed .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.sidebar-collapsed .nav {
    gap: 7px !important;
    padding-top: 0 !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 17px !important;
    height: 17px !important;
}
body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark {
    display: block !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
/* EOF active lock: landing dark logo and collapsed sidebar rhythm. */
.landing-brand span {
    width: 184px !important;
    min-width: 184px !important;
    height: 52px !important;
    overflow: visible !important;
}

.landing-brand span img {
    width: 184px !important;
    height: 52px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.auth-premium-copy img {
    width: min(206px, 56%) !important;
    height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-value-path {
    align-self: end !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

.landing-value-path span {
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(203, 213, 225, .78) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .76) !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    padding: 1rem !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .05) !important;
}

body.sidebar-collapsed .nav {
    gap: 8px !important;
    justify-items: center !important;
    padding-top: 2px !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 18.5px !important;
    height: 18.5px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 20px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -13px !important;
}

@media (max-width: 980px) {
    .landing-value-path {
        grid-template-columns: 1fr !important;
    }
}

/* TRUE EOF LOCK - commercial landing 2.0 and collapsed sidebar final rhythm. */
body.commercial-landing {
    background:
        radial-gradient(circle at 14% 18%, rgba(20, 184, 166, .16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(15, 118, 110, .08), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 48%, #ffffff 100%) !important;
    color: #0f172a !important;
}

.landing-nav {
    width: min(1500px, calc(100% - 48px)) !important;
    min-height: 74px !important;
    padding: 10px 14px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(203, 213, 225, .8) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(22px) !important;
}

.landing-brand {
    min-width: 190px !important;
}

.landing-brand span,
.landing-brand span img {
    width: 186px !important;
    height: 48px !important;
}

.landing-commercial-hero {
    width: min(1500px, calc(100% - 48px)) !important;
    min-height: calc(100vh - 118px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .62fr) !important;
    align-items: center !important;
    gap: clamp(2.5rem, 7vw, 7rem) !important;
    padding: clamp(72px, 9vw, 136px) 0 clamp(42px, 7vw, 92px) !important;
}

.landing-commercial-hero .landing-hero-copy {
    max-width: 900px !important;
}

.landing-commercial-hero h1 {
    max-width: 900px !important;
    margin: 0 !important;
    font-size: clamp(4.4rem, 8.4vw, 8.4rem) !important;
    line-height: .88 !important;
    letter-spacing: 0 !important;
    font-weight: 850 !important;
}

.landing-commercial-hero .landing-lead {
    max-width: 760px !important;
    margin-top: 1.6rem !important;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem) !important;
    line-height: 1.55 !important;
    color: #475569 !important;
}

.landing-demo-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 520px !important;
    border-radius: 36px !important;
    padding: clamp(28px, 4vw, 48px) !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(17, 94, 89, .92)),
        #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(153, 246, 228, .24) !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .22) !important;
}

.landing-demo-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -28% -20% auto auto !important;
    width: 320px !important;
    height: 320px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(20, 184, 166, .32), transparent 65%) !important;
    pointer-events: none !important;
}

.landing-demo-kicker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: .3rem .7rem !important;
    border-radius: 999px !important;
    background: rgba(204, 251, 241, .12) !important;
    border: 1px solid rgba(153, 246, 228, .22) !important;
    color: #99f6e4 !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.landing-demo-card strong {
    position: relative !important;
    display: block !important;
    max-width: 420px !important;
    margin-top: 1.25rem !important;
    font-size: clamp(2.2rem, 4vw, 4rem) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
}

.landing-demo-card > div {
    position: relative !important;
    display: grid !important;
    gap: .75rem !important;
    margin: 2.2rem 0 !important;
}

.landing-demo-card p {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    gap: .9rem !important;
    align-items: start !important;
    margin: 0 !important;
    padding: .95rem 0 !important;
    border-bottom: 1px solid rgba(203, 213, 225, .16) !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: .98rem !important;
    line-height: 1.45 !important;
}

.landing-demo-card p b {
    color: #ffffff !important;
    font-size: .95rem !important;
}

.landing-demo-card small {
    position: relative !important;
    display: block !important;
    max-width: 360px !important;
    color: rgba(255, 255, 255, .66) !important;
    line-height: 1.55 !important;
}

.landing-guide-section,
.landing-service-tour,
.landing-pricing-section,
.landing-access-section {
    width: min(1500px, calc(100% - 48px)) !important;
}

.landing-section-heading {
    max-width: 860px !important;
}

.landing-section-heading h2 {
    font-size: clamp(2.4rem, 5vw, 5.8rem) !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
}

.landing-sales-path {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.landing-sales-path article,
.landing-sales-path article.is-featured {
    grid-column: auto !important;
    min-height: 300px !important;
    padding: 1.65rem !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .84) !important;
    border: 1px solid rgba(203, 213, 225, .82) !important;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .06) !important;
}

.landing-sales-path article:nth-child(1) {
    background: linear-gradient(160deg, rgba(204, 251, 241, .82), rgba(255, 255, 255, .9)) !important;
    border-color: rgba(20, 184, 166, .32) !important;
}

.landing-sales-path span {
    color: #0f766e !important;
}

.landing-sales-path h3 {
    margin-top: 2.2rem !important;
    font-size: clamp(1.55rem, 2vw, 2.35rem) !important;
    line-height: 1 !important;
}

.landing-sales-path p {
    margin-top: 1rem !important;
    color: #475569 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.landing-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.1rem !important;
}

.landing-plan-card {
    border-radius: 30px !important;
    padding: 1.5rem !important;
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid rgba(203, 213, 225, .8) !important;
    box-shadow: 0 18px 58px rgba(15, 23, 42, .06) !important;
}

.landing-tour-backdrop {
    background: rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(5px) !important;
}

.landing-tour-panel {
    right: clamp(18px, 5vw, 72px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: min(440px, calc(100vw - 36px)) !important;
    border-radius: 30px !important;
    padding: 1.55rem !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .22) !important;
}

.is-tour-active {
    outline: 2px solid rgba(20, 184, 166, .34) !important;
    outline-offset: 8px !important;
    border-radius: 32px !important;
}

body.sidebar-collapsed .sidebar {
    overflow: hidden !important;
}

body.sidebar-collapsed .nav {
    gap: 9px !important;
    justify-items: center !important;
    padding-top: 0 !important;
    transform: translateY(-4px) !important;
}

body.sidebar-collapsed .nav a,
body.sidebar-collapsed .nav-locked {
    width: 43px !important;
    min-width: 43px !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 3px !important;
}

body.sidebar-collapsed .nav-icon {
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    flex-basis: 33px !important;
}

body.sidebar-collapsed .nav-icon svg {
    width: 19.5px !important;
    height: 19.5px !important;
}

body.sidebar-collapsed .nav > a:first-of-type {
    margin-bottom: 24px !important;
}

body.sidebar-collapsed .nav > a:first-of-type::after {
    bottom: -16px !important;
}

@media (max-width: 1120px) {
    .landing-commercial-hero,
    .landing-sales-path,
    .landing-plan-grid {
        grid-template-columns: 1fr !important;
    }

    .landing-commercial-hero {
        min-height: auto !important;
        padding-top: 46px !important;
    }

    .landing-demo-card {
        min-height: auto !important;
    }
}

@media (max-width: 760px) {
    .landing-nav,
    .landing-commercial-hero,
    .landing-guide-section,
    .landing-pricing-section,
    .landing-access-section {
        width: min(100% - 24px, 1500px) !important;
    }

    .landing-brand {
        min-width: 140px !important;
    }

    .landing-brand span,
    .landing-brand span img {
        width: 136px !important;
        height: 38px !important;
    }

    .landing-commercial-hero h1 {
        font-size: clamp(3.25rem, 15vw, 5rem) !important;
    }

    .landing-demo-card p {
        grid-template-columns: 1fr !important;
    }
}

/* TRUE EOF LOCK - subtle product preview in commercial demo. */
.landing-product-peek {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 1.35rem !important;
}

.landing-product-peek .peek-topline {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.landing-product-peek .peek-topline small {
    color: rgba(255, 255, 255, .62) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

.landing-product-peek > strong {
    max-width: 520px !important;
    font-size: clamp(2rem, 3.4vw, 3.5rem) !important;
}

.peek-window {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    min-height: 280px !important;
    border-radius: 28px !important;
    padding: 1rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08)),
        rgba(15, 23, 42, .42) !important;
    border: 1px solid rgba(203, 213, 225, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 26px 58px rgba(0, 0, 0, .18) !important;
}

.peek-window::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .09) 42%, transparent 72%) !important;
    transform: translateX(-72%) !important;
    animation: peek-sheen 5.6s ease-in-out infinite !important;
    pointer-events: none !important;
}

.peek-window-bar {
    display: flex !important;
    gap: .42rem !important;
    margin-bottom: .9rem !important;
}

.peek-window-bar span {
    width: .48rem !important;
    height: .48rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .28) !important;
}

.peek-grid {
    display: grid !important;
    grid-template-columns: 1.18fr .82fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: .75rem !important;
    margin: 0 !important;
}

.peek-grid section {
    position: relative !important;
    min-height: 112px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    padding: .9rem !important;
    background: rgba(255, 255, 255, .9) !important;
    color: #0f172a !important;
    border: 1px solid rgba(203, 213, 225, .25) !important;
}

.peek-agenda {
    grid-row: span 2 !important;
}

.peek-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    margin-bottom: .75rem !important;
}

.peek-heading span {
    color: #64748b !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.peek-heading b {
    color: #0f766e !important;
    font-size: .82rem !important;
}

.peek-calendar {
    position: relative !important;
    display: grid !important;
    grid-template-rows: repeat(4, 1fr) !important;
    gap: .55rem !important;
    min-height: 192px !important;
    padding-left: 2rem !important;
}

.peek-hour {
    position: relative !important;
    display: block !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #94a3b8 !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
}

.peek-hour::before {
    content: attr(class) !important;
    display: none !important;
}

.peek-appointment {
    position: absolute !important;
    left: 2.1rem !important;
    right: .1rem !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 0 .8rem !important;
    border-radius: 14px !important;
    background: #ecfdf5 !important;
    border-left: 4px solid #14b8a6 !important;
    color: #134e4a !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .14) !important;
    animation: peek-float 4.8s ease-in-out infinite !important;
}

.peek-appointment.is-one {
    top: 38px !important;
}

.peek-appointment.is-two {
    top: 128px !important;
    border-left-color: #8b5cf6 !important;
    background: #f5f3ff !important;
    color: #4c1d95 !important;
    animation-delay: .7s !important;
}

.peek-people {
    display: grid !important;
    gap: .52rem !important;
}

.peek-people span {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: .34rem .55rem .34rem 2rem !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
}

.peek-people span::before {
    content: "" !important;
    position: absolute !important;
    left: .52rem !important;
    width: .82rem !important;
    height: .82rem !important;
    border-radius: 999px !important;
    background: var(--worker) !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--worker) 18%, transparent) !important;
}

.peek-chart {
    min-height: 122px !important;
}

.peek-bars {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: end !important;
    gap: .55rem !important;
    min-height: 72px !important;
}

.peek-bars span {
    display: block !important;
    height: var(--bar) !important;
    min-height: 18px !important;
    border-radius: 999px 999px 8px 8px !important;
    background: linear-gradient(180deg, #14b8a6, #0f766e) !important;
    animation: peek-grow 3.8s ease-in-out infinite !important;
    transform-origin: bottom !important;
}

.peek-bars span:nth-child(2) {
    animation-delay: .22s !important;
}

.peek-bars span:nth-child(3) {
    animation-delay: .42s !important;
}

.peek-bars span:nth-child(4) {
    animation-delay: .64s !important;
}

@keyframes peek-sheen {
    0%, 46% {
        transform: translateX(-76%);
    }
    82%, 100% {
        transform: translateX(78%);
    }
}

@keyframes peek-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes peek-grow {
    0%, 100% {
        transform: scaleY(.86);
        opacity: .86;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .peek-window::after,
    .peek-appointment,
    .peek-bars span {
        animation: none !important;
    }
}

@media (max-width: 760px) {
    .peek-grid {
        grid-template-columns: 1fr !important;
    }

    .peek-agenda {
        grid-row: auto !important;
    }
}

/* TRUE EOF LOCK - compact product peek after inherited card rules. */
.landing-product-peek {
    min-height: 620px !important;
    max-height: 720px !important;
    padding: clamp(24px, 3vw, 36px) !important;
    gap: 1rem !important;
}

.landing-product-peek > .peek-topline,
.landing-product-peek > .peek-window {
    margin: 0 !important;
}

.landing-product-peek > .peek-topline {
    display: flex !important;
}

.landing-product-peek > .peek-window {
    display: block !important;
}

.landing-product-peek > strong {
    margin-top: .2rem !important;
    font-size: clamp(1.9rem, 2.8vw, 3.1rem) !important;
}

.peek-window {
    min-height: 286px !important;
    padding: .9rem !important;
}

.peek-grid {
    gap: .62rem !important;
}

.peek-grid section {
    min-height: 96px !important;
    padding: .78rem !important;
}

.peek-calendar {
    min-height: 164px !important;
    gap: .42rem !important;
}

.peek-appointment {
    min-height: 34px !important;
}

.peek-appointment.is-one {
    top: 34px !important;
}

.peek-appointment.is-two {
    top: 112px !important;
}

.landing-product-peek > small {
    margin-top: .1rem !important;
}

/* TRUE EOF LOCK - balanced preview layout for narrow hero card. */
.landing-product-peek {
    min-height: 640px !important;
    max-height: 660px !important;
}

.peek-window {
    min-height: 330px !important;
}

.peek-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
}

.peek-agenda {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

.peek-grid section {
    min-height: 88px !important;
}

.peek-calendar {
    min-height: 132px !important;
}

.peek-appointment.is-one {
    top: 30px !important;
}

.peek-appointment.is-two {
    top: 90px !important;
}

.peek-bars {
    min-height: 50px !important;
}

/* TRUE EOF LOCK - compact no-scroll login. */
body.is-guest .main {
    min-height: 100dvh !important;
    padding: clamp(10px, 1.8vw, 22px) !important;
    overflow: hidden !important;
    place-items: center !important;
}

.auth-premium {
    width: min(1480px, 100%) !important;
    max-height: calc(100dvh - 28px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(460px, .86fr) minmax(420px, .66fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 2.8vw, 2rem) !important;
}

.auth-premium-copy,
.auth-premium-card {
    min-height: 0 !important;
    max-height: calc(100dvh - 44px) !important;
    border-radius: 28px !important;
}

.auth-premium-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(.8rem, 1.5vw, 1.15rem) !important;
    padding: clamp(2rem, 4vw, 4rem) !important;
}

.auth-premium-copy img {
    width: min(166px, 46%) !important;
    height: 44px !important;
    margin-bottom: clamp(1.2rem, 3vw, 2.6rem) !important;
}

.auth-premium-copy h2 {
    max-width: 700px !important;
    font-size: clamp(3.1rem, 5.4vw, 5.65rem) !important;
    line-height: .91 !important;
    letter-spacing: 0 !important;
}

.auth-premium-copy p:not(.eyebrow) {
    max-width: 620px !important;
    font-size: clamp(1rem, 1.18vw, 1.22rem) !important;
    line-height: 1.45 !important;
}

.auth-premium-card {
    width: min(100%, 590px) !important;
    justify-self: center !important;
    padding: clamp(2rem, 3.4vw, 3.25rem) !important;
    gap: 1rem !important;
}

.auth-premium-card h2 {
    font-size: clamp(2.1rem, 3vw, 3.05rem) !important;
    line-height: 1 !important;
}

.auth-premium-card input {
    min-height: 54px !important;
    border-radius: 18px !important;
}

.auth-premium-card .button.primary {
    min-height: 54px !important;
    border-radius: 18px !important;
}

.auth-premium-card .notes {
    margin-top: .35rem !important;
}

@media (max-width: 1120px) {
    body.is-guest .main {
        overflow: auto !important;
        padding: 18px !important;
    }

    .auth-premium {
        grid-template-columns: 1fr !important;
        max-height: none !important;
    }

    .auth-premium-copy {
        display: none !important;
    }
}

/* TRUE EOF LOCK - client registration configurator and visible Stripe controls. */
.register-builder {
    width: min(1480px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(300px, .42fr) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.register-builder-copy,
.register-builder-form,
.register-section,
.company-stripe-card {
    border: 1px solid var(--border, #dbe4ef);
    border-radius: 26px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .08);
}

.register-builder-copy {
    position: sticky;
    top: 1rem;
    min-height: 520px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(145deg, #ffffff 0%, #f0fdfa 52%, #eef2ff 100%);
}

.register-builder-copy img {
    width: 156px;
    height: auto;
    margin-bottom: 1.4rem;
}

.register-builder-copy h2 {
    max-width: 560px;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: .94;
    letter-spacing: 0;
}

.register-builder-copy p {
    max-width: 520px;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
}

.register-builder-form {
    padding: clamp(1rem, 2vw, 1.4rem);
    display: grid;
    gap: .85rem;
}

.register-section {
    padding: clamp(1rem, 2vw, 1.35rem);
    display: grid;
    gap: 1rem;
    box-shadow: none;
}

.register-section.compact {
    grid-template-columns: minmax(180px, .28fr) 1fr;
    align-items: center;
}

.register-section h2 {
    font-size: clamp(1.35rem, 1.8vw, 1.8rem);
    line-height: 1.05;
    margin: .1rem 0 0;
}

.register-form-grid,
.register-plan-grid,
.register-term-grid,
.register-extra-grid {
    display: grid;
    gap: .75rem;
}

.register-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.register-form-grid label:last-child {
    grid-column: span 2;
}

.register-heading-row,
.register-submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.register-heading-row > strong {
    min-width: 220px;
    padding: .9rem 1.05rem;
    border-radius: 18px;
    background: #ecfdf5;
    color: #134e4a;
    text-align: center;
    font-size: 1.05rem;
}

.register-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.register-plan-card,
.register-term-card,
.register-extra-card {
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.register-plan-card input,
.register-term-card input,
.register-extra-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.register-plan-card > span,
.register-term-card > span {
    min-height: 172px;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 22px;
    display: grid;
    gap: .65rem;
    background: #f8fafc;
}

.register-plan-card input:checked + span,
.register-term-card input:checked + span {
    border-color: #14b8a6;
    background: linear-gradient(145deg, #ecfdf5, #ffffff);
    box-shadow: 0 18px 42px rgba(20, 184, 166, .16);
}

.register-plan-card small,
.register-term-card small,
.register-extra-card small {
    color: #64748b;
    font-weight: 700;
}

.register-plan-card strong {
    font-size: 1.35rem;
}

.register-plan-card em {
    font-style: normal;
    font-size: 1.6rem;
    font-weight: 900;
    color: #0f172a;
}

.register-plan-card b {
    color: #64748b;
    font-weight: 600;
    line-height: 1.35;
}

.register-term-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.register-term-card > span {
    min-height: 86px;
}

.register-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.register-extra-card {
    position: relative;
    min-height: 92px;
    padding: .95rem 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: center;
    background: #ffffff;
}

.register-extra-card.is-selected {
    border-color: #14b8a6;
    background: #ecfdf5;
}

.register-extra-card.is-included {
    border-color: #ccfbf1;
    background: #f0fdfa;
}

.register-extra-card.is-included::after {
    content: "Incluido";
    position: absolute;
    top: .75rem;
    right: .85rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #ccfbf1;
    color: #134e4a;
    font-size: .72rem;
    font-weight: 900;
}

.register-extra-card strong {
    display: block;
    margin-bottom: .18rem;
}

.register-extra-card em {
    font-style: normal;
    color: #0f766e;
    font-weight: 900;
    padding-right: .2rem;
}

.register-submit-row {
    padding: 1rem;
    border-radius: 22px;
    background: #0f172a;
    color: #fff;
}

.register-submit-row small {
    display: block;
    margin-top: .2rem;
    color: #cbd5e1;
}

.register-submit-row .button {
    min-width: 220px;
}

.company-stripe-card {
    display: grid;
    grid-template-columns: minmax(260px, .82fr) minmax(360px, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    border-color: rgba(20, 184, 166, .28);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #ecfdf5 100%);
}

.company-stripe-copy h2 {
    margin: .12rem 0;
    font-size: clamp(1.6rem, 2.4vw, 2.5rem);
    line-height: 1;
}

.company-stripe-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.company-stripe-summary span {
    min-height: 82px;
    padding: .85rem;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
}

.company-stripe-summary small {
    display: block;
    margin-bottom: .3rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
    font-size: .72rem;
}

.company-stripe-summary strong {
    font-size: .98rem;
}

.company-stripe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

.stripe-muted {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .7rem .9rem;
    border-radius: 16px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 900;
}

.landing-register-route {
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    display: grid;
    gap: .35rem;
    background: #f8fafc;
}

.landing-register-route strong {
    color: #0f172a;
}

.landing-register-route span {
    color: #64748b;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .register-builder,
    .company-stripe-card {
        grid-template-columns: 1fr;
    }

    .register-builder-copy {
        position: static;
        min-height: 0;
    }

    .company-stripe-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    .register-form-grid,
    .register-plan-grid,
    .register-term-grid,
    .register-extra-grid,
    .company-stripe-summary {
        grid-template-columns: 1fr;
    }

    .register-form-grid label:last-child {
        grid-column: auto;
    }

    .register-section.compact,
    .register-heading-row,
    .register-submit-row {
        display: grid;
    }
}

/* TRUE EOF LOCK - final polish for login brand, Stripe card and commercial agenda preview. */
.auth-premium-copy img {
    width: clamp(220px, 18vw, 310px) !important;
    height: auto !important;
    max-height: 82px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin-bottom: clamp(1.5rem, 3vw, 2.8rem) !important;
}

.company-stripe-card {
    position: relative !important;
    grid-template-columns: minmax(300px, .78fr) minmax(420px, 1fr) minmax(210px, auto) !important;
    overflow: hidden !important;
}

.company-stripe-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: linear-gradient(180deg, #14b8a6, #0f766e);
}

.company-stripe-copy {
    position: relative;
    padding-left: .45rem;
}

.company-stripe-copy .eyebrow {
    color: #0f766e !important;
}

.company-stripe-summary span {
    position: relative;
    min-height: 96px !important;
    display: grid;
    align-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.company-stripe-summary span:first-child {
    border-color: rgba(20, 184, 166, .32);
    background: linear-gradient(145deg, #ecfdf5, #ffffff);
}

.company-stripe-summary strong {
    color: #0f172a;
    font-size: 1.05rem !important;
    line-height: 1.18;
}

.company-stripe-actions .button {
    min-width: 176px;
    justify-content: center;
}

.peek-calendar {
    grid-template-rows: repeat(4, 30px) !important;
    gap: .46rem !important;
    min-height: 152px !important;
    padding-left: 2.65rem !important;
    padding-top: .15rem !important;
}

.peek-hour {
    height: 30px !important;
    line-height: 30px !important;
    font-size: .76rem !important;
    overflow: visible !important;
}

.peek-hour::after {
    content: "";
    position: absolute;
    left: 2.15rem;
    right: 0;
    top: 0;
    height: 1px;
    background: #e2e8f0;
}

.peek-appointment {
    left: 4.35rem !important;
    min-height: 38px !important;
    padding: 0 1rem !important;
}

.peek-appointment.is-one {
    top: 39px !important;
}

.peek-appointment.is-two {
    top: 94px !important;
}

@media (max-width: 1180px) {
    .company-stripe-card {
        grid-template-columns: 1fr !important;
    }
}

/* TRUE EOF LOCK - immersive commercial tour and interactive product peek. */
.landing-tour-backdrop {
    background:
        radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .18), transparent 28%),
        rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(10px) !important;
}

.landing-tour-panel {
    width: min(430px, calc(100vw - 28px)) !important;
    padding: 1.15rem !important;
    border-radius: 26px !important;
    border: 1px solid rgba(203, 213, 225, .72) !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .24) !important;
    background: rgba(255, 255, 255, .94) !important;
}

.landing-tour-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
    margin-bottom: .9rem;
}

.landing-tour-progress button {
    height: 8px;
    border: 0;
    border-radius: 999px;
    color: transparent;
    background: #e2e8f0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.landing-tour-progress button.is-active {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    transform: scaleY(1.6);
    box-shadow: 0 10px 24px rgba(20, 184, 166, .25);
}

.landing-tour-panel h2 {
    margin-top: .2rem !important;
    font-size: clamp(1.65rem, 2.5vw, 2.25rem) !important;
    line-height: 1.02 !important;
}

.landing-tour-panel [data-tour-body] {
    color: #64748b !important;
    line-height: 1.55 !important;
}

.landing-tour-points {
    display: grid;
    gap: .5rem;
    margin: .95rem 0 1rem;
    padding: 0;
    list-style: none;
}

.landing-tour-points li {
    position: relative;
    min-height: 40px;
    padding: .65rem .75rem .65rem 2rem;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 800;
}

.landing-tour-points li::before {
    content: "";
    position: absolute;
    left: .72rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: #14b8a6;
    transform: translateY(-50%);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, .12);
}

.landing-tour-actions {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    gap: .55rem !important;
}

.landing-tour-actions [data-tour-next] {
    justify-self: stretch;
}

.landing-tour-actions [data-tour-prev][hidden] {
    display: none !important;
}

.commercial-landing .is-tour-active {
    position: relative;
    outline: 2px solid rgba(20, 184, 166, .42);
    outline-offset: 10px;
    border-radius: 34px;
    transition: outline-color .25s ease, transform .25s ease;
}

.peek-micro-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .2rem;
}

.peek-micro-tabs button {
    min-height: 64px;
    padding: .65rem;
    border: 1px solid rgba(203, 213, 225, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    text-align: left;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.peek-micro-tabs button small {
    display: block;
    margin-top: .18rem;
    color: rgba(203, 213, 225, .75);
    font-size: .72rem;
    line-height: 1.25;
}

.peek-micro-tabs button:hover,
.peek-micro-tabs button.is-active {
    transform: translateY(-2px);
    border-color: rgba(153, 246, 228, .55);
    background: rgba(20, 184, 166, .18);
}

.landing-product-peek[data-peek-mode="agenda"] .peek-agenda,
.landing-product-peek[data-peek-mode="team"] .peek-team,
.landing-product-peek[data-peek-mode="clients"] .peek-clients,
.landing-product-peek[data-peek-mode="billing"] .peek-chart {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, .65) !important;
    box-shadow: 0 18px 38px rgba(20, 184, 166, .16) !important;
}

.peek-grid section {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease !important;
}

.landing-product-peek[data-peek-mode="team"] .peek-agenda,
.landing-product-peek[data-peek-mode="clients"] .peek-agenda,
.landing-product-peek[data-peek-mode="billing"] .peek-agenda {
    opacity: .86;
}

@media (max-width: 760px) {
    .landing-tour-actions {
        grid-template-columns: 1fr !important;
    }

    .peek-micro-tabs {
        grid-template-columns: 1fr !important;
    }
}

/* TRUE EOF LOCK - commercial product tour 3 phases and tour overlay stability. */
.landing-tour[hidden] {
    display: none !important;
}

.landing-tour {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
    pointer-events: auto !important;
}

.landing-tour-backdrop {
    position: absolute !important;
    inset: 0 !important;
}

.landing-tour-panel {
    position: relative !important;
    z-index: 1 !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: auto !important;
}

body.tour-open {
    overflow: hidden !important;
}

.peek-clients .peek-client-list {
    gap: .55rem !important;
}

.peek-client-list span {
    display: grid !important;
    gap: .08rem !important;
    padding: .46rem .62rem .46rem 1.8rem !important;
}

.peek-client-list span b {
    color: #0f172a;
    font-size: .78rem;
    line-height: 1.05;
}

.peek-client-list span small {
    color: #64748b;
    font-size: .62rem;
    line-height: 1.1;
}

.landing-service-tour {
    display: grid;
    gap: clamp(1rem, 2vw, 1.35rem);
}

.service-tour-shell {
    display: grid;
    grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr);
    gap: clamp(.9rem, 2vw, 1.25rem);
    align-items: stretch;
}

.service-tour-steps {
    display: grid;
    gap: .72rem;
}

.service-tour-steps button {
    width: 100%;
    min-height: 94px;
    padding: .95rem 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.service-tour-steps button:hover,
.service-tour-steps button.is-active {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, .48);
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    box-shadow: 0 20px 45px rgba(15, 118, 110, .12);
}

.service-tour-steps span {
    display: inline-flex;
    margin-bottom: .4rem;
    color: #0f766e;
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .08em;
}

.service-tour-steps strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.1;
}

.service-tour-steps small {
    display: block;
    margin-top: .3rem;
    color: #64748b;
    line-height: 1.35;
}

.service-tour-stage {
    position: relative;
    min-height: 360px;
    border: 1px solid #dbe4ef;
    border-radius: 30px;
    background:
        radial-gradient(circle at 82% 10%, rgba(20, 184, 166, .14), transparent 30%),
        linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.service-tour-stage article {
    display: none;
    grid-template-columns: minmax(250px, .76fr) minmax(300px, 1fr);
    gap: 1.15rem;
    align-items: center;
    min-height: 360px;
    padding: clamp(1rem, 2.4vw, 1.75rem);
}

.service-tour-stage article.is-active {
    display: grid;
}

.service-tour-stage h3 {
    margin: .2rem 0 .55rem;
    color: #0f172a;
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: .98;
}

.service-tour-stage p:not(.landing-eyebrow) {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 42rem;
}

.service-visual {
    min-height: 260px;
    border: 1px solid #dbe4ef;
    border-radius: 26px;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 36px rgba(15, 23, 42, .08);
}

.service-calendar-visual {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-auto-rows: 58px;
    gap: .55rem;
    padding: 1.1rem;
}

.service-hour {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-weight: 900;
}

.service-card,
.service-free {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: .72rem .85rem;
    border-radius: 18px;
    font-weight: 900;
}

.service-card small,
.service-free {
    color: #64748b;
    font-size: .78rem;
}

.service-card.is-teal {
    border: 1px solid rgba(20, 184, 166, .32);
    background: #ecfdf5;
    color: #0f766e;
}

.service-card.is-green {
    border: 1px solid rgba(15, 118, 110, .32);
    background: #f0fdfa;
    color: #134e4a;
}

.service-free {
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
}

.service-client-visual {
    display: grid;
    gap: .8rem;
    align-content: center;
    padding: 1.1rem;
}

.service-client-visual span {
    display: grid;
    gap: .24rem;
    padding: .9rem 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
}

.service-client-visual b {
    color: #0f172a;
}

.service-client-visual small {
    color: #64748b;
    font-weight: 800;
}

.service-business-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    align-content: center;
    padding: 1.1rem;
}

.service-business-visual div {
    min-height: 118px;
    display: grid;
    align-content: end;
    gap: .35rem;
    padding: .9rem;
    border: 1px solid #dbe4ef;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.service-business-visual small {
    color: #64748b;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
}

.service-business-visual b {
    color: #0f172a;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1;
}

.service-business-visual > span {
    grid-column: 1 / -1;
    height: 88px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, .92) 0 48%, rgba(15, 118, 110, .24) 48% 72%, rgba(245, 158, 11, .28) 72% 100%),
        #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .7);
}

@media (max-width: 980px) {
    .service-tour-shell,
    .service-tour-stage article {
        grid-template-columns: 1fr;
    }

    .service-tour-stage article {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .service-tour-steps {
        grid-template-columns: 1fr;
    }

    .service-business-visual {
        grid-template-columns: 1fr;
    }
}

/* TRUE EOF LOCK - landing review polish: readable, aligned and smooth. */
html {
    scroll-behavior: smooth !important;
}

.landing-nav {
    display: grid !important;
    grid-template-columns: auto minmax(320px, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(1rem, 3vw, 2.5rem) !important;
}

.landing-nav-links {
    justify-content: center !important;
}

.landing-nav-actions {
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    min-width: max-content !important;
}

.landing-button {
    min-height: 54px !important;
    padding: 0 1.3rem !important;
    border-radius: 20px !important;
    font-size: .98rem !important;
    line-height: 1 !important;
}

.landing-button.large {
    min-height: 58px !important;
    padding: 0 1.55rem !important;
}

.landing-commercial-hero,
.landing-service-tour,
.landing-guide-section,
.landing-pricing-section,
.landing-access-section {
    scroll-margin-top: 112px !important;
}

.landing-commercial-hero {
    grid-template-columns: minmax(0, .92fr) minmax(470px, .78fr) !important;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
}

.landing-product-peek {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: clamp(22px, 2.6vw, 32px) !important;
    gap: .8rem !important;
}

.landing-product-peek > div {
    margin: 0 !important;
}

.landing-product-peek > strong {
    max-width: 500px !important;
    margin-top: .05rem !important;
    font-size: clamp(1.55rem, 2.25vw, 2.35rem) !important;
    line-height: 1 !important;
}

.peek-window {
    min-height: 252px !important;
    padding: .78rem !important;
    border-radius: 24px !important;
}

.peek-window-bar {
    margin-bottom: .58rem !important;
}

.peek-grid {
    gap: .52rem !important;
    grid-template-rows: 170px 112px !important;
}

.peek-grid section {
    min-height: 78px !important;
    padding: .68rem !important;
    border-radius: 17px !important;
}

.peek-clients,
.peek-chart {
    max-height: 112px !important;
}

.peek-client-list span:nth-child(3) {
    display: none !important;
}

.peek-calendar {
    min-height: 114px !important;
    padding-left: 2.45rem !important;
}

.peek-hour {
    height: 24px !important;
    line-height: 24px !important;
}

.peek-appointment {
    left: 3.85rem !important;
    min-height: 30px !important;
    font-size: .74rem !important;
}

.peek-appointment.is-one {
    top: 28px !important;
}

.peek-appointment.is-two {
    top: 76px !important;
}

.peek-client-list span {
    min-height: 30px !important;
    padding-top: .36rem !important;
    padding-bottom: .36rem !important;
}

.peek-bars {
    min-height: 44px !important;
}

.landing-product-peek > small {
    max-width: 520px !important;
    color: rgba(255, 255, 255, .8) !important;
    font-size: .9rem !important;
}

.peek-micro-tabs {
    gap: .45rem !important;
}

.peek-micro-tabs button {
    min-height: 54px !important;
    padding: .55rem .62rem !important;
    border-radius: 16px !important;
}

.peek-micro-tabs button small {
    font-size: .66rem !important;
}

.landing-sales-path article:nth-child(1) h3,
.landing-sales-path article:nth-child(1) p {
    color: #0f172a !important;
}

.landing-sales-path span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: rgba(20, 184, 166, .12) !important;
    color: #0f766e !important;
    font-size: .78rem !important;
    letter-spacing: .08em !important;
}

.landing-sales-path article:nth-child(1) {
    background: linear-gradient(160deg, rgba(204, 251, 241, .72), rgba(255, 255, 255, .96)) !important;
}

.landing-plan-grid {
    align-items: stretch !important;
}

.landing-plan-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

.landing-plan-card .landing-button {
    margin-top: auto !important;
}

.landing-plan-card ul {
    margin-bottom: 1.25rem !important;
}

.landing-tour {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    isolation: isolate !important;
}

.landing-tour[hidden] {
    display: none !important;
}

.landing-tour-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 70% 16%, rgba(20, 184, 166, .16), transparent 30%),
        rgba(15, 23, 42, .38) !important;
    backdrop-filter: blur(8px) saturate(1.05) !important;
}

.landing-tour-panel {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 20 !important;
    width: min(460px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow: auto !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    transform-style: flat !important;
}

.landing-tour-panel h2,
.landing-tour-panel [data-tour-body],
.landing-tour-points li {
    text-shadow: none !important;
}

.landing-tour-actions {
    align-items: center !important;
}

.landing-tour-actions .landing-button {
    min-height: 48px !important;
    border-radius: 16px !important;
}

@media (max-width: 980px) {
    .landing-nav {
        grid-template-columns: 1fr !important;
    }

    .landing-nav-links,
    .landing-nav-actions {
        justify-self: stretch !important;
        justify-content: center !important;
    }
}

/* TRUE EOF LOCK - landing guided demo v2: non-blocking commercial assistant. */
.commercial-landing .is-tour-active {
    outline: 1px solid rgba(20, 184, 166, .45) !important;
    outline-offset: 10px !important;
    box-shadow: 0 22px 70px rgba(15, 118, 110, .13) !important;
    transition: outline-color .28s ease, box-shadow .28s ease !important;
}

.landing-tour {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: block !important;
    padding: 0 !important;
    pointer-events: none !important;
    isolation: isolate !important;
}

.landing-tour[hidden] {
    display: none !important;
}

.landing-tour-backdrop {
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}

.landing-tour-panel {
    position: fixed !important;
    right: clamp(18px, 3vw, 42px) !important;
    bottom: clamp(18px, 3vw, 42px) !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(410px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: auto !important;
    padding: 1rem !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    border: 1px solid rgba(203, 213, 225, .9) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(248, 250, 252, .96)) !important;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .18), 0 0 0 1px rgba(255, 255, 255, .72) inset !important;
    backdrop-filter: blur(18px) saturate(1.05) !important;
}

body.tour-open {
    overflow: auto !important;
}

.landing-tour-progress {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .38rem !important;
    margin-bottom: .85rem !important;
}

.landing-tour-progress button {
    min-height: 34px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}

.landing-tour-progress button:hover,
.landing-tour-progress button.is-active {
    transform: translateY(-1px) !important;
    border-color: rgba(20, 184, 166, .45) !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
}

.landing-tour-panel .landing-eyebrow {
    margin: 0 0 .32rem !important;
    color: #0f766e !important;
    font-size: .72rem !important;
    letter-spacing: .09em !important;
}

.landing-tour-panel h2 {
    margin: 0 0 .5rem !important;
    color: #0f172a !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    line-height: 1.05 !important;
    text-shadow: none !important;
}

.landing-tour-panel [data-tour-body] {
    margin: 0 0 .8rem !important;
    color: #475569 !important;
    font-size: .96rem !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}

.landing-tour-points {
    display: grid !important;
    gap: .42rem !important;
    margin: 0 0 .95rem !important;
    padding: 0 !important;
    list-style: none !important;
}

.landing-tour-points li {
    position: relative !important;
    padding: .58rem .7rem .58rem 2rem !important;
    border: 1px solid rgba(20, 184, 166, .18) !important;
    border-radius: 16px !important;
    background: rgba(236, 253, 245, .78) !important;
    color: #334155 !important;
    font-size: .88rem !important;
    line-height: 1.25 !important;
    text-shadow: none !important;
}

.landing-tour-points li::before {
    content: "" !important;
    position: absolute !important;
    left: .78rem !important;
    top: 50% !important;
    width: .5rem !important;
    height: .5rem !important;
    border-radius: 999px !important;
    background: #14b8a6 !important;
    transform: translateY(-50%) !important;
}

.landing-tour-actions {
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    gap: .5rem !important;
    align-items: center !important;
}

.landing-tour-actions .landing-button {
    min-height: 44px !important;
    padding: 0 .9rem !important;
    border-radius: 16px !important;
    font-size: .88rem !important;
}

.landing-tour-actions [data-tour-next] {
    justify-self: stretch !important;
}

.landing-tour-actions [data-tour-prev][hidden] {
    display: none !important;
}

.landing-tour-actions [data-tour-prev][hidden] + [data-tour-next],
.landing-tour-actions [data-tour-next]:first-child {
    grid-column: auto !important;
}

@media (max-width: 760px) {
    .landing-tour-panel {
        right: 12px !important;
        bottom: 12px !important;
        width: calc(100vw - 24px) !important;
        border-radius: 24px !important;
    }

    .landing-tour-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    .landing-tour-actions [data-tour-next] {
        grid-column: 1 / -1 !important;
    }
}

/* TRUE EOF LOCK - guided demo v3: bottom sales dock, landing stays visible. */
.landing-tour-panel {
    left: 50% !important;
    right: auto !important;
    bottom: clamp(14px, 2vw, 24px) !important;
    top: auto !important;
    width: min(980px, calc(100vw - 40px)) !important;
    max-height: min(34dvh, 260px) !important;
    padding: .9rem !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr) auto !important;
    grid-template-areas:
        "progress content actions" !important;
    column-gap: .95rem !important;
    align-items: center !important;
    border-radius: 26px !important;
}

.landing-tour-progress {
    grid-area: progress !important;
    margin: 0 !important;
    align-self: stretch !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

.landing-tour-panel .landing-eyebrow,
.landing-tour-panel h2,
.landing-tour-panel [data-tour-body],
.landing-tour-points {
    grid-area: content !important;
}

.landing-tour-panel .landing-eyebrow {
    align-self: start !important;
    margin-top: .12rem !important;
}

.landing-tour-panel h2 {
    margin-top: 1.15rem !important;
    font-size: clamp(1.18rem, 1.65vw, 1.45rem) !important;
}

.landing-tour-panel [data-tour-body] {
    margin-top: 3rem !important;
    margin-bottom: 0 !important;
    max-width: 52rem !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
}

.landing-tour-points {
    display: none !important;
}

.landing-tour-actions {
    grid-area: actions !important;
    grid-template-columns: 1fr !important;
    width: 190px !important;
}

.landing-tour-actions .landing-button {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 14px !important;
}

.landing-tour-actions [data-tour-close] {
    order: 3 !important;
}

.landing-tour-actions [data-tour-prev] {
    order: 2 !important;
}

.landing-tour-actions [data-tour-next] {
    order: 1 !important;
}

.commercial-landing .is-tour-active {
    outline-offset: 6px !important;
    box-shadow: 0 18px 48px rgba(15, 118, 110, .1) !important;
}

@media (max-width: 920px) {
    .landing-tour-panel {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "progress"
            "content"
            "actions" !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .landing-tour-progress {
        min-height: 36px !important;
    }

    .landing-tour-panel [data-tour-body] {
        margin-top: 3.1rem !important;
    }

    .landing-tour-actions {
        width: 100% !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* TRUE EOF LOCK - landing 2.1: quieter sales page and minimal guided bar. */
.commercial-landing {
    overflow-x: hidden !important;
}

.landing-nav {
    width: min(1480px, calc(100vw - 48px)) !important;
    min-height: 70px !important;
    padding: .75rem 1rem !important;
    gap: clamp(1.1rem, 4vw, 4rem) !important;
}

.landing-brand span {
    width: 148px !important;
    height: 46px !important;
    overflow: visible !important;
}

.landing-brand span img {
    width: 148px !important;
    height: 46px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-nav-links {
    gap: clamp(1.4rem, 4vw, 4.2rem) !important;
}

.landing-nav-links a,
.landing-link-button {
    color: #475569 !important;
    font-size: .96rem !important;
    font-weight: 800 !important;
}

.landing-nav-actions {
    gap: .72rem !important;
}

.landing-nav-actions .landing-button,
.landing-nav-actions .landing-link-button {
    min-height: 48px !important;
    border-radius: 18px !important;
    padding: 0 1.05rem !important;
}

.landing-commercial-hero {
    min-height: calc(100dvh - 112px) !important;
    grid-template-columns: minmax(0, .9fr) minmax(430px, .72fr) !important;
    align-items: center !important;
    padding-top: clamp(2rem, 5vw, 4rem) !important;
}

.landing-hero h1 {
    max-width: 820px !important;
    font-size: clamp(4rem, 7.4vw, 8.4rem) !important;
    line-height: .9 !important;
    letter-spacing: -.035em !important;
}

.landing-lead {
    max-width: 820px !important;
    color: #475569 !important;
    font-size: clamp(1.02rem, 1.25vw, 1.28rem) !important;
    line-height: 1.55 !important;
}

.landing-section-heading h2 {
    max-width: 980px !important;
    font-size: clamp(2.2rem, 4.4vw, 5.4rem) !important;
    line-height: .96 !important;
    letter-spacing: -.03em !important;
}

.landing-section-heading p:not(.landing-eyebrow) {
    color: #475569 !important;
}

.service-tour-shell {
    grid-template-columns: minmax(220px, .48fr) minmax(0, 1fr) !important;
}

.service-tour-steps {
    gap: .58rem !important;
}

.service-tour-steps button {
    min-height: 78px !important;
    padding: .78rem .9rem !important;
    border-radius: 20px !important;
}

.service-tour-steps strong {
    font-size: .98rem !important;
}

.service-tour-steps small {
    font-size: .78rem !important;
}

.service-tour-stage {
    min-height: 300px !important;
    border-radius: 26px !important;
}

.service-tour-stage article {
    min-height: 300px !important;
    grid-template-columns: minmax(230px, .72fr) minmax(280px, 1fr) !important;
}

.service-tour-stage h3 {
    font-size: clamp(1.9rem, 3.4vw, 4rem) !important;
    line-height: .96 !important;
}

.service-tour-stage p:not(.landing-eyebrow) {
    max-width: 38rem !important;
    font-size: .98rem !important;
    color: #475569 !important;
}

.landing-guide-grid article,
.landing-plan-card {
    border-radius: 26px !important;
}

.landing-tour-panel {
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(760px, calc(100vw - 44px)) !important;
    max-height: 128px !important;
    min-height: 104px !important;
    padding: .72rem !important;
    display: grid !important;
    grid-template-columns: 146px minmax(0, 1fr) 180px !important;
    grid-template-areas: "progress content actions" !important;
    gap: .72rem !important;
    align-items: center !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 18px 52px rgba(15, 23, 42, .18) !important;
}

.landing-tour-progress {
    grid-area: progress !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .35rem !important;
}

.landing-tour-progress button {
    min-height: 32px !important;
    padding: 0 !important;
    font-size: .72rem !important;
}

.landing-tour-panel .landing-eyebrow {
    grid-area: content !important;
    margin: -.1rem 0 0 !important;
    align-self: start !important;
    font-size: .68rem !important;
}

.landing-tour-panel h2 {
    grid-area: content !important;
    margin: 1.1rem 0 0 !important;
    align-self: start !important;
    font-size: 1.08rem !important;
    line-height: 1.05 !important;
}

.landing-tour-panel [data-tour-body] {
    grid-area: content !important;
    margin: 2.55rem 0 0 !important;
    align-self: start !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: .82rem !important;
    line-height: 1.28 !important;
}

.landing-tour-points {
    display: none !important;
}

.landing-tour-actions {
    grid-area: actions !important;
    width: 180px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .42rem !important;
}

.landing-tour-actions .landing-button {
    min-height: 38px !important;
    padding: 0 .65rem !important;
    border-radius: 14px !important;
    font-size: .8rem !important;
}

.landing-tour-actions [data-tour-close] {
    order: 2 !important;
}

.landing-tour-actions [data-tour-prev] {
    order: 1 !important;
}

.landing-tour-actions [data-tour-next] {
    order: 3 !important;
    grid-column: 1 / -1 !important;
}

@media (max-width: 860px) {
    .landing-commercial-hero,
    .service-tour-shell,
    .service-tour-stage article {
        grid-template-columns: 1fr !important;
    }

    .landing-tour-panel {
        width: calc(100vw - 24px) !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "progress"
            "content"
            "actions" !important;
    }

    .landing-tour-actions {
        width: 100% !important;
    }
}

/* TRUE EOF LOCK - landing 2.2: calmer commercial scale. */
.landing-section-heading h2 {
    font-size: clamp(2rem, 3.4vw, 4.1rem) !important;
    line-height: 1 !important;
    max-width: 820px !important;
}

.landing-service-tour {
    padding-top: clamp(1.4rem, 3vw, 2.4rem) !important;
}

.service-tour-shell {
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr) !important;
    gap: .9rem !important;
}

.service-tour-stage h3 {
    font-size: clamp(1.65rem, 2.65vw, 3.15rem) !important;
    line-height: 1.02 !important;
    max-width: 360px !important;
}

.service-tour-stage article {
    padding: clamp(1rem, 1.8vw, 1.35rem) !important;
    gap: .85rem !important;
}

.service-visual {
    min-height: 220px !important;
}

.service-calendar-visual {
    grid-auto-rows: 48px !important;
}

.landing-tour-panel {
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    width: min(440px, calc(100vw - 32px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-areas:
        "progress content"
        "actions actions" !important;
    padding: .72rem !important;
    gap: .58rem .68rem !important;
}

.landing-tour-progress {
    grid-template-columns: repeat(2, 1fr) !important;
    align-self: center !important;
}

.landing-tour-progress button {
    min-height: 28px !important;
    font-size: .68rem !important;
}

.landing-tour-panel .landing-eyebrow {
    margin-top: 0 !important;
}

.landing-tour-panel h2 {
    margin-top: .98rem !important;
    font-size: 1rem !important;
}

.landing-tour-panel [data-tour-body] {
    margin-top: 2.28rem !important;
    -webkit-line-clamp: 1 !important;
    font-size: .78rem !important;
}

.landing-tour-actions {
    width: 100% !important;
    grid-template-columns: 1fr 1fr 1.35fr !important;
}

.landing-tour-actions [data-tour-next] {
    grid-column: auto !important;
}

.landing-tour-actions .landing-button {
    min-height: 36px !important;
}

@media (max-width: 720px) {
    .landing-tour-panel {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }
}

/* Commercial/legal acceptance flow. Keep this explicit: Clinc is a service, not a boxed program. */
.legal-consent-section {
    gap: 1.1rem !important;
}

.legal-consent-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr);
    gap: 1rem;
}

.legal-consent-card {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 1rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
    display: grid;
    gap: .85rem;
}

.legal-consent-card:first-child,
.support-terms-card {
    grid-column: 1 / -1;
}

.legal-consent-card > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.legal-consent-card strong {
    color: var(--ink);
    font-size: 1rem;
}

.legal-consent-card small,
.legal-short-copy {
    color: var(--muted);
    line-height: 1.55;
}

.legal-scroll-box {
    max-height: 245px;
    overflow: auto;
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: #ffffff;
    padding: .9rem 1rem;
    color: #334155;
    line-height: 1.6;
}

.legal-scroll-box.compact {
    max-height: 170px;
}

.legal-scroll-box p {
    margin: 0 0 .8rem;
}

.legal-scroll-box p:last-child {
    margin-bottom: 0;
}

.legal-scroll-box.is-read {
    border-color: rgba(20, 184, 166, .7);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .14);
}

.legal-check {
    display: flex;
    align-items: flex-start;
    gap: .72rem;
    border: 1px solid #dbe7ef;
    border-radius: 16px;
    background: #f8fafc;
    padding: .78rem .85rem;
    color: #334155;
    font-weight: 800;
    line-height: 1.45;
}

.legal-check input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: .1rem;
    accent-color: #0f766e;
}

.legal-check input:disabled + span {
    color: #94a3b8;
}

.support-terms-card.is-muted {
    opacity: .68;
}

.support-terms-card.is-required {
    border-color: rgba(20, 184, 166, .62);
    box-shadow: 0 18px 42px rgba(15, 118, 110, .12);
}

.support-choice-grid .register-extra-card.is-selected {
    border-color: rgba(15, 118, 110, .52);
    background: #ecfdf5;
}

.compact-support-terms {
    margin: .35rem 0 0;
}

.wide-field {
    grid-column: 1 / -1;
}

@media (max-width: 920px) {
    .legal-consent-grid {
        grid-template-columns: 1fr;
    }
}

/* Sectorized product layer. The SaaS core stays the same; these cards expose
   vertical style choices for onboarding and company settings. */
.vertical-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .8rem;
}

.vertical-style-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.vertical-style-card {
    position: relative;
    display: grid;
    gap: .42rem;
    min-height: 148px;
    border: 1px solid color-mix(in srgb, var(--vertical-accent) 28%, #dbe7ef);
    border-radius: 22px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--vertical-soft) 42%, #fff) 0%, #fff 70%),
        #fff;
    padding: .95rem;
    cursor: pointer;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.vertical-style-card::after {
    content: "";
    position: absolute;
    inset: auto -18px -28px auto;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vertical-accent) 18%, transparent);
    filter: blur(2px);
}

.vertical-style-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.vertical-style-card:has(input:checked) {
    border-color: var(--vertical-accent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--vertical-accent) 18%, transparent);
}

.vertical-style-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vertical-style-swatch {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, var(--vertical-accent), color-mix(in srgb, var(--vertical-accent) 48%, #ffffff));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.vertical-style-card strong {
    position: relative;
    z-index: 1;
    color: var(--erp-text);
    font-size: 1rem;
    line-height: 1.1;
}

.vertical-style-card small,
.vertical-style-card em {
    position: relative;
    z-index: 1;
    color: var(--erp-muted);
    font-style: normal;
    line-height: 1.35;
}

.vertical-style-card em {
    font-size: .84rem;
}

.landing-vertical-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    max-width: 760px;
    margin: 1.2rem 0 0;
}

.landing-vertical-strip span {
    border: 1px solid color-mix(in srgb, var(--vertical-accent) 34%, #dbe7ef);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vertical-soft) 58%, #ffffff);
    color: #0f172a;
    padding: .55rem .78rem;
    font-size: .82rem;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

body[class*="vertical-"] .button.primary,
body[class*="vertical-"] .nav a.active,
body[class*="vertical-"] .nav-locked.active {
    background: var(--vertical-accent) !important;
    border-color: color-mix(in srgb, var(--vertical-accent) 70%, #ffffff) !important;
}

body[class*="vertical-"] .nav a.active .nav-icon,
body[class*="vertical-"] .nav-locked.active .nav-icon {
    background: color-mix(in srgb, var(--vertical-accent) 40%, #0f172a) !important;
}

body[class*="vertical-"] input:focus,
body[class*="vertical-"] select:focus,
body[class*="vertical-"] textarea:focus {
    border-color: var(--vertical-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vertical-accent) 18%, transparent) !important;
}

/* Fase 41 - verticales reales: cada negocio cambia identidad completa, no solo el acento. */
body[class*="vertical-"] {
    --erp-bg: var(--vertical-bg);
    --erp-surface: var(--vertical-surface);
    --erp-surface-soft: var(--vertical-surface-soft);
    --erp-hover: color-mix(in srgb, var(--vertical-soft) 48%, #ffffff);
    --erp-primary: var(--vertical-accent);
    --erp-primary-hover: color-mix(in srgb, var(--vertical-accent) 82%, #000000);
    --erp-primary-active: color-mix(in srgb, var(--vertical-accent) 68%, #000000);
    --erp-accent: var(--vertical-accent);
    --erp-primary-soft: var(--vertical-soft);
    --erp-text: var(--vertical-text);
    --erp-muted: var(--vertical-muted);
    --erp-sidebar-bg: var(--vertical-sidebar);
    background:
        radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--vertical-accent) 12%, transparent), transparent 30rem),
        radial-gradient(circle at 100% 4%, color-mix(in srgb, var(--vertical-soft) 34%, transparent), transparent 34rem),
        var(--vertical-bg) !important;
    color: var(--vertical-text) !important;
}

body[class*="vertical-"] .main {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--vertical-accent) 9%, transparent), transparent 28rem),
        var(--vertical-bg) !important;
}

body[class*="vertical-"] .sidebar {
    background: linear-gradient(180deg, var(--vertical-sidebar), color-mix(in srgb, var(--vertical-sidebar) 88%, #000000)) !important;
    border-right-color: color-mix(in srgb, var(--vertical-accent) 30%, transparent) !important;
}

body[class*="vertical-"] .topbar,
body[class*="vertical-"] .metric-card,
body[class*="vertical-"] .panel,
body[class*="vertical-"] .card,
body[class*="vertical-"] .dashboard-card,
body[class*="vertical-"] .owner-panel,
body[class*="vertical-"] .invoice-panel,
body[class*="vertical-"] .company-show-v2 > section,
body[class*="vertical-"] .calendar-focus-shell,
body[class*="vertical-"] .support-admin-card,
body[class*="vertical-"] .register-section,
body[class*="vertical-"] .settings-panel {
    border-color: color-mix(in srgb, var(--vertical-accent) 20%, #dbe7ef) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--vertical-surface) 94%, #ffffff), color-mix(in srgb, var(--vertical-surface-soft) 40%, var(--vertical-surface))) !important;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--vertical-dark) 10%, transparent) !important;
}

body[class*="vertical-"] .button.primary,
body[class*="vertical-"] .landing-button.primary,
body[class*="vertical-"] button[type="submit"].button,
body[class*="vertical-"] .nav a.active {
    background: var(--vertical-accent) !important;
    border-color: color-mix(in srgb, var(--vertical-accent) 74%, #ffffff) !important;
    color: var(--vertical-button-text) !important;
}

body[class*="vertical-"] .button.primary:hover,
body[class*="vertical-"] button[type="submit"].button:hover {
    background: color-mix(in srgb, var(--vertical-accent) 84%, #000000) !important;
}

body.vertical-barbershop .topbar,
body.vertical-barbershop .metric-card,
body.vertical-barbershop .panel,
body.vertical-barbershop .card,
body.vertical-barbershop .dashboard-card,
body.vertical-barbershop .owner-panel,
body.vertical-barbershop .invoice-panel,
body.vertical-barbershop .company-show-v2 > section,
body.vertical-barbershop .calendar-focus-shell,
body.vertical-barbershop .support-admin-card,
body.vertical-barbershop .settings-panel {
    background: linear-gradient(180deg, #1e1e1e, #171717) !important;
    border-color: rgba(200, 169, 107, .28) !important;
    color: #f5f5f5 !important;
}

body.vertical-barbershop .topbar h1,
body.vertical-barbershop .metric-card strong,
body.vertical-barbershop .metric-card span,
body.vertical-barbershop h1,
body.vertical-barbershop h2,
body.vertical-barbershop h3 {
    color: #f5f5f5 !important;
}

body.vertical-barbershop .main p,
body.vertical-barbershop .main small,
body.vertical-barbershop .metric-card small,
body.vertical-barbershop .eyebrow {
    color: #d1d5db !important;
}

body.vertical-barbershop input,
body.vertical-barbershop select,
body.vertical-barbershop textarea {
    background: #111111 !important;
    border-color: rgba(200, 169, 107, .32) !important;
    color: #f5f5f5 !important;
}

body.vertical-hair_salon .sidebar {
    background: linear-gradient(180deg, #2a2a2a, #1f1a17) !important;
}

body.vertical-hair_salon .main {
    background:
        radial-gradient(circle at 0% 0%, rgba(216, 195, 165, .34), transparent 32rem),
        #faf8f5 !important;
}

body.vertical-physiotherapy .sidebar {
    background: linear-gradient(180deg, #172033, #0f1b2e) !important;
}

body.vertical-aesthetic_clinic .main {
    background:
        radial-gradient(circle at 98% 0%, rgba(220, 235, 255, .72), transparent 34rem),
        #fcfcfc !important;
}

body.vertical-aesthetic_clinic .topbar,
body.vertical-aesthetic_clinic .metric-card,
body.vertical-aesthetic_clinic .panel,
body.vertical-aesthetic_clinic .card {
    backdrop-filter: blur(18px) saturate(1.08);
}

/* Landing vertical demo: the commercial page changes sector before registration. */
.commercial-landing {
    --landing-accent: #d6b98c;
    --landing-soft: #eadbc8;
    --landing-dark: #222222;
    --landing-surface: #ffffff;
    --landing-text: #222222;
    --landing-muted: #6b625a;
    background:
        radial-gradient(circle at 0% 12%, color-mix(in srgb, var(--landing-soft) 58%, transparent), transparent 34rem),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--landing-accent) 14%, transparent), transparent 28rem),
        #f8fafc !important;
    color: var(--landing-text) !important;
    transition: background 260ms ease, color 260ms ease;
}

.landing-nav,
.landing-section,
.landing-access-card,
.landing-plan-card {
    border-color: color-mix(in srgb, var(--landing-accent) 24%, #dbe7ef) !important;
}

.landing-button.primary,
.landing-billing-toggle button.is-active,
.landing-tabs button.is-active {
    background: var(--landing-accent) !important;
    border-color: color-mix(in srgb, var(--landing-accent) 78%, #ffffff) !important;
    color: var(--landing-button-text, #ffffff) !important;
}

.landing-vertical-barbershop {
    --landing-button-text: #111111;
}

.landing-vertical-beauty_center,
.landing-vertical-aesthetic_clinic {
    --landing-button-text: #161616;
}

.landing-vertical-selector {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    max-width: 840px;
    margin-top: 1.25rem;
}

.landing-vertical-selector button {
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--vertical-accent) 36%, #dbe7ef);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vertical-soft) 46%, #ffffff);
    color: #0f172a;
    padding: 0 .9rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.landing-vertical-selector button:hover,
.landing-vertical-selector button.is-active {
    transform: translateY(-1px);
    background: var(--vertical-accent);
    color: var(--landing-button-text, #ffffff);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--vertical-accent) 22%, transparent);
}

.landing-sector-choice {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: fit-content;
    margin: 0 0 1rem;
    border: 1px solid color-mix(in srgb, var(--landing-accent) 24%, #dbe7ef);
    border-radius: 999px;
    background: color-mix(in srgb, var(--landing-soft) 32%, #ffffff);
    padding: .6rem .9rem;
}

.landing-sector-choice span,
.landing-sector-choice small {
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
}

.landing-sector-choice strong {
    color: #0f172a;
    font-size: .92rem;
}

.landing-product-peek,
.landing-demo-card {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--landing-dark) 92%, var(--landing-accent)), color-mix(in srgb, var(--landing-dark) 82%, #0f172a)) !important;
    border-color: color-mix(in srgb, var(--landing-accent) 36%, transparent) !important;
}

.peek-appointment.is-one {
    border-left-color: var(--landing-accent) !important;
}

.peek-appointment.is-two {
    border-left-color: color-mix(in srgb, var(--landing-accent) 70%, #8b5cf6) !important;
}

.peek-people span::before,
.peek-bars span {
    background: linear-gradient(180deg, color-mix(in srgb, var(--landing-accent) 84%, #ffffff), var(--landing-accent)) !important;
}

.service-tour-steps button.is-active,
.service-tour-steps button:hover {
    border-color: color-mix(in srgb, var(--landing-accent) 48%, #dbe7ef) !important;
    background: color-mix(in srgb, var(--landing-soft) 42%, #ffffff) !important;
}

/* Guided tour fix: no blurred full-screen veil; the assistant must stay above the page. */
.landing-tour {
    z-index: 2147483000 !important;
    pointer-events: none !important;
}

.landing-tour-backdrop {
    display: none !important;
}

.landing-tour-panel {
    z-index: 2147483001 !important;
    pointer-events: auto !important;
    border-color: color-mix(in srgb, var(--landing-accent) 26%, #dbe7ef) !important;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .22) !important;
}

.landing-tour-progress button.is-active,
.landing-tour-progress button:hover {
    background: color-mix(in srgb, var(--landing-soft) 60%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--landing-accent) 48%, #dbe7ef) !important;
    color: color-mix(in srgb, var(--landing-dark) 82%, var(--landing-accent)) !important;
}

/* Legal modal in onboarding: shorter checkout, full terms on demand. */
.legal-consent-compact .legal-consent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.legal-consent-compact .legal-consent-card,
.legal-consent-compact .legal-consent-card:first-child,
.legal-consent-compact .support-terms-card {
    grid-column: auto;
    min-height: 210px;
}

.legal-consent-compact .legal-consent-card {
    align-content: start;
}

.legal-consent-compact .button.ghost {
    width: fit-content;
    min-height: 40px;
}

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

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
}

.legal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(10px);
}

.legal-modal-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    width: min(860px, 100%);
    max-height: min(760px, calc(100dvh - 40px));
    border: 1px solid #dbe7ef;
    border-radius: 28px;
    background: #ffffff;
    padding: 1.1rem;
    box-shadow: 0 32px 92px rgba(15, 23, 42, .28);
}

.legal-modal-panel header,
.legal-modal-panel footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.legal-modal-panel h2 {
    margin: .1rem 0 0;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.05;
}

.legal-modal-panel .legal-scroll-box {
    max-height: min(48dvh, 420px);
}

.legal-modal-panel footer small {
    color: #64748b;
    font-weight: 800;
}

.legal-modal-panel footer small.is-ready {
    color: #0f766e;
}

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

@media (max-width: 980px) {
    .legal-consent-compact .legal-consent-grid {
        grid-template-columns: 1fr;
    }
}

/* Fase 42 - ajuste final de producto general, landing guiada, alta por pasos y calendario legible por sector. */
.commercial-landing {
    overflow-x: hidden !important;
}

.landing-nav {
    top: 14px !important;
    width: min(1500px, calc(100% - 40px)) !important;
    min-height: 74px !important;
    padding: .7rem .85rem !important;
}

.landing-brand span {
    width: 138px !important;
    height: 48px !important;
}

.landing-brand img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-nav-links {
    gap: clamp(1rem, 3vw, 3.2rem) !important;
}

.landing-nav-actions {
    margin-left: auto !important;
}

.landing-commercial-hero {
    width: min(1500px, calc(100% - 40px)) !important;
    min-height: auto !important;
    margin: clamp(1rem, 2vw, 1.8rem) auto 1.15rem !important;
    padding: clamp(1.35rem, 3vw, 3rem) !important;
    grid-template-columns: minmax(0, .95fr) minmax(360px, .68fr) !important;
    border-radius: 36px !important;
}

.landing-commercial-hero h1 {
    font-size: clamp(3.4rem, 6.6vw, 7.2rem) !important;
    line-height: .91 !important;
    max-width: 790px !important;
}

.landing-lead {
    max-width: 780px !important;
}

.landing-vertical-selector {
    max-width: 860px !important;
}

.landing-vertical-selector button {
    min-height: 38px !important;
    padding: 0 .82rem !important;
    font-size: .82rem !important;
}

.landing-product-peek {
    min-height: 620px !important;
    max-height: 720px !important;
    padding: clamp(1.25rem, 2.5vw, 2.4rem) !important;
    border-radius: 34px !important;
    overflow: hidden !important;
}

.landing-product-peek > strong {
    font-size: clamp(2rem, 3.8vw, 3.65rem) !important;
    line-height: .98 !important;
    max-width: 680px !important;
}

.peek-window {
    margin-top: 1.25rem !important;
    max-height: 420px !important;
    overflow: hidden !important;
}

.peek-grid {
    transform-origin: top center !important;
}

.landing-product-peek > small {
    display: block !important;
    margin-top: 1rem !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .94rem !important;
    line-height: 1.45 !important;
}

.peek-micro-tabs {
    position: absolute !important;
    left: clamp(1.1rem, 2.4vw, 2.2rem) !important;
    right: clamp(1.1rem, 2.4vw, 2.2rem) !important;
    bottom: clamp(1rem, 2vw, 1.8rem) !important;
}

.landing-section {
    width: min(1500px, calc(100% - 40px)) !important;
    margin-inline: auto !important;
}

.landing-section-heading h2 {
    font-size: clamp(2.1rem, 3.7vw, 4.8rem) !important;
    max-width: 920px !important;
}

.landing-sector-cards article {
    cursor: pointer;
}

.landing-sector-cards article.is-featured {
    border-color: color-mix(in srgb, var(--vertical-accent) 70%, #dbe7ef) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--vertical-soft) 44%, #ffffff), #ffffff) !important;
    box-shadow: 0 22px 46px color-mix(in srgb, var(--vertical-accent) 14%, transparent) !important;
}

.landing-guide-drawer[hidden] {
    display: none !important;
}

.landing-guide-drawer {
    position: fixed;
    z-index: 80;
    right: 24px;
    bottom: 24px;
    display: grid;
    gap: .82rem;
    width: min(430px, calc(100vw - 32px));
    border: 1px solid color-mix(in srgb, var(--landing-accent) 34%, #dbe7ef);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
    padding: 1rem;
    box-shadow: 0 24px 74px rgba(15, 23, 42, .22);
    backdrop-filter: blur(18px) saturate(1.08);
}

.landing-guide-close {
    justify-self: end;
    min-height: 34px;
    border: 1px solid #dbe7ef;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    padding: 0 .8rem;
    font-weight: 850;
    cursor: pointer;
}

.landing-guide-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}

.landing-guide-progress button {
    min-height: 34px;
    border: 1px solid #dbe7ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 900;
    cursor: pointer;
}

.landing-guide-progress button.is-active {
    border-color: color-mix(in srgb, var(--landing-accent) 56%, #dbe7ef);
    background: color-mix(in srgb, var(--landing-soft) 58%, #ffffff);
    color: color-mix(in srgb, var(--landing-dark) 78%, var(--landing-accent));
}

.landing-guide-drawer h2 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.05;
}

.landing-guide-drawer p:not(.landing-eyebrow) {
    margin: 0;
    color: #475569;
    line-height: 1.45;
}

.landing-guide-drawer ul {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-guide-drawer li {
    border: 1px solid color-mix(in srgb, var(--landing-accent) 24%, #dbe7ef);
    border-radius: 16px;
    background: color-mix(in srgb, var(--landing-soft) 36%, #ffffff);
    padding: .62rem .75rem;
    color: #334155;
    font-weight: 850;
}

.landing-guide-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: .6rem;
}

.register-builder {
    max-width: 1240px !important;
    align-items: start !important;
}

.register-builder-copy {
    position: sticky !important;
    top: 1rem !important;
    min-height: 520px !important;
}

.register-builder-form.is-wizard {
    gap: 1rem !important;
}

.register-wizard-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    border: 1px solid #dbe7ef;
    border-radius: 24px;
    background: #f8fafc;
    padding: .55rem;
}

.register-wizard-progress button {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: #64748b;
    font-weight: 900;
    cursor: pointer;
}

.register-wizard-progress button.is-active {
    border-color: rgba(20, 184, 166, .42);
    background: #ecfdf5;
    color: #0f766e;
}

.register-builder-form.is-wizard .register-section {
    display: none !important;
}

.register-builder-form.is-wizard .register-section.is-active {
    display: grid !important;
    animation: registerStepIn 220ms ease both;
}

.register-wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.register-builder-form.is-wizard .register-submit-row {
    display: none !important;
}

.register-builder-form.is-wizard.is-final-step .register-submit-row {
    display: flex !important;
}

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

.auth-premium {
    min-height: calc(100dvh - 120px) !important;
    grid-template-columns: minmax(320px, .8fr) minmax(360px, .62fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 3vw, 2rem) !important;
    padding-block: clamp(1rem, 3vw, 2rem) !important;
}

.auth-premium-copy,
.auth-premium-card {
    min-height: 0 !important;
    border-radius: 32px !important;
}

.auth-premium-copy {
    padding: clamp(1.35rem, 3vw, 2.4rem) !important;
}

.auth-premium-copy img {
    width: 150px !important;
    height: 56px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin-bottom: clamp(1.3rem, 4vw, 3rem) !important;
}

.auth-premium-copy h2 {
    font-size: clamp(2.4rem, 5.4vw, 5.8rem) !important;
    line-height: .95 !important;
}

.auth-premium-card {
    padding: clamp(1.25rem, 3vw, 2.2rem) !important;
    gap: .9rem !important;
}

.auth-premium-card input {
    min-height: 54px !important;
}

body[class*="vertical-"] {
    --calendar-bg: #ffffff;
    --calendar-surface: #ffffff;
    --calendar-muted-bg: #f8fafc;
    --calendar-line: #dbe7ef;
    --calendar-text: #0f172a;
    --calendar-muted: #64748b;
    --calendar-closed-bg: repeating-linear-gradient(135deg, #f1f5f9 0 12px, #eaf0f6 12px 24px);
}

body.vertical-barbershop {
    --calendar-bg: #151515;
    --calendar-surface: #202020;
    --calendar-muted-bg: #262626;
    --calendar-line: rgba(200, 169, 107, .24);
    --calendar-text: #f8fafc;
    --calendar-muted: #d1d5db;
    --calendar-closed-bg: repeating-linear-gradient(135deg, rgba(200, 169, 107, .11) 0 12px, rgba(255, 255, 255, .05) 12px 24px);
}

body.vertical-barbershop .metric-card,
body.vertical-barbershop .dashboard-card {
    background: linear-gradient(180deg, #242424, #1b1b1b) !important;
    border-color: rgba(200, 169, 107, .28) !important;
    color: #f8fafc !important;
}

body.vertical-barbershop .metric-card strong,
body.vertical-barbershop .metric-card span,
body.vertical-barbershop .dashboard-card strong {
    color: #ffffff !important;
}

body.vertical-barbershop .metric-card small,
body.vertical-barbershop .dashboard-card small,
body.vertical-barbershop .dashboard-card p {
    color: #d1d5db !important;
}

.main:has(.calendar-focus-shell) {
    background: var(--calendar-bg) !important;
}

.calendar-focus-shell {
    background: var(--calendar-bg) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
}

.calendar-focus-toolbar {
    min-height: 76px !important;
    background: var(--calendar-surface) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
}

.calendar-focus-toolbar h2,
.calendar-focus-title,
.calendar-hero-title {
    color: var(--calendar-text) !important;
}

.calendar-filter-drawer {
    background: var(--calendar-surface) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
}

.calendar-filter-drawer summary strong {
    background: color-mix(in srgb, var(--vertical-accent) 20%, var(--calendar-muted-bg)) !important;
    color: var(--calendar-text) !important;
}

.pro-calendar {
    --minute-height: 1.42px;
    background: var(--calendar-bg) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
    box-shadow: none !important;
}

.pro-calendar-axis,
.pro-calendar-column,
.pro-calendar-corner,
.pro-calendar-column-head {
    background: var(--calendar-surface) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    min-height: 58px !important;
}

.pro-calendar-column-head strong {
    color: var(--calendar-text) !important;
    font-size: .95rem !important;
}

.pro-calendar-column-head span,
.pro-calendar-axis-body span {
    color: var(--calendar-muted) !important;
}

.pro-calendar-lane {
    background:
        linear-gradient(to bottom, var(--calendar-line) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 60),
        linear-gradient(to bottom, color-mix(in srgb, var(--calendar-line) 55%, transparent) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 15),
        var(--calendar-bg) !important;
    border-color: var(--calendar-line) !important;
}

.calendar-closed-block {
    background: var(--calendar-closed-bg) !important;
    border-color: color-mix(in srgb, var(--calendar-line) 70%, transparent) !important;
    color: var(--calendar-muted) !important;
}

.calendar-closed-block span {
    color: var(--calendar-muted) !important;
}

.pro-calendar .calendar-event {
    background: linear-gradient(180deg, color-mix(in srgb, var(--event-color) 9%, #ffffff), #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--event-color) 48%, #dbe7ef) !important;
    border-left: 5px solid var(--event-color) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .10) !important;
}

body.vertical-barbershop .pro-calendar .calendar-event {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)) !important;
    color: #111111 !important;
}

.pro-calendar .calendar-event strong,
.pro-calendar .calendar-event small {
    color: inherit !important;
}

.pro-calendar .calendar-event .event-time {
    color: #0f172a !important;
    background: #eef2f7 !important;
}

.event-payment.is-paid {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.event-payment.is-pending {
    background: #fef3c7 !important;
    color: #92400e !important;
}

@media (max-width: 1100px) {
    .landing-commercial-hero,
    .auth-premium,
    .register-builder {
        grid-template-columns: 1fr !important;
    }

    .landing-product-peek {
        min-height: 560px !important;
    }

    .register-builder-copy {
        position: static !important;
        min-height: 0 !important;
    }
}

@media (max-width: 760px) {
    .landing-nav {
        width: calc(100% - 20px) !important;
    }

    .landing-nav-links {
        display: none !important;
    }

    .landing-commercial-hero,
    .landing-section {
        width: calc(100% - 20px) !important;
    }

    .landing-commercial-hero h1 {
        font-size: clamp(2.7rem, 14vw, 4rem) !important;
    }

    .register-wizard-progress {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Fase 42 - estabilizacion comercial y visual por sector. No tocar sidebar/logo/collapse. */
.commercial-landing {
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--landing-soft) 54%, transparent), transparent 34rem),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 44%, #f8fafc 100%) !important;
}

.landing-tour,
.landing-tour-backdrop {
    display: none !important;
}

body.tour-open,
.commercial-landing.tour-open {
    overflow: auto !important;
}

.landing-nav {
    top: 14px !important;
    z-index: 120 !important;
    width: min(1500px, calc(100% - 48px)) !important;
    min-height: 72px !important;
    padding: .72rem .9rem !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

.landing-brand span {
    width: 156px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.landing-brand img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.landing-nav-links {
    margin-inline: auto !important;
    gap: clamp(1.35rem, 3vw, 4rem) !important;
}

.landing-nav-links a,
.landing-link-button {
    color: #475569 !important;
    font-size: .98rem !important;
    font-weight: 800 !important;
}

.landing-nav-actions {
    margin-left: 0 !important;
    justify-content: flex-end !important;
    gap: .62rem !important;
}

.landing-button,
.landing-link-button {
    border-radius: 18px !important;
    min-height: 48px !important;
    padding: 0 1.1rem !important;
}

.landing-commercial-hero {
    width: min(1500px, calc(100% - 48px)) !important;
    min-height: calc(100dvh - 122px) !important;
    margin: 22px auto 1.2rem !important;
    padding: clamp(1.4rem, 3vw, 3rem) !important;
    grid-template-columns: minmax(0, .92fr) minmax(380px, .68fr) !important;
    align-items: stretch !important;
    border-radius: 34px !important;
}

.landing-commercial-hero h1 {
    font-size: clamp(3.6rem, 6.2vw, 7.1rem) !important;
    line-height: .91 !important;
    max-width: 850px !important;
    letter-spacing: -.055em !important;
}

.landing-lead {
    max-width: 800px !important;
    color: #475569 !important;
    font-size: clamp(1.05rem, 1.55vw, 1.45rem) !important;
}

.landing-vertical-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
    max-width: 930px !important;
}

.landing-vertical-selector button {
    min-height: 40px !important;
    padding: 0 .95rem !important;
    border-radius: 999px !important;
    border-color: color-mix(in srgb, var(--vertical-accent) 42%, #dbe7ef) !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #334155 !important;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.landing-vertical-selector button:hover,
.landing-vertical-selector button.is-active {
    transform: translateY(-1px) !important;
    background: color-mix(in srgb, var(--vertical-soft) 52%, #ffffff) !important;
    border-color: var(--vertical-accent) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--vertical-accent) 16%, transparent) !important;
}

.landing-product-peek {
    min-height: 0 !important;
    height: min(680px, calc(100dvh - 156px)) !important;
    padding: clamp(1.2rem, 2.2vw, 2.2rem) !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--landing-accent) 28%, transparent), transparent 18rem),
        linear-gradient(145deg, color-mix(in srgb, var(--landing-dark) 88%, #092f2b), color-mix(in srgb, var(--landing-dark) 74%, #0f766e)) !important;
}

.landing-product-peek > strong {
    display: block !important;
    max-width: 680px !important;
    font-size: clamp(2rem, 3.35vw, 3.35rem) !important;
    line-height: .98 !important;
}

.peek-window {
    margin-top: 1.05rem !important;
    max-height: min(410px, calc(100% - 210px)) !important;
    overflow: hidden !important;
}

.peek-micro-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .6rem !important;
    bottom: 1rem !important;
}

.peek-micro-tabs button {
    min-height: 56px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .88) !important;
}

.peek-micro-tabs button.is-active {
    background: color-mix(in srgb, var(--landing-accent) 32%, rgba(255, 255, 255, .12)) !important;
    border-color: color-mix(in srgb, var(--landing-accent) 70%, rgba(255, 255, 255, .24)) !important;
}

.landing-section {
    width: min(1500px, calc(100% - 48px)) !important;
    padding: clamp(1.55rem, 3vw, 2.7rem) !important;
    border-radius: 32px !important;
}

.landing-service-tour {
    display: grid !important;
    gap: 1.1rem !important;
}

.landing-section-heading h2 {
    font-size: clamp(2.4rem, 4.2vw, 5.1rem) !important;
    letter-spacing: -.045em !important;
    max-width: 990px !important;
}

.service-tour-shell {
    display: grid !important;
    grid-template-columns: minmax(260px, .52fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
}

.service-tour-steps {
    display: grid !important;
    gap: .72rem !important;
}

.service-tour-steps button,
.service-tour-stage article {
    border-radius: 24px !important;
    transition: transform 220ms ease, opacity 220ms ease, border-color 220ms ease, background 220ms ease !important;
}

.service-tour-steps button {
    min-height: 112px !important;
    padding: 1rem !important;
    text-align: left !important;
}

.service-tour-steps button.is-active {
    background: color-mix(in srgb, var(--landing-soft) 54%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--landing-accent) 72%, #dbe7ef) !important;
}

.service-tour-stage article {
    display: none !important;
    min-height: 450px !important;
    grid-template-columns: minmax(0, .8fr) minmax(320px, .7fr) !important;
    align-items: center !important;
    gap: 1.1rem !important;
    padding: clamp(1.25rem, 3vw, 2.1rem) !important;
}

.service-tour-stage article.is-active {
    display: grid !important;
}

.service-tour-stage h3 {
    max-width: 680px !important;
    font-size: clamp(2.4rem, 4.3vw, 5rem) !important;
    line-height: .94 !important;
}

.service-tour-stage p:not(.landing-eyebrow) {
    color: #475569 !important;
    font-size: clamp(1rem, 1.3vw, 1.28rem) !important;
}

.landing-guide-drawer {
    z-index: 2147483001 !important;
    right: 22px !important;
    bottom: 22px !important;
    width: min(440px, calc(100vw - 32px)) !important;
    border-radius: 26px !important;
    transform-origin: bottom right !important;
    animation: guideDrawerIn 240ms cubic-bezier(.2,.8,.2,1) both !important;
}

@keyframes guideDrawerIn {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.landing-guide-progress {
    grid-template-columns: repeat(3, 1fr) !important;
}

.register-builder {
    width: min(1380px, calc(100% - 32px)) !important;
    grid-template-columns: minmax(300px, .44fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
}

.register-builder-copy {
    min-height: auto !important;
    padding: clamp(1rem, 2vw, 1.8rem) !important;
}

.register-builder-copy img {
    width: 162px !important;
    height: 46px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.register-builder-copy h2 {
    font-size: clamp(2rem, 3vw, 3.3rem) !important;
    line-height: 1 !important;
}

.register-builder-form.is-wizard {
    min-height: min(760px, calc(100dvh - 170px)) !important;
}

.register-wizard-progress {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    position: sticky !important;
    top: .65rem !important;
    z-index: 8 !important;
}

.register-wizard-progress button {
    display: grid !important;
    place-items: center !important;
    gap: .1rem !important;
}

.register-wizard-progress button span {
    font-size: .75rem !important;
    letter-spacing: .08em !important;
}

.register-wizard-progress button strong {
    font-size: .78rem !important;
}

.register-builder-form.is-wizard .register-section.is-active {
    min-height: 360px !important;
}

.register-wizard-actions {
    position: sticky !important;
    bottom: .75rem !important;
    z-index: 8 !important;
    padding: .65rem !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(14px) !important;
}

.auth-premium {
    min-height: calc(100dvh - 36px) !important;
    width: min(1420px, calc(100% - 34px)) !important;
    margin: 18px auto !important;
    grid-template-columns: minmax(340px, .82fr) minmax(360px, .62fr) !important;
}

.auth-premium-copy {
    max-height: calc(100dvh - 72px) !important;
    overflow: hidden !important;
}

.auth-premium-copy img {
    width: 176px !important;
    height: 54px !important;
}

.auth-premium-copy h2 {
    font-size: clamp(2.45rem, 4.8vw, 5.35rem) !important;
}

.auth-premium-copy p {
    max-width: 680px !important;
}

body[class*="vertical-"] {
    --calendar-bg: #f8fafc;
    --calendar-surface: #ffffff;
    --calendar-muted-bg: #f1f5f9;
    --calendar-line: #d7e3ee;
    --calendar-text: #0f172a;
    --calendar-muted: #64748b;
    --calendar-closed-bg: repeating-linear-gradient(135deg, #f3f6f9 0 12px, #e9eff5 12px 24px);
}

body.vertical-barbershop {
    --calendar-bg: #111111;
    --calendar-surface: #1e1e1e;
    --calendar-muted-bg: #171717;
    --calendar-line: rgba(200, 169, 107, .32);
    --calendar-text: #f5f5f5;
    --calendar-muted: #d6d3d1;
    --calendar-closed-bg: repeating-linear-gradient(135deg, rgba(200, 169, 107, .10) 0 12px, rgba(255, 255, 255, .045) 12px 24px);
}

.main:has(.calendar-focus-shell) {
    background: var(--calendar-bg) !important;
    color: var(--calendar-text) !important;
}

.calendar-focus-shell,
.calendar-focus-toolbar,
.calendar-filter-drawer,
.pro-calendar {
    background: var(--calendar-surface) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
}

.calendar-focus-shell {
    padding: 1rem !important;
    border-radius: 24px !important;
}

.calendar-focus-toolbar {
    min-height: 72px !important;
    align-items: center !important;
    gap: .85rem !important;
}

.calendar-focus-toolbar .eyebrow,
.calendar-focus-toolbar h2:not(.calendar-hero-title):not(.calendar-focus-title) {
    display: none !important;
}

.calendar-hero-title {
    display: block !important;
    margin: 0 !important;
    color: var(--calendar-text) !important;
    font-size: clamp(1.65rem, 2.2vw, 2.55rem) !important;
    line-height: 1 !important;
}

.calendar-focus-toolbar .button,
.calendar-focus-toolbar .icon-button,
.calendar-focus-toolbar .segmented-control a {
    min-height: 48px !important;
    border-radius: 16px !important;
    color: var(--calendar-text) !important;
}

.calendar-focus-toolbar .button.primary {
    background: var(--vertical-accent, #0f766e) !important;
    color: var(--vertical-button-text, #ffffff) !important;
}

.calendar-filter-drawer {
    border-radius: 18px !important;
    margin-block: .8rem !important;
}

.calendar-filter-drawer:not([open]) {
    max-width: 150px !important;
}

.pro-calendar {
    --minute-height: 1.16px !important;
    height: min(70dvh, 800px) !important;
    min-height: 520px !important;
    overflow: auto !important;
    border-radius: 22px !important;
}

.pro-calendar-axis,
.pro-calendar-column,
.pro-calendar-corner,
.pro-calendar-column-head {
    background: var(--calendar-surface) !important;
    border-color: var(--calendar-line) !important;
    color: var(--calendar-text) !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    min-height: 54px !important;
}

.pro-calendar-axis-body {
    background: var(--calendar-muted-bg) !important;
}

.pro-calendar-axis-body span {
    color: var(--calendar-muted) !important;
}

.pro-calendar-lane {
    background:
        linear-gradient(to bottom, var(--calendar-line) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 60),
        linear-gradient(to bottom, color-mix(in srgb, var(--calendar-line) 58%, transparent) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 15),
        var(--calendar-bg) !important;
}

.calendar-closed-block {
    background: var(--calendar-closed-bg) !important;
    color: var(--calendar-muted) !important;
}

.pro-calendar .calendar-event {
    min-height: 44px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--event-color) 8%, #ffffff), #ffffff) !important;
    color: #0f172a !important;
    border: 1px solid color-mix(in srgb, var(--event-color) 52%, #dbe7ef) !important;
    border-left: 5px solid var(--event-color) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
}

.pro-calendar .calendar-event strong,
.pro-calendar .calendar-event small,
.pro-calendar .calendar-event .event-meta {
    color: #0f172a !important;
}

.pro-calendar .calendar-event .event-time {
    background: #eef2f7 !important;
    color: #0f172a !important;
}

body.vertical-barbershop .dashboard-card,
body.vertical-barbershop .metric-card,
body.vertical-barbershop .panel-card,
body.vertical-barbershop .billing-summary-strip {
    background: linear-gradient(180deg, #242424, #1a1a1a) !important;
    border-color: rgba(200, 169, 107, .30) !important;
    color: #f5f5f5 !important;
}

body.vertical-barbershop .dashboard-card *,
body.vertical-barbershop .metric-card *,
body.vertical-barbershop .panel-card *,
body.vertical-barbershop .billing-summary-strip * {
    color: inherit !important;
}

body.vertical-barbershop .dashboard-card p,
body.vertical-barbershop .metric-card small,
body.vertical-barbershop .panel-card p {
    color: #d6d3d1 !important;
}

@media (max-width: 1180px) {
    .landing-commercial-hero,
    .service-tour-shell,
    .service-tour-stage article,
    .register-builder,
    .auth-premium {
        grid-template-columns: 1fr !important;
    }

    .landing-product-peek {
        height: auto !important;
        min-height: 620px !important;
    }
}

@media (max-width: 780px) {
    .landing-nav {
        width: calc(100% - 20px) !important;
        min-height: 64px !important;
    }

    .landing-nav-links {
        display: none !important;
    }

    .landing-nav-actions .landing-link-button {
        display: none !important;
    }

    .landing-commercial-hero,
    .landing-section {
        width: calc(100% - 20px) !important;
    }

    .landing-commercial-hero h1 {
        font-size: clamp(2.8rem, 14vw, 4.45rem) !important;
    }

    .register-wizard-progress {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .calendar-focus-toolbar {
        grid-template-columns: 1fr !important;
    }
}

/* Landing/register polish pass: landing sells the service generally; theme choice lives in the signup flow. */
.landing-commercial-hero {
    min-height: auto !important;
    padding: clamp(1.15rem, 2.1vw, 2.15rem) !important;
    grid-template-columns: minmax(0, .88fr) minmax(360px, .62fr) !important;
    align-items: center !important;
    overflow: visible !important;
    gap: clamp(1.25rem, 2.4vw, 2.6rem) !important;
}

.landing-commercial-hero h1 {
    font-size: clamp(3rem, 4.65vw, 5.65rem) !important;
    max-width: 820px !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;
}

.landing-sector-proof {
    display: none !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
    max-width: 940px !important;
}

.landing-sector-proof span {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid color-mix(in srgb, var(--vertical-accent) 34%, #dbe7ef) !important;
    border-radius: 999px !important;
    padding: 0 .95rem !important;
    background: color-mix(in srgb, var(--vertical-soft) 22%, #ffffff) !important;
    color: #334155 !important;
    font-weight: 750 !important;
}

.landing-theme-note {
    margin: .55rem 0 0 !important;
    max-width: 760px !important;
    color: #64748b !important;
    font-size: .98rem !important;
}

.landing-product-peek {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    padding: clamp(1rem, 1.7vw, 1.65rem) !important;
    border-radius: 30px !important;
}

.landing-product-peek > strong {
    font-size: clamp(1.65rem, 2.25vw, 2.45rem) !important;
    line-height: 1 !important;
}

.landing-product-peek > small {
    display: block !important;
    margin-top: .55rem !important;
    max-width: 560px !important;
    font-size: .9rem !important;
    color: rgba(255, 255, 255, .78) !important;
}

.peek-window {
    max-height: 300px !important;
    margin-top: .7rem !important;
    padding: .7rem !important;
}

.peek-micro-tabs {
    position: static !important;
    margin-top: .65rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.peek-micro-tabs button {
    min-height: 46px !important;
    border-radius: 14px !important;
    padding: .45rem .55rem !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.peek-micro-tabs small {
    display: none !important;
}

.landing-hero-actions {
    margin-top: 1.1rem !important;
}

.landing-button.large {
    min-height: 54px !important;
    padding-inline: 1.35rem !important;
}

.peek-grid {
    gap: .65rem !important;
}

.peek-agenda {
    min-height: 158px !important;
}

.peek-clients,
.peek-chart {
    min-height: 70px !important;
}

.peek-people {
    gap: .4rem !important;
}

.peek-people span {
    min-height: 32px !important;
}

.peek-bars {
    min-height: 50px !important;
}

.landing-sector-choice {
    display: none !important;
}

.service-tour-steps button {
    color: #0f172a !important;
}

.service-tour-steps button.is-active,
.service-tour-steps button.is-active *,
.service-tour-steps button:hover,
.service-tour-steps button:hover * {
    color: #0f172a !important;
}

.service-tour-stage h3 {
    color: #0f172a !important;
}

.service-tour-stage article {
    min-height: 390px !important;
}

.landing-guide-drawer[hidden] {
    display: none !important;
}

.register-builder {
    width: min(1560px, calc(100% - 56px)) !important;
    grid-template-columns: minmax(380px, .54fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-height: min(690px, calc(100dvh - 36px)) !important;
    margin-block: 18px !important;
}

.register-builder-copy {
    padding: clamp(1.6rem, 2.6vw, 2.5rem) !important;
}

.register-builder-copy h2 {
    font-size: clamp(2.35rem, 3.4vw, 4.15rem) !important;
}

.register-builder-form.is-wizard .register-section.is-active {
    min-height: min(430px, calc(100dvh - 244px)) !important;
}

.register-builder-form.is-wizard {
    min-height: min(690px, calc(100dvh - 36px)) !important;
    align-content: start !important;
}

.register-wizard-progress {
    gap: .45rem !important;
    padding: .55rem !important;
    border-radius: 24px !important;
}

.register-wizard-progress button {
    min-height: 48px !important;
    border-radius: 17px !important;
    padding: .35rem .5rem !important;
}

.register-wizard-actions {
    min-height: 54px !important;
    margin-top: .75rem !important;
    justify-content: space-between !important;
}

.register-wizard-actions .button,
.register-submit-row .button {
    min-height: 44px !important;
    border-radius: 14px !important;
}

.register-submit-row {
    padding: .75rem !important;
    border-radius: 18px !important;
}

.register-section.compact {
    padding: clamp(1rem, 1.6vw, 1.35rem) !important;
}

.register-theme-step {
    display: grid !important;
    grid-template-columns: minmax(360px, .86fr) minmax(360px, .9fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.register-theme-step .vertical-style-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.register-theme-preview {
    --theme-accent: #0f766e;
    --theme-soft: #ccfbf1;
    --theme-dark: #0f172a;
    --theme-surface: #ffffff;
    display: grid !important;
    gap: .85rem !important;
    min-height: 100% !important;
    padding: 1.15rem !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 36%, #dbe7ef) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 11rem),
        linear-gradient(145deg, color-mix(in srgb, var(--theme-soft) 36%, #ffffff), #ffffff) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08) !important;
}

.theme-preview-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: .75rem !important;
}

.theme-preview-top span {
    color: color-mix(in srgb, var(--theme-accent) 82%, #0f172a) !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.theme-preview-top strong {
    max-width: 250px !important;
    text-align: right !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
}

.theme-preview-board {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    min-height: 250px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: var(--theme-dark) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 44%, #ffffff) !important;
}

.theme-preview-sidebar {
    display: grid !important;
    align-content: start !important;
    gap: .7rem !important;
    padding: 1rem !important;
    background: color-mix(in srgb, var(--theme-dark) 84%, #000000) !important;
}

.theme-preview-sidebar span,
.theme-preview-sidebar i {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--theme-accent) 70%, #ffffff) !important;
}

.theme-preview-sidebar i {
    opacity: .38 !important;
    background: #ffffff !important;
}

.theme-preview-content {
    display: grid !important;
    gap: .75rem !important;
    padding: 1rem !important;
    background: color-mix(in srgb, var(--theme-surface) 92%, #f8fafc) !important;
}

.theme-preview-header,
.theme-preview-metrics b,
.theme-preview-calendar {
    border: 1px solid #dbe7ef !important;
    background: #ffffff !important;
    border-radius: 16px !important;
}

.theme-preview-header {
    height: 42px !important;
}

.theme-preview-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .5rem !important;
}

.theme-preview-metrics b {
    height: 46px !important;
}

.theme-preview-calendar {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    gap: .45rem .6rem !important;
    padding: .75rem !important;
    align-items: center !important;
}

.theme-preview-calendar span {
    color: #64748b !important;
    font-weight: 850 !important;
}

.theme-preview-calendar em {
    min-height: 28px !important;
    padding: .35rem .7rem !important;
    border-left: 4px solid var(--theme-accent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--theme-accent) 12%, #ffffff) !important;
    color: #0f172a !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

.register-theme-preview p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: .96rem !important;
}

.legal-consent-compact .legal-consent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .85rem !important;
}

.legal-consent-compact .legal-consent-card,
.legal-consent-compact .legal-consent-card:first-child,
.legal-consent-compact .support-terms-card {
    min-height: auto !important;
    padding: 1rem !important;
}

.legal-consent-card strong {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
}

.legal-short-copy {
    font-size: .93rem !important;
    line-height: 1.5 !important;
}

.legal-check {
    padding: .85rem !important;
    gap: .7rem !important;
}

.legal-check span {
    font-size: .82rem !important;
    line-height: 1.35 !important;
}

.legal-modal-panel {
    width: min(820px, calc(100vw - 32px)) !important;
}

@media (max-width: 1180px) {
    .register-theme-step {
        grid-template-columns: 1fr !important;
    }

    .legal-consent-compact .legal-consent-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Landing viewport lock: at 90-100% zoom the commercial hero must fit without hiding the message. */
.landing-commercial-hero {
    min-height: calc(100dvh - 116px) !important;
    max-height: calc(100dvh - 116px) !important;
    margin: 14px auto 1rem !important;
    padding: clamp(1rem, 1.45vw, 1.65rem) !important;
    grid-template-columns: minmax(0, .98fr) minmax(390px, .68fr) !important;
    gap: clamp(1.5rem, 3vw, 3.4rem) !important;
    overflow: hidden !important;
}

.landing-commercial-hero .landing-eyebrow {
    margin-bottom: .55rem !important;
    font-size: .74rem !important;
}

.landing-commercial-hero h1 {
    max-width: 760px !important;
    font-size: clamp(3.15rem, 4.35vw, 5.2rem) !important;
    line-height: .94 !important;
    letter-spacing: -.048em !important;
}

.landing-commercial-hero .landing-lead {
    max-width: 700px !important;
    margin-top: 1rem !important;
    font-size: clamp(1rem, 1.12vw, 1.25rem) !important;
    line-height: 1.42 !important;
}

.landing-theme-note {
    margin-top: .45rem !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
}

.landing-hero-actions {
    margin-top: .85rem !important;
    gap: .7rem !important;
}

.landing-button.large {
    min-height: 48px !important;
    padding-inline: 1.15rem !important;
    border-radius: 16px !important;
}

.landing-product-peek {
    max-height: 100% !important;
    overflow: hidden !important;
    padding: clamp(1rem, 1.55vw, 1.45rem) !important;
    gap: .75rem !important;
}

.landing-product-peek .peek-topline {
    margin-bottom: 0 !important;
}

.landing-product-peek > strong {
    max-width: 560px !important;
    font-size: clamp(1.55rem, 2vw, 2.25rem) !important;
    line-height: .98 !important;
}

.peek-window {
    max-height: 252px !important;
    min-height: 0 !important;
    margin-top: .4rem !important;
    padding: .62rem !important;
    border-radius: 22px !important;
}

.peek-window-bar {
    margin-bottom: .45rem !important;
}

.peek-grid {
    gap: .52rem !important;
}

.peek-grid section {
    border-radius: 16px !important;
}

.peek-agenda {
    min-height: 136px !important;
}

.peek-calendar {
    min-height: 100px !important;
}

.peek-appointment {
    min-height: 28px !important;
    padding: .35rem .65rem !important;
    font-size: .82rem !important;
}

.peek-hour {
    font-size: .78rem !important;
}

.peek-heading {
    margin-bottom: .42rem !important;
    font-size: .78rem !important;
}

.peek-clients,
.peek-chart {
    min-height: 62px !important;
    max-height: 82px !important;
    padding: .6rem !important;
}

.peek-people span {
    min-height: 28px !important;
}

.peek-people small {
    display: none !important;
}

.peek-bars {
    min-height: 38px !important;
    height: 38px !important;
}

.landing-product-peek > small {
    margin-top: .2rem !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
}

.peek-micro-tabs {
    margin-top: .45rem !important;
    gap: .45rem !important;
    overflow: visible !important;
}

.peek-micro-tabs button {
    min-height: 40px !important;
    padding: .4rem .55rem !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 1180px) {
    .landing-commercial-hero {
        max-height: none !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .landing-product-peek {
        max-height: none !important;
    }
}

/* Signup viewport lock: the account flow is stepped, so each step should fit like a panel. */
.register-builder {
    width: min(1500px, calc(100% - 40px)) !important;
    min-height: min(660px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin-block: 14px !important;
    grid-template-columns: minmax(330px, .45fr) minmax(0, 1fr) !important;
    overflow: hidden !important;
}

.register-builder-copy {
    padding: clamp(1.25rem, 2vw, 2rem) !important;
}

.register-builder-copy img {
    width: min(152px, 38%) !important;
    height: auto !important;
}

.register-builder-copy h2 {
    font-size: clamp(2rem, 3vw, 3.45rem) !important;
    line-height: 1.02 !important;
}

.register-builder-copy p {
    font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
    line-height: 1.45 !important;
}

.register-builder-form.is-wizard {
    min-height: 0 !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;
}

.register-builder-form.is-wizard .register-section.is-active {
    min-height: min(370px, calc(100dvh - 232px)) !important;
    max-height: calc(100dvh - 212px) !important;
    overflow: auto !important;
}

.register-section {
    padding: clamp(1.1rem, 1.7vw, 1.55rem) !important;
}

.register-section h2 {
    font-size: clamp(1.55rem, 2vw, 2.25rem) !important;
}

.register-form-grid {
    gap: .8rem !important;
}

.register-form-grid input,
.register-form-grid select,
.register-form-grid textarea,
.register-extra-card,
.register-plan-card,
.register-term-card {
    min-height: 48px !important;
}

.register-wizard-progress {
    min-height: 58px !important;
    padding: .45rem !important;
}

.register-wizard-progress button {
    min-height: 42px !important;
}

.register-wizard-progress button small {
    font-size: .74rem !important;
}

.register-wizard-actions {
    min-height: 48px !important;
    margin-top: .55rem !important;
}

/* Landing final art direction: one Clinc palette, compact hero, readable demo. */
.commercial-landing {
    --landing-accent: #0f766e !important;
    --landing-accent-strong: #115e59 !important;
    --landing-soft: #ccfbf1 !important;
    --landing-dark: #0f172a !important;
    --landing-text: #0f172a !important;
    --landing-muted: #475569 !important;
    background:
        radial-gradient(circle at 6% 18%, rgba(20, 184, 166, .14), transparent 24rem),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 46%, #f8fafc 100%) !important;
}

.landing-nav {
    border-color: #dbe7ef !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08) !important;
}

.landing-nav-links a,
.landing-link-button {
    color: #334155 !important;
}

.landing-nav-links a:hover,
.landing-link-button:hover {
    color: #0f766e !important;
    background: #ecfdf5 !important;
}

.landing-button.primary,
.landing-button.secondary:hover,
.landing-button.primary.large {
    border-color: #0f766e !important;
    background: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(15, 118, 110, .16) !important;
}

.landing-button.primary:hover,
.landing-button.primary.large:hover {
    background: #115e59 !important;
    border-color: #115e59 !important;
    transform: translateY(-1px) !important;
}

.landing-button.secondary,
.landing-link-button {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

.landing-commercial-hero {
    width: min(1460px, calc(100% - 48px)) !important;
    min-height: calc(100dvh - 124px) !important;
    max-height: calc(100dvh - 124px) !important;
    margin-top: 12px !important;
    padding: clamp(1rem, 1.35vw, 1.5rem) !important;
    grid-template-columns: minmax(0, .92fr) minmax(420px, .62fr) !important;
    gap: clamp(1.35rem, 2.6vw, 3rem) !important;
}

.landing-commercial-hero .landing-hero-copy {
    align-self: center !important;
    max-width: 820px !important;
}

.landing-commercial-hero h1 {
    max-width: 760px !important;
    font-size: clamp(3rem, 4.1vw, 5.05rem) !important;
    line-height: .95 !important;
}

.landing-commercial-hero .landing-lead {
    max-width: 720px !important;
    font-size: clamp(1rem, 1.05vw, 1.2rem) !important;
}

.landing-theme-note {
    max-width: 680px !important;
    color: #64748b !important;
}

.landing-product-peek {
    height: min(570px, calc(100dvh - 154px)) !important;
    max-height: min(570px, calc(100dvh - 154px)) !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    align-content: stretch !important;
    padding: clamp(1rem, 1.45vw, 1.35rem) !important;
    border: 1px solid rgba(153, 246, 228, .2) !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(20, 184, 166, .24), transparent 15rem),
        linear-gradient(160deg, #0f172a 0%, #134e4a 100%) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18) !important;
}

.landing-product-peek > strong {
    max-width: 520px !important;
    font-size: clamp(1.55rem, 1.95vw, 2.15rem) !important;
    color: #ffffff !important;
}

.landing-demo-kicker {
    border-color: rgba(153, 246, 228, .42) !important;
    background: rgba(153, 246, 228, .12) !important;
    color: #99f6e4 !important;
}

.landing-product-peek .peek-topline small {
    color: rgba(255, 255, 255, .72) !important;
}

.peek-window {
    height: 100% !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: .65rem !important;
    background: rgba(255, 255, 255, .13) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}

.peek-grid {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: minmax(132px, 1fr) minmax(68px, .52fr) !important;
    gap: .55rem !important;
}

.peek-grid section {
    min-height: 0 !important;
    border-color: #dbe7ef !important;
    background: rgba(248, 250, 252, .96) !important;
}

.peek-agenda {
    grid-row: 1 / -1 !important;
}

.peek-calendar {
    min-height: 0 !important;
    height: 100% !important;
}

.peek-clients,
.peek-chart {
    min-height: 0 !important;
    max-height: none !important;
}

.peek-appointment.is-one {
    border-color: #14b8a6 !important;
    background: #ecfdf5 !important;
    color: #134e4a !important;
}

.peek-appointment.is-two {
    border-color: #0f766e !important;
    background: #f0fdfa !important;
    color: #115e59 !important;
}

.peek-heading b,
.peek-chart .peek-heading b {
    color: #0f766e !important;
}

.peek-bars span {
    background: linear-gradient(180deg, #14b8a6, #0f766e) !important;
}

.landing-product-peek > small {
    max-width: 620px !important;
    color: rgba(255, 255, 255, .8) !important;
}

.peek-micro-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    overflow: hidden !important;
}

.peek-micro-tabs button {
    min-height: 42px !important;
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .9) !important;
}

.peek-micro-tabs button:hover,
.peek-micro-tabs button.is-active {
    border-color: rgba(153, 246, 228, .62) !important;
    background: rgba(20, 184, 166, .22) !important;
    color: #ffffff !important;
}

.landing-service-tour .service-tour-steps button.is-active {
    border-color: rgba(15, 118, 110, .36) !important;
    background: #ecfdf5 !important;
    color: #0f172a !important;
}

@media (max-width: 1320px) {
    .landing-commercial-hero h1 {
        font-size: clamp(2.85rem, 5vw, 4.65rem) !important;
    }

    .landing-product-peek {
        height: min(540px, calc(100dvh - 154px)) !important;
    }
}

/* Landing finish lock: compact, single-palette commercial view at real browser zoom. */
body.commercial-landing {
    --landing-accent: #0f766e !important;
    --landing-accent-strong: #115e59 !important;
    --landing-soft: #ccfbf1 !important;
    --landing-dark: #0f172a !important;
    --landing-text: #0f172a !important;
    --landing-muted: #475569 !important;
}

body.commercial-landing .landing-button.primary,
body.commercial-landing .landing-button.primary.large,
body.commercial-landing .landing-hero-actions .landing-button.primary,
body.commercial-landing .landing-access-copy .landing-button.primary,
body.commercial-landing .landing-login-card .landing-button.primary {
    border-color: #0f766e !important;
    background: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(15, 118, 110, .16) !important;
}

body.commercial-landing .landing-button.primary:hover,
body.commercial-landing .landing-button.primary.large:hover,
body.commercial-landing .landing-hero-actions .landing-button.primary:hover,
body.commercial-landing .landing-access-copy .landing-button.primary:hover,
body.commercial-landing .landing-login-card .landing-button.primary:hover {
    border-color: #115e59 !important;
    background: #115e59 !important;
    color: #ffffff !important;
}

body.commercial-landing .landing-button.secondary,
body.commercial-landing .landing-link-button {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

body.commercial-landing .landing-commercial-hero {
    width: min(1440px, calc(100% - 56px)) !important;
    min-height: min(590px, calc(100dvh - 132px)) !important;
    max-height: none !important;
    margin: 16px auto 1.25rem !important;
    padding: clamp(1.1rem, 1.7vw, 1.65rem) !important;
    grid-template-columns: minmax(0, .94fr) minmax(390px, .58fr) !important;
    gap: clamp(1.35rem, 2.7vw, 3rem) !important;
    align-items: center !important;
    overflow: visible !important;
}

body.commercial-landing .landing-commercial-hero h1 {
    max-width: 760px !important;
    font-size: clamp(2.95rem, 4vw, 4.9rem) !important;
    line-height: .96 !important;
}

body.commercial-landing .landing-commercial-hero .landing-lead {
    max-width: 720px !important;
    margin-top: .85rem !important;
    font-size: clamp(1rem, 1.05vw, 1.18rem) !important;
    line-height: 1.55 !important;
}

body.commercial-landing .landing-theme-note {
    margin-top: .55rem !important;
    font-size: .98rem !important;
    line-height: 1.45 !important;
}

body.commercial-landing .landing-hero-actions {
    margin-top: 1.25rem !important;
    gap: .8rem !important;
}

body.commercial-landing .landing-product-peek {
    height: clamp(455px, calc(100dvh - 172px), 515px) !important;
    min-height: 455px !important;
    max-height: 515px !important;
    padding: 1.15rem !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    gap: .65rem !important;
    overflow: hidden !important;
    border-radius: 30px !important;
}

body.commercial-landing .landing-product-peek > strong {
    max-width: 470px !important;
    font-size: clamp(1.5rem, 1.8vw, 2rem) !important;
    line-height: 1 !important;
}

body.commercial-landing .landing-product-peek > small {
    margin: 0 !important;
    max-width: 580px !important;
    font-size: .78rem !important;
    line-height: 1.38 !important;
}

body.commercial-landing .peek-window {
    min-height: 0 !important;
    height: auto !important;
    padding: .58rem !important;
    border-radius: 24px !important;
}

body.commercial-landing .peek-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(160px, 1fr) 54px !important;
    gap: .5rem !important;
}

body.commercial-landing .peek-agenda {
    grid-row: auto !important;
    padding: .72rem !important;
}

body.commercial-landing .peek-clients {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    min-height: 54px !important;
    max-height: 54px !important;
    overflow: hidden !important;
    padding: .55rem .7rem !important;
}

body.commercial-landing .peek-clients .peek-client-list {
    display: none !important;
}

body.commercial-landing .peek-chart {
    display: none !important;
}

body.commercial-landing .peek-calendar {
    gap: .36rem !important;
}

body.commercial-landing .peek-row {
    grid-template-columns: 34px 1fr !important;
    gap: .55rem !important;
}

body.commercial-landing .peek-appointment {
    min-height: 34px !important;
    padding: .38rem .7rem !important;
    border-radius: 999px !important;
}

body.commercial-landing .peek-micro-tabs {
    margin-top: .05rem !important;
    gap: .45rem !important;
}

body.commercial-landing .peek-micro-tabs button {
    min-height: 38px !important;
    border-radius: 13px !important;
    color: rgba(255, 255, 255, .88) !important;
}

body.commercial-landing .peek-micro-tabs button.is-active,
body.commercial-landing .peek-micro-tabs button:hover {
    border-color: rgba(153, 246, 228, .58) !important;
    background: rgba(15, 118, 110, .86) !important;
    color: #ffffff !important;
}

body.commercial-landing .landing-access-section {
    width: min(1440px, calc(100% - 56px)) !important;
    padding: clamp(1.3rem, 2vw, 2rem) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .92) !important;
}

body.commercial-landing .landing-access-section .landing-section-heading {
    max-width: 980px !important;
    margin-bottom: 1.35rem !important;
}

body.commercial-landing .landing-access-section .landing-section-heading h2 {
    max-width: 900px !important;
    font-size: clamp(2.1rem, 3.25vw, 4rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
}

body.commercial-landing .landing-access {
    display: grid !important;
    grid-template-columns: minmax(300px, .64fr) minmax(420px, 1fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

body.commercial-landing .landing-access-copy,
body.commercial-landing .landing-access-card {
    border: 1px solid #dbe7ef !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .06) !important;
}

body.commercial-landing .landing-access-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: .85rem !important;
    padding: clamp(1.2rem, 2vw, 1.65rem) !important;
}

body.commercial-landing .landing-access-copy h3 {
    margin: 0 !important;
    font-size: clamp(1.65rem, 2vw, 2.4rem) !important;
    line-height: 1 !important;
}

body.commercial-landing .landing-access-copy p {
    max-width: 520px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

body.commercial-landing .landing-login-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .8rem !important;
    padding: clamp(1.2rem, 1.8vw, 1.6rem) !important;
}

body.commercial-landing .landing-login-card .landing-eyebrow,
body.commercial-landing .landing-login-card h3,
body.commercial-landing .landing-login-card .landing-errors,
body.commercial-landing .landing-login-card .landing-check,
body.commercial-landing .landing-login-card button {
    grid-column: 1 / -1 !important;
}

body.commercial-landing .landing-login-card h3 {
    margin: -.25rem 0 .25rem !important;
    font-size: 1.55rem !important;
}

body.commercial-landing .landing-login-card label {
    display: grid !important;
    gap: .38rem !important;
    margin: 0 !important;
    color: #475569 !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

body.commercial-landing .landing-login-card input {
    min-height: 48px !important;
    border-radius: 15px !important;
}

body.commercial-landing .landing-login-card .landing-check {
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.commercial-landing .landing-guide-drawer {
    position: fixed !important;
    z-index: 9999 !important;
    top: 50% !important;
    right: clamp(1rem, 3vw, 4rem) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: min(430px, calc(100vw - 32px)) !important;
    max-height: min(620px, calc(100dvh - 40px)) !important;
    overflow: auto !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .26) !important;
}

body.commercial-landing.guide-open::before {
    z-index: 9998 !important;
}

@media (max-width: 1180px) {
    body.commercial-landing .landing-commercial-hero,
    body.commercial-landing .landing-access {
        grid-template-columns: 1fr !important;
        max-height: none !important;
    }

    body.commercial-landing .landing-product-peek {
        height: auto !important;
        max-height: none !important;
    }
}

/* Clinc unified jade system: one premium interface for every business vertical.
   Sector selection remains commercial/terminology, not a separate visual product. */
body[class*="vertical-"] {
    --erp-bg: #f8fafc !important;
    --erp-surface: #ffffff !important;
    --erp-surface-soft: #f1f5f9 !important;
    --erp-hover: #ecfdf5 !important;
    --erp-primary: #0f766e !important;
    --erp-primary-hover: #115e59 !important;
    --erp-primary-active: #134e4a !important;
    --erp-accent: #14b8a6 !important;
    --erp-primary-soft: #ccfbf1 !important;
    --erp-text: #0f172a !important;
    --erp-muted: #64748b !important;
    --erp-sidebar-bg: #0f172a !important;
    --vertical-accent: #0f766e !important;
    --vertical-soft: #ccfbf1 !important;
    --vertical-dark: #0f172a !important;
    --vertical-surface: #ffffff !important;
    --vertical-bg: #f8fafc !important;
    --vertical-surface-soft: #f1f5f9 !important;
    --vertical-text: #0f172a !important;
    --vertical-muted: #64748b !important;
    --vertical-sidebar: #0f172a !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(20, 184, 166, .12), transparent 30rem),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 46%, #f8fafc 100%) !important;
    color: #0f172a !important;
}

body[class*="vertical-"] .main,
body.vertical-barbershop .main,
body.vertical-hair_salon .main,
body.vertical-aesthetic_clinic .main,
body.vertical-physiotherapy .main {
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .08), transparent 28rem),
        #f8fafc !important;
    color: #0f172a !important;
}

body[class*="vertical-"] .topbar,
body[class*="vertical-"] .metric-card,
body[class*="vertical-"] .panel,
body[class*="vertical-"] .card,
body[class*="vertical-"] .dashboard-card,
body[class*="vertical-"] .owner-panel,
body[class*="vertical-"] .invoice-panel,
body[class*="vertical-"] .company-show-v2 > section,
body[class*="vertical-"] .calendar-focus-shell,
body[class*="vertical-"] .support-admin-card,
body[class*="vertical-"] .settings-panel,
body.vertical-barbershop .metric-card,
body.vertical-barbershop .panel,
body.vertical-barbershop .dashboard-card,
body.vertical-barbershop .owner-panel,
body.vertical-barbershop .invoice-panel {
    background: #ffffff !important;
    border-color: #dbe7ef !important;
    color: #0f172a !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07) !important;
}

body[class*="vertical-"] h1,
body[class*="vertical-"] h2,
body[class*="vertical-"] h3,
body[class*="vertical-"] .topbar h1,
body[class*="vertical-"] .metric-card strong,
body[class*="vertical-"] .metric-card span,
body.vertical-barbershop h1,
body.vertical-barbershop h2,
body.vertical-barbershop h3,
body.vertical-barbershop .metric-card strong,
body.vertical-barbershop .metric-card span {
    color: #0f172a !important;
}

body[class*="vertical-"] p,
body[class*="vertical-"] small,
body[class*="vertical-"] .notes,
body[class*="vertical-"] .metric-card small,
body.vertical-barbershop p,
body.vertical-barbershop small,
body.vertical-barbershop .notes,
body.vertical-barbershop .metric-card small {
    color: #64748b !important;
}

body[class*="vertical-"] .button.primary,
body[class*="vertical-"] button[type="submit"].button,
body[class*="vertical-"] .nav a.active,
body[class*="vertical-"] .nav-locked.active {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
}

body[class*="vertical-"] .button.primary:hover,
body[class*="vertical-"] button[type="submit"].button:hover {
    background: #115e59 !important;
    border-color: #115e59 !important;
}

body[class*="vertical-"] .nav a.active .nav-icon,
body[class*="vertical-"] .nav-locked.active .nav-icon {
    background: rgba(20, 184, 166, .22) !important;
    color: #ccfbf1 !important;
}

body[class*="vertical-"] input:focus,
body[class*="vertical-"] select:focus,
body[class*="vertical-"] textarea:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .16) !important;
}

/* Compact owner dashboard: practical first screen without forced scrolling on laptops. */
.owner-simple-dashboard {
    display: grid !important;
    gap: 1rem !important;
}

.owner-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .9rem !important;
}

.owner-kpi-grid article {
    min-height: 106px !important;
    padding: 1rem !important;
    border-radius: 20px !important;
}

.owner-kpi-grid article strong {
    font-size: clamp(2rem, 3vw, 2.7rem) !important;
    line-height: .95 !important;
}

.owner-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(340px, .9fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.owner-main-grid > .panel {
    min-height: 268px !important;
    padding: 1.05rem !important;
}

.owner-main-grid .panel-heading {
    margin-bottom: .75rem !important;
}

.agenda-list-compact {
    max-height: 158px !important;
    overflow: auto !important;
}

.agenda-list-compact .empty-state {
    min-height: 126px !important;
}

.available-hours-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

.available-hours-grid a {
    min-height: 84px !important;
    padding: .85rem !important;
    border-radius: 18px !important;
}

.owner-billing-strip {
    min-height: 96px !important;
    padding: 1rem 1.15rem !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
    gap: 1rem !important;
    align-items: center !important;
}

.owner-billing-strip .button {
    justify-self: end !important;
}

@media (max-width: 1180px) {
    .owner-kpi-grid,
    .owner-main-grid,
    .owner-billing-strip {
        grid-template-columns: 1fr 1fr !important;
    }

    .owner-billing-strip .button {
        justify-self: stretch !important;
    }
}

/* Landing cleanup: one jade direction, no clipped demo card at normal browser zoom. */
body.commercial-landing {
    --landing-accent: #0f766e !important;
    --landing-accent-strong: #115e59 !important;
    --landing-soft: #ccfbf1 !important;
    --landing-dark: #0f172a !important;
    --landing-text: #0f172a !important;
    --landing-muted: #475569 !important;
}

body.commercial-landing .landing-nav {
    min-height: 70px !important;
    padding: .55rem .85rem !important;
}

body.commercial-landing .landing-commercial-hero {
    min-height: auto !important;
    height: min(590px, calc(100dvh - 100px)) !important;
    max-height: none !important;
    width: min(1480px, calc(100% - 44px)) !important;
    margin: 12px auto 1rem !important;
    padding: clamp(1rem, 1.6vw, 1.6rem) !important;
    grid-template-columns: minmax(0, .98fr) minmax(400px, .72fr) !important;
    align-items: center !important;
    overflow: hidden !important;
}

body.commercial-landing .landing-commercial-hero h1 {
    max-width: 760px !important;
    font-size: clamp(3rem, 4.25vw, 5rem) !important;
    line-height: .95 !important;
}

body.commercial-landing .landing-commercial-hero .landing-lead {
    max-width: 760px !important;
    font-size: clamp(1rem, 1.08vw, 1.18rem) !important;
    line-height: 1.42 !important;
}

body.commercial-landing .landing-product-peek {
    width: 100% !important;
    height: min(480px, calc(100dvh - 150px)) !important;
    min-height: 420px !important;
    max-height: 480px !important;
    padding: 1rem !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    gap: .55rem !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 92% 4%, rgba(20, 184, 166, .28), transparent 14rem),
        linear-gradient(145deg, #0f172a, #134e4a) !important;
}

body.commercial-landing .landing-product-peek > strong {
    max-width: 590px !important;
    font-size: clamp(1.5rem, 2vw, 2.15rem) !important;
    line-height: 1 !important;
}

body.commercial-landing .landing-product-peek > small {
    margin: .2rem 0 0 !important;
    font-size: .82rem !important;
    line-height: 1.3 !important;
}

body.commercial-landing .peek-window {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
}

body.commercial-landing .peek-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(132px, 1fr) 52px !important;
}

body.commercial-landing .peek-agenda {
    min-height: 132px !important;
}

body.commercial-landing .peek-clients {
    min-height: 52px !important;
    max-height: 52px !important;
}

body.commercial-landing .peek-chart {
    display: none !important;
}

body.commercial-landing .peek-micro-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .45rem !important;
    overflow: hidden !important;
}

body.commercial-landing .peek-micro-tabs button {
    min-height: 38px !important;
    color: rgba(255, 255, 255, .86) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

body.commercial-landing .peek-micro-tabs button.is-active {
    background: #0f766e !important;
    border-color: #5eead4 !important;
    color: #ffffff !important;
}

body.commercial-landing .landing-button.primary,
body.commercial-landing .landing-button.secondary:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
}

body.commercial-landing .landing-button.primary:hover {
    background: #115e59 !important;
    border-color: #115e59 !important;
}

/* Register wizard hard lock: no horizontal scroll, each step behaves as a compact card. */
.register-builder {
    width: min(1440px, calc(100% - 32px)) !important;
    height: calc(100dvh - 28px) !important;
    min-height: 620px !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 14px auto !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 32%) minmax(0, 1fr) !important;
    gap: 1rem !important;
    overflow: hidden !important;
}

.register-builder-copy {
    min-width: 0 !important;
    padding: clamp(1.2rem, 2vw, 1.8rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.register-builder-copy img {
    width: 138px !important;
    max-width: 54% !important;
}

.register-builder-copy h2 {
    font-size: clamp(2rem, 2.65vw, 3.3rem) !important;
    line-height: 1.04 !important;
}

.register-builder-copy p {
    max-width: 420px !important;
    font-size: .98rem !important;
    line-height: 1.48 !important;
}

.register-builder-form.is-wizard {
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    gap: .65rem !important;
    overflow: hidden !important;
    padding: clamp(.9rem, 1.25vw, 1.15rem) !important;
}

.register-wizard-progress {
    min-height: 52px !important;
    padding: .35rem !important;
    gap: .35rem !important;
    border-radius: 20px !important;
}

.register-wizard-progress button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: .25rem .35rem !important;
    border-radius: 15px !important;
}

.register-wizard-progress button span {
    font-size: .74rem !important;
}

.register-wizard-progress button strong {
    font-size: .78rem !important;
}

.register-builder-form.is-wizard .register-section {
    display: none !important;
}

.register-builder-form.is-wizard .register-section.is-active {
    display: grid !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: clamp(1rem, 1.35vw, 1.25rem) !important;
    align-content: start !important;
}

.register-section *,
.register-builder-form * {
    min-width: 0 !important;
}

.register-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
}

.register-form-grid label {
    gap: .35rem !important;
}

.register-form-grid input,
.register-form-grid select,
.register-form-grid textarea {
    min-height: 44px !important;
    border-radius: 14px !important;
}

.register-theme-step {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) !important;
    gap: .8rem !important;
}

.register-theme-step .vertical-style-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
}

.vertical-style-card {
    min-height: 94px !important;
    padding: .85rem !important;
    border-color: #dbe7ef !important;
    background: #ffffff !important;
}

.vertical-style-card::after {
    opacity: .25 !important;
}

.vertical-style-card:has(input:checked) {
    border-color: #14b8a6 !important;
    background: #ecfdf5 !important;
    box-shadow: 0 16px 34px rgba(20, 184, 166, .14) !important;
}

.vertical-style-swatch {
    width: 34px !important;
    height: 34px !important;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
}

.vertical-style-card strong {
    font-size: .95rem !important;
}

.vertical-style-card small {
    display: none !important;
}

.register-theme-preview {
    --theme-accent: #0f766e !important;
    --theme-soft: #ccfbf1 !important;
    --theme-dark: #0f172a !important;
    min-height: 0 !important;
    padding: .9rem !important;
    gap: .6rem !important;
    background: linear-gradient(145deg, #ecfdf5, #ffffff) !important;
    border-color: #99f6e4 !important;
}

.theme-preview-top strong {
    max-width: 260px !important;
    font-size: .95rem !important;
}

.theme-preview-board {
    grid-template-columns: 58px 1fr !important;
    min-height: 202px !important;
}

.theme-preview-sidebar {
    gap: .5rem !important;
    padding: .75rem !important;
}

.theme-preview-sidebar span,
.theme-preview-sidebar i {
    width: 28px !important;
    height: 28px !important;
}

.theme-preview-content {
    gap: .5rem !important;
    padding: .7rem !important;
}

.theme-preview-header {
    height: 34px !important;
}

.theme-preview-metrics b {
    height: 36px !important;
}

.theme-preview-calendar {
    padding: .55rem !important;
    gap: .35rem .5rem !important;
}

.theme-preview-calendar em {
    min-height: 25px !important;
    padding: .28rem .55rem !important;
}

.register-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .8rem !important;
    overflow: visible !important;
}

.register-plan-card {
    min-height: 236px !important;
    padding: 1rem !important;
}

.register-plan-card small,
.register-plan-card b {
    font-size: .76rem !important;
    line-height: 1.35 !important;
}

.register-plan-card strong {
    font-size: 1.3rem !important;
}

.register-plan-card em {
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
}

.register-term-grid,
.register-extra-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

.register-extra-card,
.register-term-card {
    min-height: 86px !important;
    padding: .85rem !important;
}

.register-extra-card small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.legal-consent-compact .legal-consent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .7rem !important;
}

.legal-consent-compact .legal-consent-card {
    min-height: 260px !important;
    padding: .9rem !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

.legal-short-copy {
    font-size: .82rem !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.legal-check {
    padding: .7rem !important;
}

.legal-check span {
    font-size: .76rem !important;
    line-height: 1.28 !important;
}

.legal-modal {
    z-index: 10000 !important;
}

.legal-modal-panel {
    position: fixed !important;
    inset: 28px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border-radius: 28px !important;
}

.legal-modal-panel .legal-scroll-box {
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
}

.register-wizard-actions {
    margin: 0 !important;
    min-height: 50px !important;
    align-items: center !important;
}

.register-submit-row {
    min-height: 64px !important;
    margin: 0 !important;
    padding: .65rem .8rem !important;
    grid-template-columns: 1fr minmax(230px, .38fr) !important;
    align-items: center !important;
}

.register-submit-row .button {
    width: 100% !important;
    min-height: 44px !important;
}

.register-builder-form > .form-link {
    margin: 0 !important;
    line-height: 1 !important;
}

@media (max-width: 1180px) {
    .register-builder {
        height: auto !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .register-builder-form.is-wizard {
        height: auto !important;
    }

    .register-builder-form.is-wizard .register-section.is-active {
        overflow: visible !important;
    }

    .register-theme-step,
    .register-plan-grid,
    .register-term-grid,
    .register-extra-grid,
    .legal-consent-compact .legal-consent-grid,
    .owner-kpi-grid,
    .owner-main-grid,
    .owner-billing-strip {
        grid-template-columns: 1fr !important;
    }
}
/* Landing 45 - Clinc public page, Treatwell-inspired clean commercial flow. */
.clinc-public-page {
    --public-ink: #0f172a;
    --public-muted: #52627a;
    --public-line: #d9e5ed;
    --public-jade: #0f766e;
    --public-jade-dark: #115e59;
    --public-jade-soft: #dffaf4;
    --public-bg: #f8fafc;
    margin: 0;
    min-height: 100vh;
    color: var(--public-ink);
    background:
        radial-gradient(circle at 0 10%, rgba(153, 246, 228, .35), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    font-family: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.clinc-public-page * {
    box-sizing: border-box;
}

.clinc-public-nav {
    position: sticky;
    top: 14px;
    z-index: 40;
    width: min(96vw, 1680px);
    min-height: 64px;
    margin: 14px auto 0;
    padding: 8px 10px 8px 20px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(250px, 1fr);
    align-items: center;
    gap: 1.25rem;
    border: 1px solid var(--public-line);
    border-radius: 26px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .09);
    backdrop-filter: blur(18px);
}

.clinc-public-brand img {
    display: block;
    width: clamp(118px, 7vw, 132px);
    height: auto;
}

.clinc-public-nav nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    padding: .35rem;
    border: 1px solid rgba(226, 232, 240, .8);
    border-radius: 20px;
    background: rgba(248, 250, 252, .72);
}

.clinc-public-nav nav a,
.clinc-ghost-button {
    color: #334155;
    text-decoration: none;
    font: 850 .96rem/1 "Instrument Sans", sans-serif;
    letter-spacing: 0;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.clinc-public-nav nav a {
    min-width: 96px;
    padding: .82rem 1rem;
    display: inline-flex;
    justify-content: center;
    border-radius: 15px;
}

.clinc-public-nav nav a:hover,
.clinc-ghost-button:hover {
    color: var(--public-jade);
    background: #fff;
    transform: translateY(-1px);
}

.clinc-public-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
}

.clinc-ghost-button,
.clinc-outline-button,
.clinc-primary-button {
    appearance: none;
    min-height: 46px;
    padding: 0 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid var(--public-line);
    background: #fff;
    color: var(--public-ink);
    text-decoration: none;
    font: 850 .96rem/1 "Instrument Sans", sans-serif;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.clinc-ghost-button {
    border-color: transparent;
    background: transparent;
}

.clinc-primary-button {
    border-color: var(--public-jade);
    background: var(--public-jade);
    color: #fff;
    box-shadow: 0 18px 34px rgba(15, 118, 110, .18);
}

.clinc-outline-button:hover,
.clinc-primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .1);
}

.clinc-primary-button:hover {
    background: var(--public-jade-dark);
}

.clinc-hero-section,
.clinc-section {
    width: min(96vw, 1760px);
    margin: 1rem auto 0;
    border: 1px solid rgba(217, 229, 237, .95);
    border-radius: 34px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.clinc-hero-section {
    min-height: calc(100vh - 116px);
    padding: clamp(2rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .13), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .72));
}

.clinc-hero-copy {
    width: min(1120px, 100%);
}

.clinc-eyebrow {
    margin: 0 0 .8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .095em;
    font: 900 clamp(.86rem, .82vw, 1.02rem)/1.2 "Instrument Sans", sans-serif;
}

.clinc-hero-copy h1 {
    max-width: 1080px;
    margin: 0;
    color: var(--public-ink);
    font: 900 clamp(4.15rem, 6.8vw, 8.1rem)/.91 "Instrument Sans", sans-serif;
    letter-spacing: -0.052em;
}

.clinc-hero-copy > p:not(.clinc-eyebrow) {
    max-width: 930px;
    margin: 1.8rem 0 0;
    color: #334155;
    font-size: clamp(1.22rem, 1.45vw, 1.72rem);
    line-height: 1.5;
}

.clinc-hero-copy > p:not(.clinc-eyebrow) strong {
    color: var(--public-ink);
    font-weight: 850;
}

.clinc-search-card {
    width: min(1030px, 100%);
    margin-top: 2.4rem;
    padding: .78rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .76rem;
    align-items: stretch;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 253, 245, .8));
    box-shadow: 0 24px 64px rgba(15, 23, 42, .09);
}

.clinc-search-card span,
.clinc-search-card a {
    min-height: 126px;
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .44rem;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    color: #475569;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.35;
}

.clinc-search-card strong {
    color: var(--public-ink);
    font-size: clamp(1.08rem, 1.05vw, 1.22rem);
    line-height: 1.14;
}

.clinc-search-card small {
    color: var(--public-jade);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clinc-search-card em {
    font-style: normal;
    color: var(--public-muted);
}

.clinc-search-card a {
    position: relative;
    overflow: hidden;
    padding-right: 4rem;
    border-color: rgba(15, 118, 110, .28);
    background: linear-gradient(135deg, var(--public-jade), #0f766e);
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 118, 110, .22);
}

.clinc-search-card a::after {
    content: "\2192";
    width: 2.15rem;
    height: 2.15rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 900;
}

.clinc-search-card a strong,
.clinc-search-card a small,
.clinc-search-card a em {
    color: #fff;
}

.clinc-search-card a em {
    opacity: .82;
}

.clinc-section {
    padding: clamp(1.4rem, 3vw, 3.2rem);
    scroll-margin-top: 112px;
}

.clinc-section-heading {
    max-width: 1040px;
    margin-bottom: clamp(1.4rem, 2vw, 2rem);
}

.clinc-section-heading h2 {
    margin: 0;
    color: var(--public-ink);
    font: 900 clamp(2.35rem, 4.4vw, 5.4rem)/.98 "Instrument Sans", sans-serif;
    letter-spacing: -0.043em;
}

.clinc-section-heading p:not(.clinc-eyebrow) {
    max-width: 960px;
    margin: 1.05rem 0 0;
    color: #475569;
    font-size: clamp(1.08rem, 1.15vw, 1.28rem);
    line-height: 1.55;
}

.clinc-product-grid,
.clinc-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.4vw, 1.45rem);
}

.clinc-product-card,
.clinc-plan-card,
.clinc-login-card,
.clinc-access-copy {
    border: 1px solid var(--public-line);
    border-radius: 28px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

.clinc-product-card {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    padding: clamp(1.35rem, 1.75vw, 2rem);
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: .9rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, .09), transparent 34%),
        linear-gradient(180deg, #fff, #f8fafc);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.clinc-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, .34);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .09);
}

.clinc-product-card > span,
.clinc-plan-card > p {
    color: var(--public-jade);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clinc-product-card > span {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(20, 184, 166, .2);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(204, 251, 241, .86), rgba(255, 255, 255, .9));
    color: #0f766e;
    font-size: clamp(1.25rem, 1.45vw, 1.7rem);
    line-height: 1;
    box-shadow: 0 14px 34px rgba(15, 118, 110, .09);
}

.clinc-product-card h3,
.clinc-plan-card h3,
.clinc-login-card h3,
.clinc-access-copy h2 {
    margin: 0;
    color: var(--public-ink);
    font-size: clamp(1.9rem, 2.25vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.clinc-product-card p {
    margin: 0;
    color: #475569;
    font-size: clamp(1.04rem, 1vw, 1.18rem);
    line-height: 1.55;
}

.clinc-mini-agenda,
.clinc-mini-team,
.clinc-mini-billing {
    align-self: end;
    min-height: 248px;
    padding: clamp(1rem, 1.15vw, 1.25rem);
    border: 1px solid #d9e5ed;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.clinc-mini-agenda {
    display: grid;
    gap: .78rem;
    align-content: end;
}

.clinc-mini-agenda b {
    justify-self: end;
    color: var(--public-jade);
    font-size: 1.08rem;
    font-weight: 900;
}

.clinc-mini-agenda em,
.clinc-mini-team strong {
    min-height: 54px;
    padding: .76rem .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 999px;
    background: var(--public-jade-soft);
    color: var(--public-ink);
    font-style: normal;
    font-size: clamp(.92rem, .9vw, 1.05rem);
    font-weight: 900;
}

.clinc-mini-agenda i {
    color: var(--public-jade-dark);
    font-style: normal;
    font-weight: 900;
}

.clinc-mini-team {
    display: grid;
    align-content: center;
    gap: .9rem;
}

.clinc-mini-team strong i {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 999px;
    background: var(--public-jade);
    box-shadow: 0 0 0 7px rgba(20, 184, 166, .14);
}

.clinc-mini-team small {
    margin-left: auto;
    color: var(--public-jade-dark);
    font-size: .9rem;
    font-weight: 900;
}

.clinc-mini-billing {
    display: grid;
    align-content: end;
    gap: .5rem;
}

.clinc-mini-billing strong {
    font-size: clamp(3.2rem, 4.6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.clinc-mini-billing small {
    color: #475569;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.clinc-mini-billing div {
    height: 116px;
    margin-top: 1rem;
    display: flex;
    align-items: end;
    gap: .75rem;
}

.clinc-mini-billing i {
    flex: 1;
    min-height: 24px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, #14b8a6, #0f766e);
}

.clinc-pricing-section .compact {
    display: block;
}

.clinc-billing-toggle {
    margin: 0 0 clamp(1rem, 1.5vw, 1.45rem);
    padding: .45rem;
    display: inline-flex;
    gap: .35rem;
    border: 1px solid var(--public-line);
    border-radius: 22px;
    background: #f1f5f9;
}

.clinc-billing-toggle button {
    min-width: 128px;
    min-height: 48px;
    padding: .45rem .8rem;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: #475569;
    font-size: .98rem;
    line-height: 1.1;
    font-weight: 900;
    cursor: pointer;
}

.clinc-billing-toggle button small {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
}

.clinc-billing-toggle button.is-active {
    background: var(--public-jade);
    color: #fff;
    box-shadow: 0 12px 28px rgba(15, 118, 110, .18);
}

.clinc-billing-toggle button.is-active small {
    color: rgba(255, 255, 255, .82);
}

.clinc-plan-card {
    min-height: 500px;
    padding: clamp(1.45rem, 1.5vw, 1.85rem);
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, .07), transparent 36%),
        linear-gradient(180deg, #fff, #f8fafc);
}

.clinc-plan-card > p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.2;
}

.clinc-plan-card h3 {
    font-size: clamp(1.85rem, 2vw, 2.35rem);
}

.clinc-plan-card strong {
    display: flex;
    align-items: end;
    gap: .55rem;
    padding-top: .9rem;
    border-top: 1px solid #e2e8f0;
    font-size: clamp(2.25rem, 3.1vw, 3.65rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.clinc-plan-card strong small {
    padding-bottom: .35rem;
    color: var(--public-muted);
    font-size: clamp(.86rem, .85vw, .98rem);
}

.clinc-plan-card em {
    min-height: 92px;
    color: #475569;
    font-size: clamp(1rem, 1vw, 1.12rem);
    line-height: 1.45;
    font-style: normal;
    font-weight: 800;
}

.clinc-plan-card ul {
    margin: .25rem 0 0;
    padding: 0;
    display: grid;
    gap: .6rem;
    list-style: none;
}

.clinc-plan-card li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #334155;
    font-size: clamp(.98rem, .95vw, 1.08rem);
    font-weight: 850;
}

.clinc-plan-card li::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #14b8a6;
}

.clinc-plan-card .clinc-primary-button {
    width: 100%;
    margin-top: auto;
}

.clinc-access-section {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, .7fr);
    gap: 1rem;
}

.clinc-access-copy,
.clinc-login-card {
    padding: clamp(1.4rem, 2vw, 2rem);
}

.clinc-access-copy {
    display: grid;
    align-content: center;
    gap: 1rem;
}

.clinc-access-copy p:not(.clinc-eyebrow) {
    color: var(--public-muted);
    font-size: 1.12rem;
    line-height: 1.55;
}

.clinc-login-card {
    display: grid;
    gap: .8rem;
}

.clinc-login-card label {
    display: grid;
    gap: .35rem;
    color: #475569;
    font-weight: 900;
}

.clinc-login-card input {
    width: 100%;
    min-height: 50px;
    padding: 0 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #fff;
    font: inherit;
}

.clinc-login-card input:focus {
    outline: 0;
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .16);
}

.clinc-check {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .55rem !important;
}

.clinc-check input {
    width: 18px;
    min-height: 18px;
}

.clinc-form-error {
    padding: .8rem 1rem;
    border-radius: 14px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 800;
}

.clinc-guide-drawer {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    width: min(460px, calc(100vw - 32px));
    padding: 1.2rem;
    border: 1px solid var(--public-line);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .18);
    backdrop-filter: blur(18px);
}

.clinc-guide-drawer[hidden] {
    display: none;
}

.clinc-guide-close {
    float: right;
    min-height: 40px;
    padding: 0 .9rem;
    border: 1px solid var(--public-line);
    border-radius: 14px;
    background: #fff;
    font-weight: 800;
}

.clinc-guide-drawer h2 {
    margin: .2rem 0 .6rem;
    font-size: 2rem;
}

.clinc-guide-drawer p:not(.clinc-eyebrow) {
    color: var(--public-muted);
    line-height: 1.5;
}

.clinc-guide-drawer ul {
    margin: 1rem 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    list-style: none;
}

.clinc-guide-drawer li {
    padding: .75rem .9rem;
    border-radius: 16px;
    background: var(--public-jade-soft);
    color: var(--public-jade-dark);
    font-weight: 900;
}

.clinc-guide-drawer > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
}

.clinc-cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    max-width: 760px;
    margin: 0 auto;
    padding: .9rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .9rem;
    align-items: center;
    border: 1px solid var(--public-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    backdrop-filter: blur(18px);
}

.clinc-cookie-banner strong {
    display: block;
    margin-bottom: .2rem;
}

.clinc-cookie-banner p {
    margin: 0;
    color: var(--public-muted);
}

.clinc-cookie-banner button {
    min-height: 44px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 16px;
    background: var(--public-jade);
    color: #fff;
    font-weight: 900;
}

.clinc-cookie-locked {
    overflow: hidden;
}

.clinc-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
}

.clinc-cookie-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(18px) saturate(.9);
}

.clinc-cookie-dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: min(86vh, 760px);
    overflow: auto;
    padding: clamp(1.25rem, 2.2vw, 1.8rem);
    border: 1px solid rgba(153, 246, 228, .72);
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(204, 251, 241, .9), transparent 42%),
        rgba(255, 255, 255, .97);
    box-shadow: 0 40px 100px rgba(15, 23, 42, .34);
    animation: clincFadeLift .32s ease both;
}

.clinc-cookie-dialog h2 {
    margin: .35rem 0 .55rem;
    color: var(--public-ink);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: .98;
    letter-spacing: -.03em;
}

.clinc-cookie-intro {
    margin: 0;
    color: var(--public-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.clinc-cookie-summary {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.clinc-cookie-summary span {
    display: grid;
    gap: .2rem;
    padding: .9rem;
    border: 1px solid var(--public-line);
    border-radius: 18px;
    background: rgba(248, 250, 252, .82);
}

.clinc-cookie-summary strong {
    color: var(--public-ink);
    font-weight: 900;
}

.clinc-cookie-summary small {
    color: var(--public-muted);
    line-height: 1.35;
}

.clinc-cookie-terms {
    max-height: 240px;
    overflow: auto;
    margin: .9rem 0 0;
    padding: 1rem;
    border: 1px solid rgba(20, 184, 166, .32);
    border-radius: 20px;
    background: rgba(248, 250, 252, .95);
}

.clinc-cookie-terms h3 {
    margin: 0 0 .7rem;
    color: var(--public-ink);
    font-size: 1rem;
}

.clinc-cookie-terms p {
    margin: 0 0 .7rem;
    color: var(--public-muted);
    line-height: 1.5;
}

.clinc-cookie-actions {
    margin-top: 1.05rem;
    display: grid;
    grid-template-columns: minmax(130px, .7fr) 1fr;
    gap: .75rem;
}

@keyframes clincFadeLift {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes clincAmbientDrift {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
        opacity: .82;
    }

    50% {
        transform: translate3d(2%, 1%, 0) scale(1.04);
        opacity: 1;
    }

    100% {
        transform: translate3d(0, -2%, 0) scale(1.02);
        opacity: .88;
    }
}

@keyframes clincSheen {
    0%, 58% {
        transform: translateX(-140%);
    }

    76%, 100% {
        transform: translateX(140%);
    }
}

@keyframes clincSoftPulse {
    0%, 100% {
        transform: translateX(0);
        box-shadow: 0 0 0 rgba(20, 184, 166, 0);
    }

    50% {
        transform: translateX(4px);
        box-shadow: 0 12px 28px rgba(20, 184, 166, .12);
    }
}

@keyframes clincDotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(20, 184, 166, .14);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 10px rgba(20, 184, 166, .09);
    }
}

@keyframes clincBarRise {
    0%, 100% {
        transform: scaleY(.94);
        filter: saturate(1);
    }

    50% {
        transform: scaleY(1.06);
        filter: saturate(1.18);
    }
}

.clinc-public-page {
    position: relative;
    background:
        radial-gradient(circle at 5% 10%, rgba(153, 246, 228, .44), transparent 27rem),
        radial-gradient(circle at 94% 18%, rgba(124, 58, 237, .08), transparent 24rem),
        radial-gradient(circle at 50% 92%, rgba(20, 184, 166, .08), transparent 34rem),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.clinc-public-page::before {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(20, 184, 166, .12), transparent 22rem),
        radial-gradient(circle at 76% 30%, rgba(139, 92, 246, .08), transparent 20rem),
        radial-gradient(circle at 54% 72%, rgba(15, 118, 110, .07), transparent 28rem);
    animation: clincAmbientDrift 18s ease-in-out infinite alternate;
}

.clinc-public-nav,
.clinc-hero-section,
.clinc-section,
.clinc-cookie-banner,
.clinc-guide-drawer {
    position: relative;
    z-index: 1;
}

.clinc-public-nav {
    animation: clincFadeLift .55s ease both;
}

.clinc-hero-copy .clinc-eyebrow,
.clinc-hero-copy h1,
.clinc-hero-copy > p:not(.clinc-eyebrow),
.clinc-search-card,
.clinc-section-heading,
.clinc-product-card,
.clinc-plan-card,
.clinc-access-copy,
.clinc-login-card {
    animation: clincFadeLift .7s ease both;
}

.clinc-hero-copy h1 {
    animation-delay: .05s;
}

.clinc-hero-copy > p:not(.clinc-eyebrow) {
    animation-delay: .1s;
}

.clinc-search-card {
    position: relative;
    overflow: hidden;
    animation-delay: .16s;
}

.clinc-search-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, .7) 49%, transparent 61% 100%);
    transform: translateX(-140%);
    animation: clincSheen 9s ease-in-out infinite;
}

.clinc-search-card > * {
    position: relative;
    z-index: 1;
}

.clinc-search-card span,
.clinc-search-card a,
.clinc-public-nav nav a,
.clinc-ghost-button,
.clinc-outline-button,
.clinc-primary-button,
.clinc-billing-toggle button {
    will-change: transform;
}

.clinc-search-card span,
.clinc-product-card,
.clinc-plan-card {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.clinc-search-card span:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, .26);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
}

.clinc-search-card a:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 118, 110, .28);
}

.clinc-product-card:nth-child(1) {
    --card-accent: #14b8a6;
}

.clinc-product-card:nth-child(2) {
    --card-accent: #7c3aed;
}

.clinc-product-card:nth-child(3) {
    --card-accent: #0f766e;
}

.clinc-product-card::before,
.clinc-plan-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(90deg, var(--card-accent, #14b8a6), rgba(20, 184, 166, .12));
    opacity: 0;
    transition: opacity .22s ease;
}

.clinc-product-card:hover::before,
.clinc-plan-card:hover::before {
    opacity: 1;
}

.clinc-product-card:nth-child(2) .clinc-mini-team strong i {
    background: #7c3aed;
    box-shadow: 0 0 0 7px rgba(124, 58, 237, .12);
}

.clinc-product-card:nth-child(2) .clinc-mini-team strong:nth-child(2) i {
    background: #14b8a6;
}

.clinc-product-card:nth-child(2) .clinc-mini-team strong:nth-child(3) i {
    background: #f59e0b;
}

.clinc-product-card:nth-child(3) .clinc-mini-billing i:nth-child(2) {
    background: linear-gradient(180deg, #7c3aed, #0f766e);
}

.clinc-product-card:nth-child(3) .clinc-mini-billing i:nth-child(4) {
    background: linear-gradient(180deg, #2dd4bf, #0f766e);
}

.clinc-product-card:nth-child(1) {
    animation-delay: .05s;
}

.clinc-product-card:nth-child(2) {
    animation-delay: .12s;
}

.clinc-product-card:nth-child(3) {
    animation-delay: .19s;
}

.clinc-mini-agenda em {
    animation: clincSoftPulse 7s ease-in-out infinite;
}

.clinc-mini-agenda em:nth-child(3) {
    animation-delay: .8s;
}

.clinc-mini-agenda em:nth-child(4) {
    animation-delay: 1.6s;
}

.clinc-mini-team strong i {
    animation: clincDotPulse 5.5s ease-in-out infinite;
}

.clinc-mini-team strong:nth-child(2) i {
    animation-delay: .7s;
}

.clinc-mini-team strong:nth-child(3) i {
    animation-delay: 1.4s;
}

.clinc-mini-billing i {
    transform-origin: bottom;
    animation: clincBarRise 5.8s ease-in-out infinite;
}

.clinc-mini-billing i:nth-child(2) {
    animation-delay: .35s;
}

.clinc-mini-billing i:nth-child(3) {
    animation-delay: .7s;
}

.clinc-mini-billing i:nth-child(4) {
    animation-delay: 1.05s;
}

.clinc-plan-card {
    position: relative;
    overflow: hidden;
}

.clinc-plan-card:nth-child(1) {
    --card-accent: #14b8a6;
    animation-delay: .05s;
}

.clinc-plan-card:nth-child(2) {
    --card-accent: #0f766e;
    animation-delay: .12s;
}

.clinc-plan-card:nth-child(3) {
    --card-accent: #7c3aed;
    animation-delay: .19s;
}

.clinc-plan-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, .32);
    box-shadow: 0 24px 56px rgba(15, 23, 42, .1);
}

.clinc-billing-toggle button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .72);
}

.clinc-billing-toggle button.is-active:hover {
    background: var(--public-jade-dark);
}

.clinc-access-section {
    background:
        radial-gradient(circle at 80% 18%, rgba(20, 184, 166, .12), transparent 28rem),
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 250, 252, .9));
}

.clinc-cookie-banner {
    animation: clincFadeLift .42s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .clinc-public-page::before,
    .clinc-public-page *,
    .clinc-public-page *::before,
    .clinc-public-page *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1180px) {
    .clinc-public-nav {
        grid-template-columns: auto 1fr;
    }

    .clinc-public-nav nav {
        display: none;
    }

    .clinc-product-grid,
    .clinc-plan-grid,
    .clinc-access-section {
        grid-template-columns: 1fr;
    }

    .clinc-access-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .clinc-public-nav {
        top: 8px;
        width: calc(100vw - 16px);
        min-height: 64px;
        padding: 8px 10px;
        border-radius: 22px;
    }

    .clinc-public-actions .clinc-ghost-button,
    .clinc-public-actions .clinc-outline-button {
        display: none;
    }

    .clinc-hero-section {
        min-height: auto;
        padding: 2rem 1rem;
    }

    .clinc-hero-copy h1 {
        font-size: clamp(3rem, 17vw, 5.2rem);
    }

    .clinc-search-card {
        grid-template-columns: 1fr;
    }

    .clinc-search-card span,
    .clinc-search-card a {
        min-height: 112px;
    }

    .clinc-section {
        padding: 1rem;
        border-radius: 24px;
    }

    .clinc-billing-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .clinc-billing-toggle button {
        min-width: 0;
    }

    .clinc-cookie-banner {
        grid-template-columns: 1fr;
    }

    .clinc-cookie-summary,
    .clinc-cookie-actions {
        grid-template-columns: 1fr;
    }

    .clinc-cookie-dialog {
        border-radius: 24px;
    }
}

/* Final polish: cookies and guided checkout */
body.clinc-cookie-locked {
    overflow: hidden !important;
}

body.clinc-cookie-locked .clinc-public-nav,
body.clinc-cookie-locked main {
    filter: blur(18px);
    opacity: .16;
    pointer-events: none;
    user-select: none;
}

.clinc-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
}

.clinc-cookie-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(18px);
}

.clinc-cookie-dialog {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 32px));
    overflow: auto;
    display: grid;
    gap: 18px;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(20, 184, 166, .28);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .96));
    box-shadow: 0 34px 90px rgba(15, 23, 42, .28);
}

.clinc-cookie-dialog h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.clinc-cookie-dialog p {
    margin: 0;
    color: #52627a;
    font-size: 1rem;
    line-height: 1.55;
}

.clinc-cookie-summary,
.clinc-cookie-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.clinc-cookie-summary span {
    padding: 14px;
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    color: #334155;
    font-weight: 800;
}

body:has(.register-builder-v3) {
    overflow: hidden !important;
    background: radial-gradient(circle at 4% 8%, rgba(20, 184, 166, .2), transparent 26rem), #f8fafc !important;
}

.register-builder.register-builder-v3 {
    width: min(1520px, calc(100vw - 28px)) !important;
    height: min(850px, calc(100dvh - 22px)) !important;
    min-height: 620px !important;
    display: grid !important;
    grid-template-columns: minmax(320px, .38fr) minmax(0, 1fr) !important;
    gap: 16px !important;
    overflow: hidden !important;
}

.register-builder-v3 .register-builder-copy {
    height: 100% !important;
    padding: clamp(24px, 2.3vw, 42px) !important;
    overflow: hidden !important;
}

.register-builder-v3 .register-builder-copy img {
    width: 150px !important;
    max-width: 48% !important;
    height: auto !important;
    object-fit: contain !important;
}

.register-builder-v3 .register-builder-copy h2 {
    margin: auto 0 0 !important;
    font-size: clamp(2.25rem, 3.15vw, 3.8rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.register-builder-v3 .register-builder-copy p {
    max-width: 34rem !important;
    font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
    line-height: 1.55 !important;
}

.register-builder-v3 .register-builder-form.is-wizard {
    height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
    padding: 16px !important;
}

.register-builder-v3 .register-wizard-progress {
    min-height: 78px !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border-radius: 26px !important;
}

.register-builder-v3 .register-wizard-progress button {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 20px !important;
    font-size: .95rem !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section {
    min-height: 0 !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    align-content: start !important;
    gap: 20px !important;
    padding: clamp(20px, 2vw, 28px) !important;
}

.register-builder-v3 .register-form-grid.compact-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.register-builder-v3 .register-form-grid.compact-fields label:last-child:nth-child(odd) {
    grid-column: auto !important;
}

.register-builder-v3 input,
.register-builder-v3 select,
.register-builder-v3 textarea {
    min-height: 58px !important;
    font-size: 1rem !important;
}

.register-payment-layout,
.register-accompaniment-layout {
    display: grid !important;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.register-payment-copy,
.register-accompaniment-copy {
    display: grid;
    gap: 10px;
    align-content: start;
}

.register-payment-copy h2,
.register-accompaniment-copy h2 {
    font-size: clamp(2rem, 2.7vw, 3rem) !important;
    line-height: 1.02 !important;
}

.register-payment-copy [data-register-saving] {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 20px;
    background: #ecfdf5;
    color: #134e4a;
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    line-height: 1.25;
}

.register-term-grid-four,
.register-accompaniment-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.register-accompaniment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.register-builder-v3 .register-term-card span,
.register-builder-v3 .register-extra-card {
    min-height: 126px !important;
    padding: 18px !important;
    border-radius: 24px !important;
}

.register-builder-v3 .register-term-card strong,
.register-builder-v3 .register-extra-card strong {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.register-builder-v3 .register-term-card small,
.register-builder-v3 .register-term-card em,
.register-builder-v3 .register-extra-card small,
.register-builder-v3 .register-extra-card em {
    white-space: normal !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
}

.register-free-card {
    background: linear-gradient(180deg, #f0fdfa, #ffffff) !important;
}

.register-builder-v3 .legal-consent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.register-builder-v3 .legal-consent-card {
    min-height: 300px !important;
    padding: 18px !important;
    border-radius: 24px !important;
}

.register-builder-v3 .legal-short-copy {
    font-size: .92rem !important;
    line-height: 1.45 !important;
}

.register-builder-v3 .register-wizard-actions {
    min-height: 78px !important;
    padding: 10px 14px !important;
}

.register-builder-v3 .register-submit-row {
    min-height: 88px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
}

.register-builder-v3 .form-link {
    margin: 0 !important;
    text-align: center !important;
}

@media (max-width: 1180px) {
    body:has(.register-builder-v3) {
        overflow: auto !important;
    }

    .register-builder.register-builder-v3 {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .register-builder-v3 .register-builder-form.is-wizard {
        min-height: 760px !important;
    }

    .register-payment-layout,
    .register-accompaniment-layout,
    .register-builder-v3 .register-form-grid.compact-fields {
        grid-template-columns: 1fr !important;
    }

    .register-term-grid-four,
    .register-accompaniment-grid,
    .register-builder-v3 .legal-consent-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 720px) {
    .register-term-grid-four,
    .register-accompaniment-grid,
    .register-builder-v3 .legal-consent-grid,
    .clinc-cookie-summary,
    .clinc-cookie-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Checkout tightening pass: no overlaps at 90-100% browser zoom */
.register-builder-v3 .register-payment-layout {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
}

.register-builder-v3 .register-payment-copy [data-register-saving] {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    margin-top: 6px !important;
    padding: 12px 14px !important;
    font-size: .98rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.register-builder-v3 .register-term-grid-four {
    align-items: stretch !important;
}

.register-builder-v3 .register-term-card span {
    display: grid !important;
    gap: 12px !important;
    min-height: 132px !important;
}

.register-builder-v3 .register-term-card strong {
    color: #0f172a !important;
}

.register-builder-v3 .register-term-card small,
.register-builder-v3 .register-term-card em {
    color: #52627a !important;
}

.register-builder-v3 .register-accompaniment-section .register-accompaniment-layout {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) !important;
}

.register-builder-v3 .register-accompaniment-section .register-extra-card {
    display: grid !important;
    gap: 10px !important;
    min-height: 154px !important;
}

.register-builder-v3 .register-accompaniment-section .register-extra-card em {
    align-self: end !important;
    color: #0f766e !important;
    font-weight: 900 !important;
}

.register-builder-v3 .register-form-grid.compact-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.register-builder-v3 .register-form-grid.compact-fields label {
    display: grid !important;
    gap: 8px !important;
}

@media (max-height: 760px) and (min-width: 1181px) {
    .register-builder.register-builder-v3 {
        height: calc(100dvh - 12px) !important;
        width: min(1500px, calc(100vw - 18px)) !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(2rem, 2.7vw, 3.1rem) !important;
    }

    .register-builder-form.is-wizard .register-section.is-active {
        padding: 18px !important;
        gap: 14px !important;
    }

    .register-builder-v3 .register-wizard-progress {
        min-height: 66px !important;
    }

    .register-builder-v3 .register-wizard-progress button {
        min-height: 48px !important;
    }

    .register-builder-v3 .register-term-card span,
    .register-builder-v3 .register-extra-card {
        min-height: 112px !important;
    }
}

/* Register checkout 2.0: compact, readable and no clipped inner panels */
body:has(.register-builder-v3) .main {
    padding: 10px !important;
}

.register-builder.register-builder-v3 {
    max-height: calc(100dvh - 20px) !important;
}

.register-builder-v3 .register-builder-copy {
    display: grid !important;
    align-content: center !important;
    gap: clamp(22px, 3vw, 42px) !important;
}

.register-builder-v3 .register-builder-copy img {
    width: clamp(132px, 10vw, 170px) !important;
}

.register-builder-v3 .register-builder-copy h2 {
    max-width: 9.8ch !important;
    margin: 0 !important;
}

.register-builder-v3 .register-builder-form.is-wizard {
    border-radius: 30px !important;
}

.register-builder-v3 .register-wizard-progress {
    grid-template-columns: repeat(6, minmax(92px, 1fr)) !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.register-builder-v3 .register-heading-row h2,
.register-builder-v3 .register-section > div > h2 {
    font-size: clamp(2rem, 2.9vw, 3.35rem) !important;
    line-height: 1.03 !important;
}

.register-builder-v3 .register-plan-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.register-builder-v3 .register-plan-card span {
    min-height: 290px !important;
    display: grid !important;
    grid-template-rows: auto auto auto 1fr !important;
    align-content: start !important;
    gap: 16px !important;
    padding: 24px !important;
    border-radius: 28px !important;
}

.register-builder-v3 .register-plan-card strong {
    font-size: clamp(1.55rem, 1.7vw, 2rem) !important;
}

.register-builder-v3 .register-plan-card em {
    font-size: clamp(1.55rem, 2vw, 2.35rem) !important;
    line-height: 1 !important;
}

.register-builder-v3 .register-plan-card b {
    font-size: .95rem !important;
    line-height: 1.45 !important;
    color: #52627a !important;
    text-transform: none !important;
}

.register-builder-v3 .register-extra-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.register-builder-v3 .register-extra-card {
    min-height: 128px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: 1fr auto !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
}

.register-builder-v3 .register-extra-card input {
    grid-row: span 2 !important;
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
}

.register-builder-v3 .register-extra-card em {
    grid-column: 2 !important;
    align-self: end !important;
}

.register-builder-v3 .register-payment-layout {
    grid-template-columns: minmax(240px, 290px) minmax(0, 1fr) !important;
    align-items: stretch !important;
}

.register-builder-v3 .register-payment-copy {
    padding: 18px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, #f8fffd, #eefcf8) !important;
}

.register-builder-v3 .register-payment-copy h2 {
    font-size: clamp(2.1rem, 2.6vw, 3rem) !important;
}

.register-builder-v3 .register-term-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-content: center !important;
}

.register-builder-v3 .register-term-card span {
    min-height: 154px !important;
    padding: 20px !important;
}

.register-builder-v3 .register-term-card strong {
    font-size: 1.08rem !important;
}

.register-builder-v3 .register-term-card small {
    font-size: .88rem !important;
    font-weight: 900 !important;
    color: #0f766e !important;
}

.register-builder-v3 .register-accompaniment-layout {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
    align-items: stretch !important;
}

.register-builder-v3 .register-accompaniment-copy {
    padding: 18px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 26px !important;
    background: #f8fafc !important;
}

.register-builder-v3 .register-accompaniment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: center !important;
}

.register-builder-v3 .register-accompaniment-section .register-extra-card {
    min-height: 166px !important;
}

.register-builder-v3 .legal-consent-section.legal-consent-compact {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.register-builder-v3 .legal-consent-grid {
    align-items: stretch !important;
}

.register-builder-v3 .legal-consent-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto auto !important;
    gap: 14px !important;
}

.register-builder-v3 .legal-check {
    align-items: flex-start !important;
    padding: 14px !important;
    border-radius: 18px !important;
}

.register-builder-v3 .legal-check input {
    min-height: 0 !important;
    width: 22px !important;
    height: 22px !important;
}

.legal-modal-panel {
    width: min(980px, calc(100vw - 36px)) !important;
    max-height: min(760px, calc(100dvh - 36px)) !important;
    overflow: hidden !important;
}

.legal-scroll-box {
    max-height: min(460px, calc(100dvh - 250px)) !important;
    overflow: auto !important;
}

@media (max-width: 1320px) and (min-width: 1181px) {
    .register-builder.register-builder-v3 {
        grid-template-columns: 300px minmax(0, 1fr) !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: 2.55rem !important;
    }

    .register-builder-v3 .register-plan-card span {
        min-height: 260px !important;
        padding: 20px !important;
    }

    .register-builder-v3 .register-term-card span {
        min-height: 138px !important;
        padding: 16px !important;
    }
}

@media (max-height: 820px) and (min-width: 1181px) {
    .register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
        padding: 16px !important;
        gap: 12px !important;
    }

    .register-builder-v3 .register-heading-row h2,
    .register-builder-v3 .register-section > div > h2 {
        font-size: clamp(1.8rem, 2.4vw, 2.7rem) !important;
    }

    .register-builder-v3 .register-builder-copy {
        padding: 24px !important;
        gap: 24px !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(2rem, 2.5vw, 2.9rem) !important;
    }

    .register-builder-v3 .register-builder-copy p {
        font-size: 1rem !important;
    }

    .register-builder-v3 .register-plan-card span {
        min-height: 230px !important;
        gap: 12px !important;
    }

    .register-builder-v3 .register-extra-card,
    .register-builder-v3 .register-term-card span {
        min-height: 112px !important;
    }

    .register-builder-v3 .register-accompaniment-section .register-extra-card {
        min-height: 128px !important;
    }

    .register-builder-v3 .legal-consent-card {
        padding: 14px !important;
    }

    .register-builder-v3 .legal-short-copy {
        font-size: .84rem !important;
    }
}

/* Register checkout final fit: 5-step wizard with plan + permanence together */
body:has(.register-builder-v3) {
    overflow: hidden !important;
}

body:has(.register-builder-v3) .app-shell,
body:has(.register-builder-v3) .main,
body:has(.register-builder-v3) main {
    min-height: 100dvh !important;
    overflow: hidden !important;
}

body:has(.register-builder-v3) .main {
    padding: clamp(10px, 1.4vw, 18px) !important;
}

.register-builder.register-builder-v3 {
    display: grid !important;
    grid-template-columns: minmax(280px, 32vw) minmax(0, 1fr) !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
    min-height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    align-items: stretch !important;
}

.register-builder-v3 .register-builder-copy {
    min-height: 0 !important;
    padding: clamp(28px, 4vw, 58px) !important;
    border-radius: 30px !important;
    gap: clamp(18px, 3vh, 34px) !important;
}

.register-builder-v3 .register-builder-copy img {
    width: clamp(130px, 11vw, 180px) !important;
}

.register-builder-v3 .register-builder-copy h2 {
    max-width: 10ch !important;
    font-size: clamp(2.15rem, 4.15vw, 4.8rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
}

.register-builder-v3 .register-builder-copy p {
    max-width: 30ch !important;
    font-size: clamp(1rem, 1.35vw, 1.35rem) !important;
    line-height: 1.45 !important;
}

.register-builder-v3 .register-builder-form.is-wizard {
    min-width: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: clamp(12px, 1.4vw, 20px) !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
}

.register-builder-v3 .register-wizard-progress {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 74px !important;
    padding: 6px !important;
    border-radius: 24px !important;
}

.register-builder-v3 .register-wizard-progress button {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 20px !important;
    font-size: .92rem !important;
}

.register-builder-v3 .register-wizard-progress button span {
    display: block !important;
    font-size: .86rem !important;
    margin-bottom: 3px !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section {
    min-width: 0 !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: clamp(16px, 1.7vw, 24px) !important;
    border-radius: 28px !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
    align-content: start !important;
}

.register-builder-v3 .register-heading-row {
    gap: 14px !important;
    align-items: start !important;
}

.register-builder-v3 .register-heading-row h2,
.register-builder-v3 .register-section > div > h2 {
    font-size: clamp(1.85rem, 2.45vw, 2.8rem) !important;
    line-height: 1.05 !important;
}

.register-builder-v3 .register-heading-row [data-register-total] {
    min-width: 180px !important;
    padding: 18px 22px !important;
    border-radius: 22px !important;
    text-align: center !important;
    background: #ecfdf5 !important;
    color: #134e4a !important;
    font-size: clamp(1.1rem, 1.35vw, 1.35rem) !important;
}

.register-builder-v3 .register-form-grid.compact-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
}

.register-builder-v3 .register-form-grid.compact-fields label,
.register-builder-v3 .register-form-grid.compact-fields label:last-child:nth-child(odd) {
    grid-column: auto !important;
    min-width: 0 !important;
}

.register-builder-v3 .register-form-grid.compact-fields input {
    width: 100% !important;
    height: clamp(50px, 6.4vh, 62px) !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    font-size: 1rem !important;
}

.register-builder-v3 .register-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.register-builder-v3 .register-plan-card span {
    min-height: clamp(205px, 26vh, 250px) !important;
    padding: clamp(16px, 1.55vw, 22px) !important;
    gap: 10px !important;
    border-radius: 24px !important;
}

.register-builder-v3 .register-plan-card small,
.register-builder-v3 .register-extra-card small,
.register-builder-v3 .legal-consent-card small {
    font-size: .78rem !important;
    line-height: 1.25 !important;
}

.register-builder-v3 .register-plan-card strong {
    font-size: clamp(1.35rem, 1.5vw, 1.8rem) !important;
    line-height: 1.05 !important;
}

.register-builder-v3 .register-plan-card em {
    font-size: clamp(1.45rem, 1.75vw, 2.05rem) !important;
    line-height: 1.05 !important;
}

.register-builder-v3 .register-plan-card b {
    font-size: .9rem !important;
    line-height: 1.35 !important;
}

.register-builder-v3 .register-plan-period {
    display: grid !important;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) minmax(150px, 190px) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 12px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #f8fffd, #f1f5f9) !important;
}

.register-builder-v3 .register-plan-period-copy {
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
}

.register-builder-v3 .register-plan-period-copy h3 {
    margin: 0 !important;
    font-size: clamp(1.15rem, 1.35vw, 1.55rem) !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
}

.register-builder-v3 .register-plan-period-copy p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
}

.register-builder-v3 .register-term-grid-four {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.register-builder-v3 .register-term-card span {
    min-height: 100px !important;
    height: 100% !important;
    padding: 14px !important;
    gap: 5px !important;
    border-radius: 18px !important;
}

.register-builder-v3 .register-term-card strong {
    font-size: .98rem !important;
    line-height: 1.15 !important;
}

.register-builder-v3 .register-term-card small,
.register-builder-v3 .register-term-card em {
    font-size: .72rem !important;
    line-height: 1.22 !important;
}

.register-builder-v3 .register-period-saving {
    display: grid !important;
    place-items: center !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #ccfbf1 !important;
    color: #134e4a !important;
    text-align: center !important;
    font-size: clamp(.95rem, 1.05vw, 1.12rem) !important;
    line-height: 1.25 !important;
}

.register-builder-v3 .register-extra-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.register-builder-v3 .register-extra-card {
    min-height: 116px !important;
    padding: 16px !important;
    border-radius: 20px !important;
}

.register-builder-v3 .register-accompaniment-layout {
    grid-template-columns: minmax(240px, 285px) minmax(0, 1fr) !important;
    gap: 14px !important;
}

.register-builder-v3 .register-accompaniment-section .register-extra-card {
    min-height: 132px !important;
}

.register-builder-v3 .legal-consent-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.register-builder-v3 .legal-consent-card {
    min-height: 330px !important;
    padding: 18px !important;
    border-radius: 24px !important;
}

.register-builder-v3 .legal-short-copy {
    font-size: .98rem !important;
    line-height: 1.45 !important;
}

.register-builder-v3 .register-wizard-actions,
.register-builder-v3 .register-submit-row {
    padding: 10px !important;
    border-radius: 22px !important;
}

.register-builder-v3 .register-wizard-actions .button,
.register-builder-v3 .register-submit-row .button {
    min-height: 58px !important;
    padding: 0 24px !important;
    border-radius: 18px !important;
}

.register-builder-v3 .register-submit-row {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 36%) !important;
    align-items: center !important;
}

.register-builder-v3 .register-submit-row > div {
    min-width: 0 !important;
}

@media (max-width: 1280px) {
    .register-builder.register-builder-v3 {
        grid-template-columns: minmax(250px, 30vw) minmax(0, 1fr) !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(2rem, 3.6vw, 3.7rem) !important;
    }

    .register-builder-v3 .register-plan-period {
        grid-template-columns: 1fr !important;
    }

    .register-builder-v3 .register-period-saving {
        min-height: 54px !important;
    }
}

@media (max-height: 820px) and (min-width: 900px) {
    .register-builder-v3 .register-builder-copy {
        padding: 24px !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(1.9rem, 3vw, 3.1rem) !important;
    }

    .register-builder-v3 .register-builder-copy p {
        font-size: 1rem !important;
    }

    .register-builder-v3 .register-plan-card span {
        min-height: 190px !important;
        padding: 16px !important;
    }

    .register-builder-v3 .register-plan-card b {
        font-size: .82rem !important;
    }

    .register-builder-v3 .register-term-card span {
        min-height: 86px !important;
        padding: 12px !important;
    }

    .register-builder-v3 .legal-consent-card {
        min-height: 285px !important;
    }
}

@media (max-width: 900px) {
    body:has(.register-builder-v3),
    body:has(.register-builder-v3) .app-shell,
    body:has(.register-builder-v3) .main,
    body:has(.register-builder-v3) main {
        overflow: auto !important;
    }

    .register-builder.register-builder-v3 {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .register-builder-v3 .register-builder-form.is-wizard {
        overflow: visible !important;
    }

    .register-builder-v3 .register-form-grid.compact-fields,
    .register-builder-v3 .register-plan-grid,
    .register-builder-v3 .register-extra-grid,
    .register-builder-v3 .legal-consent-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Register checkout final lock: this must stay at the end of the stylesheet */
body:has(.register-builder-v3) {
    overflow: hidden !important;
    background:
        radial-gradient(circle at 0 0, rgba(20, 184, 166, .16), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #f1f5f9 100%) !important;
}

body:has(.register-builder-v3) .main {
    padding: 10px !important;
}

.register-builder.register-builder-v3 {
    width: min(100%, 1760px) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(270px, 30vw) minmax(0, 1fr) !important;
    gap: 16px !important;
    min-height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
}

.register-builder-v3 .register-builder-copy {
    justify-content: center !important;
    padding: clamp(22px, 3.4vw, 48px) !important;
}

.register-builder-v3 .register-builder-copy h2 {
    max-width: 11ch !important;
    font-size: clamp(1.95rem, 3.25vw, 4rem) !important;
}

.register-builder-v3 .register-builder-copy p {
    max-width: 30ch !important;
    font-size: clamp(.98rem, 1.15vw, 1.18rem) !important;
}

.register-builder-v3 .register-builder-form.is-wizard {
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    padding: 10px !important;
}

.register-builder-v3 .register-wizard-progress {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 64px !important;
    padding: 6px !important;
}

.register-builder-v3 .register-wizard-progress button {
    min-height: 50px !important;
    padding: 7px !important;
    font-size: .86rem !important;
}

.register-builder-v3 .register-builder-form.is-wizard .register-section.is-active {
    padding: 14px !important;
    gap: 12px !important;
    overflow: visible !important;
}

.register-builder-v3 .register-heading-row h2,
.register-builder-v3 .register-section > div > h2 {
    font-size: clamp(1.6rem, 1.9vw, 2.25rem) !important;
}

.register-builder-v3 .register-form-grid.compact-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
}

.register-builder-v3 .register-form-grid.compact-fields label {
    font-size: .84rem !important;
    gap: 6px !important;
}

.register-builder-v3 .register-form-grid.compact-fields input {
    height: clamp(46px, 5.4vh, 56px) !important;
}

.register-builder-v3 .register-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.register-builder-v3 .register-plan-card span {
    min-height: clamp(162px, 19.5vh, 205px) !important;
    padding: 14px !important;
    gap: 7px !important;
}

.register-builder-v3 .register-plan-card strong {
    font-size: clamp(1.2rem, 1.25vw, 1.5rem) !important;
}

.register-builder-v3 .register-plan-card em {
    font-size: clamp(1.25rem, 1.45vw, 1.7rem) !important;
}

.register-builder-v3 .register-plan-card b {
    font-size: .8rem !important;
}

.register-builder-v3 .register-plan-period {
    grid-template-columns: minmax(175px, 220px) minmax(0, 1fr) minmax(132px, 165px) !important;
    padding: 10px !important;
    gap: 10px !important;
}

.register-builder-v3 .register-plan-period-copy h3 {
    font-size: 1.12rem !important;
}

.register-builder-v3 .register-plan-period-copy p {
    font-size: .8rem !important;
}

.register-builder-v3 .register-term-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.register-builder-v3 .register-term-card span {
    min-height: 78px !important;
    padding: 10px !important;
}

.register-builder-v3 .register-term-card strong {
    font-size: .9rem !important;
}

.register-builder-v3 .register-term-card small,
.register-builder-v3 .register-term-card em {
    font-size: .66rem !important;
    line-height: 1.18 !important;
}

.register-builder-v3 .register-period-saving {
    min-height: 78px !important;
    font-size: .88rem !important;
    padding: 10px !important;
}

.register-builder-v3 .register-extra-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.register-builder-v3 .register-extra-card {
    min-height: 96px !important;
    padding: 14px !important;
}

.register-builder-v3 .register-accompaniment-layout {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    gap: 12px !important;
}

.register-builder-v3 .legal-consent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.register-builder-v3 .legal-consent-card {
    min-height: 245px !important;
    padding: 15px !important;
    gap: 10px !important;
}

.register-builder-v3 .legal-short-copy {
    font-size: .88rem !important;
    line-height: 1.36 !important;
}

.register-builder-v3 .legal-check {
    padding: 11px !important;
    font-size: .76rem !important;
}

.register-builder-v3 .register-wizard-actions {
    min-height: 68px !important;
    padding: 8px !important;
}

.register-builder-v3 .register-submit-row {
    min-height: 78px !important;
    padding: 9px 12px !important;
}

.register-builder-v3 .register-wizard-actions .button,
.register-builder-v3 .register-submit-row .button {
    min-height: 50px !important;
}

@media (max-height: 800px) and (min-width: 901px) {
    .register-builder-v3 .register-builder-copy {
        padding: 18px !important;
    }

    .register-builder-v3 .register-builder-copy img {
        width: 126px !important;
    }

    .register-builder-v3 .register-builder-copy h2 {
        font-size: clamp(1.75rem, 2.65vw, 3rem) !important;
    }

    .register-builder-v3 .register-plan-card span {
        min-height: 145px !important;
    }

    .register-builder-v3 .register-plan-period {
        grid-template-columns: 1fr !important;
    }

    .register-builder-v3 .register-plan-period-copy {
        grid-template-columns: auto 1fr !important;
        align-items: end !important;
        gap: 4px 12px !important;
    }

    .register-builder-v3 .register-period-saving {
        min-height: 48px !important;
    }

    .register-builder-v3 .legal-consent-card {
        min-height: 215px !important;
    }
}

/* Register checkout v4 */
body:has(.register-builder-v4) {
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 0 0, rgba(20, 184, 166, .15), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(99, 102, 241, .08), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #f1f5f9 100%) !important;
}

body:has(.register-builder-v4) .main {
    padding: 12px !important;
}

.register-builder.register-builder-v4 {
    width: min(100%, 1760px);
    min-height: calc(100dvh - 24px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.register-builder-v4 .checkout-rail {
    position: sticky;
    top: 12px;
    align-self: start;
    min-height: calc(100dvh - 24px);
    padding: 22px 18px;
    border: 1px solid #dbe7f0;
    border-radius: 24px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

.register-builder-v4 .checkout-rail-brand {
    display: flex;
    align-items: center;
    width: 148px;
    height: 44px;
}

.register-builder-v4 .checkout-rail-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.register-builder-v4 .checkout-rail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    align-content: start;
    gap: 10px;
}

.register-builder-v4 .checkout-rail-list li {
    min-height: 84px;
    padding: 14px 12px;
    border: 1px solid transparent;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
    color: #475569;
    background: transparent;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.register-builder-v4 .checkout-rail-list li > span {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #0f766e;
    background: #ecfdf5;
    font-weight: 900;
}

.register-builder-v4 .checkout-rail-list li strong {
    display: block;
    color: #0f172a;
    font-size: .96rem;
    line-height: 1.2;
}

.register-builder-v4 .checkout-rail-list li small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

.register-builder-v4 .checkout-rail-list li.is-active {
    border-color: #99f6e4;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    box-shadow: 0 16px 34px rgba(20, 184, 166, .12);
    transform: translateX(2px);
}

.register-builder-v4 .checkout-rail-list li.is-complete > span {
    color: #ffffff;
    background: #0f766e;
}

.register-builder-v4 .checkout-rail-note {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: .82rem;
    line-height: 1.35;
}

.register-builder-v4 .checkout-rail-note strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
}

.register-builder-v4 .checkout-form-v4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 14px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.checkout-form-v4 .register-wizard-progress,
.checkout-form-v4 > .register-section,
.checkout-form-v4 > .register-wizard-actions,
.checkout-form-v4 > .form-link {
    grid-column: 1;
}

.checkout-form-v4 > .checkout-summary-card {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 12px;
    align-self: start;
}

.checkout-form-v4 .register-wizard-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid #dbe7f0;
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .06);
}

.checkout-form-v4 .register-wizard-progress button {
    min-height: 68px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.checkout-form-v4 .register-wizard-progress button span,
.checkout-form-v4 .register-wizard-progress button strong {
    display: block;
}

.checkout-form-v4 .register-wizard-progress button span {
    margin-bottom: 6px;
    font-size: .92rem;
    font-weight: 700;
}

.checkout-form-v4 .register-wizard-progress button strong {
    font-size: .96rem;
}

.checkout-form-v4 .register-wizard-progress button.is-active {
    border-color: #5eead4;
    background: #ecfdf5;
    color: #0f766e;
}

.checkout-form-v4 .register-wizard-progress button.is-complete {
    color: #0f766e;
}

.checkout-form-v4.is-wizard > .register-section {
    display: none;
}

.checkout-form-v4.is-wizard > .register-section.is-active {
    display: grid;
}

.checkout-form-v4 > .register-section {
    min-height: 560px;
    padding: 24px;
    border: 1px solid #dbe7f0;
    border-radius: 26px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .07);
    align-content: start;
    gap: 22px;
    overflow: hidden;
}

.checkout-form-v4 .register-heading-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.checkout-form-v4 .register-heading-row h2 {
    margin: 6px 0 0;
    font-size: clamp(2rem, 3vw, 3.55rem);
    line-height: .98;
    letter-spacing: 0;
    font-weight: 750;
    color: #0f172a;
}

.checkout-form-v4 .register-heading-row > strong,
.checkout-form-v4 [data-register-total] {
    min-width: 190px;
    padding: 18px 24px;
    border-radius: 24px;
    background: #ecfdf5;
    color: #134e4a;
    text-align: center;
    font-size: 1.45rem;
    line-height: 1.15;
}

.checkout-form-v4 .register-form-grid.compact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.checkout-form-v4 .register-form-grid label,
.checkout-form-v4 .register-form-grid.compact-fields label,
.checkout-form-v4 .register-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #475569;
    font-size: .86rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.checkout-form-v4 input,
.checkout-form-v4 select,
.checkout-form-v4 textarea {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 12px 15px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.checkout-form-v4 input:focus,
.checkout-form-v4 select:focus,
.checkout-form-v4 textarea:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .14);
}

.checkout-form-v4 .register-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.checkout-form-v4 .register-plan-card,
.checkout-form-v4 .register-module-card,
.checkout-form-v4 .register-support-card {
    min-height: 220px;
    padding: 18px;
    border: 1px solid #dbe7f0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.checkout-form-v4 .register-plan-card:has(input:checked),
.checkout-form-v4 .register-module-card.is-selected,
.checkout-form-v4 .register-support-card.is-selected,
.checkout-form-v4 .register-term-card:has(input:checked) {
    border-color: #14b8a6;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    box-shadow: 0 22px 46px rgba(20, 184, 166, .14);
}

.checkout-form-v4 .register-plan-card:hover,
.checkout-form-v4 .register-module-card:hover,
.checkout-form-v4 .register-support-card:hover,
.checkout-form-v4 .register-term-card:hover {
    transform: translateY(-2px);
}

.checkout-form-v4 .register-plan-card strong {
    color: #0f172a;
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.checkout-form-v4 .register-plan-card b {
    display: block;
    margin: 16px 0 10px;
    color: #0f172a;
    font-size: clamp(1.7rem, 2.6vw, 2.65rem);
    line-height: 1;
}

.checkout-form-v4 .register-plan-card span,
.checkout-form-v4 .register-plan-card p,
.checkout-form-v4 .register-module-card p,
.checkout-form-v4 .register-support-card p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.42;
}

.checkout-form-v4 .register-plan-period {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.45fr);
    gap: 16px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #dbe7f0;
    border-radius: 24px;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}

.checkout-form-v4 .register-plan-period-copy {
    display: grid;
    align-content: center;
    gap: 6px;
}

.checkout-form-v4 .register-plan-period-copy h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.checkout-form-v4 .register-plan-period-copy p {
    margin: 0;
    color: #64748b;
    font-size: .96rem;
    line-height: 1.45;
}

.checkout-form-v4 .register-term-grid-four,
.checkout-form-v4 .register-term-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.checkout-form-v4 .register-term-card {
    min-height: 118px;
    padding: 16px;
    border: 1px solid #dbe7f0;
    border-radius: 20px;
    background: #ffffff;
    color: #0f172a;
    display: grid;
    align-content: center;
    gap: 8px;
    cursor: pointer;
}

.checkout-form-v4 .register-term-card strong,
.checkout-form-v4 .register-term-card small {
    display: block;
    overflow-wrap: anywhere;
}

.checkout-form-v4 .register-term-card strong {
    font-size: 1rem;
    line-height: 1.15;
}

.checkout-form-v4 .register-term-card small {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
}

.checkout-form-v4 .register-period-saving {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    background: #ccfbf1;
    color: #134e4a;
    font-size: .98rem;
}

.checkout-form-v4 .register-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.checkout-form-v4 .register-accompaniment-layout {
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(0, 1fr);
    gap: 18px;
}

.checkout-form-v4 .register-support-grid,
.checkout-form-v4 .legal-consent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.checkout-form-v4 .legal-consent-card {
    min-height: 255px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    display: grid;
    align-content: start;
    gap: 12px;
}

.checkout-form-v4 .legal-check {
    margin-top: auto;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid #dbe7f0;
    border-radius: 16px;
    background: #f8fafc;
    color: #334155;
    font-size: .84rem;
    line-height: 1.32;
}

.checkout-form-v4 .register-wizard-actions {
    min-height: 86px;
    padding: 12px;
    border: 1px solid #dbe7f0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.checkout-form-v4 .register-wizard-actions .button,
.checkout-form-v4 .checkout-summary-submit {
    min-height: 58px;
    border-radius: 16px;
    font-size: 1rem;
}

.checkout-form-v4 .checkout-summary-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid #dbe7f0;
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .09);
}

.checkout-form-v4 .checkout-summary-title {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
}

.checkout-form-v4 .checkout-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
}

.checkout-form-v4 .checkout-summary-icon svg {
    width: 26px;
    height: 26px;
}

.checkout-form-v4 .checkout-summary-title strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.35;
}

.checkout-form-v4 .checkout-summary-box,
.checkout-form-v4 .checkout-summary-list,
.checkout-form-v4 .checkout-summary-total {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

.checkout-form-v4 .checkout-summary-box {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.checkout-form-v4 .checkout-summary-box small,
.checkout-form-v4 .checkout-summary-list span,
.checkout-form-v4 .checkout-summary-total span {
    color: #64748b;
    font-weight: 800;
}

.checkout-form-v4 .checkout-summary-box strong {
    color: #0f172a;
    font-size: 1.25rem;
}

.checkout-form-v4 .checkout-summary-list {
    display: grid;
}

.checkout-form-v4 .checkout-summary-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.checkout-form-v4 .checkout-summary-list div:last-child {
    border-bottom: 0;
}

.checkout-form-v4 .checkout-summary-list strong {
    color: #0f172a;
    text-align: right;
}

.checkout-form-v4 .checkout-summary-total {
    display: grid;
    gap: 8px;
    padding: 18px;
    background: #0f172a;
}

.checkout-form-v4 .checkout-summary-total span {
    color: #cbd5e1;
}

.checkout-form-v4 .checkout-summary-total strong {
    color: #ffffff;
    font-size: 1.65rem;
}

.checkout-form-v4 .checkout-summary-submit:disabled {
    cursor: not-allowed;
    opacity: .58;
    filter: grayscale(.2);
}

.checkout-form-v4 .checkout-summary-safe {
    color: #64748b;
    text-align: center;
    font-weight: 700;
}

.checkout-form-v4 > .form-link {
    justify-self: center;
    color: #0f766e;
    font-weight: 900;
}

@media (max-width: 1380px) {
    .register-builder.register-builder-v4 {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .register-builder-v4 .checkout-form-v4 {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    }

    .checkout-form-v4 .register-plan-card,
    .checkout-form-v4 .register-module-card,
    .checkout-form-v4 .register-support-card {
        min-height: 200px;
        padding: 16px;
    }
}

@media (max-width: 1180px) {
    .register-builder.register-builder-v4 {
        grid-template-columns: 1fr;
    }

    .register-builder-v4 .checkout-rail {
        position: static;
        min-height: auto;
        grid-template-rows: auto auto;
    }

    .register-builder-v4 .checkout-rail-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .register-builder-v4 .checkout-rail-list li {
        grid-template-columns: 1fr;
        min-height: 108px;
    }

    .register-builder-v4 .checkout-rail-note {
        display: none;
    }

    .register-builder-v4 .checkout-form-v4 {
        grid-template-columns: 1fr;
    }

    .checkout-form-v4 > .checkout-summary-card {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }
}

@media (max-width: 820px) {
    body:has(.register-builder-v4) .main {
        padding: 8px !important;
    }

    .register-builder-v4 .checkout-rail-list,
    .checkout-form-v4 .register-wizard-progress,
    .checkout-form-v4 .register-plan-grid,
    .checkout-form-v4 .register-module-grid,
    .checkout-form-v4 .register-support-grid,
    .checkout-form-v4 .legal-consent-grid,
    .checkout-form-v4 .register-form-grid.compact-fields,
    .checkout-form-v4 .register-plan-period,
    .checkout-form-v4 .register-accompaniment-layout {
        grid-template-columns: 1fr;
    }

    .checkout-form-v4 .register-term-grid-four,
    .checkout-form-v4 .register-term-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checkout-form-v4 > .register-section {
        min-height: auto;
        padding: 18px;
    }
}

/* Checkout SaaS v4 final polish: locked proportions for 90-100% browser zoom. */
body:has(.register-builder-v4) {
    overflow-x: hidden;
}

.register-builder.register-builder-v4 {
    width: min(1800px, calc(100vw - 28px));
    margin: 18px auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.register-builder-v4 .checkout-rail {
    position: sticky;
    top: 14px;
    min-height: calc(100vh - 36px);
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #dbe7f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

.register-builder-v4 .checkout-rail-brand img {
    width: 136px;
    height: auto;
    display: block;
}

.register-builder-v4 .checkout-rail-list {
    display: grid;
    align-content: start;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.register-builder-v4 .checkout-rail-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 14px;
    border-radius: 18px;
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
}

.register-builder-v4 .checkout-rail-list li > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #0f766e;
    font-size: 1rem;
    font-weight: 900;
}

.register-builder-v4 .checkout-rail-list li strong {
    display: block;
    color: #0f172a;
    font-size: .98rem;
    line-height: 1.15;
}

.register-builder-v4 .checkout-rail-list li small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

.register-builder-v4 .checkout-rail-list li.is-active {
    background: linear-gradient(135deg, #ecfdf5, #f8fafc);
    border-color: #99f6e4;
    box-shadow: 0 16px 34px rgba(20, 184, 166, .12);
}

.register-builder-v4 .checkout-rail-list li.is-active > span,
.register-builder-v4 .checkout-rail-list li.is-complete > span {
    background: #0f766e;
    color: #ffffff;
}

.register-builder-v4 .checkout-rail-note {
    border-radius: 18px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: .88rem;
    line-height: 1.45;
}

.register-builder-v4 .checkout-rail-note strong {
    display: block;
    color: #0f172a;
    font-size: .95rem;
    margin-bottom: 5px;
}

.register-builder-v4 .checkout-form-v4 {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.checkout-form-v4 .register-wizard-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
    border: 1px solid #dbe7f0;
    background: #f8fafc;
}

.checkout-form-v4 .register-wizard-progress button {
    min-height: 64px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: #475569;
    font-weight: 900;
    font-size: .94rem;
}

.checkout-form-v4 .register-wizard-progress button span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: .9rem;
    font-weight: 800;
}

.checkout-form-v4 .register-wizard-progress button.is-active {
    border-color: #5eead4;
    background: #ecfdf5;
    color: #0f766e;
}

.checkout-form-v4 > .register-section {
    grid-column: 1;
    min-height: 540px;
    padding: 26px;
    border-radius: 26px;
    border: 1px solid #dbe7f0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .06);
    overflow: visible;
}

.checkout-form-v4 .register-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.checkout-form-v4 .register-heading-row h2,
.checkout-form-v4 > .register-section > div:first-child h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 3.2vw, 3.15rem);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 800;
}

.checkout-form-v4 .eyebrow {
    display: block;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.checkout-form-v4 .register-heading-row > strong {
    min-width: 200px;
    padding: 18px 22px;
    border-radius: 22px;
    background: #ecfdf5;
    color: #134e4a;
    text-align: center;
    font-size: 1.45rem;
    white-space: nowrap;
}

.checkout-form-v4 .register-form-grid.compact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.checkout-form-v4 label {
    min-width: 0;
    color: #475569;
    font-size: .88rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.checkout-form-v4 input,
.checkout-form-v4 select,
.checkout-form-v4 textarea {
    width: 100%;
    min-height: 58px;
    margin-top: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    padding: 13px 15px;
}

.checkout-form-v4 input:focus,
.checkout-form-v4 select:focus,
.checkout-form-v4 textarea:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .14);
    outline: none;
}

.checkout-form-v4 .register-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.checkout-form-v4 .register-plan-card {
    position: relative;
    min-height: 258px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.checkout-form-v4 .register-plan-card input,
.checkout-form-v4 .register-term-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-form-v4 .register-plan-card > span {
    height: 100%;
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid #dbe7f0;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.checkout-form-v4 .register-plan-card:has(input:checked) > span {
    border-color: #14b8a6;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    box-shadow: 0 24px 52px rgba(20, 184, 166, .16);
}

.checkout-form-v4 .register-plan-card:hover > span {
    transform: translateY(-2px);
}

.checkout-form-v4 .register-plan-card small,
.checkout-form-v4 .register-plan-card b {
    color: #64748b;
    font-size: .82rem;
    line-height: 1.35;
    font-weight: 900;
    text-transform: uppercase;
}

.checkout-form-v4 .register-plan-card strong {
    color: #0f172a;
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    line-height: 1.05;
}

.checkout-form-v4 .register-plan-card em {
    color: #0f172a;
    font-style: normal;
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    line-height: 1;
    font-weight: 900;
}

.checkout-form-v4 .register-plan-period {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #dbe7f0;
    border-radius: 24px;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}

.checkout-form-v4 .register-plan-period-copy {
    display: grid;
    align-content: center;
    gap: 8px;
}

.checkout-form-v4 .register-plan-period-copy h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1.05;
}

.checkout-form-v4 .register-plan-period-copy p {
    margin: 0;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.45;
}

.checkout-form-v4 .register-term-grid-four,
.checkout-form-v4 .register-term-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.checkout-form-v4 .register-term-card {
    min-height: 136px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.checkout-form-v4 .register-term-card > span {
    min-height: 136px;
    height: 100%;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    border: 1px solid #dbe7f0;
    border-radius: 20px;
    background: #ffffff;
    color: #0f172a;
    overflow: visible;
    white-space: normal;
}

.checkout-form-v4 .register-term-card:has(input:checked) > span {
    border-color: #14b8a6;
    background: #ecfdf5;
    box-shadow: 0 18px 40px rgba(20, 184, 166, .12);
}

.checkout-form-v4 .register-term-card strong {
    color: #0f172a;
    font-size: 1.08rem;
    line-height: 1.1;
}

.checkout-form-v4 .register-term-card small,
.checkout-form-v4 .register-term-card em {
    color: #475569;
    font-size: .78rem;
    line-height: 1.3;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.checkout-form-v4 .register-period-saving {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    background: #ccfbf1;
    color: #134e4a;
    font-size: 1rem;
    font-weight: 900;
}

.checkout-form-v4 .register-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.checkout-form-v4 .register-extra-card {
    min-height: 96px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #dbe7f0;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .035);
}

.checkout-form-v4 .register-extra-card input {
    width: 20px;
    min-height: 20px;
    height: 20px;
    margin: 0;
}

.checkout-form-v4 .register-extra-card strong {
    display: block;
    color: #0f172a;
    font-size: .98rem;
    line-height: 1.2;
}

.checkout-form-v4 .register-extra-card small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
}

.checkout-form-v4 .register-extra-card em {
    color: #0f766e;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.checkout-form-v4 .register-extra-card.is-selected,
.checkout-form-v4 .register-extra-card:has(input:checked) {
    border-color: #14b8a6;
    background: #ecfdf5;
}

.checkout-form-v4 .register-accompaniment-layout {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
}

.checkout-form-v4 .register-accompaniment-copy {
    display: grid;
    align-content: center;
}

.checkout-form-v4 .support-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-form-v4 .legal-consent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.checkout-form-v4 .legal-consent-card {
    min-height: 250px;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.checkout-form-v4 .legal-consent-card strong {
    color: #0f172a;
    font-size: 1.15rem;
    line-height: 1.15;
}

.checkout-form-v4 .legal-short-copy {
    color: #64748b;
    font-size: .92rem;
    line-height: 1.45;
}

.checkout-form-v4 .legal-check {
    margin-top: auto;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #dbe7f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #334155;
    font-size: .82rem;
    line-height: 1.32;
    text-transform: none;
    letter-spacing: 0;
}

.checkout-form-v4 .register-wizard-actions {
    grid-column: 1;
    min-height: 86px;
    padding: 12px;
    border: 1px solid #dbe7f0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.checkout-form-v4 .register-wizard-actions .button,
.checkout-form-v4 .checkout-summary-submit {
    min-height: 58px;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 900;
}

.checkout-form-v4 .checkout-summary-card {
    grid-column: 2;
    grid-row: 2 / span 3;
    position: sticky;
    top: 14px;
    min-height: 610px;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px;
    border: 1px solid #dbe7f0;
    border-radius: 24px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .09);
}

.checkout-form-v4 .checkout-summary-title {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
}

.checkout-form-v4 .checkout-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
}

.checkout-form-v4 .checkout-summary-icon svg {
    width: 26px;
    height: 26px;
}

.checkout-form-v4 .checkout-summary-title strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.35;
}

.checkout-form-v4 .checkout-summary-box,
.checkout-form-v4 .checkout-summary-list,
.checkout-form-v4 .checkout-summary-total {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

.checkout-form-v4 .checkout-summary-box {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.checkout-form-v4 .checkout-summary-box small,
.checkout-form-v4 .checkout-summary-list span,
.checkout-form-v4 .checkout-summary-total span {
    color: #64748b;
    font-weight: 800;
}

.checkout-form-v4 .checkout-summary-box strong {
    color: #0f172a;
    font-size: 1.25rem;
}

.checkout-form-v4 .checkout-summary-list {
    display: grid;
}

.checkout-form-v4 .checkout-summary-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.checkout-form-v4 .checkout-summary-list div:last-child {
    border-bottom: 0;
}

.checkout-form-v4 .checkout-summary-list strong {
    color: #0f172a;
    text-align: right;
}

.checkout-form-v4 .checkout-summary-total {
    display: grid;
    gap: 8px;
    padding: 18px;
    background: #0f172a;
}

.checkout-form-v4 .checkout-summary-total span {
    color: #cbd5e1;
}

.checkout-form-v4 .checkout-summary-total strong {
    color: #ffffff;
    font-size: 1.65rem;
}

.checkout-form-v4 .checkout-summary-submit:disabled {
    cursor: not-allowed;
    opacity: .58;
    filter: grayscale(.2);
}

.checkout-form-v4 .checkout-summary-safe {
    color: #64748b;
    text-align: center;
    font-weight: 700;
}

.checkout-form-v4 > .form-link {
    grid-column: 1 / -1;
    justify-self: center;
    color: #0f766e;
    font-weight: 900;
}

@media (max-width: 1440px) {
    .register-builder.register-builder-v4 {
        grid-template-columns: 250px minmax(0, 1fr);
        width: min(1500px, calc(100vw - 20px));
    }

    .register-builder-v4 .checkout-form-v4 {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .checkout-form-v4 > .register-section {
        min-height: 500px;
        padding: 22px;
    }

    .checkout-form-v4 .register-heading-row h2,
    .checkout-form-v4 > .register-section > div:first-child h2 {
        font-size: clamp(1.8rem, 2.7vw, 2.6rem);
    }
}

@media (max-width: 1260px) {
    .register-builder.register-builder-v4 {
        grid-template-columns: 1fr;
    }

    .register-builder-v4 .checkout-rail {
        position: static;
        min-height: auto;
        grid-template-rows: auto auto;
    }

    .register-builder-v4 .checkout-rail-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .register-builder-v4 .checkout-rail-list li {
        grid-template-columns: 1fr;
        min-height: 108px;
    }

    .register-builder-v4 .checkout-rail-note {
        display: none;
    }

    .register-builder-v4 .checkout-form-v4 {
        grid-template-columns: 1fr;
    }

    .checkout-form-v4 .checkout-summary-card {
        grid-column: 1;
        grid-row: auto;
        position: static;
        min-height: auto;
    }
}

@media (max-width: 860px) {
    .register-builder.register-builder-v4 {
        width: calc(100vw - 14px);
        margin: 8px auto;
    }

    .checkout-form-v4 .register-wizard-progress,
    .register-builder-v4 .checkout-rail-list,
    .checkout-form-v4 .register-form-grid.compact-fields,
    .checkout-form-v4 .register-plan-grid,
    .checkout-form-v4 .register-plan-period,
    .checkout-form-v4 .register-extra-grid,
    .checkout-form-v4 .register-accompaniment-layout,
    .checkout-form-v4 .support-choice-grid,
    .checkout-form-v4 .legal-consent-grid {
        grid-template-columns: 1fr;
    }

    .checkout-form-v4 .register-term-grid-four,
    .checkout-form-v4 .register-term-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checkout-form-v4 > .register-section {
        min-height: auto;
        padding: 18px;
    }

    .checkout-form-v4 .register-heading-row {
        display: grid;
    }

    .checkout-form-v4 .register-heading-row > strong {
        min-width: 0;
        width: 100%;
    }
}

/* CALENDAR FINAL LOCK 2026-06-11 - keep this at EOF. */
.main:has(.calendar-focus-shell) > .topbar { display: none !important; }
.main:has(.calendar-focus-shell) {
    padding: 18px !important;
    background: linear-gradient(180deg, #f8fbff, #f4f7fb) !important;
}
.calendar-focus-shell {
    max-width: 1720px !important;
    margin: 0 auto !important;
    gap: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.calendar-focus-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto auto !important;
    align-items: end !important;
    gap: 16px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.calendar-breadcrumb { display: flex !important; gap: 8px !important; margin: 0 0 8px !important; color: #64748b !important; font-weight: 750 !important; }
.calendar-focus-title { display: block !important; margin: 0 !important; color: #0f172a !important; font-size: 30px !important; font-weight: 950 !important; line-height: 1.05 !important; }
.calendar-subtitle { margin: 7px 0 0 !important; color: #64748b !important; font-size: 15px !important; font-weight: 650 !important; }
.calendar-focus-toolbar h2:not(.calendar-focus-title), .calendar-hero-title, .calendar-focus-toolbar .eyebrow { display: none !important; }
.calendar-nav, .calendar-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; }
.calendar-date-pill, .calendar-focus-toolbar .button, .calendar-focus-toolbar .icon-button, .calendar-focus-toolbar .segmented-control a {
    min-height: 42px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #17213f !important;
    font-weight: 850 !important;
}
.calendar-date-pill { display: inline-flex !important; align-items: center !important; padding: 0 16px !important; white-space: nowrap !important; }
.calendar-focus-toolbar .button.primary { border-color: #4f46e5 !important; background: linear-gradient(135deg, #5b43f3, #6d4aff) !important; color: #fff !important; }
.calendar-focus-toolbar .segmented-control { display: inline-flex !important; gap: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.calendar-focus-toolbar .segmented-control a { border-radius: 0 !important; box-shadow: none !important; }
.calendar-focus-toolbar .segmented-control a:first-child { border-radius: 10px 0 0 10px !important; }
.calendar-focus-toolbar .segmented-control a:last-child { border-radius: 0 10px 10px 0 !important; }
.calendar-focus-toolbar .segmented-control a.active { background: #ede9fe !important; color: #4f46e5 !important; border-color: #c4b5fd !important; }
.calendar-filter-bar {
    display: block !important;
    padding: 14px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .94) !important;
}
.calendar-filter-bar summary { display: none !important; }
.calendar-filter-bar .calendar-inline-filters {
    display: grid !important;
    grid-template-columns: 150px repeat(3, minmax(170px, 1fr)) minmax(220px, 1.1fr) auto auto !important;
    gap: 12px !important;
    align-items: end !important;
}
.calendar-filter-bar label { display: grid !important; gap: 6px !important; margin: 0 !important; color: #334155 !important; font-size: 12px !important; font-weight: 850 !important; }
.calendar-filter-bar input, .calendar-filter-bar select { min-height: 42px !important; border: 1px solid #dbe4ef !important; border-radius: 10px !important; background: #fff !important; color: #17213f !important; padding: 0 13px !important; }
.calendar-operations-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: 18px !important; align-items: start !important; }
.pro-calendar { --minute-height: 1.46px !important; overflow: auto !important; border: 1px solid #dbe4ef !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 22px 48px rgba(15, 23, 42, .06) !important; }
.pro-calendar-axis, .pro-calendar-column, .pro-calendar-corner, .pro-calendar-column-head { border-color: #e2e8f0 !important; background: #fff !important; }
.pro-calendar-corner, .pro-calendar-column-head { min-height: 58px !important; padding: 12px 14px !important; }
.pro-calendar-lane {
    background:
        linear-gradient(to bottom, rgba(226,232,240,.92) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 60),
        linear-gradient(to bottom, rgba(226,232,240,.42) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 15),
        #fff !important;
}
.calendar-now-line { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(var(--now-start) * var(--minute-height)) !important; z-index: 8 !important; border-top: 1px dashed #ef4444 !important; pointer-events: none !important; }
.calendar-now-line span { position: absolute !important; left: -46px !important; top: -11px !important; min-width: 42px !important; border-radius: 8px !important; background: #ef4444 !important; color: #fff !important; padding: 3px 7px !important; font-size: 11px !important; font-weight: 900 !important; }
.pro-calendar .calendar-event { grid-template-columns: minmax(0,1fr) auto !important; align-content: start !important; gap: 4px 8px !important; border-radius: 9px !important; border-left-width: 0 !important; padding: 10px !important; color: #111936 !important; box-shadow: 0 10px 24px rgba(79,70,229,.08) !important; transition: transform .16s ease, box-shadow .16s ease !important; }
.pro-calendar .calendar-event:hover { transform: translateY(-1px) !important; box-shadow: 0 18px 34px rgba(79,70,229,.16) !important; }
.pro-calendar .calendar-event[data-status-code="scheduled"] { background: linear-gradient(135deg, #eef2ff, #f8f7ff) !important; border-color: #a5b4fc !important; }
.pro-calendar .calendar-event[data-status-code="completed"] { background: linear-gradient(135deg, #eafaf0, #f7fff9) !important; border-color: #86efac !important; }
.pro-calendar .calendar-event[data-status-code="cancelled"] { background: linear-gradient(135deg, #fff1f2, #fffafa) !important; border-color: #fda4af !important; }
.pro-calendar .calendar-event[data-status-code="no_show"] { background: linear-gradient(135deg, #fff7ed, #fffaf4) !important; border-color: #fdba74 !important; }
.pro-calendar .calendar-event .event-time { grid-column: 1 / -1 !important; width: max-content !important; border-radius: 999px !important; background: rgba(79,70,229,.10) !important; color: #3730a3 !important; padding: 2px 7px !important; font-size: 11px !important; font-weight: 900 !important; }
.pro-calendar .calendar-event strong { color: #111936 !important; font-size: 13px !important; line-height: 1.25 !important; }
.pro-calendar .calendar-event small { color: #475569 !important; font-size: 11px !important; line-height: 1.25 !important; }
.event-payment { justify-self: end !important; border-radius: 999px !important; padding: 3px 7px !important; font-size: 10px !important; font-weight: 900 !important; }
.calendar-side-panel { display: grid !important; gap: 14px !important; position: sticky !important; top: 14px !important; }
.calendar-side-card { border-radius: 16px !important; background: rgba(255,255,255,.95) !important; box-shadow: 0 18px 42px rgba(15,23,42,.07) !important; }
.calendar-side-actions { grid-template-columns: 1fr !important; }
.calendar-side-actions .button { width: 100% !important; }
.quick-appointment-panel { backdrop-filter: blur(12px) !important; background: rgba(15,23,42,.32) !important; }
.quick-panel-card { width: min(760px, calc(100vw - 28px)) !important; border-radius: 22px !important; border: 1px solid #dbe4ef !important; background: #fff !important; box-shadow: 0 28px 78px rgba(15,23,42,.22) !important; }
@media (max-width: 1320px) {
    .calendar-focus-toolbar, .calendar-filter-bar .calendar-inline-filters, .calendar-operations-layout { grid-template-columns: 1fr !important; }
    .calendar-nav, .calendar-actions { justify-content: flex-start !important; flex-wrap: wrap !important; }
    .calendar-side-panel { position: static !important; grid-template-columns: 1fr !important; }
}

/* CALENDAR NO PAGE SCROLL LOCK 2026-06-11 - keep this after calendar overrides. */
html:has(.calendar-focus-shell),
body:has(.calendar-focus-shell) {
    height: 100% !important;
    overflow: hidden !important;
}

.app-shell:has(.calendar-focus-shell) {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-shell:has(.calendar-focus-shell) .sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

.main:has(.calendar-focus-shell) {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
}

.calendar-focus-shell {
    width: min(100%, 1740px) !important;
    height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
}

.calendar-focus-toolbar {
    min-height: 0 !important;
    grid-template-columns: minmax(240px, 1fr) auto auto !important;
    gap: 10px !important;
    padding: 0 !important;
    align-items: center !important;
}

.calendar-breadcrumb {
    margin: 0 0 3px !important;
    font-size: 12px !important;
}

.calendar-focus-title {
    font-size: clamp(23px, 1.75vw, 28px) !important;
}

.calendar-subtitle {
    margin-top: 4px !important;
    font-size: 13px !important;
}

.calendar-nav,
.calendar-actions {
    gap: 7px !important;
}

.calendar-date-pill,
.calendar-focus-toolbar .button,
.calendar-focus-toolbar .icon-button,
.calendar-focus-toolbar .segmented-control a {
    min-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.calendar-filter-bar {
    padding: 10px 12px !important;
    border-radius: 14px !important;
}

.calendar-filter-bar .calendar-inline-filters {
    grid-template-columns: 140px minmax(145px, .82fr) minmax(165px, .95fr) minmax(122px, .65fr) minmax(190px, 1fr) minmax(152px, .75fr) auto !important;
    gap: 9px !important;
}

.calendar-filter-bar label {
    gap: 4px !important;
    font-size: 11px !important;
}

.calendar-filter-bar input,
.calendar-filter-bar select,
.calendar-filter-bar .button {
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.calendar-filter-bar .button {
    padding-inline: 14px !important;
    white-space: nowrap !important;
}

.calendar-operations-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 12px !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.pro-calendar {
    --minute-height: clamp(.58px, 0.08dvh, .78px) !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    overflow: hidden !important;
    border-radius: 15px !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    min-height: 46px !important;
    padding: 8px 10px !important;
}

.pro-calendar-column-head strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.pro-calendar-column-head span,
.pro-calendar-axis-body span {
    font-size: 10.5px !important;
}

.pro-calendar .calendar-event {
    min-height: 0 !important;
    padding: 5px 7px !important;
    gap: 2px 6px !important;
    border-radius: 8px !important;
}

.pro-calendar .calendar-event .event-time {
    padding: 1px 6px !important;
    font-size: 10px !important;
}

.pro-calendar .calendar-event strong {
    font-size: 11.5px !important;
    line-height: 1.12 !important;
}

.pro-calendar .calendar-event small {
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.pro-calendar .calendar-event .event-meta {
    display: none !important;
}

.event-payment {
    padding: 2px 5px !important;
    font-size: 9px !important;
}

.calendar-now-line span {
    left: -40px !important;
    min-width: 36px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
}

.calendar-side-panel {
    position: static !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    overflow: hidden !important;
}

.calendar-side-card {
    min-height: 0 !important;
    border-radius: 15px !important;
    padding: 12px !important;
}

.calendar-side-head,
.calendar-side-title {
    margin-bottom: 8px !important;
}

.calendar-mini-month {
    padding-bottom: 10px !important;
}

.mini-month-grid {
    gap: 2px !important;
}

.mini-month-grid span,
.mini-month-grid a {
    min-height: 21px !important;
    font-size: 11px !important;
}

.mini-month-weekdays span {
    min-height: 18px !important;
}

.appointment-detail-card {
    overflow: hidden !important;
}

.appointment-detail-card h3 {
    margin-bottom: 7px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

.appointment-detail-card dl {
    gap: 4px !important;
}

.appointment-detail-card dl div {
    grid-template-columns: 68px minmax(0, 1fr) !important;
}

.appointment-detail-card dt {
    font-size: 10px !important;
}

.appointment-detail-card dd {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.appointment-detail-card p {
    max-height: 34px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.calendar-side-actions {
    gap: 6px !important;
}

.calendar-side-actions .button {
    min-height: 31px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
}

.day-summary-card {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.summary-dot-row {
    min-height: 0 !important;
    padding: 3px 0 !important;
    font-size: 12px !important;
}

@media (max-width: 1380px) {
    .calendar-focus-toolbar {
        grid-template-columns: minmax(220px, 1fr) auto !important;
    }

    .calendar-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
    }

    .calendar-filter-bar .calendar-inline-filters {
        grid-template-columns: 132px minmax(130px, .8fr) minmax(148px, 1fr) minmax(112px, .65fr) minmax(164px, 1fr) auto !important;
    }

    .calendar-filter-bar label:has(input[name="q"]) {
        display: none !important;
    }

    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) 280px !important;
    }
}

@media (max-width: 1120px) {
    html:has(.calendar-focus-shell),
    body:has(.calendar-focus-shell),
    .app-shell:has(.calendar-focus-shell),
    .main:has(.calendar-focus-shell) {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: auto !important;
    }

    .calendar-focus-shell {
        height: auto !important;
        grid-template-rows: auto !important;
    }

    .calendar-operations-layout {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .calendar-side-panel {
        height: auto !important;
        overflow: visible !important;
    }
}

/* CALENDAR WORKABLE SCROLL LOCK 2026-06-11 - page fixed, agenda scrolls. */
@media (min-width: 1121px) {
    .main:has(.calendar-focus-shell) {
        padding: 12px 14px !important;
    }

    .calendar-focus-shell {
        height: calc(100dvh - 24px) !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .calendar-focus-toolbar {
        grid-template-columns: minmax(260px, 1fr) minmax(0, auto) !important;
        grid-template-areas:
            "title nav"
            "title actions" !important;
        align-items: start !important;
        column-gap: 16px !important;
        row-gap: 7px !important;
        overflow: visible !important;
    }

    .calendar-focus-toolbar > div:first-child {
        grid-area: title !important;
        min-width: 0 !important;
    }

    .calendar-focus-toolbar .calendar-nav {
        grid-area: nav !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }

    .calendar-focus-toolbar .calendar-actions {
        grid-area: actions !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
    }

    .calendar-focus-title {
        font-size: 28px !important;
    }

    .calendar-subtitle {
        max-width: 520px !important;
    }

    .calendar-date-pill {
        max-width: 170px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .calendar-focus-toolbar .segmented-control a {
        min-width: 58px !important;
        padding-inline: 12px !important;
    }

    .calendar-filter-bar {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .calendar-filter-drawer.calendar-filter-bar {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .calendar-filter-bar .calendar-inline-filters {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 132px 164px 184px 132px minmax(178px, 1fr) minmax(150px, .72fr) auto !important;
        gap: 10px !important;
    }

    .calendar-filter-bar label {
        min-width: 0 !important;
    }

    .calendar-filter-bar input,
    .calendar-filter-bar select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) 310px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .pro-calendar {
        --minute-height: 1.14px !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable both-edges !important;
        grid-template-columns: 62px minmax(max-content, 1fr) !important;
    }

    .pro-calendar-axis,
    .pro-calendar-column {
        grid-template-rows: 56px minmax(0, max-content) !important;
    }

    .pro-calendar-columns {
        min-width: max(860px, calc(var(--calendar-columns) * 220px)) !important;
    }

    .calendar-week .pro-calendar-columns {
        min-width: max(1120px, calc(var(--calendar-columns) * 164px)) !important;
    }

    .pro-calendar-corner,
    .pro-calendar-column-head {
        min-height: 56px !important;
        padding: 10px 12px !important;
    }

    .pro-calendar-column-head strong {
        font-size: 14px !important;
    }

    .pro-calendar-column-head span,
    .pro-calendar-axis-body span {
        font-size: 11px !important;
    }

    .pro-calendar .calendar-event {
        min-height: 42px !important;
        padding: 8px 9px !important;
        gap: 3px 8px !important;
        border-radius: 10px !important;
    }

    .pro-calendar .calendar-event .event-time {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    .pro-calendar .calendar-event strong {
        font-size: 12.5px !important;
        line-height: 1.18 !important;
    }

    .pro-calendar .calendar-event small {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .pro-calendar .calendar-event .event-meta {
        display: none !important;
    }

    .event-payment {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    .calendar-side-panel {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }
}

@media (min-width: 1121px) and (max-width: 1500px) {
    .calendar-focus-title {
        font-size: 24px !important;
    }

    .calendar-subtitle {
        font-size: 12px !important;
    }

    .calendar-focus-toolbar {
        grid-template-columns: minmax(210px, .72fr) minmax(0, 1fr) !important;
    }

    .calendar-focus-toolbar .calendar-actions .button.primary {
        padding-inline: 14px !important;
    }

    .calendar-filter-bar .calendar-inline-filters {
        grid-template-columns: 126px 150px 164px 118px minmax(158px, 1fr) auto !important;
    }

    .calendar-filter-bar label:has(input[name="q"]) {
        display: none !important;
    }

    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) 286px !important;
    }

    .calendar-side-card {
        padding: 10px !important;
    }
}

/* CALENDAR USABLE DESK LAYOUT 2026-06-11 - sticky workers and larger work area. */
@media (min-width: 1121px) {
    .main:has(.calendar-focus-shell) {
        padding: 8px 10px !important;
    }

    .calendar-focus-shell {
        height: calc(100dvh - 16px) !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .calendar-focus-toolbar {
        min-height: 58px !important;
        row-gap: 5px !important;
        column-gap: 14px !important;
    }

    .calendar-breadcrumb {
        margin-bottom: 2px !important;
        font-size: 11px !important;
    }

    .calendar-focus-title {
        font-size: clamp(22px, 1.45vw, 27px) !important;
        line-height: 1 !important;
    }

    .calendar-subtitle {
        margin-top: 3px !important;
        font-size: 12px !important;
    }

    .calendar-date-pill,
    .calendar-focus-toolbar .button,
    .calendar-focus-toolbar .icon-button,
    .calendar-focus-toolbar .segmented-control a {
        min-height: 35px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    .calendar-filter-bar {
        padding: 8px 10px !important;
        border-radius: 13px !important;
    }

    .calendar-filter-bar .calendar-inline-filters {
        grid-template-columns: 130px 164px 184px 128px minmax(220px, 1fr) minmax(190px, .9fr) auto !important;
        gap: 9px !important;
        align-items: end !important;
    }

    .calendar-filter-bar label {
        font-size: 11px !important;
        gap: 4px !important;
    }

    .calendar-filter-bar input,
    .calendar-filter-bar select,
    .calendar-filter-bar .button {
        min-height: 36px !important;
        font-size: 13px !important;
    }

    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) clamp(330px, 21vw, 380px) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .pro-calendar {
        --minute-height: 1.28px !important;
        grid-template-columns: 66px minmax(max-content, 1fr) !important;
        border-radius: 15px !important;
        scrollbar-gutter: stable !important;
        background: #ffffff !important;
    }

    .pro-calendar-axis {
        position: sticky !important;
        left: 0 !important;
        z-index: 35 !important;
        background: #ffffff !important;
        box-shadow: 1px 0 0 #dbe4ef !important;
    }

    .pro-calendar-corner {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 60 !important;
    }

    .pro-calendar-column-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }

    .pro-calendar-corner,
    .pro-calendar-column-head {
        min-height: 62px !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid #dbe4ef !important;
        background: rgba(255, 255, 255, .98) !important;
        backdrop-filter: blur(14px) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
    }

    .pro-calendar-axis,
    .pro-calendar-column {
        grid-template-rows: 62px minmax(0, max-content) !important;
    }

    .pro-calendar-columns {
        min-width: max(980px, calc(var(--calendar-columns) * 260px)) !important;
        overflow: visible !important;
    }

    .calendar-week .pro-calendar-columns {
        min-width: max(1220px, calc(var(--calendar-columns) * 184px)) !important;
    }

    .pro-calendar-column-head strong {
        font-size: 15px !important;
        line-height: 1.15 !important;
        color: #071229 !important;
    }

    .pro-calendar-column-head span {
        margin-top: 2px !important;
        font-size: 12px !important;
        color: #64748b !important;
    }

    .pro-calendar-axis-body span {
        font-size: 12px !important;
        font-weight: 750 !important;
        color: #475569 !important;
    }

    .pro-calendar .calendar-event {
        min-height: 52px !important;
        padding: 9px 10px !important;
        border-radius: 11px !important;
    }

    .pro-calendar .calendar-event strong {
        font-size: 13px !important;
    }

    .pro-calendar .calendar-event small {
        font-size: 11.5px !important;
    }

    .calendar-side-panel {
        gap: 12px !important;
    }

    .calendar-side-card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .calendar-side-head strong,
    .calendar-side-title span,
    .appointment-detail-card h3,
    .day-summary-card .calendar-side-title span {
        font-size: 16px !important;
    }

    .mini-month-grid {
        gap: 4px !important;
    }

    .mini-month-grid span,
    .mini-month-grid a {
        min-height: 28px !important;
        font-size: 12px !important;
    }

    .appointment-detail-card dl {
        gap: 7px !important;
    }

    .appointment-detail-card dl div {
        grid-template-columns: 86px minmax(0, 1fr) !important;
    }

    .appointment-detail-card dt {
        font-size: 11px !important;
    }

    .appointment-detail-card dd,
    .appointment-detail-card p {
        font-size: 12px !important;
    }

    .calendar-side-actions .button {
        min-height: 35px !important;
        font-size: 13px !important;
    }

    .summary-dot-row {
        padding: 5px 0 !important;
        font-size: 13px !important;
    }
}

@media (min-width: 1121px) and (max-width: 1500px) {
    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) 320px !important;
        gap: 12px !important;
    }

    .calendar-filter-bar .calendar-inline-filters {
        grid-template-columns: 124px 148px 164px 118px minmax(168px, 1fr) auto !important;
    }

    .calendar-filter-bar label:has(input[name="q"]) {
        display: none !important;
    }

    .pro-calendar {
        --minute-height: 1.22px !important;
        grid-template-columns: 62px minmax(max-content, 1fr) !important;
    }

    .pro-calendar-columns {
        min-width: max(900px, calc(var(--calendar-columns) * 238px)) !important;
    }

    .calendar-side-card {
        padding: 12px !important;
    }
}

/* CALENDAR ACTION POPOVERS 2026-06-11 - reservation actions live on click, not in the side rail. */
@media (min-width: 1121px) {
    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) clamp(232px, 15vw, 280px) !important;
        gap: 12px !important;
    }

    .calendar-detail-legacy {
        display: none !important;
    }

    .calendar-side-panel {
        grid-template-rows: auto auto !important;
        align-content: start !important;
        gap: 10px !important;
    }

    .calendar-side-card {
        padding: 12px !important;
    }

    .mini-month-grid span,
    .mini-month-grid a {
        min-height: 24px !important;
        font-size: 11px !important;
    }

    .summary-dot-row {
        padding: 4px 0 !important;
        font-size: 12px !important;
    }
}

.quick-appointment-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 95 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(15, 23, 42, .24) !important;
    backdrop-filter: blur(8px) !important;
}

.quick-appointment-panel[hidden] {
    display: none !important;
}

.quick-panel-card {
    width: min(980px, calc(100vw - 32px)) !important;
    max-height: min(82dvh, 720px) !important;
    overflow: auto !important;
    padding: 18px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24) !important;
}

.quick-panel-card h2 {
    margin: 0 0 12px !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
}

.quick-panel-card .form-panel {
    gap: 12px !important;
}

.quick-panel-card .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.quick-panel-card label {
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.quick-panel-card input,
.quick-panel-card select,
.quick-panel-card textarea {
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.quick-panel-card textarea {
    min-height: 72px !important;
}

.quick-panel-card .button.primary[type="submit"] {
    width: min(260px, 100%) !important;
    justify-self: end !important;
    min-height: 42px !important;
}

.appointment-popover {
    z-index: 100 !important;
    place-items: end center !important;
    padding: 18px !important;
    background: rgba(15, 23, 42, .22) !important;
}

.popover-panel {
    width: min(760px, calc(100vw - 28px)) !important;
    max-height: min(84dvh, 720px) !important;
    padding: 18px !important;
    border-radius: 18px !important;
}

.appointment-popover-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px 12px !important;
    margin-bottom: 12px !important;
}

.appointment-popover-head .eyebrow {
    grid-column: 1 / -1 !important;
}

.appointment-popover-head h2 {
    font-size: 22px !important;
    line-height: 1.08 !important;
}

.appointment-popover-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.appointment-popover-summary article {
    padding: 10px !important;
    border-radius: 12px !important;
}

.appointment-popover-summary strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

.appointment-status-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
}

.status-chip {
    min-height: 38px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #17213f !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.status-chip.is-active {
    border-color: #0f766e !important;
    background: #ccfbf1 !important;
    color: #115e59 !important;
}

.status-chip.is-scheduled { color: #4338ca !important; }
.status-chip.is-completed { color: #15803d !important; }
.status-chip.is-pending { color: #b45309 !important; }
.status-chip.is-cancelled { color: #be123c !important; }

.appointment-action-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.appointment-action-row .button,
.appointment-action-row form,
.appointment-action-row form .button {
    width: 100% !important;
}

@media (min-width: 1121px) and (max-width: 1500px) {
    .calendar-operations-layout {
        grid-template-columns: minmax(0, 1fr) 230px !important;
    }

    .calendar-side-card {
        padding: 10px !important;
    }

    .quick-panel-card .form-grid,
    .appointment-popover-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .quick-panel-card .form-grid,
    .appointment-popover-summary,
    .appointment-status-row,
    .appointment-action-row {
        grid-template-columns: 1fr !important;
    }
}

/* CALENDAR VISUAL POLISH 2026-06-11 - premium appointment cards and modal. */
.pro-calendar .calendar-event {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) minmax(76px, auto) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "time title payment"
        "time client payment" !important;
    align-items: center !important;
    min-height: 62px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--event-color, #4f46e5) 34%, #d9e3ef) !important;
    border-left: 4px solid var(--event-color, #4f46e5) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94)),
        linear-gradient(135deg, color-mix(in srgb, var(--event-color, #4f46e5) 13%, transparent), transparent 58%) !important;
    color: #101828 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
    text-align: left !important;
}

.pro-calendar .calendar-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .13) !important;
}

.pro-calendar .calendar-event .event-time {
    grid-area: time !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--event-color, #4f46e5) 12%, #ffffff) !important;
    color: color-mix(in srgb, var(--event-color, #4f46e5) 78%, #111827) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.pro-calendar .calendar-event strong {
    grid-area: title !important;
    min-width: 0 !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 920 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event .event-client {
    grid-area: client !important;
    display: block !important;
    min-width: 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event .event-meta {
    display: none !important;
}

.pro-calendar .calendar-event .event-payment {
    grid-area: payment !important;
    align-self: center !important;
    justify-self: end !important;
    min-height: 26px !important;
    min-width: 76px !important;
    max-width: 92px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.pro-calendar .calendar-event .event-payment.is-pending {
    background: #fff3d6 !important;
    color: #92400e !important;
}

.pro-calendar .calendar-event .event-payment.is-paid {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.appointment-popover {
    place-items: center !important;
    padding: 18px !important;
    background: rgba(15, 23, 42, .20) !important;
    backdrop-filter: blur(10px) !important;
}

.popover-panel {
    width: min(700px, calc(100vw - 28px)) !important;
    max-height: min(86dvh, 720px) !important;
    padding: 22px !important;
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .24) !important;
}

.popover-close {
    top: 18px !important;
    right: 18px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
}

.appointment-popover-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px 14px !important;
    margin: 0 48px 18px 0 !important;
}

.appointment-popover-head .eyebrow {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
}

.appointment-popover-head h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: clamp(24px, 2.3vw, 30px) !important;
    font-weight: 950 !important;
    line-height: 1.03 !important;
}

.appointment-popover-head span {
    align-self: center !important;
    justify-self: end !important;
    max-width: 230px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #dff8ef !important;
    color: #0f766e !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.appointment-popover-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.appointment-popover-summary article {
    min-height: 68px !important;
    padding: 13px 14px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

.appointment-popover-summary small {
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
}

.appointment-popover-summary strong {
    margin-top: 6px !important;
    color: #101828 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.appointment-status-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.status-chip {
    min-height: 44px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}

.status-chip:hover {
    transform: translateY(-1px) !important;
    border-color: #99f6e4 !important;
}

.status-chip.is-active {
    border-color: #0f766e !important;
    background: #ccfbf1 !important;
    color: #0f766e !important;
}

.appointment-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.appointment-action-row .button,
.appointment-action-row form .button {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.appointment-action-row .button.primary {
    border-color: #0f766e !important;
    background: #0f766e !important;
    color: #ffffff !important;
}

.appointment-action-row .button.ghost {
    background: #ffffff !important;
}

.appointment-action-row .button.danger {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

@media (max-width: 760px) {
    .appointment-popover-head,
    .appointment-popover-summary,
    .appointment-status-row,
    .appointment-action-row {
        grid-template-columns: 1fr !important;
    }

    .appointment-popover-head {
        margin-right: 46px !important;
    }
}

/* CALENDAR FINAL DETAIL POLISH 2026-06-11 - cleaner reservation sheet. */
.popover-panel {
    width: min(640px, calc(100vw - 28px)) !important;
    padding: 20px !important;
    border-radius: 20px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.appointment-popover-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin: 0 46px 16px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.appointment-popover-head h2 {
    font-size: clamp(23px, 2vw, 28px) !important;
}

.appointment-popover-head span {
    padding: 7px 11px !important;
    border: 1px solid #b7f3df !important;
    background: #e7fbf4 !important;
    color: #0f766e !important;
}

.appointment-popover-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.appointment-popover-summary article {
    min-height: 58px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

.appointment-popover-summary article:nth-child(2n) {
    border-right: 0 !important;
}

.appointment-popover-summary article:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
}

.appointment-popover-summary small {
    color: #667085 !important;
    font-size: 10.5px !important;
}

.appointment-popover-summary strong {
    color: #0f172a !important;
    font-size: 13.5px !important;
}

.appointment-status-row {
    padding: 5px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    gap: 5px !important;
}

.status-chip {
    min-height: 38px !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    font-size: 12.5px !important;
}

.status-chip.is-active {
    border-color: #5eead4 !important;
    background: #ccfbf1 !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .12) !important;
}

.appointment-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.appointment-action-row .button,
.appointment-action-row form .button {
    min-height: 40px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
}

.appointment-action-row .button.danger {
    background: #ffffff !important;
}

.pro-calendar .calendar-event {
    min-height: 66px !important;
    border-left-width: 5px !important;
}

.pro-calendar .calendar-event .event-payment {
    min-height: 25px !important;
    border: 1px solid transparent !important;
    font-size: 10.5px !important;
}

.pro-calendar .calendar-event .event-payment.is-pending {
    border-color: #fed7aa !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
}

.pro-calendar .calendar-event .event-payment.is-paid {
    border-color: #bbf7d0 !important;
    background: #ecfdf5 !important;
    color: #166534 !important;
}

/* CALENDAR CARD REFINEMENT 2026-06-11 - softer worker lane and appointment card. */
.pro-calendar-column-head {
    min-height: 58px !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    box-shadow: inset 0 -1px 0 #e2e8f0 !important;
}

.pro-calendar-column-head strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.pro-calendar-column-head span {
    margin-top: 3px !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.pro-calendar-lane {
    background:
        linear-gradient(to bottom, rgba(226, 232, 240, .78) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 60),
        linear-gradient(to bottom, rgba(241, 245, 249, .68) 1px, transparent 1px) 0 0 / 100% calc(var(--minute-height) * 15),
        #ffffff !important;
}

.calendar-closed-block {
    border: 1px solid #e7edf5 !important;
    border-radius: 16px !important;
    background:
        repeating-linear-gradient(135deg, rgba(226, 232, 240, .36), rgba(226, 232, 240, .36) 12px, rgba(248, 250, 252, .76) 12px, rgba(248, 250, 252, .76) 24px) !important;
}

.calendar-closed-block span {
    padding: 5px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.pro-calendar .calendar-event {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    min-height: 62px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--event-color, #4f46e5) 24%, #dbe4ef) !important;
    border-left: 3px solid var(--event-color, #4f46e5) !important;
    border-radius: 13px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 252, 255, .97)) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .07) !important;
}

.pro-calendar .calendar-event .event-time {
    width: 44px !important;
    min-width: 44px !important;
    height: 30px !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--event-color, #4f46e5) 9%, #f8fafc) !important;
    color: color-mix(in srgb, var(--event-color, #4f46e5) 68%, #1f2937) !important;
    font-size: 12px !important;
}

.pro-calendar .calendar-event strong {
    font-size: 13.5px !important;
    font-weight: 900 !important;
}

.pro-calendar .calendar-event .event-client {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.pro-calendar .calendar-event .event-payment {
    min-height: 24px !important;
    min-width: 64px !important;
    max-width: 82px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
}

.pro-calendar .calendar-event .event-payment.is-paid {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

.pro-calendar .calendar-event .event-payment.is-pending {
    border-color: #fed7aa !important;
    background: #fff7ed !important;
    color: #c2410c !important;
}

/* CALENDAR EVENT COMPOSITION 2026-06-11 - clearer appointment card rhythm. */
.pro-calendar .calendar-event {
    grid-template-columns: 52px minmax(0, 1fr) 78px !important;
    grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
    grid-template-areas:
        "time title payment"
        "time client payment" !important;
    align-items: center !important;
    align-content: center !important;
    gap: 2px 10px !important;
    min-height: 66px !important;
    padding: 11px 12px !important;
}

.pro-calendar .calendar-event .event-time {
    grid-area: time !important;
    align-self: center !important;
    justify-self: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
}

.pro-calendar .calendar-event strong {
    grid-area: title !important;
    align-self: end !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event .event-client {
    grid-area: client !important;
    align-self: start !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event .event-meta {
    display: none !important;
}

.pro-calendar .calendar-event .event-payment {
    grid-area: payment !important;
    align-self: center !important;
    justify-self: center !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* APPOINTMENT WORKFLOW PANEL 2026-06-11 - notes, clearer states and payment flow. */
.appointment-popover {
    padding: 24px !important;
}

.popover-panel {
    width: min(760px, calc(100vw - 32px)) !important;
    padding: 24px !important;
    border-radius: 22px !important;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .22) !important;
}

.appointment-popover-head {
    align-items: start !important;
    margin: 0 50px 18px 0 !important;
}

.appointment-popover-head h2 {
    max-width: 480px !important;
    line-height: 1.05 !important;
}

.appointment-popover-head span {
    align-self: start !important;
    min-width: 152px !important;
    text-align: center !important;
}

.appointment-popover-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.appointment-popover-summary article {
    min-height: 74px !important;
    padding: 14px 15px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 15px !important;
    background: #f8fafc !important;
}

.appointment-popover-summary article:nth-child(2n),
.appointment-popover-summary article:nth-last-child(-n + 2) {
    border: 1px solid #dbe4ef !important;
}

.appointment-contact-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.appointment-contact-row span {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.appointment-contact-row small,
.appointment-notes-form span,
.appointment-notes-form small {
    color: #667085 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.appointment-contact-row strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.appointment-notes-form {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border: 1px solid #d8eee9 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f7fffc 0%, #ffffff 100%) !important;
}

.appointment-notes-form label {
    display: grid !important;
    gap: 8px !important;
}

.appointment-notes-form textarea {
    width: 100% !important;
    min-height: 92px !important;
    resize: vertical !important;
    border: 1px solid #cfe0ec !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.appointment-notes-form textarea:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .12) !important;
    outline: 0 !important;
}

.appointment-notes-form > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.appointment-notes-form .button {
    min-height: 36px !important;
    padding-inline: 16px !important;
}

.appointment-status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-bottom: 14px !important;
    padding: 6px !important;
}

.status-chip {
    min-height: 42px !important;
    font-size: 13px !important;
}

.status-chip.is-active {
    border-color: #14b8a6 !important;
    background: #ccfbf1 !important;
    color: #0f766e !important;
}

.appointment-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.appointment-action-row [data-popover-payment] {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
}

@media (max-width: 860px) {
    .appointment-popover-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .appointment-popover {
        padding: 12px !important;
    }

    .appointment-popover-summary,
    .appointment-contact-row,
    .appointment-status-row,
    .appointment-action-row {
        grid-template-columns: 1fr !important;
    }

    .appointment-notes-form > div {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* CENTER SERVICES CATALOG 2026-06-17 - readable operational cards. */
.service-catalog-panel {
    overflow: hidden !important;
}

.service-catalog-panel .panel-heading.split {
    align-items: center !important;
    gap: 18px !important;
}

.service-catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.service-catalog-card {
    display: grid !important;
    grid-template-rows: auto minmax(104px, auto) auto !important;
    gap: 14px !important;
    min-width: 0 !important;
    min-height: 286px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 253, .95)),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--service-color, #0f766e) 12%, transparent), transparent 18rem) !important;
    padding: 16px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07) !important;
}

.service-catalog-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.service-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    border: 1px solid color-mix(in srgb, var(--service-color, #0f766e) 34%, #ffffff) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--service-color, #0f766e) 14%, #ffffff) !important;
    color: #0f766e !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.service-status-pill.is-locked {
    border-color: #e5e7eb !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.service-edit-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #0f766e !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.service-edit-link:hover {
    border-color: #bde8df !important;
    background: #ecfdf5 !important;
}

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

.service-catalog-main h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    margin: 0 0 6px !important;
    color: #0f172a !important;
    font-size: 23px !important;
    font-weight: 830 !important;
    line-height: 1.08 !important;
}

.service-catalog-meta {
    margin: 0 0 10px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.3 !important;
}

.service-catalog-description {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    margin: 0 !important;
    color: #52627a !important;
    font-size: 13px !important;
    font-weight: 520 !important;
    line-height: 1.45 !important;
}

.service-catalog-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

.service-catalog-facts div {
    min-width: 0 !important;
    border: 1px solid #e2eaf3 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .78) !important;
    padding: 9px 10px !important;
}

.service-catalog-facts div.is-wide {
    grid-column: 1 / -1 !important;
}

.service-catalog-facts dt {
    margin: 0 0 3px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 820 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.service-catalog-facts dd {
    min-width: 0 !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
}

.service-catalog-empty {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

@media (max-width: 760px) {
    .service-catalog-panel .panel-heading.split {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .service-catalog-panel .panel-heading .button {
        width: 100% !important;
    }

    .service-catalog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ROOMS MODULE DEMO 2026-06-17 - two-layer room management experience. */
.rooms-demo-shell,
.room-manage-shell {
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 24px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.rooms-demo-toolbar,
.room-manage-header,
.room-day-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-width: 0 !important;
}

.rooms-demo-toolbar {
    margin-bottom: 24px !important;
}

.rooms-demo-toolbar h2,
.room-manage-header h2 {
    margin: 0 0 4px !important;
    color: #0f172a !important;
    font-size: 26px !important;
    font-weight: 820 !important;
    line-height: 1.1 !important;
}

.rooms-demo-toolbar p,
.room-manage-header p,
.room-breadcrumb {
    margin: 0 !important;
    color: #5b6b84 !important;
    font-size: 13px !important;
    font-weight: 520 !important;
}

.rooms-demo-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 18px !important;
}

.room-demo-card,
.room-demo-new-card {
    min-width: 0 !important;
    border: 1px solid #dce6f2 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06) !important;
}

.room-demo-card {
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
}

.room-demo-photo {
    position: relative !important;
    min-height: 126px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid #d7e2ee !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.42)),
        linear-gradient(135deg, #e5ebe8, #f7eee3 45%, #d9c7ae) !important;
}

.room-demo-photo::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12) !important;
}

.room-demo-photo::after {
    content: "" !important;
    position: absolute !important;
    right: 28px !important;
    top: 18px !important;
    width: 44px !important;
    height: 70px !important;
    border-radius: 999px 999px 12px 12px !important;
    background: linear-gradient(180deg, #8fb8a4, #2f6f5d) !important;
}

.room-demo-photo span {
    position: absolute !important;
    left: 36px !important;
    bottom: 32px !important;
    width: 120px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: rgba(240, 245, 247, .92) !important;
}

.room-demo-photo i {
    position: absolute !important;
    right: 96px !important;
    bottom: 28px !important;
    width: 64px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(163, 128, 91, .42) !important;
}

.room-demo-photo-2 {
    background:
        linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.34)),
        linear-gradient(135deg, #dfe8e4, #f8f0e8 42%, #c9b89f) !important;
}

.room-demo-photo-3 {
    background:
        linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.24)),
        linear-gradient(135deg, #d0be9f, #f2dec1 45%, #7c6448) !important;
}

.room-demo-body h3 {
    margin: 0 0 6px !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 820 !important;
    line-height: 1.18 !important;
}

.room-demo-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 38px !important;
    overflow: hidden !important;
    margin: 0 0 12px !important;
    color: #5b6b84 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.room-demo-body dl {
    display: grid !important;
    gap: 9px !important;
    margin: 0 !important;
}

.room-demo-body dl div {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.room-demo-body dt {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 740 !important;
}

.room-demo-body dd {
    min-width: 0 !important;
    margin: 0 !important;
    color: #172036 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    overflow-wrap: anywhere !important;
}

.room-demo-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.room-demo-new-card {
    display: grid !important;
    place-items: center !important;
    min-height: 138px !important;
    border-style: dashed !important;
    color: #315df5 !important;
    text-align: center !important;
}

.room-demo-new-card span {
    font-size: 30px !important;
    font-weight: 420 !important;
}

.room-demo-new-card strong {
    font-size: 13px !important;
}

.room-config-drawer[hidden],
.room-booking-modal[hidden] {
    display: none !important;
}

.room-drawer-backdrop,
.room-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 70 !important;
    background: rgba(15, 23, 42, .54) !important;
    backdrop-filter: blur(3px) !important;
}

.room-drawer-panel {
    position: fixed !important;
    z-index: 71 !important;
    top: 28px !important;
    right: 28px !important;
    bottom: 28px !important;
    width: min(620px, calc(100vw - 48px)) !important;
    overflow: hidden !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .24) !important;
}

.room-drawer-panel form {
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    height: 100% !important;
}

.room-drawer-header,
.room-drawer-footer,
.room-booking-card header,
.room-booking-card footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 20px !important;
}

.room-drawer-header span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    text-transform: uppercase !important;
}

.room-drawer-header h2,
.room-booking-card h2 {
    margin: 2px 0 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 820 !important;
}

.room-drawer-header button,
.room-booking-card header button {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

.room-drawer-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.room-drawer-tabs button {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 790 !important;
}

.room-drawer-tabs button.is-active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.room-drawer-section {
    display: none !important;
    overflow: auto !important;
    padding: 20px !important;
}

.room-drawer-section.is-active {
    display: grid !important;
    gap: 16px !important;
    align-content: start !important;
}

.room-stepper-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.room-stepper {
    display: inline-grid !important;
    grid-template-columns: 42px 58px 42px !important;
    overflow: hidden !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 10px !important;
}

.room-stepper button,
.room-stepper input {
    height: 40px !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
}

.room-resource-editor {
    display: grid !important;
    gap: 10px !important;
}

.room-resource-editor label {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

.room-check-list {
    display: grid !important;
    gap: 10px !important;
}

.room-check-list label {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    padding: 12px !important;
}

.room-check-list strong,
.room-check-list small {
    display: block !important;
}

.room-check-list strong {
    color: #0f172a !important;
    font-size: 13px !important;
}

.room-check-list small {
    color: #64748b !important;
    font-size: 12px !important;
}

.room-drawer-footer,
.room-booking-card footer {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 0 !important;
    justify-content: flex-end !important;
}

.room-manage-header {
    margin-bottom: 16px !important;
}

.room-manage-actions {
    display: flex !important;
    gap: 10px !important;
}

.room-day-toolbar {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 14px !important;
    background: #f8fbfd !important;
    padding: 12px !important;
}

.room-day-toolbar > strong {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    padding: 0 16px !important;
}

.room-legend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.room-legend i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
}

.room-legend .is-free { background: #b7e7bf !important; }
.room-legend .is-booked { background: #9fb3ff !important; }
.room-legend .is-blocked { background: #f38b96 !important; }

.room-resource-calendar {
    display: grid !important;
    grid-template-columns: 70px repeat(auto-fit, minmax(230px, 1fr)) !important;
    overflow: auto !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

.room-time-column,
.room-resource-lane {
    min-width: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.room-calendar-corner,
.room-resource-lane header {
    height: 66px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    padding: 14px !important;
}

.room-calendar-corner {
    display: grid !important;
    place-items: center !important;
    color: #0f172a !important;
    font-weight: 830 !important;
}

.room-time-cell {
    height: var(--slot-height) !important;
    border-bottom: 1px solid #eef2f7 !important;
    color: #516079 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

.room-resource-lane header strong,
.room-resource-lane header small {
    display: block !important;
}

.room-resource-lane header strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 820 !important;
}

.room-resource-lane header small {
    color: #64748b !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

.room-resource-grid {
    position: relative !important;
    min-height: calc(var(--slot-height) * 12) !important;
    background: #f7fff8 !important;
}

.room-free-slot {
    display: block !important;
    height: var(--slot-height) !important;
    border-bottom: 1px solid #e8f0e7 !important;
    background: linear-gradient(135deg, rgba(39, 174, 96, .09), rgba(39, 174, 96, .04)) !important;
}

.room-booking-block {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
    border: 1px solid #91a5ff !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #eef2ff, #dfe6ff) !important;
    color: #172554 !important;
    padding: 8px 10px !important;
    box-shadow: 0 10px 18px rgba(79, 70, 229, .12) !important;
}

.room-booking-block.is-cancelled {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #991b1b !important;
}

.room-booking-block.is-completed {
    border-color: #bbf7d0 !important;
    background: #ecfdf5 !important;
    color: #166534 !important;
}

.room-booking-block span,
.room-booking-block small {
    font-size: 11px !important;
    font-weight: 650 !important;
}

.room-booking-block strong {
    font-size: 13px !important;
    font-weight: 850 !important;
}

.room-empty-lane {
    display: grid !important;
    place-items: center !important;
    min-height: 260px !important;
    padding: 24px !important;
    color: #64748b !important;
}

.room-booking-card {
    position: fixed !important;
    z-index: 71 !important;
    left: 50% !important;
    top: 50% !important;
    width: min(900px, calc(100vw - 40px)) !important;
    max-height: calc(100vh - 56px) !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    overflow: hidden !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .26) !important;
}

.room-booking-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: auto !important;
}

.room-booking-grid section {
    display: grid !important;
    gap: 14px !important;
    align-content: start !important;
    padding: 20px !important;
}

.room-booking-grid section + section {
    border-left: 1px solid #e2e8f0 !important;
}

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

body.room-drawer-open,
body.room-modal-open {
    overflow: hidden !important;
}

@media (max-width: 900px) {
    .rooms-demo-toolbar,
    .room-manage-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .room-manage-actions,
    .room-demo-actions,
    .room-booking-grid,
    .room-time-fields {
        grid-template-columns: 1fr !important;
    }

    .room-booking-grid section + section {
        border-left: 0 !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .room-drawer-tabs {
        grid-template-columns: 1fr !important;
    }
}

/* EMPLOYEE ACCESS DRAWER 2026-06-17 - worker roles and permission matrix. */
.employee-access-shell {
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 24px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.employee-access-header,
.employee-access-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.employee-access-header {
    margin-bottom: 22px !important;
}

.employee-access-header h2 {
    margin: 0 0 4px !important;
    color: #0f172a !important;
    font-size: 26px !important;
    font-weight: 820 !important;
}

.employee-access-header p {
    margin: 0 !important;
    color: #5b6b84 !important;
    font-size: 13px !important;
}

.employee-access-filters {
    justify-content: flex-start !important;
    margin-bottom: 16px !important;
}

.employee-access-filters label {
    display: grid !important;
    gap: 6px !important;
    min-width: min(280px, 100%) !important;
}

.employee-access-table {
    overflow: hidden !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.employee-access-table table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.employee-access-table th,
.employee-access-table td {
    border-bottom: 1px solid #e6edf5 !important;
    padding: 14px 16px !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.employee-access-table th {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 840 !important;
    text-transform: uppercase !important;
}

.employee-access-table > p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    padding: 14px 16px !important;
}

.employee-person-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.employee-avatar,
.employee-drawer-avatar {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--employee-color, #14b8a6) 18%, #ffffff) !important;
    color: color-mix(in srgb, var(--employee-color, #14b8a6) 78%, #0f172a) !important;
    font-weight: 860 !important;
}

.employee-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
}

.employee-person-cell strong,
.employee-person-cell small {
    display: block !important;
}

.employee-person-cell strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 820 !important;
}

.employee-person-cell small {
    color: #64748b !important;
    font-size: 12px !important;
}

.employee-role-badge,
.employee-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 820 !important;
}

.employee-role-badge {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.employee-status-pill {
    border: 1px solid #bbf7d0 !important;
    background: #dcfce7 !important;
    color: #15803d !important;
}

.employee-status-pill.is-muted {
    border-color: #e2e8f0 !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.employee-row-actions {
    display: flex !important;
    gap: 10px !important;
}

.employee-row-actions button {
    background: transparent !important;
}

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

.employee-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(3px) !important;
}

.employee-drawer-panel {
    position: fixed !important;
    z-index: 81 !important;
    top: 0 !important;
    right: 0 !important;
    width: min(760px, calc(100vw - 24px)) !important;
    height: 100vh !important;
    overflow: hidden !important;
    border-left: 1px solid #dbe4ef !important;
    background: #ffffff !important;
    box-shadow: -28px 0 80px rgba(15, 23, 42, .22) !important;
}

.employee-drawer-panel form {
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    height: 100% !important;
}

.employee-drawer-title,
.employee-drawer-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 22px !important;
}

.employee-drawer-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 840 !important;
}

.employee-drawer-title button {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-weight: 820 !important;
}

.employee-drawer-profile {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
}

.employee-drawer-avatar {
    width: 70px !important;
    height: 70px !important;
    font-size: 20px !important;
}

.employee-drawer-profile strong,
.employee-drawer-profile small,
.employee-drawer-profile em {
    display: block !important;
}

.employee-drawer-profile strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 850 !important;
}

.employee-drawer-profile small {
    color: #64748b !important;
    font-size: 13px !important;
    margin-top: 2px !important;
}

.employee-drawer-profile em {
    width: max-content !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 820 !important;
}

.employee-drawer-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 22px !important;
}

.employee-drawer-tabs button {
    min-height: 44px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 820 !important;
}

.employee-drawer-tabs button.is-active {
    border-color: #4f46e5 !important;
    color: #4f46e5 !important;
}

.employee-drawer-section {
    display: none !important;
    overflow: auto !important;
    padding: 22px !important;
}

.employee-drawer-section.is-active {
    display: grid !important;
    gap: 18px !important;
    align-content: start !important;
}

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

.employee-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
}

.employee-role-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}

.employee-role-card {
    border: 1px solid #dbe6f1 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: #52627a !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.employee-permission-matrix {
    overflow: auto !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.employee-permission-matrix table {
    width: 100% !important;
    min-width: 620px !important;
    border-collapse: collapse !important;
}

.employee-permission-matrix th,
.employee-permission-matrix td {
    border-bottom: 1px solid #e7eef6 !important;
    border-right: 1px solid #eef2f7 !important;
    padding: 10px 12px !important;
    text-align: center !important;
}

.employee-permission-matrix th:first-child,
.employee-permission-matrix td:first-child {
    text-align: left !important;
    color: #172036 !important;
    font-weight: 820 !important;
}

.employee-permission-matrix input {
    width: 16px !important;
    height: 16px !important;
    accent-color: #4f46e5 !important;
}

.employee-room-access {
    display: grid !important;
    gap: 8px !important;
}

.employee-room-access select {
    min-height: 84px !important;
}

.employee-room-access small,
.employee-empty-panel span {
    color: #64748b !important;
    font-size: 12px !important;
}

.employee-empty-panel {
    display: grid !important;
    gap: 6px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    padding: 18px !important;
}

.employee-drawer-footer {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 0 !important;
    justify-content: flex-end !important;
}

body.employee-drawer-open {
    overflow: hidden !important;
}

@media (max-width: 780px) {
    .employee-access-header,
    .employee-access-filters {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .employee-drawer-tabs,
    .employee-form-grid,
    .employee-role-row {
        grid-template-columns: 1fr !important;
    }

    .employee-access-table {
        overflow-x: auto !important;
    }
}

/* EMPLOYEE VISUAL POLISH 2026-06-17 - closer to the provided worker demo. */
.employee-access-shell {
    background:
        radial-gradient(circle at 12% 0%, rgba(79, 70, 229, .08), transparent 26rem),
        radial-gradient(circle at 100% 8%, rgba(20, 184, 166, .08), transparent 24rem),
        rgba(255, 255, 255, .97) !important;
}

.employee-access-header {
    padding-bottom: 4px !important;
}

.employee-access-header .button.primary {
    min-height: 44px !important;
    border-radius: 12px !important;
    padding-inline: 18px !important;
    box-shadow: 0 16px 36px rgba(15, 118, 110, .18) !important;
}

.employee-access-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}

.employee-access-kpis article {
    border: 1px solid #dbe6f1 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .84) !important;
    padding: 14px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
}

.employee-access-kpis span,
.employee-access-kpis small {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 780 !important;
}

.employee-access-kpis strong {
    display: block !important;
    margin: 4px 0 2px !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
}

.employee-access-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .82fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.employee-directory-card,
.employee-preview-card {
    min-width: 0 !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
}

.employee-directory-card {
    padding: 16px !important;
}

.employee-access-filters {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) 230px !important;
    margin: 0 0 14px !important;
}

.employee-access-filters input,
.employee-access-filters select {
    min-height: 44px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.employee-access-table {
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}

.employee-list-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    border: 1px solid #dfe8f3 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    padding: 12px !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}

.employee-list-row:hover,
.employee-list-row.is-selected {
    border-color: #a5b4fc !important;
    background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
    box-shadow: 0 16px 34px rgba(79, 70, 229, .10) !important;
    transform: translateY(-1px) !important;
}

.employee-list-row.is-inactive {
    opacity: .72 !important;
}

.employee-list-main {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
}

.employee-list-main span:last-child {
    min-width: 0 !important;
}

.employee-list-main strong,
.employee-list-main small {
    display: block !important;
}

.employee-list-main strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.employee-list-main small {
    color: #52627a !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.employee-list-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.employee-list-meta > span:not(.employee-role-badge):not(.employee-status-pill) {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #52627a !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

.employee-row-actions .table-action,
.employee-row-actions button.table-action {
    min-height: 34px !important;
    border: 1px solid #cbd8e6 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 820 !important;
}

.employee-preview-card {
    position: sticky !important;
    top: 18px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.employee-preview-empty,
.employee-preview-content {
    padding: 20px !important;
}

.employee-preview-empty {
    display: grid !important;
    min-height: 360px !important;
    place-content: center !important;
    gap: 6px !important;
    color: #64748b !important;
    text-align: center !important;
}

.employee-preview-empty span {
    justify-self: center !important;
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 830 !important;
}

.employee-preview-empty strong {
    color: #0f172a !important;
    font-size: 19px !important;
    font-weight: 860 !important;
}

.employee-preview-content {
    display: grid !important;
    gap: 16px !important;
}

.employee-preview-empty[hidden],
.employee-preview-content[hidden] {
    display: none !important;
}

.employee-preview-content header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: -20px -20px 0 !important;
    padding: 22px 20px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(20, 184, 166, .22), transparent 12rem),
        linear-gradient(135deg, #f8fbff, #ffffff) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.employee-preview-content header strong,
.employee-preview-content header small,
.employee-preview-content header em {
    display: block !important;
}

.employee-preview-content header strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 880 !important;
}

.employee-preview-content header small {
    color: #64748b !important;
    font-size: 12px !important;
}

.employee-preview-content header em {
    width: max-content !important;
    margin-top: 7px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 830 !important;
}

.employee-preview-content dl {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
}

.employee-preview-content dl div {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    border: 1px solid #e2eaf3 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    padding: 10px 12px !important;
}

.employee-preview-content dt {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.employee-preview-content dd {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    overflow-wrap: anywhere !important;
}

.employee-preview-permissions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.employee-preview-permissions span {
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 810 !important;
}

.employee-preview-card .button.primary {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
}

/* GLOBAL PRODUCT POLISH 2026-06-17 - shared SaaS surfaces, no backend logic touched. */
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) {
    background: #eef6f5 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .main {
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .13), transparent 27rem),
        radial-gradient(circle at 100% 4%, rgba(79, 70, 229, .08), transparent 25rem),
        linear-gradient(180deg, #f8fbfb 0%, #f2f7f7 100%) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar {
    border: 1px solid rgba(203, 213, 225, .86) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(245, 253, 251, .92)) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .07) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar .eyebrow {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar h1 {
    font-weight: 880 !important;
    letter-spacing: 0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .user-badge {
    background: rgba(255, 255, 255, .9) !important;
    border-color: #dbe6f1 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .metric-card,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .chart-card,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .form-card {
    border: 1px solid rgba(203, 213, 225, .9) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .06) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .nested-panel {
    background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .96)) !important;
    box-shadow: none !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading {
    align-items: start !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading h2 {
    color: #0f172a !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    font-weight: 880 !important;
    letter-spacing: 0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .notes {
    color: #64748b !important;
    line-height: 1.55 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action {
    border-radius: 12px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button:hover,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action:hover {
    transform: translateY(-1px) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button.primary,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action.primary {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    border-color: #0f766e !important;
    box-shadow: 0 16px 32px rgba(15, 118, 110, .18) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) input,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) select,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) textarea {
    border: 1px solid #cbd8e6 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) input:focus,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) select:focus,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) textarea:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .13) !important;
    outline: none !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap {
    overflow: hidden !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .045) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap td {
    border-top: 1px solid #e6edf5 !important;
    color: #0f172a !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap tbody tr {
    transition: background 160ms ease !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap tbody tr:hover {
    background: #f7fbfb !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .actions a:not(.button):not(.table-action),
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .actions button:not(.button):not(.table-action) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #cbd8e6 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .owner-kpi-grid article,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-summary-grid article {
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .7)) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .055) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .owner-kpi-grid article strong,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-summary-grid article strong {
    color: #0f172a !important;
    letter-spacing: 0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .badge {
    border: 1px solid rgba(20, 184, 166, .22) !important;
    border-radius: 999px !important;
    background: #e9fbf7 !important;
    color: #0f766e !important;
    font-weight: 850 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .empty-state {
    border: 1px dashed #cbd8e6 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: #64748b !important;
}

@media (max-width: 900px) {
    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading.split {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading.split .button {
        width: 100% !important;
    }
}

.employee-drawer-panel {
    width: min(820px, calc(100vw - 24px)) !important;
}

.employee-drawer-profile {
    background:
        radial-gradient(circle at 88% 10%, rgba(20, 184, 166, .16), transparent 15rem),
        #ffffff !important;
}

.employee-permission-matrix th {
    background: #f8fafc !important;
}

.employee-room-access select {
    min-height: 116px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

@media (max-width: 1180px) {
    .employee-access-layout {
        grid-template-columns: 1fr !important;
    }

    .employee-preview-card {
        position: static !important;
    }
}

@media (max-width: 820px) {
    .employee-access-kpis,
    .employee-access-filters,
    .employee-list-row {
        grid-template-columns: 1fr !important;
    }

    .employee-row-actions {
        justify-content: stretch !important;
    }

    .employee-row-actions .table-action,
    .employee-row-actions button.table-action {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* EMPLOYEE WIZARD UX 2026-06-17 - visual worker setup, same backend permissions. */
.employee-drawer-panel {
    width: min(1080px, calc(100vw - 24px)) !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(20, 184, 166, .12), transparent 22rem),
        linear-gradient(180deg, #ffffff, #f8fbfb) !important;
}

.employee-drawer-panel form {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.employee-wizard-title {
    min-height: 76px !important;
    padding: 18px 24px !important;
}

.employee-wizard-title > div {
    display: grid !important;
    gap: 3px !important;
}

.employee-wizard-title span {
    color: #0f766e !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.employee-wizard-title h2 {
    font-size: 24px !important;
    font-weight: 920 !important;
}

.employee-wizard-scroll {
    display: grid !important;
    gap: 16px !important;
    align-content: start !important;
    overflow: auto !important;
    padding: 20px 24px 24px !important;
}

.employee-wizard-block {
    display: grid !important;
    gap: 14px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    padding: 18px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .045) !important;
}

.employee-wizard-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.employee-wizard-heading > span {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
    background: #e9fbf7 !important;
    color: #0f766e !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.employee-wizard-heading h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.employee-wizard-heading p,
.employee-schedule-toolbar small {
    margin: 2px 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.employee-person-layout {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.employee-person-avatar {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 12px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    padding: 16px !important;
}

.employee-person-avatar .employee-drawer-avatar {
    width: 78px !important;
    height: 78px !important;
}

.employee-person-avatar label,
.employee-person-fields label,
.employee-commission-grid label {
    display: grid !important;
    gap: 7px !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

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

.employee-person-fields .employee-status-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    text-transform: none !important;
}

.employee-person-fields .employee-status-toggle input {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    accent-color: #0f766e !important;
}

.employee-person-fields .employee-status-toggle span {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

.employee-role-card-grid,
.employee-module-grid,
.employee-room-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.employee-role-choice,
.employee-module-card,
.employee-room-card {
    position: relative !important;
    display: grid !important;
    gap: 8px !important;
    min-height: 112px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 15px !important;
    cursor: pointer !important;
    text-transform: none !important;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.employee-role-choice:hover,
.employee-module-card:hover,
.employee-room-card:hover,
.employee-role-choice.is-selected,
.employee-module-card.is-selected,
.employee-room-card.is-selected {
    transform: translateY(-1px) !important;
    border-color: #14b8a6 !important;
    background: linear-gradient(135deg, #ffffff, #effdf9) !important;
    box-shadow: 0 16px 34px rgba(15, 118, 110, .11) !important;
}

.employee-role-choice input,
.employee-module-card input,
.employee-room-card input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.employee-role-choice > span,
.employee-module-card > span,
.employee-room-card > span {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #cbd8e6 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}

.employee-module-card > span,
.employee-room-card > span {
    border-radius: 8px !important;
}

.employee-role-choice.is-selected > span,
.employee-module-card.is-selected > span,
.employee-room-card.is-selected > span {
    border-color: #0f766e !important;
    background: #0f766e !important;
    box-shadow: inset 0 0 0 5px #ffffff !important;
}

.employee-role-choice strong,
.employee-module-card strong,
.employee-room-card strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.employee-role-choice small,
.employee-module-card small,
.employee-room-card small {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-transform: none !important;
}

.employee-role-card {
    border: 1px solid #bdeee4 !important;
    border-radius: 14px !important;
    background: #f0fdfa !important;
    color: #0f766e !important;
    font-size: 13px !important;
    font-weight: 820 !important;
    padding: 12px 14px !important;
}

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

.employee-action-card {
    display: grid !important;
    gap: 12px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 15px !important;
}

.employee-action-card header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.employee-action-card header strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.employee-action-card header small {
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.employee-action-card > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.employee-action-card label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    border: 1px solid #e2eaf3 !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
    padding: 0 10px !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 830 !important;
}

.employee-schedule-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

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

.employee-schedule-grid article {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 10px !important;
}

.employee-schedule-grid article.is-closed {
    background: #f8fafc !important;
    opacity: .72 !important;
}

.employee-schedule-grid strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.employee-schedule-grid label {
    display: grid !important;
    gap: 4px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.employee-schedule-grid input {
    min-height: 34px !important;
    border-radius: 10px !important;
    padding-inline: 8px !important;
}

.employee-schedule-grid article > span {
    border-radius: 999px !important;
    background: #e9fbf7 !important;
    color: #0f766e !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.employee-schedule-grid article.is-closed > span {
    background: #e2e8f0 !important;
    color: #64748b !important;
}

.employee-commission-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 180px !important;
    gap: 12px !important;
}

.employee-summary-card {
    background:
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .13), transparent 17rem),
        #ffffff !important;
}

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

.employee-summary-grid article {
    display: grid !important;
    gap: 10px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 14px !important;
    background: rgba(248, 250, 252, .9) !important;
    padding: 14px !important;
}

.employee-summary-grid article strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 920 !important;
}

.employee-summary-grid article div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.employee-summary-grid span,
.employee-summary-grid small {
    border-radius: 999px !important;
    background: #e9fbf7 !important;
    color: #0f766e !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.employee-drawer-footer {
    padding: 16px 24px !important;
    background: rgba(255, 255, 255, .96) !important;
}

@media (max-width: 1180px) {
    .employee-role-card-grid,
    .employee-module-grid,
    .employee-room-card-grid,
    .employee-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .employee-action-grid,
    .employee-schedule-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .employee-person-layout,
    .employee-person-fields,
    .employee-role-card-grid,
    .employee-module-grid,
    .employee-room-card-grid,
    .employee-action-grid,
    .employee-action-card > div,
    .employee-schedule-grid,
    .employee-commission-grid,
    .employee-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .employee-schedule-grid article {
        grid-template-columns: 1fr !important;
    }

    .employee-schedule-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* OWNER DASHBOARD PRO 2026-06-17 - navigable daily command center. */
.main:has(.owner-dashboard-pro) > .topbar {
    display: none !important;
}

/* EMPLOYEE PRO PANEL 2026-06-17 - demo-style worker management with real roles. */
.main:has(.employee-pro-shell) > .topbar {
    display: none !important;
}

.main:has(.employee-pro-shell) {
    padding: 0 !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .11), transparent 28rem),
        radial-gradient(circle at 100% 0%, rgba(79, 70, 229, .08), transparent 26rem),
        linear-gradient(180deg, #f8fbff, #f3f8f7) !important;
}

.employee-pro-shell {
    display: grid !important;
    gap: 20px !important;
    padding: clamp(18px, 2vw, 30px) !important;
}

.employee-pro-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.employee-pro-hero span,
.employee-pro-hero p,
.employee-pro-form-section label,
.employee-pro-muted {
    color: #5f6f89 !important;
}

.employee-pro-hero > div > span {
    display: block !important;
    margin-bottom: 5px !important;
    color: #0f766e !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.employee-pro-hero h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(28px, 2.2vw, 38px) !important;
    font-weight: 920 !important;
    letter-spacing: 0 !important;
}

.employee-pro-hero p {
    margin: 5px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.employee-new-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 46px !important;
    border-radius: 13px !important;
    padding-inline: 18px !important;
    box-shadow: 0 18px 36px rgba(15, 118, 110, .22) !important;
}

.employee-new-button span {
    color: inherit !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

.employee-pro-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.employee-pro-kpis article {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    min-height: 116px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .92) !important;
    padding: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
}

.employee-kpi-icon,
.employee-role-orb {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    border-radius: 16px !important;
    font-weight: 940 !important;
}

.employee-kpi-icon {
    width: 54px !important;
    height: 54px !important;
    font-size: 18px !important;
}

.employee-pro-kpis small,
.employee-pro-kpis em {
    display: block !important;
    font-style: normal !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.employee-pro-kpis strong {
    display: block !important;
    margin: 4px 0 2px !important;
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 920 !important;
    line-height: 1 !important;
}

.tone-violet .employee-kpi-icon,
.employee-role-orb.tone-violet {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.tone-amber .employee-kpi-icon,
.employee-role-orb.tone-amber {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.tone-teal .employee-kpi-icon,
.employee-role-orb.tone-cyan {
    background: #ccfbf1 !important;
    color: #0f766e !important;
}

.tone-rose .employee-kpi-icon,
.employee-role-orb.tone-pink {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

.employee-role-orb.tone-blue {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.employee-role-orb.tone-green {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.employee-role-orb.tone-slate {
    background: #e2e8f0 !important;
    color: #334155 !important;
}

.employee-pro-board,
.employee-featured-roles {
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06) !important;
}

.employee-pro-board {
    padding: 18px !important;
}

.employee-pro-tabs,
.employee-pro-drawer-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.employee-pro-tabs button,
.employee-pro-drawer-tabs button {
    position: relative !important;
    min-height: 46px !important;
    border: 0 !important;
    background: transparent !important;
    color: #52627a !important;
    padding: 0 2px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.employee-pro-tabs button::after,
.employee-pro-drawer-tabs button::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -1px !important;
    left: 0 !important;
    height: 3px !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
}

.employee-pro-tabs button.is-active,
.employee-pro-drawer-tabs button.is-active {
    color: #4f46e5 !important;
}

.employee-pro-tabs button.is-active::after,
.employee-pro-drawer-tabs button.is-active::after {
    background: #4f46e5 !important;
}

.employee-tab-panel,
.employee-drawer-section {
    display: none !important;
}

.employee-tab-panel.is-active,
.employee-drawer-section.is-active {
    display: block !important;
}

.employee-pro-filters {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 190px 170px auto !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 18px 0 16px !important;
}

.employee-pro-filters label,
.employee-pro-form-section label {
    display: grid !important;
    gap: 7px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.employee-pro-filters input,
.employee-pro-filters select,
.employee-pro-form-section input,
.employee-pro-form-section select {
    min-height: 44px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
}

.employee-pro-table-wrap {
    overflow: hidden !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
}

.employee-pro-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.employee-pro-table th {
    height: 46px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    padding: 0 16px !important;
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 920 !important;
    text-transform: uppercase !important;
}

.employee-pro-table td {
    border-top: 1px solid #e6edf5 !important;
    color: #0f172a !important;
    padding: 13px 16px !important;
    vertical-align: middle !important;
}

.employee-pro-table tbody tr {
    transition: background 160ms ease !important;
}

.employee-pro-table tbody tr:hover {
    background: #f8fbff !important;
}

.employee-pro-person {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.employee-pro-person strong,
.employee-pro-person small,
.employee-contact-stack strong,
.employee-contact-stack small,
.employee-access-stack strong,
.employee-access-stack small {
    display: block !important;
}

.employee-pro-person strong,
.employee-contact-stack strong,
.employee-access-stack strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 870 !important;
}

.employee-pro-person small,
.employee-contact-stack small,
.employee-access-stack small {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.employee-table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 14px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.employee-table-footer div {
    display: inline-flex !important;
    gap: 7px !important;
}

.employee-table-footer button {
    min-width: 34px !important;
    height: 34px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #52627a !important;
    font-weight: 850 !important;
}

.employee-table-footer button.is-active {
    border-color: #4f46e5 !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
}

.employee-role-matrix {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding-top: 18px !important;
}

.employee-role-matrix article,
.employee-featured-roles article {
    border: 1px solid #dbe6f1 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    padding: 16px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045) !important;
}

.employee-role-matrix header {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.employee-role-orb {
    width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
}

.employee-role-matrix strong,
.employee-featured-roles strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.employee-role-matrix small,
.employee-featured-roles small,
.employee-featured-roles p,
.employee-invites-empty p {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.employee-role-matrix article > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 14px !important;
}

.employee-role-matrix article > div:last-child span {
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #52627a !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.employee-invites-empty {
    display: grid !important;
    place-items: center !important;
    gap: 10px !important;
    min-height: 320px !important;
    text-align: center !important;
}

.employee-invites-empty > span {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-size: 22px !important;
    font-weight: 920 !important;
}

.employee-invites-empty strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.employee-invites-empty p {
    max-width: 620px !important;
    margin: 0 !important;
}

.employee-featured-roles {
    display: grid !important;
    gap: 16px !important;
    padding: 18px !important;
}

.employee-featured-roles > header {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: start !important;
}

.employee-featured-roles h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.employee-featured-roles button {
    border: 0 !important;
    background: transparent !important;
    color: #4f46e5 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.employee-featured-roles > div {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.employee-featured-roles article {
    display: grid !important;
    gap: 10px !important;
}

.employee-featured-roles em {
    color: #64748b !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 760 !important;
}

.employee-pro-drawer .employee-drawer-panel {
    width: min(520px, calc(100vw - 20px)) !important;
    background: #ffffff !important;
}

.employee-pro-drawer .employee-drawer-panel form {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.employee-pro-drawer-title {
    min-height: 78px !important;
    padding: 22px 24px 14px !important;
}

.employee-pro-drawer-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.employee-pro-drawer-title p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.employee-pro-drawer-tabs {
    margin: 0 24px !important;
}

.employee-pro-drawer-scroll {
    display: block !important;
    padding: 22px 24px !important;
}

.employee-pro-form-section {
    display: grid !important;
    gap: 14px !important;
    padding-bottom: 22px !important;
}

.employee-pro-form-section + .employee-pro-form-section,
.employee-pro-photo-row + .employee-pro-form-section {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 22px !important;
}

.employee-pro-form-section h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.employee-pro-form-section sup {
    color: #ef4444 !important;
}

.employee-pro-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
}

.employee-pro-photo-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 13px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 20px 0 22px !important;
}

.employee-pro-photo-row strong,
.employee-pro-photo-row small {
    display: block !important;
}

.employee-pro-photo-row strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.employee-pro-photo-row small {
    color: #64748b !important;
    font-size: 12px !important;
}

.employee-commission-inline {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
}

.employee-pro-switch {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: none !important;
}

.employee-pro-switch input {
    position: absolute !important;
    opacity: 0 !important;
}

.employee-pro-switch > span {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    transition: background 160ms ease !important;
}

.employee-pro-switch > span::after {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .24) !important;
    transition: transform 160ms ease !important;
}

.employee-pro-switch input:checked + span {
    background: #4f46e5 !important;
}

.employee-pro-switch input:checked + span::after {
    transform: translateX(20px) !important;
}

.employee-pro-switch strong,
.employee-pro-switch small {
    display: block !important;
    text-transform: none !important;
}

.employee-pro-switch strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 880 !important;
}

.employee-pro-role-picker,
.employee-pro-module-grid {
    grid-template-columns: 1fr !important;
}

.employee-pro-role-picker .employee-role-choice,
.employee-pro-module-grid .employee-module-card {
    min-height: 76px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
}

.employee-pro-role-picker .employee-role-choice small,
.employee-pro-module-grid .employee-module-card small {
    grid-column: 2 !important;
}

.employee-pro-action-grid {
    grid-template-columns: 1fr !important;
}

.employee-pro-action-grid .employee-action-card > div {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.employee-chip-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}

.employee-chip-grid label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    padding: 0 11px !important;
    color: #52627a !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    text-transform: none !important;
}

.employee-chip-grid label.is-selected,
.employee-chip-grid label:has(input:checked) {
    border-color: #14b8a6 !important;
    background: #e9fbf7 !important;
    color: #0f766e !important;
}

.employee-chip-grid input {
    width: 14px !important;
    height: 14px !important;
    min-height: 0 !important;
    accent-color: #0f766e !important;
}

@media (max-width: 1220px) {
    .employee-pro-kpis,
    .employee-featured-roles > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .employee-role-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .employee-pro-hero,
    .employee-table-footer,
    .employee-featured-roles > header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .employee-pro-kpis,
    .employee-pro-filters,
    .employee-featured-roles > div,
    .employee-role-matrix {
        grid-template-columns: 1fr !important;
    }

    .employee-pro-table-wrap {
        overflow-x: auto !important;
    }

    .employee-pro-table {
        min-width: 760px !important;
    }
}

.main:has(.owner-dashboard-pro) {
    padding: 24px 28px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, .07), transparent 24rem),
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, .09), transparent 28rem),
        linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%) !important;
}

.owner-dashboard-pro {
    display: grid !important;
    gap: 18px !important;
}

.owner-dashboard-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.owner-dashboard-hero span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.owner-dashboard-hero h2 {
    margin: 5px 0 6px !important;
    color: #0f172a !important;
    font-size: clamp(25px, 2.1vw, 34px) !important;
    font-weight: 920 !important;
    letter-spacing: 0 !important;
}

.owner-dashboard-hero p {
    margin: 0 !important;
    color: #52627a !important;
    font-size: 15px !important;
}

.owner-date-tools,
.owner-quick-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.owner-date-tools form {
    margin: 0 !important;
}

.owner-date-tools input[type="date"] {
    min-height: 42px !important;
    width: 180px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    font-weight: 850 !important;
}

.owner-quick-actions {
    justify-content: flex-start !important;
}

.owner-dashboard-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.owner-kpi-card {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    min-height: 122px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .94) !important;
    padding: 17px !important;
    color: #0f172a !important;
    text-decoration: none !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .055) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.owner-kpi-card:hover {
    transform: translateY(-2px) !important;
    border-color: #b6c4d6 !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .08) !important;
}

.owner-kpi-card[aria-disabled="true"] {
    pointer-events: none !important;
    opacity: .72 !important;
}

.kpi-icon,
.summary-dot {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
}

.kpi-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 13px !important;
}

.owner-kpi-card small,
.owner-kpi-card em {
    display: block !important;
    color: #52627a !important;
    font-style: normal !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.owner-kpi-card small {
    margin-bottom: 7px !important;
}

.owner-kpi-card strong {
    display: block !important;
    color: #0f172a !important;
    font-size: clamp(21px, 1.45vw, 25px) !important;
    font-weight: 920 !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
}

.owner-kpi-card.violet .kpi-icon,
.summary-dot.violet { background: #ede9fe !important; color: #5b21b6 !important; }
.owner-kpi-card.green .kpi-icon,
.summary-dot.green { background: #dcfce7 !important; color: #15803d !important; }
.owner-kpi-card.amber .kpi-icon,
.summary-dot.amber { background: #fef3c7 !important; color: #b45309 !important; }
.owner-kpi-card.blue .kpi-icon,
.summary-dot.blue { background: #dbeafe !important; color: #1d4ed8 !important; }
.owner-kpi-card.rose .kpi-icon,
.summary-dot.rose { background: #ffe4e6 !important; color: #be123c !important; }

.owner-dashboard-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .95fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.owner-agenda-panel,
.owner-summary-panel,
.owner-reservations-panel,
.owner-pending-panel {
    min-width: 0 !important;
    border-radius: 16px !important;
}

.owner-agenda-list,
.owner-summary-list,
.owner-pending-list,
.owner-reservation-table {
    display: grid !important;
    overflow: hidden !important;
    border: 1px solid #e2eaf3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.owner-agenda-row {
    display: grid !important;
    grid-template-columns: 70px minmax(130px, 1.1fr) minmax(150px, 1.1fr) minmax(150px, 1.1fr) auto 26px !important;
    gap: 14px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-top: 1px solid #e6edf5 !important;
}

.owner-agenda-row:first-child,
.owner-summary-list a:first-child,
.owner-pending-list a:first-child,
.owner-reservation-table a:first-child {
    border-top: 0 !important;
}

.owner-agenda-row a {
    color: inherit !important;
    text-decoration: none !important;
}

.agenda-time {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 920 !important;
}

.owner-agenda-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.owner-agenda-row small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 12px !important;
}

.owner-row-more {
    color: #4f46e5 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.owner-panel-link {
    justify-self: end !important;
    color: #4f46e5 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}

.owner-summary-list a,
.owner-pending-list a {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 70px !important;
    padding: 13px 14px !important;
    border-top: 1px solid #e6edf5 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.summary-dot {
    width: 40px !important;
    height: 40px !important;
    font-size: 13px !important;
}

.owner-summary-list strong,
.owner-pending-list strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.owner-summary-list small,
.owner-pending-list small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 12px !important;
}

.owner-summary-list b,
.owner-pending-list b {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 920 !important;
}

.owner-reservation-table a {
    display: grid !important;
    grid-template-columns: 135px minmax(130px, 1fr) minmax(150px, 1fr) minmax(130px, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 11px 14px !important;
    border-top: 1px solid #e6edf5 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.owner-reservation-table span,
.owner-reservation-table strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.owner-reservation-table span {
    color: #52627a !important;
    font-size: 13px !important;
}

.owner-reservation-table strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.owner-agenda-row:hover,
.owner-summary-list a:hover,
.owner-pending-list a:hover,
.owner-reservation-table a:hover {
    background: #f8fbff !important;
}

@media (max-width: 1380px) {
    .owner-dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .owner-agenda-row {
        grid-template-columns: 62px minmax(130px, 1fr) minmax(145px, 1fr) auto !important;
    }

    .owner-agenda-row > div:nth-of-type(3),
    .owner-agenda-row .owner-row-more {
        display: none !important;
    }
}

@media (max-width: 1120px) {
    .owner-dashboard-hero,
    .owner-dashboard-main {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .owner-date-tools {
        justify-content: flex-start !important;
    }

    .owner-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .main:has(.owner-dashboard-pro) {
        padding: 14px !important;
    }

    .owner-dashboard-kpis,
    .owner-dashboard-main {
        grid-template-columns: 1fr !important;
    }

    .owner-kpi-card {
        min-height: 104px !important;
    }

    .owner-agenda-row,
    .owner-reservation-table a {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .owner-agenda-row .badge,
    .owner-reservation-table .badge {
        justify-self: start !important;
    }
}

/* OWNER DASHBOARD CORRECTION 1.0 2026-06-17 - demo-like command center. */
body:has(.owner-dashboard-pro) .sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #101a2d 100%) !important;
}

body:has(.owner-dashboard-pro) .nav a.active {
    background: linear-gradient(135deg, #5b21f6, #6d28d9) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(91, 33, 246, .28) !important;
}

body:has(.owner-dashboard-pro) .nav a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
}

.main:has(.owner-dashboard-pro) {
    padding: 28px 34px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 33, 246, .055), transparent 28rem),
        linear-gradient(180deg, #fbfcff 0%, #f7f9fd 100%) !important;
}

.owner-dashboard-pro {
    max-width: 1540px !important;
    margin: 0 auto !important;
    gap: 20px !important;
}

.owner-dashboard-hero {
    min-height: 54px !important;
}

.owner-dashboard-hero h2 {
    margin: 0 0 8px !important;
    font-size: clamp(24px, 1.7vw, 32px) !important;
    line-height: 1.08 !important;
}

.owner-dashboard-hero p {
    font-size: 15px !important;
}

.owner-date-tools {
    align-items: center !important;
    gap: 10px !important;
}

.owner-date-tools .icon-button,
.owner-date-tools .button,
.owner-notification-button {
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #dbe6f1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04) !important;
}

.owner-date-picker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    min-width: 230px !important;
    height: 48px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04) !important;
}

.owner-date-picker svg,
.owner-notification-button svg,
.owner-action-chip svg,
.kpi-icon svg,
.summary-dot svg,
.owner-row-more svg {
    width: 18px !important;
    height: 18px !important;
}

.owner-date-picker input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.owner-notification-button {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    text-decoration: none !important;
}

.owner-notification-button span {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: #fb4f6d !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

.owner-quick-actions {
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: -2px !important;
}

.owner-action-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 42px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    padding: 0 14px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04) !important;
}

.owner-action-chip.primary {
    border-color: transparent !important;
    background: linear-gradient(135deg, #5b21f6, #6d28d9) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 34px rgba(91, 33, 246, .24) !important;
}

.owner-dashboard-kpis {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

.owner-kpi-card {
    min-height: 122px !important;
    border-color: #e1e7f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .045) !important;
}

.owner-kpi-card .kpi-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
}

.owner-kpi-card strong {
    font-size: clamp(22px, 1.55vw, 28px) !important;
    margin-bottom: 8px !important;
}

.owner-kpi-card em {
    font-weight: 850 !important;
}

.owner-kpi-card.green em,
.owner-kpi-card.violet em {
    color: #16a34a !important;
}

.owner-kpi-card.rose em,
.owner-kpi-card.blue em {
    color: #4f46e5 !important;
}

.owner-dashboard-main {
    grid-template-columns: minmax(0, 1.62fr) minmax(360px, .95fr) !important;
    gap: 20px !important;
}

.owner-agenda-panel,
.owner-summary-panel,
.owner-reservations-panel,
.owner-pending-panel {
    border: 1px solid #e1e7f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .045) !important;
}

.owner-agenda-panel,
.owner-reservations-panel {
    padding: 20px !important;
}

.owner-summary-panel,
.owner-pending-panel {
    padding: 20px !important;
}

.owner-agenda-list,
.owner-summary-list,
.owner-pending-list,
.owner-reservation-table {
    border-radius: 8px !important;
    border-color: #e6edf5 !important;
}

.owner-agenda-row {
    position: relative !important;
    grid-template-columns: 74px minmax(135px, 1fr) minmax(160px, 1fr) minmax(145px, .95fr) auto 28px !important;
    min-height: 72px !important;
    cursor: pointer !important;
}

.owner-agenda-row:focus-visible {
    outline: 3px solid rgba(91, 33, 246, .18) !important;
    outline-offset: -3px !important;
}

.owner-agenda-row a:hover,
.owner-reservation-table a:hover {
    color: #4f46e5 !important;
}

.agenda-sub-link {
    display: inline-block !important;
    text-decoration: none !important;
}

.owner-row-more {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    color: #64748b !important;
}

.owner-row-more:hover {
    background: #f1f5ff !important;
    color: #4f46e5 !important;
}

.summary-dot {
    width: 44px !important;
    height: 44px !important;
}

.summary-dot.violet,
.owner-kpi-card.violet .kpi-icon { background: #ede9fe !important; color: #5b21f6 !important; }
.summary-dot.green,
.owner-kpi-card.green .kpi-icon { background: #dcfce7 !important; color: #16a34a !important; }
.summary-dot.amber,
.owner-kpi-card.amber .kpi-icon { background: #fef3c7 !important; color: #f59e0b !important; }
.summary-dot.blue,
.owner-kpi-card.blue .kpi-icon { background: #dbeafe !important; color: #2563eb !important; }
.summary-dot.rose,
.owner-kpi-card.rose .kpi-icon { background: #ffe4e6 !important; color: #f43f5e !important; }

.owner-summary-list a,
.owner-pending-list a {
    min-height: 78px !important;
}

.owner-reservation-table {
    border-radius: 8px !important;
}

.owner-reservation-table a {
    grid-template-columns: 150px minmax(140px, 1fr) minmax(170px, 1fr) minmax(140px, 1fr) auto !important;
    min-height: 58px !important;
}

.owner-panel-link {
    color: #4f46e5 !important;
}

@media (max-width: 1380px) {
    .owner-dashboard-main {
        grid-template-columns: minmax(0, 1.45fr) minmax(330px, .9fr) !important;
    }
}

@media (max-width: 1120px) {
    .main:has(.owner-dashboard-pro) {
        padding: 20px !important;
    }

    .owner-dashboard-main {
        grid-template-columns: 1fr !important;
    }
}

/* BILLING PRO PANEL 2026-06-17 - clean finance dashboard inspired by demo. */
.main:has(.billing-pro-shell) > .topbar {
    display: none !important;
}

.main:has(.billing-pro-shell) {
    padding: 0 !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .1), transparent 30rem),
        radial-gradient(circle at 100% 4%, rgba(79, 70, 229, .08), transparent 28rem),
        linear-gradient(180deg, #f8fbff, #f3f8f7) !important;
}

.billing-pro-shell {
    display: grid !important;
    gap: 20px !important;
    padding: clamp(18px, 2vw, 30px) !important;
}

.billing-pro-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.billing-pro-hero > div > span {
    display: block !important;
    margin-bottom: 5px !important;
    color: #0f766e !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.billing-pro-hero h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(28px, 2.2vw, 38px) !important;
    font-weight: 920 !important;
    letter-spacing: 0 !important;
}

.billing-pro-hero p {
    margin: 5px 0 0 !important;
    color: #5f6f89 !important;
    font-size: 15px !important;
}

.billing-period-form {
    display: flex !important;
    align-items: end !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.billing-period-form label {
    display: grid !important;
    gap: 5px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.billing-period-form input {
    min-width: 150px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
}

.billing-pro-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.billing-kpi-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 116px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .94) !important;
    padding: 18px !important;
    text-decoration: none !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
}

.billing-kpi-card > span {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 auto !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.billing-kpi-card.violet > span {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.billing-kpi-card.green > span {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.billing-kpi-card.amber > span {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.billing-kpi-card.blue > span {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.billing-kpi-card.rose > span {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

.billing-kpi-card small,
.billing-kpi-card em {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 760 !important;
}

.billing-kpi-card strong {
    display: block !important;
    margin: 5px 0 4px !important;
    color: #0f172a !important;
    font-size: clamp(20px, 1.35vw, 25px) !important;
    font-weight: 920 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

.billing-kpi-card em.is-positive {
    color: #16a34a !important;
}

.billing-kpi-card em.is-negative {
    color: #e11d48 !important;
}

.billing-pro-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.62fr) minmax(340px, .78fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.billing-pro-main {
    display: grid !important;
    gap: 18px !important;
    min-width: 0 !important;
}

.billing-pro-side {
    position: sticky !important;
    top: 18px !important;
    display: grid !important;
    gap: 18px !important;
    min-width: 0 !important;
}

.billing-pro-card {
    min-width: 0 !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .95) !important;
    padding: 18px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06) !important;
}

.billing-card-header {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.billing-card-header h3,
.billing-pro-card > h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.billing-card-header p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
}

.billing-table-filters {
    display: grid !important;
    grid-template-columns: 190px 160px minmax(220px, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin-bottom: 14px !important;
}

.billing-table-filters label {
    display: grid !important;
    gap: 6px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.billing-table-filters input,
.billing-table-filters select {
    min-height: 42px !important;
    border-radius: 12px !important;
}

.billing-pro-table-wrap {
    overflow: hidden !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
}

.billing-pro-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.billing-pro-table th {
    height: 42px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    padding: 0 13px !important;
    text-align: left !important;
    font-size: 10px !important;
    font-weight: 920 !important;
    text-transform: uppercase !important;
}

.billing-pro-table td {
    border-top: 1px solid #e6edf5 !important;
    color: #0f172a !important;
    padding: 12px 13px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
}

.billing-pro-table tbody tr:hover {
    background: #f8fbff !important;
}

.billing-cell-stack strong,
.billing-cell-stack small {
    display: block !important;
}

.billing-cell-stack strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 860 !important;
}

.billing-cell-stack small {
    color: #64748b !important;
    font-size: 12px !important;
}

.billing-worker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.billing-money-cell {
    white-space: nowrap !important;
}

.billing-worker i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: var(--worker-color, #14B8A6) !important;
}

.billing-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.billing-status.status-paid,
.billing-status.status-completed {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.billing-status.status-issued,
.billing-status.status-pending,
.billing-status.status-scheduled,
.billing-status.status-draft {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.billing-status.status-overdue,
.billing-status.status-void,
.billing-status.status-cancelled,
.billing-status.status-no_show {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

.billing-inline-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.billing-inline-actions form {
    display: contents !important;
}

.billing-table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 13px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.billing-table-footer a {
    color: #4f46e5 !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.billing-summary-card {
    display: grid !important;
    gap: 18px !important;
}

.billing-donut-wrap {
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
}

.billing-donut {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 999px !important;
    background: var(--billing-donut) !important;
}

.billing-donut::after {
    content: "" !important;
    position: absolute !important;
    inset: 38px !important;
    border-radius: inherit !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px #e2e8f0 !important;
}

.billing-donut strong,
.billing-donut span {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    text-align: center !important;
}

.billing-donut strong {
    max-width: 118px !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 920 !important;
    line-height: 1.2 !important;
}

.billing-donut span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

.billing-donut-legend {
    display: grid !important;
    gap: 12px !important;
}

.billing-donut-legend div {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 2px 9px !important;
    align-items: center !important;
}

.billing-donut-legend i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    grid-row: span 2 !important;
}

.billing-donut-legend .legend-paid {
    background: #73c877 !important;
}

.billing-donut-legend .legend-pending {
    background: #f8c44f !important;
}

.billing-donut-legend .legend-cancelled {
    background: #f05262 !important;
}

.billing-donut-legend span {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.billing-donut-legend strong {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.billing-commission-list {
    display: grid !important;
    gap: 13px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 16px !important;
}

.billing-commission-list header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.billing-commission-list header strong,
.billing-quick-card h3 {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.billing-commission-list header a {
    color: #4f46e5 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.billing-commission-list > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 12px !important;
}

.billing-commission-list span,
.billing-commission-list strong {
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 830 !important;
}

.billing-commission-list i {
    grid-column: 1 / -1 !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #4f46e5 var(--bar), #e2e8f0 var(--bar)) !important;
}

.billing-commission-list p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
}

.billing-quick-card {
    display: grid !important;
    gap: 12px !important;
}

.billing-quick-card a {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 12px !important;
    text-decoration: none !important;
}

.billing-quick-card a > span {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
}

.billing-quick-card a > span.violet {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.billing-quick-card a > span.green {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.billing-quick-card a > span.amber {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.billing-quick-card strong,
.billing-quick-card small {
    display: block !important;
}

.billing-quick-card strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.billing-quick-card small {
    color: #64748b !important;
    font-size: 12px !important;
}

.billing-quick-card b {
    color: #64748b !important;
    font-size: 18px !important;
}

@media (max-width: 1400px) {
    .billing-pro-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .billing-donut-wrap {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
}

@media (max-width: 1120px) {
    .billing-pro-hero,
    .billing-pro-layout {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .billing-pro-side {
        position: static !important;
    }

    .billing-period-form {
        justify-content: flex-start !important;
    }

    .billing-table-filters {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 760px) {
    .billing-pro-shell {
        padding: 14px !important;
    }

    .billing-pro-kpis,
    .billing-table-filters {
        grid-template-columns: 1fr !important;
    }

    .billing-period-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .billing-pro-table-wrap {
        overflow-x: auto !important;
    }

    .billing-pro-table {
        min-width: 820px !important;
    }
}

/* BILLING CORRECTION 1.0 2026-06-18 - compact operational finance workspace. */
.main:has(.billing-correction-shell) {
    padding: 0 !important;
    overflow: hidden !important;
}

.billing-correction-shell {
    height: 100vh !important;
    max-height: 100vh !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 18px 24px !important;
    overflow: hidden !important;
}

.billing-correction-shell .billing-pro-hero {
    min-height: 74px !important;
    align-items: end !important;
}

.billing-correction-shell .billing-pro-hero h2 {
    font-size: clamp(30px, 2.3vw, 44px) !important;
    line-height: 1 !important;
}

.billing-correction-shell .billing-pro-hero p {
    margin-top: 8px !important;
    font-size: 15px !important;
}

.billing-correction-shell .billing-period-form {
    align-items: end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

.billing-correction-shell .billing-period-form input {
    min-width: 146px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
}

.billing-correction-shell .billing-period-form .button {
    min-height: 38px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
}

.billing-correction-shell .billing-pro-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.billing-correction-shell .billing-kpi-card {
    min-height: 86px !important;
    border-radius: 12px !important;
    padding: 13px 15px !important;
    gap: 12px !important;
}

.billing-correction-shell .billing-kpi-card > span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
}

.billing-correction-shell .billing-kpi-card small,
.billing-correction-shell .billing-kpi-card em {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.billing-correction-shell .billing-kpi-card strong {
    margin: 4px 0 3px !important;
    font-size: clamp(19px, 1.35vw, 25px) !important;
}

.billing-correction-shell .billing-pro-layout {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 2.25fr) minmax(310px, .76fr) !important;
    gap: 14px !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.billing-correction-shell .billing-pro-main,
.billing-correction-shell .billing-pro-side,
.billing-correction-shell .billing-workspace-card,
.billing-correction-shell .billing-summary-card {
    min-height: 0 !important;
}

.billing-correction-shell .billing-pro-main {
    display: block !important;
}

.billing-correction-shell .billing-pro-side {
    position: static !important;
    gap: 0 !important;
}

.billing-correction-shell .billing-pro-card {
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055) !important;
}

.billing-workspace-card {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}

.billing-correction-shell .billing-card-header {
    align-items: center !important;
    margin-bottom: 10px !important;
}

.billing-correction-shell .billing-card-header h3,
.billing-correction-shell .billing-pro-card > h3 {
    font-size: 18px !important;
}

.billing-correction-shell .billing-card-header p {
    font-size: 12px !important;
}

.billing-panel-tabs {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.billing-panel-tabs button {
    min-height: 34px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #52627a !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.billing-panel-tabs button.is-active {
    border-color: #0f766e !important;
    background: #0f766e !important;
    color: #ffffff !important;
}

.billing-panel {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

.billing-panel[hidden] {
    display: none !important;
}

.billing-correction-shell .billing-table-filters {
    grid-template-columns: 180px 150px minmax(210px, 1fr) auto !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.billing-correction-shell .billing-table-filters input,
.billing-correction-shell .billing-table-filters select {
    min-height: 38px !important;
    border-radius: 10px !important;
}

.billing-correction-shell .billing-table-filters .button {
    min-height: 38px !important;
    border-radius: 10px !important;
}

.billing-correction-shell .billing-pro-table-wrap {
    min-height: 0 !important;
    overflow: auto !important;
    border-radius: 12px !important;
}

.billing-correction-shell .billing-pro-table th {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
}

.billing-correction-shell .billing-pro-table td {
    padding: 9px 10px !important;
    font-size: 12px !important;
}

.billing-correction-shell .billing-cell-stack strong,
.billing-correction-shell .billing-worker,
.billing-correction-shell .billing-money-cell {
    font-size: 12px !important;
}

.billing-correction-shell .billing-cell-stack small {
    font-size: 11px !important;
}

.billing-correction-shell .billing-status {
    min-height: 24px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
}

.billing-correction-shell .billing-summary-card {
    height: auto !important;
    align-self: start !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    overflow: hidden !important;
}

.billing-correction-shell .billing-donut-wrap {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 12px !important;
}

.billing-correction-shell .billing-donut {
    width: 126px !important;
    height: 126px !important;
}

.billing-correction-shell .billing-donut::after {
    inset: 29px !important;
}

.billing-correction-shell .billing-donut strong {
    max-width: 82px !important;
    font-size: 13px !important;
}

.billing-correction-shell .billing-donut span {
    font-size: 10px !important;
}

.billing-correction-shell .billing-donut-legend {
    gap: 8px !important;
}

.billing-correction-shell .billing-donut-legend span {
    font-size: 12px !important;
}

.billing-correction-shell .billing-donut-legend strong {
    font-size: 11px !important;
}

.billing-correction-shell .billing-commission-list {
    min-height: 0 !important;
    overflow: auto !important;
    gap: 10px !important;
    padding-top: 12px !important;
}

.billing-correction-shell .billing-commission-list > div {
    gap: 5px 10px !important;
}

.billing-correction-shell .billing-table-footer {
    padding-top: 9px !important;
}

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

.billing-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) min(760px, 52vw) !important;
}

.billing-drawer-backdrop {
    border: 0 !important;
    background: rgba(15, 23, 42, .38) !important;
    backdrop-filter: blur(4px) !important;
}

.billing-drawer-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    background: #ffffff !important;
    box-shadow: -24px 0 60px rgba(15, 23, 42, .22) !important;
}

.billing-drawer-panel header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 18px !important;
}

.billing-drawer-panel header strong {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 920 !important;
}

.billing-drawer-panel header button {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 900 !important;
}

.billing-drawer-panel iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: #f8fafc !important;
}

body.billing-drawer-open {
    overflow: hidden !important;
}

.embedded-app-shell {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .12), transparent 24rem),
        linear-gradient(180deg, #f8fbfb 0%, #eef6f5 100%);
    color: #0f172a;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.embedded-main {
    display: grid;
    gap: 16px;
    min-height: 100vh;
    padding: 20px;
}

.embedded-header {
    display: grid;
    gap: 4px;
}

.embedded-header span {
    color: #0f766e;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.embedded-header h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    letter-spacing: 0;
}

.embedded-app-shell .panel {
    border: 1px solid rgba(203, 213, 225, .95);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.embedded-app-shell .form-panel {
    padding: 18px;
}

.embedded-app-shell .form-grid,
.embedded-app-shell .invoice-line-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.embedded-app-shell label {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}

.embedded-app-shell input,
.embedded-app-shell select,
.embedded-app-shell textarea {
    width: 100%;
    border: 1px solid #cbd8e6;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 650;
}

.embedded-app-shell input:focus,
.embedded-app-shell select:focus,
.embedded-app-shell textarea:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .12);
    outline: none;
}

.embedded-app-shell .nested-panel {
    display: grid;
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    background: #f8fafc;
    box-shadow: none;
}

.embedded-app-shell .panel-heading h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.embedded-app-shell .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.embedded-app-shell .button {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 850;
}

.embedded-app-shell .button.primary {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    color: #ffffff;
}

.embedded-app-shell .table-wrap {
    overflow: hidden;
    border: 1px solid #dbe6f1;
    border-radius: 14px;
}

.embedded-app-shell table {
    width: 100%;
}

.embedded-app-shell .totals,
.embedded-app-shell .detail-list {
    display: grid;
    gap: 8px;
}

.embedded-app-shell .totals div,
.embedded-app-shell .detail-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 0;
}

@media (max-width: 720px) {
    .embedded-app-shell .form-grid,
    .embedded-app-shell .invoice-line-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1400px) {
    .billing-correction-shell {
        padding: 14px 18px !important;
        gap: 12px !important;
    }

    .billing-correction-shell .billing-pro-hero h2 {
        font-size: 34px !important;
    }

    .billing-correction-shell .billing-kpi-card {
        min-height: 78px !important;
    }

    .billing-correction-shell .billing-pro-layout {
        grid-template-columns: minmax(0, 2fr) 300px !important;
    }
}

@media (max-width: 1180px) {
    .main:has(.billing-correction-shell) {
        overflow: auto !important;
    }

    .billing-correction-shell {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .billing-correction-shell .billing-pro-layout,
    .billing-correction-shell .billing-pro-kpis {
        grid-template-columns: 1fr !important;
    }

    .billing-drawer {
        grid-template-columns: 1fr !important;
    }

    .billing-drawer-backdrop {
        display: none !important;
    }
}

/* EMPLOYEE CORRECTION 3.0 2026-06-17 - two-level worker view and full edit studio. */
.employee-correction-shell {
    max-width: 1500px !important;
    margin: 0 auto !important;
}

.employee-correction-hero {
    margin-bottom: 2px !important;
}

.employee-correction-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.employee-correction-kpis article,
.employee-overview-list,
.employee-quick-preview {
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
}

.employee-correction-kpis article {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 104px !important;
    padding: 18px !important;
}

.employee-correction-kpis .employee-kpi-icon.tone-violet {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.employee-correction-kpis .employee-kpi-icon.tone-teal {
    background: #ccfbf1 !important;
    color: #0f766e !important;
}

.employee-correction-kpis .employee-kpi-icon.tone-amber {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.employee-correction-kpis small,
.employee-correction-kpis em {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 760 !important;
}

.employee-correction-kpis strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 920 !important;
    line-height: 1 !important;
}

.employee-overview-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.employee-overview-list {
    display: grid !important;
    gap: 14px !important;
    padding: 18px !important;
}

.employee-overview-filters {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 220px auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.employee-overview-filters label {
    display: grid !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.employee-overview-filters input,
.employee-overview-filters select {
    min-height: 44px !important;
    border-radius: 12px !important;
}

.employee-card-list {
    display: grid !important;
    gap: 10px !important;
}

.employee-directory-row {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    padding: 12px !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.employee-directory-row:hover,
.employee-directory-row.is-selected {
    border-color: #8b5cf6 !important;
    box-shadow: 0 16px 32px rgba(91, 33, 182, .10) !important;
    transform: translateY(-1px) !important;
}

.employee-directory-row.is-inactive {
    opacity: .72 !important;
}

.employee-directory-main {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.employee-directory-main strong,
.employee-directory-main small {
    display: block !important;
}

.employee-directory-main strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.employee-directory-main small {
    color: #64748b !important;
    font-size: 12px !important;
}

.employee-directory-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.employee-directory-meta > span:not(.employee-role-badge):not(.employee-status-pill) {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 25px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #52627a !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 780 !important;
}

.employee-quick-preview {
    position: sticky !important;
    top: 18px !important;
    overflow: hidden !important;
}

.employee-quick-preview .employee-preview-content,
.employee-quick-preview .employee-preview-empty {
    padding: 22px !important;
}

.employee-quick-preview .employee-preview-content header {
    margin: -22px -22px 0 !important;
    padding: 24px 22px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(124, 58, 237, .18), transparent 12rem),
        linear-gradient(135deg, #ffffff, #f8fbff) !important;
}

.employee-studio-drawer .employee-drawer-backdrop {
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: blur(5px) !important;
}

.employee-studio-drawer .employee-studio-panel {
    right: 0 !important;
    left: auto !important;
    width: min(1400px, calc(100vw - 292px)) !important;
    max-width: none !important;
    height: 100vh !important;
    border-left: 1px solid #dbe6f1 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    box-shadow: -28px 0 70px rgba(15, 23, 42, .14) !important;
}

.employee-studio-panel form {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    height: 100% !important;
}

.employee-studio-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 70px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 26px !important;
}

.employee-studio-topbar h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 920 !important;
}

.employee-studio-topbar button {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 18px !important;
    cursor: pointer !important;
}

.employee-studio-profile {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) minmax(320px, .6fr) !important;
    gap: 18px !important;
    align-items: center !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 24px 26px !important;
}

.employee-studio-person {
    display: grid !important;
    justify-items: center !important;
    gap: 9px !important;
}

.employee-studio-person .employee-drawer-avatar {
    width: 76px !important;
    height: 76px !important;
    background: color-mix(in srgb, var(--employee-color, #7c3aed) 18%, #ffffff) !important;
    color: color-mix(in srgb, var(--employee-color, #7c3aed) 82%, #312e81) !important;
    font-size: 24px !important;
}

.employee-photo-link {
    border: 0 !important;
    background: transparent !important;
    color: #4f46e5 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.employee-studio-identity {
    display: grid !important;
    gap: 7px !important;
}

.employee-studio-identity > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.employee-studio-identity h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 920 !important;
}

.employee-studio-identity p,
.employee-studio-identity small {
    margin: 0 !important;
    color: #52627a !important;
    font-size: 14px !important;
    font-weight: 680 !important;
}

.employee-studio-summary {
    border: 1px solid #dbe6f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 16px !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .055) !important;
}

.employee-studio-summary header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.employee-studio-summary header strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.employee-studio-summary header button {
    border: 0 !important;
    background: transparent !important;
    color: #4f46e5 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.employee-studio-summary > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.employee-studio-summary article {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    border-right: 1px solid #e2e8f0 !important;
}

.employee-studio-summary article:last-child {
    border-right: 0 !important;
}

.employee-studio-summary article strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 920 !important;
}

.employee-studio-summary article span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.employee-studio-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 38px !important;
    min-height: 58px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 26px !important;
    overflow-x: auto !important;
}

.employee-studio-tabs button {
    position: relative !important;
    min-height: 58px !important;
    border: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.employee-studio-tabs button::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -1px !important;
    left: 0 !important;
    height: 3px !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
}

.employee-studio-tabs button.is-active {
    color: #4f46e5 !important;
}

.employee-studio-tabs button.is-active::after {
    background: #4f46e5 !important;
}

.employee-studio-scroll {
    overflow: auto !important;
    padding: 20px 26px 28px !important;
}

.employee-studio-grid {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) !important;
    gap: 18px !important;
}

.employee-studio-card {
    display: grid !important;
    gap: 16px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 18px !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .05) !important;
}

.employee-studio-card h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.employee-studio-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.employee-studio-form-grid label {
    display: grid !important;
    gap: 7px !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    text-transform: none !important;
}

.employee-studio-form-grid input,
.employee-studio-form-grid select {
    min-height: 43px !important;
    border-radius: 12px !important;
}

.employee-hidden-role-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.employee-studio-role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.employee-studio-role-grid .employee-role-choice {
    min-height: 118px !important;
}

.employee-module-switch-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.employee-module-switch {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "icon title switch" "icon copy switch" !important;
    gap: 2px 10px !important;
    align-items: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    padding: 11px !important;
    cursor: pointer !important;
    text-transform: none !important;
}

.employee-module-switch input {
    position: absolute !important;
    opacity: 0 !important;
}

.employee-module-switch .module-letter {
    grid-area: icon !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-size: 11px !important;
    font-weight: 920 !important;
}

.employee-module-switch strong {
    grid-area: title !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.employee-module-switch em {
    grid-area: copy !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 680 !important;
}

.employee-module-switch i,
.employee-mini-switch span {
    position: relative !important;
    display: block !important;
    width: 36px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
}

.employee-module-switch i {
    grid-area: switch !important;
}

.employee-module-switch i::after,
.employee-mini-switch span::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
    transition: transform 160ms ease !important;
}

.employee-module-switch:has(input:checked),
.employee-module-switch.is-selected {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, #ffffff, #f7f3ff) !important;
}

.employee-module-switch:has(input:checked) i,
.employee-mini-switch input:checked + span {
    background: #5b3df5 !important;
}

.employee-module-switch:has(input:checked) i::after,
.employee-mini-switch input:checked + span::after {
    transform: translateX(16px) !important;
}

.employee-permission-clean-table {
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.employee-permission-clean-table table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.employee-permission-clean-table th,
.employee-permission-clean-table td {
    border-top: 1px solid #eef2f7 !important;
    padding: 11px 12px !important;
    text-align: center !important;
}

.employee-permission-clean-table th {
    border-top: 0 !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 920 !important;
    text-transform: uppercase !important;
}

.employee-permission-clean-table th:first-child,
.employee-permission-clean-table td:first-child {
    text-align: left !important;
}

.employee-permission-clean-table td:first-child {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.employee-permission-clean-table input {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    accent-color: #5b3df5 !important;
}

.employee-permission-clean-table input:disabled {
    opacity: .35 !important;
}

.employee-card-split {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.employee-schedule-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.employee-studio-schedule {
    display: grid !important;
    gap: 10px !important;
}

.employee-studio-schedule article {
    display: grid !important;
    grid-template-columns: 120px 120px minmax(120px, 1fr) minmax(120px, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 12px !important;
}

.employee-studio-schedule article.is-closed {
    background: #f8fafc !important;
}

.employee-studio-schedule strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.employee-studio-schedule label {
    display: grid !important;
    gap: 5px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.employee-studio-schedule input[type="time"] {
    min-height: 36px !important;
    border-radius: 10px !important;
}

.employee-mini-switch {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: none !important;
}

.employee-mini-switch input {
    position: absolute !important;
    opacity: 0 !important;
}

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

.employee-service-chip-grid {
    max-height: 300px !important;
    overflow: auto !important;
}

.employee-commission-card {
    max-width: 720px !important;
}

.employee-commission-preview {
    border: 1px solid #c4b5fd !important;
    border-radius: 14px !important;
    background: #f5f3ff !important;
    color: #4c1d95 !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

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

.employee-final-summary div {
    display: grid !important;
    gap: 7px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    padding: 14px !important;
}

.employee-final-summary strong {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 920 !important;
    text-transform: uppercase !important;
}

.employee-final-summary span,
.employee-final-summary p {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 820 !important;
    line-height: 1.45 !important;
}

.employee-studio-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 18px 26px !important;
    background: rgba(255, 255, 255, .97) !important;
}

.employee-studio-footer .button {
    min-width: 138px !important;
    min-height: 44px !important;
}

@media (max-width: 1180px) {
    .employee-studio-drawer .employee-studio-panel {
        width: calc(100vw - 18px) !important;
    }

    .employee-studio-profile,
    .employee-studio-grid,
    .employee-overview-layout {
        grid-template-columns: 1fr !important;
    }

    .employee-studio-summary {
        max-width: none !important;
    }
}

@media (max-width: 780px) {
    .employee-correction-kpis,
    .employee-overview-filters,
    .employee-studio-role-grid,
    .employee-module-switch-grid,
    .employee-room-studio-grid,
    .employee-studio-form-grid,
    .employee-final-summary {
        grid-template-columns: 1fr !important;
    }

    .employee-directory-row {
        grid-template-columns: 1fr !important;
    }

    .employee-studio-profile {
        padding: 18px !important;
    }

    .employee-studio-schedule article {
        grid-template-columns: 1fr !important;
    }

    .employee-studio-tabs {
        gap: 22px !important;
        padding-inline: 18px !important;
    }

    .employee-studio-scroll {
        padding: 16px 18px 22px !important;
    }
}

/* EMPLOYEE CORRECTION 4.0 2026-06-18 - approved edit-worker studio layout. */
body.employee-drawer-open .app-shell,
body.employee-drawer-open .main {
    overflow: hidden !important;
}

body.employee-drawer-open .main::-webkit-scrollbar,
.employee-editor-v4[data-active-tab="general"] .employee-studio-scroll::-webkit-scrollbar {
    display: none !important;
}

.employee-editor-v4 .employee-drawer-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
}

.employee-editor-v4 .employee-studio-panel {
    width: calc(100vw - var(--erp-sidebar)) !important;
    max-width: none !important;
    background: #ffffff !important;
    box-shadow: -18px 0 44px rgba(15, 23, 42, .08) !important;
}

body.sidebar-collapsed .employee-editor-v4 .employee-studio-panel {
    width: calc(100vw - var(--erp-sidebar-closed)) !important;
}

.employee-editor-v4 .employee-studio-panel form {
    grid-template-rows: 58px 132px 50px minmax(0, 1fr) 64px !important;
}

.employee-editor-v4 .employee-studio-topbar {
    min-height: 58px !important;
    padding: 0 28px !important;
}

.employee-editor-v4 .employee-studio-profile {
    grid-template-columns: 94px minmax(280px, 1fr) minmax(360px, 420px) !important;
    min-height: 132px !important;
    padding: 14px 28px !important;
}

.employee-editor-v4 .employee-studio-tabs {
    min-height: 50px !important;
    gap: clamp(26px, 4vw, 58px) !important;
    padding: 0 28px !important;
}

.employee-editor-v4 .employee-studio-tabs button {
    min-height: 50px !important;
}

.employee-editor-v4 .employee-studio-scroll {
    min-height: 0 !important;
    overflow: auto !important;
    padding: 14px 28px !important;
}

.employee-editor-v4[data-active-tab="general"] .employee-studio-scroll {
    overflow: hidden !important;
}

.employee-editor-v4 .employee-studio-footer {
    padding: 12px 28px !important;
}

.employee-editor-v4 .employee-studio-footer .button {
    min-height: 40px !important;
}

.employee-editor-v4 .employee-drawer-section.is-active {
    min-height: 100% !important;
}

.employee-general-three-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, .72fr) minmax(560px, 1.35fr) minmax(260px, .62fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

.employee-editor-v4 .employee-studio-card {
    gap: 14px !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04) !important;
}

.employee-editor-v4 .employee-studio-card h3 {
    font-size: 16px !important;
}

.employee-basic-compact-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.employee-basic-compact-grid input {
    min-height: 34px !important;
}

.employee-editor-v4 .employee-studio-switch {
    margin-top: 4px !important;
}

.employee-editor-v4 .employee-studio-role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.employee-editor-v4 .employee-studio-role-grid .employee-role-choice {
    min-height: 82px !important;
    border-radius: 14px !important;
    padding: 10px !important;
    gap: 6px !important;
}

.employee-editor-v4 .employee-role-choice > span {
    width: 24px !important;
    height: 24px !important;
}

.employee-editor-v4 .employee-role-choice small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.28 !important;
}

.employee-editor-v4 .employee-studio-role-grid + .employee-pro-muted {
    display: none !important;
}

.employee-live-summary-card {
    align-content: start !important;
}

.employee-live-summary {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
}

.employee-live-summary div {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    border: 1px solid #e5edf6 !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
    padding: 0 11px !important;
}

.employee-live-summary dt,
.employee-live-summary dd {
    margin: 0 !important;
}

.employee-live-summary dt {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.employee-live-summary dd {
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.employee-chip-summary {
    display: grid !important;
    gap: 8px !important;
}

.employee-chip-summary strong {
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.employee-chip-summary > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.employee-chip-summary span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    background: #ede9fe !important;
    color: #4f46e5 !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.employee-chip-summary.is-muted span {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.employee-permission-v4-card {
    height: 100% !important;
}

.employee-permission-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}

.employee-permission-card {
    display: grid !important;
    gap: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 14px !important;
}

.employee-permission-card.is-selected {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, #ffffff, #f7f3ff) !important;
}

.employee-permission-card header {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

.employee-permission-card .module-letter {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.employee-permission-card strong,
.employee-permission-card small {
    display: block !important;
}

.employee-permission-card strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.employee-permission-card small {
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.employee-card-switch {
    display: grid !important;
    cursor: pointer !important;
}

.employee-card-switch input {
    position: absolute !important;
    opacity: 0 !important;
}

.employee-card-switch span {
    position: relative !important;
    display: block !important;
    width: 38px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
}

.employee-card-switch span::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
    transition: transform 160ms ease !important;
}

.employee-card-switch input:checked + span {
    background: #5b3df5 !important;
}

.employee-card-switch input:checked + span::after {
    transform: translateX(16px) !important;
}

.employee-action-chip-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.employee-action-chip-row label {
    cursor: pointer !important;
}

.employee-action-chip-row input {
    position: absolute !important;
    opacity: 0 !important;
}

.employee-action-chip-row span {
    display: grid !important;
    place-items: center !important;
    min-height: 30px !important;
    border: 1px solid #dbe6f1 !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.employee-action-chip-row input:checked + span {
    border-color: #8b5cf6 !important;
    background: #ede9fe !important;
    color: #4f46e5 !important;
}

.employee-action-chip-row input:disabled + span {
    opacity: .42 !important;
}

.employee-editor-v4 .employee-studio-schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.employee-editor-v4 .employee-studio-schedule article {
    grid-template-columns: minmax(90px, .8fr) 98px minmax(95px, 1fr) minmax(95px, 1fr) !important;
    padding: 10px !important;
}

.employee-editor-v4 .employee-room-studio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.employee-editor-v4 .employee-final-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1320px) {
    .employee-general-three-grid,
    .employee-permission-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .employee-live-summary-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 980px) {
    .employee-editor-v4 .employee-studio-panel {
        width: calc(100vw - 18px) !important;
    }

    .employee-general-three-grid,
    .employee-permission-card-grid,
    .employee-editor-v4 .employee-studio-schedule,
    .employee-editor-v4 .employee-room-studio-grid,
    .employee-editor-v4 .employee-final-summary {
        grid-template-columns: 1fr !important;
    }
}

/* CORRECCION GENERAL 1.0 2026-06-18 - premium shared SaaS layer. */
:root {
    --clinc-premium-bg: #f6f8fb;
    --clinc-premium-surface: #ffffff;
    --clinc-premium-soft: #f8fafc;
    --clinc-premium-line: #dbe5ef;
    --clinc-premium-line-strong: #cbd8e6;
    --clinc-premium-ink: #0f172a;
    --clinc-premium-muted: #607089;
    --clinc-premium-jade: #0f766e;
    --clinc-premium-jade-2: #14b8a6;
    --clinc-premium-purple: #5b3df5;
    --clinc-premium-radius: 16px;
    --clinc-premium-shadow: 0 14px 36px rgba(15, 23, 42, .055);
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) {
    background: var(--clinc-premium-bg) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .app-shell {
    min-height: 100vh !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .main {
    min-height: 100vh !important;
    padding: 18px clamp(18px, 2vw, 28px) !important;
    background:
        radial-gradient(circle at 2% -4%, rgba(20, 184, 166, .12), transparent 28rem),
        radial-gradient(circle at 94% 0%, rgba(91, 61, 245, .075), transparent 26rem),
        linear-gradient(180deg, #fbfdfd 0%, var(--clinc-premium-bg) 100%) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar {
    border-right: 1px solid rgba(148, 163, 184, .14) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(91, 61, 245, .28), transparent 15rem),
        linear-gradient(180deg, #111827 0%, #0b1220 100%) !important;
    box-shadow: 18px 0 54px rgba(15, 23, 42, .12) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav-label {
    color: #93a4bc !important;
    letter-spacing: .06em !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav a,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav-locked {
    min-height: 42px !important;
    border-radius: 12px !important;
    color: #cbd5e1 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav a.active {
    border-color: rgba(45, 212, 191, .28) !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, .94), rgba(15, 118, 110, .96)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(20, 184, 166, .18) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar-toggle {
    border-color: rgba(148, 163, 184, .28) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #e2e8f0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar {
    min-height: 62px !important;
    margin-bottom: 14px !important;
    border: 1px solid rgba(219, 229, 239, .94) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .9) !important;
    padding: 12px 16px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .045) !important;
    backdrop-filter: blur(16px) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar h1 {
    color: var(--clinc-premium-ink) !important;
    font-size: clamp(22px, 1.55vw, 29px) !important;
    font-weight: 900 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar .eyebrow {
    color: #0f766e !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .user-menu {
    align-items: center !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar .user-menu .button {
    min-width: 56px !important;
    color: var(--clinc-premium-ink) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar .user-menu .topbar-logout-button {
    min-width: 70px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .user-badge {
    min-width: 168px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .metric-card,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .form-card,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .chart-card {
    border-color: rgba(219, 229, 239, .96) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--clinc-premium-shadow) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel {
    padding: clamp(16px, 1.45vw, 22px) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading.split,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading {
    align-items: center !important;
    gap: 12px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .panel-heading h2 {
    color: var(--clinc-premium-ink) !important;
    font-size: clamp(18px, 1.2vw, 23px) !important;
    font-weight: 900 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .notes {
    color: var(--clinc-premium-muted) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-summary-grid,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .metric-grid,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .v2-kpi-strip {
    gap: 12px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-summary-grid article,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .metric-card {
    min-height: 90px !important;
    border-radius: 18px !important;
    padding: 16px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .admin-filter-bar,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-filter-bar,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .support-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto auto !important;
    gap: 10px !important;
    align-items: end !important;
    border: 1px solid var(--clinc-premium-line) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    padding: 12px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .admin-filter-bar label,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-filter-bar label,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .support-filter-bar label,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .form-grid label {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) input,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) select,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) textarea {
    min-height: 40px !important;
    border-color: var(--clinc-premium-line-strong) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--clinc-premium-ink) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) textarea {
    line-height: 1.5 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) input:focus,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) select:focus,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) textarea:focus {
    border-color: var(--clinc-premium-jade-2) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .14) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .actions a:not(.button):not(.table-action) {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-weight: 850 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button.primary,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action.primary {
    background: linear-gradient(135deg, var(--clinc-premium-jade), var(--clinc-premium-jade-2)) !important;
    border-color: var(--clinc-premium-jade) !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .18) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button.ghost,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action:not(.primary) {
    background: #ffffff !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .company-table-shell {
    max-height: calc(100vh - 330px) !important;
    overflow: auto !important;
    border: 1px solid var(--clinc-premium-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap table,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .company-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap thead th,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .company-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap td,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .company-table td {
    color: var(--clinc-premium-ink) !important;
    vertical-align: middle !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap tbody tr:hover td,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .company-table tbody tr:hover td {
    background: #f6fbfa !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 12px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .settings-split,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .support-grid {
    gap: 14px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .form-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .alert,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .notice {
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .empty-state {
    display: grid !important;
    place-items: center !important;
    min-height: 98px !important;
    border: 1px dashed var(--clinc-premium-line-strong) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: var(--clinc-premium-muted) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) * {
    scrollbar-color: rgba(15, 118, 110, .38) transparent;
    scrollbar-width: thin;
}

body.is-authenticated:has(.support-shell):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .support-hero {
    min-height: 116px !important;
    align-items: center !important;
    padding: 18px 22px !important;
}

body.is-authenticated:has(.support-shell):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .support-hero h2 {
    max-width: 620px !important;
    color: var(--clinc-premium-ink) !important;
    font-size: clamp(28px, 2.25vw, 38px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
}

body.is-authenticated:has(.support-shell):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .support-stats span {
    min-width: 86px !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
}

body.is-authenticated:has(.support-shell):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .support-grid {
    grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr) !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .main {
    height: 100vh !important;
    overflow: hidden !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .hero-panel {
    min-height: 74px !important;
    margin-bottom: 12px !important;
    padding: 14px 20px !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .form-panel {
    max-height: calc(100vh - 188px) !important;
    overflow: auto !important;
    display: grid !important;
    gap: 14px !important;
    padding: 18px 20px !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .form-panel > .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .vertical-style-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .vertical-style-card {
    min-height: 136px !important;
    padding: 14px !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .vertical-style-card em {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .settings-split {
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr) !important;
}

body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .form-actions {
    position: sticky !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 5 !important;
    margin: 0 -20px -18px !important;
    border-top: 1px solid var(--clinc-premium-line) !important;
    background: rgba(255, 255, 255, .94) !important;
    padding: 12px 20px !important;
    backdrop-filter: blur(12px) !important;
}

@media (max-width: 900px) {
    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .main {
        padding: 14px !important;
    }

    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar,
    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .user-menu {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .admin-filter-bar,
    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .customer-filter-bar,
    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .support-filter-bar {
        grid-template-columns: 1fr !important;
    }

    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-wrap,
    body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .company-table-shell {
        max-height: none !important;
    }

    body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .main {
        height: auto !important;
        overflow: visible !important;
    }

    body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .form-panel {
        max-height: none !important;
    }

    body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .form-panel > .form-grid,
    body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .vertical-style-grid,
    body.is-authenticated:has(.vertical-style-grid):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .settings-split,
    body.is-authenticated:has(.support-shell):not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)) .support-grid {
        grid-template-columns: 1fr !important;
    }
}

/* CORRECCION CALENDARIO 1.0 2026-06-18 - focused premium agenda. */
body.is-authenticated:has(.calendar-focus-shell) {
    background:
        radial-gradient(circle at 72% -12%, rgba(99, 102, 241, .10), transparent 32%),
        radial-gradient(circle at 8% 0%, rgba(20, 184, 166, .12), transparent 28%),
        #f7fafc !important;
}

.main:has(.calendar-focus-shell) {
    height: 100vh !important;
    overflow: hidden !important;
    padding: 18px 20px !important;
}

.calendar-focus-shell {
    width: 100% !important;
    max-width: none !important;
    height: calc(100vh - 36px) !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 12px !important;
}

.calendar-focus-toolbar {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) auto auto !important;
    align-items: start !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.calendar-breadcrumb {
    margin-bottom: 7px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.calendar-focus-title {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(24px, 2vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.calendar-subtitle {
    margin-top: 8px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.calendar-nav,
.calendar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}

.calendar-date-pill,
.calendar-focus-toolbar .button,
.calendar-focus-toolbar .icon-button,
.calendar-focus-toolbar .segmented-control a {
    min-height: 42px !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .86) !important;
    color: #101936 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05) !important;
    font-weight: 850 !important;
}

.calendar-focus-toolbar .button.primary {
    border-color: #5b3df4 !important;
    background: linear-gradient(135deg, #5b3df4, #6d5dfc) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 32px rgba(91, 61, 244, .22) !important;
}

.calendar-date-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
}

.calendar-focus-toolbar .segmented-control {
    gap: 3px !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 3px !important;
}

.calendar-focus-toolbar .segmented-control a {
    min-height: 34px !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 13px !important;
}

.calendar-focus-toolbar .segmented-control a.active {
    background: #f0edff !important;
    color: #4f35e8 !important;
}

.calendar-filter-drawer {
    min-height: 0 !important;
    margin: 0 !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .05) !important;
    overflow: hidden !important;
}

.calendar-filter-drawer:not([open]) {
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.calendar-filter-drawer summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 12px 14px !important;
    color: #0f172a !important;
    font-weight: 900 !important;
}

.calendar-filter-drawer summary::-webkit-details-marker {
    display: none !important;
}

.calendar-filter-drawer summary strong {
    color: #0f766e !important;
    font-size: 12px !important;
}

.calendar-filter-drawer .calendar-compact-filters {
    display: grid !important;
    grid-template-columns: 150px minmax(160px, .9fr) minmax(170px, 1fr) minmax(145px, .7fr) minmax(180px, 1fr) minmax(210px, 1.2fr) auto auto !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 0 14px 14px !important;
}

.calendar-filter-drawer label {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}

.calendar-filter-drawer input,
.calendar-filter-drawer select {
    min-height: 42px !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #172033 !important;
    font-weight: 700 !important;
}

.calendar-operations-layout {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

.calendar-side-panel {
    display: none !important;
}

.pro-calendar {
    --minute-height: clamp(1.08px, 0.128vh, 1.34px) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .07) !important;
    overflow: auto !important;
}

.calendar-day .pro-calendar-columns {
    min-width: max(760px, calc(var(--calendar-columns) * 205px)) !important;
}

.calendar-week .pro-calendar-columns {
    min-width: max(1040px, calc(var(--calendar-columns) * 148px)) !important;
}

.pro-calendar-axis,
.pro-calendar-column {
    grid-template-rows: 64px minmax(0, 1fr) !important;
}

.pro-calendar-corner,
.pro-calendar-column-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    min-height: 64px !important;
    border-color: #e4ebf3 !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(14px) !important;
}

.pro-calendar-column-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 9px !important;
    align-content: center !important;
    padding: 12px 16px !important;
}

.pro-calendar-column-head::before {
    content: "" !important;
    width: 32px !important;
    height: 32px !important;
    grid-row: span 2 !important;
    align-self: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #dbeafe, #efe7ff) !important;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .12) !important;
}

.pro-calendar-column-head strong {
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar-column-head span,
.pro-calendar-corner,
.pro-calendar-axis-body span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.pro-calendar-axis-body,
.pro-calendar-lane {
    min-height: calc(var(--calendar-height-minutes, 600) * var(--minute-height)) !important;
}

.pro-calendar-lane {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(to bottom, rgba(226, 232, 240, .82) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(241, 245, 249, .72) 1px, transparent 1px) !important;
    background-size:
        100% calc(var(--minute-height) * 60),
        100% calc(var(--minute-height) * 30) !important;
}

.calendar-closed-block {
    border-radius: 0 !important;
    background: repeating-linear-gradient(-45deg, #f8fafc 0, #f8fafc 12px, #eef4f9 12px, #eef4f9 24px) !important;
    color: #64748b !important;
}

.calendar-now-line {
    z-index: 6 !important;
}

.calendar-now-line::before {
    background: #f43f5e !important;
}

.calendar-now-line span {
    background: #f43f5e !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

.pro-calendar .calendar-event {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px 10px !important;
    border: 1px solid color-mix(in srgb, var(--event-color, #5b3df4) 34%, #ffffff) !important;
    border-left: 3px solid var(--event-color, #5b3df4) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--event-color, #5b3df4) 9%, #ffffff), #ffffff 82%) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
    padding: 9px 10px !important;
}

.pro-calendar .calendar-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .12) !important;
}

.pro-calendar .calendar-event .event-time {
    min-width: 48px !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--event-color, #5b3df4) 12%, #ffffff) !important;
    color: #4338ca !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 6px 8px !important;
}

.pro-calendar .calendar-event strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event small.event-client {
    display: block !important;
    grid-column: 2 / 3 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #52627a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pro-calendar .calendar-event small.event-meta {
    display: none !important;
}

.event-payment {
    grid-column: 3 / 4 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 5px 9px !important;
    white-space: nowrap !important;
}

.event-payment.is-paid {
    border-color: #bbf7d0 !important;
    background: #ecfdf3 !important;
    color: #047857 !important;
}

.event-payment.is-pending {
    border-color: #fde68a !important;
    background: #fffbeb !important;
    color: #92400e !important;
}

.quick-appointment-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    display: grid !important;
    justify-content: end !important;
    align-items: stretch !important;
    padding: 18px !important;
    background: rgba(15, 23, 42, .30) !important;
    backdrop-filter: blur(5px) !important;
}

.quick-appointment-panel[hidden] {
    display: none !important;
}

.quick-panel-card {
    width: min(430px, calc(100vw - 30px)) !important;
    height: calc(100dvh - 36px) !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid rgba(219, 229, 240, .96) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .24) !important;
}

.quick-panel-head {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-bottom: 1px solid #edf2f7 !important;
    padding: 20px 20px 14px !important;
}

.quick-panel-head .eyebrow {
    margin: 0 0 7px !important;
    color: #5b3df4 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
}

.quick-panel-head h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.quick-panel-head .popover-close {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #172033 !important;
    font-size: 16px !important;
}

.quick-panel-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border-bottom: 1px solid #edf2f7 !important;
    padding: 12px 20px !important;
}

.quick-panel-tabs span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.quick-panel-tabs .is-active {
    background: #f0edff !important;
    color: #4f35e8 !important;
}

.quick-panel-form {
    min-height: 0 !important;
    overflow: auto !important;
    display: grid !important;
    gap: 12px !important;
    padding: 16px 20px 0 !important;
}

.quick-panel-form .form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
}

.quick-form-section {
    margin: 4px 0 -4px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.quick-panel-form label {
    display: grid !important;
    gap: 6px !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}

.quick-panel-form input,
.quick-panel-form select,
.quick-panel-form textarea {
    width: 100% !important;
    min-height: 42px !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #101936 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.quick-panel-form textarea {
    min-height: 94px !important;
    resize: vertical !important;
}

.quick-panel-form input:focus,
.quick-panel-form select:focus,
.quick-panel-form textarea:focus {
    border-color: #8b7cf8 !important;
    box-shadow: 0 0 0 4px rgba(91, 61, 244, .12) !important;
}

.quick-panel-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 10px !important;
    margin: 4px -20px 0 !important;
    border-top: 1px solid #edf2f7 !important;
    background: rgba(255, 255, 255, .96) !important;
    padding: 13px 20px 16px !important;
    backdrop-filter: blur(12px) !important;
}

.quick-panel-footer .notes {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.quick-panel-footer .button.primary {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #5b3df4, #6d5dfc) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

.appointment-popover {
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: blur(6px) !important;
}

.popover-panel {
    width: min(760px, calc(100vw - 36px)) !important;
    border-radius: 20px !important;
    border: 1px solid #dbe5f0 !important;
    background: #ffffff !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .26) !important;
}

.appointment-popover-summary article,
.appointment-contact-row span {
    border-radius: 14px !important;
    background: #f8fafc !important;
}

.appointment-status-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.appointment-action-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

@media (max-width: 1180px) {
    .calendar-focus-toolbar {
        grid-template-columns: 1fr !important;
    }

    .calendar-nav,
    .calendar-actions {
        justify-content: flex-start !important;
    }

    .calendar-filter-drawer .calendar-compact-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .main:has(.calendar-focus-shell) {
        height: auto !important;
        overflow: visible !important;
        padding: 12px !important;
    }

    .calendar-focus-shell {
        height: auto !important;
        min-height: calc(100vh - 24px) !important;
    }

    .calendar-filter-drawer .calendar-compact-filters,
    .quick-panel-form .form-grid,
    .appointment-status-row,
    .appointment-action-row {
        grid-template-columns: 1fr !important;
    }

    .quick-appointment-panel {
        padding: 10px !important;
    }

    .quick-panel-card {
        width: calc(100vw - 20px) !important;
        height: calc(100dvh - 20px) !important;
    }
}

/* 2026-06-11 - Calendario premium final segun referencia visual y prompt. */

/* CORRECCION CALENDARIO 1.0 ajuste visual: side panel sin blur pesado. */
.quick-appointment-panel {
    padding: 12px !important;
    background: rgba(15, 23, 42, .06) !important;
    backdrop-filter: none !important;
}

.quick-panel-card {
    width: min(420px, calc(100vw - 24px)) !important;
    height: calc(100dvh - 24px) !important;
    max-height: none !important;
    min-height: calc(100dvh - 24px) !important;
}

.quick-panel-head {
    padding: 16px 18px 12px !important;
}

.quick-panel-head h2 {
    font-size: 19px !important;
}

.quick-panel-head .popover-close {
    width: 34px !important;
    height: 34px !important;
}

.quick-panel-tabs {
    padding: 10px 18px !important;
}

.quick-panel-tabs span {
    min-height: 32px !important;
}

.quick-panel-form {
    gap: 9px !important;
    padding: 12px 18px 0 !important;
}

.quick-panel-form .form-grid {
    gap: 9px 10px !important;
}

.quick-form-section {
    margin: 2px 0 -3px !important;
}

.quick-panel-form label {
    gap: 5px !important;
}

.quick-panel-form input,
.quick-panel-form select,
.quick-panel-form textarea {
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.quick-panel-form textarea {
    min-height: 64px !important;
}

.quick-panel-form .quick-optional-category {
    display: none !important;
}

.quick-panel-footer {
    margin: 2px -18px 0 !important;
    padding: 10px 18px 12px !important;
}

.quick-panel-footer .button.primary {
    min-height: 42px !important;
}

.calendar-focus-toolbar h2.calendar-focus-title {
    display: block !important;
}

/* QUICK APPOINTMENT PANEL POLISH 2026-06-18 - panel ancho sin pestanas falsas. */
.quick-appointment-panel {
    padding: 14px !important;
}

.quick-panel-card {
    width: min(720px, calc(100vw - 28px)) !important;
    height: calc(100dvh - 28px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.quick-panel-head {
    padding: 16px 20px 12px !important;
}

.quick-panel-head .eyebrow {
    margin-bottom: 5px !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    letter-spacing: .05em !important;
}

.quick-panel-head h2 {
    font-size: 21px !important;
    font-weight: 850 !important;
}

.quick-panel-context {
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 20px !important;
}

.quick-panel-context span {
    min-height: 30px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.quick-panel-context .is-active {
    background: #e9fbf7 !important;
    color: #0f766e !important;
}

.quick-panel-form {
    gap: 9px !important;
    overflow: hidden !important;
    padding: 12px 20px 0 !important;
}

.quick-panel-form .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px 10px !important;
}

.quick-panel-form .form-grid label {
    min-width: 0 !important;
}

.quick-form-section {
    margin: 2px 0 -3px !important;
    font-size: 10.5px !important;
}

.quick-panel-form label {
    gap: 4px !important;
    font-size: 10.5px !important;
    letter-spacing: .015em !important;
}

.quick-panel-form input,
.quick-panel-form select,
.quick-panel-form textarea {
    min-height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.quick-panel-form > label:has(textarea) {
    margin-top: 1px !important;
}

.quick-panel-form textarea {
    min-height: 58px !important;
    max-height: 72px !important;
}

.quick-panel-footer {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 2px -20px 0 !important;
    padding: 10px 20px 12px !important;
}

.quick-panel-footer .notes {
    font-size: 12px !important;
}

.quick-panel-footer .button.primary {
    min-height: 40px !important;
}

@media (max-width: 980px) {
    .quick-panel-card {
        width: min(560px, calc(100vw - 24px)) !important;
    }

    .quick-panel-form {
        overflow: auto !important;
    }

    .quick-panel-form .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .quick-panel-footer {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    .quick-panel-context {
        grid-template-columns: 1fr !important;
    }

    .quick-panel-context span:not(.is-active) {
        display: none !important;
    }
}

/* OWNER DASHBOARD KPI POLISH 2026-06-18 - ajuste fino de acciones y metricas superiores. */
.owner-dashboard-pro {
    gap: 18px !important;
}

.owner-dashboard-hero h2 {
    font-weight: 820 !important;
}

.owner-date-picker span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 780 !important;
}

.owner-quick-actions {
    align-items: center !important;
    gap: 10px !important;
    margin-top: -4px !important;
}

.owner-action-chip {
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 0 15px !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.owner-action-chip.primary {
    padding-inline: 17px !important;
}

.owner-action-chip svg {
    width: 16px !important;
    height: 16px !important;
}

.owner-dashboard-kpis {
    grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.owner-kpi-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 112px !important;
    padding: 17px 20px !important;
    border-radius: 12px !important;
}

.owner-kpi-card .kpi-icon {
    width: 56px !important;
    height: 56px !important;
}

.owner-kpi-card .kpi-icon svg {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 1.85 !important;
}

.owner-kpi-card small {
    margin-bottom: 5px !important;
    color: #52627a !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.owner-kpi-card strong {
    margin-bottom: 5px !important;
    color: #0f172a !important;
    font-size: clamp(22px, 1.4vw, 27px) !important;
    font-weight: 860 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

.owner-kpi-card em {
    max-width: 160px !important;
    font-size: 12.5px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

@media (max-width: 1280px) {
    .owner-dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .owner-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .owner-dashboard-kpis {
        grid-template-columns: 1fr !important;
    }
}

/* BILLING CORRECTION 2.0 2026-06-18 - vista limpia y operativa segun demo. */
.main:has(.billing-correction-shell) {
    height: 100vh !important;
    overflow: hidden !important;
    padding: 18px 22px !important;
    background:
        radial-gradient(circle at 0 0, rgba(20, 184, 166, .10), transparent 28rem),
        linear-gradient(180deg, #fbfdff 0%, #f5f8fb 100%) !important;
}

.billing-correction-shell {
    max-width: 1540px !important;
    height: calc(100vh - 36px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 14px !important;
    overflow: hidden !important;
}

.billing-correction-shell .billing-pro-hero {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) auto !important;
    align-items: end !important;
    gap: 18px !important;
    min-height: auto !important;
    padding: 0 !important;
}

.billing-correction-shell .billing-pro-hero > div {
    display: grid !important;
    gap: 4px !important;
}

.billing-correction-shell .billing-pro-hero span {
    color: #0f766e !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.billing-correction-shell .billing-pro-hero h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(31px, 2.8vw, 42px) !important;
    font-weight: 840 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.billing-correction-shell .billing-pro-hero p {
    margin: 0 !important;
    color: #52627a !important;
    font-size: 14px !important;
}

.billing-period-form {
    display: grid !important;
    grid-template-columns: 158px 158px 82px 136px 132px !important;
    align-items: end !important;
    gap: 9px !important;
}

.billing-period-form label,
.billing-table-filters label {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    color: #52627a !important;
    font-size: 10.5px !important;
    font-weight: 840 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

.billing-period-form input,
.billing-table-filters input,
.billing-table-filters select {
    min-height: 40px !important;
    border: 1px solid #d8e3ef !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

.billing-period-form .button,
.billing-table-filters .button,
.billing-panel-tabs .button {
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
}

.billing-period-form .button.primary,
.billing-table-filters .button.primary {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(15, 118, 110, .16) !important;
}

.billing-pro-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.billing-kpi-card {
    min-width: 0 !important;
    min-height: 92px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    border: 1px solid #dfe8f2 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 15px 16px !important;
    color: #0f172a !important;
    text-decoration: none !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
}

.billing-kpi-icon {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
}

.billing-kpi-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.billing-kpi-card.violet .billing-kpi-icon { background: #ede9fe !important; color: #5b21b6 !important; }
.billing-kpi-card.green .billing-kpi-icon { background: #dcfce7 !important; color: #15803d !important; }
.billing-kpi-card.amber .billing-kpi-icon { background: #fef3c7 !important; color: #b45309 !important; }
.billing-kpi-card.blue .billing-kpi-icon { background: #dbeafe !important; color: #1d4ed8 !important; }
.billing-kpi-card.rose .billing-kpi-icon { background: #ffe4e6 !important; color: #be123c !important; }

.billing-kpi-card small {
    display: block !important;
    margin: 0 0 5px !important;
    color: #52627a !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.billing-kpi-card strong {
    display: block !important;
    margin: 0 0 4px !important;
    color: #0f172a !important;
    font-size: clamp(22px, 1.55vw, 26px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.billing-kpi-card em {
    display: block !important;
    color: #15803d !important;
    font-size: 11.5px !important;
    font-style: normal !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

.billing-kpi-card em.is-negative {
    color: #e11d48 !important;
}

.billing-pro-layout {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 14px !important;
    overflow: hidden !important;
}

.billing-pro-main,
.billing-pro-side {
    min-height: 0 !important;
    overflow: hidden !important;
}

.billing-pro-card {
    min-width: 0 !important;
    border: 1px solid #dfe8f2 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .045) !important;
}

.billing-workspace-card {
    height: 100% !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}

.billing-card-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 14px !important;
    margin: 0 0 12px !important;
}

.billing-card-header h3,
.billing-summary-card > h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 19px !important;
    font-weight: 820 !important;
    line-height: 1.15 !important;
}

.billing-card-header p {
    margin: 5px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
}

.billing-panel-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.billing-panel-tabs button {
    min-height: 38px !important;
    border: 1px solid #d8e3ef !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #334155 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}

.billing-panel-tabs button.is-active {
    border-color: #0f766e !important;
    background: #0f766e !important;
    color: #ffffff !important;
}

.billing-panel {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

.billing-table-filters {
    display: grid !important;
    grid-template-columns: 200px 168px minmax(260px, 1fr) 86px !important;
    align-items: end !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.billing-pro-table-wrap {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid #dfe8f2 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.billing-correction-shell .billing-pro-table-wrap {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.billing-pro-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

.billing-pro-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    height: 38px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
    font-weight: 820 !important;
    letter-spacing: .045em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #dfe8f2 !important;
}

.billing-pro-table td {
    height: 58px !important;
    padding: 9px !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #e6edf5 !important;
}

.billing-pro-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.billing-pro-table th:nth-child(1),
.billing-pro-table td:nth-child(1) { width: 15% !important; }
.billing-pro-table th:nth-child(2),
.billing-pro-table td:nth-child(2) { width: 15% !important; }
.billing-pro-table th:nth-child(3),
.billing-pro-table td:nth-child(3) { width: 15% !important; }
.billing-pro-table th:nth-child(4),
.billing-pro-table td:nth-child(4) { width: 17% !important; }
.billing-pro-table th:nth-child(5),
.billing-pro-table td:nth-child(5),
.billing-pro-table th:nth-child(6),
.billing-pro-table td:nth-child(6) { width: 10% !important; }
.billing-pro-table th:nth-child(7),
.billing-pro-table td:nth-child(7) { width: 11% !important; }
.billing-pro-table th:nth-child(8),
.billing-pro-table td:nth-child(8) { width: 7% !important; text-align: right !important; }

.billing-pro-table th {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.billing-pro-table td {
    overflow: visible !important;
    text-overflow: clip !important;
}

.billing-cell-stack {
    display: grid !important;
    gap: 3px !important;
}

.billing-cell-stack strong,
.billing-worker,
.billing-money-cell {
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 720 !important;
}

.billing-cell-stack small {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 520 !important;
}

.billing-worker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.billing-worker i {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: var(--worker-color, #14b8a6) !important;
}

.billing-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 25px !important;
    border-radius: 999px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
    font-weight: 780 !important;
}

.billing-status.status-paid {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.billing-status.status-pending,
.billing-status.status-scheduled,
.billing-status.status-completed {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.billing-status.status-cancelled,
.billing-status.status-void,
.billing-status.status-overdue,
.billing-status.status-no_show {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

.billing-pro-table .table-action {
    min-height: 34px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.billing-summary-card {
    height: auto !important;
    max-height: 100% !important;
    display: grid !important;
    gap: 14px !important;
    align-self: start !important;
    padding: 16px !important;
    overflow: hidden !important;
}

.billing-donut-wrap {
    display: grid !important;
    grid-template-columns: 138px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
}

.billing-donut {
    width: 132px !important;
    height: 132px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: var(--billing-donut) !important;
    position: relative !important;
}

.billing-donut::after {
    content: "" !important;
    position: absolute !important;
    inset: 34px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}

.billing-donut strong,
.billing-donut span {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
}

.billing-donut strong {
    max-width: 86px !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 820 !important;
    line-height: 1.1 !important;
}

.billing-donut span {
    margin-top: 32px !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
}

.billing-donut-legend {
    display: grid !important;
    gap: 12px !important;
}

.billing-donut-legend div {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) !important;
    gap: 5px 10px !important;
    align-items: center !important;
}

.billing-donut-legend i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    grid-row: span 2 !important;
}

.billing-donut-legend .legend-paid { background: #73c877 !important; }
.billing-donut-legend .legend-pending { background: #f8c44f !important; }
.billing-donut-legend .legend-cancelled { background: #f05262 !important; }

.billing-donut-legend span {
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 780 !important;
    line-height: 1.15 !important;
}

.billing-donut-legend strong {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
}

.billing-commission-list {
    display: grid !important;
    gap: 10px !important;
    border-top: 1px solid #e6edf5 !important;
    padding-top: 14px !important;
}

.billing-commission-list header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.billing-commission-list header strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 820 !important;
}

.billing-commission-list header a {
    color: #5b21f6 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    text-decoration: none !important;
}

.billing-commission-list > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 10px !important;
}

.billing-commission-list > div span,
.billing-commission-list > div strong {
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.billing-commission-list > div i {
    grid-column: 1 / -1 !important;
    height: 5px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #edf2f7 !important;
}

.billing-commission-list > div i::before {
    content: "" !important;
    display: block !important;
    width: var(--bar, 0) !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #5b3df4 !important;
}

.billing-table-footer {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 10px !important;
    color: #64748b !important;
    font-size: 12px !important;
}

@media (max-width: 1320px) {
    .billing-correction-shell .billing-pro-hero {
        grid-template-columns: 1fr !important;
    }

    .billing-period-form {
        justify-content: start !important;
    }

    .billing-pro-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .billing-pro-layout {
        grid-template-columns: 1fr !important;
        overflow: auto !important;
    }
}

@media (max-width: 860px) {
    .main:has(.billing-correction-shell) {
        height: auto !important;
        overflow: auto !important;
        padding: 14px !important;
    }

    .billing-correction-shell {
        height: auto !important;
        overflow: visible !important;
    }

    .billing-period-form,
    .billing-table-filters,
    .billing-pro-kpis {
        grid-template-columns: 1fr !important;
    }

    .billing-card-header {
        grid-template-columns: 1fr !important;
    }

    .billing-panel-tabs {
        flex-wrap: wrap !important;
    }
}

/* GLOBAL PRODUCT UX BASELINE 2026-06-18
   Contract shared by the SaaS after the global audit prompt. Keep this layer small:
   it defines product tokens, focus, icon scale and interaction polish without
   overriding the bespoke screens already corrected by module. */
:root {
    --clinc-space-1: 4px;
    --clinc-space-2: 8px;
    --clinc-space-3: 12px;
    --clinc-space-4: 16px;
    --clinc-space-5: 24px;
    --clinc-space-6: 32px;
    --clinc-radius-control: 12px;
    --clinc-radius-card: 16px;
    --clinc-radius-drawer: 16px;
    --clinc-shadow-soft: 0 14px 36px rgba(15, 23, 42, .055);
    --clinc-shadow-raised: 0 18px 46px rgba(15, 23, 42, .075);
    --clinc-focus-ring: 0 0 0 4px rgba(20, 184, 166, .15);
    --clinc-product-bg: #f6f9fb;
    --clinc-product-surface: #ffffff;
    --clinc-product-line: #dbe5ef;
    --clinc-product-ink: #0f172a;
    --clinc-product-muted: #607089;
    --clinc-product-jade: #0f766e;
    --clinc-product-jade-soft: #ecfdf8;
}

body {
    font-family: Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body.is-authenticated,
body.is-authenticated * {
    box-sizing: border-box;
}

body.is-authenticated :where(button, input, select, textarea, .button, .table-action, .badge, .status, .billing-status) {
    font-family: inherit;
    letter-spacing: 0;
}

body.is-authenticated :where(button, .button, .table-action, .icon-button) {
    align-items: center;
    justify-content: center;
    gap: var(--clinc-space-2);
}

body.is-authenticated :where(button svg, .button svg, .table-action svg, .icon-button svg, .nav svg, .sidebar svg) {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke-width: 1.9;
}

body.is-authenticated :where(input, select, textarea, button, a, .button, .table-action, .icon-button):focus-visible {
    outline: 0;
    box-shadow: var(--clinc-focus-ring) !important;
}

body.is-authenticated :where(.panel, .metric-card, .chart-card, .form-card, .modal, .drawer, .billing-panel, .employee-editor-card) {
    background-clip: padding-box;
}

body.is-authenticated :where(.table-wrap, .company-table-shell, .calendar-grid-scroll, .billing-pro-table-wrap, .quick-panel-body) {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 118, 110, .38) transparent;
}

body.is-authenticated :where(.table-wrap, .company-table-shell, .calendar-grid-scroll, .billing-pro-table-wrap, .quick-panel-body)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.is-authenticated :where(.table-wrap, .company-table-shell, .calendar-grid-scroll, .billing-pro-table-wrap, .quick-panel-body)::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(15, 118, 110, .34);
    background-clip: padding-box;
}

body.is-authenticated :where(.table-wrap, .company-table-shell, .calendar-grid-scroll, .billing-pro-table-wrap, .quick-panel-body)::-webkit-scrollbar-track {
    background: transparent;
}

/* BILLING FINANCIAL SUMMARY POLISH 2026-06-18
   Replaces the heavy donut with a compact segmented summary. */
.billing-correction-shell .billing-summary-card {
    gap: 12px !important;
}

.billing-correction-shell .billing-finance-panel {
    display: grid !important;
    gap: 12px !important;
    border: 1px solid #e3ebf4 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%) !important;
    padding: 12px !important;
}

.billing-correction-shell .billing-finance-total {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px 12px !important;
    align-items: end !important;
}

.billing-correction-shell .billing-finance-total span,
.billing-correction-shell .billing-finance-total em {
    color: #64748b !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.billing-correction-shell .billing-finance-total strong {
    grid-row: span 2 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.billing-correction-shell .billing-segment-chart {
    display: grid !important;
    gap: 7px !important;
}

.billing-correction-shell .billing-segment-bar {
    display: flex !important;
    width: 100% !important;
    height: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(203, 213, 225, .88) !important;
    border-radius: 999px !important;
    background: #edf3f8 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06) !important;
}

.billing-correction-shell .billing-segment-bar span {
    min-width: 0 !important;
    height: 100% !important;
}

.billing-correction-shell .billing-segment-bar span + span {
    border-left: 2px solid #ffffff !important;
}

.billing-correction-shell .billing-segment-bar .segment-paid {
    background: linear-gradient(90deg, #36b37e, #74d27a) !important;
}

.billing-correction-shell .billing-segment-bar .segment-pending {
    background: linear-gradient(90deg, #f7a928, #ffd166) !important;
}

.billing-correction-shell .billing-segment-bar .segment-cancelled {
    background: linear-gradient(90deg, #ef476f, #fb7185) !important;
}

.billing-correction-shell .billing-segment-bar .segment-empty {
    background: repeating-linear-gradient(135deg, #edf3f8 0, #edf3f8 8px, #e2eaf3 8px, #e2eaf3 16px) !important;
}

.billing-correction-shell .billing-finance-breakdown {
    display: grid !important;
    gap: 8px !important;
}

.billing-correction-shell .finance-state {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    border: 1px solid #e6edf5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 8px 10px !important;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.billing-correction-shell .finance-state:hover {
    transform: translateY(-1px) !important;
    border-color: #cdd9e8 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05) !important;
}

.billing-correction-shell .finance-state i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
}

.billing-correction-shell .finance-paid i { background: #36b37e !important; }
.billing-correction-shell .finance-pending i { background: #f7a928 !important; }
.billing-correction-shell .finance-cancelled i { background: #ef476f !important; }

.billing-correction-shell .finance-state span {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
}

.billing-correction-shell .finance-state strong {
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 780 !important;
    line-height: 1.1 !important;
}

.billing-correction-shell .finance-state small {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
}

.billing-correction-shell .finance-state em {
    min-width: 42px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    padding: 5px 8px !important;
    text-align: center !important;
    font-size: 11.5px !important;
    font-style: normal !important;
    font-weight: 780 !important;
}

/* LANDING PREMIUM 2026-06-18 - public SaaS page aligned with approved demo. */
.landing-premium-page {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #ffffff;
    color: #12172f;
    font-family: Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

.landing-premium-page * {
    box-sizing: border-box;
}

.landing-premium-page a {
    color: inherit;
}

.premium-nav {
    position: sticky;
    top: 12px;
    z-index: 50;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    width: min(1380px, calc(100% - 72px));
    min-height: 96px;
    margin: 0 auto;
    border: 1px solid rgba(224, 232, 245, .72);
    border-radius: 28px;
    background: rgba(255, 255, 255, .80);
    padding: 0 26px;
    box-shadow: 0 22px 70px rgba(31, 41, 74, .055);
    backdrop-filter: blur(18px);
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.premium-nav.is-scrolled {
    border-color: rgba(210, 219, 237, .92);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 54px rgba(18, 23, 47, .08);
    backdrop-filter: blur(18px);
}

.premium-brand {
    display: inline-flex;
    align-items: center;
    min-width: 118px;
    text-decoration: none;
}

.premium-brand img {
    width: 118px;
    height: auto;
    display: block;
}

.premium-nav nav,
.premium-nav-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.premium-nav nav {
    justify-content: center;
}

.premium-nav nav a,
.premium-nav-actions > a:not(.premium-button) {
    color: #12172f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    transition: color .16s ease, transform .16s ease;
}

.premium-nav nav a:hover,
.premium-nav-actions > a:not(.premium-button):hover {
    color: #5b37f2;
    transform: translateY(-1px);
}

.premium-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #d9e1ee;
    border-radius: 14px;
    padding: 0 18px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 820;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.premium-button:hover {
    transform: translateY(-2px);
}

.premium-button.primary {
    border-color: #5b37f2;
    background: linear-gradient(135deg, #6d4aff, #4b2ee8);
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(91, 55, 242, .20);
}

.premium-button.secondary {
    background: #ffffff;
    color: #12172f;
}

.premium-button.secondary:hover {
    border-color: #bfb4ff;
    box-shadow: 0 14px 30px rgba(18, 23, 47, .07);
}

.premium-button.light {
    border-color: rgba(255, 255, 255, .55);
    background: #ffffff;
    color: #4b2ee8;
    box-shadow: 0 20px 42px rgba(25, 13, 94, .18);
}

.premium-button.large {
    min-height: 50px;
    padding: 0 28px;
    font-size: 15px;
}

.premium-hero {
    width: min(1320px, calc(100% - 56px));
    min-height: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(600px, 1.15fr);
    align-items: center;
    gap: 58px;
    padding: 48px 0 64px;
}

.premium-hero-copy {
    display: grid;
    gap: 22px;
}

.premium-eyebrow {
    width: fit-content;
    margin: 0;
    border-radius: 999px;
    background: #f0edff;
    color: #5b37f2;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 820;
    line-height: 1;
}

.premium-hero h1 {
    margin: 0;
    color: #12172f;
    font-size: 62px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.premium-hero h1 span {
    display: block;
}

.premium-hero h1 .accent,
.premium-section-copy h2 span,
.premium-benefit-band h2 span {
    color: #5b37f2;
}

.premium-lead {
    max-width: 520px;
    margin: 0;
    color: #5f6f91;
    font-size: 18px;
    font-weight: 560;
    line-height: 1.72;
}

.premium-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.premium-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #65718f;
    font-size: 13px;
    font-weight: 680;
}

.premium-proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.premium-proof-row svg,
.premium-sector-strip svg,
.premium-feature-grid svg,
.premium-business-placeholder svg,
.premium-benefit-list svg {
    width: 19px;
    height: 19px;
    color: #5b37f2;
}

.premium-rating {
    display: grid;
    gap: 9px;
    padding-top: 14px;
}

.premium-rating strong {
    color: #5f6f91;
    font-size: 14px;
    font-weight: 700;
}

.premium-rating span {
    color: #ffb000;
    font-size: 18px;
    font-weight: 900;
}

.premium-rating em {
    color: #5f6f91;
    font-size: 13px;
    font-style: normal;
    font-weight: 650;
}

.premium-hero-visual {
    position: relative;
    min-height: 520px;
}

.premium-ui-shell {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    width: 100%;
    min-height: 456px;
    overflow: hidden;
    border: 1px solid #e3e8f3;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 34px 80px rgba(30, 35, 70, .12);
}

.premium-ui-shell aside {
    display: grid;
    align-content: start;
    gap: 12px;
    background: #10172f;
    color: rgba(255, 255, 255, .72);
    padding: 24px 18px;
}

.premium-ui-shell aside strong {
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 8px;
}

.premium-ui-shell aside span {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 750;
}

.premium-ui-shell aside .is-active {
    background: #5b37f2;
    color: #ffffff;
}

.premium-ui-shell section {
    display: grid;
    gap: 22px;
    padding: 26px;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.premium-ui-shell header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.premium-ui-shell header strong {
    display: block;
    color: #12172f;
    font-size: 17px;
    font-weight: 880;
}

.premium-ui-shell header small,
.premium-ui-shell header span {
    color: #63708f;
    font-size: 12px;
    font-weight: 650;
}

.premium-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.premium-metrics article {
    min-height: 92px;
    border: 1px solid #e9edf5;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 14px 28px rgba(30, 35, 70, .045);
}

.premium-metrics i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f0edff;
    color: #5b37f2;
    font-style: normal;
}

.premium-metrics svg {
    width: 17px;
    height: 17px;
}

.premium-metrics span {
    display: block;
    margin-top: 10px;
    color: #63708f;
    font-size: 12px;
    font-weight: 680;
}

.premium-metrics strong {
    display: block;
    margin-top: 4px;
    color: #12172f;
    font-size: 22px;
    font-weight: 900;
}

.premium-agenda-peek {
    display: grid;
    border: 1px solid #e9edf5;
    border-radius: 16px;
    background: #ffffff;
}

.premium-agenda-peek b {
    padding: 16px 18px;
    color: #12172f;
    font-size: 15px;
    font-weight: 850;
}

.premium-agenda-peek span {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    border-top: 1px solid #edf1f6;
    padding: 13px 18px;
    color: #12172f;
    font-size: 13px;
    font-weight: 720;
}

.premium-agenda-peek em {
    color: #5f6f91;
    font-style: normal;
}

.premium-agenda-peek small {
    border-radius: 999px;
    background: #e9f9ef;
    color: #15803d;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 760;
}

.premium-floating-card,
.premium-phone-card {
    position: absolute;
    border: 1px solid #e5eaf4;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 60px rgba(30, 35, 70, .14);
    backdrop-filter: blur(14px);
}

.premium-floating-card {
    right: -22px;
    bottom: 54px;
    display: grid;
    gap: 12px;
    width: 220px;
    border-radius: 18px;
    padding: 18px;
    animation: premiumFloat 6s ease-in-out infinite;
}

.premium-floating-card strong {
    color: #12172f;
    font-size: 14px;
    font-weight: 850;
}

.premium-floating-card span {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #63708f;
    font-size: 12px;
    font-weight: 700;
}

.premium-floating-card svg {
    width: 17px;
    height: 17px;
    color: #5b37f2;
}

.premium-floating-card b {
    color: #12172f;
}

.premium-phone-card {
    right: -2px;
    top: 282px;
    width: 128px;
    min-height: 210px;
    border-radius: 24px;
    padding: 16px 14px;
    transform: rotate(8deg);
}

.premium-phone-card strong {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    text-align: center;
}

.premium-phone-card span {
    display: block;
    color: #5b37f2;
    font-size: 11px;
    font-weight: 850;
}

.premium-phone-card p {
    margin: 3px 0 12px;
    border-radius: 10px;
    background: #f4f2ff;
    padding: 8px;
    color: #12172f;
    font-size: 11px;
    font-weight: 720;
}

.premium-phone-card button {
    position: absolute;
    right: 13px;
    bottom: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #5b37f2;
    color: #ffffff;
    font-weight: 900;
}

.premium-sector-strip {
    border-top: 1px solid #edf1f7;
    border-bottom: 1px solid #edf1f7;
    background: #fbfcff;
    padding: 22px 0;
}

.premium-sector-strip p {
    margin: 0 0 18px;
    color: #7a86a0;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
}

.premium-sector-strip div {
    width: min(1320px, calc(100% - 56px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}

.premium-sector-strip a {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #65718f;
    text-decoration: none;
    font-size: 12px;
    font-weight: 720;
    transition: color .16s ease, transform .16s ease;
}

.premium-sector-strip a:hover {
    color: #5b37f2;
    transform: translateY(-2px);
}

.premium-sector-strip svg {
    width: 27px;
    height: 27px;
    stroke-width: 2;
}

.premium-section,
.premium-benefit-band,
.premium-final-cta,
.premium-footer {
    width: min(1320px, calc(100% - 56px));
    margin: 0 auto;
}

.premium-section {
    scroll-margin-top: 106px;
    padding: 68px 0 0;
}

.premium-sector-strip,
.premium-benefit-band,
.premium-final-cta {
    scroll-margin-top: 106px;
}

.premium-feature-section {
    display: grid;
    grid-template-columns: .56fr 1fr;
    gap: 72px;
    align-items: center;
}

.premium-section-copy h2,
.premium-section-heading h2,
.premium-benefit-band h2 {
    margin: 16px 0 0;
    color: #12172f;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.14;
}

.premium-section-copy > p:not(.premium-eyebrow),
.premium-section-heading p:not(.premium-eyebrow) {
    margin: 18px 0 26px;
    color: #63708f;
    font-size: 16px;
    font-weight: 560;
    line-height: 1.68;
}

.premium-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.premium-feature-grid article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    min-height: 116px;
    border: 1px solid #e3e8f3;
    border-radius: 15px;
    background: #ffffff;
    padding: 18px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.premium-feature-grid article:hover,
.premium-business-grid article:hover,
.premium-plan-grid article:hover,
.premium-testimonials article:hover {
    transform: translateY(-3px);
    border-color: #cfc7ff;
    box-shadow: 0 22px 48px rgba(30, 35, 70, .09);
}

.premium-feature-grid i,
.premium-benefit-list i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f0edff;
    color: #5b37f2;
    font-style: normal;
}

.premium-feature-grid h3,
.premium-business-grid h3,
.premium-plan-grid h3 {
    margin: 0;
    color: #12172f;
    font-size: 15px;
    font-weight: 860;
}

.premium-feature-grid p,
.premium-business-grid p,
.premium-plan-grid p {
    margin: 6px 0 0;
    color: #63708f;
    font-size: 13px;
    font-weight: 560;
    line-height: 1.5;
}

.premium-center-label {
    margin: 0 0 22px;
    color: #7a86a0;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
}

.premium-business-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.premium-business-grid article {
    overflow: hidden;
    border: 1px solid #e3e8f3;
    border-radius: 15px;
    background: #ffffff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.premium-business-grid img,
.premium-business-placeholder {
    width: 100%;
    height: 132px;
}

.premium-business-grid img {
    display: block;
    object-fit: cover;
}

.premium-business-grid article:nth-child(1) img {
    filter: saturate(.98) contrast(1.02);
    object-position: 24% 42%;
}

.premium-business-grid article:nth-child(2) img {
    filter: hue-rotate(18deg) saturate(.92) brightness(1.04);
    object-position: 38% 44%;
}

.premium-business-grid article:nth-child(3) img {
    filter: hue-rotate(-12deg) saturate(1.02) brightness(1.02);
    object-position: 54% 46%;
}

.premium-business-grid article:nth-child(4) img {
    filter: hue-rotate(36deg) saturate(.86) brightness(1.05);
    object-position: 70% 46%;
}

.premium-business-grid article:nth-child(5) img {
    filter: hue-rotate(-24deg) saturate(.9) brightness(1.06);
    object-position: 42% 58%;
}

.premium-business-grid img[src$=".svg"] {
    filter: none !important;
    object-position: center !important;
    background: #f8fafc;
}

.premium-business-grid img[src*="-people."] {
    filter: none !important;
    object-position: center !important;
}

.premium-business-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f3f0ff, #ffffff);
}

.premium-business-placeholder svg {
    width: 40px;
    height: 40px;
}

.premium-business-grid article div {
    padding: 16px;
}

.premium-business-grid a {
    display: inline-flex;
    margin-top: 10px;
    color: #5b37f2;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.premium-benefit-band {
    display: grid;
    grid-template-columns: .8fr 1fr 360px;
    gap: 34px;
    align-items: center;
    margin-top: 64px;
    border: 1px solid #e3e8f3;
    border-radius: 18px;
    background: linear-gradient(135deg, #fbfaff, #ffffff);
    padding: 34px;
}

.premium-benefit-band h2 {
    font-size: 34px;
}

.premium-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.premium-benefit-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
}

.premium-benefit-list p {
    grid-column: 2;
    margin: 0;
    color: #63708f;
    font-size: 13px;
    font-weight: 560;
    line-height: 1.45;
}

.premium-benefit-list strong {
    color: #12172f;
    font-size: 14px;
    font-weight: 840;
}

.premium-benefit-band figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    min-height: 220px;
}

.premium-benefit-band img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.premium-benefit-band button {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #5b37f2;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 40px rgba(18, 23, 47, .16);
}

.premium-flow-preview {
    display: grid;
    gap: 10px;
    align-self: stretch;
    min-height: 260px;
    margin: 0;
    padding: 18px;
    border: 1px solid #dfe7f3;
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 8%, rgba(91, 55, 242, .11), transparent 34%),
        linear-gradient(145deg, #ffffff, #f7fbff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.premium-flow-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e2e8f4;
    border-radius: 15px;
    background: rgba(255, 255, 255, .82);
}

.premium-flow-card.is-active {
    border-color: rgba(20, 166, 143, .35);
    background: #effdfa;
}

.premium-flow-card span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #f0edff;
    color: #5b37f2;
}

.premium-flow-card.is-active span {
    background: #d8fbf3;
    color: #0f8277;
}

.premium-flow-card svg {
    width: 19px;
    height: 19px;
}

.premium-flow-card strong {
    display: block;
    color: #12172f;
    font-size: 14px;
    font-weight: 880;
}

.premium-flow-card p {
    margin: 4px 0 0;
    color: #63708f;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.35;
}

.premium-flow-card em {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f2f5fa;
    color: #64708d;
    font-size: 11px;
    font-style: normal;
    font-weight: 820;
}

.premium-flow-line {
    width: 2px;
    height: 12px;
    margin-left: 32px;
    border-radius: 999px;
    background: #d8e1ee;
}

.premium-flow-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.premium-flow-summary div {
    padding: 12px;
    border-radius: 14px;
    background: #12172f;
    color: #ffffff;
}

.premium-flow-summary small {
    display: block;
    color: rgba(255, 255, 255, .66);
    font-size: 11px;
    font-weight: 760;
}

.premium-flow-summary strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 900;
}

.premium-flow-preview > a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    margin-top: 2px;
    border-radius: 13px;
    background: #5b37f2;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 860;
    box-shadow: 0 16px 32px rgba(91, 55, 242, .18);
}

.premium-testimonials {
    display: grid;
    gap: 24px;
}

.premium-section-heading {
    text-align: center;
}

.premium-section-heading .premium-eyebrow {
    margin: 0 auto;
}

.premium-testimonial-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.premium-testimonials article,
.premium-plan-grid article {
    border: 1px solid #e3e8f3;
    border-radius: 16px;
    background: #ffffff;
    padding: 22px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.premium-testimonials span {
    color: #ffb000;
    font-size: 14px;
    font-weight: 900;
}

.premium-testimonials em {
    color: #63708f;
    font-style: normal;
}

.premium-testimonials p {
    margin: 14px 0 18px;
    color: #26324d;
    font-size: 15px;
    line-height: 1.65;
}

.premium-testimonials strong,
.premium-testimonials small {
    display: block;
}

.premium-testimonials strong {
    color: #12172f;
    font-weight: 840;
}

.premium-testimonials small {
    margin-top: 4px;
    color: #63708f;
    font-weight: 650;
}

.premium-pricing {
    display: grid;
    gap: 28px;
}

.premium-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.premium-plan-grid article {
    display: flex;
    flex-direction: column;
}

.premium-plan-grid article > span {
    color: #5b37f2;
    font-size: 12px;
    font-weight: 800;
}

.premium-plan-grid h3 {
    margin-top: 12px;
    font-size: 22px;
}

.premium-plan-grid strong {
    display: block;
    margin: 18px 0;
    color: #12172f;
    font-size: 32px;
    font-weight: 900;
}

.premium-plan-grid small {
    color: #63708f;
    font-size: 13px;
    font-weight: 680;
}

.premium-plan-grid ul {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.premium-plan-grid li {
    color: #3b4663;
    font-size: 13px;
    font-weight: 650;
}

.premium-plan-grid li::before {
    content: "✓";
    margin-right: 8px;
    color: #16a34a;
    font-weight: 900;
}

.premium-plan-grid .premium-button {
    align-self: flex-start;
    margin-top: auto;
}

.premium-final-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin-top: 68px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6d4aff, #4b2ee8);
    color: #ffffff;
    padding: 34px 38px;
    box-shadow: 0 28px 70px rgba(91, 55, 242, .22);
}

.premium-final-cta p,
.premium-final-cta h2,
.premium-final-cta span {
    margin: 0;
}

.premium-final-cta p {
    font-size: 13px;
    font-weight: 820;
    opacity: .88;
}

.premium-final-cta h2 {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.18;
}

.premium-final-cta span {
    display: block;
    margin-top: 8px;
    opacity: .82;
    font-size: 15px;
    font-weight: 570;
}

.premium-footer {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
    gap: 44px;
    padding: 38px 0 34px;
    color: #63708f;
}

.premium-footer img {
    width: 118px;
}

.premium-footer p {
    max-width: 240px;
    margin: 14px 0 0;
    line-height: 1.6;
}

.premium-footer nav {
    display: grid;
    align-content: start;
    gap: 11px;
}

.premium-footer strong {
    color: #12172f;
    font-size: 13px;
    font-weight: 860;
}

.premium-footer a {
    color: #63708f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 620;
}

.reveal-on-load {
    animation: premiumReveal .58s ease both;
}

.reveal-on-load:nth-child(2) {
    animation-delay: .1s;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .52s ease, transform .52s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.landing-admin-form {
    display: grid;
    gap: 16px;
}

.landing-admin-section {
    border: 1px solid #dbe5ef;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}

.landing-admin-section summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 16px 18px;
    background: #f8fafc;
}

.landing-admin-section summary strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 850;
}

.landing-admin-section summary span {
    color: #64748b;
    font-size: 13px;
    font-weight: 720;
}

.landing-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.landing-admin-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid #e3eaf3;
    border-radius: 14px;
    background: #ffffff;
    padding: 14px;
}

.landing-admin-card label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.landing-admin-card input,
.landing-admin-card textarea {
    width: 100%;
    border: 1px solid #cbd8e6;
    border-radius: 10px;
    padding: 10px 11px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 620;
    text-transform: none;
}

.landing-admin-wide {
    grid-column: 1 / -1;
}

.landing-admin-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
}

.landing-admin-check input {
    width: auto;
}

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

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

@media (max-width: 1180px) {
    .premium-nav {
        grid-template-columns: auto auto;
    }

    .premium-nav nav {
        display: none;
    }

    .premium-hero,
    .premium-feature-section,
    .premium-benefit-band {
        grid-template-columns: 1fr;
    }

    .premium-hero {
        min-height: auto;
        padding-top: 34px;
    }

    .premium-hero-visual {
        min-height: 470px;
    }

    .premium-sector-strip div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .premium-business-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .premium-benefit-band figure {
        max-width: 540px;
    }
}

@media (max-width: 760px) {
    .premium-nav,
    .premium-hero,
    .premium-section,
    .premium-benefit-band,
    .premium-final-cta,
    .premium-footer,
    .premium-sector-strip div {
        width: min(100% - 28px, 540px);
    }

    .premium-nav {
        min-height: 68px;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 0 12px;
    }

    .premium-nav-actions {
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    .premium-nav-actions > a:not(.premium-button) {
        flex: 0 0 auto;
        font-size: 12px;
        white-space: nowrap;
    }

    .premium-nav-actions .premium-button {
        flex: 0 1 auto;
        min-width: 0;
        padding: 0 14px;
        white-space: nowrap;
    }

    .premium-brand img {
        width: 104px;
    }

    .premium-hero {
        gap: 34px;
        padding: 28px 0 44px;
    }

    .premium-hero h1 {
        max-width: 100%;
        font-size: clamp(36px, 9.8vw, 40px);
        line-height: 1.12;
        overflow-wrap: normal;
    }

    .premium-lead {
        font-size: 16px;
        max-width: 100%;
    }

    .premium-hero-actions,
    .premium-hero-actions .premium-button {
        width: 100%;
    }

    .premium-hero-visual {
        min-height: auto;
    }

    .premium-ui-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .premium-ui-shell aside,
    .premium-floating-card,
    .premium-phone-card {
        display: none;
    }

    .premium-metrics,
    .premium-feature-grid,
    .premium-business-grid,
    .premium-benefit-list,
    .premium-testimonial-rail,
    .premium-plan-grid,
    .premium-footer,
    .landing-admin-grid,
    .landing-admin-card {
        grid-template-columns: 1fr;
    }

    .premium-sector-strip div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-section-copy h2,
    .premium-section-heading h2,
    .premium-benefit-band h2 {
        font-size: 31px;
    }

    .premium-benefit-band,
    .premium-final-cta {
        padding: 24px;
    }

    .premium-final-cta {
        grid-template-columns: 1fr;
    }

    .premium-final-cta .premium-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .premium-nav,
    .premium-hero,
    .premium-section,
    .premium-benefit-band,
    .premium-final-cta,
    .premium-footer,
    .premium-sector-strip div {
        width: min(100% - 24px, 420px);
    }

    .premium-brand img {
        width: 98px;
    }

    .premium-nav-actions {
        align-items: center;
    }

    .premium-nav-actions .premium-button {
        min-height: 40px;
        padding: 0 13px;
        font-size: 12px;
    }

    .premium-hero {
        gap: 28px;
        padding-top: 22px;
    }

    .premium-hero h1 {
        font-size: 36px;
    }

    .premium-proof-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* LOGIN REDESIGN 2026-06-19 - compact Clinc access screen aligned with the SaaS visual system. */
body.is-guest:has(.auth-login-v2) {
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .18), transparent 34rem),
        radial-gradient(circle at 96% 100%, rgba(99, 102, 241, .13), transparent 34rem),
        linear-gradient(135deg, #f7fbfb 0%, #ffffff 52%, #f4f2ff 100%) !important;
}

body.is-guest:has(.auth-login-v2) .app-shell {
    display: block !important;
}

body.is-guest:has(.auth-login-v2) .sidebar {
    display: none !important;
}

body.is-guest:has(.auth-login-v2) .main {
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    display: grid !important;
    align-items: center !important;
    padding: clamp(14px, 2vw, 20px) !important;
    background: transparent !important;
}

.auth-login-v2 {
    width: min(1160px, 100%) !important;
    min-height: min(650px, calc(100dvh - 56px)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.auth-login-v2 .auth-login-visual,
.auth-login-v2 .auth-login-panel {
    border: 1px solid rgba(203, 213, 225, .95) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08) !important;
}

.auth-login-v2 .auth-login-visual {
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: clamp(23px, 2.8vw, 32px) !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(236, 253, 245, .9), rgba(255, 255, 255, .92) 48%, rgba(238, 242, 255, .86)) !important;
}

.auth-login-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-login-brand img {
    width: 126px !important;
    height: auto !important;
}

.auth-login-brand span,
.auth-login-trust span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 999px;
    background: rgba(240, 253, 250, .82);
    color: #0f766e;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 850;
}

.auth-login-copy {
    max-width: 640px;
}

.auth-login-copy .eyebrow,
.auth-login-panel-head .eyebrow {
    margin: 0 0 10px;
    color: #0f766e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}

.auth-login-copy h2 {
    max-width: 610px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(31px, 2.8vw, 40px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.auth-login-copy p:not(.eyebrow) {
    max-width: 590px !important;
    margin: 12px 0 0 !important;
    color: #51627a !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.auth-login-secure-board {
    width: min(620px, 100%);
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(240, 253, 250, .86)),
        repeating-linear-gradient(135deg, rgba(79, 70, 229, .045) 0 12px, transparent 12px 24px);
    padding: 14px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}

.auth-secure-card-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    padding: 12px;
}

.auth-secure-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ccfbf1, #eef2ff);
    color: #0f766e;
    font-size: 20px;
    font-weight: 950;
}

.auth-secure-card strong,
.auth-secure-grid b {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.auth-secure-card small,
.auth-secure-grid small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.auth-secure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.auth-secure-grid span {
    min-height: 68px;
    border: 1px solid #dbe7ef;
    border-radius: 18px;
    background: rgba(248, 250, 252, .88);
    padding: 11px 12px;
}

.auth-secure-lock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-top: 12px;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(15, 131, 120, .1), rgba(79, 70, 229, .08));
    padding: 10px 14px;
}

.auth-secure-lock span {
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #0f8378 0 42%, rgba(203, 213, 225, .9) 42% 100%);
}

.auth-secure-lock p {
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}

.auth-login-preview {
    width: min(620px, 100%);
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    padding: 14px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}

.auth-preview-head,
.auth-preview-metrics,
.auth-preview-agenda span {
    display: grid;
    align-items: center;
}

.auth-preview-head {
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.auth-preview-head strong {
    color: #0f172a;
    font-size: 13px;
}

.auth-preview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.auth-preview-metrics span {
    min-width: 0;
    border-radius: 18px;
    background: #f4f7fb;
    padding: 10px 12px;
}

.auth-preview-metrics strong {
    display: block;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.auth-preview-metrics small,
.auth-preview-agenda small {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.auth-preview-agenda {
    display: grid;
    gap: 8px;
}

.auth-preview-agenda span {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 40px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(238, 242, 255, .96), rgba(255, 255, 255, .94));
    padding: 8px 12px;
}

.auth-preview-agenda b {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 900;
}

.auth-preview-agenda em {
    min-width: 0;
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-login-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-login-v2 .auth-login-panel {
    align-self: center;
    min-height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: clamp(25px, 2.8vw, 34px) !important;
}

.auth-login-panel-head h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(31px, 2.6vw, 40px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.auth-login-panel-head .notes {
    max-width: 340px;
    margin: 12px 0 0;
    color: #64748b !important;
    font-size: 14px;
    line-height: 1.55;
}

.auth-login-v2 label {
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}

.auth-login-v2 input[type="email"],
.auth-login-v2 input[type="password"] {
    width: 100%;
    min-height: 52px !important;
    margin-top: 8px;
    border: 1px solid #cbd8e6 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #0f172a !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    outline: none !important;
    box-shadow: none !important;
}

.auth-login-v2 input[type="email"]:focus,
.auth-login-v2 input[type="password"]:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .14) !important;
}

.auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 2px;
}

.auth-login-options .checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #475569 !important;
    font-size: 12px !important;
    text-transform: none !important;
}

.auth-login-options input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #0f766e;
}

.auth-login-options a,
.auth-login-footnote {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.auth-login-v2 .button.primary {
    min-height: 54px !important;
    border-radius: 17px !important;
    background: #0f8378 !important;
    box-shadow: 0 18px 36px rgba(15, 131, 120, .24) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.auth-login-footnote {
    margin: 0;
    color: #64748b;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 1050px) {
    .auth-login-v2 {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        width: min(720px, 100%) !important;
    }

    .auth-login-v2 .auth-login-panel {
        align-self: stretch;
    }

    .auth-login-copy h2 {
        font-size: clamp(36px, 7vw, 54px) !important;
    }
}

@media (max-width: 640px) {
    body.is-guest:has(.auth-login-v2) .main {
        padding: 14px !important;
    }

    .auth-login-v2 .auth-login-visual,
    .auth-login-v2 .auth-login-panel {
        border-radius: 22px !important;
        padding: 22px !important;
    }

    .auth-login-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-preview-metrics,
    .auth-preview-agenda span,
    .auth-secure-grid,
    .auth-secure-lock {
        grid-template-columns: 1fr;
    }

    .auth-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* LOGIN DEMO PROMPT 2026-06-19 - rebuilt from the provided reference, no private data before auth. */
body.is-guest:has(.auth-login-demo) {
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 0% 18%, rgba(20, 184, 166, .22), transparent 30rem),
        radial-gradient(circle at 100% 88%, rgba(99, 102, 241, .18), transparent 32rem),
        linear-gradient(135deg, #eefdff 0%, #fafcff 38%, #f2efff 100%) !important;
}

body.is-guest:has(.auth-login-demo) .app-shell {
    display: block !important;
}

body.is-guest:has(.auth-login-demo) .sidebar,
body.is-guest:has(.auth-login-demo) .topbar {
    display: none !important;
}

body.is-guest:has(.auth-login-demo) .main {
    min-height: 100dvh !important;
    display: grid !important;
    align-items: center !important;
    padding: clamp(16px, 2vw, 28px) !important;
    background: transparent !important;
}

.auth-login-demo {
    width: min(1420px, 100%);
    margin: 0 auto;
}

.auth-login-demo-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(390px, .86fr);
    gap: clamp(36px, 5vw, 72px);
    min-height: min(760px, calc(100dvh - 88px));
    border: 1px solid rgba(218, 226, 239, .96);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .86)),
        radial-gradient(circle at 12% 15%, rgba(20, 184, 166, .10), transparent 25rem),
        radial-gradient(circle at 92% 78%, rgba(99, 102, 241, .12), transparent 28rem);
    box-shadow: 0 35px 90px rgba(52, 64, 84, .12);
    padding: clamp(42px, 5vw, 74px);
}

.auth-login-demo-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.auth-login-demo-logo {
    width: 132px;
    height: auto;
}

.auth-login-demo-badge {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    border-radius: 999px;
    background: #f1eafe;
    color: #6d3df2;
    padding: 0 13px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-login-demo-badge svg,
.auth-login-demo svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-login-demo-copy h2 {
    max-width: 620px;
    margin: 0;
    color: #111827;
    font-size: clamp(38px, 4.1vw, 58px);
    font-weight: 900;
    line-height: 1.13;
    letter-spacing: 0;
}

.auth-login-demo-copy h2 span {
    color: #6c3df4;
}

.auth-login-demo-copy p {
    max-width: 560px;
    margin: 18px 0 0;
    color: #65738c;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.55;
}

.auth-login-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.auth-login-benefits article {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.auth-login-benefits article > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 15px;
}

.auth-login-benefits .is-purple { color: #6d3df2; background: #f0eaff; }
.auth-login-benefits .is-mint { color: #0f9f7b; background: #e7fff5; }
.auth-login-benefits .is-amber { color: #f59e0b; background: #fff7df; }
.auth-login-benefits .is-blue { color: #2563eb; background: #eaf2ff; }

.auth-login-benefits strong {
    display: block;
    color: #172033;
    font-size: 15px;
    font-weight: 900;
}

.auth-login-benefits small {
    display: block;
    margin-top: 5px;
    color: #66738c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.auth-login-security-card {
    display: grid;
    grid-template-columns: minmax(210px, .9fr) minmax(220px, 1fr);
    gap: 22px;
    align-items: center;
    max-width: 610px;
    border: 1px solid rgba(226, 232, 240, .78);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(245, 241, 255, .92), rgba(255, 255, 255, .74));
    padding: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.auth-security-visual {
    position: relative;
    min-height: 150px;
}

.auth-mini-dashboard {
    position: absolute;
    inset: 24px 8px 6px 36px;
    border: 1px solid rgba(168, 143, 255, .28);
    border-radius: 18px;
    background:
        linear-gradient(90deg, #201b3d 0 25%, transparent 25%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 241, 255, .92));
    box-shadow: 0 22px 36px rgba(88, 63, 199, .18);
}

.auth-mini-dashboard::before,
.auth-mini-dashboard::after {
    content: "";
    position: absolute;
    left: 36%;
    right: 11%;
    border-radius: 999px;
    background: #ded8ff;
}

.auth-mini-dashboard::before {
    top: 28px;
    height: 12px;
    box-shadow: 0 28px 0 #ecfdf5, 0 56px 0 #eaf2ff;
}

.auth-mini-dashboard::after {
    bottom: 18px;
    width: 42%;
    height: 18px;
    background: #6d3df2;
}

.auth-shield,
.auth-padlock {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #6d3df2;
}

.auth-shield {
    left: 0;
    bottom: 0;
    width: 88px;
    height: 98px;
    border-radius: 26px;
    background: linear-gradient(135deg, #efe9ff, #cfc0ff);
    box-shadow: 0 22px 35px rgba(109, 61, 242, .22);
}

.auth-shield svg {
    width: 50px;
    height: 50px;
    stroke-width: 2.5;
}

.auth-padlock {
    right: 14px;
    bottom: 12px;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 14px 28px rgba(52, 64, 84, .10);
}

.auth-login-security-card strong {
    display: block;
    color: #172033;
    font-size: 16px;
    font-weight: 900;
}

.auth-login-security-card p {
    margin: 14px 0;
    color: #66738c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.auth-login-security-card a {
    color: #6d3df2;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.auth-login-demo-right {
    display: grid;
    align-items: center;
}

.auth-login-demo-card {
    width: min(100%, 490px);
    justify-self: center;
    display: flex;
    flex-direction: column;
    gap: 19px;
    border: 1px solid rgba(229, 234, 244, .95);
    border-radius: 28px;
    background: rgba(255, 255, 255, .93);
    padding: clamp(36px, 4vw, 52px) clamp(38px, 4.2vw, 54px);
    box-shadow: 0 24px 58px rgba(52, 64, 84, .10);
}

.auth-login-lock {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f2edff, #fff);
    color: #6d3df2;
    box-shadow: inset 0 0 0 1px #e8ddff;
}

.auth-login-lock svg {
    width: 31px;
    height: 31px;
}

.auth-login-demo-heading {
    text-align: center;
}

.auth-login-demo-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 0;
}

.auth-login-demo-heading p {
    margin: 9px 0 0;
    color: #66738c;
    font-size: 14px;
    font-weight: 650;
}

.auth-input-wrap {
    display: grid;
    gap: 8px;
    color: #526078;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-input-wrap small {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 49px;
    border: 1px solid #d8e0ed;
    border-radius: 9px;
    background: #fff;
    padding: 0 12px;
}

.auth-input-wrap small > svg {
    color: #71809a;
}

.auth-input-wrap input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-size: 14px;
    font-weight: 750;
    text-transform: none;
}

.auth-input-wrap input::placeholder {
    color: #9aa7bb;
}

.auth-input-wrap:focus-within small {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
}

.auth-password-toggle {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #71809a;
}

.auth-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #526078;
    font-size: 12px;
    font-weight: 800;
}

.auth-login-row label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.auth-login-row input {
    width: 16px;
    height: 16px;
    accent-color: #6d3df2;
}

.auth-login-row span {
    color: #6d3df2;
}

.auth-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 58px;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c3cff, #4f36e9);
    color: #fff;
    box-shadow: 0 18px 34px rgba(98, 63, 238, .28);
    font-size: 15px;
    font-weight: 900;
}

.auth-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(98, 63, 238, .34);
}

.auth-login-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #9aa7bb;
    font-size: 12px;
    font-weight: 700;
}

.auth-login-divider::before,
.auth-login-divider::after {
    content: "";
    height: 1px;
    background: #e5eaf2;
}

.auth-google-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border: 1px solid #dfe6f1;
    border-radius: 9px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.auth-google-button span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #4285f4;
    font-weight: 950;
}

.auth-login-register {
    margin: 4px 0 0;
    color: #8b98ae;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.auth-login-register a {
    color: #6d3df2;
    font-weight: 850;
    text-decoration: none;
}

.auth-login-demo-footer {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #9aa7bb;
    font-size: 12px;
    font-weight: 750;
}

.auth-login-demo-footer span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8c98ad;
    font-size: 15px;
    font-weight: 900;
}

.auth-login-demo-footer svg {
    width: 18px;
    height: 18px;
    color: #8c98ad;
}

@media (min-width: 1121px) and (max-height: 920px) {
    body.is-guest:has(.auth-login-demo) .main {
        padding: 14px 22px !important;
        overflow: hidden !important;
    }

    .auth-login-demo-shell {
        min-height: calc(100dvh - 64px);
        gap: clamp(34px, 4vw, 56px);
        padding: 34px 56px;
        border-radius: 28px;
    }

    .auth-login-demo-left {
        gap: 16px;
    }

    .auth-login-demo-logo {
        width: 118px;
    }

    .auth-login-demo-copy h2 {
        max-width: 560px;
        font-size: 48px;
        line-height: 1.08;
    }

    .auth-login-demo-copy p {
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.45;
    }

    .auth-login-benefits {
        gap: 12px 22px;
    }

    .auth-login-benefits article {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
    }

    .auth-login-benefits article > span {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .auth-login-benefits small {
        margin-top: 3px;
        line-height: 1.35;
    }

    .auth-login-security-card {
        max-width: 560px;
        grid-template-columns: minmax(170px, .8fr) minmax(220px, 1fr);
        gap: 18px;
        padding: 16px;
        border-radius: 20px;
    }

    .auth-security-visual {
        min-height: 118px;
    }

    .auth-mini-dashboard {
        inset: 18px 4px 4px 30px;
        border-radius: 16px;
    }

    .auth-shield {
        width: 70px;
        height: 78px;
        border-radius: 22px;
    }

    .auth-shield svg {
        width: 40px;
        height: 40px;
    }

    .auth-padlock {
        right: 6px;
        bottom: 6px;
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .auth-login-security-card p {
        margin: 10px 0;
        line-height: 1.42;
    }

    .auth-login-demo-card {
        gap: 14px;
        padding: 34px 44px;
        border-radius: 26px;
    }

    .auth-login-lock {
        width: 62px;
        height: 62px;
        margin-bottom: 4px;
    }

    .auth-login-lock svg {
        width: 27px;
        height: 27px;
    }

    .auth-input-wrap small {
        min-height: 46px;
    }

    .auth-login-submit {
        min-height: 54px;
    }

    .auth-google-button {
        min-height: 48px;
    }

    .auth-login-demo-footer {
        margin-top: 8px;
        gap: 4px;
        font-size: 11px;
    }
}

@media (max-width: 1120px) {
    .auth-login-demo-shell {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .auth-login-demo-right {
        order: -1;
    }

    .auth-login-demo-left {
        display: none;
    }
}

@media (max-width: 620px) {
    body.is-guest:has(.auth-login-demo) .main {
        padding: 12px !important;
    }

    .auth-login-demo-shell {
        min-height: auto;
        padding: 18px;
        border-radius: 24px;
    }

    .auth-login-demo-card {
        padding: 26px 20px;
        border-radius: 22px;
    }

    .auth-login-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* PLATFORM COMPANY USERS 2026-06-19 - SaaS admin can create and maintain tenant access users. */
.company-users-admin {
    display: grid;
    gap: 18px;
}

.company-user-create-form,
.company-user-edit-form,
.company-user-row-summary {
    display: grid;
    align-items: end;
    gap: 12px;
}

.company-user-create-form {
    grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.3fr) minmax(140px, .8fr) minmax(170px, 1fr) auto auto;
    border: 1px solid #dce7f1;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 250, .82), rgba(255, 255, 255, .92));
    padding: 14px;
}

.company-users-admin .company-user-create-form,
.company-users-admin .company-user-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-users-admin .company-user-create-form .button,
.company-users-admin .company-user-edit-form .button {
    width: 100%;
}

.company-users-admin .company-user-row-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.company-users-admin .company-user-row-summary em {
    grid-column: 2 / -1;
}

.company-user-create-form label,
.company-user-edit-form label {
    display: grid;
    gap: 6px;
    color: #526078;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.company-user-create-form input,
.company-user-create-form select,
.company-user-edit-form input,
.company-user-edit-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbd8e6;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 750;
}

.company-user-active-check {
    min-height: 42px;
    display: inline-flex !important;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    border: 1px solid #dbe7ef;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
    color: #0f766e !important;
    text-transform: none !important;
}

.company-user-active-check input {
    width: 16px !important;
    min-height: 16px !important;
    height: 16px !important;
    accent-color: #0f766e;
}

.company-user-row-admin {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
}

.company-user-row-summary {
    grid-template-columns: auto minmax(170px, 1.2fr) auto auto minmax(180px, 1fr);
}

.company-user-edit-form {
    grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.25fr) minmax(130px, .75fr) minmax(180px, 1fr) auto auto;
    border-top: 1px solid #e6edf5;
    padding-top: 12px;
}

.status-pill.danger {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

@media (max-width: 1180px) {
    .company-user-create-form,
    .company-user-edit-form,
    .company-user-row-summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .company-user-create-form,
    .company-user-edit-form,
    .company-user-row-summary {
        grid-template-columns: 1fr;
    }
}

/* 2026-06-21 - Public brand and login form polish. */
.premium-brand {
    min-width: 142px;
}

.premium-brand img {
    width: 142px !important;
    max-height: 46px;
    object-fit: contain;
}

.auth-login-demo-card {
    max-width: 560px;
    padding: clamp(34px, 4vw, 48px) !important;
}

.auth-input-wrap {
    gap: 8px;
}

.auth-input-wrap > span {
    color: #53627a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-input-wrap small {
    min-height: 58px !important;
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 10px 26px rgba(15, 23, 42, .035);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-input-wrap small > svg {
    width: 20px;
    height: 20px;
    color: #74839c;
}

.auth-input-wrap input {
    min-height: 42px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    color: #111827;
    font-size: 15px;
    font-weight: 750;
}

.auth-input-wrap input:focus {
    outline: none;
}

.auth-input-wrap:focus-within small {
    border-color: rgba(99, 102, 241, .58) !important;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .09), 0 16px 34px rgba(79, 70, 229, .08) !important;
}

.auth-password-toggle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.auth-password-toggle:hover {
    background: rgba(99, 102, 241, .08);
}

.auth-login-register {
    color: #66758e;
}

.auth-login-register a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(99, 102, 241, .09);
    color: #4f46e5 !important;
    text-decoration: none;
}

.auth-login-register a:hover {
    background: rgba(99, 102, 241, .14);
}

/* 2026-06-21 - Compact collapsed sidebar logo. */
body.sidebar-collapsed .sidebar .brand {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin-inline: auto !important;
    justify-content: center !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
}

body.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img,
body.is-guest.sidebar-collapsed .sidebar .brand > span.brand-logo-mark img {
    width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    transform: none !important;
}

/* 2026-06-21 - SaaS admin company users panel: readable cards, no overlap. */
.company-users-admin {
    gap: 18px !important;
    overflow: hidden !important;
}

.company-manager-grid:has(.company-users-admin) {
    grid-template-columns: minmax(0, 1fr) minmax(500px, .82fr) !important;
}

.company-users-admin .panel-heading.split {
    align-items: flex-start !important;
    gap: 14px !important;
}

.company-users-admin .panel-heading h2 {
    margin: 0 0 4px !important;
}

.company-users-admin .panel-heading .notes {
    max-width: 34rem !important;
    line-height: 1.45 !important;
}

.company-users-admin > .status-pill,
.company-users-admin .panel-heading > .status-pill {
    flex: 0 0 auto !important;
    min-width: max-content !important;
}

.company-users-admin .company-user-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(240, 253, 250, .82), rgba(255, 255, 255, .96) 58%),
        #fff !important;
    padding: 16px !important;
}

.company-users-admin .company-user-create-form label,
.company-users-admin .company-user-edit-form label {
    min-width: 0 !important;
}

.company-users-admin .company-user-create-form input,
.company-users-admin .company-user-create-form select,
.company-users-admin .company-user-edit-form input,
.company-users-admin .company-user-edit-form select {
    min-width: 0 !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

.company-users-admin .company-user-create-form .company-user-active-check,
.company-users-admin .company-user-create-form .button {
    min-height: 46px !important;
}

.company-users-admin .company-user-list {
    gap: 12px !important;
}

.company-users-admin .company-user-row-admin,
.company-users-admin .company-user-list article {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
    border: 1px solid #dce7f1 !important;
    border-radius: 22px !important;
    background: #fff !important;
    padding: 16px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .04) !important;
    overflow: hidden !important;
}

.company-users-admin .company-user-row-summary {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    grid-template-areas:
        "avatar identity role"
        "avatar identity status"
        "avatar note note" !important;
    gap: 8px 14px !important;
    align-items: center !important;
    min-width: 0 !important;
}

.company-users-admin .company-user-row-summary .user-avatar {
    grid-area: avatar !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ccfbf1, #eef2ff) !important;
    color: #0f766e !important;
}

.company-users-admin .company-user-row-summary > div {
    grid-area: identity !important;
    min-width: 0 !important;
}

.company-users-admin .company-user-row-summary strong,
.company-users-admin .company-user-row-summary small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.company-users-admin .company-user-row-summary strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.company-users-admin .company-user-row-summary small {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.company-users-admin .company-user-row-summary .role-pill {
    grid-area: role !important;
    justify-self: end !important;
}

.company-users-admin .company-user-row-summary .status-pill {
    grid-area: status !important;
    justify-self: end !important;
}

.company-users-admin .company-user-row-summary em {
    grid-area: note !important;
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.company-users-admin .company-user-edit-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    border-top: 1px solid #e6edf5 !important;
    padding-top: 14px !important;
}

.company-users-admin .company-user-edit-form .company-user-active-check,
.company-users-admin .company-user-edit-form .button {
    min-height: 44px !important;
}

.company-users-admin .company-user-edit-form .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: #0f766e !important;
    background: #fff !important;
    color: #0f766e !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
}

.company-users-admin .company-user-edit-form .button:hover {
    background: #ecfdf5 !important;
}

html body.is-authenticated .company-users-admin.company-users-admin.company-users-admin .company-user-edit-form.company-user-edit-form button.button.ghost.compact {
    border-color: #0f766e !important;
    background: #fff !important;
    color: #0f766e !important;
}

.company-users-admin .company-user-active-check {
    width: 100% !important;
    min-width: 0 !important;
}

.company-users-admin .company-user-active-check input {
    flex: 0 0 16px !important;
}

@media (max-width: 760px) {
    .company-users-admin .panel-heading.split,
    .company-users-admin .company-user-row-summary {
        grid-template-columns: 1fr !important;
    }

    .company-users-admin .company-user-create-form,
    .company-users-admin .company-user-edit-form {
        grid-template-columns: 1fr !important;
    }

    .company-users-admin .company-user-row-summary {
        grid-template-areas:
            "avatar"
            "identity"
            "role"
            "status"
            "note" !important;
        justify-items: start !important;
    }

    .company-users-admin .company-user-row-summary .role-pill,
    .company-users-admin .company-user-row-summary .status-pill {
        justify-self: start !important;
    }
}

/* 2026-06-21 - Larger public header logo, balanced with nav controls. */
.premium-nav .premium-brand {
    min-width: 184px !important;
    height: 58px !important;
    align-items: center !important;
}

.premium-nav .premium-brand img {
    width: 184px !important;
    max-width: 184px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* 2026-06-22 - Live landing visibility fix after FTP deploy. */
.landing-premium-page .premium-hero .reveal-on-load,
.landing-premium-page .premium-hero-copy,
.landing-premium-page .premium-hero-visual {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
}

.landing-premium-page .premium-hero h1,
.landing-premium-page .premium-hero h1 span,
.landing-premium-page .premium-ui-shell header strong,
.landing-premium-page .premium-agenda-peek b {
    color: #12172f !important;
}

.landing-premium-page .premium-hero h1 .accent {
    color: #5b37f2 !important;
}

.landing-premium-page .premium-lead,
.landing-premium-page .premium-rating strong,
.landing-premium-page .premium-proof-row,
.landing-premium-page .premium-ui-shell header small,
.landing-premium-page .premium-ui-shell header span {
    color: #5f6f91 !important;
}

.landing-premium-page .premium-button,
.landing-premium-page .premium-ui-shell,
.landing-premium-page .premium-floating-card,
.landing-premium-page .premium-phone-card {
    opacity: 1 !important;
}

.landing-premium-page .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
}

/* 2026-06-23 - Unified Clinc purple SaaS theme for platform admin and tenant workspaces. */
body.is-authenticated {
    --erp-bg: #f7f8ff !important;
    --erp-surface: #ffffff !important;
    --erp-surface-soft: #f7f5ff !important;
    --erp-line: #e4ddff !important;
    --erp-line-strong: #cabdff !important;
    --erp-text: #10162f !important;
    --erp-muted: #637091 !important;
    --erp-subtle: #96a0b8 !important;
    --erp-primary: #6547ff !important;
    --erp-accent: #7c5cff !important;
    --erp-success: #10b981 !important;
    --erp-warning: #f59e0b !important;
    --erp-danger: #ef476f !important;
    --erp-sidebar-bg: #080f25 !important;
    --erp-sidebar-hover: rgba(124, 92, 255, .14) !important;
    --erp-sidebar-active: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    --erp-sidebar-text: #dbe3ff !important;
    --erp-sidebar-active-text: #ffffff !important;
    --erp-focus: 0 0 0 4px rgba(101, 71, 255, .15) !important;
    --clinc-primary: #6547ff !important;
    --clinc-jade: #6547ff !important;
    --clinc-product-jade: #6547ff !important;
    --vertical-accent: #6547ff !important;
    --vertical-soft: #f0edff !important;
    --vertical-dark: #10162f !important;
    --vertical-sidebar: #080f25 !important;
    background:
        radial-gradient(circle at 6% 0%, rgba(45, 212, 191, .16), transparent 26rem),
        radial-gradient(circle at 92% 0%, rgba(124, 92, 255, .20), transparent 30rem),
        linear-gradient(180deg, #fbfcff 0%, #f5f7ff 46%, #f9fbff 100%) !important;
    color: var(--erp-text) !important;
}

body.is-authenticated .main,
body.is-authenticated .embedded-main {
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .12), transparent 24rem),
        radial-gradient(circle at 100% 4%, rgba(124, 92, 255, .16), transparent 28rem),
        linear-gradient(180deg, #fbfcff 0%, #f7f8ff 100%) !important;
}

body.is-authenticated .sidebar {
    border-right: 1px solid rgba(148, 163, 184, .16) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 92, 255, .26), transparent 12rem),
        linear-gradient(180deg, #101733 0%, #080f25 52%, #060b18 100%) !important;
    box-shadow: 18px 0 44px rgba(15, 23, 42, .12) !important;
}

body.is-authenticated .sidebar .brand {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.is-authenticated .sidebar-toggle,
body.is-authenticated.sidebar-collapsed .sidebar-toggle {
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .20) !important;
}

body.is-authenticated .sidebar-toggle:hover,
body.is-authenticated.sidebar-collapsed .sidebar-toggle:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    border-color: rgba(255, 255, 255, .26) !important;
}

body.is-authenticated .nav-label {
    color: rgba(219, 227, 255, .58) !important;
}

body.is-authenticated .nav a,
body.is-authenticated .nav-locked {
    color: rgba(219, 227, 255, .82) !important;
}

body.is-authenticated .nav a:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #ffffff !important;
}

body.is-authenticated .nav a.active,
body.is-authenticated .nav a[aria-current="page"],
body.is-authenticated .sidebar .nav a.active,
body.is-authenticated .sidebar .nav a[aria-current="page"] {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 18px 36px rgba(79, 70, 229, .30) !important;
}

body.is-authenticated .nav a.active .nav-icon,
body.is-authenticated .nav a[aria-current="page"] .nav-icon,
body.is-authenticated .sidebar .nav a.active .nav-icon,
body.is-authenticated .sidebar .nav a[aria-current="page"] .nav-icon {
    background: rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
}

body.is-authenticated .topbar {
    border: 1px solid rgba(202, 189, 255, .72) !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 22px 54px rgba(47, 35, 113, .10) !important;
    backdrop-filter: blur(18px) !important;
}

body.is-authenticated .topbar .eyebrow,
body.is-authenticated .eyebrow,
body.is-authenticated .section-eyebrow,
body.is-authenticated :where(.platform-eyebrow, .admin-eyebrow, .panel-eyebrow, .owner-eyebrow, .billing-eyebrow) {
    color: #6547ff !important;
    letter-spacing: .055em !important;
}

body.is-authenticated .topbar h1,
body.is-authenticated h1,
body.is-authenticated h2,
body.is-authenticated h3 {
    color: #10162f !important;
}

body.is-authenticated :where(.panel, .metric-card, .chart-card, .builder-card, .form-card, .auth-panel, .table-wrap, .room-analytics-card, .room-config-card, .platform-service-card, .owner-panel, .invoice-panel, .dashboard-card, .support-admin-card, .settings-panel, .task-card, .team-card, .billing-kpi-card, .billing-pro-card, .billing-workspace-card, .billing-summary-card, .calendar-side-card, .quick-panel-card, .company-table-shell, .company-stripe-card, .module-mini-card, .employee-editor-card, .rooms-demo-card, .room-config-item, .service-card) {
    border-color: rgba(202, 189, 255, .70) !important;
    background: rgba(255, 255, 255, .91) !important;
    box-shadow: 0 20px 50px rgba(47, 35, 113, .075) !important;
}

body.is-authenticated :where(.panel, .metric-card, .chart-card, .form-card, .table-wrap, .billing-pro-card, .billing-workspace-card, .billing-summary-card, .company-table-shell, .calendar-side-card)::before {
    border-color: rgba(255, 255, 255, .58) !important;
}

body.is-authenticated :where(.metric-card, .owner-kpi-card, .billing-kpi-card) {
    min-height: 118px !important;
}

body.is-authenticated :where(.metric-card .kpi-icon, .owner-kpi-card .kpi-icon, .billing-kpi-icon, .quick-icon, .module-icon, .feature-icon) {
    background: linear-gradient(135deg, #f0edff, #e0faff) !important;
    color: #6547ff !important;
}

body.is-authenticated :where(.metric-card strong, .owner-kpi-card strong, .billing-kpi-card strong) {
    color: #07102a !important;
}

body.is-authenticated :where(.metric-card small, .owner-kpi-card em, .billing-kpi-card em, .notes, .muted, small) {
    color: #637091 !important;
}

body.is-authenticated :where(.button.primary, .table-action.primary, button.primary, button[type="submit"].button:not(.ghost):not(.danger), .quick-panel-footer .button.primary, .billing-period-form .button.primary, .billing-table-filters .button.primary, .calendar-focus-toolbar .button.primary) {
    border-color: #6547ff !important;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(101, 71, 255, .25) !important;
}

body.is-authenticated :where(.owner-action-chip.primary, .platform-actions .button.primary, .platform-actions .table-action.primary, .platform-dashboard-hero .button.primary, .platform-dashboard-hero .table-action.primary, .platform-tabs a.active, .platform-tabs button.is-active, .task-board-tabs a.active, .admin-tabs a.active, .admin-tabs button.is-active) {
    border-color: #6547ff !important;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(101, 71, 255, .25) !important;
}

body.is-authenticated :where(.owner-action-chip, .platform-actions .button, .platform-actions .table-action, .platform-dashboard-hero .button, .platform-dashboard-hero .table-action, .platform-tabs a, .platform-tabs button, .task-board-tabs a, .admin-tabs a, .admin-tabs button) {
    border-color: rgba(202, 189, 255, .86) !important;
}

body.is-authenticated :where(.button.primary, .table-action.primary, button.primary, button[type="submit"].button:not(.ghost):not(.danger)):hover {
    border-color: #4f35dc !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%) !important;
    box-shadow: 0 20px 42px rgba(101, 71, 255, .30) !important;
}

body.is-authenticated :where(.button.ghost, .button.secondary, .table-action, .icon-button, .landing-link-button) {
    border-color: rgba(202, 189, 255, .86) !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #17213f !important;
}

body.is-authenticated :where(.button.ghost, .button.secondary, .table-action, .icon-button):hover {
    border-color: #b8a8ff !important;
    background: #f3f0ff !important;
    color: #4f35dc !important;
}

body.is-authenticated :where(input, select, textarea) {
    border-color: #d8d1f7 !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #10162f !important;
}

body.is-authenticated :where(input, select, textarea)::placeholder {
    color: #9aa5bf !important;
}

body.is-authenticated :where(input, select, textarea):focus {
    border-color: #7c5cff !important;
    box-shadow: var(--erp-focus) !important;
}

body.is-authenticated :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: #6547ff !important;
}

body.is-authenticated :where(table thead, .company-table thead, .billing-pro-table thead) {
    background: linear-gradient(180deg, #f9f7ff, #f2f0ff) !important;
}

body.is-authenticated :where(table th, .company-table th, .billing-pro-table th) {
    color: #5d6783 !important;
    border-color: #e3ddfb !important;
}

body.is-authenticated :where(table td, .company-table td, .billing-pro-table td) {
    border-color: #ece8ff !important;
}

body.is-authenticated :where(table tbody tr:hover td, .company-table tbody tr:hover td, .billing-pro-table tbody tr:hover td) {
    background: #fbfaff !important;
}

body.is-authenticated :where(.status-pill, .role-pill, .badge, .billing-status, .status) {
    border-color: rgba(202, 189, 255, .78) !important;
}

body.is-authenticated :where(.status-pill.is-active, .status.active, .billing-status.is-paid, .badge-success) {
    background: #dcfce7 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

body.is-authenticated :where(.status-pill.is-warning, .billing-status.is-pending, .badge-warning) {
    background: #fef3c7 !important;
    color: #a16207 !important;
    border-color: #fde68a !important;
}

body.is-authenticated :where(.role-pill, .badge-primary, .billing-panel-tabs button.is-active) {
    background: #f0edff !important;
    color: #5b35f6 !important;
    border-color: #c7b8ff !important;
}

body.is-authenticated .billing-panel-tabs button.is-active,
body.is-authenticated .landing-tabs button.is-active,
body.is-authenticated .quick-panel-context .is-active,
body.is-authenticated .calendar-focus-toolbar .segmented-control a.active {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    border-color: #6547ff !important;
    color: #ffffff !important;
}

body.is-authenticated :where(.calendar-date-pill, .calendar-focus-toolbar .button, .calendar-focus-toolbar .icon-button, .calendar-filter-bar, .calendar-side-card, .pro-calendar, .quick-panel-card) {
    border-color: rgba(202, 189, 255, .72) !important;
    background-color: rgba(255, 255, 255, .92) !important;
}

body.is-authenticated .appointment-card,
body.is-authenticated .calendar-event-card,
body.is-authenticated .calendar-appointment,
body.is-authenticated .pro-calendar-event {
    border-color: rgba(124, 92, 255, .32) !important;
    background: linear-gradient(135deg, #f5f2ff, #eef6ff) !important;
    color: #182044 !important;
}

body.is-authenticated .calendar-now-line {
    border-top-color: #ef476f !important;
}

body.is-authenticated :where(.modal, .drawer, .legal-modal-panel, .popover-panel, .quick-appointment-panel) {
    background: rgba(12, 17, 39, .34) !important;
    backdrop-filter: blur(10px) !important;
}

body.is-authenticated :where(.popover-panel, .quick-panel-card, .legal-modal-panel, .drawer-panel, .modal-panel) {
    border-color: rgba(202, 189, 255, .82) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(124, 92, 255, .08), transparent 18rem),
        #ffffff !important;
    box-shadow: 0 28px 80px rgba(13, 18, 46, .22) !important;
}

body.is-authenticated .notice {
    border-color: #c7b8ff !important;
    background: linear-gradient(135deg, #f4f0ff, #eefdfa) !important;
    color: #4533c8 !important;
}

body.is-authenticated .alert {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

body.is-authenticated :where(.billing-finance-panel, .billing-summary-card) .billing-chart-ring,
body.is-authenticated :where(.finance-ring, .summary-ring, .donut-ring) {
    filter: drop-shadow(0 18px 26px rgba(101, 71, 255, .15)) !important;
}

body.is-authenticated .compact-table table,
body.is-authenticated .billing-pro-table,
body.is-authenticated .company-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.is-authenticated .embedded-app-shell {
    background:
        radial-gradient(circle at 5% 0%, rgba(20, 184, 166, .14), transparent 24rem),
        radial-gradient(circle at 95% 0%, rgba(124, 92, 255, .18), transparent 28rem),
        #f7f8ff !important;
}

@media (max-width: 980px) {
    body.is-authenticated .topbar {
        border-radius: 22px !important;
    }

    body.is-authenticated :where(.panel, .metric-card, .chart-card, .form-card, .table-wrap, .billing-pro-card, .billing-workspace-card, .billing-summary-card, .company-table-shell) {
        border-radius: 18px !important;
    }
}

/* 2026-06-23 - Final purple priority over legacy vertical jade rules. */
html body.is-authenticated[class*="vertical-"] .sidebar .nav a.active,
html body.is-authenticated[class*="vertical-"] .sidebar .nav a[aria-current="page"],
html body.is-authenticated[class*="vertical-"] .nav a.active,
html body.is-authenticated[class*="vertical-"] .nav-locked.active {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(79, 70, 229, .30) !important;
}

html body.is-authenticated[class*="vertical-"] .sidebar .nav a.active .nav-icon,
html body.is-authenticated[class*="vertical-"] .sidebar .nav a[aria-current="page"] .nav-icon,
html body.is-authenticated[class*="vertical-"] .nav a.active .nav-icon,
html body.is-authenticated[class*="vertical-"] .nav-locked.active .nav-icon {
    background: rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
}

html body.is-authenticated[class*="vertical-"] .button.primary,
html body.is-authenticated[class*="vertical-"] button[type="submit"].button,
html body.is-authenticated[class*="vertical-"] .table-action.primary,
html body.is-authenticated[class*="vertical-"] .owner-action-chip.primary,
html body.is-authenticated[class*="vertical-"] .platform-actions .button.primary,
html body.is-authenticated[class*="vertical-"] .platform-dashboard-hero .button.primary {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    border-color: #6547ff !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(101, 71, 255, .25) !important;
}

html body.is-authenticated[class*="vertical-"] .button.primary:hover,
html body.is-authenticated[class*="vertical-"] button[type="submit"].button:hover,
html body.is-authenticated[class*="vertical-"] .table-action.primary:hover,
html body.is-authenticated[class*="vertical-"] .owner-action-chip.primary:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%) !important;
    border-color: #4f35dc !important;
}

html body.is-authenticated[class*="vertical-"] .topbar .eyebrow,
html body.is-authenticated[class*="vertical-"] .eyebrow,
html body.is-authenticated[class*="vertical-"] :where(.platform-eyebrow, .admin-eyebrow, .panel-eyebrow, .owner-eyebrow, .billing-eyebrow) {
    color: #6547ff !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav a.active,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .sidebar .nav a[aria-current="page"] {
    border-color: rgba(255, 255, 255, .18) !important;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(79, 70, 229, .30) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .button.primary,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .table-action.primary {
    border-color: #6547ff !important;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(101, 71, 255, .25) !important;
}

body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .topbar .eyebrow,
body.is-authenticated:not(:has(.calendar-focus-shell)):not(:has(.register-builder-v3)):not(:has(.register-builder-v4)):not(:has(.owner-dashboard-pro)):not(:has(.billing-correction-shell)):not(:has(.employee-pro-shell)):not(:has(.rooms-demo-shell)):not(:has(.room-manage-shell)):not(:has(.service-catalog-panel)):not(:has(.platform-service-catalog)) .eyebrow {
    color: #6547ff !important;
}

/* 2026-06-24 - Sidebar logo clean lock: transparent logo, no box, no frame. */
body.is-authenticated .sidebar .brand,
body.is-authenticated .sidebar .brand:hover,
body.is-authenticated .sidebar .brand:focus,
body.is-authenticated .sidebar .brand:focus-visible,
body.is-authenticated .sidebar .brand > span,
body.is-authenticated .sidebar .brand-logo-full,
body.is-authenticated .sidebar .brand-logo-mark,
body.is-authenticated .sidebar .brand-logo-full:hover,
body.is-authenticated .sidebar .brand-logo-mark:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
    backdrop-filter: none !important;
}

body.is-authenticated .sidebar .brand {
    border-radius: 0 !important;
    overflow: visible !important;
}

body.is-authenticated .sidebar .brand-logo-full,
body.is-authenticated .sidebar .brand-logo-mark {
    border-radius: 0 !important;
    overflow: visible !important;
}

body.is-authenticated .sidebar .brand-logo-full img,
body.is-authenticated .sidebar .brand-logo-mark img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* 2026-06-24 - Final no-green SaaS lock and compact task calendar. */
body.is-authenticated {
    --erp-primary: #6846f6 !important;
    --erp-primary-hover: #5533dc !important;
    --erp-primary-active: #4726c7 !important;
    --erp-accent: #8b5cf6 !important;
    --erp-primary-soft: #f0edff !important;
    --erp-secondary: #f5f3ff !important;
    --erp-sidebar-active: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    --vertical-accent: #6846f6 !important;
    --vertical-soft: #f0edff !important;
    --clinc-jade: #6846f6 !important;
    --clinc-jade-hover: #5533dc !important;
    --clinc-jade-soft: #f0edff !important;
    --clinc-product-jade: #6846f6 !important;
    --clinc-product-jade-soft: #f0edff !important;
    --clinc-premium-jade: #6846f6 !important;
    --clinc-premium-jade-2: #8b5cf6 !important;
}

body.is-authenticated :where(
    .button.primary,
    button[type="submit"].button,
    .table-action.primary,
    .owner-action-chip.primary,
    .platform-actions .button.primary,
    .task-calendar-actions .button.primary,
    .calendar-focus-toolbar .segmented-control a.active,
    .segmented-control a.active,
    .billing-panel-tabs button.is-active,
    .landing-tabs button.is-active,
    .quick-panel-context .is-active,
    .platform-tabs a.active,
    .platform-tabs button.is-active,
    .task-board-tabs a.active,
    .admin-tabs a.active,
    .admin-tabs button.is-active,
    .room-drawer-tabs button.is-active,
    .employee-pro-tabs button.is-active,
    .employee-pro-drawer-tabs button.is-active,
    .employee-studio-tabs button.is-active
) {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    border-color: #6846f6 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(101, 71, 255, .22) !important;
}

body.is-authenticated :where(
    .button.primary:hover,
    button[type="submit"].button:hover,
    .table-action.primary:hover,
    .owner-action-chip.primary:hover,
    .platform-actions .button.primary:hover,
    .task-calendar-actions .button.primary:hover
) {
    background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%) !important;
    border-color: #5533dc !important;
}

body.is-authenticated :where(
    .status-pill.is-active,
    .status-pill.is-success,
    .status.active,
    .status-chip.is-active,
    .billing-status.is-paid,
    .badge-success,
    .employee-status-pill,
    .service-status-pill,
    .company-user-active-check,
    .company-users-admin .company-user-row-summary .status-pill,
    .company-users-admin > .status-pill,
    .company-users-admin .panel-heading > .status-pill
) {
    background: #f0edff !important;
    border-color: #c7b8ff !important;
    color: #4f35dc !important;
}

body.is-authenticated :where(
    .owner-kpi-card.green .kpi-icon,
    .summary-dot.green,
    .billing-kpi-card.green .billing-kpi-icon,
    .billing-quick-card a > span.green,
    .employee-role-orb.tone-green
) {
    background: #f0edff !important;
    color: #4f35dc !important;
}

body.is-authenticated :where(
    input:focus,
    select:focus,
    textarea:focus,
    .task-calendar-create textarea:focus
) {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .14) !important;
}

body.is-authenticated :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: #6846f6 !important;
}

body.is-authenticated .embedded-app-shell {
    background:
        radial-gradient(circle at 3% 0%, rgba(124, 92, 255, .13), transparent 24rem),
        radial-gradient(circle at 95% 0%, rgba(59, 130, 246, .12), transparent 28rem),
        #f7f8ff !important;
}

body.is-authenticated .task-calendar-shell {
    display: grid !important;
    gap: 14px !important;
}

body.is-authenticated .task-calendar-toolbar {
    min-height: 0 !important;
    padding: 22px 24px !important;
    align-items: center !important;
    border-color: rgba(199, 184, 255, .74) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(124, 92, 255, .08), transparent 18rem),
        rgba(255, 255, 255, .94) !important;
}

body.is-authenticated .task-calendar-toolbar h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(2rem, 2.4vw, 2.7rem) !important;
    line-height: .98 !important;
}

body.is-authenticated .task-calendar-actions {
    gap: 8px !important;
}

body.is-authenticated .task-calendar-actions .button,
body.is-authenticated .task-calendar-actions .icon-button,
body.is-authenticated .task-calendar-actions .segmented-control a {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    border-color: #d9d1ff !important;
    background: rgba(255, 255, 255, .9) !important;
    color: #151a34 !important;
    box-shadow: none !important;
}

body.is-authenticated .task-calendar-actions .segmented-control a.active {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    border-color: #6846f6 !important;
    color: #ffffff !important;
}

body.is-authenticated .task-calendar-month {
    min-height: 0 !important;
    gap: 0 !important;
    padding: 18px !important;
    border-color: rgba(199, 184, 255, .72) !important;
    background: rgba(255, 255, 255, .94) !important;
}

body.is-authenticated .task-calendar-month article {
    min-height: 104px !important;
    padding: 14px 14px 12px !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    border-color: #ede9ff !important;
}

body.is-authenticated .task-calendar-month article:hover {
    background: #fbfaff !important;
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .18) !important;
}

body.is-authenticated .task-calendar-month article.is-today,
body.is-authenticated .task-calendar-time article.is-today header,
body.is-authenticated .calendar-column.is-today,
body.is-authenticated .pro-calendar-column.is-today .pro-calendar-column-head {
    background: linear-gradient(135deg, #f2eeff 0%, #eef4ff 100%) !important;
    border-color: #c7b8ff !important;
    color: #34238f !important;
}

body.is-authenticated .task-calendar-month article.is-muted {
    background: #f7f8fc !important;
    color: #9aa3b8 !important;
}

body.is-authenticated .task-calendar-month header,
body.is-authenticated .task-calendar-time article header {
    min-height: 30px !important;
    margin-bottom: 6px !important;
}

body.is-authenticated .task-calendar-month header span,
body.is-authenticated .task-calendar-time article header span {
    color: #65708d !important;
    font-size: .78rem !important;
}

body.is-authenticated .task-calendar-month header strong,
body.is-authenticated .task-calendar-time article header strong {
    font-size: 1rem !important;
    color: #10172f !important;
}

body.is-authenticated .task-calendar-month article > div {
    min-height: 34px !important;
}

body.is-authenticated .task-calendar-month .muted {
    color: #6a7390 !important;
    font-size: .82rem !important;
}

body.is-authenticated .task-calendar-month .task-calendar-item,
body.is-authenticated .task-all-day-stack .task-calendar-item,
body.is-authenticated .task-calendar-item {
    border-left-color: #6846f6 !important;
    background: linear-gradient(135deg, #f5f2ff, #eef4ff) !important;
    border-color: #c7b8ff !important;
    color: #151a34 !important;
    box-shadow: 0 12px 28px rgba(101, 71, 255, .10) !important;
}

body.is-authenticated .task-calendar-item.is-high {
    border-left-color: #ef476f !important;
}

body.is-authenticated .task-calendar-item.is-low {
    border-left-color: #3b82f6 !important;
}

body.is-authenticated .task-more-badge {
    background: #ede9fe !important;
    color: #4f46e5 !important;
}

body.is-authenticated .task-calendar-time {
    min-height: 0 !important;
    border-color: rgba(199, 184, 255, .72) !important;
}

body.is-authenticated .task-calendar-time aside strong,
body.is-authenticated .task-day-lane > div {
    min-height: 46px !important;
}

@media (max-width: 1180px) {
    body.is-authenticated .task-calendar-toolbar {
        align-items: flex-start !important;
    }

    body.is-authenticated .task-calendar-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    body.is-authenticated .task-calendar-month {
        grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
        overflow-x: auto !important;
    }
}

body.is-authenticated,
body.is-authenticated .app-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(124, 92, 255, .11), transparent 24rem),
        radial-gradient(circle at 96% 0%, rgba(79, 70, 229, .10), transparent 28rem),
        #f7f8ff !important;
}

body.is-authenticated .task-calendar-item .task-more-badge,
body.is-authenticated .task-calendar-month .task-calendar-item .task-more-badge,
body.is-authenticated .task-all-day-stack .task-calendar-item .task-more-badge {
    background: #ede9fe !important;
    border: 1px solid #c7b8ff !important;
    color: #4f46e5 !important;
}

body.is-authenticated .task-calendar-month article.has-tasks,
body.is-authenticated .task-calendar-time article.has-tasks header {
    background: linear-gradient(135deg, #fbfaff, #f4f6ff) !important;
    border-color: #d9d1ff !important;
}

/* 2026-06-24 - Impersonated company sidebar locked modules readability. */
body.is-authenticated .sidebar .nav-locked {
    position: relative !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(199, 184, 255, .16) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .055) !important;
    color: #c9d2e8 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

body.is-authenticated .sidebar .nav-locked:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(199, 184, 255, .26) !important;
    color: #eef2ff !important;
}

body.is-authenticated .sidebar .nav-locked .nav-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #d8def0 !important;
}

body.is-authenticated .sidebar .nav-locked .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

body.is-authenticated .sidebar .nav-locked .nav-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    color: #d7def1 !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.is-authenticated .sidebar .nav-locked .nav-lock-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin-left: auto !important;
    border-radius: 999px !important;
    border: 1px solid rgba(199, 184, 255, .48) !important;
    background: rgba(237, 233, 254, .14) !important;
    color: #c7b8ff !important;
}

body.is-authenticated .sidebar .nav-locked .nav-lock-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
}

body.is-authenticated .sidebar .nav-locked.active,
body.is-authenticated .sidebar .nav-locked[aria-current="page"] {
    background: rgba(124, 58, 237, .18) !important;
    border-color: rgba(199, 184, 255, .36) !important;
    color: #ffffff !important;
}

body.sidebar-collapsed.is-authenticated .sidebar .nav-locked {
    width: 48px !important;
    min-height: 48px !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 16px !important;
}

body.sidebar-collapsed.is-authenticated .sidebar .nav-locked .nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
}

body.sidebar-collapsed.is-authenticated .sidebar .nav-locked .nav-text,
body.sidebar-collapsed.is-authenticated .sidebar .nav-locked .nav-lock-icon {
    display: none !important;
}

/* 2026-06-24 - Dedicated SaaS company users console. */
body.is-authenticated .company-users-legacy-inline {
    display: none !important;
}

body.is-authenticated .company-users-entry-card,
body.is-authenticated .company-users-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    border-color: rgba(199, 184, 255, .72) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(124, 92, 255, .08), transparent 18rem),
        rgba(255, 255, 255, .94) !important;
}

body.is-authenticated .company-users-entry-card h2,
body.is-authenticated .company-users-hero h2 {
    margin: 4px 0 6px !important;
    color: #11172f !important;
}

body.is-authenticated .company-users-entry-meta,
body.is-authenticated .company-users-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body.is-authenticated .company-users-console {
    display: grid !important;
    gap: 16px !important;
}

body.is-authenticated .company-users-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.is-authenticated .company-users-kpis article {
    min-height: 118px !important;
    display: grid !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 22px !important;
    border: 1px solid rgba(199, 184, 255, .72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 18px 42px rgba(18, 24, 54, .08) !important;
}

body.is-authenticated .company-users-kpis span,
body.is-authenticated .company-user-create-card label,
body.is-authenticated .company-user-management-grid label {
    color: #62708d !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

body.is-authenticated .company-users-kpis strong {
    color: #10172f !important;
    font-size: clamp(1.7rem, 2vw, 2.35rem) !important;
    line-height: 1 !important;
}

body.is-authenticated .company-users-kpis small {
    color: #65708d !important;
    font-weight: 760 !important;
}

body.is-authenticated .company-users-workspace {
    display: grid !important;
    grid-template-columns: minmax(330px, .85fr) minmax(0, 1.65fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

body.is-authenticated .company-user-create-card,
body.is-authenticated .company-users-list-card {
    border-color: rgba(199, 184, 255, .72) !important;
    background: rgba(255, 255, 255, .94) !important;
}

body.is-authenticated .company-user-console-form,
body.is-authenticated .company-user-management-grid form {
    display: grid !important;
    gap: 12px !important;
}

body.is-authenticated .company-user-console-form label,
body.is-authenticated .company-user-management-grid label {
    display: grid !important;
    gap: 7px !important;
}

body.is-authenticated .company-user-console-form input,
body.is-authenticated .company-user-console-form select,
body.is-authenticated .company-user-management-grid input,
body.is-authenticated .company-user-management-grid select {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid #d9d1ff !important;
    background: #ffffff !important;
    color: #12172f !important;
    padding: 0 14px !important;
    font-weight: 760 !important;
}

body.is-authenticated .company-user-toggle {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 14px !important;
    border: 1px solid #e4defd !important;
    border-radius: 14px !important;
    background: #fbfaff !important;
    color: #29304a !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.is-authenticated .company-user-toggle input {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    accent-color: #6846f6 !important;
}

body.is-authenticated .company-user-toggle span {
    font-size: .88rem !important;
    font-weight: 820 !important;
    color: #29304a !important;
}

body.is-authenticated .company-user-form-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body.is-authenticated .company-users-directory {
    display: grid !important;
    gap: 12px !important;
}

body.is-authenticated .company-user-support-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    border: 1px solid #e4defd !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #ffffff, #fbfaff) !important;
}

body.is-authenticated .company-user-profile {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.is-authenticated .company-user-avatar {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ede9fe, #e0f2fe) !important;
    color: #4f35dc !important;
    font-weight: 950 !important;
}

body.is-authenticated .company-user-profile strong {
    display: block !important;
    color: #11172f !important;
    font-size: .98rem !important;
}

body.is-authenticated .company-user-profile small,
body.is-authenticated .company-user-meta small {
    display: block !important;
    color: #65708d !important;
    font-weight: 700 !important;
}

body.is-authenticated .company-user-meta {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.is-authenticated .company-user-meta small {
    width: 100% !important;
}

body.is-authenticated .company-users-console .status-pill:not(.danger),
body.is-authenticated .company-users-console .role-pill {
    background: #f0edff !important;
    border-color: #c7b8ff !important;
    color: #4f35dc !important;
}

body.is-authenticated .company-users-console .status-pill.danger {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

body.is-authenticated .company-user-manage {
    justify-self: end !important;
}

body.is-authenticated .company-user-manage summary {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 1px solid #d9d1ff !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #4f35dc !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    list-style: none !important;
}

body.is-authenticated .company-user-manage summary::-webkit-details-marker {
    display: none !important;
}

body.is-authenticated .company-user-manage[open] {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
}

body.is-authenticated .company-user-management-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.2fr) minmax(240px, .8fr) minmax(220px, .7fr) !important;
    gap: 14px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #ede9ff !important;
}

body.is-authenticated .company-user-management-grid form {
    padding: 16px !important;
    border: 1px solid #e4defd !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body.is-authenticated .company-user-management-grid h3 {
    margin: 0 !important;
    color: #11172f !important;
    font-size: 1rem !important;
}

@media (max-width: 1180px) {
    body.is-authenticated .company-users-kpis,
    body.is-authenticated .company-users-workspace,
    body.is-authenticated .company-user-support-row,
    body.is-authenticated .company-user-management-grid {
        grid-template-columns: 1fr !important;
    }

    body.is-authenticated .company-users-entry-card,
    body.is-authenticated .company-users-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body.is-authenticated .company-users-actions,
    body.is-authenticated .company-users-entry-meta {
        justify-content: flex-start !important;
    }

    body.is-authenticated .company-user-manage {
        justify-self: stretch !important;
    }

body.is-authenticated .company-user-manage summary {
        width: 100% !important;
    }
}

/* 2026-06-25 - SaaS admin calendar redesign: Apple/Google inspired. */
body.is-authenticated .task-calendar-pro {
    --calendar-purple: #6547ff;
    --calendar-purple-2: #7c3aed;
    --calendar-ink: #11172f;
    --calendar-muted: #66708d;
    --calendar-line: #e7eaf5;
    --calendar-glass: rgba(255, 255, 255, .82);
    gap: 18px !important;
}

body.is-authenticated .task-calendar-hero {
    min-height: 150px !important;
    padding: 26px 28px !important;
    border: 1px solid rgba(209, 213, 255, .78) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(124, 58, 237, .16), transparent 18rem),
        radial-gradient(circle at 92% 10%, rgba(59, 130, 246, .12), transparent 16rem),
        rgba(255, 255, 255, .82) !important;
    box-shadow: 0 24px 60px rgba(59, 49, 130, .09) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
}

body.is-authenticated .task-calendar-hero h2 {
    font-size: clamp(2.25rem, 4vw, 3.4rem) !important;
    letter-spacing: 0 !important;
}

body.is-authenticated .task-calendar-hero p:not(.eyebrow) {
    max-width: 620px !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
}

body.is-authenticated .task-calendar-controls {
    padding: 8px !important;
    border: 1px solid rgba(216, 209, 255, .86) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 18px 36px rgba(76, 29, 149, .08) !important;
}

body.is-authenticated .task-calendar-controls .button,
body.is-authenticated .task-calendar-controls .icon-button,
body.is-authenticated .task-calendar-segments a {
    min-height: 42px !important;
    border-radius: 16px !important;
}

body.is-authenticated .task-calendar-controls .primary,
body.is-authenticated .task-calendar-segments a.active {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(99, 71, 255, .24) !important;
}

body.is-authenticated .task-calendar-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.is-authenticated .task-calendar-kpis article {
    min-height: 96px !important;
    padding: 18px 78px 18px 20px !important;
    border: 1px solid rgba(220, 224, 241, .94) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(14px) !important;
}

body.is-authenticated .task-calendar-kpis article::before {
    right: 18px !important;
    top: 18px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #efeaff, #f8f7ff) !important;
}

body.is-authenticated .task-calendar-kpis article::after {
    right: 36px !important;
    top: 36px !important;
}

body.is-authenticated .task-calendar-kpis strong {
    font-size: 2rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-mes .task-calendar-workspace {
    grid-template-columns: 1fr !important;
}

body.is-authenticated .task-calendar-workspace {
    gap: 14px !important;
}

body.is-authenticated .task-calendar-board {
    padding: 16px !important;
    border: 1px solid rgba(218, 222, 238, .96) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .74) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .07) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
}

body.is-authenticated .task-calendar-weekdays {
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 12px 10px !important;
}

body.is-authenticated .task-calendar-weekdays span {
    padding: 0 !important;
    color: #6f7893 !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    text-align: center !important;
    letter-spacing: .02em !important;
}

body.is-authenticated .task-calendar-month-grid {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--calendar-line) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
}

body.is-authenticated .task-calendar-day-card {
    min-height: 118px !important;
    padding: 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--calendar-line) !important;
    border-bottom: 1px solid var(--calendar-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: background .16s ease, box-shadow .16s ease !important;
}

body.is-authenticated .task-calendar-day-card:nth-child(7n) {
    border-right: 0 !important;
}

body.is-authenticated .task-calendar-day-card:nth-last-child(-n + 7) {
    border-bottom: 0 !important;
}

body.is-authenticated .task-calendar-day-card:hover {
    transform: none !important;
    background: #fbfaff !important;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .18) !important;
}

body.is-authenticated .task-calendar-day-card.is-muted {
    opacity: 1 !important;
    background: #f8f9fd !important;
}

body.is-authenticated .task-calendar-day-card.is-today {
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .12), transparent 7rem),
        #ffffff !important;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .38) !important;
}

body.is-authenticated .task-calendar-day-card header {
    margin-bottom: 8px !important;
}

body.is-authenticated .task-calendar-day-card header a {
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
}

body.is-authenticated .task-calendar-day-card header small {
    display: none !important;
}

body.is-authenticated .task-calendar-day-card header strong {
    color: #151b31 !important;
    font-size: 1.05rem !important;
}

body.is-authenticated .task-calendar-day-card header button,
body.is-authenticated .task-week-column header button {
    width: 26px !important;
    height: 26px !important;
    border: 1px solid #ddd6fe !important;
    border-radius: 999px !important;
    background: #f6f2ff !important;
    color: var(--calendar-purple) !important;
    box-shadow: none !important;
    opacity: .42 !important;
    transition: opacity .16s ease, transform .16s ease, background .16s ease !important;
}

body.is-authenticated .task-calendar-day-card:hover header button,
body.is-authenticated .task-week-column:hover header button,
body.is-authenticated .task-calendar-day-card.is-today header button {
    opacity: 1 !important;
}

body.is-authenticated .task-calendar-day-card header button:hover,
body.is-authenticated .task-week-column header button:hover {
    transform: scale(1.05) !important;
    background: #ede9fe !important;
}

body.is-authenticated .task-calendar-day-list {
    gap: 6px !important;
}

body.is-authenticated .task-chip {
    min-height: 34px !important;
    display: block !important;
    padding: 7px 30px 7px 9px !important;
    border: 0 !important;
    border-left: 4px solid var(--calendar-purple) !important;
    border-radius: 10px !important;
    background: #f1edff !important;
    box-shadow: none !important;
}

body.is-authenticated .task-chip a {
    min-width: 0 !important;
    display: block !important;
}

body.is-authenticated .task-chip.is-high {
    border-left-color: #ef476f !important;
    background: #fff1f5 !important;
}

body.is-authenticated .task-chip.is-low {
    border-left-color: #3b82f6 !important;
    background: #eff6ff !important;
}

body.is-authenticated .task-chip strong {
    width: 100% !important;
    max-width: 100% !important;
    color: #151b31 !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
}

body.is-authenticated .task-chip small {
    width: 100% !important;
    max-width: 100% !important;
    color: #626d86 !important;
    font-size: .66rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-mes .task-chip small {
    display: none !important;
}

body.is-authenticated .task-chip:has(form) strong,
body.is-authenticated .task-chip:has(form) small {
    width: 100% !important;
    max-width: 100% !important;
}

body.is-authenticated .task-chip form {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
}

body.is-authenticated .task-chip form button {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #4f46e5 !important;
    font-size: 0 !important;
}

body.is-authenticated .task-chip form button::before {
    content: "✓" !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
}

body.is-authenticated .task-empty-add {
    display: none !important;
}

body.is-authenticated .task-more-link {
    padding: 0 4px !important;
    color: var(--calendar-purple) !important;
    font-size: .74rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-mes .task-calendar-side {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.4fr) minmax(260px, .8fr) !important;
    gap: 14px !important;
}

body.is-authenticated .task-side-card {
    border-radius: 26px !important;
    border-color: rgba(218, 222, 238, .96) !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .06) !important;
}

body.is-authenticated .task-side-date {
    border-radius: 24px !important;
    background: linear-gradient(135deg, #ede9fe, #f8f7ff) !important;
}

body.is-authenticated .task-week-grid {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--calendar-line) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
}

body.is-authenticated .task-week-column {
    border: 0 !important;
    border-right: 1px solid var(--calendar-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.is-authenticated .task-week-column:last-child {
    border-right: 0 !important;
}

body.is-authenticated .task-focus-card {
    border-radius: 18px !important;
    background: rgba(246, 243, 255, .9) !important;
    box-shadow: none !important;
}

@media (max-width: 1280px) {
    body.is-authenticated .task-calendar-hero {
        grid-template-columns: 1fr !important;
    }

    body.is-authenticated .task-calendar-controls {
        justify-content: flex-start !important;
    }

    body.is-authenticated .task-calendar-pro.is-mode-mes .task-calendar-side {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 980px) {
    body.is-authenticated .task-calendar-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.is-authenticated .task-calendar-month-grid,
    body.is-authenticated .task-calendar-weekdays {
        min-width: 840px !important;
    }

    body.is-authenticated .task-calendar-board {
        overflow-x: auto !important;
    }
}

/* 2026-06-25 - SaaS admin weekly laptop fit: weekly is the primary no-page-scroll view. */
body.is-authenticated .main:has(.task-calendar-pro.is-mode-semana) {
    height: 100svh !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
}

body.is-authenticated .main:has(.task-calendar-pro.is-mode-semana) > .topbar {
    display: none !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana {
    height: calc(100svh - 20px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-hero {
    min-height: 76px !important;
    grid-template-columns: minmax(230px, 1fr) auto !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-hero .eyebrow {
    margin-bottom: 3px !important;
    font-size: 9px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-hero h2 {
    margin: 0 !important;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem) !important;
    line-height: 1.02 !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-hero p:not(.eyebrow) {
    max-width: 580px !important;
    margin-top: 4px !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-controls {
    padding: 5px !important;
    gap: 5px !important;
    border-radius: 18px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-nav,
body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-segments {
    gap: 4px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-controls .button,
body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-controls .icon-button,
body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-segments a {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: .78rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis {
    gap: 8px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis article {
    min-height: 58px !important;
    padding: 10px 48px 9px 12px !important;
    border-radius: 18px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis article::before {
    right: 12px !important;
    top: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis article::after {
    right: 25px !important;
    top: 25px !important;
    width: 7px !important;
    height: 7px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis span {
    font-size: .68rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis strong {
    margin-top: 1px !important;
    font-size: 1.25rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis small {
    display: none !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-workspace {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-board {
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-week-grid {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--calendar-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 9px !important;
    border: 0 !important;
    border-right: 1px solid var(--calendar-line) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column:last-child {
    border-right: 0 !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column.is-today {
    background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%) !important;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .24) !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column header {
    min-height: 48px !important;
    margin: 0 0 8px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column header a {
    display: grid !important;
    gap: 2px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column header small {
    color: #7b849b !important;
    font-size: .68rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column header strong {
    font-size: 1.22rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-column header span {
    margin-left: 0 !important;
    font-size: .68rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-week-stack {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-right: 2px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-focus-card {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 9px !important;
    border-radius: 14px !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-focus-card strong {
    font-size: .82rem !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-focus-card p {
    display: none !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-focus-card form {
    justify-self: start !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-empty-state {
    display: none !important;
}

body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-side {
    display: none !important;
}

@media (max-height: 760px) {
    body.is-authenticated .task-calendar-pro.is-mode-semana {
        gap: 8px !important;
    }

    body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-hero {
        min-height: 64px !important;
        padding: 10px 12px !important;
    }

    body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-hero p:not(.eyebrow) {
        display: none !important;
    }

    body.is-authenticated .task-calendar-pro.is-mode-semana .task-calendar-kpis article {
        min-height: 50px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}