:root {
    --fx-primary: #6C3CF0;
    --fx-primary-dark: #4C1D95;
    --fx-sidebar: #080B1F;
    --fx-background: #F7F7FB;
    --fx-card: #FFFFFF;
    --fx-text: #171525;
    --fx-text-secondary: #59586B;
    --fx-text-muted: #77768A;
    --fx-border: #E2E1EA;
    --fx-border-strong: #D4D2DF;
    --fx-success: #16A36A;
    --fx-warning: #E68A00;
    --fx-danger: #DC4545;
    --fx-info: #3478F6;
    --frexima-purple: var(--fx-primary);
    --frexima-purple-dark: var(--fx-primary-dark);
    --frexima-sidebar: var(--fx-sidebar);
    --frexima-bg: var(--fx-background);
    --frexima-card: var(--fx-card);
    --frexima-border: var(--fx-border);
    --frexima-text: var(--fx-text);
    --frexima-muted: var(--fx-text-muted);
    --frexima-green: var(--fx-success);
    --frexima-orange: var(--fx-warning);
    --frexima-red: var(--fx-danger);
    --frexima-blue: var(--fx-info);
    --frexima-pink: #EC4899;
    --primary: var(--frexima-purple);
    --primary-dark: var(--frexima-purple-dark);
    --primary-light: #F1ECFF;
    --primary-soft: #F8F5FF;
    --accent-blue: #2563EB;
    --accent-teal: #0F766E;
    --accent-amber: #B45309;
    --text-dark: var(--frexima-text);
    --text-muted: var(--frexima-muted);
    --border: var(--frexima-border);
    --success: var(--frexima-green);
    --warning: var(--frexima-orange);
    --danger: var(--frexima-red);
    --surface: var(--frexima-card);
    --surface-muted: #F9FAFB;
    --body-bg: var(--frexima-bg);
    --sidebar-width: 260px;
    --content-padding: 32px;
    --card-radius: 16px;
    --radius: var(--card-radius);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 16px 42px rgba(15, 23, 42, 0.08);
    --bs-primary: var(--primary);
    --bs-success: var(--success);
    --bs-warning: var(--warning);
    --bs-danger: var(--danger);
    --bs-body-color: var(--text-dark);
    --bs-body-bg: var(--body-bg);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
}

/* SP09: author-only private Story Archive. */
.story-archive-page { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 5rem; }
.story-archive-hero, .story-archive-controls, .story-archive-detail, .story-archive-state { border: 1px solid rgba(44, 35, 72, .12); border-radius: 1.15rem; background: #fff; box-shadow: 0 .5rem 1.5rem rgba(44, 35, 72, .06); }
.story-archive-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 3vw, 2rem); background: linear-gradient(135deg, #faf8ff, #f1ecff); }
.story-archive-hero h1 { margin: .25rem 0 .45rem; color: #2c2348; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.story-archive-hero p { max-width: 720px; margin: 0; color: #5f5675; }
.story-archive-controls { margin-top: 1rem; padding: 1rem; }
.story-archive-controls-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.story-archive-controls h2 { margin: 0; font-size: 1.1rem; }
.story-archive-controls p { margin: .2rem 0 0; color: var(--bs-secondary-color); font-size: .9rem; }
.story-archive-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.story-archive-filter-grid label { display: grid; gap: .35rem; color: #4d3c75; font-size: .8rem; font-weight: 650; }
.story-archive-filter-grid input, .story-archive-filter-grid select { min-width: 0; min-height: 44px; border: 1px solid #d9d5e5; border-radius: .65rem; padding: .45rem .55rem; background: #fff; color: #2c2348; }
.story-archive-filter-actions { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.story-archive-filter-actions .btn { white-space: nowrap; }
.story-archive-loading { margin: .75rem 0 0; color: var(--bs-secondary-color); font-size: .9rem; }
.story-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.story-archive-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(44, 35, 72, .12); border-radius: 1rem; background: #fff; box-shadow: 0 .4rem 1.1rem rgba(44, 35, 72, .05); }
.story-archive-card-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #f2eff9; color: #7459ae; text-decoration: none; }
.story-archive-card-media img, .story-archive-card-media video { width: 100%; height: 100%; object-fit: cover; }
.story-archive-card-media:focus-visible { outline: 3px solid #6c3cf0; outline-offset: -3px; }
.story-archive-video-icon { position: absolute; display: grid; place-items: center; width: 46px; aspect-ratio: 1; border-radius: 50%; background: rgba(28, 18, 43, .78); color: #fff; font-size: 1.3rem; }
.story-archive-text-icon { font-size: 2.5rem; }
.story-archive-card-body { display: grid; align-content: start; gap: .75rem; padding: 1rem; }
.story-archive-card-body p { min-height: 2.7em; margin: 0; color: #4d3c75; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.story-archive-card-meta, .story-archive-detail-heading, .story-archive-detail-actions, .story-archive-pagination { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.story-archive-card-meta time { color: var(--bs-secondary-color); font-size: .78rem; }
.story-archive-status { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: .25rem .55rem; font-size: .72rem; font-weight: 700; }
.story-archive-status.available { background: #e8f7ef; color: #16653d; }
.story-archive-detail { display: grid; gap: 1rem; margin-top: 1rem; padding: 1rem; }
.story-archive-detail-heading h2 { margin: .4rem 0 .2rem; font-size: 1.25rem; }
.story-archive-detail-heading p { margin: 0; color: var(--bs-secondary-color); font-size: .88rem; }
.story-archive-detail-item { overflow: hidden; border-radius: .9rem; background: #f6f3fc; }
.story-archive-detail-item img, .story-archive-detail-item video { display: block; width: 100%; max-height: min(70vh, 680px); object-fit: contain; background: #171025; }
.story-archive-detail-item p { margin: 0; padding: 1rem; white-space: pre-wrap; color: #2c2348; }
.story-archive-detail-actions { flex-wrap: wrap; justify-content: flex-start; border-top: 1px solid #eeeaf5; padding-top: 1rem; }
.story-archive-detail-actions form { margin: 0; }
.story-archive-state { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1rem; padding: 2rem; }
.story-archive-state > i { font-size: 2rem; color: #8067ba; }
.story-archive-state h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.story-archive-state p { margin: 0; color: var(--bs-secondary-color); }
.story-archive-state.error { border-color: #f0b6b6; background: #fff7f7; }
.story-archive-state.error > i { color: #c43e3e; }
.story-archive-pagination { justify-content: center; margin-top: 1.5rem; color: var(--bs-secondary-color); }
.story-archive-pagination a { color: #6c3cf0; text-decoration: none; font-weight: 650; }
@media (max-width: 991.98px) { .story-archive-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .story-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .story-archive-page { padding: .75rem .75rem 5.5rem; } .story-archive-hero { align-items: stretch; flex-direction: column; } .story-archive-hero .btn { width: 100%; } .story-archive-filter-grid, .story-archive-grid { grid-template-columns: 1fr; } .story-archive-filter-actions .btn { flex: 1; } .story-archive-detail-heading { align-items: flex-start; flex-direction: column; } .story-archive-detail-heading .btn { width: 100%; } .story-archive-detail-actions { align-items: stretch; flex-direction: column; } .story-archive-detail-actions .btn, .story-archive-detail-actions form, .story-archive-detail-actions form .btn { width: 100%; } }

/* Community stories / My day */
.cw-story-rail {
    margin: 1rem 0 1.35rem;
    padding: 1rem;
    border: 1px solid #e4defb;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #fbfaff, #f4efff);
    overflow: hidden;
}
.cw-story-rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.cw-story-rail-heading h2 { margin: 0; color: #24113f; font-size: 1.25rem; }
.cw-story-privacy-note { color: #665782; font-size: .78rem; white-space: nowrap; }
.cw-story-scroller { display: flex; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain; padding: .2rem .1rem .45rem; scrollbar-width: thin; }
.cw-story-card { flex: 0 0 82px; min-width: 82px; min-height: 122px; padding: .25rem; border: 0; background: transparent; color: #24113f; text-align: center; cursor: pointer; }
.cw-story-card:focus-visible, .cw-story-card:hover { outline: 3px solid #b9a1ff; outline-offset: 3px; border-radius: .9rem; }
.cw-story-card strong, .cw-story-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-story-card strong { margin-top: .35rem; font-size: .76rem; }
.cw-story-card small { color: #736781; font-size: .68rem; }
.cw-story-avatar { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto; border: 3px solid #d7c8ff; border-radius: 50%; background: #6f42c1; color: #fff; font-weight: 700; overflow: visible; }
.cw-story-avatar.is-live { border-color: #8d63ff; box-shadow: 0 0 0 3px #efe8ff; }
.cw-story-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cw-story-avatar b { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background: #6f42c1; color: #fff; font-size: 1rem; }
.cw-story-add-button, .cw-story-share-link { border: 1px solid #d8cbf7; border-radius: .8rem; background: #fff; color: #5b20f0; padding: .55rem .75rem; font-weight: 700; }
.cw-story-share-link { margin-left: .35rem; padding: .3rem .55rem; font-size: .72rem; }
.cw-story-add-button:hover, .cw-story-add-button:focus-visible, .cw-story-share-link:hover, .cw-story-share-link:focus-visible { background: #f3efff; }
.cw-story-empty { align-self: center; margin: 0; color: #6c6480; font-size: .82rem; }
.cw-story-composer { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; padding: .7rem; border: 1px solid #e4defb; border-radius: 1rem; background: #fff; }
.cw-story-composer-avatar { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #6f42c1; color: #fff; font-weight: 700; }
.cw-story-composer > button:first-of-type { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: #f5f2fb; color: #6c6480; padding: .6rem 1rem; text-align: left; }
.cw-story-composer-plus { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #6f42c1; color: #fff; }
.cw-story-modal .modal-title { margin: 0; color: #24113f; }
.cw-story-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cw-story-create-grid label { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; color: #35254d; }
.cw-story-create-grid .span-2 { grid-column: 1 / -1; }
.cw-story-sticker-fields { display: grid; gap: .75rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid #e4defb; border-radius: .8rem; }
.cw-story-sticker-fields legend { float: none; width: auto; margin: 0; padding: 0 .25rem; color: #24113f; font-size: 1rem; font-weight: 800; }
.cw-story-sticker-fields [data-story-poll-fields] { display: grid; gap: .65rem; }
.cw-story-consent { flex-direction: row !important; align-items: flex-start; font-size: .84rem; font-weight: 500 !important; }
.cw-story-consent input { margin-top: .2rem; accent-color: #6f42c1; }
.cw-story-source-preview { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; padding: .75rem; border: 1px solid #e4defb; border-radius: .8rem; background: #faf8ff; }
.cw-story-source-preview > i { color: #6f42c1; font-size: 1.3rem; }
.cw-story-source-preview span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cw-story-source-preview small { color: #6c6480; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-story-viewer { position: relative; min-height: min(720px, 86vh); overflow: hidden; border: 0; border-radius: 1.3rem; background: #120c20; color: #fff; }
.cw-story-viewer-content { display: grid; place-items: center; min-height: min(720px, 86vh); padding: 3.8rem 3.2rem 7rem; }
.cw-story-viewer-content img, .cw-story-viewer-content video { display: block; max-width: min(76vw, 520px); max-height: min(66vh, 600px); border-radius: .85rem; object-fit: contain; }
.cw-story-viewer-content video { background: #000; }
.cw-story-render { width: min(100%, 520px); text-align: center; }
.cw-story-render-text { display: grid; place-items: center; min-height: 280px; padding: 2rem; border-radius: 1rem; background: linear-gradient(145deg, #6f42c1, #bd8cff); font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-story-render-meta { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; text-align: left; }
.cw-story-render-meta strong { font-size: 1rem; }
.cw-story-render-meta small { color: #d8cfee; }
.cw-story-progress { position: absolute; z-index: 3; top: .8rem; left: 1rem; right: 1rem; display: flex; gap: .25rem; }
.cw-story-progress span { height: 3px; flex: 1; border-radius: 4px; background: rgba(255,255,255,.35); }
.cw-story-progress span.active { background: #fff; }
.cw-story-close, .cw-story-prev, .cw-story-next { position: absolute; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.34); color: #fff; }
.cw-story-close { top: 1.35rem; right: 1rem; }
.cw-story-prev, .cw-story-next { top: 45%; }
.cw-story-prev { left: .7rem; } .cw-story-next { right: .7rem; }
.cw-story-close:focus-visible, .cw-story-prev:focus-visible, .cw-story-next:focus-visible, .cw-story-controls button:focus-visible, .cw-story-reply button:focus-visible { outline: 3px solid #d4c1ff; outline-offset: 2px; }
.cw-story-controls { position: absolute; left: 1rem; right: 1rem; bottom: 4.4rem; display: flex; justify-content: center; gap: .4rem; }
.cw-story-controls button, .cw-story-actions button, .cw-story-actions a { min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; padding: .55rem .8rem; text-decoration: none; }
.cw-story-reply { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; }
.cw-story-reply .form-control { min-height: 44px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.cw-story-reply .form-control::placeholder { color: #d8cfee; }
.cw-story-reply button { min-height: 44px; }
.cw-story-actions { position: absolute; top: 1.35rem; left: 1rem; display: flex; gap: .35rem; }
.cw-story-actions a, .cw-story-actions button { min-width: auto; min-height: 34px; padding: .35rem .6rem; font-size: .75rem; }
.cw-story-booking-cta { display: inline-block; margin-top: 1rem; padding: .7rem 1rem; border-radius: 999px; background: #fff; color: #4c1d95; font-weight: 800; text-decoration: none; }
.cw-story-interactive { max-height: min(58vh, 520px); overflow-y: auto; padding: 1.1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 1rem; background: linear-gradient(145deg, #6f42c1, #8b5cf6); text-align: left; scrollbar-width: thin; }
.cw-story-interactive h2 { margin: .4rem 0 1rem; color: #fff; font-size: clamp(1.25rem, 4vw, 1.8rem); }
.cw-story-sticker-label { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.cw-story-interactive button, .cw-story-interactive textarea { min-height: 44px; }
.cw-story-interactive button { border: 1px solid rgba(255,255,255,.42); border-radius: .7rem; background: rgba(18,12,32,.42); color: #fff; padding: .55rem .75rem; }
.cw-story-interactive button:focus-visible, .cw-story-interactive textarea:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cw-story-interactive blockquote, .cw-story-owner-inbox article, .cw-story-consent-request { margin: .7rem 0; padding: .75rem; border-radius: .75rem; background: rgba(255,255,255,.13); }
.cw-story-interactive blockquote p, .cw-story-owner-inbox article p { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.cw-story-interactive blockquote footer, .cw-story-interactive small { color: #eee8ff; }
.cw-story-question-form { display: grid; gap: .55rem; }
.cw-story-question-form textarea { width: 100%; min-height: 88px; padding: .65rem; border: 1px solid rgba(255,255,255,.45); border-radius: .7rem; background: rgba(255,255,255,.12); color: #fff; resize: vertical; }
.cw-story-poll-options { display: grid; gap: .6rem; }
.cw-story-poll-options button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; text-align: left; }
.cw-story-poll-options button[aria-pressed="true"] { border-color: #fff; background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 2px #fff; }
.cw-story-poll-options button:disabled { opacity: .78; }
.cw-story-owner-inbox h3 { color: #fff; font-size: 1rem; }
.cw-story-owner-inbox article > div, .cw-story-consent-request { display: flex; flex-wrap: wrap; gap: .45rem; }
.cw-story-live { position: absolute; z-index: 5; right: 1rem; bottom: 7.7rem; left: 1rem; min-height: 1.2rem; color: #fff; font-size: .78rem; text-align: center; pointer-events: none; }
@media (max-width: 575.98px) {
    .cw-story-rail { margin-left: -.25rem; margin-right: -.25rem; border-radius: 1rem; }
    .cw-story-create-grid { grid-template-columns: 1fr; }
    .cw-story-create-grid .span-2 { grid-column: auto; }
    .cw-story-viewer { min-height: 100dvh; border-radius: 0; }
    .cw-story-viewer-content { min-height: 100dvh; padding-left: 2.75rem; padding-right: 2.75rem; }
    .cw-story-viewer-content img, .cw-story-viewer-content video { max-width: 86vw; max-height: 62vh; }
}
@media (prefers-reduced-motion: reduce) { .cw-story-scroller { scroll-behavior: auto; } }
.story-public-page { min-height: 70vh; display: grid; place-items: center; padding: 2rem 1rem 4rem; background: #f7f5fc; }
.story-public-card { width: min(100%, 620px); padding: 2rem; border: 1px solid #e4defb; border-radius: 1.25rem; background: #fff; box-shadow: 0 18px 55px rgba(42, 19, 74, .12); text-align: center; }
.story-public-card h1 { color: #24113f; }
.story-public-card img, .story-public-card video { display: block; width: min(100%, 520px); max-height: 65vh; margin: 1.25rem auto; border-radius: .9rem; object-fit: contain; background: #120c20; }
.story-public-text { margin: 1.5rem auto; padding: 2.5rem 1.5rem; border-radius: 1rem; background: linear-gradient(145deg, #6f42c1, #bd8cff); color: #fff; font-size: 1.35rem; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-public-credit { color: #6c6480; font-size: .85rem; }

/* Frexima UI/UX consolidation */
.dashboard-body,
.brand-body {
    background: var(--frexima-bg);
    color: var(--frexima-text);
}

.dashboard-body .main-content,
.brand-body .brand-main-content {
    color: var(--frexima-text);
}

.text-muted,
.form-text,
.table small,
.content-panel p,
.brand-body .page-heading-subtitle {
    color: var(--frexima-muted) !important;
}

.content-panel,
.card,
.modal-content,
.dropdown-menu {
    background: var(--frexima-card);
    border-color: var(--frexima-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
}

.btn {
    border-radius: 8px;
    font-weight: 800;
}

.btn-primary,
.brand-body .btn-primary,
.dashboard-body .btn-primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--frexima-purple), var(--frexima-purple-dark));
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(108, 60, 240, 0.22);
}

.btn-primary:hover,
.btn-primary:focus,
.brand-body .btn-primary:hover,
.brand-body .btn-primary:focus,
.dashboard-body .btn-primary:hover,
.dashboard-body .btn-primary:focus {
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C4DFF, var(--frexima-purple-dark));
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(108, 60, 240, 0.3);
}

.btn-light,
.btn-outline-primary,
.form-control,
.form-select,
.input-group-text {
    color: var(--frexima-text);
    background-color: #FFFFFF;
    border-color: var(--frexima-border);
    border-radius: 8px;
}

.form-control,
.form-select {
    min-height: 48px;
    font-weight: 700;
}

/* Client availability and booking requests */
.client-book-page,
.booking-request-page,
.provider-request-page {
    max-width: 1240px;
    margin: 0 auto;
    padding-bottom: 40px;
    color: var(--fx-text);
}

.client-book-heading,
.client-book-section-heading,
.client-book-back,
.client-book-confirm,
.booking-request-card,
.booking-request-actions,
.provider-request-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.client-book-heading {
    margin-bottom: 20px;
}

.client-book-heading h1 {
    margin: 4px 0;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 900;
}

.client-book-heading p,
.client-book-section-heading p,
.provider-choice-card p,
.service-choice-card p,
.staff-choice-card p,
.booking-request-card p {
    color: var(--fx-text-secondary);
    margin: 0;
}

.client-book-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.client-book-steps span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 12px;
    background: var(--fx-card);
    color: var(--fx-text-secondary);
    font-weight: 800;
}

.client-book-steps b,
.client-book-section-heading > div > span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F0EBFF;
    color: var(--fx-primary);
}

.client-book-steps .complete b {
    color: #fff;
    background: var(--fx-success);
}

.client-book-section,
.client-book-confirm {
    padding: 24px;
    border: 1px solid var(--fx-border);
    border-radius: 16px;
    background: var(--fx-card);
    box-shadow: var(--shadow-sm);
}

.client-book-section-heading {
    margin-bottom: 18px;
}

.client-book-section-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-book-section-heading h2,
.client-book-confirm h2,
.booking-request-card h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.client-book-back {
    justify-content: flex-start;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fx-border);
}

.client-book-back a {
    color: var(--fx-primary-dark);
    font-weight: 800;
    text-decoration: none;
}

.provider-card-grid,
.service-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.provider-choice-card,
.service-choice-card,
.staff-choice-card {
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    background: #fff;
}

.provider-choice-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.provider-choice-logo,
.staff-choice-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: #F0EBFF;
    color: var(--fx-primary);
    font-size: 1.4rem;
    font-weight: 900;
}

.provider-choice-logo {
    width: 64px;
    height: 64px;
}

.provider-choice-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.provider-choice-card h3,
.service-choice-card h3,
.staff-choice-card h3 {
    margin: 4px 0;
    font-size: 1rem;
    font-weight: 900;
}

.provider-connected {
    color: var(--fx-success);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.service-choice-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
}

.service-choice-card:hover,
.staff-choice-card:hover {
    border-color: var(--fx-primary);
    box-shadow: 0 12px 28px rgba(108, 60, 240, .12);
}

.service-choice-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}

.service-choice-card dl div {
    padding: 10px;
    border-radius: 10px;
    background: var(--fx-background);
}

.service-choice-card dt {
    color: var(--fx-text-muted);
    font-size: .75rem;
}

.service-choice-card dd {
    margin: 2px 0 0;
    font-weight: 900;
}

.service-choice-card > span {
    color: var(--fx-primary-dark);
    font-weight: 900;
}

.staff-choice-grid {
    display: grid;
    gap: 10px;
}

.staff-choice-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
}

.staff-choice-avatar {
    width: 48px;
    height: 48px;
}

.staff-choice-card > i {
    margin-left: auto;
    color: var(--fx-primary);
}

.client-book-date-form {
    display: flex;
    align-items: end;
    gap: 10px;
    max-width: 460px;
    margin-bottom: 18px;
}

.client-book-date-form label {
    align-self: center;
    font-weight: 800;
}

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

.available-slot-grid button {
    width: 100%;
    min-height: 48px;
    border: 1px solid #CFC3FF;
    border-radius: 10px;
    color: var(--fx-primary-dark);
    background: #F7F4FF;
    font-weight: 900;
}

.available-slot-grid button:hover,
.available-slot-grid button:focus {
    color: #fff;
    background: var(--fx-primary);
}

.client-book-confirm {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    margin-top: 16px;
    border-color: #CFC3FF;
    box-shadow: 0 18px 48px rgba(34, 21, 74, .18);
}

.client-book-confirm form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: end;
    gap: 10px;
    width: min(600px, 55%);
}

.client-book-confirm form label {
    grid-column: 1 / -1;
    font-weight: 800;
}

.client-book-confirm textarea {
    grid-column: 1;
}

.client-book-bottom-nav {
    display: none;
}

.appointment-request-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 18px;
}

.appointment-request-tabs a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--fx-text-secondary);
    background: #fff;
    border: 1px solid var(--fx-border);
    font-weight: 800;
    text-decoration: none;
}

.appointment-request-tabs a.active {
    color: #fff;
    background: var(--fx-primary);
    border-color: var(--fx-primary);
}

.booking-request-list {
    display: grid;
    gap: 12px;
}

.booking-request-card {
    padding: 20px;
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    background: #fff;
}

.booking-request-card strong {
    display: block;
    margin-top: 10px;
}

.booking-request-card blockquote,
.proposed-time {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--fx-background);
}

.proposed-time span,
.proposed-time b {
    display: block;
}

.booking-request-actions,
.provider-request-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.booking-request-actions form,
.provider-request-actions form {
    margin: 0;
}

.provider-request-actions details {
    position: relative;
}

.provider-request-actions summary {
    list-style: none;
    cursor: pointer;
}

.proposal-form {
    position: absolute;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 10px;
    width: 320px;
    padding: 16px;
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.proposal-form label {
    font-weight: 800;
}

/* Customer Phase 10 timeline and mobile booking flow */
.client-timeline-page {
    max-width: 980px;
    margin: 0 auto;
    padding-bottom: 40px;
    color: var(--fx-text);
}

.client-timeline-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.client-timeline-heading h1 {
    margin: 4px 0;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 900;
}

.client-timeline-heading p {
    margin: 0;
    color: var(--fx-text-secondary);
}

.client-timeline-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.client-timeline-tabs a {
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 12px;
    color: var(--fx-text-secondary);
    background: #fff;
    font-weight: 900;
    text-decoration: none;
}

.client-timeline-tabs a.active {
    color: #fff;
    border-color: var(--fx-primary);
    background: var(--fx-primary);
}

.client-timeline-feed {
    display: grid;
    gap: 12px;
}

.client-timeline-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--fx-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.client-timeline-card-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: var(--fx-primary);
    background: #f0ebff;
    font-size: 1.15rem;
}

.client-timeline-card-content {
    min-width: 0;
    flex: 1;
}

.client-timeline-card h2 {
    margin: 4px 0 7px;
    font-size: 1.08rem;
    font-weight: 900;
}

.client-timeline-card h2 a {
    color: inherit;
    text-decoration: none;
}

.client-timeline-card p {
    margin: 0 0 8px;
    color: var(--fx-text-secondary);
    white-space: pre-line;
}

.client-timeline-card small {
    color: var(--fx-text-muted);
}

.client-timeline-card-media {
    display: block;
    width: min(100%, 520px);
    max-height: 320px;
    margin-top: 14px;
    border-radius: 12px;
    object-fit: cover;
}

/* Client Lookbook: private, image-led, and aligned to the current Frexima system. */
.client-lookbook-page {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 24px 0 110px;
    color: var(--fx-text);
}

.client-lookbook-hero,
.client-lookbook-gallery-head,
.client-lookbook-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.client-lookbook-hero { margin-bottom: 20px; }
.client-lookbook-hero h1 { margin: 4px 0 8px; font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 900; }
.client-lookbook-hero p { max-width: 660px; margin: 0; color: var(--fx-text-secondary); font-size: 1rem; line-height: 1.6; }
.client-lookbook-back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--fx-text-secondary); font-weight: 800; text-decoration: none; }
.client-lookbook-add { min-height: 48px; border-radius: var(--fx-radius-md); font-weight: 800; white-space: nowrap; }

.client-lookbook-privacy-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    padding: 15px 18px;
    border: 1px solid var(--fx-primary-border);
    border-radius: var(--fx-radius-lg);
    color: var(--fx-purple-dark);
    background: var(--fx-purple-soft);
}
.client-lookbook-privacy-note > i { font-size: 1.35rem; }
.client-lookbook-privacy-note strong,
.client-lookbook-privacy-note span { display: block; }
.client-lookbook-privacy-note span { margin-top: 2px; color: var(--fx-text-secondary); font-size: .9rem; }

.client-lookbook-composer,
.client-lookbook-compare {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid var(--fx-border);
    border-radius: 20px;
    background: var(--fx-card);
    box-shadow: var(--fx-shadow-card, var(--shadow-sm));
}
.client-lookbook-section-heading h2,
.client-lookbook-gallery-head h2 { margin: 3px 0 0; font-size: 1.25rem; font-weight: 900; }
.client-lookbook-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; color: var(--fx-text); background: var(--fx-surface-soft); }

.client-lookbook-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.client-lookbook-field { display: grid; gap: 7px; min-width: 0; }
.client-lookbook-field > span { color: var(--fx-text); font-size: .9rem; font-weight: 800; }
.client-lookbook-field small { color: var(--fx-text-muted); font-weight: 600; }
.client-lookbook-field.span-2,
.client-lookbook-form-actions.span-2 { grid-column: 1 / -1; }
.client-lookbook-field :is(input, select, textarea) { min-height: 48px; border-color: var(--fx-border-strong); border-radius: 12px; font-size: .96rem; }
.client-lookbook-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.client-lookbook-form-actions > span { color: var(--fx-text-secondary); font-size: .86rem; }
.client-lookbook-form-actions .btn { min-height: 48px; min-width: 150px; }

.client-lookbook-empty {
    display: grid;
    justify-items: center;
    padding: 58px 24px;
    text-align: center;
    border: 1px dashed var(--fx-border-strong);
    border-radius: 20px;
    background: var(--fx-card);
}
.client-lookbook-empty > span { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; color: var(--fx-purple-dark); background: var(--fx-purple-soft); font-size: 1.8rem; }
.client-lookbook-empty h2 { margin: 18px 0 8px; font-size: 1.3rem; font-weight: 900; }
.client-lookbook-empty p { max-width: 540px; margin: 0 0 20px; color: var(--fx-text-secondary); line-height: 1.6; }

.client-lookbook-gallery-head { align-items: center; margin: 24px 0 14px; }
.client-lookbook-gallery-head .btn { min-height: 44px; border: 1px solid var(--fx-border); font-weight: 800; }
.client-lookbook-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.client-lookbook-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 20px;
    background: var(--fx-card);
    box-shadow: var(--fx-shadow-card, var(--shadow-sm));
    transition: transform var(--fx-transition-standard, 180ms ease), box-shadow var(--fx-transition-standard, 180ms ease);
}
.client-lookbook-card:hover { transform: translateY(-2px); box-shadow: var(--fx-shadow-hover, var(--shadow-md)); }
.client-lookbook-media { position: relative; display: grid; grid-template-columns: 1fr; min-height: 280px; background: var(--fx-surface-soft); }
.client-lookbook-media.has-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-lookbook-media figure { position: relative; min-width: 0; margin: 0; }
.client-lookbook-media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.client-lookbook-media figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(9, 13, 34, .78); font-size: .76rem; font-weight: 800; }
.client-lookbook-compare-check { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 10px; border-radius: 999px; color: var(--fx-text); background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); font-size: .78rem; font-weight: 800; }
.client-lookbook-card-body { padding: 18px; }
.client-lookbook-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.client-lookbook-card-title h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 900; }
.client-lookbook-card-title p { margin: 0; color: var(--fx-text-secondary); font-size: .9rem; }
.client-lookbook-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: var(--fx-text-secondary); background: var(--fx-surface-soft); font-size: .75rem; font-weight: 800; }
.client-lookbook-status.is-shared { color: var(--fx-success-strong, #086c48); background: var(--fx-green-soft, #eaf8f1); }
.client-lookbook-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; color: var(--fx-text-secondary); font-size: .84rem; }
.client-lookbook-meta :is(span, a) { display: inline-flex; align-items: center; gap: 6px; }
.client-lookbook-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; color: var(--fx-text-secondary); background: var(--fx-surface-soft); font-size: .9rem; line-height: 1.55; }
.client-lookbook-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.client-lookbook-actions .btn { min-height: 42px; font-weight: 800; }
.client-lookbook-shares { display: grid; gap: 8px; margin-top: 14px; }
.client-lookbook-shares > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--fx-success-border, #a9e2c7); border-radius: 11px; background: var(--fx-green-soft, #eaf8f1); font-size: .82rem; }
.client-lookbook-shares button { min-height: 36px; border: 0; color: var(--fx-danger-strong, #9e2734); background: transparent; font-weight: 800; }
.client-lookbook-share-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--fx-purple-soft); }
.client-lookbook-share-panel label { display: grid; gap: 6px; color: var(--fx-text); font-size: .82rem; font-weight: 800; }
.client-lookbook-share-panel :is(select, button) { min-height: 44px; }

.client-lookbook-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.client-lookbook-compare-grid article { overflow: hidden; border: 1px solid var(--fx-border); border-radius: 16px; background: var(--fx-surface-soft); }
.client-lookbook-compare-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.client-lookbook-compare-grid h3 { margin: 14px 14px 3px; font-size: 1rem; font-weight: 900; }
.client-lookbook-compare-grid span { display: block; margin: 0 14px 14px; color: var(--fx-text-secondary); font-size: .85rem; }

@media (max-width: 767.98px) {
    .client-lookbook-page { padding: 16px 16px 108px; }
    .client-lookbook-hero { display: grid; grid-template-columns: minmax(0, 1fr); }
    .client-lookbook-add { width: 100%; }
    .client-lookbook-form,
    .client-lookbook-grid { grid-template-columns: minmax(0, 1fr); }
    .client-lookbook-field.span-2,
    .client-lookbook-form-actions.span-2 { grid-column: auto; }
    .client-lookbook-composer,
    .client-lookbook-compare { padding: 18px; }
    .client-lookbook-form-actions,
    .client-lookbook-gallery-head { align-items: stretch; flex-direction: column; }
    .client-lookbook-form-actions .btn,
    .client-lookbook-gallery-head .btn { width: 100%; }
    .client-lookbook-media { min-height: 240px; }
    .client-lookbook-share-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 389.98px) {
    .client-lookbook-page { padding-inline: 12px; }
    .client-lookbook-media.has-pair,
    .client-lookbook-compare-grid { grid-template-columns: minmax(0, 1fr); }
    .client-lookbook-media.has-pair figure { aspect-ratio: 4 / 3; }
    .client-lookbook-card-title { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
    .client-lookbook-card { transition: none; }
    .client-lookbook-card:hover { transform: none; }
}

.client-community-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 220px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f1ff, #fff7fb);
}

.client-community-cta-icon {
    display: grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    color: var(--fx-primary);
    background: #fff;
    font-size: 1.4rem;
}

.client-community-cta h3 {
    margin: 0 0 7px;
    font-size: 1.15rem;
    font-weight: 900;
}

.client-community-cta p {
    max-width: 430px;
    margin: 0 0 16px;
    color: var(--fx-text-secondary);
}

.booking-date-strip {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.booking-date-chip {
    display: grid;
    flex: 0 0 84px;
    gap: 2px;
    padding: 10px 8px;
    border: 1px solid var(--fx-border);
    border-radius: 12px;
    color: var(--fx-text-secondary);
    background: #fff;
    text-align: center;
    text-decoration: none;
}

.booking-date-chip span {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.booking-date-chip strong {
    font-size: .9rem;
}

.booking-date-chip.active {
    color: #fff;
    border-color: var(--fx-primary);
    background: var(--fx-primary);
}

.client-book-time-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
}

.client-book-time-heading span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: var(--fx-primary);
    background: #f0ebff;
    font-weight: 900;
}

.client-book-time-heading h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

@media (max-width: 767.98px) {
    .client-book-page,
    .booking-request-page {
        padding-bottom: 88px;
    }

    .client-book-heading {
        align-items: flex-start;
    }

    .client-book-steps {
        display: flex;
        overflow-x: auto;
    }

    .client-book-steps span {
        flex: 0 0 auto;
    }

    .client-book-section,
    .client-book-confirm {
        padding: 16px;
    }

    .client-book-section-heading,
    .client-book-confirm,
    .booking-request-card {
        align-items: stretch;
        flex-direction: column;
    }

    .client-book-section-heading p {
        max-width: none;
    }

    .provider-card-grid,
    .service-choice-grid {
        grid-template-columns: 1fr;
    }

    .provider-choice-card {
        grid-template-columns: 56px 1fr;
    }

    .provider-choice-card .btn {
        grid-column: 1 / -1;
    }

    .client-book-date-form {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .client-book-date-form label {
        grid-column: 1 / -1;
    }

    .client-book-confirm {
        position: fixed;
        right: 12px;
        bottom: 76px;
        left: 12px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .client-book-confirm form {
        display: grid;
        width: 100%;
    }

    .client-book-confirm textarea,
    .client-book-confirm .btn {
        grid-column: 1 / -1;
    }

    .client-book-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--fx-border);
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(14px);
    }

    .client-book-bottom-nav a {
        display: grid;
        place-items: center;
        min-height: 48px;
        color: var(--fx-text-muted);
        font-size: .7rem;
        font-weight: 800;
        text-decoration: none;
    }

    .client-book-bottom-nav i {
        font-size: 1.15rem;
    }

    .client-book-bottom-nav a.active {
        color: var(--fx-primary);
    }

    .booking-request-actions,
    .provider-request-actions {
        justify-content: stretch;
    }

    .booking-request-actions > *,
    .booking-request-actions .btn,
    .provider-request-actions > *,
    .provider-request-actions .btn {
        width: 100%;
    }

    .proposal-form {
        position: fixed;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }

    .client-timeline-page {
        padding-bottom: 88px;
    }

    .client-timeline-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-timeline-heading .btn {
        width: 100%;
    }

    .client-timeline-card {
        padding: 16px;
    }

    .client-timeline-card-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .client-book-page {
        min-height: calc(100dvh - 20px);
    }

    .client-book-section {
        min-height: 56dvh;
    }

    .booking-date-strip,
    .available-slot-grid {
        scroll-snap-type: x proximity;
    }

    .booking-date-chip,
    .available-slot-grid button {
        scroll-snap-align: start;
    }

    .available-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Salon typography scale and readable control sizing. */
.brand-body {
    color: #1E1B1C;
    font-size: 16px;
    line-height: 1.55;
}

.brand-body .brand-main-content,
.brand-body .brand-app-content,
.brand-body input,
.brand-body select,
.brand-body textarea,
.brand-body button {
    font-size: 15px;
}

.brand-body h1,
.brand-body .page-heading h1,
.brand-body .frexima-dashboard-hero h1,
.brand-body .salon-community-page .cw-title-block h1,
.brand-body .open-appointments-header h1 {
    font-size: clamp(30px, 3vw, 32px) !important;
    line-height: 1.18;
    letter-spacing: -.035em;
}

.brand-body h2,
.brand-body .content-panel h2,
.brand-body .frexima-panel-heading h2,
.brand-body .cw-feed-head h2,
.brand-body .cw-story-rail-heading h2 {
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.3;
}

.brand-body h3,
.brand-body .content-panel h3,
.brand-body .cw-post-card h3 {
    font-size: 18px;
    line-height: 1.35;
}

.brand-body p,
.brand-body li,
.brand-body td,
.brand-body th,
.brand-body label {
    line-height: 1.55;
}

.brand-body small,
.brand-body .small,
.brand-body .form-text,
.brand-body .text-muted,
.brand-body .page-heading-subtitle {
    font-size: 14px;
    line-height: 1.45;
}

.brand-body .brand-sidebar-link {
    min-height: 46px;
    font-size: 15px;
    font-weight: 650;
}

.brand-body .btn,
.brand-body .form-control,
.brand-body .form-select {
    min-height: 44px;
}

.brand-body .btn {
    font-size: 15px;
    font-weight: 700;
}

.brand-body .section-label,
.brand-body .cw-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
}

@media (max-width: 767.98px) {
    .brand-body {
        font-size: 15px;
    }

    .brand-body h1,
    .brand-body .page-heading h1,
    .brand-body .frexima-dashboard-hero h1,
    .brand-body .salon-community-page .cw-title-block h1,
    .brand-body .open-appointments-header h1 {
        font-size: 28px !important;
    }

    .brand-body h2,
    .brand-body .content-panel h2,
    .brand-body .frexima-panel-heading h2 {
        font-size: 18px;
    }
}

/* P007/006: role-aware mobile workspace shell. The plus action is a
   semantic action slot, not a navigation destination, so it gets its own
   sixth visual column while the five destination tabs remain unchanged. */
.brand-topbar-title,
.brand-workspace-switcher,
.brand-workspace-switcher-button {
    min-width: 0;
}

.brand-workspace-switcher-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(52vw, 340px);
    min-height: 44px;
    padding: 3px 8px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 750;
    text-align: left;
}

.brand-workspace-switcher-button:hover,
.brand-workspace-switcher-button:focus-visible {
    background: rgba(108, 60, 240, 0.08);
}

.brand-workspace-switcher-button > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-workspace-switcher-button > i {
    flex: 0 0 auto;
    color: var(--frexima-muted);
    font-size: 0.75rem;
}

.brand-workspace-switcher .dropdown-menu {
    width: min(320px, calc(100vw - 32px));
    max-height: min(60dvh, 420px);
    overflow-y: auto;
}

.brand-workspace-switcher .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}

.brand-workspace-switcher .dropdown-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frexima-mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.frexima-mobile-nav > a,
.frexima-mobile-nav > button,
.frexima-mobile-create {
    min-width: 0;
}

.frexima-mobile-nav > a > span,
.frexima-mobile-nav > button > span,
.frexima-mobile-create > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    body:has(.frexima-mobile-create-sheet.show),
    body:has(.brand-mobile-more.show) {
        overflow: hidden;
    }

    .brand-workspace-switcher-button {
        max-width: min(43vw, 220px);
    }

    .frexima-mobile-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        min-height: calc(var(--fx-mobile-nav-height) + env(safe-area-inset-bottom));
        padding-bottom: calc(7px + env(safe-area-inset-bottom));
    }

    .frexima-mobile-nav > a,
    .frexima-mobile-nav > button,
    .frexima-mobile-create > button {
        min-height: 44px;
    }

    .frexima-mobile-create > button {
        margin-top: -12px;
    }
}

/* Keep Phase 3 dashboard proportions after legacy dashboard overrides. */
@media (min-width: 992px) {
    .frexima-premium-dashboard .premium-dashboard-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr);
        gap: 20px;
        align-items: start;
    }
    .frexima-premium-dashboard .dashboard-status-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
        overflow: visible;
    }
    .frexima-premium-dashboard .premium-status-card {
        min-width: 0;
    }
}

.form-control:focus,
.form-select:focus {
    color: var(--frexima-text);
    border-color: rgba(108, 60, 240, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(108, 60, 240, 0.14);
}

.status-badge.success {
    color: #067647;
    background: #E8F8EF;
}

.status-badge.warning {
    color: #995C00;
    background: #FFF4DA;
}

.status-badge.danger {
    color: #B42318;
    background: #FEEDEC;
}

.status-badge.primary {
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
}

.sidebar,
.brand-body .brand-sidebar {
    width: var(--sidebar-width);
    background:
        radial-gradient(circle at 18% 0%, rgba(108, 60, 240, 0.24), transparent 28%),
        var(--frexima-sidebar);
    border-right: 0;
    box-shadow: 18px 0 44px rgba(7, 11, 31, 0.16);
}

.sidebar .brand-wordmark strong,
.sidebar .brand-wordmark small,
.brand-body .brand-sidebar .brand-wordmark strong,
.brand-body .brand-sidebar .brand-wordmark small {
    color: #FFFFFF;
}

.sidebar .brand-wordmark small,
.brand-body .brand-sidebar .brand-wordmark small,
.brand-sidebar-section-label {
    color: rgba(255, 255, 255, 0.58);
}

.sidebar-link,
.brand-body .brand-sidebar-link {
    min-height: 48px;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    border-color: transparent;
    border-radius: 8px;
}

.sidebar-link i,
.brand-body .brand-sidebar-link i {
    color: rgba(255, 255, 255, 0.86);
}

.sidebar-link:hover,
.sidebar-link:focus,
.brand-body .brand-sidebar-link:hover,
.brand-body .brand-sidebar-link:focus {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-link:hover i,
.sidebar-link:focus i,
.brand-body .brand-sidebar-link:hover i,
.brand-body .brand-sidebar-link:focus i {
    color: #FFFFFF;
}

.sidebar-link.active,
.brand-body .brand-sidebar-link.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--frexima-purple), var(--frexima-purple-dark));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 28px rgba(76, 29, 149, 0.32);
}

.sidebar-link.active i,
.brand-body .brand-sidebar-link.active i {
    color: #FFFFFF;
}

.brand-body .brand-help-card,
.brand-help-card {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.brand-body .brand-help-card h3,
.brand-body .brand-help-card p,
.brand-help-card h3,
.brand-help-card p {
    color: #FFFFFF;
}

@media (min-width: 992px) {
    .brand-body .brand-app-content {
        margin-left: var(--sidebar-width);
    }
}

.frexima-dashboard-page .frexima-action-card,
.frexima-dashboard-page .frexima-voice-card,
.frexima-dashboard-page .frexima-panel,
.frexima-dashboard-page .frexima-timeline-card,
.frexima-dashboard-page .frexima-feed-panel,
.appointment-booking-card,
.appointment-booking-savebar,
.timeline-my-panel,
.timeline-summary-card,
.frexima-timeline-workspace .timeline-community-panel,
.cw-post-card,
.cw-side-panel,
.forum-main-panel,
.forum-side-card,
.forum-reply,
.forum-reply-form {
    border: 1px solid var(--frexima-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
}

.appointment-booking-workspace {
    --booking-purple: var(--frexima-purple);
    --booking-purple-dark: var(--frexima-purple-dark);
    --booking-ink: var(--frexima-text);
    --booking-muted: var(--frexima-muted);
    --booking-line: var(--frexima-border);
}

.appointment-duration-pill {
    max-width: 170px;
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
    border: 1px solid rgba(108, 60, 240, 0.18);
}

.appointment-select-card,
.appointment-input-card,
.appointment-note-box,
.appointment-advanced-settings {
    border-color: var(--frexima-border);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.appointment-summary-card {
    border-top: 4px solid var(--frexima-purple);
}

.appointment-primary-button {
    box-shadow: 0 16px 30px rgba(108, 60, 240, 0.28);
}

.frexima-calendar-page .calendar-shell {
    grid-template-columns: 304px minmax(0, 1fr);
}

.frexima-calendar-page .content-panel,
.frexima-calendar-page .calendar-staff-row,
.frexima-calendar-page .calendar-date-jump,
.frexima-calendar-page .calendar-view-tabs {
    border-color: var(--frexima-border);
    border-radius: var(--card-radius);
}

.frexima-calendar-page .calendar-main-panel {
    min-height: 720px;
}

.frexima-calendar-page .schedule-board-scroll {
    background: #FFFFFF;
}

.frexima-calendar-page .schedule-time-corner,
.frexima-calendar-page .schedule-staff-heading {
    background: #FFFFFF;
    border-color: var(--frexima-border);
}

.frexima-calendar-page .schedule-staff-heading strong {
    color: var(--frexima-text);
    font-weight: 900;
}

.frexima-calendar-page .schedule-staff-heading small,
.frexima-calendar-page .schedule-time-corner {
    color: var(--frexima-muted);
}

.frexima-calendar-page .schedule-staff-column {
    background:
        repeating-linear-gradient(
            to bottom,
            #FFFFFF 0,
            #FFFFFF calc(var(--schedule-hour-height) - 1px),
            #DDE2EE calc(var(--schedule-hour-height) - 1px),
            #DDE2EE var(--schedule-hour-height)
        ),
        #FFFFFF;
}

.frexima-calendar-page .schedule-staff-column.is-drop-target {
    box-shadow: inset 0 0 0 3px rgba(108, 60, 240, 0.2);
    background-color: #FBF9FF;
}

.frexima-calendar-page .schedule-event.is-dragging {
    opacity: 0.55;
}

.frexima-calendar-page .schedule-event.is-resizing {
    opacity: 0.82;
}

.frexima-calendar-page .schedule-appointment-card {
    border-left: 4px solid var(--service-accent);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.frexima-calendar-page .schedule-appointment-card::after {
    position: absolute;
    right: 10px;
    bottom: 8px;
    left: 10px;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(108, 60, 240, 0.22), transparent);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 160ms ease;
}

.frexima-calendar-page .schedule-appointment-card:hover::after,
.frexima-calendar-page .schedule-appointment-card:focus-within::after {
    opacity: 1;
}

.frexima-calendar-page .schedule-available-slot {
    color: #047857;
    background: rgba(34, 197, 94, 0.08);
    border: 1px dashed rgba(34, 197, 94, 0.42);
    border-radius: 8px;
}

.frexima-calendar-page .schedule-available-slot strong::before {
    content: "+ ";
}

.frexima-calendar-page .schedule-blocked-slot {
    color: #475569;
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.schedule-resize-handle {
    position: absolute;
    right: 8px;
    bottom: 4px;
    left: 8px;
    display: grid;
    height: 16px;
    place-items: center;
    color: rgba(76, 29, 149, 0.62);
    cursor: ns-resize;
    background: transparent;
    border: 0;
    border-radius: 999px;
    line-height: 1;
}

.schedule-resize-handle:hover,
.schedule-resize-handle:focus {
    color: var(--frexima-purple-dark);
    background: rgba(108, 60, 240, 0.1);
}

.frexima-calendar-page .calendar-week-column,
.frexima-calendar-page .calendar-month-cell {
    border-radius: 0;
}

.frexima-calendar-page .calendar-appointment {
    border-left-width: 4px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.frexima-timeline-workspace {
    background: var(--frexima-bg);
}

.timeline-time-row {
    min-height: 92px;
}

.timeline-time-row::after {
    background: var(--frexima-border);
}

.timeline-time-row.available .timeline-time-card {
    color: var(--frexima-purple-dark);
    background: #FBF9FF;
    border-color: rgba(108, 60, 240, 0.34);
    border-style: dashed;
}

.timeline-time-row.available .timeline-card-copy strong {
    color: var(--frexima-purple-dark);
}

.timeline-time-row.available .timeline-card-copy strong::before {
    content: "+ ";
}

.timeline-time-card {
    border-color: var(--frexima-border);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.timeline-time-row.has-appointment .timeline-time-card {
    border-left: 4px solid var(--frexima-purple);
}

.timeline-action-list a:first-child,
.timeline-action-list button:first-child,
.timeline-primary-actions .btn-primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--frexima-purple), var(--frexima-purple-dark));
    border-color: transparent;
}

.frexima-community-wall-page {
    --cw-ink: var(--frexima-text);
    --cw-muted: var(--frexima-muted);
    --cw-line: var(--frexima-border);
    --cw-purple: var(--frexima-purple);
    --cw-purple-dark: var(--frexima-purple-dark);
}

.cw-post-grid {
    align-items: start;
}

.cw-post-card {
    background: #FFFFFF;
}

.cw-post-card footer {
    justify-content: space-between;
}

.cw-want-button {
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
    border-color: rgba(108, 60, 240, 0.18);
}

.cw-book-button {
    min-width: 92px;
    box-shadow: 0 10px 20px rgba(108, 60, 240, 0.24);
}

.frexima-forum-page {
    --forum-ink: var(--frexima-text);
    --forum-muted: var(--frexima-muted);
    --forum-line: var(--frexima-border);
    --forum-purple: var(--frexima-purple);
}

.forum-topic-row {
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.forum-topic-row:hover,
.forum-topic-row:focus-within {
    background: #FBF9FF;
    box-shadow: inset 3px 0 0 var(--frexima-purple);
}

.forum-tag.primary,
.forum-tabs a.active,
.forum-tabs a:hover,
.forum-tabs a:focus {
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
}

@media (max-width: 991.98px) {
    .sidebar,
    .brand-sidebar-canvas {
        background:
            radial-gradient(circle at 18% 0%, rgba(108, 60, 240, 0.24), transparent 28%),
            var(--frexima-sidebar);
    }
}

/* Salon client conversations */
.salon-messages-shell {
    display: grid;
    grid-template-columns: minmax(280px, 32%) minmax(0, 1fr) minmax(250px, 18%);
    gap: 12px;
    min-height: calc(100vh - 230px);
    align-items: stretch;
}

.salon-conversation-list,
.salon-chat-panel,
.salon-client-context {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E8E2F2;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(69, 45, 102, 0.06);
}

.salon-conversation-list {
    display: flex;
    min-height: 660px;
    flex-direction: column;
    overflow: hidden;
}

.salon-list-header,
.salon-search-form,
.salon-filter-tabs {
    flex: 0 0 auto;
}

.salon-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 20px 14px;
}

.salon-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #8C7A9C;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.salon-list-header h2,
.salon-chat-person h2,
.salon-context-person h2,
.salon-chat-empty h2 {
    margin: 0;
    color: #2B2235;
    font-size: 1.18rem;
    font-weight: 800;
}

.salon-unread-total {
    padding: 6px 9px;
    color: #6D4FA0;
    background: #F2ECFC;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.salon-search-form {
    padding: 0 20px 16px;
}

.salon-search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: #9B8DA8;
    background: #FAF8FC;
    border: 1px solid #E8E2F2;
    border-radius: 11px;
}

.salon-search-box input {
    width: 100%;
    padding: 0;
    color: #33283D;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: .84rem;
}

.salon-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 16px 12px;
    border-bottom: 1px solid #F0ECF4;
}

.salon-filter-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px;
    color: #8C7A9C;
    border-radius: 9px;
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
}

.salon-filter-tab span {
    color: #A79AB3;
    font-size: .68rem;
}

.salon-filter-tab.active,
.salon-filter-tab:hover {
    color: #69489A;
    background: #F3EDFC;
}

.salon-conversation-items {
    min-height: 0;
    overflow: auto;
}

.salon-conversation-item {
    display: flex;
    gap: 11px;
    padding: 15px 16px;
    color: #4A3D55;
    border-bottom: 1px solid #F0ECF4;
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
}

.salon-conversation-item:hover,
.salon-conversation-item.is-selected {
    color: #4A3D55;
    background: #FBF9FE;
    border-left-color: #9D7AC8;
}

.salon-conversation-item.is-unread {
    background: #FEFCFF;
}

.salon-avatar {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    overflow: hidden;
    object-fit: cover;
    color: #6D4FA0;
    background: #EEE6F8;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 850;
}

.salon-avatar-large {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}

.salon-avatar-fallback {
    background: linear-gradient(135deg, #EDE2F8, #F8E8F0);
}

.salon-conversation-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 5px;
}

.salon-conversation-top,
.salon-conversation-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.salon-conversation-top strong {
    overflow: hidden;
    color: #33283D;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salon-conversation-top time,
.salon-conversation-bottom,
.salon-conversation-preview {
    color: #978BA1;
    font-size: .7rem;
}

.salon-conversation-preview {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.salon-conversation-bottom {
    justify-content: flex-start;
    gap: 10px;
}

.salon-conversation-bottom b {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    place-items: center;
    color: #FFFFFF;
    background: #8D68B5;
    border-radius: 999px;
    font-size: .65rem;
}

.salon-list-empty,
.salon-chat-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 38px 20px;
    color: #9B8DA8;
    text-align: center;
}

.salon-list-empty i,
.salon-chat-empty i {
    color: #B18BD0;
    font-size: 2rem;
}

.salon-list-empty strong,
.salon-list-empty span,
.salon-chat-empty p {
    font-size: .82rem;
}

.salon-chat-panel {
    display: flex;
    min-height: 660px;
    flex-direction: column;
    overflow: hidden;
}

.salon-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 76px;
    padding: 14px 20px;
    border-bottom: 1px solid #F0ECF4;
}

.salon-chat-person {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.salon-chat-person > div {
    min-width: 0;
}

.salon-chat-person h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salon-chat-person p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
}

.channel-pill,
.next-appointment-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8C7A9C;
    font-size: .68rem;
}

.next-appointment-pill {
    color: #6D4FA0;
}

.salon-chat-actions,
.salon-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.salon-chat-actions .btn {
    white-space: nowrap;
}

.salon-thread {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    overflow: auto;
    padding: 22px 24px;
    background: #FCFBFD;
}

.salon-day-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
    color: #A294AE;
    font-size: .68rem;
    font-weight: 750;
}

.salon-day-divider::before,
.salon-day-divider::after {
    height: 1px;
    flex: 1 1 auto;
    background: #EEE8F2;
    content: "";
}

.salon-bubble-row {
    display: flex;
    justify-content: flex-start;
}

.salon-bubble-row.is-own {
    justify-content: flex-end;
}

.salon-message-bubble {
    width: fit-content;
    max-width: min(76%, 600px);
    padding: 11px 14px 8px;
    color: #4E4357;
    background: #FFFFFF;
    border: 1px solid #EAE4EF;
    border-radius: 5px 16px 16px 16px;
    box-shadow: 0 3px 10px rgba(59, 39, 78, .03);
}

.salon-bubble-row.is-own .salon-message-bubble {
    color: #4F3C63;
    background: #EEE5F8;
    border-color: #E2D4F0;
    border-radius: 16px 5px 16px 16px;
}

.salon-message-bubble p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.salon-message-bubble footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 6px;
    color: #A092AE;
    font-size: .64rem;
}

.salon-bubble-row.is-own .salon-message-bubble footer {
    color: #80679B;
}

.salon-attachment-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 9px;
    color: #695279;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(129, 99, 157, .16);
    border-radius: 9px;
    font-size: .72rem;
    text-decoration: none;
}

.salon-attachment-preview.is-image {
    display: block;
    padding: 4px;
}

.salon-attachment-preview img {
    display: block;
    width: 180px;
    max-width: 100%;
    max-height: 130px;
    object-fit: cover;
    border-radius: 6px;
}

.salon-composer-wrap {
    flex: 0 0 auto;
    padding: 10px 18px 15px;
    background: #FFFFFF;
    border-top: 1px solid #F0ECF4;
}

.salon-quick-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.salon-quick-actions button,
.salon-quick-actions a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 6px 8px;
    color: #806F8F;
    background: #FAF8FC;
    border: 1px solid #EEE8F3;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
}

.salon-quick-actions button:hover,
.salon-quick-actions a:hover {
    color: #69489A;
    background: #F2ECFA;
}

.salon-composer {
    padding: 10px 12px 8px;
    background: #FAF8FC;
    border: 1px solid #E5DDEB;
    border-radius: 14px;
}

.salon-composer > textarea {
    display: block;
    width: 100%;
    min-height: 40px;
    resize: vertical;
    color: #3A2F43;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: .86rem;
    line-height: 1.45;
}

.salon-composer-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.composer-icon-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #8D7B99;
    border-radius: 8px;
    text-decoration: none;
}

.composer-icon-button:hover {
    color: #69489A;
    background: #F0E8F8;
}

.salon-ai-trigger {
    color: #8969A6;
}

.salon-attachment-name {
    max-width: 150px;
    overflow: hidden;
    color: #8D7B99;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salon-send-button {
    margin-left: auto;
    border-radius: 9px;
}

.salon-ai-draft {
    display: grid;
    gap: 7px;
    margin-top: 9px;
    padding: 9px;
    background: #F2ECFA;
    border: 1px solid #E1D3EF;
    border-radius: 10px;
}

.salon-ai-draft-head,
.salon-ai-draft-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.salon-ai-draft-head strong {
    color: #60447E;
    font-size: .76rem;
}

.salon-ai-draft-head span,
.salon-ai-status {
    color: #8A7A97;
    font-size: .68rem;
}

.salon-ai-draft-row textarea {
    width: 100%;
    padding: 7px;
    resize: vertical;
    border: 1px solid #DDCDED;
    border-radius: 7px;
    font-size: .75rem;
}

.salon-client-context {
    display: flex;
    min-height: 660px;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    overflow: auto;
}

.salon-context-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.salon-context-person {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 4px 0 8px;
    text-align: center;
}

.salon-context-person .salon-avatar-large {
    width: 62px;
    height: 62px;
    margin-bottom: 3px;
}

.salon-context-person h2 {
    font-size: 1rem;
}

.client-status-dot {
    color: #5E9C73;
    font-size: .68rem;
    font-weight: 750;
}

.client-status-dot i {
    font-size: .46rem;
}

.salon-context-details {
    display: grid;
    gap: 9px;
    margin: 0;
}

.salon-context-details div {
    display: grid;
    gap: 3px;
}

.salon-context-details dt {
    color: #9A8EA3;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.salon-context-details dd,
.salon-context-details a {
    margin: 0;
    color: #554660;
    font-size: .75rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.salon-context-card {
    display: grid;
    gap: 5px;
    padding: 12px;
    background: #FBF9FD;
    border: 1px solid #EEE8F3;
    border-radius: 11px;
}

.salon-context-card-label,
.salon-context-note > span {
    color: #8B7A98;
    font-size: .68rem;
    font-weight: 750;
}

.salon-context-card strong {
    color: #403149;
    font-size: .82rem;
    line-height: 1.35;
}

.salon-context-card > span:not(.salon-context-card-label) {
    color: #8F8299;
    font-size: .7rem;
}

.salon-context-card > a {
    margin-top: 3px;
    color: #7757A0;
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
}

.balance-card strong {
    color: #9B5C72;
}

.salon-context-note {
    padding: 10px 12px;
    background: #FFF9ED;
    border: 1px solid #F3E4C4;
    border-radius: 10px;
}

.salon-context-note > span {
    color: #9A7445;
}

.salon-context-note p {
    margin: 5px 0 0;
    color: #725C3F;
    font-size: .72rem;
    line-height: 1.45;
}

.salon-context-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
}

.salon-context-actions .btn {
    font-size: .72rem;
}

.salon-context-actions .btn:last-child {
    grid-column: 1 / -1;
}

.salon-mobile-back {
    display: none;
    color: #7658A0;
    font-size: 1.1rem;
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .salon-messages-shell {
        grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    }

    .salon-client-context {
        position: fixed;
        z-index: 30;
        top: 82px;
        right: 18px;
        bottom: 18px;
        width: min(340px, calc(100vw - 36px));
        transform: translateX(calc(100% + 28px));
        transition: transform .2s ease;
    }

    .salon-client-context.is-open {
        transform: translateX(0);
    }
}

@media (max-width: 767.98px) {
    .salon-messages-shell {
        display: block;
        min-height: auto;
    }

    .salon-conversation-list,
    .salon-chat-panel {
        min-height: calc(100vh - 210px);
        border-radius: 14px;
    }

    .salon-messages-shell.has-selected .salon-conversation-list {
        display: none;
    }

    .salon-messages-shell:not(.has-selected) .salon-chat-panel {
        display: none;
    }

    .salon-chat-header {
        align-items: flex-start;
        padding: 13px 14px;
    }

    .salon-mobile-back {
        display: inline-block;
        padding-top: 5px;
    }

    .salon-chat-actions {
        gap: 4px;
    }

    .salon-chat-actions .btn {
        padding: 6px 8px;
    }

    .salon-chat-actions .btn span {
        display: none;
    }

    .salon-thread {
        padding: 18px 12px;
    }

    .salon-message-bubble {
        max-width: 88%;
    }

    .salon-composer-wrap {
        padding: 8px 9px 10px;
    }

    .salon-quick-actions {
        margin-left: -2px;
        margin-right: -2px;
    }

    .salon-quick-actions button,
    .salon-quick-actions a {
        font-size: .65rem;
    }

    .salon-quick-actions button span,
    .salon-quick-actions a span {
        display: none;
    }

    .salon-send-button span {
        display: none;
    }

    .salon-send-button {
        width: 36px;
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 767.98px) {
    .dashboard-body .main-content,
    .brand-body .brand-main-content {
        padding-right: 14px;
        padding-left: 14px;
    }

    .content-panel,
    .card,
    .modal-content,
    .appointment-booking-card,
    .timeline-my-panel,
    .cw-post-card,
    .forum-topic-row {
        border-radius: 8px;
    }

    .frexima-calendar-page .calendar-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .cw-post-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Shared brand mobile navigation - final cascade */
.frexima-mobile-nav {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 68px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(7, 11, 31, 0.2);
    backdrop-filter: blur(18px);
}

.frexima-mobile-nav > a,
.frexima-mobile-nav > button {
    display: grid;
    min-width: 0;
    min-height: 54px;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 4px;
    color: var(--frexima-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 850;
}

.frexima-mobile-nav > a i,
.frexima-mobile-nav > button i {
    font-size: 1.15rem;
}

.frexima-mobile-nav > a.active {
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
}

.frexima-mobile-create {
    display: grid;
    place-items: center;
}

.frexima-mobile-create > button {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--frexima-purple), #8B5CF6);
    border: 4px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(108, 60, 240, 0.34);
    transform: translateY(-15px);
}

.frexima-mobile-create > button i {
    font-size: 1.35rem;
}

.frexima-mobile-create-menu {
    width: min(360px, calc(100vw - 24px));
    padding: 14px;
    border: 1px solid var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(7, 11, 31, 0.22);
}

.frexima-mobile-create-menu h2 {
    margin: 2px 6px 10px;
    color: var(--frexima-text);
    font-size: 1rem;
    font-weight: 900;
}

.frexima-mobile-create-menu .dropdown-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px 8px;
    border-radius: 8px;
}

.frexima-mobile-create-menu .dropdown-item > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
    border-radius: 8px;
}

.frexima-mobile-create-menu strong,
.frexima-mobile-create-menu small {
    display: block;
}

.frexima-mobile-create-menu strong {
    color: var(--frexima-text);
    font-size: 0.86rem;
}

.frexima-mobile-create-menu small {
    margin-top: 2px;
    color: var(--frexima-muted);
    font-size: 0.72rem;
}

@media (max-width: 991.98px) {
    .brand-body .brand-main-content {
        padding-right: 16px;
        padding-bottom: 96px;
        padding-left: 16px;
    }

    .brand-body .calendar-mobile-nav,
    .brand-body .forum-mobile-nav,
    .brand-body .cw-mobile-nav {
        display: none !important;
    }
}

/* Phase 11 final precedence: keep responsive rules effective after page-specific styles. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dashboard-body .sidebar.desktop-sidebar,
    .brand-body .brand-sidebar.desktop-sidebar {
        display: flex !important;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1040;
        width: 76px;
        padding: 20px 10px 14px;
        overflow: hidden;
    }

    .dashboard-body .sidebar.desktop-sidebar .brand-wordmark,
    .brand-body .brand-sidebar.desktop-sidebar .brand-wordmark,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-link-main span,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link-main span,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-link-caret,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link-caret,
    .dashboard-body .sidebar.desktop-sidebar .nav-badge,
    .brand-body .brand-sidebar.desktop-sidebar .brand-nav-badge,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-profile-meta,
    .brand-body .brand-sidebar.desktop-sidebar .sidebar-profile-meta,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-admin-actions,
    .brand-body .brand-sidebar.desktop-sidebar .brand-help-card {
        display: none;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-link,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link {
        justify-content: center;
        min-height: 50px;
        padding: 10px 0;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-link-main,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link-main {
        justify-content: center;
    }

    .dashboard-body .app-content,
    .brand-body .brand-app-content {
        margin-left: 76px !important;
    }

    .frexima-mobile-nav {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .app-content,
    .brand-app-content {
        margin-left: 0 !important;
    }

    .main-content,
    .brand-main-content {
        width: 100% !important;
        min-height: 0;
        margin: 0 !important;
        padding: 16px 16px calc(78px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .topbar,
    .brand-topbar {
        min-height: 64px;
        padding: 10px 16px;
        gap: 8px;
    }

    .topbar-title span,
    .topbar-title h1 {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-title span {
        color: var(--text-muted);
        font-size: 0.66rem;
        text-transform: uppercase;
    }

    .topbar-title h1,
    .brand-topbar-title h1 {
        margin-top: 2px;
        color: var(--text-dark);
        font-size: 0.96rem;
        font-weight: 850;
        line-height: 1.2;
        text-transform: none;
    }

    .topbar-actions,
    .brand-topbar-actions {
        gap: 7px;
    }

    .topbar-actions .icon-button,
    .brand-topbar-actions .icon-button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .user-chip,
    .brand-account-chip {
        width: 42px;
        max-width: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 3px;
        border-radius: 999px;
    }

    .user-chip .user-meta,
    .user-chip .user-chip-caret,
    .brand-account-chip .user-meta,
    .brand-account-chip .user-chip-caret {
        display: none;
    }

    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
    }

    .frexima-mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: grid;
        min-height: 78px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        border: 0;
        border-top: 1px solid var(--frexima-border);
        border-radius: 0;
        box-shadow: 0 -12px 32px rgba(7, 11, 31, 0.1);
    }

    .frexima-mobile-nav > button.active {
        color: var(--frexima-purple-dark);
        background: #F1ECFF;
    }

    .frexima-mobile-create-menu {
        grid-template-columns: 1fr;
    }

    .frexima-dashboard-top-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        width: 100%;
        gap: 8px;
    }

    .frexima-search-pill {
        grid-column: 1 / -1;
        width: 100%;
    }

    .frexima-date-pill,
    .frexima-help-pill {
        display: none;
    }

    .frexima-action-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .frexima-action-card,
    .frexima-action-card.purple,
    .frexima-action-card:not(:first-child) {
        grid-column: auto;
        min-height: 88px;
        padding: 14px;
    }

    .frexima-status-grid {
        display: flex;
        margin: 0 -16px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .frexima-status-card {
        flex: 0 0 min(78vw, 260px);
        scroll-snap-align: start;
    }

    .frexima-dashboard-workspace,
    .premium-dashboard-workspace {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .brand-body:has(.frexima-calendar-page) .brand-topbar,
    .brand-body:has(.frexima-community-wall-page) .brand-topbar,
    .brand-body:has(.frexima-forum-page) .brand-topbar {
        display: flex !important;
    }

    .frexima-calendar-page .calendar-ops-main {
        position: relative;
        gap: 10px;
    }

    .frexima-calendar-page .calendar-ops-actions {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }

    .frexima-calendar-page .calendar-ops-actions > .btn-light:not(.calendar-bell-button),
    .frexima-calendar-page .calendar-view-tabs {
        display: none;
    }

    .frexima-calendar-page .calendar-new-button {
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .frexima-calendar-page .calendar-new-button .bi-plus-lg {
        font-size: 1.15rem;
    }

    .frexima-calendar-page .calendar-section-header {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #FFFFFF;
    }

    .frexima-calendar-page .schedule-board-scroll {
        max-height: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .frexima-calendar-page .schedule-header-row {
        display: none;
    }

    .frexima-calendar-page .schedule-body {
        grid-template-columns: 74px repeat(var(--schedule-columns), minmax(244px, 1fr));
    }

    .brand-body:has(.appointment-booking-workspace) .brand-main-content {
        padding-bottom: 168px !important;
    }

    .appointment-mobile-savebar {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }

    .frexima-client-page:not(.client-has-selection) .client-profile-area,
    .frexima-client-page.client-has-selection .client-list-panel {
        display: none;
    }

    .frexima-client-page.client-has-selection .client-profile-area {
        display: block;
    }

    .client-workspace-grid {
        display: block;
    }

    .client-action-grid,
    .client-overview-grid,
    .client-detail-grid,
    .client-crm-grid {
        grid-template-columns: 1fr;
    }

    .salon-messages-shell,
    .messages-shell {
        display: block;
        min-height: 0;
    }

    .salon-conversation-list,
    .salon-chat-panel {
        min-height: calc(100dvh - 170px);
    }

    .cw-shell,
    .forum-shell,
    .cw-post-grid,
    .forum-right-panel {
        grid-template-columns: 1fr;
    }

    .cw-sidebar,
    .forum-right-panel {
        display: none;
    }

    .forum-topic-headings {
        display: none;
    }

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

    .forum-topic-row {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 14px;
    }

    .payment-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .payment-workspace {
        grid-template-columns: 1fr;
    }

    .payment-table-wrap {
        display: none;
    }

    .payment-mobile-list {
        display: grid;
    }

    .payment-mobile-new {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 575.98px) {
    .payment-summary-grid,
    .client-filter-row {
        grid-template-columns: 1fr;
    }
}

/* Final P029 cascade: these rules intentionally follow legacy mobile dashboard rules. */
.frexima-premium-dashboard { overflow-x: clip; }
.frexima-premium-dashboard > .frexima-dashboard-hero { order: 1; }
.frexima-premium-dashboard > .dashboard-access-state { order: 2; }
.frexima-premium-dashboard > .premium-dashboard-workspace { order: 3; }
.frexima-premium-dashboard > .dashboard-status-strip { order: 4; }
.frexima-premium-dashboard > .frexima-action-grid { order: 5; }
.frexima-premium-dashboard > .dashboard-onboarding { order: 6; }
.frexima-premium-dashboard .premium-dashboard-workspace { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
.frexima-premium-dashboard .premium-my-day { grid-column: 1 / -1; }
.frexima-premium-dashboard .frexima-action-card { min-height: 82px; }
.frexima-premium-dashboard .dashboard-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #7c2d12; background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px; font-weight: 720; }
.frexima-premium-dashboard .dashboard-alert.danger { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.frexima-premium-dashboard .dashboard-alert i { font-size: 1.2rem; }
.frexima-premium-dashboard .dashboard-alert span { min-width: 0; flex: 1; }
.frexima-premium-dashboard .dashboard-alert a, .frexima-premium-dashboard .dashboard-alert button { min-height: 44px; padding: 8px 12px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; font-weight: 850; text-decoration: none; }
.frexima-premium-dashboard .premium-status-card.attention { border-color: #fdba74; box-shadow: 0 9px 24px rgba(194,65,12,.09); }
.frexima-premium-dashboard .premium-status-card.attention .premium-status-icon { color: #c2410c; background: #fff1e8; }
.frexima-premium-dashboard .invitation-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.frexima-premium-dashboard .invitation-preview > div { display: grid; gap: 5px; min-width: 0; }
.frexima-premium-dashboard .invitation-preview strong { color: var(--frexima-ink); font-size: 1.08rem; }
.frexima-premium-dashboard .invitation-preview span { color: var(--frexima-muted); font-size: .86rem; }
.frexima-premium-dashboard .invitation-preview a { min-height: 44px; padding: 10px 14px; color: #fff; background: var(--frexima-purple); border-radius: 8px; font-weight: 830; text-decoration: none; white-space: nowrap; }
.frexima-premium-dashboard .premium-empty > span { color: var(--frexima-muted); }
.frexima-premium-dashboard .premium-empty button { min-height: 44px; padding: 8px 13px; color: var(--frexima-purple); background: #fff; border: 1px solid #cfc3ff; border-radius: 8px; font-weight: 780; }

@media (max-width: 767.98px) {
    .frexima-premium-dashboard > .premium-dashboard-workspace { display: contents; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-my-day { order: 3; grid-column: auto; }
    .frexima-premium-dashboard > .dashboard-status-strip { order: 4; }
    .frexima-premium-dashboard > .frexima-action-grid { order: 5; }
    .frexima-premium-dashboard > .dashboard-onboarding { order: 6; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-invitations { order: 7; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-updates { order: 8; }
    .frexima-premium-dashboard .frexima-date-pill { display: flex; flex: 0 0 auto; min-height: 44px; gap: 7px; padding: 0 10px; font-size: .74rem; white-space: nowrap; }
    .frexima-premium-dashboard .dashboard-status-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-right: 0; padding: 0; overflow: visible; }
    .frexima-premium-dashboard .premium-status-card, .frexima-premium-dashboard .dashboard-skeleton.status-skeleton { min-width: 0; min-height: 88px; flex: none; }
    .frexima-premium-dashboard .premium-status-card { grid-template-columns: 36px minmax(0, 1fr) 12px; gap: 8px; padding: 11px; }
    .frexima-premium-dashboard .premium-status-icon { width: 36px; height: 36px; font-size: 1rem; }
    .frexima-premium-dashboard .premium-status-card strong { font-size: 1.16rem; }
    .frexima-premium-dashboard .premium-status-card em { font-size: .68rem; }
    .frexima-premium-dashboard .frexima-action-card { min-height: 76px; padding: 12px; }
    .frexima-premium-dashboard .frexima-action-card:first-child { grid-column: 1 / -1; }
    .frexima-premium-dashboard .premium-day-row { min-width: 0; }
    .frexima-premium-dashboard .premium-day-row strong, .frexima-premium-dashboard .premium-day-row small { white-space: normal; overflow-wrap: anywhere; }
    .frexima-premium-dashboard .invitation-preview { align-items: stretch; flex-direction: column; }
    .frexima-premium-dashboard .invitation-preview a { text-align: center; }
    .frexima-premium-dashboard .dashboard-alert { align-items: flex-start; flex-wrap: wrap; }
    .frexima-premium-dashboard .dashboard-alert span { flex-basis: calc(100% - 36px); }
    .frexima-premium-dashboard .dashboard-alert a, .frexima-premium-dashboard .dashboard-alert button { width: 100%; text-align: center; }
}

@media (max-width: 359.98px) {
    .frexima-premium-dashboard .frexima-dashboard-hero h1 { font-size: 1.45rem; }
    .frexima-premium-dashboard .frexima-date-pill { max-width: 130px; overflow: hidden; }
    .frexima-premium-dashboard .frexima-date-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .frexima-premium-dashboard > .premium-dashboard-workspace { display: contents; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-my-day { order: 3; grid-column: auto; }
    .frexima-premium-dashboard > .dashboard-status-strip { order: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .frexima-premium-dashboard > .frexima-action-grid { order: 5; }
    .frexima-premium-dashboard > .dashboard-onboarding { order: 6; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-invitations { order: 7; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-updates { order: 8; }
    .frexima-premium-dashboard .premium-status-card, .frexima-premium-dashboard .dashboard-skeleton.status-skeleton { min-width: 0; flex: none; }
}

/* P011 client CRM: compact filters, privacy-first cards, and predictable paging. */
.frexima-client-page .client-filter-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.frexima-client-page .client-filter-open,
.frexima-client-page .client-clear-filters {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    color: #4F20D8;
    background: #F5F1FF;
    border: 1px solid #E3D8FF;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
}

.frexima-client-page .client-filter-open span {
    display: inline-grid;
    min-width: 22px;
    min-height: 22px;
    place-items: center;
    color: #FFFFFF;
    background: #5B20F0;
    border-radius: 999px;
    font-size: .75rem;
}

.frexima-client-page .client-sort-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: #5E6A86;
    font-size: .76rem;
    font-weight: 800;
}

.frexima-client-page .client-sort-control select {
    min-height: 40px;
    padding-inline: 8px;
    border: 1px solid #E6EAF2;
    border-radius: 8px;
}

.frexima-client-page .client-filter-drawer {
    display: block;
    margin-top: 10px;
    padding: 12px;
    background: #FAFBFE;
    border: 1px solid #E7EAF2;
    border-radius: 10px;
}

.frexima-client-page .client-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.frexima-client-page .client-filter-drawer-head button {
    display: none;
    width: 40px;
    height: 40px;
    color: #53607D;
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.frexima-client-page .client-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: end;
}

.frexima-client-page .client-filter-row label {
    display: grid;
    gap: 5px;
    color: #5E6A86;
    font-size: .76rem;
    font-weight: 800;
}

.frexima-client-page .client-filter-row select,
.frexima-client-page .client-filter-row input {
    min-height: 40px;
    padding: 7px 9px;
    color: #172033;
    background: #FFFFFF;
    border: 1px solid #E1E6F0;
    border-radius: 8px;
}

.frexima-client-page .client-filter-drawer-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.frexima-client-page .client-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.frexima-client-page .client-filter-chip {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    color: #4F20D8;
    background: #F5F1FF;
    border: 1px solid #E3D8FF;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}

.frexima-client-page .client-list-skeleton {
    display: none;
    gap: 9px;
    margin-bottom: 10px;
}

.frexima-client-page .client-list-skeleton.is-loading {
    display: grid;
}

.frexima-client-page .client-list-skeleton span {
    display: block;
    height: 74px;
    background: linear-gradient(90deg, #F1F3F8 25%, #FAFBFD 50%, #F1F3F8 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: frexima-client-skeleton 1.25s ease-in-out infinite;
}

@keyframes frexima-client-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.frexima-client-page .client-pagination {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    color: #5E6A86;
    font-size: .8rem;
    font-weight: 750;
}

.frexima-client-page .client-pagination a {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #4F20D8;
    background: #F5F1FF;
    border: 1px solid #E3D8FF;
    border-radius: 8px;
}

.frexima-client-page .client-archive-form {
    grid-column: 1 / -1;
    justify-self: end;
}

.frexima-client-page .client-archive-button {
    min-height: 44px;
    padding: 7px 12px;
    color: #A33A48;
    background: #FFF4F5;
    border: 1px solid #F2C8CE;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .frexima-client-page .client-filter-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .frexima-client-page .client-sort-control {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .frexima-client-page .client-clear-filters {
        min-width: 44px;
        padding-inline: 8px;
        font-size: 0;
    }

    .frexima-client-page .client-clear-filters i {
        font-size: 1rem;
    }

    .frexima-client-page .client-filter-drawer {
        display: none;
        position: fixed;
        inset: auto 0 0;
        z-index: 1100;
        max-height: min(82dvh, 620px);
        margin: 0;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: #FFFFFF;
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 45px rgba(15, 23, 42, .2);
    }

    .frexima-client-page .client-filter-drawer.is-open {
        display: block;
    }

    .frexima-client-page .client-filter-drawer.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(15, 23, 42, .32);
    }

    .frexima-client-page .client-filter-drawer-head button {
        display: inline-grid;
        place-items: center;
    }

    .frexima-client-page .client-filter-row {
        grid-template-columns: 1fr;
    }

    .frexima-client-page .client-filter-drawer-actions .btn {
        min-height: 46px;
        flex: 1 1 0;
    }

    .frexima-client-page .client-list-card {
        min-height: 68px;
        grid-template-columns: 44px minmax(0, 1fr) auto 18px;
        gap: 9px;
        padding: 11px 9px;
    }

    .frexima-client-page .client-avatar {
        width: 44px;
        height: 44px;
    }
}

/* Calendar desktop shell must consume the space beside the fixed sidebar;
   width: 100% plus a left margin otherwise creates document-level overflow. */
@media (min-width: 992px) {
    .brand-body:has(.frexima-calendar-page) .brand-app-content {
        width: calc(100% - var(--sidebar-width));
        max-width: none;
        margin-left: var(--sidebar-width);
        box-sizing: border-box;
    }
}

@media (max-width: 767.98px) {
    .frexima-calendar-page .calendar-view-tabs {
        display: flex !important;
        max-width: calc(100vw - 28px);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .frexima-calendar-page .calendar-view-tabs::-webkit-scrollbar { display: none; }
}

/* P007/006 final precedence for the six-slot mobile shell. */
.frexima-mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.frexima-mobile-nav > a > span,
.frexima-mobile-nav > button > span,
.frexima-mobile-create > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .frexima-mobile-nav {
        min-height: calc(var(--fx-mobile-nav-height) + env(safe-area-inset-bottom));
        padding-bottom: calc(7px + env(safe-area-inset-bottom));
    }

    body:has(.frexima-mobile-create-sheet.show),
    body:has(.brand-mobile-more.show) {
        overflow: hidden;
    }
}

/* P007/006 final precedence for the six-slot mobile shell. */
.frexima-mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.frexima-mobile-nav > a > span,
.frexima-mobile-nav > button > span,
.frexima-mobile-create > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .frexima-mobile-nav {
        min-height: calc(var(--fx-mobile-nav-height) + env(safe-area-inset-bottom));
        padding-bottom: calc(7px + env(safe-area-inset-bottom));
    }

    body:has(.frexima-mobile-create-sheet.show),
    body:has(.brand-mobile-more.show) {
        overflow: hidden;
    }
}

.calendar-mobile-filter-button,
.calendar-mobile-filters-sheet {
    display: none;
}

@media (max-width: 767.98px) {
    .frexima-calendar-page .calendar-mobile-filter-button {
        display: inline-flex !important;
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .frexima-calendar-page .calendar-mobile-filter-button i {
        font-size: 1rem;
    }

    .frexima-calendar-page .calendar-bell-button {
        display: none !important;
    }

    .calendar-mobile-filters-sheet {
        display: block;
        height: auto !important;
        max-height: min(82dvh, 640px);
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: 20px 20px 0 0;
    }

    .calendar-mobile-filters-sheet .calendar-filter-form {
        display: grid;
        gap: 8px;
    }

    .calendar-mobile-filters-sheet .form-label {
        margin: 4px 0 0;
        color: var(--frexima-muted);
        font-size: 0.76rem;
        font-weight: 800;
    }

    .calendar-mobile-filters-sheet .btn {
        margin-top: 8px;
    }
}

/* Phase 11 responsive system: mobile-first compositions and a tablet icon rail. */
:root {
    --fx-mobile-nav-height: 78px;
    --fx-mobile-page-gutter: 16px;
}

html,
body {
    max-width: 100%;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .dashboard-body .sidebar.desktop-sidebar,
    .brand-body .brand-sidebar.desktop-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1040;
        display: flex !important;
        width: 76px;
        min-height: 100dvh;
        padding: 20px 10px 14px;
        overflow: hidden;
    }

    .dashboard-body .sidebar.desktop-sidebar .brand-wordmark,
    .brand-body .brand-sidebar.desktop-sidebar .brand-wordmark,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-link-main span,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link-main span,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-link-caret,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link-caret,
    .dashboard-body .sidebar.desktop-sidebar .nav-badge,
    .brand-body .brand-sidebar.desktop-sidebar .brand-nav-badge,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-profile-meta,
    .brand-body .brand-sidebar.desktop-sidebar .sidebar-profile-meta,
    .dashboard-body .sidebar.desktop-sidebar .sidebar-admin-actions,
    .brand-body .brand-sidebar.desktop-sidebar .brand-help-card {
        display: none;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-brand,
    .brand-body .brand-sidebar.desktop-sidebar .sidebar-brand {
        justify-content: center;
        padding-inline: 0;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-nav,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-nav {
        width: 100%;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-link,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link {
        justify-content: center;
        min-height: 50px;
        padding: 10px 0;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-link-main,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link-main {
        justify-content: center;
    }

    .dashboard-body .sidebar.desktop-sidebar .sidebar-link i,
    .brand-body .brand-sidebar.desktop-sidebar .brand-sidebar-link i {
        width: 24px;
        flex-basis: 24px;
        font-size: 1.12rem;
    }

    .dashboard-body .app-content,
    .brand-body .brand-app-content {
        margin-left: 76px !important;
    }

    .frexima-mobile-nav {
        display: none !important;
    }

    .dashboard-body .main-content,
    .brand-body .brand-main-content {
        width: 100%;
        margin: 0;
        padding: 20px 22px 28px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .topbar,
    .brand-topbar {
        padding-inline: 20px;
    }

    .topbar > [data-sidebar-toggle],
    .brand-topbar > [data-sidebar-toggle] {
        display: none !important;
    }

    .frexima-dashboard-workspace,
    .premium-dashboard-workspace,
    .payment-workspace,
    .messages-shell,
    .salon-messages-shell,
    .booking-stylist-layout,
    .booking-final-layout {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 767.98px) {
    :root {
        --fx-mobile-page-gutter: 16px;
    }

    body,
    .app-content,
    .brand-app-content {
        min-width: 0;
    }

    .app-content,
    .brand-app-content {
        margin-left: 0 !important;
    }

    .main-content,
    .brand-main-content {
        width: 100% !important;
        min-height: 0;
        margin: 0 !important;
        padding: 16px var(--fx-mobile-page-gutter) calc(var(--fx-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .topbar,
    .brand-topbar {
        min-height: 64px;
        padding: 10px var(--fx-mobile-page-gutter);
        gap: 8px;
    }

    .topbar-title,
    .brand-topbar-title {
        min-width: 0;
    }

    .topbar-title span,
    .topbar-title h1 {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        color: var(--text-muted);
        font-size: 0.66rem;
        font-weight: 800;
        line-height: 1.2;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .topbar-title h1 {
        margin-top: 2px;
        color: var(--text-dark);
        font-size: 0.96rem;
        font-weight: 850;
        text-transform: none;
    }

    .brand-topbar-title span {
        font-size: 0.66rem;
    }

    .brand-topbar-title h1 {
        margin-top: 2px;
        font-size: 0.96rem;
    }

    .topbar-actions,
    .brand-topbar-actions {
        gap: 7px;
    }

    .topbar-actions .icon-button,
    .brand-topbar-actions .icon-button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .user-chip,
    .brand-account-chip {
        width: 42px;
        max-width: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 3px;
        border-radius: 999px;
    }

    .user-chip .user-meta,
    .user-chip .user-chip-caret,
    .brand-account-chip .user-meta,
    .brand-account-chip .user-chip-caret {
        display: none;
    }

    .topbar-badge {
        top: -4px;
        right: -4px;
    }

    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
    }

    .content-panel,
    .card,
    .modal-content {
        max-width: 100%;
    }

    .page-heading,
    .dashboard-welcome,
    .payment-page-heading,
    .client-main-heading,
    .calendar-ops-main,
    .booking-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading .btn,
    .dashboard-welcome .btn,
    .payment-heading-actions .btn,
    .payment-heading-actions form,
    .client-main-heading .btn {
        width: 100%;
    }

    .frexima-mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: grid;
        min-height: var(--fx-mobile-nav-height);
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        border: 0;
        border-top: 1px solid var(--frexima-border);
        border-radius: 0;
        box-shadow: 0 -12px 32px rgba(7, 11, 31, 0.1);
    }

    .frexima-mobile-nav > a,
    .frexima-mobile-nav > button {
        min-height: 52px;
        font-size: 0.68rem;
    }

    .frexima-mobile-nav > a i,
    .frexima-mobile-nav > button i {
        font-size: 1.12rem;
    }

    .frexima-mobile-nav > button.active {
        color: var(--frexima-purple-dark);
        background: #F1ECFF;
    }

    .frexima-mobile-create > button {
        width: 52px;
        height: 52px;
    }

    .frexima-mobile-create-sheet {
        z-index: 1050;
        max-height: min(82dvh, 680px);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .frexima-mobile-create-menu {
        grid-template-columns: 1fr;
    }

    .brand-mobile-more {
        width: min(92vw, 390px);
    }

    /* Dashboard: greeting, actions, status strip, then My Day and updates. */
    .frexima-dashboard-page {
        gap: 16px;
    }

    .frexima-dashboard-hero {
        gap: 14px;
    }

    .frexima-dashboard-hero h1 {
        font-size: 1.62rem;
    }

    .frexima-dashboard-top-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        width: 100%;
        gap: 8px;
    }

    .frexima-search-pill {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }

    .frexima-date-pill,
    .frexima-help-pill {
        display: none;
    }

    .frexima-icon-pill {
        width: 44px;
        min-height: 44px;
    }

    .frexima-action-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .frexima-action-card,
    .frexima-action-card.purple,
    .frexima-action-card:not(:first-child) {
        grid-column: auto;
        min-height: 88px;
        padding: 14px;
    }

    .frexima-action-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 1.35rem;
    }

    .frexima-action-card strong {
        font-size: 0.98rem;
    }

    .frexima-action-card small {
        font-size: 0.78rem;
    }

    .frexima-status-grid {
        display: flex;
        margin: 0 -16px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .frexima-status-card {
        flex: 0 0 min(78vw, 260px);
        scroll-snap-align: start;
    }

    .frexima-dashboard-workspace,
    .premium-dashboard-workspace {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .frexima-dashboard-rail {
        gap: 14px;
    }

    .frexima-panel {
        padding: 16px;
    }

    .my-time-planner {
        margin-inline: -4px;
    }

    /* Calendar: one staff member, vertical day schedule, sticky date controls. */
    .brand-body:has(.frexima-calendar-page) .brand-topbar,
    .brand-body:has(.frexima-community-wall-page) .brand-topbar,
    .brand-body:has(.frexima-forum-page) .brand-topbar {
        display: flex !important;
    }

    .brand-body:has(.frexima-calendar-page) .brand-main-content {
        padding-top: 12px !important;
    }

    .frexima-calendar-page .fx-workspace-tabs,
    .frexima-calendar-page .fx-compact-tabs {
        margin-inline: 0;
    }

    .frexima-calendar-page .calendar-ops-main {
        position: relative;
        gap: 10px;
    }

    .frexima-calendar-page .calendar-title-block h2 {
        font-size: 1.2rem;
    }

    .frexima-calendar-page .calendar-nav-actions {
        width: 100%;
    }

    .frexima-calendar-page .calendar-nav-actions > .btn:first-child {
        display: none;
    }

    .frexima-calendar-page .calendar-date-jump {
        flex: 1 1 auto;
        width: 100%;
    }

    .frexima-calendar-page .calendar-date-display {
        flex: 1 1 auto;
        width: auto;
        min-height: 44px;
    }

    .frexima-calendar-page .calendar-ops-actions {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }

    .frexima-calendar-page .calendar-ops-actions > .btn-light:not(.calendar-bell-button),
    .frexima-calendar-page .calendar-view-tabs {
        display: none;
    }

    .frexima-calendar-page .calendar-new-button {
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .frexima-calendar-page .calendar-new-button .bi-plus-lg {
        font-size: 1.15rem;
    }

    .frexima-calendar-page .calendar-staff-row {
        overflow-x: auto;
    }

    .frexima-calendar-page .schedule-staff-selector {
        display: flex;
        min-width: max-content;
    }

    .frexima-calendar-page .calendar-main-panel {
        min-height: 0;
    }

    .frexima-calendar-page .calendar-section-header {
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 54px;
        padding: 12px;
        background: #FFFFFF;
    }

    .frexima-calendar-page .schedule-board-scroll {
        max-height: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .frexima-calendar-page .schedule-board {
        min-width: max(390px, calc(74px + var(--schedule-columns) * 244px));
    }

    .frexima-calendar-page .schedule-header-row {
        display: none;
    }

    .frexima-calendar-page .schedule-body {
        grid-template-columns: 74px repeat(var(--schedule-columns), minmax(244px, 1fr));
    }

    .frexima-calendar-page .schedule-time-axis,
    .frexima-calendar-page .schedule-time-corner {
        width: 74px;
    }

    /* Booking: step panels and a CTA above the global mobile nav. */
    .brand-body:has(.appointment-booking-workspace) .brand-main-content {
        padding-bottom: 168px !important;
    }

    .appointment-mobile-savebar {
        bottom: calc(var(--fx-mobile-nav-height) + env(safe-area-inset-bottom));
        min-height: 76px;
        padding-inline: 16px;
    }

    .appointment-mobile-savebar .appointment-primary-button {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Clients: separate list and profile screens on phones. */
    .frexima-client-page:not(.client-has-selection) .client-profile-area {
        display: none;
    }

    .frexima-client-page.client-has-selection .client-list-panel {
        display: none;
    }

    .frexima-client-page.client-has-selection .client-profile-area {
        display: block;
    }

    .client-workspace-grid {
        display: block;
    }

    .client-list-panel,
    .client-profile-area {
        min-width: 0;
    }

    .client-list-panel {
        border-radius: 14px;
    }

    .client-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .client-profile-hero {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .client-hero-avatar {
        width: 72px;
        height: 72px;
    }

    .client-action-grid,
    .client-overview-grid,
    .client-detail-grid,
    .client-crm-grid {
        grid-template-columns: 1fr;
    }

    .client-action-grid a,
    .client-action-grid button {
        min-height: 54px;
    }

    /* Messages: list screen or chat screen, with a visible composer. */
    .salon-messages-shell {
        display: block;
        min-height: 0;
    }

    .salon-conversation-list,
    .salon-chat-panel {
        min-height: calc(100dvh - 170px);
        border-radius: 14px;
    }

    .salon-composer-wrap {
        padding-bottom: 12px;
    }

    .messages-shell {
        display: block;
    }

    .messages-shell:not(.has-selected) .messages-detail-panel,
    .messages-shell.has-selected .messages-list-panel {
        display: none;
    }

    .messages-shell.has-selected .messages-detail-panel {
        display: grid;
    }

    .messages-mobile-back {
        display: inline-flex;
    }

    .messages-list-panel,
    .messages-detail-panel {
        min-height: 0;
    }

    .messages-list {
        max-height: none;
    }

    .message-detail-actions .btn,
    .message-detail-actions form,
    .message-detail-actions form .btn {
        width: 100%;
    }

    /* Community and forum: single-column feeds and compact topic cards. */
    .cw-shell,
    .forum-shell {
        grid-template-columns: 1fr;
    }

    .cw-post-grid,
    .forum-right-panel {
        grid-template-columns: 1fr;
    }

    .cw-sidebar,
    .forum-right-panel {
        display: none;
    }

    .cw-tabs,
    .forum-tabs,
    .fx-community-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .cw-tabs a,
    .forum-tabs a,
    .fx-community-tabs a {
        flex: 0 0 auto;
        min-height: 44px;
    }

    .forum-topic-headings {
        display: none;
    }

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

    .forum-topic-row {
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
        padding: 14px;
    }

    .forum-topic-main {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .forum-topic-thumb {
        width: 58px;
        height: 58px;
    }

    /* Payments: cards only; the desktop table never becomes a narrow table. */
    .payment-workspace {
        grid-template-columns: 1fr;
    }

    .payment-details-panel {
        position: static;
    }

    .payment-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .payment-table-wrap {
        display: none;
    }

    .payment-mobile-list {
        display: grid;
    }

    .payment-mobile-new {
        bottom: calc(var(--fx-mobile-nav-height) + env(safe-area-inset-bottom));
    }

    .payment-toolbar,
    .payment-heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-toolbar .form-control,
    .payment-toolbar .form-select,
    .payment-toolbar .btn,
    .payment-search,
    .payment-heading-actions form,
    .payment-heading-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .payment-summary-grid,
    .client-filter-row {
        grid-template-columns: 1fr;
    }

    .frexima-mobile-create-menu > a {
        min-height: 62px;
    }

    .booking-slot-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* Final Phase 3 dashboard layout precedence. */
@media (min-width: 992px) {
    .frexima-premium-dashboard .premium-dashboard-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr);
        gap: 20px;
        align-items: start;
    }

    .frexima-premium-dashboard .dashboard-status-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
        overflow: visible;
    }

    .frexima-premium-dashboard .premium-status-card {
        min-width: 0;
    }
}


/* Frexima client dashboard */
.dashboard-body:has(.frexima-client-dashboard) {
    --client-ink: #07082D;
    --client-muted: #4A516E;
    --client-line: #ECE8F7;
    --client-purple: #5B20F0;
    --client-purple-dark: #4010C9;
    --client-pink: #F4B9C9;
    --client-warm: #FFF8F2;
    background:
        radial-gradient(circle at 82% 4%, rgba(244, 185, 201, 0.22), transparent 34%),
        linear-gradient(135deg, #FAFBFF 0%, #FFFFFF 48%, #FFF9F6 100%);
}

.dashboard-body:has(.frexima-client-dashboard) .topbar,
.dashboard-body:has(.frexima-client-dashboard) .app-page-heading {
    display: none;
}

.dashboard-body:has(.frexima-client-dashboard) .main-content {
    max-width: none;
    padding: 38px 40px 32px;
}

.frexima-client-dashboard,
.frexima-client-dashboard * {
    letter-spacing: 0;
}

.frexima-client-dashboard {
    display: grid;
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    color: var(--client-ink);
}

.client-dashboard-top,
.client-top-actions,
.client-avatar-chip,
.client-card-actions,
.client-mini-heading,
.client-loyalty-head,
.client-section-title,
.client-feed-post header,
.client-feed-post footer,
.client-feed-action,
.client-banner-button,
.client-sticky-book,
.client-bottom-nav a {
    display: flex;
    align-items: center;
}

.client-dashboard-top {
    justify-content: space-between;
    gap: 22px;
}

.client-welcome h1 {
    margin: 0;
    color: var(--client-ink);
    font-size: clamp(1.6rem, 2.1vw, 2.35rem);
    font-weight: 940;
    line-height: 1.1;
}

.client-welcome p {
    margin: 8px 0 0;
    color: #151A42;
    font-size: 1rem;
    font-weight: 650;
}

.client-mobile-menu {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--client-ink);
    background: transparent;
    border: 0;
    font-size: 1.45rem;
}

.client-top-actions {
    justify-content: flex-end;
    gap: 18px;
}

.client-icon-button,
.client-avatar-chip,
.client-square-button {
    color: var(--client-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--client-line);
    box-shadow: 0 14px 34px rgba(42, 35, 89, 0.075);
}

.client-icon-button {
    position: relative;
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    font-size: 1.25rem;
}

.client-icon-button span {
    position: absolute;
    top: -6px;
    right: -2px;
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    color: #FFFFFF;
    background: var(--client-purple);
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.client-avatar-chip {
    gap: 12px;
    min-height: 56px;
    padding: 7px 14px 7px 7px;
    border-radius: 999px;
    font-weight: 860;
    flex: 0 0 auto;
    white-space: nowrap;
}

.client-avatar-chip strong {
    min-width: max-content;
    overflow-wrap: normal;
    word-break: keep-all;
}

.client-avatar-chip img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 999px;
}

.client-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, .85fr);
    gap: 24px;
}

.client-card,
.client-panel {
    min-width: 0;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--client-line);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(52, 41, 112, 0.075);
}

.client-card {
    min-height: 238px;
    padding: 24px;
}

.client-next-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 142px;
    grid-row: span 2;
    gap: 18px;
    align-items: start;
}

.client-next-card h2,
.client-offer-card h2,
.client-loyalty-card h2,
.client-section-title h2 {
    margin: 0;
    color: var(--client-ink);
    font-size: 1rem;
    font-weight: 930;
    line-height: 1.2;
}

.client-next-card h2,
.client-section-title a {
    color: var(--client-purple);
}

.client-next-card p,
.client-next-card h3,
.client-next-card span,
.client-offer-card p,
.client-loyalty-card p {
    margin: 0;
}

.client-next-card p {
    margin-top: 24px;
    color: #151A42;
    font-weight: 720;
}

.client-next-card strong {
    display: block;
    margin-top: 5px;
    font-size: 1.55rem;
    font-weight: 950;
}

.client-next-card h3 {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 930;
}

.client-next-card span {
    display: block;
    margin-top: 3px;
    color: #283050;
    font-size: 0.88rem;
    font-weight: 640;
}

.client-next-card em,
.client-upcoming article em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 14px;
    padding: 7px 11px;
    color: #16843F;
    background: #DDF6E2;
    border-radius: 8px;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 820;
}

.client-next-card > img {
    width: 142px;
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
}

.client-card-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: -4px;
}

.client-primary-button,
.client-dark-button,
.client-soft-button,
.client-mobile-summary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 900;
}

.client-primary-button,
.client-mobile-summary a:last-child {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--client-purple), var(--client-purple-dark));
    box-shadow: 0 12px 24px rgba(91, 32, 240, 0.24);
}

.client-square-button {
    display: inline-grid;
    width: 48px;
    height: 44px;
    place-items: center;
    color: var(--client-purple);
    border-radius: 8px;
    font-size: 1.15rem;
}

.client-offer-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFF9F5, #FFF0EC);
}

.client-mini-heading {
    gap: 9px;
}

.client-mini-heading i {
    color: #FF3B30;
    font-size: 1.45rem;
}

.client-offer-card p {
    max-width: 175px;
    margin-top: 20px;
    color: #111538;
    font-weight: 720;
    line-height: 1.55;
}

.client-offer-card span {
    display: inline-flex;
    margin-top: 16px;
    padding: 8px 17px;
    color: #FFFFFF;
    background: #090D31;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 900;
}

.client-offer-card img {
    position: absolute;
    right: 18px;
    bottom: 24px;
    width: 86px;
    height: 128px;
    object-fit: cover;
    border-radius: 8px;
}

.client-dark-button {
    position: absolute;
    bottom: 24px;
    left: 24px;
    min-width: 112px;
    color: #FFFFFF;
    background: #090D31;
}

.client-loyalty-card {
    position: relative;
    background: linear-gradient(135deg, #FFFDFC, #FFF5F2);
}

.client-loyalty-head {
    justify-content: space-between;
    gap: 12px;
}

.client-loyalty-head .bi-star-fill {
    color: #FFB000;
}

.client-loyalty-head > strong {
    font-size: 0.95rem;
    font-weight: 850;
}

.client-loyalty-card h3 {
    margin: 26px 0 0;
    font-size: 1.02rem;
    font-weight: 920;
}

.client-loyalty-card p {
    margin-top: 36px;
    color: #27304D;
    font-size: 0.92rem;
    font-weight: 680;
}

.client-progress {
    width: min(190px, 100%);
    height: 7px;
    overflow: hidden;
    background: #F5BBC7;
    border-radius: 999px;
}

.client-loyalty-card .client-progress {
    margin-top: 16px;
}

.client-progress span {
    display: block;
    width: 58%;
    height: 100%;
    background: linear-gradient(90deg, var(--client-purple), #7446FF);
    border-radius: inherit;
}

.client-gift {
    position: absolute;
    right: 28px;
    bottom: 92px;
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--client-purple);
    background: #FFFFFF;
    border: 1px solid #F3E6EA;
    border-radius: 8px;
    box-shadow: 0 14px 28px rgba(91, 32, 240, 0.09);
    font-size: 1.55rem;
}

.client-mobile-summary {
    display: none;
}

.client-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .92fr);
    gap: 24px;
    align-items: start;
}

.client-panel {
    padding: 24px;
}

.client-my-day-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.client-my-day-card {
    display: grid;
    flex: 0 0 84px;
    gap: 7px;
    color: var(--client-ink);
    text-align: center;
    text-decoration: none;
}

.client-my-day-avatar {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    padding: 3px;
    overflow: hidden;
    color: var(--client-purple);
    background: linear-gradient(135deg, var(--client-pink), var(--client-purple));
    border-radius: 999px;
}

.client-my-day-avatar img,
.client-my-day-avatar > span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: inherit;
}

.client-my-day-avatar > span {
    display: grid;
    place-items: center;
    background: #fff7f3;
    font-weight: 900;
}

.client-my-day-card strong,
.client-my-day-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-my-day-card strong { font-size: .78rem; }
.client-my-day-card small { color: var(--client-muted); font-size: .72rem; }

.client-section-title {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.client-section-title a {
    flex: 0 0 auto;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 900;
}

.client-journey-list {
    position: relative;
    display: grid;
    gap: 18px;
    padding-left: 24px;
}

.client-journey-list::before {
    position: absolute;
    top: 5px;
    bottom: 7px;
    left: 4px;
    width: 2px;
    content: "";
    background: #B8A2FF;
}

.client-journey-item {
    position: relative;
    min-width: 0;
}

.client-journey-item::before {
    position: absolute;
    top: 0;
    left: -25px;
    width: 11px;
    height: 11px;
    content: "";
    background: var(--client-purple);
    border-radius: 999px;
    box-shadow: 0 0 0 4px #F1ECFF;
}

.client-journey-item time,
.client-journey-item h3 {
    display: block;
}

.client-journey-item time {
    color: #27304D;
    font-size: 0.82rem;
    font-weight: 760;
}

.client-journey-item h3 {
    margin: 7px 0 10px;
    font-size: 0.92rem;
    font-weight: 920;
}

.client-journey-item div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.client-journey-item img {
    width: 100%;
    aspect-ratio: 1.18;
    object-fit: cover;
    border-radius: 8px;
}

.client-soft-button {
    width: 100%;
    margin-top: 18px;
    color: var(--client-purple);
    background: #F5F2FF;
}

.client-feed-post {
    display: grid;
    gap: 14px;
}

.client-feed-post header {
    gap: 12px;
}

.client-feed-post header > span {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #FFFFFF;
    background: #090D31;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 900;
}

.client-feed-post header div {
    min-width: 0;
}

.client-feed-post header strong,
.client-feed-post header small {
    display: block;
}

.client-feed-post header strong {
    font-size: 0.93rem;
    font-weight: 930;
}

.client-feed-post header small {
    color: #626A83;
    font-size: 0.78rem;
    font-weight: 680;
}

.client-feed-post header a {
    margin-left: auto;
    color: var(--client-ink);
}

.client-feed-post p {
    margin: 0;
    color: #111538;
    font-size: 0.93rem;
    font-weight: 650;
    line-height: 1.5;
}

.client-feed-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.client-feed-media img {
    width: 100%;
    aspect-ratio: 1.05;
    object-fit: cover;
    border-radius: 8px;
}

.client-feed-media img:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
    height: 100%;
}

.client-feed-media img:last-child {
    aspect-ratio: 2.2;
}

.client-feed-post footer {
    gap: 24px;
}

.client-feed-post form {
    margin: 0;
}

.client-feed-action {
    gap: 7px;
    padding: 0;
    color: #151A42;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-weight: 760;
}

.client-feed-action.active,
.client-feed-action:hover,
.client-feed-action:focus {
    color: var(--client-purple);
}

.client-upcoming {
    display: grid;
}

.client-appointment-list {
    display: grid;
    gap: 0;
}

.client-upcoming article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--client-line);
}

.client-upcoming article:first-child {
    padding-top: 0;
}

.client-upcoming article img {
    width: 58px;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
}

.client-upcoming article div {
    min-width: 0;
}

.client-upcoming article time,
.client-upcoming article strong,
.client-upcoming article span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-upcoming article time {
    color: #27304D;
    font-size: 0.82rem;
    font-weight: 740;
}

.client-upcoming article strong {
    margin-top: 7px;
    font-size: 0.92rem;
    font-weight: 930;
}

.client-upcoming article span {
    margin-top: 5px;
    color: #27304D;
    font-size: 0.8rem;
    font-weight: 650;
}

.client-upcoming article em {
    margin: 0;
    white-space: nowrap;
}

.client-booking-banner {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 140px;
    overflow: hidden;
    padding: 0 54px 0 36px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #6A33F5 0%, #4819D7 100%);
    border-radius: 8px;
    box-shadow: 0 20px 42px rgba(91, 32, 240, 0.22);
}

.client-booking-banner img {
    align-self: end;
    width: 180px;
    max-height: 128px;
    object-fit: contain;
}

.client-booking-banner h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 940;
}

.client-booking-banner p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    font-weight: 670;
}

.client-banner-button {
    justify-content: center;
    gap: 12px;
    min-width: 250px;
    min-height: 58px;
    color: var(--client-purple);
    text-decoration: none;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 920;
}

.client-sticky-book,
.client-bottom-nav {
    display: none;
}

@media (min-width: 992px) {
    .dashboard-body:has(.frexima-client-dashboard) .app-content {
        margin-left: var(--sidebar-width);
    }
}

@media (max-width: 1320px) {
    .dashboard-body:has(.frexima-client-dashboard) .main-content {
        padding: 30px 26px;
    }

    .client-dashboard-grid,
    .client-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-next-card,
    .client-feed {
        grid-column: 1 / -1;
    }

    .client-next-card { grid-row: auto; }
}

@media (max-width: 991.98px) {
    .dashboard-body:has(.frexima-client-dashboard) .main-content {
        padding: 20px 16px 122px;
    }

    .client-dashboard-top {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
    }

    .client-mobile-menu {
        display: grid;
    }

    .client-welcome h1 {
        font-size: 1.45rem;
    }

    .client-welcome p {
        font-size: 0.95rem;
    }

    .client-avatar-chip strong,
    .client-avatar-chip i {
        display: none;
    }

    .client-avatar-chip {
        min-height: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .client-avatar-chip img {
        width: 42px;
        height: 42px;
    }

    .client-dashboard-grid,
    .client-content-grid {
        grid-template-columns: 1fr;
    }

    .client-offer-card,
    .client-loyalty-card {
        display: none;
    }

    .client-next-card,
    .client-feed {
        grid-column: auto;
    }

    .client-next-card { grid-row: auto; }

    .client-mobile-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .client-mobile-summary article {
        display: grid;
        gap: 8px;
        min-width: 0;
        min-height: 112px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid var(--client-line);
        border-radius: 8px;
    }

    .client-mobile-summary i {
        color: #FF3B30;
        font-size: 1.15rem;
    }

    .client-mobile-summary article:nth-child(2) i {
        color: #FFB000;
    }

    .client-mobile-summary article:nth-child(3) i {
        color: #D729A7;
    }

    .client-mobile-summary strong,
    .client-mobile-summary span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .client-mobile-summary strong {
        font-size: 0.78rem;
        font-weight: 920;
        line-height: 1.18;
    }

    .client-mobile-summary span {
        color: #202746;
        font-size: 0.78rem;
        font-weight: 720;
    }

    .client-mobile-summary a {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .client-mobile-summary .client-progress {
        width: 100%;
        margin-top: auto;
    }

    .client-booking-banner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 24px;
        text-align: left;
    }

    .client-booking-banner img {
        display: none;
    }

    .client-banner-button {
        min-width: 0;
        width: 100%;
    }

    .client-sticky-book {
        position: fixed;
        right: 16px;
        bottom: 82px;
        left: 16px;
        z-index: 1040;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        color: #FFFFFF;
        text-decoration: none;
        background: linear-gradient(135deg, var(--client-purple), var(--client-purple-dark));
        border-radius: 8px;
        box-shadow: 0 18px 36px rgba(91, 32, 240, 0.28);
        font-size: 1.02rem;
        font-weight: 920;
    }

    .client-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1039;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: 70px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid var(--client-line);
        box-shadow: 0 -14px 34px rgba(42, 35, 89, 0.12);
    }

    .client-bottom-nav a {
        position: relative;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        color: #141A3B;
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 790;
    }

    .client-bottom-nav a.active,
    .client-bottom-nav a:hover,
    .client-bottom-nav a:focus {
        color: var(--client-purple);
    }

    .client-bottom-nav i {
        font-size: 1.18rem;
    }

    .client-bottom-nav em {
        position: absolute;
        top: 4px;
        right: 23%;
        display: inline-grid;
        min-width: 18px;
        height: 18px;
        place-items: center;
        color: #FFFFFF;
        background: var(--client-purple);
        border-radius: 999px;
        font-size: 0.66rem;
        font-style: normal;
        font-weight: 900;
    }
}

@media (max-width: 575.98px) {
    .frexima-client-dashboard {
        gap: 18px;
    }

    .client-dashboard-top {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .client-mobile-menu {
        width: 34px;
    }

    .client-top-actions {
        gap: 9px;
    }

    .client-icon-button {
        width: 38px;
        height: 38px;
        font-size: 1.08rem;
    }

    .client-avatar-chip img {
        width: 38px;
        height: 38px;
    }

    .client-welcome h1 {
        font-size: 1.28rem;
    }

    .client-welcome p {
        margin-top: 4px;
        font-size: 0.86rem;
    }

    .client-card,
    .client-panel {
        padding: 16px;
    }

    .client-next-card {
        grid-template-columns: minmax(0, 1fr) 116px;
        gap: 14px;
    }

    .client-next-card > img {
        width: 116px;
        height: 134px;
    }

    .client-next-card p {
        margin-top: 18px;
        font-size: 0.9rem;
    }

    .client-next-card strong {
        font-size: 1.38rem;
    }

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

    .client-primary-button {
        min-width: 0;
        padding: 0 10px;
        font-size: 0.82rem;
    }

    .client-square-button {
        width: 100%;
    }

    .client-content-grid {
        gap: 16px;
    }

    .client-journey-item div {
        gap: 7px;
    }

    .client-feed-media {
        gap: 7px;
    }

    .client-upcoming article {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .client-upcoming article em {
        grid-column: 2;
        justify-self: start;
        margin-top: -4px;
    }

    .client-mobile-summary {
        gap: 8px;
    }

    .client-mobile-summary article {
        padding: 10px;
    }
}

/* Clients CRM layout: list and profile only. The add flow lives on client-invite.php. */
.frexima-client-page .client-workspace-grid {
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
}

.frexima-client-page .client-list-panel {
    top: 92px;
}

.frexima-client-page .client-list {
    display: grid;
    gap: 8px;
}

.frexima-client-page .client-filter-row {
    flex-wrap: wrap;
}

.frexima-client-page .client-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.frexima-client-page .client-filter-row select,
.frexima-client-page .client-tags-filter {
    flex: 1 1 130px;
    min-width: 120px;
}

.frexima-client-page .client-list-row {
    position: relative;
}

.frexima-client-page .client-list-row.active .client-list-card {
    border-color: rgba(91, 32, 240, 0.46);
    box-shadow: 0 10px 22px rgba(91, 32, 240, 0.1);
}

.frexima-client-page .client-list-card {
    grid-template-columns: 48px minmax(0, 1fr) auto 18px;
}

.frexima-client-page .client-list-meta {
    gap: 3px;
}

.frexima-client-page .client-list-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.frexima-client-page .client-list-badges .status-badge,
.frexima-client-page .client-no-show-badge {
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
}

.frexima-client-page .client-no-show-badge {
    color: #A33D21;
    background: #FFF0E9;
}

.frexima-client-page .client-tags-filter {
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid #E6EAF2;
    border-radius: 8px;
    color: #172033;
}

.frexima-client-page .client-mobile-back {
    display: none;
    align-items: center;
    gap: 7px;
    color: #4F20D8;
    text-decoration: none;
    font-weight: 800;
}

.frexima-client-page .client-edit-link {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    align-self: start;
    margin: 18px 18px 0 0;
    color: #4F20D8;
    background: #F4F0FF;
    border-radius: 10px;
}

.frexima-client-page .client-profile-hero {
    grid-template-columns: 120px minmax(0, 1fr) auto;
}

.frexima-client-page .client-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.frexima-client-page .client-tag-list {
    color: #4F20D8;
    font-size: 0.82rem;
    font-weight: 750;
}

.frexima-client-page .client-alert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9B4D19;
    font-size: 0.78rem;
    font-weight: 800;
}

.frexima-client-page .client-notes-card {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E7EAF2;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.045);
}

.frexima-client-page .client-notes-card textarea {
    background: #FFFFFF;
}

.frexima-client-page .client-crm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.frexima-client-page .client-summary-card {
    scroll-margin-top: 108px;
}

.frexima-client-page .client-summary-value {
    margin: 0 0 4px;
    color: #111827;
    font-size: 1.5rem;
    font-weight: 900;
}

.frexima-client-page .client-facts-card {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid #E5E9F1;
    border-radius: 8px;
}

.frexima-client-page .client-facts-card div {
    display: grid;
    gap: 4px;
}

.frexima-client-page .client-facts-card span {
    color: #64708F;
    font-size: 0.78rem;
    font-weight: 760;
}

.frexima-client-page .client-facts-card strong {
    color: #111827;
    font-size: 0.9rem;
}

.quick-client-details-card h2 small {
    color: #64708F;
    font-size: 0.78rem;
    font-weight: 700;
}

.client-import-form {
    display: grid;
    max-width: 620px;
    gap: 10px;
}

.client-import-form label {
    color: #34405D;
    font-weight: 800;
}

.client-import-form small {
    color: #64708F;
}

.client-import-form .btn {
    justify-self: start;
    margin-top: 8px;
}

.quick-details-grid,
.quick-details-textareas {
    display: grid;
    gap: 12px;
}

.quick-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-details-textareas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.quick-details-grid label,
.quick-details-textareas label {
    display: grid;
    gap: 6px;
    color: #4B5563;
    font-size: 0.8rem;
    font-weight: 750;
}

.quick-details-grid input,
.quick-details-grid select,
.quick-details-textareas textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #E5E9F1;
    border-radius: 8px;
    background: #FFFFFF;
}

@media (max-width: 575.98px) {
    .quick-details-grid,
    .quick-details-textareas {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .frexima-client-page .client-workspace-grid {
        grid-template-columns: 1fr;
    }

    .frexima-client-page:not(.client-has-selection) .client-profile-area {
        display: none;
    }

    .frexima-client-page.client-has-selection .client-list-panel {
        display: none;
    }

    .frexima-client-page .client-list-panel,
    .frexima-client-page .client-profile-area {
        position: static;
    }

    .frexima-client-page .client-mobile-back {
        display: inline-flex;
        margin-bottom: 4px;
    }

    .frexima-client-page .client-profile-hero {
        grid-template-columns: 82px minmax(0, 1fr) auto;
    }
}

@media (max-width: 575.98px) {
    .frexima-client-page .client-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frexima-client-page .client-profile-hero {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .frexima-client-page .client-edit-link {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin: 0;
    }

    .frexima-client-page .client-crm-grid {
        grid-template-columns: 1fr;
    }

    .frexima-client-page .client-facts-card {
        grid-template-columns: 1fr 1fr;
    }

    .frexima-client-page .client-list-card {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
    }

    .frexima-client-page .client-list-badges {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

/* Frexima daily command dashboard */
.frexima-search-pill {
    display: flex;
    align-items: center;
    min-width: min(420px, 100%);
    min-height: 54px;
    gap: 12px;
    padding: 0 18px;
    color: #5E667C;
    background: #FFFFFF;
    border: 1px solid var(--frexima-line);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.055);
    font-weight: 720;
}

.frexima-search-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frexima-search-pill i {
    color: #0F68F2;
}

.frexima-search-pill kbd {
    margin-left: auto;
    color: #4B5563;
    background: #F3F5F9;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    box-shadow: none;
    font-size: 0.74rem;
    font-weight: 850;
}

.frexima-voice-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 178px;
    padding: 30px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #5B20F0 0%, #3C05C8 100%);
    border-radius: 8px;
    box-shadow: 0 24px 50px rgba(91, 32, 240, 0.22);
}

.frexima-voice-copy {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.frexima-voice-icon {
    display: inline-grid;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    place-items: center;
    color: #5B20F0;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 2rem;
}

.frexima-voice-card h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: 1.72rem;
    font-weight: 930;
}

.frexima-voice-card p,
.frexima-voice-card blockquote {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 650;
}

.frexima-voice-card blockquote {
    padding: 0;
    border: 0;
    font-size: 0.98rem;
}

.frexima-voice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    gap: 10px;
    padding: 0 24px;
    color: #2F0CA8;
    background: #FFFFFF;
    border: 0;
    border-radius: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.frexima-voice-card.compact {
    min-height: 0;
    padding: 20px;
    box-shadow: 0 16px 32px rgba(91, 32, 240, 0.16);
}

.frexima-voice-card.compact .frexima-voice-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    font-size: 1.35rem;
}

.frexima-voice-card.compact h2 {
    font-size: 1.08rem;
}

.frexima-voice-card.compact p {
    font-size: 0.9rem;
}

.frexima-voice-card.compact .frexima-voice-button {
    min-height: 44px;
    padding: 0 16px;
}

.frexima-dashboard-workspace {
    display: grid;
    grid-template-columns: minmax(520px, 1.42fr) minmax(340px, 0.82fr);
    gap: 22px;
    align-items: start;
}

.frexima-dashboard-rail {
    display: grid;
    gap: 18px;
}

.frexima-panel-heading.compact {
    margin-bottom: 18px;
}

.frexima-timeline-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.frexima-timeline-main {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.frexima-timeline-main:hover,
.frexima-timeline-main:focus {
    color: inherit;
}

.frexima-timeline-main > img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 999px;
}

.frexima-timeline-copy span {
    color: #667085;
    font-size: 0.86rem;
    font-weight: 720;
}

.frexima-processing-chip {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    color: #23473A;
    background: #EAF8EF;
    border: 1px solid #CBECD8;
    border-radius: 8px;
    font-weight: 820;
}

.frexima-timeline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.frexima-timeline-actions a {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #27324A;
    background: #F6F8FC;
    border: 1px solid #E7EBF5;
    border-radius: 8px;
    text-decoration: none;
}

.frexima-timeline-actions a:hover,
.frexima-timeline-actions a:focus {
    color: #FFFFFF;
    background: #0F68F2;
    border-color: #0F68F2;
}

.frexima-ai-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    color: #25304A;
    background: #F5FBF8;
    border: 1px solid #D7EFE3;
    border-radius: 8px;
    font-weight: 730;
}

.frexima-ai-suggestion i {
    color: #0A7C5A;
}

.frexima-ai-suggestion a {
    margin-left: auto;
    color: #0A7C5A;
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
}

.frexima-progress-track {
    height: 12px;
    overflow: hidden;
    background: #EEF1F6;
    border-radius: 999px;
}

.frexima-progress-track span {
    display: block;
    width: var(--frexima-progress);
    height: 100%;
    background: linear-gradient(90deg, #0A7C5A, #20B486);
    border-radius: inherit;
}

.frexima-progress-panel p {
    margin: 12px 0 0;
    color: #4C5870;
    font-weight: 720;
}

.frexima-micro-stats,
.frexima-finance-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.frexima-micro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frexima-micro-stats span,
.frexima-finance-list span {
    display: grid;
    gap: 3px;
    padding: 14px;
    background: #F8FAFF;
    border: 1px solid #E7EBF5;
    border-radius: 8px;
}

.frexima-micro-stats small,
.frexima-finance-list small {
    color: #68738A;
    font-size: 0.78rem;
    font-weight: 780;
}

.frexima-micro-stats strong,
.frexima-finance-list strong {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 920;
}

.frexima-notification-list,
.frexima-toggle-list {
    display: grid;
    gap: 10px;
}

.frexima-notification-list a,
.frexima-quiet-note {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #27324A;
    text-decoration: none;
    font-weight: 740;
}

.frexima-notification-list i,
.frexima-quiet-note i {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #0F68F2;
    background: #EEF5FF;
    border-radius: 8px;
}

.frexima-feed-panel .frexima-feed-feature {
    grid-template-columns: 1fr;
    gap: 14px;
}

.frexima-feed-panel .frexima-feed-feature img {
    aspect-ratio: 1.75;
}

.frexima-feed-panel .frexima-feed-row {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 88px;
}

.frexima-feed-panel .frexima-feed-row img {
    width: 76px;
    height: 72px;
}

.frexima-feed-panel .frexima-feed-row > span {
    display: none;
}

.frexima-client-moment,
.frexima-loyalty-card {
    display: grid;
    gap: 5px;
    padding: 15px;
    background: #FFF7FA;
    border: 1px solid #FAD5E4;
    border-radius: 8px;
}

.frexima-loyalty-card {
    margin-top: 10px;
    background: #FFFBEB;
    border-color: #F8E7B0;
}

.frexima-client-moment span,
.frexima-loyalty-card span,
.frexima-client-moment a,
.frexima-loyalty-card small,
.frexima-muted-copy {
    color: #667085;
    font-weight: 720;
}

.frexima-client-moment strong,
.frexima-loyalty-card strong {
    color: #111827;
    font-weight: 920;
}

.frexima-client-moment a {
    color: #C2265D;
    text-decoration: none;
    font-weight: 900;
}

.frexima-toggle-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #344054;
    font-weight: 740;
}

.frexima-toggle-list input {
    width: 18px;
    height: 18px;
    accent-color: #5B20F0;
}

.frexima-onboarding-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.52fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: center;
    padding: 24px 28px;
    background: #F8FAFF;
    border: 1px solid #E7EBF5;
    border-radius: 8px;
}

.frexima-onboarding-card h2 {
    margin: 4px 0 0;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 920;
}

.frexima-onboarding-card ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: onboarding;
}

.frexima-onboarding-card li {
    counter-increment: onboarding;
}

.frexima-onboarding-card a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    color: #27324A;
    text-decoration: none;
    font-weight: 800;
}

.frexima-onboarding-card a::before {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: #FFFFFF;
    content: counter(onboarding);
    background: #0F68F2;
    border-radius: 8px;
}

.frexima-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.frexima-floating-assistant {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 20;
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #FFFFFF;
    background: #080B25;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 18px 34px rgba(8, 11, 37, 0.24);
    font-size: 1.15rem;
    font-weight: 900;
}

.frexima-command-modal .modal-content,
.frexima-processing-modal {
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2);
}

.frexima-command-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #E7EBF5;
}

.frexima-command-search i {
    color: #0F68F2;
    font-size: 1.2rem;
}

.frexima-command-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #111827;
    font-size: 1.06rem;
    font-weight: 740;
}

.frexima-command-list {
    display: grid;
    gap: 4px;
    padding: 10px;
}

.frexima-command-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 12px;
    color: #27324A;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 800;
}

.frexima-command-list a:hover,
.frexima-command-list a:focus {
    color: #FFFFFF;
    background: #0F68F2;
}

.frexima-command-list a[hidden] {
    display: none;
}

@media (max-width: 1399.98px) {
    .frexima-dashboard-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .frexima-search-pill {
        flex: 1 1 100%;
    }

    .frexima-voice-card,
    .frexima-voice-copy,
    .frexima-onboarding-card {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .frexima-voice-card {
        padding: 22px 18px;
    }

    .frexima-timeline-main {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .frexima-timeline-main .frexima-status-pill {
        grid-column: 2;
    }

    .frexima-micro-stats,
    .frexima-onboarding-card ol {
        grid-template-columns: 1fr;
    }

    .frexima-floating-assistant {
        right: 18px;
        bottom: 18px;
    }
}

.frexima-client-page {
    color: var(--brand-ink);
}

.client-desktop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: -4px 0 18px;
    color: #0F172A;
    font-size: 0.92rem;
    font-weight: 760;
}

.client-back-link,
.client-today,
.client-card-heading,
.client-hero-name,
.client-filter-row,
.client-mobile-status,
.client-mobile-header,
.client-valid-field,
.client-activity-list article {
    display: flex;
    align-items: center;
}

.client-back-link {
    gap: 8px;
    color: #0F172A;
    text-decoration: none;
}

.client-today {
    gap: 10px;
}

.client-main-heading {
    margin-bottom: 18px;
}

.client-workspace-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    align-items: start;
}

.client-list-panel,
.client-profile-area,
.client-form-panel {
    min-width: 0;
}

.client-list-panel,
.client-mobile-phone-frame,
.client-ai-search-box,
.client-save-success,
.client-profile-hero,
.client-formula-card,
.client-photo-card,
.client-activity-card {
    background: #FFFFFF;
    border: 1px solid #E7EAF2;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.045);
}

.client-list-panel {
    position: sticky;
    top: 92px;
    padding: 18px;
}

.client-search-form {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.client-search-box {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #E1E6F0;
    border-radius: 8px;
}

.client-search-box input,
.client-filter-row select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-weight: 650;
}

.client-search-box button,
.client-filter-row a {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #64708F;
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.client-filter-row {
    gap: 8px;
}

.client-filter-row select {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid #E6EAF2;
    border-radius: 8px;
}

.client-social-list {
    display: grid;
    gap: 8px;
}

.client-swipe-row {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #F8FAFC;
}

.client-list-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 18px;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 13px 12px;
    color: #111827;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E8ECF4;
    border-radius: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.client-swipe-row.active .client-list-card,
.client-list-card:hover,
.client-list-card:focus {
    border-color: rgba(91, 32, 240, 0.36);
    box-shadow: 0 12px 24px rgba(91, 32, 240, 0.09);
}

.client-swipe-row.swipe-right .client-list-card {
    transform: translateX(92px);
}

.client-swipe-row.swipe-left .client-list-card {
    transform: translateX(-92px);
}

.client-swipe-actions {
    position: absolute;
    inset-block: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1px;
}

.client-swipe-actions.call {
    left: 0;
}

.client-swipe-actions.book {
    right: 0;
}

.client-swipe-actions a {
    display: inline-grid;
    width: 46px;
    height: 100%;
    place-items: center;
    color: #FFFFFF;
    text-decoration: none;
    background: #10A864;
}

.client-swipe-actions.book a {
    width: 92px;
    background: #5B20F0;
}

.client-avatar,
.client-hero-avatar {
    display: inline-grid;
    place-items: center;
    color: #4F20D8;
    background: #EFE8FF;
    border: 1px solid #E0D3FF;
    border-radius: 999px;
    font-weight: 900;
}

img.client-avatar,
img.client-hero-avatar {
    display: block;
    object-fit: cover;
}

.client-avatar {
    width: 48px;
    height: 48px;
}

.client-list-meta {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.client-list-meta strong,
.client-list-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-list-meta small {
    color: #5E6A86;
    font-size: 0.82rem;
    font-weight: 650;
}

.client-vip-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 8px;
    color: #4F20D8;
    background: #EFE8FF;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 860;
}

.client-view-all {
    display: grid;
    min-height: 46px;
    margin-top: 12px;
    place-items: center;
    color: #4F20D8;
    text-decoration: none;
    font-weight: 850;
}

.client-profile-area {
    display: grid;
    gap: 18px;
}

.client-profile-hero {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 28px;
}

.client-hero-avatar {
    width: 120px;
    height: 120px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #F098C1, #7C3AED);
    border: 0;
    font-size: 2rem;
}

.client-hero-name {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.client-hero-name h3 {
    margin: 0;
    color: #0F172A;
    font-size: 1.35rem;
    font-weight: 930;
}

.client-contact-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #35415F;
    list-style: none;
    font-weight: 650;
}

.client-contact-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.client-contact-list a {
    color: #4F20D8;
    text-decoration: none;
    font-weight: 800;
}

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

.client-action-grid a,
.client-action-grid button {
    display: grid;
    min-height: 82px;
    place-items: center;
    gap: 8px;
    width: 100%;
    color: #121A31;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E5E9F1;
    border-radius: 8px;
    font-weight: 760;
}

.client-action-grid i {
    color: #5B20F0;
    font-size: 1.25rem;
}

.client-profile-tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    border-bottom: 1px solid #E4E8F1;
}

.client-profile-tabs a {
    flex: 0 0 auto;
    padding: 12px 0;
    color: #2E3753;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-weight: 760;
}

.client-profile-tabs a.active,
.client-profile-tabs a:hover,
.client-profile-tabs a:focus {
    color: #4F20D8;
    border-bottom-color: #5B20F0;
}

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

.client-stat-tile,
.client-appointment-card {
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid #E5E9F1;
    border-radius: 8px;
}

.client-stat-tile {
    display: grid;
    gap: 6px;
}

.client-stat-tile span,
.client-appointment-card span,
.client-card-heading small {
    color: #64708F;
    font-size: 0.82rem;
    font-weight: 760;
}

.client-stat-tile strong,
.client-appointment-card strong {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 900;
}

.client-stat-tile small,
.client-appointment-card small {
    color: #5E6A86;
    font-weight: 650;
}

.client-appointment-card {
    display: grid;
    grid-column: 1 / -1;
    gap: 9px;
    background: linear-gradient(135deg, #FCFAFF, #F4EFFF);
}

.client-appointment-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.client-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.9fr);
    gap: 18px;
}

.client-formula-card,
.client-photo-card,
.client-activity-card {
    padding: 20px;
}

.client-card-heading {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.client-card-heading strong {
    color: #111827;
    font-weight: 900;
}

.client-card-heading a {
    color: #4F20D8;
    text-decoration: none;
    font-weight: 800;
}

.client-formula-card textarea {
    background: #FFF8E8;
    border-color: #F4DFB4;
}

.client-autosave-status {
    display: block;
    margin-top: 8px;
    color: #64708F;
    font-size: 0.8rem;
    font-weight: 760;
}

.client-autosave-status[data-state="saved"] {
    color: #128456;
}

.client-autosave-status[data-state="saving"] {
    color: #8A5B12;
}

.client-autosave-status[data-state="error"] {
    color: #C0262D;
}

.client-note-stack {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.client-note-stack article {
    padding: 12px;
    background: #FAFBFD;
    border: 1px solid #E8ECF4;
    border-radius: 8px;
}

.client-note-stack p {
    margin: 0 0 6px;
}

.client-media-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
    gap: 8px;
    margin-bottom: 14px;
}

.client-photo-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.client-photo-strip img,
.client-photo-strip span,
.client-photo-strip a {
    display: grid;
    aspect-ratio: 0.72;
    width: 100%;
    place-items: center;
    object-fit: cover;
    color: #4F20D8;
    background: #F7F4FF;
    border: 1px solid #E3DAFF;
    border-radius: 8px;
}

.client-activity-list {
    display: grid;
    gap: 12px;
}

.client-activity-list article {
    gap: 12px;
}

.client-activity-list article > span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #5B20F0;
    background: #F0E8FF;
    border-radius: 8px;
}

.client-activity-list div {
    min-width: 0;
    flex: 1 1 auto;
}

.client-activity-list strong,
.client-activity-list small {
    display: block;
}

.client-activity-list p {
    margin: 6px 0 0;
    color: #4B5563;
    font-size: 0.9rem;
}

.client-mobile-phone-frame {
    position: sticky;
    top: 92px;
    max-width: 360px;
    margin-inline: auto;
    padding: 14px;
    border-color: #D7DCE8;
    border-radius: 24px;
}

.client-mobile-status {
    justify-content: space-between;
    padding: 2px 8px 12px;
    color: #111827;
    font-size: 0.78rem;
    font-weight: 900;
}

.client-mobile-header {
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 12px;
    color: #111827;
}

.client-mobile-header a {
    color: #111827;
}

.client-quick-form {
    position: relative;
    display: grid;
    gap: 8px;
    padding-bottom: 72px;
}

.client-quick-form label {
    margin: 8px 0 0;
    color: #64708F;
    font-size: 0.78rem;
    font-weight: 780;
}

.client-quick-form label span {
    color: #DB2777;
}

.client-valid-field {
    position: relative;
}

.client-valid-field input {
    padding-right: 40px;
}

.client-valid-field i {
    position: absolute;
    right: 12px;
    color: #0EA65F;
}

.client-more-fields-toggle {
    min-height: 34px;
    color: #4F20D8;
    background: transparent;
    border: 0;
    font-size: 0.82rem;
    font-weight: 850;
}

.client-optional-fields {
    display: none;
    gap: 8px;
}

.client-optional-fields.show {
    display: grid;
}

.client-floating-save {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, #6D35F3, #4F20D8);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 18px 34px rgba(79, 32, 216, 0.32);
}

.client-ai-search-box {
    margin-top: 14px;
    padding: 16px;
}

.client-save-success {
    position: relative;
    display: grid;
    min-height: 248px;
    place-items: center;
    overflow: hidden;
    padding: 28px;
    text-align: center;
}

.client-save-success p {
    max-width: 280px;
    margin: 0;
    color: #5E6A86;
}

.client-success-check {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    color: #FFFFFF;
    background: #12A765;
    border-radius: 999px;
    font-size: 2.5rem;
}

.client-confetti::before,
.client-confetti::after {
    position: absolute;
    inset: 24px;
    content: "";
    background-image:
        radial-gradient(circle, #EF4444 0 3px, transparent 4px),
        radial-gradient(circle, #22C55E 0 3px, transparent 4px),
        radial-gradient(circle, #5B20F0 0 3px, transparent 4px),
        radial-gradient(circle, #F59E0B 0 3px, transparent 4px);
    background-position: 12% 18%, 86% 22%, 24% 78%, 74% 72%;
    background-size: 120px 120px;
    animation: client-confetti-pop 1.6s ease both;
}

.client-confetti::after {
    inset: 48px 28px;
    transform: rotate(18deg);
    animation-delay: 0.12s;
}

.client-mini-results {
    display: grid;
    gap: 8px;
}

.client-mini-results a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #111827;
    text-decoration: none;
}

@keyframes client-confetti-pop {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(16px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (max-width: 1399.98px) {
    .client-workspace-grid {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }

    .client-form-panel {
        grid-column: 1 / -1;
    }

    .client-form-panel {
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(280px, 1fr);
        gap: 18px;
        align-items: start;
    }
}

@media (max-width: 991.98px) {
    .client-desktop-topbar {
        display: none;
    }

    .client-workspace-grid,
    .client-form-panel {
        grid-template-columns: 1fr;
    }

    .client-list-panel,
    .client-mobile-phone-frame {
        position: static;
    }

    .client-list-panel {
        order: 1;
    }

    .client-profile-area {
        order: 2;
    }

    .client-form-panel {
        order: 3;
    }

    .client-overview-grid,
    .client-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .client-appointment-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .client-main-heading {
        align-items: stretch;
    }

    .client-profile-hero {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
    }

    .client-hero-avatar {
        width: 82px;
        height: 82px;
    }

    .client-action-grid,
    .client-overview-grid,
    .client-detail-grid {
        grid-template-columns: 1fr;
    }

    .client-action-grid {
        gap: 10px;
    }

    .client-action-grid a,
    .client-action-grid button {
        min-height: 62px;
    }

    .client-photo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .client-media-upload {
        grid-template-columns: 1fr;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--body-bg);
    color: var(--text-dark);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

.text-muted {
    color: var(--text-muted) !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border-radius: 10px;
    font-weight: 700;
}

.btn-sm {
    min-height: 34px;
    gap: 6px;
}

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #4C1DBF;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #A98BFA;
    --bs-btn-disabled-border-color: #A98BFA;
    background-image: linear-gradient(135deg, #7C3AED 0%, #6D2FF2 52%, #5520D5 100%);
    box-shadow: 0 12px 24px rgba(109, 47, 242, 0.22);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: rgba(108, 47, 242, 0.32);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-hover-color: var(--primary-dark);
    --bs-btn-hover-bg: var(--primary-soft);
    --bs-btn-hover-border-color: rgba(108, 47, 242, 0.46);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
}

.btn-light {
    --bs-btn-color: var(--primary);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: rgba(108, 47, 242, 0.28);
    --bs-btn-hover-color: var(--primary-dark);
    --bs-btn-hover-bg: var(--primary-soft);
    --bs-btn-hover-border-color: rgba(108, 47, 242, 0.48);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.btn-light.text-danger {
    --bs-btn-border-color: rgba(220, 38, 38, 0.26);
    --bs-btn-hover-bg: rgba(220, 38, 38, 0.06);
    --bs-btn-hover-border-color: rgba(220, 38, 38, 0.36);
}

.form-control,
.form-select {
    min-height: 46px;
    border-color: var(--border);
    border-radius: 10px;
    color: var(--text-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.22rem rgba(108, 47, 242, 0.14);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(108, 47, 242, 0.14);
}

.form-label {
    color: var(--text-dark);
    font-weight: 700;
}

.auth-body {
    background:
        radial-gradient(circle at top left, rgba(108, 47, 242, 0.10), transparent 34rem),
        var(--body-bg);
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(100%, 440px);
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.auth-card:has(.register-choice) {
    width: min(100%, 720px);
}

.auth-brand,
.sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark);
    text-decoration: none;
}

.auth-brand {
    margin-bottom: 28px;
}

.auth-brand strong,
.sidebar-brand strong {
    display: block;
    line-height: 1.1;
}

.auth-brand small,
.sidebar-brand small {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.register-choice-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 12px;
    padding: 4px 10px;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.register-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.register-choice-card {
    display: grid;
    gap: 12px;
    min-height: 224px;
    padding: 20px;
    color: var(--text-dark);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.register-choice-card:hover,
.register-choice-card:focus {
    color: var(--text-dark);
    border-color: rgba(108, 47, 242, 0.42);
    box-shadow: 0 16px 34px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
}

.register-choice-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: 12px;
    font-size: 1.25rem;
}

.register-choice-card strong {
    display: block;
    font-size: 1.08rem;
}

.register-choice-card small {
    color: var(--text-muted);
    line-height: 1.5;
}

.register-choice-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--primary);
    font-weight: 800;
}

.brand-mark {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: transparent;
    background: transparent;
    border-radius: 0;
    font-size: 0;
    font-weight: 800;
    box-shadow: none;
}

.brand-mark::before,
.brand-mark::after,
.brand-mark > span {
    position: absolute;
    display: block;
    border-radius: 5px;
    background: linear-gradient(135deg, #8B5CF6 0%, var(--primary) 58%, var(--primary-dark) 100%);
    box-shadow: 0 8px 18px rgba(108, 47, 242, 0.20);
    content: "";
    transform: rotate(45deg);
}

.brand-mark::before {
    width: 18px;
    height: 18px;
}

.brand-mark::after {
    right: 4px;
    bottom: 5px;
    width: 10px;
    height: 10px;
    opacity: 0.72;
}

.brand-mark:has(> span)::before,
.brand-mark:has(> span)::after {
    display: none;
}

.brand-mark > span {
    width: 13px;
    height: 13px;
}

.brand-mark > span:nth-child(1) {
    top: 6px;
    left: 13px;
}

.brand-mark > span:nth-child(2) {
    top: 14px;
    left: 5px;
    opacity: 0.86;
}

.brand-mark > span:nth-child(3) {
    top: 14px;
    left: 21px;
    opacity: 0.74;
}

.brand-mark > span:nth-child(4) {
    top: 22px;
    left: 13px;
    opacity: 0.92;
}

.brand-wordmark strong {
    color: #0B1020;
    font-size: 1.04rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.brand-wordmark small {
    margin-top: 3px;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.28em;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-body {
    background: var(--body-bg);
}

.app-shell {
    min-height: 100vh;
}

.desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.sidebar {
    flex-direction: column;
    gap: 22px;
    min-height: 0;
    padding: 28px 20px 20px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 10px 0 34px rgba(16, 24, 40, 0.025);
}

.sidebar > .sidebar-brand {
    flex: 0 0 auto;
}

.sidebar-canvas {
    width: min(88vw, 320px);
    background: var(--surface);
}

.offcanvas-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
    min-height: 0;
}

.sidebar .sidebar-nav {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.offcanvas-body .sidebar-nav {
    flex: 1 1 auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 11px 13px;
    color: #334155;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.sidebar-link-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-link i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    color: var(--text-muted);
}

.sidebar-link:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.sidebar-link:hover i {
    color: var(--primary);
}

.sidebar-link.active {
    color: var(--primary-dark);
    background: linear-gradient(90deg, rgba(108, 47, 242, 0.16), rgba(108, 47, 242, 0.075));
    border-color: rgba(108, 47, 242, 0.14);
    box-shadow: none;
}

.sidebar-link.active i {
    color: var(--primary);
}

.nav-badge,
.topbar-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    color: var(--text-muted);
    background: #EEF2F7;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.nav-badge.has-count,
.topbar-badge.has-count {
    color: #FFFFFF;
    background: var(--primary);
    border-color: transparent;
}

.sidebar-link .nav-badge:not(.has-count):not(.nav-badge-new) {
    display: none;
}

.nav-badge-new {
    min-width: auto;
    height: 20px;
    padding-inline: 7px;
    color: #FFFFFF !important;
    background: var(--primary) !important;
    border-color: transparent !important;
    font-size: 0.62rem;
}

.sidebar-link.active .nav-badge {
    color: #FFFFFF;
    background: var(--primary);
    border-color: transparent;
}

.badge {
    border-radius: 999px;
    font-weight: 800;
}

.text-bg-primary {
    background-color: var(--primary) !important;
}

.text-bg-light {
    color: var(--primary-dark) !important;
    background-color: var(--primary-light) !important;
    border: 1px solid rgba(108, 47, 242, 0.16);
}

.status-badge.success {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.status-badge.warning {
    color: #A16207;
    background: rgba(245, 158, 11, 0.16);
}

.status-badge.warning-danger {
    color: #C2410C;
    background: #FFF7ED;
    border-color: #FDBA74;
}

.status-badge.danger {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.10);
}

.status-badge.primary {
    color: var(--primary);
    background: var(--primary-light);
}

.status-badge.muted {
    color: var(--text-muted);
    background: #EEF2F7;
}

.appointment-ai-panel {
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 8px;
}

.appointment-ai-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.appointment-ai-record.is-recording {
    color: #FFFFFF;
    background: var(--danger);
    border-color: var(--danger);
}

.appointment-ai-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

.appointment-ai-status.info {
    color: var(--primary-dark);
    background: var(--primary-light);
}

.appointment-ai-status.success {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.appointment-ai-status.warning {
    color: #A16207;
    background: rgba(245, 158, 11, 0.16);
}

.appointment-ai-status.danger {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.10);
}

.appointment-ai-confirm {
    padding: 14px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.appointment-ai-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.appointment-ai-confirm-grid div {
    min-width: 0;
}

.appointment-ai-confirm-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.appointment-ai-confirm-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.appointment-ai-errors {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 700;
}

.appointment-ai-matches {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.appointment-ai-match {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    color: var(--text-dark);
    text-align: left;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.appointment-ai-match:hover,
.appointment-ai-match:focus {
    border-color: rgba(108, 47, 242, 0.42);
    outline: none;
}

.appointment-ai-match span {
    font-weight: 800;
}

.appointment-ai-match small {
    color: var(--text-muted);
}

.calendar-control-panel {
    padding: 24px;
}

.calendar-toolbar,
.calendar-control-row,
.calendar-section-header,
.calendar-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.calendar-toolbar h3,
.calendar-section-header h3,
.calendar-mini-header h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.05rem;
    line-height: 1.25;
}

.calendar-nav-actions,
.calendar-date-jump {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-control-row {
    flex-wrap: wrap;
    margin-top: 18px;
}

.calendar-date-jump .form-control {
    width: 170px;
}

.calendar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.calendar-main-panel {
    overflow-x: auto;
}

.calendar-side-panel {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.calendar-section-header {
    margin-bottom: 18px;
}

.calendar-appointment {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    color: var(--text-dark);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    line-height: 1.25;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.calendar-appointment:hover,
.calendar-appointment:focus {
    color: var(--text-dark);
    border-color: rgba(108, 47, 242, 0.32);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.calendar-appointment.status-warning {
    border-left-color: #F59E0B;
}

.calendar-appointment.status-primary {
    border-left-color: var(--primary);
}

.calendar-appointment.status-success {
    border-left-color: var(--success);
}

.calendar-appointment.status-danger {
    border-left-color: var(--danger);
}

.calendar-appointment.status-muted {
    border-left-color: #94A3B8;
}

.calendar-appointment-time {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.calendar-appointment strong,
.calendar-appointment span,
.calendar-appointment small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.calendar-appointment strong {
    font-size: 0.92rem;
}

.calendar-appointment small {
    color: var(--text-muted);
    font-weight: 700;
}

.calendar-appointment .status-badge {
    width: max-content;
    margin-top: 2px;
}

.calendar-appointment.compact {
    gap: 3px;
    padding: 8px 9px;
}

.calendar-appointment.compact .status-badge {
    display: none;
}

.calendar-day-timeline {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.calendar-time-label,
.calendar-time-slot {
    border-bottom: 1px solid var(--border);
}

.calendar-time-label {
    padding: 12px 10px;
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.calendar-time-slot {
    display: grid;
    gap: 8px;
    min-height: 74px;
    padding: 10px;
    border-left: 1px solid var(--border);
}

.calendar-day-timeline > :nth-last-child(-n + 2) {
    border-bottom: 0;
}

.calendar-slot-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.calendar-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    min-width: 980px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.calendar-week-column {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    background: #FFFFFF;
    border-right: 1px solid var(--border);
}

.calendar-week-column:last-child {
    border-right: 0;
}

.calendar-week-column header {
    padding: 12px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}

.calendar-week-column header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-dark);
    text-decoration: none;
}

.calendar-week-column header span,
.calendar-week-column header small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.calendar-week-column header strong {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
}

.calendar-week-column.today header strong {
    color: #FFFFFF;
    background: var(--primary);
}

.calendar-week-column.selected {
    box-shadow: inset 0 0 0 2px rgba(108, 47, 242, 0.26);
}

.calendar-column-events {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 280px;
    padding: 10px;
}

.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(112px, 1fr));
    min-width: 820px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.calendar-month-weekday {
    padding: 10px;
    color: var(--text-muted);
    background: var(--surface-muted);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.calendar-month-weekday:nth-child(7) {
    border-right: 0;
}

.calendar-month-cell {
    min-height: 134px;
    padding: 10px;
    background: #FFFFFF;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.calendar-month-cell:nth-child(7n) {
    border-right: 0;
}

.calendar-month-cell.outside-month {
    background: #F8FAFC;
}

.calendar-month-cell.selected {
    box-shadow: inset 0 0 0 2px rgba(108, 47, 242, 0.24);
}

.calendar-month-cell header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-month-cell header a {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 800;
}

.calendar-month-cell.today header a {
    color: #FFFFFF;
    background: var(--primary);
}

.calendar-month-cell.outside-month header a {
    color: var(--text-muted);
}

.calendar-month-cell header span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.calendar-month-events {
    display: grid;
    gap: 6px;
}

.calendar-more-link {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.calendar-agenda-list,
.calendar-agenda-events {
    display: grid;
    gap: 12px;
}

.calendar-agenda-day {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.calendar-agenda-day:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.calendar-agenda-day header {
    display: grid;
    align-content: start;
    gap: 6px;
}

.calendar-agenda-day header span,
.calendar-agenda-day header small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.calendar-agenda-day header strong {
    color: var(--text-dark);
    font-size: 1rem;
}

.calendar-mini-panel,
.calendar-summary-panel {
    padding: 20px;
}

.calendar-mini-header {
    margin-bottom: 14px;
}

.calendar-mini-header h3 {
    font-size: 0.98rem;
    text-align: center;
}

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

.calendar-mini-weekday {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.calendar-mini-day {
    position: relative;
    display: inline-grid;
    min-width: 0;
    height: 34px;
    place-items: center;
    color: var(--text-dark);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
}

.calendar-mini-day:hover,
.calendar-mini-day:focus {
    color: var(--text-dark);
    background: var(--surface-muted);
    border-color: var(--border);
}

.calendar-mini-day.outside-month {
    color: var(--text-muted);
}

.calendar-mini-day.today {
    color: #FFFFFF;
    background: var(--primary);
}

.calendar-mini-day.selected {
    border-color: rgba(108, 47, 242, 0.42);
    box-shadow: inset 0 0 0 1px rgba(108, 47, 242, 0.22);
}

.calendar-mini-day small {
    position: absolute;
    right: 3px;
    bottom: 2px;
    color: inherit;
    font-size: 0.58rem;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    .calendar-shell {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767.98px) {
    .calendar-toolbar,
    .calendar-control-row,
    .calendar-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-nav-actions,
    .calendar-date-jump {
        width: 100%;
    }

    .calendar-date-jump .form-control,
    .calendar-date-jump .btn {
        width: 100%;
    }

    .calendar-view-tabs {
        width: 100%;
    }

    .calendar-view-tabs .nav-link {
        min-width: 72px;
        text-align: center;
    }

    .calendar-side-panel {
        grid-template-columns: 1fr;
    }

    .calendar-agenda-day {
        grid-template-columns: 1fr;
    }
}

.sidebar-profile {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 0;
    margin-top: auto;
    padding: 10px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.sidebar-mobile-account {
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.sidebar-mobile-account .sidebar-profile {
    margin-top: 0;
    padding: 8px 4px;
}

.sidebar-logout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--danger);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.16);
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
}

.sidebar-logout-link:hover,
.sidebar-logout-link:focus {
    color: #B91C1C;
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.28);
}

.sidebar-logout-link i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}

.avatar {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.avatar-image {
    display: block;
    object-fit: cover;
    padding: 0;
}

.creator-profile-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    background: #F8F5FF;
    border: 1px solid rgba(108, 47, 242, 0.12);
    border-radius: 18px;
}

.creator-profile-photo {
    display: block;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    object-fit: cover;
    border: 4px solid #FFFFFF;
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(32, 17, 66, 0.14);
}

.creator-profile-photo-empty {
    display: inline-grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    font-size: 1.5rem;
    font-weight: 850;
}

@media (max-width: 575.98px) {
    .creator-profile-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .creator-profile-photo {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }
}

.sidebar-profile .avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.sidebar-profile-meta,
.user-meta {
    min-width: 0;
}

.sidebar-profile-meta strong,
.sidebar-profile-meta small,
.user-meta strong,
.user-meta small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-profile-meta strong,
.user-meta strong {
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.2;
}

.sidebar-profile-meta small,
.user-meta small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.2;
}

.sidebar-creator-stack {
    display: grid;
    flex: 0 0 auto;
    gap: 14px;
    min-width: 0;
}

.sidebar-creator-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sidebar-store-card {
    overflow: hidden;
    color: #FFFFFF;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 38%),
        linear-gradient(135deg, #8B5CF6 0%, #6D2FF2 48%, #4C1DBF 100%);
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(108, 47, 242, 0.22);
}

.sidebar-creator-card-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.sidebar-creator-card-eyebrow span,
.sidebar-creator-card-title,
.sidebar-creator-card p {
    min-width: 0;
}

.sidebar-creator-card-eyebrow i {
    color: var(--primary);
}

.sidebar-creator-card-title {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.2;
}

.sidebar-level-card .sidebar-creator-card-title {
    font-size: 1rem;
}

.sidebar-creator-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.sidebar-level-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    background: #EEF2F7;
    border-radius: 999px;
}

.sidebar-level-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6, var(--primary));
    border-radius: inherit;
}

.sidebar-card-link,
.sidebar-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: fit-content;
    min-height: 28px;
    padding: 0;
    color: var(--primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.sidebar-card-link:hover,
.sidebar-card-button:hover,
.sidebar-card-button:focus {
    color: var(--primary-dark);
}

.sidebar-store-card .status-badge {
    width: fit-content;
    height: 20px;
    min-width: auto;
    padding-inline: 7px;
    font-size: 0.66rem;
}

.sidebar-store-card .sidebar-creator-card-eyebrow,
.sidebar-store-card .sidebar-creator-card-eyebrow i,
.sidebar-store-card .sidebar-creator-card-title,
.sidebar-store-card p {
    color: #FFFFFF;
}

.sidebar-store-card .sidebar-card-button {
    min-height: 36px;
    padding: 0 14px;
    color: var(--primary);
    background: #FFFFFF;
    border-radius: var(--radius);
}

.sidebar-store-card .sidebar-card-button:hover,
.sidebar-store-card .sidebar-card-button:focus {
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.92);
}

.sidebar-admin-actions {
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.sidebar-admin-actions h3 {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.sidebar-admin-action-list {
    display: grid;
    gap: 4px;
}

.sidebar-admin-action-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 9px 10px;
    color: #334155;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
}

.sidebar-admin-action-list a:hover,
.sidebar-admin-action-list a.active {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: rgba(108, 47, 242, 0.12);
}

.sidebar-admin-action-list i {
    width: 18px;
    flex: 0 0 18px;
    color: var(--primary);
    text-align: center;
}

.app-content {
    min-width: 0;
    min-height: 100vh;
    background: var(--body-bg);
}

@media (min-width: 992px) {
    .app-content {
        margin-left: var(--sidebar-width);
    }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 74px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
}

.topbar-title {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-title span,
.topbar-title h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.topbar-title span,
.section-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
}

.topbar-title h1 {
    margin: 0;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 1.12rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    margin-left: auto;
}

.icon-button {
    position: relative;
    display: inline-grid;
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    place-items: center;
    padding: 0;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.04);
}

.icon-button:hover,
.icon-button:focus {
    color: var(--primary);
    border-color: rgba(108, 47, 242, 0.32);
    background: var(--primary-light);
}

.notification-button {
    overflow: visible;
}

.topbar-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.68rem;
}

.topbar-badge:not(.has-count) {
    display: none;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
    min-height: 42px;
    padding: 4px 8px 4px 4px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

.user-chip:hover,
.user-chip:focus {
    border-color: rgba(108, 47, 242, 0.32);
}

.user-chip-caret {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dropdown-menu {
    padding: 8px;
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    border-radius: 6px;
    color: #334155;
    font-weight: 650;
}

.dropdown-item i {
    width: 18px;
    text-align: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary);
    background: var(--primary-light);
}

.dropdown-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 240px;
    padding: 8px 8px 10px;
    color: var(--text-dark);
}

.dropdown-header-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.dropdown-empty {
    max-width: 260px;
    padding: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.user-menu {
    min-width: 210px;
}

.notification-menu {
    width: min(92vw, 420px);
    min-width: min(320px, calc(100vw - 24px));
    max-height: min(78vh, 540px);
    overflow-y: auto;
}

.notification-list {
    display: grid;
    gap: 6px;
}

.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.notification-item.unread {
    background: #F8FAFC;
    border-color: rgba(108, 47, 242, 0.16);
}

.notification-item.read {
    grid-template-columns: 34px minmax(0, 1fr);
}

.notification-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--text-muted);
    background: #EEF2F7;
    border-radius: 999px;
}

.notification-icon.invitation,
.notification-icon.deal_update,
.notification-icon.offer,
.notification-icon.booking_created,
.notification-icon.booking_updated,
.notification-icon.appointment_reminder,
.notification-icon.system {
    color: var(--primary);
    background: var(--primary-light);
}

.notification-icon.booking_cancelled {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.10);
}

.notification-icon.payment {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.notification-icon.message,
.notification-icon.support {
    color: #0369A1;
    background: rgba(3, 105, 161, 0.10);
}

.notification-content {
    min-width: 0;
}

.notification-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.notification-title-row a,
.notification-title-row strong {
    overflow-wrap: anywhere;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

.notification-title-row a:hover {
    color: var(--primary);
}

.notification-content p {
    margin: 4px 0;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.38;
}

.notification-content small {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
}

.notification-status {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.notification-status.unread {
    color: var(--primary);
    background: var(--primary-light);
}

.notification-status.read {
    color: var(--text-muted);
    background: #EEF2F7;
}

.notification-read-form {
    align-self: start;
    margin: 0;
}

.notification-read-button {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--text-muted);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.notification-read-button:hover,
.notification-read-button:focus {
    color: var(--primary);
    border-color: rgba(108, 47, 242, 0.32);
    background: var(--primary-light);
}

.notification-mark-all {
    min-height: 32px;
    white-space: nowrap;
}

.notification-settings-panel {
    scroll-margin-top: 24px;
}

.notification-settings-form {
    margin-top: 18px;
}

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

.notification-settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(86px, auto));
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.notification-settings-row:last-child {
    border-bottom: 0;
}

.notification-settings-heading {
    padding-top: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.notification-settings-copy {
    min-width: 0;
}

.notification-settings-copy strong,
.notification-settings-copy span {
    display: block;
}

.notification-settings-copy strong {
    color: var(--text-dark);
    font-size: 0.94rem;
}

.notification-settings-copy span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.notification-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 86px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .notification-settings-row {
        grid-template-columns: minmax(0, 1fr) repeat(3, minmax(68px, auto));
        gap: 10px;
    }

    .notification-settings-heading {
        display: none;
    }

    .notification-toggle {
        min-width: 74px;
        font-size: 0.76rem;
    }
}

.main-content {
    width: 100%;
    min-width: 0;
    max-width: 1560px;
    margin: 0 auto;
    padding: 28px;
}

.app-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    margin-bottom: 22px;
}

.app-page-heading > div {
    min-width: 0;
}

.app-page-heading h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.64rem;
    font-weight: 900;
    line-height: 1.18;
}

.app-page-heading p {
    margin: 7px 0 0;
    color: #475569;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.45;
}

.app-page-heading + .page-actions {
    min-height: 42px;
    margin-top: -64px;
    margin-bottom: 24px;
    pointer-events: none;
}

.app-page-heading + .page-actions > * {
    pointer-events: auto;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 18px;
}

.page-actions > .d-flex {
    justify-content: flex-end;
}

.page-heading h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.45rem;
    line-height: 1.25;
}

.page-heading-subtitle {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.content-panel,
.dashboard-card,
.metric-card,
.campaign-card,
.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.content-panel {
    min-width: 0;
    padding: 28px;
}

.dashboard-card,
.metric-card,
.table-card {
    padding: 20px;
}

.metric-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    min-height: 128px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.metric-card:hover {
    border-color: rgba(108, 47, 242, 0.18);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.metric-card-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-card-value {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
}

.metric-card-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 1.08rem;
}

.dashboard-stat-grid .metric-card:nth-child(4n+1) .metric-card-icon,
.payments-stat-grid .metric-card:nth-child(4n+1) .metric-card-icon,
.profile-metrics-grid .metric-card:nth-child(4n+1) .metric-card-icon {
    color: var(--primary);
    background: rgba(108, 47, 242, 0.12);
}

.dashboard-stat-grid .metric-card:nth-child(4n+2) .metric-card-icon,
.payments-stat-grid .metric-card:nth-child(4n+2) .metric-card-icon,
.profile-metrics-grid .metric-card:nth-child(4n+2) .metric-card-icon {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.10);
}

.dashboard-stat-grid .metric-card:nth-child(4n+3) .metric-card-icon,
.payments-stat-grid .metric-card:nth-child(4n+3) .metric-card-icon,
.profile-metrics-grid .metric-card:nth-child(4n+3) .metric-card-icon {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.dashboard-stat-grid .metric-card:nth-child(4n+4) .metric-card-icon,
.payments-stat-grid .metric-card:nth-child(4n+4) .metric-card-icon,
.profile-metrics-grid .metric-card:nth-child(4n+4) .metric-card-icon {
    color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.14);
}

.empty-panel {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty-icon {
    display: inline-grid;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 1.45rem;
}

.empty-panel h3 {
    margin: 0 0 6px;
    color: var(--text-dark);
    font-size: 1.15rem;
}

.empty-panel p {
    margin: 0;
    color: var(--text-muted);
}

.creator-levels-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.creator-levels-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.creator-levels-summary h3,
.creator-levels-panel-heading h3,
.creator-level-card h4 {
    margin: 0;
    color: var(--text-dark);
}

.creator-levels-summary h3 {
    font-size: 1.7rem;
    line-height: 1.1;
}

.creator-levels-summary p,
.creator-level-card p {
    margin: 0;
    color: var(--text-muted);
}

.creator-levels-summary-progress {
    display: grid;
    gap: 10px;
}

.creator-levels-summary-progress strong {
    color: var(--text-dark);
    font-size: 0.92rem;
}

.creator-levels-progress-bar {
    width: 100%;
    height: 12px;
    overflow: hidden;
    background: #EEF2F7;
    border-radius: 999px;
}

.creator-levels-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent-blue));
    border-radius: inherit;
}

.creator-levels-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.creator-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.creator-level-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-level-card.current {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%);
    border-color: rgba(108, 47, 242, 0.34);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.08);
}

.creator-level-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.creator-level-card h4 {
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    line-height: 1.25;
}

.creator-level-score-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.creator-level-score-list div {
    min-width: 0;
    padding: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-level-score-list dt {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.creator-level-score-list dd {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 800;
}

.creator-store-application-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-store-application-status span:first-child {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.table {
    margin-bottom: 0;
    color: var(--text-dark);
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom-color: var(--border);
}

.table thead th {
    color: var(--text-muted);
    background: #F8FAFC;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.table tbody tr:hover {
    background: #FAFBFD;
}

.table-card {
    overflow: hidden;
    padding: 0;
}

.table-card .table-responsive {
    border-radius: var(--radius);
}

.min-w-0 {
    min-width: 0;
}

.content-approval-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 20px;
    align-items: start;
}

.content-approval-main {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.content-approval-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 2px;
}

.content-approval-tabs .btn {
    min-height: 42px;
    border-radius: 0;
    border-width: 0 0 2px;
    box-shadow: none;
}

.content-approval-tabs .btn-primary {
    color: var(--primary-dark);
    background: transparent;
    background-image: none;
    border-color: var(--primary);
}

.content-approval-tabs .btn-light {
    color: #475569;
    background: transparent;
    border-color: transparent;
}

.content-approval-table-card .table-responsive > .table {
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0 10px;
    padding: 0 12px 2px;
}

.content-approval-table-card tbody tr {
    position: relative;
    background: #FFFFFF;
    outline: 1px solid #E8E5F4;
    outline-offset: -1px;
}

.content-approval-table-card tbody tr > *:first-child {
    border-radius: 14px 0 0 14px;
}

.content-approval-table-card tbody tr > *:last-child {
    border-radius: 0 14px 14px 0;
}

.content-approval-table-card tbody tr.is-selected {
    outline: 2px solid rgba(108, 47, 242, 0.72);
    box-shadow: 0 12px 28px rgba(108, 47, 242, 0.10);
}

.content-approval-table-card tbody td {
    border-bottom: 0;
}

.content-approval-table-header,
.content-approval-pagination,
.content-approval-detail-heading,
.content-approval-side-heading,
.content-approval-platform,
.content-approval-review-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-approval-table-header,
.content-approval-pagination {
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.content-approval-table-header h3,
.content-approval-detail-heading h3,
.content-approval-side-heading h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.content-approval-show-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.content-approval-show-form .form-select {
    width: 86px;
    min-height: 36px;
}

.content-approval-platform i {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
}

.content-approval-platform strong,
.content-approval-platform small {
    display: block;
    line-height: 1.2;
}

.content-approval-platform small {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.content-approval-pagination {
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    border-bottom: 0;
}

.content-approval-pagination .page-link {
    color: var(--primary);
    border-color: var(--border);
    font-weight: 800;
}

.content-approval-pagination .page-item.active .page-link {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

.content-approval-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    min-width: 0;
    gap: 16px;
}

.content-approval-side-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 18px;
}

.content-approval-side-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--accent-teal);
    background: rgba(15, 118, 110, 0.10);
    border-radius: var(--radius);
}

.content-approval-side-card:nth-child(2) .content-approval-side-icon {
    color: var(--accent-amber);
    background: rgba(180, 83, 9, 0.12);
}

.content-approval-side-card:nth-child(3) .content-approval-side-icon {
    color: var(--primary);
    background: var(--primary-light);
}

.content-approval-summary {
    display: grid;
    gap: 10px;
    margin: 0;
}

.content-approval-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.content-approval-summary div:last-child {
    border-bottom: 0;
}

.content-approval-summary dt,
.content-approval-summary dd {
    margin: 0;
}

.content-approval-summary dt {
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.content-approval-summary dd {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 900;
}

.content-approval-tips {
    display: grid;
    gap: 11px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.content-approval-tips li {
    position: relative;
    padding-left: 24px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.content-approval-tips li::before {
    position: absolute;
    top: 0.2rem;
    left: 0;
    color: var(--success);
    font-family: "bootstrap-icons";
    font-weight: 400;
    content: "\f633";
}

.content-approval-detail {
    scroll-margin-top: 96px;
}

.content-approval-empty-detail {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 132px;
    color: var(--text-muted);
}

.content-approval-empty-detail i {
    display: inline-grid;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 1.25rem;
}

.content-approval-empty-detail h3,
.content-approval-empty-detail p {
    margin: 0;
}

.content-approval-empty-detail h3 {
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 850;
}

.content-approval-empty-detail p {
    margin-top: 4px;
    font-weight: 650;
}

.content-approval-detail-heading {
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.content-approval-detail-heading p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-approval-detail-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.content-approval-detail-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(280px, 0.95fr) minmax(260px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.content-approval-review-media {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.content-approval-review-media h3,
.content-approval-actions-card h4,
.content-approval-info-card h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 900;
}

.content-approval-preview {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #F1F5F9;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.content-approval-preview img,
.content-approval-preview video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-approval-preview video {
    background: #0F172A;
}

.content-approval-link-preview {
    display: grid;
    height: 100%;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    color: var(--text-dark);
    text-align: center;
    text-decoration: none;
}

.content-approval-link-preview i {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 1.35rem;
}

.content-approval-link-preview strong,
.content-approval-link-preview small {
    display: block;
    overflow-wrap: anywhere;
}

.content-approval-link-preview small {
    margin-top: 5px;
    color: var(--text-muted);
    font-weight: 700;
}

.content-approval-preview-placeholder {
    display: grid;
    height: 100%;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.content-approval-preview-placeholder i {
    color: var(--primary);
    font-size: 2.2rem;
}

.content-approval-preview-placeholder strong {
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 900;
}

.content-approval-detail-copy {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.content-approval-download {
    justify-content: flex-start;
    text-align: left;
}

.content-approval-download span,
.content-approval-download strong,
.content-approval-download small {
    display: block;
    min-width: 0;
}

.content-approval-download small {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.76rem;
    line-height: 1.35;
}

.content-approval-info-card,
.content-approval-actions-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.content-approval-info-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.content-approval-info-card dl div {
    display: grid;
    gap: 3px;
}

.content-approval-info-card dt,
.content-approval-info-card dd {
    margin: 0;
}

.content-approval-info-card dt {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.content-approval-info-card dd,
.content-approval-info-card p {
    margin: 0;
    overflow-wrap: anywhere;
    color: #334155;
    font-weight: 700;
    line-height: 1.5;
}

.content-approval-creator-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.content-approval-creator-card strong,
.content-approval-creator-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-approval-creator-card small {
    color: var(--text-muted);
    font-weight: 700;
}

.content-approval-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.content-copy-button.copied {
    color: #FFFFFF;
    background: var(--accent-teal);
    border-color: var(--accent-teal);
}

.content-approval-actions-card {
    align-self: start;
    background: #FFFFFF;
}

.content-approval-decision-card {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    color: var(--text-dark);
    text-align: left;
    border: 1px solid transparent;
    border-radius: 14px;
}

button.content-approval-decision-card,
.content-approval-decision-card button {
    cursor: pointer;
}

form.content-approval-decision-card {
    margin: 0;
}

form.content-approval-decision-card button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
}

.content-approval-decision-card strong,
.content-approval-decision-card small {
    display: block;
}

.content-approval-decision-card strong {
    font-weight: 900;
}

.content-approval-decision-card small {
    margin-top: 4px;
    color: #475569;
    font-weight: 700;
    line-height: 1.4;
}

.content-approval-decision-card i {
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.content-approval-decision-card.is-approve {
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.content-approval-decision-card.is-approve i {
    color: #047857;
}

.content-approval-decision-card.is-revision {
    background: #FFF7ED;
    border-color: #FED7AA;
}

.content-approval-decision-card.is-revision i {
    color: #C2410C;
}

.content-approval-decision-card.is-reject {
    background: #FEF2F2;
    border-color: #FECACA;
}

.content-approval-decision-card.is-reject i {
    color: #B91C1C;
}

.content-approval-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.content-approval-facts div {
    min-width: 0;
    padding: 13px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.content-approval-facts dt,
.content-approval-facts dd {
    margin: 0;
}

.content-approval-facts dt,
.content-approval-notes .section-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.content-approval-facts dd {
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 750;
}

.content-approval-notes {
    display: grid;
    gap: 14px;
}

.content-approval-notes p {
    margin: 6px 0 0;
    color: #334155;
    font-weight: 650;
    line-height: 1.55;
}

.content-approval-review-form {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.content-approval-review-actions {
    flex-wrap: wrap;
}

@media (max-width: 1199.98px) {
    .content-approval-layout {
        grid-template-columns: 1fr;
    }

    .content-approval-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-approval-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    }

    .content-approval-actions-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .content-approval-sidebar,
    .content-approval-detail-grid {
        grid-template-columns: 1fr;
    }

    .content-approval-preview {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767.98px) {
    .content-approval-table-header,
    .content-approval-pagination,
    .content-approval-detail-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .content-approval-show-form {
        align-self: flex-start;
    }

    .content-approval-tabs .btn,
    .content-approval-review-actions .btn {
        width: 100%;
    }

    .content-approval-facts {
        grid-template-columns: 1fr;
    }
}

.admin-wall-comment-text {
    max-width: 460px;
    color: var(--text-dark);
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    min-width: 720px;
}

.approval-action-label-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .approvals-table-responsive {
        overflow: visible;
        padding: 0 12px 12px;
    }

    .approvals-table-responsive > .approvals-table {
        min-width: 0;
        width: 100%;
    }

    .approvals-table thead {
        display: none;
    }

    .approvals-table tbody,
    .approvals-table tbody tr,
    .approvals-table tbody td {
        display: block;
        width: 100%;
    }

    .approvals-table tbody tr {
        overflow: hidden;
        margin: 0 0 12px;
        background: #FFFFFF;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
    }

    .approvals-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .approvals-table > :not(caption) > * > * {
        padding: 12px 14px;
        text-align: left !important;
        border-bottom: 1px solid var(--border);
    }

    .approvals-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 0.34fr) minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        overflow-wrap: anywhere;
    }

    .approvals-table tbody td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .approvals-table tbody td:first-child {
        padding-block: 15px;
        background: var(--primary-light);
    }

    .approvals-table tbody td:last-child {
        border-bottom: 0;
    }

    .approvals-table .user-meta,
    .approvals-table .user-meta strong,
    .approvals-table .user-meta small {
        display: block;
        min-width: 0;
    }

    .approvals-table .user-meta strong,
    .approvals-table .user-meta small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .approvals-table .form-control {
        min-width: 0;
        width: 100%;
    }

    .approvals-table .approvals-action-cell {
        display: block;
        padding: 14px;
        background: #F8FAFC;
    }

    .approvals-table .approvals-action-cell::before {
        display: block;
        margin-bottom: 9px;
    }

    .approvals-action-cell > form,
    .approvals-action-cell > .d-flex,
    .approvals-action-cell > .d-flex > form {
        width: 100%;
    }

    .approvals-action-cell > .d-flex {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .approvals-action-cell .btn {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    .approval-action-label-short {
        display: none;
    }

    .approval-action-label-mobile {
        display: inline;
    }

    .approvals-table .approvals-empty-row td {
        display: block;
        padding: 32px 16px !important;
        background: #FFFFFF;
        border: 0;
        text-align: center !important;
    }

    .approvals-table .approvals-empty-row td::before {
        display: none;
    }
}

.campaign-card {
    display: grid;
    position: relative;
    overflow: hidden;
    gap: 0;
    padding: 0;
    grid-template-rows: auto 1fr auto;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.campaign-card:hover {
    border-color: rgba(108, 47, 242, 0.32);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.campaign-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    height: auto;
    background: #E2E8F0;
    border-radius: 0;
}

.campaign-card-media img,
.campaign-card-media video,
.campaign-card-media .campaign-media-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-card-body {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.campaign-card-title {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.campaign-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.campaign-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border);
}

.campaign-filter-panel {
    padding: 20px;
}

.campaign-recommended-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 800;
}

.campaign-recommended-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.campaign-recommended-toggle .form-check-input {
    margin: 0;
}

.campaign-recommended-toggle:has(.form-check-input:checked) {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.32);
}

.campaign-search-input {
    position: relative;
}

.campaign-search-input i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.campaign-search-input .form-control {
    padding-left: 42px;
}

.campaign-platform-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campaign-platform-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    color: #334155;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 800;
    text-decoration: none;
}

.campaign-platform-tab:hover,
.campaign-platform-tab.active {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.32);
}

.campaign-results-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.campaign-discovery-card {
    grid-template-rows: auto 1fr auto;
}

.campaign-media-placeholder {
    display: grid;
    height: 100%;
    place-items: center;
    color: #475569;
    background:
        linear-gradient(135deg, rgba(108, 47, 242, 0.12), rgba(22, 163, 74, 0.10)),
        #F1F5F9;
    text-align: center;
}

.campaign-media-placeholder i {
    display: block;
    font-size: 1.8rem;
}

.campaign-media-placeholder span {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.campaign-media-overlay {
    position: absolute;
    inset: 12px 12px auto 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.campaign-featured-badge,
.campaign-bookmark-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12);
}

.campaign-featured-badge {
    gap: 6px;
    padding: 7px 10px;
    color: #FFFFFF;
    background: var(--primary);
    border-color: transparent;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.campaign-featured-badge i {
    color: #FFFFFF;
}

.campaign-bookmark-button {
    width: 38px;
    padding: 0;
}

.campaign-bookmark-button:hover,
.campaign-bookmark-button.is-bookmarked {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.32);
}

.campaign-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.campaign-brand-logo {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    object-fit: cover;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: var(--radius);
    font-size: 0.78rem;
    font-weight: 900;
}

.campaign-brand-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 800;
}

.campaign-brand-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-verified-icon {
    color: var(--success);
}

.campaign-category-pill,
.campaign-platform-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 8px;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.campaign-card-description {
    display: -webkit-box;
    min-height: 2.9em;
    margin: 0;
    overflow: hidden;
    color: #475569;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.campaign-platform-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campaign-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.campaign-facts > span {
    display: flex;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.campaign-facts i {
    flex: 0 0 18px;
    color: var(--primary);
}

.campaign-facts small,
.campaign-payment small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.campaign-facts strong {
    display: block;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.campaign-payment strong {
    display: block;
    color: var(--success);
    font-size: 1.08rem;
    line-height: 1.2;
}

.campaign-pagination {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.campaign-preferences-form {
    display: grid;
    gap: 16px;
}

.preference-section {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.preference-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preference-section-heading h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.preference-section-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
}

.preference-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.preference-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--text-dark);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 800;
}

.preference-check .form-check-input {
    margin: 0;
}

.preference-check span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.preference-check:has(.form-check-input:checked) {
    color: var(--primary);
    background: #FBFAFF;
    border-color: rgba(108, 47, 242, 0.30);
}

.preference-actions-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
}

.preference-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    cursor: pointer;
}

.preference-switch .form-check-input {
    width: 2.6em;
    height: 1.3em;
    flex: 0 0 auto;
    margin: 0;
}

.preference-switch strong,
.preference-switch small {
    display: block;
    line-height: 1.25;
}

.preference-switch strong {
    color: var(--text-dark);
    font-weight: 850;
}

.preference-switch small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.preference-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.progress-timeline {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
}

.timeline-step:not(:last-child)::before {
    position: absolute;
    top: 28px;
    bottom: -14px;
    left: 13px;
    width: 2px;
    content: "";
    background: #E1E5EE;
}

.timeline-marker {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--text-muted);
    background: #F3F4F6;
    border: 2px solid #D7DCE6;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.timeline-step.completed .timeline-marker {
    color: #FFFFFF;
    background: var(--success);
    border-color: var(--success);
}

.timeline-step.completed:not(:last-child)::before {
    background: rgba(22, 163, 74, 0.58);
}

.timeline-step.current .timeline-marker,
.timeline-step.active .timeline-marker {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 5px rgba(108, 47, 242, 0.12);
}

.timeline-step.current .timeline-content strong,
.timeline-step.active .timeline-content strong {
    color: var(--primary-dark);
}

.timeline-content {
    min-width: 0;
    padding-bottom: 4px;
}

.timeline-content strong {
    display: block;
    color: var(--text-dark);
    line-height: 1.3;
}

.timeline-content span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.profile-completion {
    --completion: 72%;
    display: inline-grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border-radius: 999px;
    background: conic-gradient(var(--primary) var(--completion), #E9EEF5 0);
}

.profile-completion-inner {
    display: inline-grid;
    width: 84px;
    height: 84px;
    place-items: center;
    color: var(--text-dark);
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--border);
}

.profile-completion-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.profile-completion-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-hero,
.onboarding-panel {
    overflow: hidden;
}

.profile-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

.profile-main-column,
.profile-side-column {
    display: grid;
    gap: 20px;
    min-width: 0;
}

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

.profile-side-section-header {
    margin-bottom: 14px;
}

.profile-side-column .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
}

.profile-side-column .social-account-card,
.profile-side-column .portfolio-card {
    box-shadow: none;
}

.profile-side-column .portfolio-media {
    aspect-ratio: 16 / 10;
}

.profile-empty-panel {
    min-height: 190px;
}

.profile-avatar-xl {
    display: inline-grid;
    width: 152px;
    height: 152px;
    flex: 0 0 152px;
    place-items: center;
    object-fit: cover;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(108, 47, 242, 0.18);
    border-radius: 999px;
    font-size: 3.5rem;
}

.profile-avatar-empty {
    border-style: dashed;
}

.display-name-placeholder,
.profile-name {
    color: var(--text-dark);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
}

.profile-headline {
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.profile-bio {
    max-width: 760px;
    color: #334155;
    line-height: 1.65;
}

.profile-meta,
.profile-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.profile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 700;
}

.profile-edit-form {
    display: grid;
    gap: 28px;
}

.profile-form-section {
    display: grid;
    gap: 14px;
}

.profile-form-section:not(:last-child) {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.profile-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.profile-check,
.social-edit-card,
.portfolio-upload-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #FFFFFF;
}

.profile-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
}

.profile-check .form-check-input {
    margin: 0;
}

.social-edit-card,
.portfolio-upload-box {
    height: 100%;
    padding: 16px;
}

.social-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 1rem;
}

.portfolio-upload-box {
    border-style: dashed;
    background: #FAFBFD;
}

.profile-completion-card {
    display: grid;
    gap: 4px;
}

.profile-completion-inner > span {
    display: grid;
    gap: 3px;
    text-align: center;
}

.profile-completion-breakdown {
    display: grid;
    gap: 12px;
}

.profile-creator-level-card {
    display: grid;
    gap: 14px;
}

.profile-creator-level-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.profile-creator-level-header h3 {
    margin: 2px 0 0;
    color: var(--text-dark);
    font-size: 1.25rem;
    line-height: 1.2;
}

.profile-creator-level-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
}

.profile-creator-level-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.profile-creator-level-meta strong {
    color: var(--text-dark);
}

.profile-progress {
    height: 8px;
    margin-top: 6px;
    background: #E9EEF5;
    border-radius: 999px;
}

.profile-progress .progress-bar {
    background: var(--primary);
}

.social-account-card {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 142px;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.min-w-0 {
    min-width: 0;
}

.portfolio-card {
    display: grid;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.portfolio-media {
    display: grid;
    aspect-ratio: 4 / 3;
    place-items: center;
    color: var(--text-muted);
    background: #E2E8F0;
}

.portfolio-media img,
.portfolio-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-media span {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: var(--primary);
    background: #FFFFFF;
    border-radius: var(--radius);
    font-size: 1.45rem;
}

.portfolio-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
}

.profile-detail-list {
    display: grid;
    gap: 12px;
    margin: 0;
}

.profile-detail-list div {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.profile-detail-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-detail-list dt {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-detail-list dd {
    margin: 3px 0 0;
    color: var(--text-dark);
    font-weight: 700;
}

.campaign-detail-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 22px;
    align-items: stretch;
    padding: 18px;
}

.campaign-detail-hero:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.campaign-detail-media {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    background: #E2E8F0;
    border-radius: var(--radius);
}

.campaign-detail-media img,
.campaign-detail-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-detail-main {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
    padding: 4px;
}

.campaign-detail-title {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.18;
}

.campaign-detail-lead {
    margin: 10px 0 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.55;
}

.campaign-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.campaign-detail-facts > span {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px 10px;
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.campaign-detail-facts i {
    grid-row: span 2;
    color: var(--primary);
}

.campaign-detail-facts small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.campaign-detail-facts strong {
    display: block;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.92rem;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.campaign-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.campaign-detail-section,
.campaign-detail-side {
    display: grid;
    gap: 14px;
}

.campaign-detail-section p,
.campaign-detail-side p {
    margin: 0;
    color: #475569;
    line-height: 1.58;
}

.campaign-detail-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.campaign-detail-section-heading i {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
}

.campaign-detail-section h3,
.campaign-detail-side h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.3;
}

.campaign-product-card {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.campaign-product-card > img,
.campaign-product-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
}

.campaign-product-placeholder {
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    font-size: 2.2rem;
}

.campaign-product-card h4 {
    margin: 0 0 6px;
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 850;
}

.campaign-product-card .campaign-product-quantity {
    margin-bottom: 8px;
    color: var(--primary);
    font-weight: 800;
}

.campaign-product-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-weight: 800;
    text-decoration: none;
}

.campaign-detail-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.campaign-detail-list li {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.campaign-detail-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.campaign-detail-list strong {
    color: var(--text-dark);
    line-height: 1.3;
}

.campaign-detail-list span {
    color: #475569;
    line-height: 1.5;
}

.campaign-detail-specs {
    display: grid;
    gap: 12px;
    margin: 0;
}

.campaign-detail-specs div {
    display: grid;
    grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.campaign-detail-specs div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.campaign-detail-specs dt {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.campaign-detail-specs dd {
    min-width: 0;
    margin: 0;
    color: var(--text-dark);
    font-weight: 750;
    line-height: 1.35;
}

.campaign-detail-application-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.campaign-detail-application-status small {
    color: var(--text-muted);
    font-weight: 800;
}

.invitation-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.invitation-brand strong,
.invitation-campaign-title {
    display: block;
    min-width: 0;
    color: var(--text-dark);
    font-weight: 800;
    line-height: 1.3;
}

.invitation-campaign-title {
    min-width: 220px;
}

.invitation-platforms {
    min-width: 170px;
}

.invitation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 270px;
}

.invitation-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.invitation-detail-grid span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.invitation-detail-grid small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.invitation-detail-grid strong {
    overflow: hidden;
    color: var(--text-dark);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invitation-message h3 {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 850;
}

.invitation-message p {
    margin: 0;
    color: #475569;
    line-height: 1.58;
}

.modal-content {
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.alert {
    border-radius: var(--radius);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
}

.alert-success {
    color: #166534;
    background: rgba(22, 163, 74, 0.12);
}

.alert-warning {
    color: #854D0E;
    background: rgba(245, 158, 11, 0.16);
}

.alert-danger {
    color: #991B1B;
    background: rgba(220, 38, 38, 0.12);
}

@media (max-width: 1199.98px) {
    .profile-page-layout {
        grid-template-columns: 1fr;
    }

    .profile-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-side-column .profile-completion-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .topbar {
        min-height: 64px;
        padding: 12px 16px;
    }

    .main-content {
        padding: 20px 16px;
    }

    .app-page-heading + .page-actions {
        min-height: 0;
        margin-top: 0;
        pointer-events: auto;
    }

    .campaign-card-media {
        height: 196px;
    }

    .profile-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-detail-hero {
        grid-template-columns: 1fr;
    }

    .campaign-detail-media {
        min-height: 300px;
    }
}

@media (max-width: 767.98px) {
    .profile-side-column {
        grid-template-columns: 1fr;
    }

    .creator-levels-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .campaign-product-card {
        grid-template-columns: 1fr;
    }

    .campaign-product-card > img,
    .campaign-product-placeholder {
        max-height: 260px;
    }

    .auth-card {
        padding: 24px;
    }

    .register-choice-grid {
        grid-template-columns: 1fr;
    }

    .register-choice-card {
        min-height: 0;
    }

    .topbar {
        gap: 8px;
        max-width: 100vw;
        padding-inline: 16px;
    }

    .topbar-title {
        max-width: calc(100vw - 150px);
    }

    .topbar-title span,
    .topbar-title h1 {
        max-width: 100%;
    }

    .topbar-actions {
        gap: 8px;
    }

    .topbar-user-dropdown {
        display: none;
    }

    .main-content {
        padding: 16px 12px;
    }

    .app-page-heading {
        margin-bottom: 16px;
    }

    .app-page-heading h2 {
        font-size: 1.42rem;
    }

    .app-page-heading p {
        font-size: 0.9rem;
    }

    .user-chip {
        width: 40px;
        max-width: 40px;
        min-height: 40px;
        justify-content: center;
        padding: 3px;
    }

    .user-chip .avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .user-chip .user-meta,
    .user-chip-caret {
        display: none;
    }

.content-panel,
.dashboard-card,
.metric-card {
        padding: 18px;
    }

    .dashboard-welcome .btn {
        max-width: 100%;
        white-space: normal;
    }

    .campaign-card-media {
        height: 180px;
    }

    .profile-side-column,
    .profile-metrics-grid {
        grid-template-columns: 1fr;
    }

    .payments-stat-grid .metric-card-value {
        font-size: 2rem;
    }

    .page-heading,
    .page-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .creator-levels-summary h3 {
        font-size: 1.38rem;
    }

    .creator-level-card-top,
    .creator-store-application-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .preference-actions-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .preference-form-actions,
    .preference-form-actions .btn {
        width: 100%;
    }

    .preference-check-grid {
        grid-template-columns: 1fr;
    }

    .campaign-detail-hero {
        padding: 14px;
    }

    .campaign-detail-title {
        font-size: 1.42rem;
    }

    .campaign-detail-facts {
        grid-template-columns: 1fr;
    }

    .campaign-detail-media {
        min-height: 220px;
    }

    .campaign-detail-specs div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .invitation-actions {
        justify-content: flex-start;
        min-width: 0;
    }

    .invitation-detail-grid {
        grid-template-columns: 1fr;
    }

    .profile-avatar-xl {
        width: 118px;
        height: 118px;
        flex-basis: 118px;
        font-size: 2.6rem;
    }

    .display-name-placeholder,
    .profile-name {
        font-size: 1.55rem;
    }

    .profile-check-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-card-body {
        align-items: stretch;
        flex-direction: column;
    }
}

.deal-card {
    display: grid;
    height: 100%;
    gap: 18px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.active-deals-list .deal-card {
    height: auto;
}

.deal-card:hover {
    border-color: rgba(108, 47, 242, 0.30);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.deal-card-header,
.deal-card-header-actions,
.deal-card-footer,
.deal-support-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.deal-card-header {
    justify-content: space-between;
}

.deal-card-header-actions {
    flex: 0 0 auto;
}

.deal-menu-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex-basis: 34px;
}

.deal-card-body {
    display: grid;
    gap: 16px;
}

.deal-title {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.06rem;
    font-weight: 850;
    line-height: 1.28;
}

.deal-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.deal-fact {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px 10px;
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-fact i {
    grid-row: span 3;
    color: var(--primary);
}

.deal-fact small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.deal-fact strong {
    display: block;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.92rem;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.deal-fact em {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.25;
}

.deal-deadline.warning {
    border-color: rgba(245, 158, 11, 0.38);
    background: rgba(245, 158, 11, 0.10);
}

.deal-deadline.warning i,
.deal-deadline.warning em {
    color: #A16207;
}

.deal-deadline.danger {
    border-color: rgba(220, 38, 38, 0.32);
    background: rgba(220, 38, 38, 0.08);
}

.deal-deadline.danger i,
.deal-deadline.danger em {
    color: var(--danger);
}

.deal-progress-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 2px 0 0;
    list-style: none;
}

.deal-progress-step {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.deal-progress-step:not(:last-child)::after {
    position: absolute;
    top: 15px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    content: "";
    background: #E1E5EE;
}

.deal-progress-marker {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--text-muted);
    background: #F3F4F6;
    border: 2px solid #D7DCE6;
    border-radius: 999px;
    font-size: 0.84rem;
}

.deal-progress-step.completed .deal-progress-marker {
    color: #FFFFFF;
    background: var(--success);
    border-color: var(--success);
}

.deal-progress-step.completed:not(:last-child)::after {
    background: rgba(22, 163, 74, 0.65);
}

.deal-progress-step.current .deal-progress-marker,
.deal-progress-step.active .deal-progress-marker {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 5px rgba(108, 47, 242, 0.12);
}

.deal-progress-step.pending .deal-progress-marker,
.deal-progress-step.future .deal-progress-marker {
    color: #94A3B8;
    background: #F8FAFC;
    border-color: #D8DEE9;
}

.deal-progress-step.current:not(:last-child)::after,
.deal-progress-step.active:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(108, 47, 242, 0.55), #E1E5EE);
}

.deal-progress-label {
    min-height: 2.2em;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.deal-progress-step.completed .deal-progress-label,
.deal-progress-step.current .deal-progress-label,
.deal-progress-step.active .deal-progress-label {
    color: var(--text-dark);
}

.deal-card-footer {
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.deal-card-primary-actions {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.deal-primary-action-btn {
    width: 100%;
    min-height: 58px;
    justify-content: center;
    white-space: normal;
}

.deal-shipment-note {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px 10px;
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-shipment-note i {
    grid-row: span 2;
    color: var(--primary);
}

.deal-shipment-note small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.deal-shipment-note strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.92rem;
    line-height: 1.3;
}

.deal-shipment-summary {
    display: grid;
    gap: 12px;
}

.deal-shipment-summary > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-shipment-summary small {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.deal-shipment-summary strong {
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.deal-shipment-summary span {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (min-width: 1200px) {
    .active-deals-list .deal-card {
        grid-template-columns: minmax(230px, 0.68fr) minmax(210px, 0.64fr) minmax(280px, 1fr) minmax(150px, 0.42fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 18px;
        padding: 20px;
    }

    .active-deals-list .deal-card-header,
    .active-deals-list .deal-card-body,
    .active-deals-list .deal-card-footer {
        min-width: 0;
    }

    .active-deals-list .deal-card-header {
        grid-row: 1 / span 2;
        grid-column: 1;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
    }

    .active-deals-list .deal-card-header-actions {
        margin-left: 54px;
    }

    .active-deals-list .deal-card-body {
        display: contents;
    }

    .active-deals-list .campaign-brand-name span {
        white-space: normal;
    }

    .active-deals-list .deal-card-body > div:first-child {
        grid-row: 1;
        grid-column: 2;
        align-self: end;
    }

    .active-deals-list .deal-fact-grid {
        grid-row: 2;
        grid-column: 2;
        align-self: start;
    }

    .active-deals-list .deal-card-primary-actions {
        grid-row: 3;
        grid-column: 2;
        align-self: start;
    }

    .active-deals-list .deal-progress-timeline {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: center;
    }

    .active-deals-list .deal-fact-grid {
        grid-template-columns: 1fr;
    }

    .active-deals-list .deal-card-footer {
        grid-row: 1 / span 3;
        grid-column: 4;
        align-self: center;
        justify-content: flex-end;
        padding-top: 0;
        border-top: 0;
    }

    .active-deals-list .deal-card-footer .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }

    .active-deals-list .deal-card-footer .ms-auto {
        margin-left: 0 !important;
    }
}

.deal-brief-body,
.deal-detail-section p {
    color: #475569;
    line-height: 1.6;
}

.deal-detail-section h3 {
    margin: 0 0 10px;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
}

.deal-deliverable-list {
    display: grid;
    gap: 12px;
}

.deal-deliverable-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-deliverable-item p {
    margin: 0;
}

.deal-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deal-media-preview {
    flex: 1 1 100%;
    width: 100%;
}

.deal-media-preview video {
    display: block;
    width: 100%;
    max-height: 360px;
    background: #0F172A;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.deal-file-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    max-width: 100%;
    padding: 5px 8px;
    color: #334155;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.deal-file-list a:hover {
    color: var(--primary);
    border-color: rgba(108, 47, 242, 0.30);
    background: var(--primary-light);
}

.deal-support-cta {
    justify-content: space-between;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.deal-support-cta h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.25;
}

.deal-detail-heading {
    align-items: center;
}

.deal-detail-hero {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.25fr);
    gap: 22px;
    align-items: start;
}

.deal-detail-brand,
.deal-detail-actions,
.deal-detail-brand-name,
.deal-detail-brief-intro,
.deal-detail-item-header,
.deal-detail-message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.deal-detail-brand {
    min-width: 0;
}

.deal-detail-brand-logo {
    display: inline-grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    object-fit: contain;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-brand-initials {
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 850;
}

.deal-detail-brand-name {
    min-width: 0;
    color: var(--text-dark);
    font-size: 1.02rem;
    font-weight: 850;
}

.deal-detail-brand p,
.deal-detail-hero-main h3,
.deal-detail-item h4,
.deal-detail-message p,
.deal-detail-comment-form {
    margin: 0;
}

.deal-detail-brand p {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.deal-detail-hero-main {
    display: grid;
    gap: 18px;
}

.deal-detail-hero-main h3 {
    margin-top: 10px;
    color: var(--text-dark);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.22;
}

.deal-detail-facts,
.deal-detail-mini-meta,
.deal-detail-side-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.deal-detail-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deal-detail-facts div,
.deal-detail-mini-meta div,
.deal-detail-side-list div {
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-facts dt,
.deal-detail-mini-meta dt,
.deal-detail-side-list dt {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.deal-detail-facts dd,
.deal-detail-mini-meta dd,
.deal-detail-side-list dd {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.deal-detail-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.deal-detail-actions form {
    margin: 0;
}

.deal-detail-timeline-panel {
    margin-top: 20px;
}

.deal-detail-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.deal-detail-section-heading h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.25;
}

.deal-detail-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deal-detail-timeline-step {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 10px;
    padding: 16px 12px;
    text-align: center;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-timeline-step:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 31px;
    left: calc(50% + 24px);
    width: calc(100% - 24px);
    height: 2px;
    content: "";
    background: #E1E5EE;
}

.deal-detail-timeline-marker {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--text-muted);
    background: #F3F4F6;
    border: 2px solid #D7DCE6;
    border-radius: 999px;
    font-size: 1rem;
}

.deal-detail-timeline-step strong {
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.2;
}

.deal-detail-timeline-step small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.25;
}

.deal-detail-timeline-step.completed .deal-detail-timeline-marker {
    color: #FFFFFF;
    background: var(--success);
    border-color: var(--success);
}

.deal-detail-timeline-step.completed:not(:last-child)::after {
    background: rgba(22, 163, 74, 0.58);
}

.deal-detail-timeline-step.current:not(:last-child)::after,
.deal-detail-timeline-step.active:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(108, 47, 242, 0.55), #E1E5EE);
}

.deal-detail-timeline-step.current,
.deal-detail-timeline-step.active {
    border-color: rgba(108, 47, 242, 0.26);
    background: #FBFAFF;
}

.deal-detail-timeline-step.current .deal-detail-timeline-marker,
.deal-detail-timeline-step.active .deal-detail-timeline-marker {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 6px rgba(108, 47, 242, 0.12);
}

.deal-detail-timeline-step.current strong,
.deal-detail-timeline-step.active strong {
    color: var(--primary-dark);
}

.deal-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    margin-top: 20px;
}

.deal-detail-main,
.deal-detail-side,
.deal-detail-item-list,
.deal-detail-message-list,
.deal-detail-history,
.deal-detail-revision-comments {
    display: grid;
    gap: 16px;
}

.deal-detail-section {
    min-width: 0;
}

.deal-detail-brief-intro {
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.deal-detail-brief-intro > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.deal-detail-brief-copy {
    padding: 14px;
    margin-bottom: 16px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-brief-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.deal-detail-brief-block {
    min-width: 0;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-brief-block-wide {
    grid-column: 1 / -1;
}

.deal-detail-brief-block h4,
.deal-detail-item h4 {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.3;
}

.deal-detail-brief-block ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.deal-detail-brief-block li,
.deal-detail-brief-block p,
.deal-detail-item p {
    color: #475569;
    line-height: 1.55;
}

.deal-detail-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px;
    color: var(--text-muted);
    text-align: center;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: var(--radius);
}

.deal-detail-empty i {
    color: var(--primary);
    font-size: 1.8rem;
}

.deal-detail-empty p {
    margin: 0;
    font-weight: 750;
}

.deal-detail-item {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-item-header {
    justify-content: space-between;
    align-items: flex-start;
}

.deal-detail-item-header > div {
    min-width: 0;
}

.deal-detail-item-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 750;
}

.deal-detail-mini-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deal-detail-revision-comments {
    gap: 10px;
}

.deal-detail-revision-comments > div {
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-revision-comments strong,
.deal-detail-revision-comments small {
    display: block;
}

.deal-detail-revision-comments small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.deal-detail-revision-comments a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    text-decoration: none;
}

.deal-detail-message-list {
    margin-bottom: 18px;
}

.deal-detail-message {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
}

.deal-detail-message-avatar {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 850;
}

.deal-detail-message > div:last-child {
    min-width: 0;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deal-detail-message.own > div:last-child {
    border-color: rgba(108, 47, 242, 0.24);
    background: #FBFAFF;
}

.deal-detail-message-meta {
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.deal-detail-message-meta strong {
    color: var(--text-dark);
    font-size: 0.9rem;
}

.deal-detail-message-meta span,
.deal-detail-message-meta small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.deal-detail-comment-form {
    display: grid;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.deal-detail-comment-form .btn {
    justify-self: start;
}

.deal-detail-side {
    align-content: start;
}

.deal-detail-side-list {
    margin-bottom: 14px;
}

.deal-detail-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.deal-detail-history li {
    display: grid;
    gap: 3px;
    padding-left: 14px;
    border-left: 3px solid var(--border);
}

.deal-detail-history strong {
    color: var(--text-dark);
    font-size: 0.88rem;
}

.deal-detail-history span {
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.45;
}

.deal-detail-history small {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

@media (max-width: 991.98px) {
    .deal-detail-hero,
    .deal-detail-layout {
        grid-template-columns: 1fr;
    }

    .deal-detail-timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .deal-detail-timeline-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .deal-card-header,
    .deal-card-footer,
    .deal-support-cta,
    .deal-detail-heading,
    .deal-detail-brief-intro,
    .deal-detail-item-header {
        align-items: stretch;
        flex-direction: column;
    }

    .deal-card-header-actions {
        justify-content: space-between;
    }

    .deal-card-footer .ms-auto {
        margin-left: 0 !important;
    }

    .deal-fact-grid {
        grid-template-columns: 1fr;
    }

    .deal-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .deal-detail-actions form,
    .deal-detail-actions .btn,
    .deal-detail-actions button {
        width: 100%;
    }

    .deal-detail-facts,
    .deal-detail-brief-grid,
    .deal-detail-mini-meta {
        grid-template-columns: 1fr;
    }

    .deal-detail-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .deal-progress-timeline,
    .deal-detail-timeline {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .deal-progress-step,
    .deal-detail-timeline-step {
        grid-template-columns: 32px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .deal-progress-step:not(:last-child)::after {
        top: 34px;
        bottom: -14px;
        left: 15px;
        width: 2px;
        height: auto;
    }

    .deal-detail-timeline-step {
        align-items: center;
    }

    .deal-detail-timeline-step:not(:last-child)::after {
        display: none;
    }

    .deal-progress-label {
        min-height: 0;
        padding-top: 7px;
    }
}

.payments-heading form {
    flex: 0 0 auto;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.dashboard-welcome > div {
    min-width: 0;
}

.dashboard-welcome h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.2;
}

.dashboard-welcome p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.98rem;
}

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

.dashboard-stat-grid-brand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

.dashboard-layout-brand {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-side {
    display: grid;
    gap: 16px;
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-section-header h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.dashboard-campaign-panel {
    padding: 22px;
}

.dashboard-campaign-list,
.dashboard-payout-list,
.dashboard-task-list {
    display: grid;
    gap: 12px;
}

.dashboard-campaign-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-campaign-main {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

.dashboard-campaign-copy {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.dashboard-campaign-copy h4 {
    margin: 0;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.28;
    text-overflow: ellipsis;
}

.dashboard-campaign-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dashboard-campaign-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-campaign-facts > span {
    min-width: 0;
    padding: 10px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-campaign-facts small,
.dashboard-campaign-facts em,
.dashboard-chart-bar small,
.dashboard-payout-item small,
.dashboard-task-item small,
.dashboard-profile-progress-meta span {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.dashboard-campaign-facts strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.dashboard-campaign-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.dashboard-bookmark-button {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--text-muted);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-bookmark-button:hover,
.dashboard-bookmark-button.is-bookmarked {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.28);
}

.dashboard-month-select {
    width: 128px;
    flex: 0 0 128px;
    font-weight: 800;
}

.dashboard-chart {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.dashboard-chart-bar {
    display: grid;
    min-width: 0;
    gap: 8px;
    text-align: center;
}

.dashboard-chart-track {
    display: flex;
    height: 142px;
    align-items: flex-end;
    padding: 8px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-chart-track span {
    display: block;
    width: 100%;
    height: var(--bar-height);
    background: linear-gradient(180deg, #7C3AED 0%, #14B8A6 100%);
    border-radius: 999px 999px 4px 4px;
}

.dashboard-chart-bar strong {
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.2;
}

.dashboard-chart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-chart-total span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-chart-total strong {
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 850;
}

.dashboard-payout-item,
.dashboard-task-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dashboard-payout-item > div,
.dashboard-task-item > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.dashboard-payout-item strong,
.dashboard-task-item strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.dashboard-payout-item .status-badge {
    margin-left: auto;
}

.dashboard-task-item > span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: var(--text-muted);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.dashboard-task-item.is-complete > span {
    color: #FFFFFF;
    background: var(--success);
    border-color: var(--success);
}

.dashboard-profile-progress {
    overflow: hidden;
    height: 10px;
    margin-bottom: 12px;
    background: #EEF2F7;
    border-radius: 999px;
}

.dashboard-profile-progress span {
    display: block;
    width: var(--progress-width);
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #14B8A6 100%);
    border-radius: inherit;
}

.dashboard-profile-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-profile-progress-meta strong {
    color: var(--text-dark);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

.dashboard-empty-compact {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 32px 18px;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: var(--radius);
    text-align: center;
}

.dashboard-empty-compact.small {
    padding: 24px 16px;
}

.dashboard-empty-compact .empty-icon {
    margin-bottom: 4px;
}

.dashboard-empty-compact h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
}

.dashboard-empty-compact p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

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

.payments-stat-grid .metric-card {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    padding: 24px;
}

.payments-stat-grid .metric-card-header {
    display: contents;
}

.payments-stat-grid .metric-card-icon {
    grid-row: 1;
    grid-column: 1;
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    font-size: 1.28rem;
}

.payments-stat-grid .metric-card-label {
    grid-row: 1;
    grid-column: 2;
}

.payments-stat-grid .metric-card-value {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-top: 4px;
    font-size: 2.08rem;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.payments-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.payments-side {
    display: grid;
    gap: 16px;
}

.transactions-toolbar,
.payments-section-heading,
.payment-method-card,
.payout-request-item,
.payments-help-card,
.payments-help-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transactions-toolbar {
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.transactions-toolbar h3,
.payments-section-heading h3,
.payments-help-card h3,
.payout-request-list h4 {
    margin: 0;
    color: var(--text-dark);
    font-weight: 850;
    line-height: 1.25;
}

.transactions-toolbar h3,
.payments-section-heading h3,
.payments-help-card h3 {
    font-size: 1.05rem;
}

.transactions-toolbar small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.payments-table .transaction-description {
    display: grid;
    gap: 2px;
}

.transaction-description strong {
    color: var(--text-dark);
    font-size: 0.92rem;
    line-height: 1.3;
}

.transaction-description small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.transaction-amount {
    color: var(--success);
    font-size: 0.95rem;
    font-weight: 900;
    white-space: nowrap;
}

.transaction-amount.negative {
    color: var(--text-dark);
}

.payments-empty-state,
.payments-empty-compact {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 34px 20px;
    color: var(--text-muted);
    text-align: center;
}

.payments-empty-state h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.04rem;
    font-weight: 850;
}

.payments-empty-compact {
    padding: 18px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: var(--radius);
    font-weight: 750;
}

.payments-empty-compact i {
    color: var(--primary);
    font-size: 1.45rem;
}

.payments-section-heading {
    justify-content: space-between;
    margin-bottom: 16px;
}

.payments-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payments-overview-grid > div {
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.payments-overview-grid small,
.payout-request-item small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.payments-overview-grid strong,
.payout-request-item strong {
    display: block;
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.payout-request-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.payout-request-list h4 {
    font-size: 0.95rem;
}

.payout-request-item {
    justify-content: space-between;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.payment-method-list,
.payment-method-modal-grid {
    display: grid;
    gap: 12px;
}

.payment-method-card {
    min-width: 0;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.payment-method-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    font-size: 1.08rem;
}

.payment-method-meta {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.payment-method-meta > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.payment-method-meta strong {
    color: var(--text-dark);
    font-size: 0.94rem;
    line-height: 1.25;
}

.payment-method-meta small {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.payments-help-card {
    align-items: flex-start;
}

.payments-help-card > div:last-child {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.payments-help-actions {
    flex-wrap: wrap;
}

@media (max-width: 1199.98px) {
    .dashboard-stat-grid,
    .payments-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-layout,
    .payments-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-campaign-item {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    }

    .dashboard-campaign-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .dashboard-welcome,
    .transactions-toolbar,
    .payments-help-card {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-section-header,
    .dashboard-campaign-item {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .dashboard-section-header {
        flex-direction: column;
    }

    .dashboard-section-header .btn,
    .dashboard-month-select {
        width: 100%;
    }

    .dashboard-campaign-facts,
    .dashboard-chart {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-track {
        height: 92px;
    }

    .dashboard-campaign-actions,
    .dashboard-welcome .btn {
        width: 100%;
    }

    .dashboard-campaign-actions .btn {
        flex: 1 1 auto;
    }

    .transactions-toolbar .campaign-platform-tabs {
        width: 100%;
    }

    .transactions-toolbar .campaign-platform-tab {
        flex: 1 1 145px;
    }

    .payment-method-card {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-method-card .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .dashboard-stat-grid,
    .payments-stat-grid,
    .payments-overview-grid {
        grid-template-columns: 1fr;
    }

    .payments-heading form,
    .payments-heading .btn,
    .payments-help-actions,
    .payments-help-actions .btn {
        width: 100%;
    }

    .payments-stat-grid .metric-card-value {
        font-size: 2rem;
    }
}

.messages-heading {
    align-items: center;
    justify-content: space-between;
}

.messages-shell {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.messages-list-panel {
    overflow: hidden;
    padding: 0;
}

.messages-search-form {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

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

.messages-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.messages-tabs .campaign-platform-tab {
    min-width: 0;
}

.messages-list {
    display: grid;
    max-height: calc(100vh - 294px);
    overflow: auto;
}

.messages-list-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.messages-list-item:hover,
.messages-list-item.active {
    color: var(--text-dark);
    background: #FBFAFF;
    border-left-color: var(--primary);
}

.messages-list-item.unread {
    background: #FBFAFF;
}

.message-type-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: var(--radius);
    font-size: 1.04rem;
}

.message-type-icon.primary {
    color: var(--primary);
    background: var(--primary-light);
}

.message-type-icon.success {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.message-type-icon.warning {
    color: #A16207;
    background: rgba(245, 158, 11, 0.16);
}

.message-type-icon.muted {
    color: var(--text-muted);
    background: #EEF2F7;
}

.message-list-main,
.message-detail-title-block,
.message-campaign-content,
.message-attachment-item span {
    display: grid;
    min-width: 0;
}

.message-list-main {
    gap: 4px;
}

.message-list-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.message-list-title strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.94rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-unread-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--primary);
    border-radius: 999px;
}

.message-list-snippet,
.message-list-meta,
.message-list-date {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.message-list-snippet {
    display: -webkit-box;
    min-height: 2.1em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.message-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 750;
}

.message-list-date {
    justify-self: end;
    white-space: nowrap;
}

.messages-list-empty,
.messages-detail-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 34px 20px;
    color: var(--text-muted);
    text-align: center;
}

.messages-list-empty h3,
.messages-detail-empty h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.04rem;
    font-weight: 850;
}

.messages-detail-panel {
    display: grid;
    gap: 18px;
    align-content: start;
    min-height: 620px;
}

.message-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.message-detail-title-block {
    gap: 10px;
}

.message-detail-title-block h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.message-detail-actions,
.message-campaign-actions,
.message-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.message-detail-actions {
    justify-content: flex-end;
}

.message-detail-actions form {
    margin: 0;
}

.message-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.message-meta-grid div,
.message-campaign-facts span {
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.message-meta-grid dt,
.message-campaign-facts small,
.message-campaign-brand small {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.message-meta-grid dd,
.message-campaign-facts strong {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.message-detail-body {
    color: #334155;
    font-size: 0.98rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.message-conversation {
    display: grid;
    gap: 12px;
}

.message-conversation h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 850;
    text-transform: uppercase;
}

.message-conversation-list {
    display: grid;
    gap: 10px;
    max-height: 460px;
    overflow: auto;
    padding: 2px;
}

.message-conversation-item {
    display: grid;
    gap: 7px;
    width: min(82%, 680px);
    padding: 12px 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.message-conversation-item.is-own {
    justify-self: end;
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

.message-conversation-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.message-conversation-item.is-own .message-conversation-meta {
    color: rgba(255, 255, 255, 0.78);
}

.message-conversation-meta strong {
    color: var(--text-dark);
    font-size: 0.78rem;
}

.message-conversation-item.is-own .message-conversation-meta strong {
    color: #FFFFFF;
}

.message-conversation-body {
    font-size: 0.92rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.message-attachments {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.message-attachments h4,
.message-campaign-content h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.3;
}

.message-attachment-list {
    display: grid;
    gap: 8px;
}

.message-attachment-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    color: var(--text-dark);
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.message-attachment-item:hover {
    color: var(--primary);
    border-color: rgba(108, 47, 242, 0.28);
    background: var(--primary-light);
}

.message-attachment-item i {
    color: var(--primary);
    font-size: 1.08rem;
}

.message-attachment-item strong,
.message-attachment-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-attachment-item strong {
    font-size: 0.88rem;
    line-height: 1.25;
}

.message-attachment-item small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.message-campaign-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.message-campaign-media {
    width: 100%;
    min-height: 160px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.message-campaign-placeholder {
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    font-size: 1.8rem;
}

.message-campaign-content {
    gap: 12px;
}

.message-campaign-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.message-campaign-brand strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.25;
}

.message-campaign-content p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.message-campaign-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.message-campaign-actions {
    padding-top: 4px;
}

.message-cta-row {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.message-reply-card {
    display: grid;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.message-reply-card h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
}

.message-reply-card p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.message-reply-form,
.message-compose-form {
    display: grid;
    gap: 14px;
}

.message-ai-draft {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #F8FAFC;
}

.message-ai-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.message-ai-status {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.message-ai-status[data-tone="success"] {
    color: #15803D;
}

.message-ai-status[data-tone="warning"] {
    color: #B45309;
}

.message-ai-status[data-tone="danger"] {
    color: #B91C1C;
}

.message-ai-preview {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    background: #EFF6FF;
    color: #1E3A8A;
    font-size: 0.88rem;
}

.message-reply-actions {
    display: flex;
    justify-content: flex-end;
}

.messages-mobile-back {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.message-send-status {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.message-send-status[data-tone="warning"],
.message-send-status[data-tone="danger"] {
    color: #B45309;
}

.message-wall-form {
    display: grid;
    gap: 16px;
}

.message-wall-form-actions {
    display: flex;
    justify-content: flex-end;
}

.message-wall-list {
    display: grid;
    gap: 14px;
}

.message-wall-post {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.message-wall-post-icon,
.message-wall-preview-icon {
    display: inline-grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
}

.message-wall-post-icon {
    width: 46px;
    height: 46px;
    font-size: 1.08rem;
}

.message-wall-post-main {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.message-wall-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.message-wall-post-header h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.message-wall-post-header small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.35;
}

.message-wall-post-body {
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.message-wall-preview-list {
    display: grid;
    gap: 10px;
}

.message-wall-preview-list.wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.message-wall-preview-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 12px;
    color: var(--text-dark);
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background-color 160ms ease, border-color 160ms ease;
}

.message-wall-preview-item:hover {
    color: var(--text-dark);
    background: #FBFAFF;
    border-color: rgba(108, 47, 242, 0.24);
}

.message-wall-preview-icon {
    width: 34px;
    height: 34px;
}

.message-wall-preview-item span:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.message-wall-preview-item strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-wall-preview-item small,
.message-wall-preview-item em {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.message-wall-preview-item small {
    font-weight: 750;
}

.message-wall-preview-item em {
    display: -webkit-box;
    overflow: hidden;
    font-style: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 1199.98px) {
    .messages-shell {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }

    .message-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .message-detail-actions {
        justify-content: flex-start;
    }

    .message-wall-preview-list.wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .messages-shell {
        grid-template-columns: 1fr;
    }

    .messages-list {
        max-height: none;
    }

    .messages-detail-panel {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .messages-search-form,
    .message-campaign-card {
        grid-template-columns: 1fr;
    }

    .messages-search-form {
        display: grid;
    }

    .message-meta-grid,
    .message-campaign-facts {
        grid-template-columns: 1fr;
    }

    .message-detail-actions .btn,
    .message-detail-actions form,
    .message-campaign-actions .btn,
    .message-cta-row .btn,
    .message-reply-actions .btn,
    .message-wall-form-actions .btn {
        width: 100%;
    }

    .messages-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .messages-heading .btn {
        width: 100%;
    }

    .message-reply-actions {
        justify-content: stretch;
    }

    .message-wall-form-actions {
        justify-content: stretch;
    }

    .message-wall-post {
        grid-template-columns: 1fr;
    }

    .message-wall-post-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .messages-list-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .message-type-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .message-list-date {
        grid-column: 2;
        justify-self: start;
    }

    .messages-tabs .campaign-platform-tab,
    .messages-search-form .btn {
        width: 100%;
    }

    .message-conversation-item {
        width: 92%;
    }
}

.support-heading {
    align-items: center;
}

.support-search-panel,
.support-contact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.support-search-copy,
.support-contact-cta > div,
.support-side-card > div,
.support-ticket-subject,
.support-article-item > div,
.support-ticket-detail-header > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.support-search-copy h3,
.support-section-header h3,
.support-side-card h3,
.support-contact-cta h3,
.support-ticket-detail-header h3 {
    margin: 0;
    color: var(--text-dark);
    font-weight: 850;
    line-height: 1.25;
}

.support-search-copy h3,
.support-section-header h3,
.support-side-card h3,
.support-contact-cta h3 {
    font-size: 1.05rem;
}

.support-ticket-detail-header h3 {
    font-size: 1.3rem;
    overflow-wrap: anywhere;
}

.support-search-form {
    display: flex;
    flex: 1 1 620px;
    gap: 10px;
    max-width: 760px;
}

.support-search-input {
    flex: 1 1 auto;
    min-width: 220px;
}

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

.support-topic-card {
    display: grid;
    min-height: 104px;
    gap: 10px;
    align-content: center;
    justify-items: center;
    padding: 16px 12px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
    text-decoration: none;
}

.support-topic-card:hover,
.support-topic-card.active {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.30);
}

.support-topic-card span,
.support-side-icon,
.support-article-icon {
    display: inline-grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
}

.support-topic-card span {
    width: 42px;
    height: 42px;
    font-size: 1.12rem;
}

.support-topic-card strong {
    font-size: 0.9rem;
    line-height: 1.25;
}

.support-layout,
.support-ticket-detail-layout,
.admin-ticket-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.support-side,
.support-ticket-sidebar {
    display: grid;
    gap: 16px;
}

.support-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

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

.support-article-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.support-article-icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
}

.support-article-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.support-article-title-row h4 {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.support-article-title-row small,
.support-ticket-subject small,
.support-ticket-detail-header small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
}

.support-article-item p,
.support-side-card p {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
}

.support-side-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.support-side-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 1.08rem;
}

.support-side-icon.success {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.support-empty-compact {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 30px 18px;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: var(--radius);
    text-align: center;
}

.support-empty-compact h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
}

.support-empty-compact p {
    margin: 0;
}

.support-tabs {
    gap: 8px;
}

.support-ticket-table {
    margin: -6px -6px 0;
}

.support-ticket-subject strong {
    color: var(--text-dark);
    font-size: 0.94rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.support-ticket-form-grid,
.support-status-form {
    display: grid;
    gap: 14px;
}

.support-contact-cta {
    align-items: center;
}

.support-conversation-panel {
    display: grid;
    gap: 18px;
}

.support-ticket-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.support-message-list {
    display: grid;
    gap: 14px;
}

.support-message-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.support-message-item.is-own {
    grid-template-columns: minmax(0, 1fr) 38px;
}

.support-message-item.is-own .avatar {
    grid-column: 2;
}

.support-message-item.is-own .support-message-bubble {
    grid-column: 1;
    grid-row: 1;
    background: #FBFAFF;
    border-color: rgba(108, 47, 242, 0.18);
}

.support-message-bubble {
    min-width: 0;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.support-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.support-message-meta strong {
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 850;
}

.support-message-meta small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.support-message-bubble p {
    margin: 0;
    color: #334155;
    line-height: 1.62;
    overflow-wrap: anywhere;
}

.support-reply-form {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.support-reply-actions {
    display: flex;
    justify-content: flex-end;
}

.support-ticket-meta-card {
    padding: 22px;
}

.support-meta-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.support-meta-list div {
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.support-meta-list dt {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.support-meta-list dd {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-ticket-table-card .table-active {
    --bs-table-bg-state: #FBFAFF;
}

@media (max-width: 1199.98px) {
    .support-topic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .support-layout,
    .support-ticket-detail-layout,
    .admin-ticket-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .support-search-panel,
    .support-search-form,
    .support-contact-cta,
    .support-ticket-detail-header,
    .support-article-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .support-search-form {
        display: grid;
        max-width: none;
    }

    .support-search-input {
        min-width: 0;
    }

    .support-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-heading .btn,
    .support-contact-cta .btn,
    .support-reply-actions .btn {
        width: 100%;
    }

    .support-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .support-message-item,
    .support-message-item.is-own {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .support-message-item.is-own .avatar {
        grid-column: 1;
    }

    .support-message-item.is-own .support-message-bubble {
        grid-column: 2;
    }

    .support-reply-actions {
        justify-content: stretch;
    }
}

@media (max-width: 575.98px) {
    .support-topic-grid {
        grid-template-columns: 1fr;
    }

    .support-tabs .campaign-platform-tab,
    .support-search-form .btn {
        width: 100%;
    }

    .support-article-item {
        grid-template-columns: 1fr;
    }
}

.creator-hub-search-panel {
    padding: 20px;
}

.creator-hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.creator-hub-main,
.creator-hub-side {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.creator-hub-section {
    display: grid;
    gap: 16px;
    padding: 22px;
}

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

.creator-trend-card,
.creator-story-card,
.creator-video-item,
.creator-request-item,
.creator-update-list article {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-trend-card,
.creator-story-card {
    display: grid;
    overflow: hidden;
}

.creator-trend-media,
.creator-story-media,
.creator-video-thumb {
    position: relative;
    overflow: hidden;
    background: #E2E8F0;
}

.creator-trend-media,
.creator-story-media {
    aspect-ratio: 16 / 10;
}

.creator-video-thumb {
    display: block;
    width: 142px;
    min-height: 92px;
    aspect-ratio: 16 / 10;
    flex: 0 0 142px;
    color: var(--primary);
    text-decoration: none;
    border-radius: var(--radius);
}

.creator-trend-media img,
.creator-story-media img,
.creator-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-media-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 92px;
    place-items: center;
    color: #0F766E;
    background:
        linear-gradient(135deg, rgba(108, 47, 242, 0.10), rgba(15, 118, 110, 0.12)),
        #F1F5F9;
    font-size: 1.65rem;
}

.creator-platform-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    min-height: 30px;
    padding: 6px 9px;
    overflow: hidden;
    color: #0F172A;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-play-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #FFFFFF;
    background: rgba(17, 24, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 1.08rem;
}

.creator-trend-body,
.creator-story-copy,
.creator-video-copy {
    display: grid;
    min-width: 0;
    gap: 9px;
}

.creator-trend-body {
    padding: 14px;
}

.creator-trend-body h4,
.creator-story-copy h4,
.creator-video-copy h4,
.creator-side-card h3 {
    margin: 0;
    color: var(--text-dark);
    font-weight: 850;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.creator-trend-body h4,
.creator-story-copy h4,
.creator-video-copy h4 {
    font-size: 0.98rem;
}

.creator-trend-body p,
.creator-story-copy p,
.creator-side-card p {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.creator-trend-meta,
.creator-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
}

.creator-trend-meta span,
.creator-video-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.creator-video-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.creator-video-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.creator-video-thumb .creator-play-icon {
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    font-size: 0.96rem;
}

.creator-story-card {
    gap: 14px;
    padding: 14px;
}

.creator-story-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.creator-story-media {
    border-radius: var(--radius);
}

.creator-story-copy small {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
}

.creator-side-card {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.creator-side-card > div {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.creator-side-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 1.08rem;
}

.creator-side-icon.success {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.creator-side-icon.warning {
    color: #A16207;
    background: rgba(245, 158, 11, 0.16);
}

.creator-request-list,
.creator-update-list {
    display: grid;
    gap: 10px;
}

.creator-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
}

.creator-request-item div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.creator-request-item strong,
.creator-update-list strong {
    overflow-wrap: anywhere;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
}

.creator-request-item small,
.creator-update-list small,
.creator-challenge-progress small {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
}

.creator-side-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.creator-side-link:hover {
    color: var(--primary-dark);
}

.creator-update-list article {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.creator-challenge-progress {
    display: grid;
    gap: 7px;
}

.creator-challenge-progress .progress {
    height: 10px;
    background: #EEF2F7;
}

.creator-challenge-progress .progress-bar {
    background: var(--success);
}

@media (max-width: 1199.98px) {
    .creator-hub-layout {
        grid-template-columns: 1fr;
    }

    .creator-hub-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .creator-trend-grid,
    .creator-story-grid,
    .creator-video-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .creator-hub-heading,
    .creator-hub-section .dashboard-section-header,
    .creator-hub-search-panel form > div:last-child {
        align-items: stretch;
        flex-direction: column;
    }

    .creator-hub-search-panel .btn,
    .creator-hub-section .dashboard-section-header .btn {
        width: 100%;
    }

    .creator-hub-side,
    .creator-trend-grid,
    .creator-story-grid,
    .creator-video-list {
        grid-template-columns: 1fr;
    }

    .creator-video-item {
        align-items: stretch;
        flex-direction: column;
    }

    .creator-video-thumb {
        width: 100%;
        min-height: 160px;
    }

    .creator-request-item {
        align-items: stretch;
        flex-direction: column;
    }

    .creator-request-item .btn {
        width: 100%;
    }
}

.creator-feed-shell {
    display: grid;
    width: min(100%, 1360px);
    gap: 20px;
    margin: 0 auto;
}

.creator-feed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.creator-feed-heading h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1.2;
}

.creator-feed-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 320px);
    gap: 24px;
    align-items: start;
}

.creator-feed-main,
.creator-feed-sidebar {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.creator-feed-sidebar {
    align-content: start;
}

.creator-widget-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035), 0 18px 38px rgba(16, 24, 40, 0.045);
}

.creator-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.creator-widget-header h3,
.creator-widget-feedback h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
}

.creator-widget-header a {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.creator-widget-header a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

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

.creator-widget-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 0;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 0;
    border-bottom: 1px solid #EEF2F7;
    border-radius: 0;
    text-decoration: none;
}

.creator-widget-item:hover {
    color: var(--text-dark);
    background: var(--primary-soft);
}

.creator-widget-list .creator-widget-item:last-child {
    border-bottom: 0;
}

.creator-widget-earner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.creator-widget-academy {
    grid-template-columns: auto minmax(0, 1fr);
}

.creator-widget-avatar,
.creator-widget-thumb {
    display: inline-grid;
    place-items: center;
    object-fit: cover;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(108, 47, 242, 0.16);
    font-weight: 900;
}

.creator-widget-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    font-size: 0.74rem;
}

.creator-widget-thumb {
    width: 64px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.1rem;
}

.creator-widget-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.creator-widget-copy strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-widget-copy small {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.25;
}

.creator-widget-action-stack {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.creator-widget-amount {
    color: #047857;
    font-size: 0.85rem;
    font-weight: 950;
    white-space: nowrap;
}

.creator-widget-rank {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--primary);
    background: #FFFFFF;
    border: 1px solid rgba(108, 47, 242, 0.18);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 950;
}

.creator-widget-earner:nth-child(1) .creator-widget-rank {
    color: #92400E;
    background: #FEF3C7;
    border-color: #FDE68A;
}

.creator-widget-earner:nth-child(2) .creator-widget-rank {
    color: #64748B;
    background: #F1F5F9;
    border-color: #E2E8F0;
}

.creator-widget-earner:nth-child(3) .creator-widget-rank {
    color: #9A3412;
    background: #FFEDD5;
    border-color: #FED7AA;
}

.creator-widget-request .btn,
.creator-widget-opportunity .btn {
    white-space: nowrap;
}

.creator-widget-empty {
    margin: 0;
    padding: 12px;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px dashed var(--border);
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.84rem;
    line-height: 1.45;
}

.creator-widget-feedback {
    justify-items: start;
    background:
        linear-gradient(135deg, rgba(108, 47, 242, 0.10), rgba(16, 185, 129, 0.09)),
        #FFFFFF;
}

.creator-widget-feedback-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary);
    background: #FFFFFF;
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 999px;
    font-size: 1.1rem;
}

.creator-widget-feedback p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.creator-feed-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}

.creator-feed-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    flex: 0 0 auto;
    padding: 8px 14px;
    color: #334155;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.creator-feed-tabs a:hover,
.creator-feed-tabs a.active {
    color: var(--primary-dark);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.28);
}

.creator-feed-tabs a.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C3AED 0%, #6D2FF2 100%);
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(108, 47, 242, 0.18);
}

.creator-feed-tabs span {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    color: var(--primary);
    background: #FFFFFF;
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.creator-feed-hero {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: visible;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.creator-feed-hero-slide {
    position: relative;
    overflow: hidden;
    display: none;
    min-height: 320px;
    padding: 34px;
    color: #FFFFFF;
    background:
        linear-gradient(90deg, rgba(35, 18, 79, 0.82), rgba(109, 47, 242, 0.26)),
        var(--primary);
    background-position: center;
    background-size: cover;
    border-radius: var(--radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.creator-feed-hero-slide.is-active {
    display: grid;
    align-items: end;
}

.creator-feed-hero-content {
    display: grid;
    width: min(100%, 620px);
    gap: 14px;
    align-self: center;
}

.creator-feed-hero-content h3 {
    margin: 0;
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.creator-feed-hero-content p {
    width: min(100%, 560px);
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.55;
}

.creator-feed-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.creator-feed-hero-actions > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 10px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 850;
}

.creator-feed-hero-actions > span {
    position: absolute;
    right: 24px;
    bottom: 24px;
    background: rgba(15, 23, 42, 0.34);
    border-color: rgba(255, 255, 255, 0.16);
}

.creator-feed-hero-actions > span:first-of-type {
    right: 118px;
}

.creator-feed-hero-dots {
    position: static;
    display: inline-flex;
    gap: 7px;
    justify-self: center;
    padding: 0;
    background: transparent;
    border-radius: 999px;
}

.creator-feed-hero-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background: #D7DDE8;
    border: 0;
    border-radius: 999px;
}

.creator-feed-hero-dots button.is-active {
    width: 24px;
    background: var(--primary);
}

.creator-feed-list {
    display: grid;
    gap: 16px;
}

.creator-feed-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035), 0 18px 42px rgba(16, 24, 40, 0.045);
}

@media (min-width: 768px) {
    .creator-feed-card {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
        grid-template-areas:
            "header header"
            "copy media"
            "badges media"
            "actions actions"
            "cta cta";
        align-items: start;
    }

    .creator-feed-card-header {
        grid-area: header;
    }

    .creator-feed-card-copy {
        grid-area: copy;
    }

    .creator-feed-media {
        grid-area: media;
    }

    .creator-feed-campaign-badges {
        grid-area: badges;
    }

    .creator-feed-actions {
        grid-area: actions;
    }

    .creator-feed-card-cta {
        grid-area: cta;
    }
}

.creator-feed-card-header,
.creator-feed-author,
.creator-feed-actions,
.creator-feed-card-cta,
.creator-feed-campaign-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}

.creator-feed-card-header {
    justify-content: space-between;
    align-items: flex-start;
}

.creator-feed-author {
    min-width: 0;
}

.creator-feed-avatar {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    object-fit: cover;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.creator-feed-author-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.creator-feed-author-copy strong {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--text-dark);
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1.25;
}

.creator-feed-author-copy strong:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-feed-author-copy small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.25;
}

.creator-feed-verified {
    flex: 0 0 auto;
    color: var(--success);
    font-size: 0.88rem;
}

.creator-feed-type-badge,
.creator-feed-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 9px;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.creator-feed-type-badge.hero {
    width: fit-content;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
}

.creator-feed-menu-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--text-muted);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-feed-menu-button:hover,
.creator-feed-menu-button:focus {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.28);
}

.creator-feed-card-copy {
    display: grid;
    gap: 8px;
}

.creator-feed-card-copy h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.14rem;
    font-weight: 900;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.creator-feed-card-copy p,
.creator-feed-description {
    margin: 0;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.creator-feed-description p,
.creator-feed-description div {
    margin: 0 0 0.75rem;
}

.creator-feed-description p:last-child,
.creator-feed-description div:last-child,
.creator-feed-description ul:last-child,
.creator-feed-description ol:last-child {
    margin-bottom: 0;
}

.creator-feed-description ul,
.creator-feed-description ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.creator-feed-description a {
    color: var(--primary);
    font-weight: 700;
}

.creator-feed-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #EEF2F7;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-feed-media img,
.creator-feed-media-placeholder {
    width: 100%;
    height: 100%;
}

.creator-feed-media img {
    display: block;
    object-fit: cover;
}

.creator-feed-media-placeholder {
    display: grid;
    place-items: center;
    color: var(--primary);
    background:
        linear-gradient(135deg, rgba(108, 47, 242, 0.10), rgba(15, 118, 110, 0.10)),
        #F8FAFC;
    font-size: 2rem;
}

.creator-feed-play-overlay {
    position: absolute;
    inset: 50% auto auto 50%;
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #FFFFFF;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;
    font-size: 1.45rem;
    transform: translate(-50%, -50%);
}

.creator-feed-duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-height: 28px;
    padding: 6px 9px;
    color: #FFFFFF;
    background: rgba(15, 23, 42, 0.74);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
}

.creator-feed-campaign-badges {
    flex-wrap: wrap;
}

.creator-feed-info-badge {
    color: #334155;
    background: #F8FAFC;
    border-color: var(--border);
}

.creator-feed-info-badge i {
    color: var(--primary);
}

.creator-feed-info-badge.budget {
    color: #065F46;
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.20);
}

.creator-feed-info-badge.budget i {
    color: var(--success);
}

.creator-feed-actions {
    flex-wrap: wrap;
    padding-top: 2px;
}

.creator-feed-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 10px;
    color: #475569;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 850;
}

.creator-feed-action:not(.static) {
    cursor: pointer;
}

.creator-feed-action:hover,
.creator-feed-action.is-active {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.28);
}

.creator-feed-action.static {
    cursor: default;
}

.creator-comments-modal .modal-body {
    display: grid;
    gap: 16px;
}

.creator-comments-list {
    display: grid;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
}

.creator-comment-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.creator-comment-avatar {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    object-fit: cover;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.creator-comment-body {
    min-width: 0;
}

.creator-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin-bottom: 4px;
}

.creator-comment-meta strong {
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
}

.creator-comment-meta small,
.creator-comments-form-meta,
.creator-comments-loading {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.creator-comment-body p {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.creator-comments-empty {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 22px;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-weight: 800;
}

.creator-comments-form {
    display: grid;
    gap: 8px;
}

.creator-comments-form-meta {
    text-align: right;
}

.creator-feed-card-cta {
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.creator-feed-empty {
    min-height: 260px;
}

.admin-wall-heading,
.admin-wall-tabs,
.admin-wall-layout {
    width: min(100%, 1360px);
    margin-right: auto;
    margin-left: auto;
}

.admin-wall-heading {
    align-items: center;
    margin-bottom: 18px;
}

.admin-wall-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin-bottom: 24px;
    list-style: none;
}

.admin-wall-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    color: #334155;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 850;
}

.admin-wall-tabs .nav-link:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: rgba(108, 47, 242, 0.24);
}

.admin-wall-tabs .nav-link.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C3AED 0%, #6D2FF2 100%);
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(108, 47, 242, 0.18);
}

.admin-wall-tabs .nav-link.active .badge {
    color: var(--primary-dark) !important;
    background: #FFFFFF !important;
    border-color: transparent;
}

.admin-wall-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    align-items: start;
}

.admin-wall-main,
.admin-wall-side {
    min-width: 0;
}

.admin-wall-empty-card,
.admin-wall-side-card {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035), 0 18px 42px rgba(16, 24, 40, 0.045);
}

.admin-wall-empty-card {
    min-height: 620px;
}

.admin-wall-empty-card .empty-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 22px;
    font-size: 2rem;
}

.admin-wall-empty-card h3 {
    font-size: 1.65rem;
    font-weight: 900;
}

.admin-wall-empty-card p {
    width: min(100%, 460px);
    margin-right: auto;
    margin-left: auto;
    color: #64748B;
    font-size: 1rem;
    line-height: 1.6;
}

.admin-wall-side-card .card-body {
    padding: 20px;
}

.admin-wall-side .list-group-item {
    min-width: 0;
}

.admin-wall-side .list-group-item strong {
    overflow-wrap: anywhere;
    white-space: normal;
}

.admin-wall-featured-empty {
    display: grid;
    min-height: 190px;
    place-items: center;
    padding: 24px;
    color: var(--text-muted);
    background: #FFFFFF;
    border: 1px dashed #CBD5E1;
    border-radius: var(--radius);
    text-align: center;
}

.admin-wall-featured-empty::before {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    place-items: center;
    color: var(--text-muted);
    border: 2px solid #94A3B8;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    content: "+";
}

.admin-wall-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #334155;
    font-weight: 750;
}

.admin-wall-stat-label i {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
}

.admin-wall-recent-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 26px 16px;
    color: var(--text-muted);
    text-align: center;
}

.admin-wall-recent-empty i {
    margin-bottom: 6px;
    color: #94A3B8;
    font-size: 2.2rem;
}

.admin-wall-recent-empty strong {
    color: #334155;
}

@media (max-width: 1199.98px) {
    .admin-wall-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .creator-feed-shell {
        width: 100%;
    }

    .creator-feed-content {
        grid-template-columns: 1fr;
    }

    .creator-feed-hero {
        min-height: 0;
    }

    .creator-feed-hero-slide {
        min-height: 300px;
    }

    .creator-feed-hero-content h3 {
        font-size: 1.65rem;
    }
}

@media (max-width: 575.98px) {
    .creator-feed-heading,
    .creator-feed-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .creator-feed-tabs a {
        padding-inline: 12px;
    }

    .creator-feed-hero {
        min-height: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .creator-feed-hero-slide {
        max-width: 100%;
        min-height: 360px;
    }

    .creator-feed-hero-slide {
        padding: 22px;
    }

    .creator-feed-hero-content,
    .creator-feed-hero-content p {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .creator-feed-hero-content h3 {
        font-size: 1.45rem;
    }

    .creator-feed-hero-actions {
        width: 100%;
        align-items: stretch;
    }

    .creator-feed-hero-actions .btn,
    .creator-feed-card-cta .btn {
        max-width: 100%;
        white-space: normal;
        width: 100%;
    }

    .creator-feed-hero-actions > span,
    .creator-feed-hero-actions > span:first-of-type {
        position: static;
        right: auto;
        bottom: auto;
    }

    .creator-feed-hero-dots {
        right: 18px;
        bottom: 16px;
    }

    .creator-feed-card {
        padding: 14px;
    }

    .creator-feed-media {
        aspect-ratio: 4 / 3;
    }

    .creator-feed-actions {
        align-items: stretch;
    }

    .creator-feed-actions .ms-auto {
        margin-left: 0 !important;
    }

    .creator-widget-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .creator-widget-earner {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }

    .creator-widget-action-stack,
    .creator-widget-request .btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .creator-widget-action-stack .btn,
    .creator-widget-request .btn {
        width: 100%;
    }
}

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

.knowledge-guide-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 132px;
    padding: 20px;
    color: var(--text-dark);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.knowledge-guide-card:hover,
.knowledge-guide-card.active {
    color: var(--text-dark);
    border-color: rgba(108, 47, 242, 0.28);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.knowledge-guide-card.active {
    background: linear-gradient(180deg, rgba(108, 47, 242, 0.08), #FFFFFF);
}

.knowledge-guide-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 1.2rem;
}

.knowledge-guide-card:nth-child(2) .knowledge-guide-icon {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.10);
}

.knowledge-guide-card:nth-child(3) .knowledge-guide-icon {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.knowledge-guide-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.knowledge-guide-card small {
    display: block;
    color: var(--text-muted);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.4;
}

.knowledge-guide-arrow {
    color: var(--text-muted);
    font-size: 1.35rem;
}

.knowledge-search-panel {
    padding: 22px;
}

.knowledge-result-summary {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.knowledge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.knowledge-section-stack {
    display: grid;
    gap: 16px;
}

.knowledge-section {
    padding: 24px;
    scroll-margin-top: 90px;
}

.knowledge-section-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.knowledge-section-header > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 900;
}

.knowledge-section-header h3 {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.3;
}

.knowledge-section-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.6;
}

.knowledge-section-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.knowledge-section-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.5;
}

.knowledge-section-list i {
    color: var(--success);
    font-size: 1rem;
    line-height: 1.5;
}

.knowledge-toc {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 12px;
    padding: 22px;
}

.knowledge-toc h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.02rem;
    font-weight: 850;
}

.knowledge-toc p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.knowledge-toc nav {
    display: grid;
    gap: 7px;
}

.knowledge-toc a {
    display: block;
    padding: 8px 10px;
    color: #334155;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.knowledge-toc a:hover {
    color: var(--primary);
    background: var(--primary-light);
    border-color: rgba(108, 47, 242, 0.22);
}

.knowledge-empty-panel {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.knowledge-empty-panel h3 {
    margin: 14px 0 8px;
    color: var(--text-dark);
    font-size: 1.12rem;
    font-weight: 850;
}

.knowledge-empty-panel p {
    max-width: 520px;
    margin: 0;
    color: var(--text-muted);
    font-weight: 650;
    line-height: 1.5;
}

@media (max-width: 1199.98px) {
    .knowledge-layout {
        grid-template-columns: 1fr;
    }

    .knowledge-toc {
        position: static;
    }
}

@media (max-width: 991.98px) {
    .knowledge-selector-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .knowledge-heading,
    .knowledge-search-panel form > div:last-child {
        align-items: stretch;
        flex-direction: column;
    }

    .knowledge-search-panel .btn,
    .knowledge-search-panel a.btn {
        width: 100%;
    }

    .knowledge-guide-card,
    .knowledge-section-header {
        grid-template-columns: 1fr;
    }

    .knowledge-guide-card {
        min-height: 0;
    }
}

.landing-body {
    min-height: 100%;
    background: var(--body-bg);
    overflow-x: hidden;
}

.landing-shell {
    min-height: 100vh;
    overflow: hidden;
    background: var(--body-bg);
}

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

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
}

.landing-nav-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 74px;
}

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

.landing-brand strong,
.landing-brand small {
    display: block;
    line-height: 1.15;
}

.landing-brand strong {
    font-weight: 850;
}

.landing-brand small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.landing-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.landing-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 11px;
    color: #334155;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.landing-menu a:hover,
.landing-menu a:focus {
    color: var(--primary);
    background: var(--primary-light);
}

.landing-login-link {
    color: var(--primary) !important;
}

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

.landing-hero {
    position: relative;
    display: flex;
    min-height: min(720px, calc(100svh - 132px));
    align-items: center;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 29%, rgba(255, 255, 255, 0.58) 49%, rgba(255, 255, 255, 0.12) 72%),
        linear-gradient(180deg, rgba(248, 245, 255, 0.38), rgba(255, 255, 255, 0.12)),
        url("../images/frexima-hero.png");
    background-position: center;
    background-size: cover;
}

.landing-hero::after {
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 120px;
    background: linear-gradient(180deg, rgba(247, 248, 252, 0), var(--body-bg));
    content: "";
}

.landing-hero-inner {
    padding: 78px 0 72px;
}

.landing-hero-copy {
    max-width: 660px;
    min-width: 0;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 18px;
    padding: 7px 10px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(108, 47, 242, 0.18);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.landing-hero h1,
.landing-section-header h2,
.landing-cta h2 {
    margin: 0;
    color: var(--text-dark);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.04;
}

.landing-hero h1 {
    max-width: 690px;
    font-size: 3.85rem;
    overflow-wrap: anywhere;
}

.landing-hero p {
    max-width: 630px;
    margin: 22px 0 0;
    color: #334155;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.landing-actions,
.landing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.landing-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.landing-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 10px;
    color: #334155;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(230, 233, 242, 0.88);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
}

.landing-trust-row i {
    color: var(--primary);
}

.landing-proof-strip {
    background: #FFFFFF;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

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

.landing-proof-item {
    min-width: 0;
    padding: 24px 22px;
    border-left: 1px solid var(--border);
}

.landing-proof-item:first-child {
    border-left: 0;
    padding-left: 0;
}

.landing-proof-item:last-child {
    padding-right: 0;
}

.landing-proof-item strong,
.landing-proof-item span {
    display: block;
}

.landing-proof-item strong {
    margin-bottom: 6px;
    color: var(--text-dark);
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.1;
}

.landing-proof-item span {
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.48;
}

.landing-section {
    padding: 78px 0;
    background: #FFFFFF;
}

.landing-section-muted {
    background: var(--body-bg);
}

.landing-section-header {
    max-width: 660px;
}

.landing-section-header h2 {
    margin-top: 8px;
    font-size: 2.35rem;
}

.landing-section-header p {
    margin: 18px 0 0;
    color: #475569;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.68;
}

.landing-centered {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.landing-agency-layout,
.landing-campaign-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 34px;
    align-items: center;
}

.landing-agency-board {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(108, 47, 242, 0.08), rgba(15, 118, 110, 0.07)),
        #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.landing-board-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.landing-board-row.is-primary {
    border-color: rgba(108, 47, 242, 0.22);
    box-shadow: 0 12px 26px rgba(108, 47, 242, 0.08);
}

.landing-board-row > span,
.landing-feature-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 1.12rem;
}

.landing-board-row:nth-child(2) > span {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.10);
}

.landing-board-row:nth-child(3) > span {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.landing-board-row strong,
.landing-board-row small {
    display: block;
    min-width: 0;
}

.landing-board-row strong {
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
}

.landing-board-row small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.44;
}

.landing-feature-grid,
.landing-process-grid,
.landing-campaign-grid {
    display: grid;
    gap: 16px;
}

.landing-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-feature-card,
.landing-process-card,
.landing-campaign-grid article {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.landing-feature-card {
    display: grid;
    gap: 14px;
    align-content: start;
    min-height: 250px;
    padding: 22px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.landing-feature-card:hover {
    border-color: rgba(108, 47, 242, 0.28);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.landing-feature-card:nth-child(2) .landing-feature-icon {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.10);
}

.landing-feature-card:nth-child(3) .landing-feature-icon {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.landing-feature-card:nth-child(4) .landing-feature-icon {
    color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.14);
}

.landing-feature-card h3,
.landing-process-card h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.28;
}

.landing-feature-card p,
.landing-process-card p,
.landing-campaign-grid article span {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.landing-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 30px;
}

.landing-process-card {
    display: grid;
    gap: 13px;
    padding: 24px;
}

.landing-process-card > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
}

.landing-process-card:nth-child(2) > span {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.10);
}

.landing-process-card:nth-child(3) > span {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.landing-campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-campaign-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 174px;
    padding: 20px;
}

.landing-campaign-grid article i {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 1.08rem;
}

.landing-campaign-grid article:nth-child(2) i {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.10);
}

.landing-campaign-grid article:nth-child(3) i {
    color: var(--success);
    background: rgba(22, 163, 74, 0.10);
}

.landing-campaign-grid article:nth-child(4) i {
    color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.14);
}

.landing-campaign-grid article strong {
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.28;
}

.landing-cta {
    padding: 70px 0;
    color: #FFFFFF;
    background:
        linear-gradient(135deg, rgba(16, 24, 40, 0.92), rgba(85, 32, 213, 0.9) 52%, rgba(15, 118, 110, 0.92)),
        var(--primary-dark);
}

.landing-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.landing-cta h2,
.landing-cta p,
.landing-cta .section-label {
    color: #FFFFFF;
}

.landing-cta h2 {
    max-width: 760px;
    margin-top: 8px;
    font-size: 2.2rem;
}

.landing-cta p {
    max-width: 680px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.65;
}

.landing-cta .section-label {
    opacity: 0.76;
}

.landing-cta-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-top: 0;
}

.landing-cta .btn-outline-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-hover-color: var(--primary-dark);
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
}

@media (max-width: 1199.98px) {
    .landing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .landing-nav-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 0;
    }

    .landing-brand {
        flex: 1 1 auto;
    }

    .landing-menu {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .landing-nav-actions {
        margin-left: auto;
    }

    .landing-hero {
        min-height: min(660px, calc(100svh - 150px));
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 52%, rgba(255, 255, 255, 0.32) 100%),
            url("../images/frexima-hero.png");
        background-position: center right 28%;
        background-size: cover;
    }

    .landing-hero h1 {
        font-size: 3rem;
    }

    .landing-proof-grid,
    .landing-agency-layout,
    .landing-campaign-layout {
        grid-template-columns: 1fr;
    }

    .landing-proof-item,
    .landing-proof-item:first-child,
    .landing-proof-item:last-child {
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .landing-proof-item:first-child {
        border-top: 0;
    }

    .landing-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .landing-container,
    .landing-nav-inner,
    .landing-hero-inner {
        width: calc(100% - 40px);
        margin-right: auto;
        margin-left: auto;
    }

    .landing-hero-inner {
        flex: 0 0 calc(100% - 40px);
    }

    .landing-hero-copy,
    .landing-section-header {
        max-width: 100%;
    }

    .landing-menu a:not(.landing-login-link) {
        display: none;
    }

    .landing-nav-actions .btn-outline-primary {
        display: none;
    }

    .landing-nav-actions .btn-primary {
        max-width: 168px;
        white-space: normal;
    }

    .landing-hero {
        min-height: min(620px, calc(100svh - 126px));
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 62%, rgba(255, 255, 255, 0.54) 100%),
            url("../images/frexima-hero.png");
        background-position: center right 32%;
    }

    .landing-hero-inner {
        padding: 52px 0 48px;
    }

    .landing-hero h1,
    .landing-section-header h2,
    .landing-cta h2 {
        line-height: 1.1;
    }

    .landing-hero h1 {
        font-size: 2.12rem;
    }

    .landing-hero p {
        font-size: 0.98rem;
        line-height: 1.58;
    }

    .landing-actions .btn,
    .landing-cta-actions .btn {
        width: 100%;
    }

    .landing-trust-row span {
        width: 100%;
    }

    .landing-section {
        padding: 56px 0;
    }

    .landing-section-header h2,
    .landing-cta h2 {
        font-size: 1.82rem;
    }

    .landing-centered {
        text-align: left;
    }

    .landing-feature-grid,
    .landing-process-grid,
    .landing-campaign-grid {
        grid-template-columns: 1fr;
    }

    .landing-feature-card {
        min-height: 0;
    }

    .landing-board-row {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 13px;
    }

    .landing-proof-item span,
    .landing-board-row small {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .landing-container,
    .landing-nav-inner,
    .landing-hero-inner {
        width: calc(100% - 48px);
        max-width: 342px;
    }

    .landing-hero-inner {
        flex: 0 0 auto;
    }

    .landing-brand small {
        display: none;
    }

    .landing-nav-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 8px;
    }

    .landing-brand strong {
        overflow: hidden;
        font-size: 0.98rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .landing-nav-actions {
        min-width: 0;
        justify-content: end;
    }

    .landing-nav-actions .btn-primary {
        width: 42px;
        max-width: 42px;
        min-height: 38px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

    .landing-nav-actions .btn-primary i {
        display: inline-flex;
        font-size: 1rem;
    }

    .landing-menu {
        display: flex;
        grid-column: 1 / -1;
        width: 100%;
        padding-top: 4px;
        border-top: 1px solid var(--border);
    }

    .landing-hero h1 {
        font-size: 2rem;
    }

    .landing-eyebrow {
        font-size: 0.7rem;
    }
}

/* Brand workspace layout */
.brand-body {
    min-height: 100%;
    background: #FAFAFF;
}

.brand-shell {
    min-height: 100vh;
}

.brand-sidebar {
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    padding: 28px 20px 20px;
    background: #FFFFFF;
    border-right: 1px solid #ECE7F8;
    box-shadow: 10px 0 34px rgba(16, 24, 40, 0.025);
}

.brand-sidebar-canvas {
    width: min(88vw, 324px);
    background: #FFFFFF;
}

.brand-sidebar-nav {
    display: grid;
    gap: 6px;
    min-height: 0;
}

.brand-sidebar .brand-sidebar-nav {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
    scrollbar-width: thin;
}

.brand-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 11px 13px;
    color: #334155;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 750;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.brand-sidebar-link-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-sidebar-link-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-sidebar-link i {
    width: 20px;
    flex: 0 0 20px;
    color: var(--primary);
    text-align: center;
}

.brand-sidebar-link:hover,
.brand-sidebar-link:focus {
    color: var(--primary-dark);
    background: #F7F1FF;
    border-color: rgba(108, 47, 242, 0.12);
}

.brand-sidebar-link.active {
    color: var(--primary-dark);
    background: #F2EAFE;
    border-color: rgba(108, 47, 242, 0.16);
}

.brand-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
}

.brand-help-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F4EDFF 100%);
    border: 1px solid rgba(108, 47, 242, 0.16);
    border-radius: 14px;
}

.brand-help-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 10px;
}

.brand-help-card h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.25;
}

.brand-help-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.45;
}

.brand-help-card .btn {
    width: fit-content;
}

.brand-app-content {
    min-width: 0;
    min-height: 100vh;
    background: #FAFAFF;
}

@media (min-width: 992px) {
    .brand-app-content {
        margin-left: var(--sidebar-width);
    }
}

.brand-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 76px;
    padding: 14px 30px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #ECE7F8;
    backdrop-filter: blur(12px);
}

.brand-topbar-title {
    min-width: 0;
    flex: 1 1 auto;
}

.brand-topbar-title span {
    display: block;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.3;
    text-transform: uppercase;
}

.brand-topbar-title h1 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-dark);
    font-size: 1.14rem;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.brand-account-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    min-height: 44px;
    padding: 4px 9px 4px 4px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
}

.brand-account-chip:hover,
.brand-account-chip:focus {
    border-color: rgba(108, 47, 242, 0.34);
}

.brand-main-content {
    width: calc(100% - 48px);
    min-width: 0;
    min-height: calc(100vh - 124px);
    margin: 24px;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #ECE9F7;
    border-radius: 18px;
    box-shadow: 0 22px 54px rgba(16, 24, 40, 0.04);
}

@media (max-width: 991.98px) {
    .brand-topbar {
        padding: 12px 20px;
    }

    .brand-main-content {
        width: calc(100% - 32px);
        min-height: calc(100vh - 112px);
        margin: 16px;
        padding: 22px;
    }
}

@media (max-width: 575.98px) {
    .brand-topbar {
        align-items: flex-start;
        gap: 10px;
    }

    .brand-topbar-actions {
        gap: 8px;
    }

    .brand-account-chip {
        max-width: 48px;
        padding-right: 4px;
    }

    .brand-account-chip .user-meta,
    .brand-account-chip .user-chip-caret {
        display: none;
    }

    .brand-main-content {
        width: calc(100% - 24px);
        margin: 12px;
        padding: 18px;
    }
}

.brand-login-body {
    --brand-ink: #0B1020;
    --brand-muted: #5D677A;
    --brand-line: #E3E7EF;
    --brand-panel: rgba(255, 255, 255, 0.93);
    --brand-blue: #2563EB;
    --brand-teal: #0F766E;
    --brand-gold: #B45309;
    min-height: 100vh;
    color: var(--brand-ink);
    background: #FBFAFF;
}

.brand-login-shell {
    min-height: 100vh;
    overflow-x: hidden;
}

.brand-public-nav {
    position: sticky;
    top: 14px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: calc(100% - 48px);
    max-width: 1360px;
    min-height: 72px;
    margin: 18px auto 0;
    padding: 12px 14px 12px 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.brand-public-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    color: var(--brand-ink);
    text-decoration: none;
}

.brand-public-logo strong,
.brand-public-logo small {
    display: block;
    line-height: 1.1;
}

.brand-public-logo strong {
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0;
}

.brand-public-logo small {
    margin-top: 3px;
    color: var(--brand-muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.brand-public-menu,
.brand-public-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-public-menu {
    justify-content: center;
    flex: 1 1 auto;
}

.brand-public-menu a,
.brand-public-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 10px;
    color: #334155;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
}

.brand-public-menu a:hover,
.brand-public-menu a:focus,
.brand-public-menu-link:hover,
.brand-public-menu-link:focus {
    color: var(--primary-dark);
    background: #F5F0FF;
}

.brand-public-actions {
    flex: 0 0 auto;
}

.brand-login-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 34px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 62px 32px 44px;
}

.brand-login-hero::before {
    position: absolute;
    inset: -90px 0 0;
    z-index: -2;
    background-image:
        linear-gradient(90deg, rgba(251, 250, 255, 0.99) 0%, rgba(251, 250, 255, 0.94) 42%, rgba(251, 250, 255, 0.78) 68%, rgba(251, 250, 255, 0.90) 100%),
        url("../images/frexima-hero.png");
    background-position: center;
    background-size: cover;
    content: "";
}

.brand-login-hero::after {
    position: absolute;
    inset: -90px 0 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(251, 250, 255, 0.2), #FBFAFF 96%);
    content: "";
}

.brand-hero-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 840px;
}

.brand-hero-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 34px;
    padding: 7px 11px;
    color: var(--primary-dark);
    background: #F1E9FF;
    border: 1px solid rgba(108, 47, 242, 0.14);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
}

.brand-login-hero h1 {
    max-width: 790px;
    margin: 20px 0 18px;
    color: #080C18;
    font-size: 4.2rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

.brand-hero-gradient {
    color: transparent;
    background: linear-gradient(90deg, #6D2FF2 0%, #2563EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.brand-hero-lede,
.brand-hero-support {
    max-width: 690px;
    margin: 0;
    color: var(--brand-muted);
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.65;
}

.brand-hero-support {
    margin-top: 12px;
    color: #263449;
    font-weight: 800;
}

.brand-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.brand-benefit-card,
.brand-dashboard-preview,
.brand-login-card,
.brand-why-card,
.brand-register-card {
    background: var(--brand-panel);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.brand-benefit-card {
    display: grid;
    gap: 11px;
    min-height: 170px;
    padding: 18px;
}

.brand-benefit-card span,
.brand-login-card-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, #8B5CF6, var(--primary));
    border-radius: 14px;
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.18);
}

.brand-benefit-card:nth-child(2) span {
    background: linear-gradient(135deg, var(--primary), var(--brand-blue));
}

.brand-benefit-card:nth-child(3) span {
    background: linear-gradient(135deg, var(--brand-gold), #EA580C);
}

.brand-benefit-card h2 {
    margin: 0;
    color: var(--brand-ink);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.25;
}

.brand-benefit-card p {
    margin: 0;
    color: var(--brand-muted);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.5;
}

.brand-dashboard-preview {
    max-width: 760px;
    margin-top: 18px;
    overflow: hidden;
}

.brand-dashboard-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--brand-line);
}

.brand-dashboard-preview-header span,
.brand-dashboard-preview-header strong {
    display: block;
}

.brand-dashboard-preview-header span {
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
}

.brand-dashboard-preview-header strong {
    margin-top: 3px;
    color: var(--brand-ink);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.brand-dashboard-status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 9px;
    color: var(--brand-teal) !important;
    background: #ECFDF5;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 999px;
    font-size: 0.72rem !important;
}

.brand-dashboard-status i {
    font-size: 0.46rem;
}

.brand-dashboard-preview-media {
    height: 170px;
    overflow: hidden;
    border-bottom: 1px solid var(--brand-line);
}

.brand-dashboard-preview-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.brand-dashboard-stat-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brand-dashboard-stat {
    min-width: 0;
    padding: 16px 18px;
    border-right: 1px solid var(--brand-line);
}

.brand-dashboard-stat:last-child {
    border-right: 0;
}

.brand-dashboard-stat span,
.brand-dashboard-stat strong,
.brand-dashboard-stat small {
    display: block;
}

.brand-dashboard-stat span {
    min-height: 36px;
    color: var(--brand-muted);
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.3;
}

.brand-dashboard-stat strong {
    margin-top: 8px;
    color: var(--brand-ink);
    font-size: 1.48rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.1;
}

.brand-dashboard-stat small {
    margin-top: 6px;
    color: var(--brand-teal);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
}

.brand-login-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.brand-login-card,
.brand-why-card,
.brand-register-card {
    padding: 28px;
}

.brand-login-card h2,
.brand-why-card h2,
.brand-register-card h2 {
    margin: 16px 0 8px;
    color: var(--brand-ink);
    font-size: 1.55rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.18;
}

.brand-login-card > p,
.brand-register-card > p {
    margin: 0 0 20px;
    color: var(--brand-muted);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.55;
}

.brand-login-form {
    display: grid;
    gap: 16px;
}

.brand-password-field {
    position: relative;
}

.brand-password-field .form-control {
    padding-right: 48px;
}

.brand-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--brand-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
}

.brand-password-toggle:hover,
.brand-password-toggle:focus {
    color: var(--primary);
    background: var(--primary-soft);
}

.brand-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--brand-muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.brand-login-options a {
    font-weight: 850;
    text-decoration: none;
}

.brand-login-submit {
    width: 100%;
    min-height: 48px;
}

.brand-social-login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.brand-social-login .btn {
    width: 100%;
}

.brand-login-create {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-line);
}

.brand-login-create strong,
.brand-login-create p,
.brand-login-create a {
    display: block;
}

.brand-login-create strong {
    color: var(--brand-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

.brand-login-create p {
    margin: 6px 0 10px;
    color: var(--brand-muted);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.5;
}

.brand-login-create a,
.brand-register-switch a {
    font-weight: 900;
    text-decoration: none;
}

.brand-why-card h2 {
    margin-top: 0;
    font-size: 1.18rem;
}

.brand-why-card ul,
.brand-register-checklist {
    display: grid;
    gap: 11px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.brand-why-card li,
.brand-register-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #27364A;
    font-size: 0.91rem;
    font-weight: 750;
    line-height: 1.4;
}

.brand-why-card i,
.brand-register-checklist i {
    color: var(--brand-teal);
    font-size: 1.02rem;
}

.brand-bottom-cta {
    width: calc(100% - 64px);
    max-width: 1360px;
    display: grid;
    justify-items: center;
    gap: 14px;
    margin: 12px auto 0;
    padding: 54px 24px;
    color: #FFFFFF;
    background:
        linear-gradient(135deg, rgba(25, 9, 93, 0.98), rgba(73, 29, 191, 0.95) 58%, rgba(37, 99, 235, 0.86)),
        url("../images/frexima-hero.png");
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 26px 70px rgba(35, 20, 120, 0.24);
    text-align: center;
}

.brand-bottom-cta span {
    color: #BFF7EA;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-bottom-cta h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: 2.35rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.1;
}

.brand-trusted-strip {
    display: grid;
    gap: 18px;
    padding: 28px 32px 42px;
    background: #FFFFFF;
    border-top: 1px solid var(--brand-line);
}

.brand-trusted-label {
    justify-self: center;
    color: var(--brand-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-trusted-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1160px;
    margin: 0 auto;
}

.brand-trusted-logos span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 48px;
    padding: 10px 16px;
    color: #172033;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
}

.brand-anchor {
    position: relative;
    display: block;
    height: 0;
    overflow: hidden;
}

.brand-register-main {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 58px 32px 60px;
}

.brand-register-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    gap: 42px;
    align-items: center;
}

.brand-register-intro {
    min-width: 0;
}

.brand-register-intro h1 {
    max-width: 680px;
    margin: 18px 0 16px;
    color: #080C18;
    font-size: 3.25rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.04;
}

.brand-register-intro p {
    max-width: 620px;
    margin: 0 0 22px;
    color: var(--brand-muted);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.65;
}

.brand-register-checklist {
    margin-bottom: 24px;
}

.brand-register-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 700px;
}

.brand-register-preview div {
    min-height: 118px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--brand-line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.brand-register-preview span,
.brand-register-preview strong {
    display: block;
}

.brand-register-preview span {
    color: var(--brand-blue);
    font-size: 0.82rem;
    font-weight: 950;
}

.brand-register-preview strong {
    margin-top: 28px;
    color: var(--brand-ink);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.25;
}

.brand-register-card {
    background: #FFFFFF;
}

.brand-register-card h2 {
    margin-top: 0;
}

.brand-register-switch {
    margin: 18px 0 0;
    color: var(--brand-muted);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .brand-public-menu {
        gap: 2px;
    }

    .brand-public-menu a,
    .brand-public-menu-link {
        padding-inline: 8px;
        font-size: 0.82rem;
    }

    .brand-login-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
        gap: 24px;
        padding-inline: 24px;
    }

    .brand-login-hero h1 {
        font-size: 3.45rem;
    }

    .brand-benefit-grid {
        grid-template-columns: 1fr;
    }

    .brand-benefit-card {
        min-height: 0;
    }

    .brand-dashboard-stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand-dashboard-stat:nth-child(2n) {
        border-right: 0;
    }

    .brand-dashboard-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--brand-line);
    }
}

@media (max-width: 991.98px) {
    .brand-public-nav {
        position: relative;
        top: 0;
        flex-wrap: wrap;
        width: calc(100% - 32px);
        margin-top: 16px;
    }

    .brand-public-menu {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding-top: 4px;
        scrollbar-width: none;
    }

    .brand-public-menu::-webkit-scrollbar {
        display: none;
    }

    .brand-login-hero,
    .brand-register-layout {
        grid-template-columns: 1fr;
    }

    .brand-login-hero {
        padding-top: 46px;
    }

    .brand-login-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .brand-login-card {
        position: static;
    }

    .brand-register-main {
        padding-top: 44px;
    }

    .brand-register-intro h1 {
        font-size: 2.65rem;
    }
}

@media (max-width: 767.98px) {
    .brand-public-logo {
        min-width: 0;
    }

    .brand-public-logo small {
        display: none;
    }

    .brand-public-actions {
        margin-left: auto;
    }

    .brand-public-actions .btn {
        min-height: 36px;
        padding-inline: 12px;
    }

    .brand-login-hero {
        padding-inline: 18px;
        padding-bottom: 30px;
    }

    .brand-login-hero h1 {
        font-size: 2.55rem;
        line-height: 1.04;
    }

    .brand-hero-lede,
    .brand-hero-support {
        font-size: 0.98rem;
    }

    .brand-login-panel {
        grid-template-columns: 1fr;
    }

    .brand-login-card,
    .brand-why-card,
    .brand-register-card {
        padding: 22px;
    }

    .brand-dashboard-preview-media {
        height: 140px;
    }

    .brand-bottom-cta h2 {
        font-size: 1.9rem;
    }

    .brand-register-main {
        padding-inline: 18px;
    }

    .brand-register-intro h1 {
        font-size: 2.2rem;
        line-height: 1.08;
    }

    .brand-register-preview {
        grid-template-columns: 1fr;
    }

    .brand-register-preview div {
        min-height: 96px;
    }

    .brand-register-preview strong {
        margin-top: 18px;
    }
}

@media (max-width: 575.98px) {
    .brand-public-nav {
        width: calc(100% - 20px);
        margin-top: 10px;
        padding: 10px;
    }

    .brand-public-logo strong {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-public-actions .btn-light {
        display: none;
    }

    .brand-public-menu a,
    .brand-public-menu-link {
        min-height: 34px;
        padding: 7px 8px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .brand-login-hero {
        padding: 34px 12px 24px;
    }

    .brand-hero-badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
    }

    .brand-login-hero h1 {
        font-size: 2rem;
    }

    .brand-benefit-card {
        padding: 16px;
    }

    .brand-dashboard-preview-header,
    .brand-login-options,
    .brand-social-login {
        align-items: stretch;
        flex-direction: column;
    }

    .brand-dashboard-stat-list,
    .brand-social-login {
        grid-template-columns: 1fr;
    }

    .brand-dashboard-stat,
    .brand-dashboard-stat:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid var(--brand-line);
    }

    .brand-dashboard-stat:last-child {
        border-bottom: 0;
    }

    .brand-login-card,
    .brand-why-card,
    .brand-register-card {
        padding: 18px;
    }

    .brand-bottom-cta {
        width: calc(100% - 36px);
        padding: 42px 18px;
    }

    .brand-trusted-strip {
        padding-inline: 14px;
    }

    .brand-trusted-logos span {
        width: calc(50% - 5px);
        min-width: 0;
        padding-inline: 8px;
        font-size: 0.78rem;
    }

    .brand-register-main {
        padding: 34px 12px 42px;
    }

    .brand-register-intro h1 {
        font-size: 1.9rem;
    }
}

/* Public marketing pages */
.marketing-body {
    --marketing-ink: #080C18;
    --marketing-muted: #566176;
    --marketing-line: #E2E7F0;
    --marketing-panel: #FFFFFF;
    --marketing-primary: #5B2CE1;
    --marketing-blue: #2563EB;
    --marketing-teal: #0F766E;
    --marketing-gold: #B45309;
    min-height: 100vh;
    color: var(--marketing-ink);
    background: #FBFAFF;
}

.marketing-shell {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, #FFFFFF 52%, #F7FAFC 100%);
}

.marketing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1320px;
    min-height: 84px;
    margin: 0 auto;
    padding: 22px 32px;
}

.marketing-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    color: var(--marketing-ink);
    text-decoration: none;
}

.marketing-logo:hover {
    color: var(--marketing-ink);
}

.marketing-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--marketing-ink);
    background: #FFFFFF;
    border: 1px solid var(--marketing-line);
    border-radius: 12px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1;
}

.marketing-mobile-toggle:hover,
.marketing-mobile-toggle:focus-visible {
    color: var(--marketing-primary);
    background: #F4F0FF;
    border-color: rgba(91, 44, 225, 0.28);
}

.marketing-mobile-toggle .bi {
    font-size: 1.25rem;
}

.marketing-menu,
.marketing-nav-actions,
.marketing-actions,
.audience-actions {
    display: flex;
    align-items: center;
}

.marketing-menu {
    justify-content: center;
    flex: 1 1 auto;
    gap: 12px;
}

.marketing-menu .dropdown {
    display: flex;
}

.marketing-menu a,
.marketing-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 9px;
    color: #111827;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
}

.marketing-menu a:hover,
.marketing-menu a:focus,
.marketing-menu a.active,
.marketing-menu-link:hover,
.marketing-menu-link:focus {
    color: var(--marketing-primary);
    background: #F4F0FF;
}

@media (min-width: 992px) {
    .marketing-menu.collapse {
        display: flex !important;
    }
}

.marketing-nav-actions {
    flex: 0 0 auto;
    gap: 12px;
}

.marketing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);
    gap: 40px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 32px 34px;
}

.marketing-hero-copy {
    min-width: 0;
}

.marketing-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 7px 10px;
    color: var(--marketing-primary);
    background: #F0EAFF;
    border: 1px solid rgba(91, 44, 225, 0.12);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.2;
}

.marketing-hero h1,
.audience-hero h1 {
    margin: 24px 0 18px;
    color: var(--marketing-ink);
    font-size: 4.25rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.02;
}

.marketing-hero h1 span,
.audience-creator-body .audience-hero h1 strong {
    color: transparent;
    background: linear-gradient(90deg, var(--marketing-primary) 0%, var(--marketing-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.marketing-lede,
.marketing-support,
.audience-copy p,
.audience-section-header p,
.audience-split p,
.audience-callout p {
    color: var(--marketing-muted);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.65;
}

.marketing-lede,
.marketing-support {
    max-width: 690px;
    margin: 0;
}

.marketing-support {
    margin-top: 12px;
    color: #273449;
    font-weight: 800;
}

.marketing-actions,
.audience-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.marketing-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.marketing-benefit-card,
.marketing-auth-card,
.marketing-why-card,
.audience-feature-card,
.audience-process-grid article,
.audience-callout,
.audience-proof-strip article {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--marketing-line);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.marketing-benefit-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 176px;
    padding: 18px;
    box-shadow: none;
}

.marketing-benefit-card span,
.marketing-auth-icon,
.marketing-dual-icon,
.audience-feature-card span {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--marketing-primary), var(--marketing-blue));
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.marketing-benefit-card:nth-child(2) span,
.audience-creator-body .audience-feature-card:nth-child(1) span {
    background: linear-gradient(135deg, var(--marketing-teal), #14B8A6);
}

.marketing-benefit-card:nth-child(3) span,
.audience-feature-card:nth-child(4) span {
    background: linear-gradient(135deg, var(--marketing-gold), #EA580C);
}

.marketing-benefit-card h2,
.audience-feature-card h3,
.audience-process-grid h3 {
    margin: 0;
    color: var(--marketing-ink);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.25;
}

.marketing-benefit-card p,
.audience-feature-card p,
.audience-process-grid p {
    margin: 0;
    color: var(--marketing-muted);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.5;
}

.marketing-dashboard-preview {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    max-width: 780px;
    min-height: 390px;
    margin-top: 34px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--marketing-line);
    border-radius: 8px;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.10);
}

.marketing-dashboard-sidebar {
    display: grid;
    align-content: start;
    gap: 22px;
    padding: 20px 16px;
    background: #F8F6FF;
    border-right: 1px solid var(--marketing-line);
}

.marketing-dashboard-sidebar nav {
    display: grid;
    gap: 8px;
}

.marketing-dashboard-sidebar nav span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 7px 8px;
    color: #334155;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
}

.marketing-dashboard-sidebar nav span.active {
    color: var(--marketing-primary);
    background: #EEE7FF;
}

.marketing-dashboard-main {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    padding: 20px;
}

.marketing-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.marketing-dashboard-top span,
.marketing-dashboard-top strong,
.marketing-dashboard-stats span,
.marketing-dashboard-stats strong,
.marketing-dashboard-stats small {
    display: block;
}

.marketing-dashboard-top span {
    color: var(--marketing-muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.marketing-dashboard-top strong {
    margin-top: 3px;
    color: var(--marketing-ink);
    font-size: 1rem;
    font-weight: 950;
}

.marketing-dashboard-top a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    color: #FFFFFF;
    background: var(--marketing-primary);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 900;
    text-decoration: none;
}

.marketing-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.marketing-dashboard-stats div {
    min-width: 0;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--marketing-line);
    border-radius: 8px;
}

.marketing-dashboard-stats span {
    min-height: 32px;
    color: var(--marketing-muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.25;
}

.marketing-dashboard-stats strong {
    margin-top: 8px;
    color: var(--marketing-ink);
    font-size: 1.22rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.05;
}

.marketing-dashboard-stats small {
    margin-top: 5px;
    color: var(--marketing-teal);
    font-size: 0.66rem;
    font-weight: 850;
}

.marketing-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 12px;
}

.marketing-dashboard-grid section,
.marketing-dashboard-media {
    min-width: 0;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid var(--marketing-line);
    border-radius: 8px;
}

.marketing-dashboard-grid h3 {
    margin: 0 0 12px;
    color: var(--marketing-ink);
    font-size: 0.78rem;
    font-weight: 950;
}

.marketing-dashboard-grid article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-height: 34px;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 800;
}

.marketing-dashboard-grid article strong {
    color: var(--marketing-teal);
    font-size: 0.64rem;
}

.marketing-dashboard-grid article small {
    color: var(--marketing-muted);
    font-size: 0.62rem;
}

.marketing-performance-list {
    display: grid;
    gap: 11px;
}

.marketing-performance-list span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--marketing-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.marketing-performance-list strong {
    color: var(--marketing-ink);
    font-size: 1rem;
    font-weight: 950;
}

.marketing-dashboard-photo {
    display: block;
    width: 100%;
    height: 78px;
    margin-top: 12px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.marketing-side-panel {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.marketing-auth-card,
.marketing-why-card {
    padding: 28px;
}

.marketing-auth-card h2,
.marketing-why-card h2 {
    margin: 16px 0 8px;
    color: var(--marketing-ink);
    font-size: 1.62rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.18;
}

.marketing-auth-card p {
    margin: 0 0 20px;
    color: var(--marketing-muted);
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.55;
}

.marketing-auth-form {
    display: grid;
    gap: 16px;
}

.marketing-auth-card .form-label {
    margin-bottom: 7px;
    color: var(--marketing-ink);
    font-size: 0.82rem;
    font-weight: 850;
}

.marketing-auth-submit {
    width: 100%;
    min-height: 48px;
}

.marketing-account-options {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--marketing-line);
}

.marketing-account-options strong {
    color: var(--marketing-ink);
    font-size: 0.94rem;
    font-weight: 950;
}

.marketing-account-options a {
    width: fit-content;
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
}

.marketing-why-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F0FF 100%);
}

.marketing-why-card h2 {
    margin-top: 0;
    font-size: 1.16rem;
}

.marketing-why-card ul,
.audience-check-list {
    display: grid;
    gap: 11px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.marketing-why-card li,
.audience-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #27364A;
    font-size: 0.91rem;
    font-weight: 750;
    line-height: 1.4;
}

.marketing-why-card i,
.audience-check-list i {
    color: var(--marketing-teal);
    font-size: 1.02rem;
}

.marketing-dual-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: calc(100% - 64px);
    max-width: 1240px;
    margin: 0 auto 36px;
    overflow: hidden;
    color: #FFFFFF;
    background:
        linear-gradient(135deg, rgba(7, 12, 35, 0.98), rgba(39, 24, 120, 0.96) 56%, rgba(15, 118, 110, 0.88));
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(17, 24, 39, 0.20);
}

.marketing-dual-cta article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    padding: 34px;
}

.marketing-dual-cta article:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.marketing-dual-cta small,
.marketing-dual-cta h2,
.marketing-dual-cta p,
.marketing-dual-cta a {
    color: #FFFFFF;
}

.marketing-dual-cta small {
    display: block;
    color: #BFF7EA;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.marketing-dual-cta h2 {
    margin: 7px 0 9px;
    font-size: 1.34rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.16;
}

.marketing-dual-cta p {
    margin: 0 0 16px;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
}

.marketing-dual-cta a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    font-weight: 900;
    text-decoration: none;
}

.marketing-dual-icon {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.marketing-pricing-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: calc(100% - 64px);
    max-width: 1240px;
    margin: 0 auto 34px;
    padding: 26px 30px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--marketing-teal), #2563EB);
    border-radius: 8px;
}

.marketing-pricing-strip span,
.marketing-pricing-strip strong {
    display: block;
}

.marketing-pricing-strip span {
    color: #D1FAE5;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.marketing-pricing-strip strong {
    max-width: 760px;
    margin-top: 5px;
    color: #FFFFFF;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.35;
}

.marketing-trusted-strip {
    display: grid;
    gap: 18px;
    width: calc(100% - 64px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 0 46px;
    text-align: center;
}

.marketing-trusted-strip > span {
    color: #27364A;
    font-size: 0.9rem;
    font-weight: 850;
}

.marketing-trusted-strip div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.marketing-trusted-strip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 48px;
    padding: 10px 16px;
    color: #253044;
    background: #FFFFFF;
    border: 1px solid var(--marketing-line);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.audience-body .marketing-shell {
    background: #FFFFFF;
}

.audience-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
    gap: 42px;
    align-items: center;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 32px 48px;
}

.audience-copy {
    min-width: 0;
}

.audience-hero h1 {
    max-width: 720px;
    font-size: 3.55rem;
}

.audience-copy p {
    max-width: 650px;
    margin: 0;
}

.audience-check-list {
    max-width: 620px;
    margin-top: 28px;
}

.audience-visual {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #F8FAFC;
    border: 1px solid var(--marketing-line);
    border-radius: 8px;
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.12);
}

.audience-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
}

.audience-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(8, 12, 24, 0.58) 100%);
    content: "";
}

.audience-visual-panel {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    display: grid;
    gap: 8px;
    width: min(100% - 48px, 320px);
    padding: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(8, 12, 24, 0.18);
    backdrop-filter: blur(16px);
}

.audience-visual-panel span,
.audience-visual-panel strong,
.audience-visual-panel small,
.audience-visual-panel em,
.audience-visual-panel b {
    display: block;
}

.audience-visual-panel span {
    color: var(--marketing-primary);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.audience-visual-panel strong {
    color: var(--marketing-ink);
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.2;
}

.audience-visual-panel small {
    color: var(--marketing-muted);
    font-weight: 750;
    line-height: 1.4;
}

.audience-visual-panel div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--marketing-line);
}

.audience-visual-panel em {
    color: var(--marketing-muted);
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 850;
}

.audience-visual-panel b {
    color: var(--marketing-teal);
    font-size: 1.28rem;
    font-weight: 950;
}

.audience-proof-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: calc(100% - 64px);
    max-width: 1240px;
    margin: 0 auto;
}

.audience-proof-strip article {
    min-height: 142px;
    padding: 20px;
    box-shadow: none;
}

.audience-proof-strip strong,
.audience-proof-strip span {
    display: block;
}

.audience-proof-strip strong {
    color: var(--marketing-primary);
    font-size: 1.7rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.05;
}

.audience-proof-strip span {
    margin-top: 12px;
    color: var(--marketing-muted);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.audience-section {
    width: 100%;
    padding: 82px 32px;
}

.audience-section-muted {
    background: #F8FAFC;
    border-block: 1px solid var(--marketing-line);
}

.audience-section-header,
.audience-feature-grid,
.audience-process-grid,
.audience-split {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}

.audience-section-header {
    max-width: 760px;
    margin-bottom: 34px;
}

.audience-section-header h2,
.audience-split h2 {
    margin: 10px 0 12px;
    color: var(--marketing-ink);
    font-size: 2.5rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.08;
}

.audience-section-header p,
.audience-split p {
    margin: 0;
}

.audience-centered {
    text-align: center;
}

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

.audience-feature-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 260px;
    padding: 22px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.audience-feature-card:nth-child(2) span {
    background: linear-gradient(135deg, var(--marketing-teal), #14B8A6);
}

.audience-feature-card:nth-child(3) span {
    background: linear-gradient(135deg, var(--marketing-primary), #A855F7);
}

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

.audience-process-grid article {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 228px;
    padding: 24px;
    box-shadow: none;
}

.audience-process-grid article > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--marketing-primary);
    background: #F0EAFF;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 950;
}

.audience-process-grid article:nth-child(2) > span {
    color: var(--marketing-teal);
    background: #E6FFFA;
}

.audience-process-grid article:nth-child(3) > span {
    color: var(--marketing-gold);
    background: #FFF7ED;
}

.audience-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 34px;
    align-items: center;
}

.audience-callout {
    display: grid;
    gap: 12px;
    padding: 26px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 234, 255, 0.92));
}

.audience-callout strong {
    display: block;
    color: var(--marketing-ink);
    font-size: 1.24rem;
    font-weight: 950;
    line-height: 1.25;
}

.audience-callout p {
    margin: 0;
    font-size: 0.94rem;
}

.audience-callout .btn {
    width: fit-content;
}

@media (max-width: 1199.98px) {
    .marketing-nav {
        flex-wrap: wrap;
    }

    .marketing-menu {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .marketing-hero {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
        gap: 28px;
    }

    .marketing-hero h1 {
        font-size: 3.55rem;
    }

    .marketing-benefit-grid,
    .audience-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketing-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audience-hero {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
    }

    .audience-hero h1 {
        font-size: 3rem;
    }
}

@media (max-width: 991.98px) {
    .marketing-nav {
        padding-inline: 24px;
    }

    .marketing-mobile-toggle {
        display: inline-flex;
    }

    .marketing-menu {
        justify-content: flex-start;
        overflow: visible;
    }

    .marketing-menu.collapse.show,
    .marketing-menu.collapsing {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 12px;
        background: #FFFFFF;
        border: 1px solid var(--marketing-line);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
    }

    .marketing-menu a,
    .marketing-menu-link {
        justify-content: flex-start;
        width: 100%;
        white-space: nowrap;
    }

    .marketing-menu .dropdown {
        min-width: 0;
    }

    .marketing-hero,
    .audience-hero,
    .audience-split {
        grid-template-columns: 1fr;
    }

    .marketing-side-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .marketing-dual-cta {
        grid-template-columns: 1fr;
    }

    .marketing-dual-cta article:first-child {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .audience-proof-strip,
    .audience-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .marketing-nav {
        align-items: flex-start;
        padding: 16px 18px;
    }

    .marketing-nav-actions {
        margin-left: auto;
    }

    .marketing-nav-actions .btn {
        min-height: 36px;
        padding-inline: 12px;
    }

    .marketing-hero,
    .audience-hero {
        padding: 34px 18px 28px;
    }

    .marketing-hero h1,
    .audience-hero h1 {
        font-size: 2.55rem;
        line-height: 1.06;
    }

    .marketing-lede,
    .marketing-support,
    .audience-copy p {
        font-size: 0.96rem;
    }

    .marketing-benefit-grid,
    .marketing-side-panel,
    .audience-feature-grid,
    .audience-proof-strip,
    .audience-process-grid {
        grid-template-columns: 1fr;
    }

    .marketing-dashboard-preview {
        grid-template-columns: 1fr;
    }

    .marketing-dashboard-sidebar {
        display: none;
    }

    .marketing-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .marketing-dual-cta,
    .marketing-pricing-strip,
    .marketing-trusted-strip,
    .audience-proof-strip {
        width: calc(100% - 36px);
    }

    .marketing-pricing-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .marketing-pricing-strip .btn {
        width: fit-content;
    }

    .audience-section {
        padding: 58px 18px;
    }

    .audience-section-header h2,
    .audience-split h2 {
        font-size: 2rem;
    }

    .audience-visual,
    .audience-visual img {
        min-height: 380px;
    }
}

@media (max-width: 575.98px) {
    .marketing-logo .brand-wordmark small {
        display: none;
    }

    .marketing-logo .brand-wordmark strong {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .marketing-nav-actions .btn-light {
        display: none;
    }

    .marketing-menu {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .marketing-mobile-toggle span {
        display: none;
    }

    .marketing-menu a,
    .marketing-menu-link {
        min-height: 34px;
        padding: 7px 8px;
        font-size: 0.78rem;
    }

    .marketing-hero h1,
    .audience-hero h1 {
        font-size: 2rem;
    }

    .marketing-badge {
        white-space: normal;
    }

    .marketing-actions .btn,
    .audience-actions .btn,
    .marketing-pricing-strip .btn {
        width: 100%;
    }

    .marketing-benefit-card,
    .marketing-auth-card,
    .marketing-why-card,
    .audience-feature-card,
    .audience-process-grid article,
    .audience-callout {
        padding: 18px;
    }

    .marketing-dashboard-main {
        padding: 16px;
    }

    .marketing-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .marketing-dashboard-grid article {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 3px;
        padding-block: 7px;
        border-bottom: 1px solid var(--marketing-line);
    }

    .marketing-dashboard-grid article:last-child {
        border-bottom: 0;
    }

    .marketing-dual-cta article {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .marketing-trusted-strip strong {
        width: calc(50% - 6px);
        min-width: 0;
        padding-inline: 8px;
        font-size: 0.76rem;
    }

    .audience-visual-panel {
        right: 14px;
        bottom: 14px;
        width: calc(100% - 28px);
        padding: 16px;
    }

    .audience-section-header h2,
    .audience-split h2 {
        font-size: 1.72rem;
    }
}

/* ==========================================================================
   Marketing Footer & Legal Pages Styles
   ========================================================================== */

/* Marketing Footer Styles */
.marketing-footer {
    background: #080C18;
    color: #F8FAFC;
    padding: 80px 24px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.marketing-footer-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
    gap: 60px;
}
.marketing-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.marketing-footer-brand .marketing-logo {
    color: #FFFFFF !important;
}
.marketing-footer-brand .marketing-logo .brand-wordmark strong {
    color: #FFFFFF;
}
.marketing-footer-brand .marketing-logo .brand-wordmark small {
    color: #94A3B8;
}
.marketing-footer-brand .brand-mark span {
    background: #FFFFFF;
}
.marketing-footer-tagline {
    color: #94A3B8;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
    max-width: 360px;
}
.marketing-footer-co-info {
    color: #64748B;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}
.marketing-footer-co-info strong {
    color: #94A3B8;
}
.marketing-footer-links-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.marketing-footer-col h4 {
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 20px;
}
.marketing-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.marketing-footer-col a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 650;
    transition: color 0.2s ease;
}
.marketing-footer-col a:hover {
    color: var(--marketing-primary);
}
.marketing-footer-bottom {
    max-width: 1320px;
    margin: 60px auto 0;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.marketing-footer-bottom p {
    color: #64748B;
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}

.site-legal-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    color: var(--text-muted, #64748b);
    background: var(--surface, #fff);
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: .79rem;
}

.site-legal-bar a {
    color: inherit;
    text-decoration: none;
}

.site-legal-bar a:hover,
.site-legal-bar a:focus-visible {
    color: var(--primary, #6d28d9);
    text-decoration: underline;
}

/* Legal Pages Styling */
.legal-page-container {
    max-width: 900px;
    margin: 60px auto 100px;
    padding: 0 24px;
}
.legal-page-header {
    margin-bottom: 40px;
    border-bottom: 1px solid var(--marketing-line);
    padding-bottom: 24px;
}
.legal-page-header h1 {
    font-size: 2.8rem;
    font-weight: 950;
    color: var(--marketing-ink);
    margin-bottom: 12px;
    line-height: 1.1;
}
.legal-page-meta {
    font-size: 0.9rem;
    color: var(--marketing-muted);
    font-weight: 650;
}
.legal-toc {
    background: #F8F6FF;
    border: 1px solid rgba(91, 44, 225, 0.12);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 40px;
}
.legal-toc h2 {
    font-size: 1.1rem;
    font-weight: 850;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--marketing-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.legal-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.legal-toc a {
    color: var(--marketing-ink);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 650;
    transition: color 0.2s ease;
}
.legal-toc a:hover {
    color: var(--marketing-primary);
}
.legal-content section {
    margin-bottom: 40px;
}
.legal-content h2 {
    font-size: 1.6rem;
    font-weight: 850;
    color: var(--marketing-ink);
    margin-top: 0;
    margin-bottom: 16px;
    scroll-margin-top: 100px;
}
.legal-content p, .legal-content li {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--marketing-muted);
    font-weight: 650;
    margin-bottom: 16px;
}
.legal-content ul, .legal-content ol {
    margin-bottom: 20px;
    padding-left: 20px;
}
.legal-content li {
    margin-bottom: 8px;
}
.legal-content strong {
    color: var(--marketing-ink);
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}
.legal-table th, .legal-table td {
    border: 1px solid var(--marketing-line);
    padding: 12px 16px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
}
.legal-table th {
    background: #F8F6FF;
    color: var(--marketing-ink);
    font-weight: 850;
}
.legal-table td {
    color: var(--marketing-muted);
    font-weight: 650;
}

@media (max-width: 991.98px) {
    .marketing-footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .marketing-footer-links-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    .legal-page-header h1 {
        font-size: 2.2rem;
    }
}
@media (max-width: 575.98px) {
    .marketing-footer {
        padding: 60px 16px 30px;
    }
    .marketing-footer-links-group {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .legal-toc ul {
        grid-template-columns: 1fr;
    }
    .legal-page-header h1 {
        font-size: 1.8rem;
    }
}

/* Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 40px);
    width: min(calc(100% - 32px), 940px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 24px;
    box-shadow: var(--shadow-md);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-consent-banner.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.cookie-consent-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-dark);
    margin: 0;
    font-weight: 500;
}

.cookie-consent-text a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 700;
}

.cookie-consent-text a:hover {
    color: var(--primary-dark);
}

.cookie-consent-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-consent-btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid transparent;
}

.cookie-consent-btn-accept {
    color: #FFFFFF !important;
    background-color: var(--primary);
    background-image: linear-gradient(135deg, #7C3AED 0%, #6D2FF2 100%);
    box-shadow: 0 4px 12px rgba(109, 47, 242, 0.15);
}

.cookie-consent-btn-accept:hover {
    background-color: var(--primary-dark);
    background-image: none;
    box-shadow: 0 6px 16px rgba(109, 47, 242, 0.25);
    transform: translateY(-1px);
}

.cookie-consent-btn-decline {
    color: var(--text-muted) !important;
    background: transparent;
}

.cookie-consent-btn-decline:hover {
    color: var(--text-dark) !important;
    background: var(--primary-soft);
}

@media (max-width: 767.98px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
        bottom: 16px;
        width: calc(100% - 24px);
    }
    
    .cookie-consent-actions {
        justify-content: flex-end;
    }
}

.service-thumb {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    overflow: hidden;
    background: var(--surface-muted);
    color: var(--text-muted);
}

.service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-days-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.service-image-preview {
    min-height: 150px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-muted);
}

.service-image-preview img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
}

.service-editor-form > .col-12:last-child {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: .75rem;
    padding-bottom: .75rem;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border);
}

.booking-body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(246, 248, 252, 0.96), rgba(236, 241, 247, 0.98)),
        #f6f8fc;
    color: var(--text-dark);
}

.booking-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.booking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

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

.booking-brand img,
.booking-brand span {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex: 0 0 48px;
}

.booking-brand img {
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface);
}

.booking-brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.booking-brand strong {
    display: block;
    min-width: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.booking-hero,
.booking-confirmation,
.booking-empty,
.booking-alert,
.booking-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.booking-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 24px;
    align-items: end;
    padding: 30px;
    margin-bottom: 18px;
}

.booking-hero h1,
.booking-confirmation h1,
.booking-empty h1,
.booking-empty h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1;
    color: var(--text-dark);
    letter-spacing: 0;
}

.booking-hero p,
.booking-confirmation p,
.booking-empty p {
    margin: 10px 0 0;
    color: var(--text-muted);
    max-width: 680px;
}

.booking-contact-list {
    display: grid;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.booking-contact-list span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    overflow-wrap: anywhere;
}

.booking-alert {
    padding: 14px 18px;
    margin-bottom: 18px;
    border-color: rgba(220, 53, 69, 0.2);
    background: #fff5f5;
}

.booking-alert p {
    margin: 0;
    color: #9f1239;
    font-weight: 700;
}

.booking-alert-success {
    border-color: rgba(16, 185, 129, 0.25);
    background: #ecfdf5;
}

.booking-alert-success p {
    color: #047857;
}

.booking-planner,
.booking-final-form {
    display: grid;
    gap: 18px;
}

.booking-final-form {
    margin-top: 18px;
}

.booking-step {
    padding: 24px;
    min-width: 0;
}

.booking-step-heading {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.booking-step-heading > span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 900;
}

.booking-step-heading h2 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.25;
}

.booking-step-heading p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.booking-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.booking-service-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    min-height: 104px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.booking-service-card.selected,
.booking-service-card:has(input:checked) {
    border-color: rgba(66, 87, 212, 0.45);
    box-shadow: 0 0 0 3px rgba(66, 87, 212, 0.11);
}

.booking-service-card input,
.booking-slot input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-service-image {
    width: 72px;
    height: 82px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-muted);
    color: var(--text-muted);
}

.booking-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-service-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.booking-service-copy strong {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.booking-service-copy small,
.booking-service-copy em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.84rem;
}

.booking-service-copy em {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.booking-date-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.booking-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}

.booking-slot {
    min-height: 70px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 2px;
    align-content: center;
    padding: 10px 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.booking-slot:has(input:checked) {
    border-color: rgba(23, 163, 74, 0.5);
    box-shadow: 0 0 0 3px rgba(23, 163, 74, 0.12);
}

.booking-slot strong {
    font-size: 1.08rem;
    line-height: 1.1;
}

.booking-slot small {
    color: var(--text-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.booking-muted-box {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 18px;
    background: var(--surface-muted);
    color: var(--text-muted);
}

.booking-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.booking-summary-list div {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.booking-summary-list dt {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.booking-summary-list dd {
    margin: 0;
    color: var(--text-dark);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.booking-confirmation,
.booking-empty {
    padding: 34px;
    text-align: center;
}

.booking-success-icon,
.booking-mark {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.7rem;
}

.booking-success-icon {
    background: rgba(23, 163, 74, 0.12);
    color: #15803d;
}

.booking-mark {
    background: var(--primary-soft);
    color: var(--primary);
}

.booking-confirmation .booking-summary-list {
    margin-top: 22px;
    text-align: left;
}

@media (max-width: 767.98px) {
    .booking-shell {
        width: min(100% - 20px, 1120px);
        padding-top: 16px;
    }

    .booking-header,
    .booking-hero {
        align-items: stretch;
    }

    .booking-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .booking-step,
    .booking-confirmation,
    .booking-empty {
        padding: 18px;
    }

    .booking-date-row {
        grid-template-columns: 1fr;
    }

    .booking-date-row .btn {
        width: 100%;
    }

    .booking-service-grid,
    .booking-slot-grid,
    .booking-summary-list {
        grid-template-columns: 1fr;
    }
}

.ai-voice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.ai-voice-body {
    display: grid;
    gap: 1rem;
}

.ai-voice-state-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ai-voice-state-list span {
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.42rem 0.58rem;
}

.ai-voice-state-list span.active {
    border-color: rgba(66, 87, 212, 0.24);
    color: var(--primary);
    background: var(--primary-soft);
}

.ai-voice-status {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.75rem 0.85rem;
}

.ai-voice-status[data-state="listening"],
.ai-voice-status[data-state="processing"] {
    border-color: rgba(66, 87, 212, 0.24);
    color: var(--primary);
    background: var(--primary-soft);
}

.ai-voice-status[data-state="missing_data"] {
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400E;
    background: #FFFBEB;
}

.ai-voice-status[data-state="success"] {
    border-color: rgba(34, 197, 94, 0.3);
    color: #166534;
    background: #F0FDF4;
}

.ai-voice-status[data-state="error"] {
    border-color: rgba(239, 68, 68, 0.28);
    color: #991B1B;
    background: #FEF2F2;
}

.ai-voice-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #FFFFFF;
    padding: 1rem;
}

.ai-voice-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.ai-voice-preview-header h3 {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 850;
    margin: 0.2rem 0 0;
}

.ai-voice-preview dl {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.ai-voice-preview dl div {
    display: grid;
    grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
    gap: 0.75rem;
    border-top: 1px solid var(--border);
    padding-top: 0.55rem;
}

.ai-voice-preview dt {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ai-voice-preview dd {
    color: var(--text-dark);
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.ai-voice-actions {
    gap: 0.5rem;
}

.ai-voice-actions .is-recording {
    color: #991B1B;
    border-color: rgba(239, 68, 68, 0.28);
    background: #FEF2F2;
}

@media (max-width: 575.98px) {
    .ai-voice-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-voice-actions .btn {
        width: 100%;
    }

    .ai-voice-preview dl div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

.customer-portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 20px;
    align-items: end;
    margin-bottom: 20px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.customer-portal-hero h2 {
    margin: 8px 0 8px;
    font-size: clamp(1.6rem, 2.4vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.customer-portal-hero p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-weight: 600;
    line-height: 1.55;
}

.customer-portal-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.customer-portal-hero-metrics span {
    min-width: 0;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.customer-portal-hero-metrics strong {
    display: block;
    color: var(--text-dark);
    font-size: 1.35rem;
    line-height: 1.1;
}

.customer-portal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.65fr);
    gap: 20px;
    align-items: start;
}

.customer-portal-main,
.customer-portal-side,
.customer-section,
.customer-offer-list,
.customer-journal-list,
.customer-notification-list,
.customer-timeline-list,
.customer-message-list {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.customer-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.customer-section-heading h3 {
    margin: 5px 0 0;
    color: var(--text-dark);
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.22;
}

.customer-next-appointment {
    display: grid;
    gap: 16px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.customer-appointment-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.customer-appointment-date {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 132px;
    padding: 16px;
    color: #FFFFFF;
    background: #0F766E;
    border-radius: 8px;
}

.customer-appointment-date strong {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.customer-appointment-date span {
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.customer-appointment-body {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 2px 0;
}

.customer-appointment-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.customer-appointment-title-row h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.22;
}

.customer-appointment-title-row p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-weight: 700;
}

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

.customer-detail-grid div,
.customer-settings-list div {
    min-width: 0;
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.customer-detail-grid dt,
.customer-settings-list dt {
    margin-bottom: 4px;
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.customer-detail-grid dd,
.customer-settings-list dd {
    margin: 0;
    color: #1E293B;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.customer-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.customer-quick-link {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    min-height: 88px;
    padding: 16px;
    color: var(--text-dark);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.customer-quick-link:hover,
.customer-quick-link:focus {
    color: var(--text-dark);
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.customer-quick-link i {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #0F766E;
    background: rgba(15, 118, 110, 0.10);
    border-radius: 8px;
    font-size: 1.1rem;
}

.customer-quick-link:nth-child(2) i {
    color: #2563EB;
    background: rgba(37, 99, 235, 0.10);
}

.customer-quick-link:nth-child(3) i {
    color: #B45309;
    background: rgba(180, 83, 9, 0.12);
}

.customer-quick-link:nth-child(4) i {
    color: #6D2FF2;
    background: rgba(109, 47, 242, 0.10);
}

.customer-quick-link span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.customer-quick-link strong {
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-quick-link small {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.customer-empty-state {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    padding: 16px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
}

.customer-empty-state.compact {
    padding: 14px;
}

.customer-empty-state > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #2563EB;
    background: rgba(37, 99, 235, 0.10);
    border-radius: 8px;
}

.customer-empty-state h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 900;
}

.customer-empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.45;
}

.customer-offer-item,
.customer-journal-item,
.customer-notification-item,
.customer-timeline-item,
.customer-message-item {
    min-width: 0;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.customer-offer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.customer-offer-item strong,
.customer-place-card strong,
.customer-journal-item strong,
.customer-timeline-item strong,
.customer-message-item strong,
.customer-notification-item strong,
.customer-notification-item a {
    display: block;
    color: var(--text-dark);
    font-weight: 900;
    line-height: 1.3;
    text-decoration: none;
}

.customer-offer-item small,
.customer-place-card small,
.customer-journal-item small,
.customer-timeline-item small,
.customer-message-item small,
.customer-notification-item small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.customer-offer-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}

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

.customer-place-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.customer-place-card .btn {
    grid-column: 1 / -1;
    justify-self: start;
}

.customer-place-card p,
.customer-journal-item p,
.customer-timeline-item p,
.customer-message-item p,
.customer-notification-item p {
    margin: 8px 0 0;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.customer-place-logo,
.customer-journal-item > span,
.customer-notification-item > i {
    display: inline-grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    overflow: hidden;
    color: #0F766E;
    background: rgba(15, 118, 110, 0.10);
    border-radius: 8px;
}

.customer-place-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-journal-item,
.customer-notification-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.customer-journal-item > div,
.customer-notification-item > div {
    min-width: 0;
}

.customer-notification-item.unread,
.customer-message-item.unread {
    border-color: rgba(37, 99, 235, 0.36);
    background: #F8FBFF;
}

.customer-timeline-item,
.customer-message-item {
    display: grid;
    gap: 4px;
}

.customer-settings-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.customer-bottom-nav {
    display: none;
}

@media (max-width: 1199.98px) {
    .customer-portal-layout,
    .customer-portal-hero {
        grid-template-columns: 1fr;
    }

    .customer-portal-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .customer-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-portal-side,
    .customer-place-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .dashboard-body:has(.customer-bottom-nav) .main-content {
        padding-bottom: 92px;
    }

    .customer-portal-hero,
    .customer-next-appointment {
        padding: 18px;
    }

    .customer-portal-hero-metrics,
    .customer-detail-grid {
        grid-template-columns: 1fr;
    }

    .customer-appointment-card {
        grid-template-columns: 1fr;
    }

    .customer-appointment-date {
        grid-template-columns: auto auto;
        justify-content: start;
        justify-items: start;
        gap: 8px;
        min-height: 0;
    }

    .customer-appointment-title-row,
    .customer-offer-item,
    .customer-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-offer-meta {
        justify-content: space-between;
        width: 100%;
    }

    .customer-bottom-nav {
        position: fixed;
        right: 12px;
        bottom: 12px;
        left: 12px;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(12px);
    }

    .customer-bottom-nav a {
        display: grid;
        gap: 2px;
        min-width: 0;
        min-height: 48px;
        place-items: center;
        color: #475569;
        text-decoration: none;
        border-radius: 8px;
        font-size: 0.68rem;
        font-weight: 900;
    }

    .customer-bottom-nav a:focus,
    .customer-bottom-nav a:hover {
        color: #0F766E;
        background: rgba(15, 118, 110, 0.10);
    }

    .customer-bottom-nav i {
        font-size: 1.05rem;
        line-height: 1;
    }
}

@media (max-width: 575.98px) {
    .customer-portal-hero h2 {
        font-size: 1.55rem;
    }

    .customer-quick-grid {
        grid-template-columns: 1fr;
    }

    .customer-quick-link {
        min-height: 72px;
    }
}

/* Flow-inspired visual refresh */
:root {
    --primary: #6424F3;
    --primary-dark: #4E16D4;
    --primary-light: #F1E8FF;
    --primary-soft: #FAF7FF;
    --accent-blue: #3478F6;
    --accent-teal: #26B99A;
    --accent-amber: #FFAA46;
    --accent-rose: #F0529C;
    --text-dark: #090B1F;
    --text-muted: #69718C;
    --border: #E9E5F4;
    --surface-muted: #F8F7FC;
    --body-bg: #FCFBFF;
    --radius: 18px;
    --flow-gradient: linear-gradient(135deg, #7C3AED 0%, #6424F3 54%, #4817CC 100%);
    --flow-tint: linear-gradient(135deg, rgba(246, 240, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 54%, rgba(255, 243, 234, 0.84) 100%);
    --shadow-sm: 0 1px 2px rgba(22, 16, 48, 0.035), 0 18px 42px rgba(22, 16, 48, 0.055);
    --shadow-md: 0 16px 36px rgba(22, 16, 48, 0.08), 0 30px 72px rgba(22, 16, 48, 0.10);
}

body,
.dashboard-body,
.brand-body,
.auth-body {
    background:
        radial-gradient(circle at 14% -8%, rgba(100, 36, 243, 0.085), transparent 30rem),
        radial-gradient(circle at 92% 10%, rgba(255, 170, 70, 0.08), transparent 26rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--body-bg) 46%, #FFFFFF 100%);
}

.brand-wordmark strong {
    color: var(--primary);
    font-size: 1.34rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: lowercase;
}

.brand-wordmark small {
    margin-top: 5px;
    color: var(--primary);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.brand-mark {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    order: 2;
    margin-left: -8px;
    align-self: flex-start;
}

.brand-mark::before,
.brand-mark::after,
.brand-mark > span {
    background: var(--flow-gradient);
    border-radius: 3px;
    box-shadow: 0 8px 16px rgba(100, 36, 243, 0.18);
}

.brand-mark:has(> span)::before,
.brand-mark:has(> span)::after {
    display: block;
}

.brand-mark::before {
    top: 2px;
    left: 7px;
    width: 6px;
    height: 14px;
}

.brand-mark::after {
    top: 6px;
    left: 3px;
    right: auto;
    bottom: auto;
    width: 14px;
    height: 6px;
    opacity: 1;
}

.brand-mark > span {
    display: none;
}

.sidebar-brand {
    gap: 4px;
    align-items: flex-start;
}

.auth-brand .brand-mark {
    margin-top: 1px;
}

.btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 850;
    letter-spacing: 0;
}

.btn-sm {
    min-height: 36px;
    border-radius: 10px;
}

.btn-primary {
    background-image: var(--flow-gradient);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(100, 36, 243, 0.26);
}

.btn-primary:hover,
.btn-primary:focus {
    filter: saturate(1.04) brightness(1.02);
    transform: translateY(-1px);
}

.btn-light,
.btn-outline-primary {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(100, 36, 243, 0.22);
    box-shadow: 0 10px 26px rgba(25, 20, 58, 0.045);
}

.form-control,
.form-select {
    min-height: 48px;
    border-color: #E8E3F2;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(100, 36, 243, 0.58);
    box-shadow: 0 0 0 0.24rem rgba(100, 36, 243, 0.13);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.desktop-sidebar,
.brand-sidebar {
    background: rgba(255, 255, 255, 0.82);
    border-right-color: rgba(232, 227, 242, 0.86);
    box-shadow: 12px 0 38px rgba(31, 23, 77, 0.04);
    backdrop-filter: blur(18px);
}

.sidebar,
.brand-sidebar {
    padding: 30px 18px 22px;
}

.sidebar-link,
.brand-sidebar-link {
    min-height: 46px;
    padding: 11px 13px;
    color: #4A536F;
    border-radius: 12px;
    font-weight: 820;
}

.sidebar-link i,
.brand-sidebar-link i {
    color: #566080;
}

.sidebar-link:hover,
.sidebar-link:focus,
.brand-sidebar-link:hover,
.brand-sidebar-link:focus {
    color: var(--primary);
    background: rgba(241, 232, 255, 0.78);
    border-color: rgba(100, 36, 243, 0.12);
}

.sidebar-link.active,
.brand-sidebar-link.active {
    color: var(--primary);
    background: linear-gradient(90deg, rgba(100, 36, 243, 0.14), rgba(238, 222, 255, 0.54));
    border-color: rgba(100, 36, 243, 0.16);
    box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-link.active i,
.brand-sidebar-link.active i {
    color: var(--primary);
}

.brand-help-card,
.sidebar-creator-card,
.sidebar-store-card {
    background: linear-gradient(135deg, #F3EAFE 0%, #FFFFFF 54%, #FFF1E6 100%);
    border-color: rgba(100, 36, 243, 0.14);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(100, 36, 243, 0.08);
}

.brand-help-icon,
.register-choice-icon,
.empty-icon,
.metric-card-icon {
    color: var(--primary);
    background: linear-gradient(135deg, rgba(100, 36, 243, 0.13), rgba(240, 82, 156, 0.09));
    border-radius: 14px;
}

.topbar,
.brand-topbar {
    min-height: 80px;
    padding: 16px 30px;
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(232, 227, 242, 0.84);
    backdrop-filter: blur(20px);
}

.brand-topbar-title span {
    color: var(--text-muted);
    letter-spacing: 0;
}

.brand-topbar-title h1 {
    font-size: 1.26rem;
}

.icon-button,
.user-chip,
.brand-account-chip {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(232, 227, 242, 0.95);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(22, 16, 48, 0.05);
}

.icon-button:hover,
.icon-button:focus,
.user-chip:hover,
.user-chip:focus,
.brand-account-chip:hover,
.brand-account-chip:focus {
    color: var(--primary);
    background: #FFFFFF;
    border-color: rgba(100, 36, 243, 0.30);
}

.topbar-badge.has-count,
.nav-badge.has-count,
.brand-nav-badge {
    background: var(--flow-gradient);
    box-shadow: 0 8px 18px rgba(100, 36, 243, 0.24);
}

.main-content {
    max-width: 1520px;
    padding: 30px;
}

.brand-main-content {
    width: 100%;
    max-width: 1580px;
    min-height: auto;
    margin: 0 auto;
    padding: 30px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-page-heading,
.page-heading {
    margin-bottom: 24px;
}

.app-page-heading h2,
.page-heading h2 {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
    font-weight: 950;
    letter-spacing: 0;
}

.app-page-heading p,
.page-heading-subtitle {
    color: var(--text-muted);
    font-weight: 650;
}

.content-panel,
.dashboard-card,
.metric-card,
.campaign-card,
.table-card,
.auth-card,
.dropdown-menu,
.modal-content {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(232, 227, 242, 0.96);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
}

.content-panel {
    padding: 26px;
}

.dashboard-card,
.metric-card,
.table-card {
    padding: 22px;
}

.metric-card {
    overflow: hidden;
    min-height: 136px;
}

.metric-card:hover,
.campaign-card:hover {
    border-color: rgba(100, 36, 243, 0.22);
    box-shadow: var(--shadow-md);
}

.metric-card-label,
.section-label {
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
}

.metric-card-value {
    font-size: 1.95rem;
    font-weight: 950;
}

.table-card {
    overflow: hidden;
    padding: 0;
}

.table-card-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(232, 227, 242, 0.9);
}

.table > :not(caption) > * > * {
    padding: 18px 20px;
    border-bottom-color: #ECE8F5;
}

.table thead th {
    color: #64708F;
    background: #FBFAFE;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
}

.table tbody tr:hover {
    background: #FCFAFF;
}

.status-badge {
    min-height: 24px;
    padding-inline: 10px;
    border-radius: 999px;
    font-weight: 850;
}

.status-badge.primary {
    color: var(--primary);
    background: #F0E8FF;
}

.status-badge.success {
    color: #07916F;
    background: #EAFBF6;
}

.status-badge.warning {
    color: #B45F06;
    background: #FFF4E6;
}

.status-badge.danger {
    color: #D12D64;
    background: #FFF0F5;
}

.campaign-platform-tabs,
.admin-wall-tabs,
.appointment-tabs {
    gap: 10px;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(232, 227, 242, 0.92);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(22, 16, 48, 0.045);
}

.campaign-platform-tab,
.admin-wall-tabs .nav-link,
.appointment-tabs .nav-link {
    min-height: 38px;
    color: #566080;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 850;
}

.campaign-platform-tab:hover,
.campaign-platform-tab.active,
.admin-wall-tabs .nav-link:hover,
.admin-wall-tabs .nav-link.active,
.appointment-tabs .nav-link:hover,
.appointment-tabs .nav-link.active {
    color: var(--primary);
    background: #FFFFFF;
    border-color: rgba(100, 36, 243, 0.20);
    box-shadow: 0 10px 22px rgba(100, 36, 243, 0.09);
}

.admin-wall-tabs .nav-link.active {
    color: var(--primary);
    background: #FFFFFF;
}

.list-group-item {
    border-color: rgba(232, 227, 242, 0.86);
}

.list-group-item-action {
    color: #4A536F;
    font-weight: 750;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--primary);
    background: var(--primary-soft);
}

.customer-portal-hero,
.customer-next-appointment {
    background: var(--flow-tint);
    border-color: rgba(232, 227, 242, 0.96);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
}

.customer-portal-hero {
    align-items: center;
    padding: 30px;
}

.customer-portal-hero h2 {
    color: var(--text-dark);
    font-weight: 950;
}

.customer-portal-hero p {
    color: var(--text-muted);
}

.customer-portal-hero-metrics span,
.customer-detail-grid div,
.customer-settings-list div {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(232, 227, 242, 0.9);
    border-radius: 16px;
}

.customer-appointment-date {
    color: var(--primary);
    background:
        radial-gradient(circle at 72% 22%, rgba(240, 82, 156, 0.20), transparent 40%),
        linear-gradient(135deg, #EFE5FF, #FFFFFF 64%, #FFF0E6);
    border: 1px solid rgba(100, 36, 243, 0.16);
    border-radius: 18px;
}

.customer-quick-grid {
    gap: 14px;
}

.customer-quick-link {
    min-height: 96px;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(232, 227, 242, 0.96);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.customer-quick-link:hover,
.customer-quick-link:focus {
    border-color: rgba(100, 36, 243, 0.24);
    box-shadow: var(--shadow-md);
}

.customer-quick-link strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.customer-quick-link small {
    overflow-wrap: anywhere;
}

.customer-quick-link i,
.customer-empty-state > span,
.customer-place-logo,
.customer-journal-item > span,
.customer-notification-item > i {
    color: var(--primary);
    background: linear-gradient(135deg, rgba(100, 36, 243, 0.13), rgba(240, 82, 156, 0.08));
    border-radius: 15px;
}

.customer-quick-link:nth-child(2) i {
    color: var(--accent-blue);
    background: rgba(52, 120, 246, 0.10);
}

.customer-quick-link:nth-child(3) i {
    color: var(--accent-rose);
    background: rgba(240, 82, 156, 0.10);
}

.customer-quick-link:nth-child(4) i {
    color: var(--accent-teal);
    background: rgba(38, 185, 154, 0.11);
}

.customer-offer-item,
.customer-journal-item,
.customer-notification-item,
.customer-timeline-item,
.customer-message-item,
.customer-place-card,
.customer-empty-state {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(232, 227, 242, 0.94);
    border-radius: 16px;
}

.customer-notification-item.unread,
.customer-message-item.unread {
    border-color: rgba(100, 36, 243, 0.28);
    background: #FCFAFF;
}

.customer-stories-panel,
.customer-feed-card,
.customer-exclusive-offer,
.customer-followed-updates {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin-bottom: 20px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(232, 227, 242, 0.96);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
}

.customer-story-strip,
.customer-followed-strip {
    display: grid;
    grid-auto-columns: minmax(104px, 1fr);
    grid-auto-flow: column;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 8px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.customer-story-item,
.customer-followed-card {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--text-dark);
    text-align: center;
    text-decoration: none;
}

.customer-story-ring {
    position: relative;
    display: inline-grid;
    width: 82px;
    height: 82px;
    place-items: center;
    padding: 4px;
    color: var(--primary);
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(135deg, #E79CFF, #6424F3 54%, #FFB199) border-box;
    border: 3px solid transparent;
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(100, 36, 243, 0.12);
}

.customer-story-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.customer-story-ring i {
    display: inline-grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: linear-gradient(135deg, #F4EDFF, #FFF7F0);
    border-radius: inherit;
    font-size: 1.35rem;
}

.customer-story-item.is-add .customer-story-ring::after {
    position: absolute;
    right: -1px;
    bottom: 4px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #FFFFFF;
    background: var(--flow-gradient);
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    content: "+";
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1;
}

.customer-story-item strong,
.customer-followed-card strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.2;
}

.customer-story-item small,
.customer-followed-card small {
    max-width: 100%;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.2;
}

.customer-feed-post {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.customer-feed-post header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.customer-feed-avatar,
.customer-exclusive-icon,
.customer-followed-card > span {
    display: inline-grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    overflow: hidden;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(100, 36, 243, 0.13), rgba(240, 82, 156, 0.09));
    border-radius: 16px;
}

.customer-feed-avatar img,
.customer-followed-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-feed-post header strong,
.customer-feed-post header small {
    display: block;
}

.customer-feed-post header strong {
    color: var(--text-dark);
    font-weight: 950;
}

.customer-feed-post header small {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 750;
}

.customer-feed-post p {
    margin: 0;
    color: #303851;
    font-weight: 650;
    line-height: 1.55;
}

.customer-feed-media {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #F1F5F9;
    border-radius: 18px;
}

.customer-feed-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-feed-post footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.customer-feed-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    color: #5B647E;
    background: #FFFFFF;
    border: 1px solid rgba(232, 227, 242, 0.96);
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
}

.customer-feed-action:hover,
.customer-feed-action:focus,
.customer-feed-action.is-active {
    color: var(--primary);
    background: #F4EDFF;
    border-color: rgba(100, 36, 243, 0.22);
}

.customer-exclusive-offer {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    background: linear-gradient(135deg, #F4EDFF 0%, #FFFFFF 54%, #FFF1E7 100%);
}

.customer-exclusive-offer strong {
    display: block;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 950;
}

.customer-exclusive-offer p {
    margin: 4px 0 0;
    color: #4E5872;
    font-weight: 650;
    line-height: 1.4;
}

.customer-exclusive-dismiss {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #68708A;
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.customer-exclusive-dismiss:hover,
.customer-exclusive-dismiss:focus {
    color: var(--primary);
    background: rgba(100, 36, 243, 0.08);
}

.customer-followed-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-auto-flow: row;
    align-items: center;
    justify-items: start;
    min-width: 220px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(232, 227, 242, 0.96);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(22, 16, 48, 0.045);
    text-align: left;
}

.customer-followed-card > span {
    grid-row: span 2;
}

@media (max-width: 991.98px) {
    .main-content,
    .brand-main-content {
        padding: 22px 18px;
    }

    .topbar,
    .brand-topbar {
        min-height: 68px;
        padding: 12px 18px;
    }
}

@media (max-width: 767.98px) {
    .dashboard-body:has(.customer-bottom-nav) .topbar {
        position: static;
        border-bottom: 0;
        background: transparent;
        box-shadow: none;
    }

    .dashboard-body:has(.customer-bottom-nav) .main-content {
        padding: 18px 14px 112px;
    }

    .customer-portal-hero {
        gap: 18px;
        padding: 22px;
        border-radius: 22px;
    }

    .customer-stories-panel,
    .customer-feed-card,
    .customer-exclusive-offer,
    .customer-followed-updates {
        padding: 18px;
        border-radius: 20px;
    }

    .customer-next-appointment,
    .content-panel.customer-section {
        padding: 20px;
        border-radius: 20px;
    }

    .customer-appointment-date {
        grid-template-columns: auto auto;
        width: fit-content;
        min-width: 104px;
        padding-inline: 18px;
    }

    .customer-bottom-nav {
        right: 18px;
        bottom: 18px;
        left: 18px;
        gap: 2px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(232, 227, 242, 0.96);
        border-radius: 28px;
        box-shadow: 0 18px 48px rgba(25, 20, 58, 0.16);
        backdrop-filter: blur(18px);
    }

    .customer-bottom-nav a {
        min-height: 58px;
        color: #4F5873;
        border-radius: 20px;
        font-size: 0.72rem;
    }

    .customer-bottom-nav a:first-child {
        color: var(--primary);
        background: #F3EAFF;
    }

    .customer-bottom-nav a:focus,
    .customer-bottom-nav a:hover {
        color: var(--primary);
        background: #F3EAFF;
    }

    .customer-bottom-nav i {
        font-size: 1.18rem;
    }

    .customer-exclusive-offer {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .customer-exclusive-offer .btn {
        grid-column: 2;
        justify-self: start;
    }

    .customer-exclusive-dismiss {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 575.98px) {
    .brand-wordmark strong {
        font-size: 1.18rem;
    }

    .main-content,
    .brand-main-content {
        padding: 16px 12px;
    }

    .content-panel,
    .dashboard-card,
    .metric-card {
        padding: 18px;
    }

    .campaign-platform-tabs,
    .admin-wall-tabs,
    .appointment-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .campaign-platform-tabs::-webkit-scrollbar,
    .admin-wall-tabs::-webkit-scrollbar,
    .appointment-tabs::-webkit-scrollbar {
        display: none;
    }

    .campaign-platform-tab,
    .admin-wall-tabs .nav-link,
    .appointment-tabs .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .customer-portal-hero h2 {
        font-size: 1.82rem;
    }

    .customer-story-strip {
        grid-auto-columns: 92px;
        gap: 12px;
    }

    .customer-story-ring {
        width: 74px;
        height: 74px;
    }

    .customer-feed-media {
        aspect-ratio: 4 / 3;
    }

    .customer-quick-link {
        min-height: 80px;
    }
}

/* Flowwwe-inspired workspace refresh */
:root {
    --primary: #5B20F0;
    --primary-dark: #4212C8;
    --primary-light: #F1E9FF;
    --primary-soft: #F8F5FF;
    --accent-blue: #2870EA;
    --accent-teal: #14A884;
    --accent-amber: #E5A524;
    --accent-rose: #F0529C;
    --text-dark: #11142D;
    --text-muted: #66708E;
    --border: #E6E9F3;
    --success: #18B47E;
    --warning: #E7A923;
    --danger: #EF3E61;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FE;
    --body-bg: #FBFCFF;
    --sidebar-width: 248px;
    --radius: 10px;
    --flow-gradient: linear-gradient(135deg, #6D2FF2 0%, #5B20F0 56%, #4212C8 100%);
    --flow-tint: linear-gradient(135deg, rgba(244, 238, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 58%, rgba(255, 248, 239, 0.86) 100%);
    --shadow-sm: 0 1px 2px rgba(20, 24, 48, 0.035), 0 10px 28px rgba(20, 24, 48, 0.04);
    --shadow-md: 0 14px 34px rgba(20, 24, 48, 0.075), 0 24px 56px rgba(20, 24, 48, 0.08);
}

body,
.dashboard-body,
.brand-body,
.auth-body {
    color: var(--text-dark);
    background:
        radial-gradient(circle at 18% -10%, rgba(91, 32, 240, 0.055), transparent 28rem),
        radial-gradient(circle at 94% 4%, rgba(40, 112, 234, 0.035), transparent 24rem),
        linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 48%, #FFFFFF 100%);
}

.desktop-sidebar,
.sidebar,
.brand-sidebar {
    background: rgba(255, 255, 255, 0.96);
    border-right-color: #E9ECF5;
    box-shadow: none;
    backdrop-filter: none;
}

.sidebar,
.brand-sidebar {
    gap: 20px;
    padding: 28px 16px 18px;
}

.sidebar-brand {
    min-height: 58px;
    padding: 0 4px;
}

.brand-wordmark strong {
    color: var(--primary);
    font-size: 1.52rem;
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: none;
}

.brand-wordmark small {
    margin-top: 4px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
}

.brand-mark {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    margin-left: -5px;
}

.brand-mark::before {
    top: 0;
    left: 7px;
    width: 5px;
    height: 16px;
}

.brand-mark::after {
    top: 5px;
    left: 2px;
    width: 15px;
    height: 5px;
}

.sidebar-nav,
.brand-sidebar-nav {
    gap: 5px;
}

.sidebar-link,
.brand-sidebar-link {
    min-height: 42px;
    padding: 9px 11px;
    color: #34405D;
    border-radius: 8px;
    font-size: 0.93rem;
    font-weight: 720;
}

.sidebar-link i,
.brand-sidebar-link i {
    color: #596482;
    font-size: 1.05rem;
}

.sidebar-link:hover,
.sidebar-link:focus,
.brand-sidebar-link:hover,
.brand-sidebar-link:focus {
    color: var(--primary);
    background: #F4EEFF;
    border-color: transparent;
}

.sidebar-link.active,
.brand-sidebar-link.active {
    color: var(--primary);
    background: #F1EAFF;
    border-color: transparent;
    box-shadow: none;
}

.sidebar-link.active i,
.brand-sidebar-link.active i {
    color: var(--primary);
}

.brand-help-card,
.sidebar-creator-card,
.sidebar-store-card {
    padding: 16px;
    background: linear-gradient(160deg, #FFFFFF 0%, #F8F3FF 68%, #FFF7EF 100%);
    border: 1px solid #E8E5F4;
    border-radius: 10px;
    box-shadow: none;
}

.topbar,
.brand-topbar {
    min-height: 76px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #EBEEF6;
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.brand-topbar-title span {
    color: var(--text-muted);
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
}

.brand-topbar-title h1 {
    color: var(--text-dark);
    font-size: 1.18rem;
    font-weight: 900;
}

.topbar-actions,
.brand-topbar-actions {
    gap: 12px;
}

.icon-button,
.user-chip,
.brand-account-chip {
    background: #FFFFFF;
    border: 1px solid #E5E9F3;
    border-radius: 10px;
    box-shadow: none;
}

.icon-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
    flex-basis: 42px;
}

.user-chip,
.brand-account-chip {
    min-height: 48px;
    padding: 5px 10px 5px 5px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
}

.topbar-badge.has-count,
.nav-badge.has-count,
.brand-nav-badge {
    color: #FFFFFF;
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(91, 32, 240, 0.22);
}

.app-content,
.brand-app-content {
    background: transparent;
}

.main-content,
.brand-main-content {
    width: 100%;
    max-width: 1560px;
    min-height: auto;
    margin: 0 auto;
    padding: 30px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-page-heading,
.page-heading {
    align-items: flex-start;
    margin-bottom: 24px;
}

.app-page-heading h2,
.page-heading h2 {
    color: var(--text-dark);
    font-size: clamp(1.55rem, 1.2vw + 1.15rem, 2.05rem);
    font-weight: 920;
    letter-spacing: 0;
}

.app-page-heading p,
.page-heading-subtitle {
    color: var(--text-muted);
    font-size: 0.96rem;
    font-weight: 620;
}

.btn {
    min-height: 42px;
    border-radius: 8px;
    font-weight: 780;
    letter-spacing: 0;
}

.btn-sm {
    min-height: 34px;
    border-radius: 8px;
}

.btn-primary {
    background-color: var(--primary);
    background-image: var(--flow-gradient);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(91, 32, 240, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    filter: none;
    transform: translateY(-1px);
}

.btn-light,
.btn-outline-primary {
    color: var(--primary);
    background: #FFFFFF;
    border-color: rgba(91, 32, 240, 0.22);
    box-shadow: none;
}

.btn-light:hover,
.btn-light:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: rgba(91, 32, 240, 0.38);
}

.form-control,
.form-select,
.input-group-text {
    min-height: 44px;
    color: var(--text-dark);
    background-color: #FFFFFF;
    border-color: #E3E7F0;
    border-radius: 8px;
    box-shadow: none;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(91, 32, 240, 0.58);
    box-shadow: 0 0 0 0.2rem rgba(91, 32, 240, 0.13);
}

.form-label {
    color: var(--text-dark);
    font-size: 0.86rem;
    font-weight: 760;
}

.content-panel,
.dashboard-card,
.metric-card,
.campaign-card,
.table-card,
.auth-card,
.card,
.dropdown-menu,
.modal-content {
    background: #FFFFFF;
    border: 1px solid #E5E9F3;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}

.content-panel {
    padding: 24px;
}

.dashboard-card,
.metric-card,
.table-card,
.card {
    padding: 20px;
}

.metric-card {
    min-height: 124px;
}

.metric-card:hover,
.campaign-card:hover,
.customer-quick-link:hover,
.customer-quick-link:focus {
    border-color: rgba(91, 32, 240, 0.22);
    box-shadow: 0 12px 28px rgba(20, 24, 48, 0.07);
    transform: translateY(-1px);
}

.metric-card-label,
.section-label {
    color: #6D7691;
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: none;
}

.metric-card-value {
    color: var(--text-dark);
    font-size: 1.9rem;
    font-weight: 920;
}

.metric-card-icon,
.empty-icon,
.brand-help-icon,
.register-choice-icon,
.customer-quick-link i,
.customer-empty-state > span,
.customer-place-logo,
.customer-journal-item > span,
.customer-notification-item > i,
.notification-icon {
    color: var(--primary);
    background: #F1E9FF;
    border-radius: 10px;
}

.metric-card:nth-child(4n+2) .metric-card-icon,
.customer-quick-link:nth-child(2) i,
.notification-icon.message,
.notification-icon.support {
    color: var(--accent-blue);
    background: #EAF2FF;
}

.metric-card:nth-child(4n+3) .metric-card-icon,
.customer-quick-link:nth-child(3) i,
.notification-icon.payment {
    color: var(--accent-teal);
    background: #E9FAF4;
}

.metric-card:nth-child(4n+4) .metric-card-icon,
.customer-quick-link:nth-child(4) i {
    color: #C58A06;
    background: #FFF5D9;
}

.empty-panel {
    min-height: 300px;
}

.empty-icon {
    width: 70px;
    height: 70px;
    font-size: 1.75rem;
}

.table-card {
    overflow: hidden;
    padding: 0;
}

.table-card-header {
    padding: 18px 20px;
    border-bottom: 1px solid #E9ECF5;
}

.table {
    color: var(--text-dark);
}

.table > :not(caption) > * > * {
    padding: 16px 18px;
    border-bottom-color: #EDF0F6;
}

.table thead th {
    color: #64708F;
    background: #FCFDFF;
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: none;
}

.table tbody tr:hover {
    background: #FBFAFF;
}

.table-active,
.table-active > * {
    --bs-table-bg-state: #F8F4FF;
}

.status-badge,
.badge,
.nav-badge,
.brand-nav-badge {
    border-radius: 999px;
    font-weight: 780;
}

.status-badge {
    min-height: 24px;
    padding-inline: 10px;
}

.status-badge.primary,
.text-bg-light {
    color: var(--primary) !important;
    background: #F1E9FF !important;
    border-color: rgba(91, 32, 240, 0.12) !important;
}

.status-badge.success {
    color: #0D9168;
    background: #E9FAF4;
}

.status-badge.warning {
    color: #A86D00;
    background: #FFF5D9;
}

.status-badge.danger {
    color: #D12D64;
    background: #FFF0F5;
}

.status-badge.info,
.badge.text-bg-info {
    color: #2264C9 !important;
    background: #EAF2FF !important;
}

.campaign-platform-tabs,
.admin-wall-tabs,
.appointment-tabs,
.nav-pills {
    gap: 8px;
}

.campaign-platform-tabs,
.admin-wall-tabs,
.appointment-tabs {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.campaign-platform-tab,
.admin-wall-tabs .nav-link,
.appointment-tabs .nav-link,
.nav-pills .nav-link {
    min-height: 40px;
    color: #566080;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 760;
}

.campaign-platform-tab:hover,
.campaign-platform-tab.active,
.admin-wall-tabs .nav-link:hover,
.admin-wall-tabs .nav-link.active,
.appointment-tabs .nav-link:hover,
.appointment-tabs .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-color: var(--primary);
    box-shadow: none;
}

.list-group-item {
    border-color: #E9ECF5;
}

.list-group-item-action {
    color: #3B4563;
    border-radius: 8px;
    font-weight: 720;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--primary);
    background: #F6F1FF;
}

.profile-check,
.notification-settings-row,
.customer-offer-item,
.customer-journal-item,
.customer-notification-item,
.customer-timeline-item,
.customer-message-item,
.customer-place-card,
.customer-empty-state,
.calendar-day-timeline,
.calendar-month-grid,
.calendar-agenda-list,
.payment-method-card,
.payments-help-card {
    background: #FFFFFF;
    border-color: #E5E9F3;
    border-radius: 10px;
}

.notification-menu {
    width: min(92vw, 440px);
    border-radius: 12px;
}

.notification-item {
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
}

.notification-item.read {
    grid-template-columns: 42px minmax(0, 1fr);
}

.notification-item.unread {
    background: #FBFAFF;
    border-color: rgba(91, 32, 240, 0.18);
}

.notification-icon {
    width: 42px;
    height: 42px;
}

.notification-title-row a,
.notification-title-row strong {
    font-size: 0.94rem;
    font-weight: 820;
}

.modal-backdrop.show {
    opacity: 0.48;
}

.modal-content {
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(17, 20, 45, 0.18);
}

.service-thumb,
.service-image-preview,
.timeline-post,
.private-timeline-item,
.recommended-place,
.timeline-comment {
    border-color: #E5E9F3 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
}

.timeline-post,
.private-timeline-item,
.recommended-place {
    box-shadow: var(--shadow-sm) !important;
}

.timeline-avatar,
.private-timeline-icon {
    color: var(--primary) !important;
    background: #F1E9FF !important;
    border-radius: 10px !important;
}

.timeline-media,
.private-timeline-media {
    border-radius: 10px !important;
}

.timeline-tag {
    color: var(--primary) !important;
}

.booking-body {
    background:
        radial-gradient(circle at 16% -8%, rgba(91, 32, 240, 0.06), transparent 26rem),
        linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
}

.booking-service-card,
.customer-portal-hero,
.customer-next-appointment,
.customer-quick-link {
    border-radius: 10px;
}

@media (max-width: 991.98px) {
    .main-content,
    .brand-main-content {
        padding: 22px 18px;
    }

    .topbar,
    .brand-topbar {
        min-height: 68px;
        padding: 12px 18px;
    }
}

@media (max-width: 575.98px) {
    .brand-wordmark strong {
        font-size: 1.32rem;
    }

    .main-content,
    .brand-main-content {
        padding: 16px 12px;
    }

    .content-panel,
    .dashboard-card,
    .metric-card,
    .card {
        padding: 18px;
    }

    .user-chip,
    .brand-account-chip {
        max-width: 48px;
        padding-right: 5px;
    }
}

.business-profile-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) minmax(280px, 360px);
    gap: 20px;
    align-items: start;
}

.business-profile-nav {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 8px;
    padding: 14px;
}

.business-profile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    color: #34405D;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 760;
}

.business-profile-nav a i {
    width: 20px;
    color: #596482;
    text-align: center;
}

.business-profile-nav a:hover,
.business-profile-nav a:focus,
.business-profile-nav a.active {
    color: var(--primary);
    background: #F1EAFF;
}

.business-profile-nav a.active i {
    color: var(--primary);
}

/* Frexima community wall */
body:has(.frexima-community-page) {
    --community-ink: #070A1D;
    --community-muted: #687089;
    --community-line: #E8EBF3;
    --community-purple: #5B20F0;
    --community-purple-deep: #4312C8;
    --community-panel: #FFFFFF;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
}

body:has(.frexima-community-page) .app-page-heading {
    display: none;
}

.brand-body:has(.frexima-community-page) .brand-topbar {
    display: none;
}

.brand-body:has(.frexima-community-page) .brand-main-content,
.dashboard-body:has(.frexima-community-page) .main-content {
    max-width: none;
    padding: 32px 36px 28px;
}

.brand-body:has(.frexima-community-page) .brand-sidebar {
    width: 264px;
    padding: 34px 18px 24px;
    border-right: 0;
    background: linear-gradient(180deg, #080A21 0%, #050719 100%);
}

@media (min-width: 992px) {
    .brand-body:has(.frexima-community-page) .brand-app-content {
        margin-left: 264px;
    }
}

.brand-body:has(.frexima-community-page) .brand-sidebar .brand-wordmark strong,
.brand-body:has(.frexima-community-page) .brand-sidebar .brand-wordmark small {
    color: #FFFFFF !important;
}

.brand-body:has(.frexima-community-page) .brand-sidebar .brand-wordmark small {
    opacity: 0.72;
}

.brand-body:has(.frexima-community-page) .brand-sidebar-link {
    min-height: 54px;
    padding: 13px 16px;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 1rem;
}

.brand-body:has(.frexima-community-page) .brand-sidebar-link i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
}

.brand-body:has(.frexima-community-page) .brand-sidebar-link:hover,
.brand-body:has(.frexima-community-page) .brand-sidebar-link:focus,
.brand-body:has(.frexima-community-page) .brand-sidebar-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #6228F4, #4510C8) !important;
    border-color: transparent !important;
}

.brand-body:has(.frexima-community-page) .brand-sidebar-link:hover i,
.brand-body:has(.frexima-community-page) .brand-sidebar-link:focus i,
.brand-body:has(.frexima-community-page) .brand-sidebar-link.active i {
    color: #FFFFFF !important;
}

.brand-body:has(.frexima-community-page) .brand-sidebar-section-label,
.brand-body:has(.frexima-community-page) .brand-help-card {
    display: none;
}

.frexima-community-page,
.frexima-community-page * {
    letter-spacing: 0;
}

.frexima-community-page {
    display: grid;
    gap: 24px;
    min-height: calc(100vh - 64px);
    color: var(--community-ink);
}

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

.community-hero h1 {
    margin: 0;
    color: var(--community-ink);
    font-size: clamp(1.65rem, 2.1vw, 2.35rem);
    font-weight: 940;
    line-height: 1.1;
}

.community-hero p {
    margin: 8px 0 0;
    color: var(--community-muted);
    font-size: 1.02rem;
    font-weight: 620;
}

.community-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.community-icon-button,
.community-avatar-button {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #11152D;
    background: #FFFFFF;
    border: 1px solid var(--community-line);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.06);
}

.community-avatar-button {
    overflow: hidden;
    color: #FFFFFF;
    background: var(--community-purple);
    font-weight: 900;
}

.community-avatar-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-new-post {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 8px;
}

.community-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--community-line);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.045);
}

.community-mode-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    gap: 10px;
    color: #1B213C;
    text-decoration: none;
    font-weight: 820;
}

.community-mode-switch a.active {
    color: var(--community-purple);
    background: #FBF9FF;
    box-shadow: inset 0 0 0 1px var(--community-purple);
}

.community-composer {
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--community-line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.07);
}

.community-shell {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) minmax(320px, 420px);
    gap: 18px;
    align-items: start;
}

.community-time-rail {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 0;
    padding-top: 24px;
    color: #222944;
    font-size: 0.84rem;
    font-weight: 760;
}

.community-time-row {
    position: relative;
    min-height: 142px;
    padding-right: 20px;
    text-align: right;
}

.community-time-row::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 0;
    width: 9px;
    height: 9px;
    background: var(--community-purple);
    border-radius: 999px;
    box-shadow: 0 0 0 5px #F0E9FF;
}

.community-time-row::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 4px;
    width: 1px;
    height: calc(100% - 18px);
    background: #CFC4FF;
}

.community-time-row:last-child::after {
    display: none;
}

.community-main-panel,
.community-search-panel,
.community-private-panel {
    background: #FFFFFF;
    border: 1px solid var(--community-line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.06);
}

.community-main-panel {
    overflow: hidden;
}

.community-category-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--community-line);
    scrollbar-width: none;
}

.community-category-bar::-webkit-scrollbar {
    display: none;
}

.community-category-more {
    flex: 0 0 auto;
}

.community-chip,
.community-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 8px;
    padding: 0 14px;
    color: #26304A;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 760;
    white-space: nowrap;
}

.community-chip.active,
.community-filter-pill.active {
    color: var(--community-purple);
    background: #F3EEFF;
    border-color: #EEE7FF;
}

.community-feed-list {
    display: grid;
    gap: 0;
}

.community-post-card,
.community-result-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 160ms ease, transform 160ms ease;
}

.community-post-card.is-filtered-out,
.community-result-card.is-filtered-out {
    display: none;
    opacity: 0;
    transform: translateY(4px);
}

.community-post-card {
    display: grid;
    gap: 12px;
    padding: 14px 18px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--community-line);
}

.community-post-card:last-child {
    border-bottom: 0;
}

.community-post-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.community-post-avatar {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    color: #FFFFFF;
    background: var(--community-purple);
    border-radius: 999px;
    font-weight: 900;
}

.community-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-author-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.community-author-line strong,
.community-result-author strong {
    color: var(--community-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

.community-author-line small,
.community-result-author small {
    color: var(--community-muted);
    font-weight: 680;
}

.community-verified {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: #FFFFFF;
    background: var(--community-purple);
    border-radius: 999px;
    font-size: 0.62rem;
}

.community-category-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 820;
}

.community-category-badge.hair,
.community-category-badge.beauty,
.community-category-badge.lashes {
    color: #5B20F0;
    background: #F0EAFF;
}

.community-category-badge.nails {
    color: #C02672;
    background: #FCE7F3;
}

.community-category-badge.makeup {
    color: #D94B2B;
    background: #FFEDE8;
}

.community-category-badge.skincare {
    color: #237A42;
    background: #EAF8EF;
}

.community-category-badge.massage {
    color: #295FBC;
    background: #EAF1FF;
}

.community-category-badge.tattoo {
    color: #334155;
    background: #F1F5F9;
}

.community-more-button,
.community-save-button {
    width: 34px;
    height: 34px;
    padding: 0;
    color: #17203A;
    background: #FFFFFF;
    border: 0;
    border-radius: 8px;
}

.community-post-copy h2 {
    margin: 0 0 3px;
    color: var(--community-ink);
    font-size: 1.02rem;
    font-weight: 920;
}

.community-post-copy p {
    margin: 0;
    color: #29334D;
    font-size: 0.94rem;
    font-weight: 560;
    line-height: 1.45;
    white-space: pre-wrap;
}

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

.community-media-grid.single {
    grid-template-columns: minmax(0, 1fr);
}

.community-media-tile {
    position: relative;
    min-height: 92px;
    overflow: hidden;
    background: linear-gradient(135deg, #EEE7FF, #FFF2EA);
    border-radius: 8px;
}

.community-media-tile img {
    width: 100%;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
}

.community-media-grid.single .community-media-tile,
.community-media-grid.single .community-media-tile img {
    min-height: 210px;
    max-height: 340px;
}

.community-media-tile.placeholder {
    display: grid;
    place-items: center;
    color: #5B20F0;
    font-size: 1.35rem;
}

.community-media-count {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    background: rgba(7, 10, 29, 0.56);
    font-size: 1rem;
    font-weight: 900;
}

.community-actions-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.community-action-form {
    margin: 0;
}

.community-action-button,
.community-share-button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    gap: 7px;
    padding: 0;
    color: #2D3754;
    background: transparent;
    border: 0;
    font-size: 0.9rem;
    font-weight: 720;
}

.community-action-button.active,
.community-action-button:hover,
.community-share-button:hover {
    color: var(--community-purple);
}

.community-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.community-tags a {
    color: var(--community-purple);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 780;
}

.community-tags span {
    color: var(--community-purple);
    font-size: 0.86rem;
    font-weight: 780;
}

.community-comments {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.community-comment {
    padding: 10px 12px;
    background: #F8FAFF;
    border: 1px solid #EEF1F7;
    border-radius: 8px;
}

.community-comment strong {
    font-size: 0.86rem;
    font-weight: 880;
}

.community-comment small,
.community-comment div {
    color: #5E667C;
    font-size: 0.84rem;
}

.community-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.community-side-stack {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 14px;
}

.community-search-panel,
.community-private-panel {
    padding: 16px;
}

.community-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.community-panel-title h2 {
    margin: 0;
    color: var(--community-ink);
    font-size: 1.08rem;
    font-weight: 920;
}

.community-search-input {
    position: relative;
}

.community-search-input i {
    position: absolute;
    right: 14px;
    top: 50%;
    color: #29334D;
    transform: translateY(-50%);
}

.community-search-input .form-control {
    padding-right: 42px;
}

.community-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.community-advanced-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.community-advanced-filters label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.community-advanced-filters label:last-child {
    grid-column: 1 / -1;
}

.community-advanced-filters span {
    color: var(--community-muted);
    font-size: 0.78rem;
    font-weight: 820;
}

.community-result-count {
    margin: 8px 0 12px;
    color: var(--community-muted);
    font-size: 0.86rem;
    font-weight: 740;
}

.community-result-list,
.community-private-list,
.community-place-list {
    display: grid;
    gap: 10px;
}

.community-result-card,
.community-private-item,
.community-place-card {
    display: grid;
    gap: 9px;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #EEF1F7;
    border-radius: 8px;
    text-decoration: none;
}

.community-result-main {
    display: grid;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

.community-result-top,
.community-private-item {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
}

.community-result-top {
    display: grid;
    gap: 9px;
}

.community-result-thumb,
.community-private-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    overflow: hidden;
    color: var(--community-purple);
    background: #F0EAFF;
    border-radius: 999px;
    font-weight: 900;
}

.community-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-result-card h3,
.community-place-card strong,
.community-private-item strong {
    margin: 0;
    color: var(--community-ink);
    font-size: 0.92rem;
    font-weight: 900;
}

.community-result-card p,
.community-place-card span,
.community-private-item p {
    margin: 0;
    color: #5E667C;
    font-size: 0.84rem;
    line-height: 1.4;
}

.community-result-media {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.community-result-media.single {
    grid-template-columns: minmax(0, 1fr);
}

.community-result-media img,
.community-result-media span {
    width: 100%;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
}

.community-result-media span {
    display: grid;
    place-items: center;
    color: #5B20F0;
    background: #F0EAFF;
}

.community-private-item {
    display: grid;
}

.community-private-media {
    max-width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.community-book-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    gap: 7px;
    padding: 0 12px;
    color: #FFFFFF;
    background: #111827;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 850;
}

.community-book-button:hover,
.community-book-button:focus {
    color: #FFFFFF;
    background: var(--community-purple);
}

.community-mobile-bar {
    display: none;
}

.community-empty {
    padding: 36px 22px;
    text-align: center;
}

.community-empty i {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin-bottom: 12px;
    color: var(--community-purple);
    background: #F0EAFF;
    border-radius: 8px;
    font-size: 1.4rem;
}

.community-empty h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 920;
}

.community-empty p {
    margin: 0;
    color: var(--community-muted);
}

@media (max-width: 1399.98px) {
    .community-shell {
        grid-template-columns: 72px minmax(0, 1fr) minmax(300px, 360px);
    }
}

@media (max-width: 1199.98px) {
    .community-shell {
        grid-template-columns: 1fr;
    }

    .community-time-rail {
        display: none;
    }

    .community-side-stack {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .brand-body:has(.frexima-community-page) .brand-main-content,
    .dashboard-body:has(.frexima-community-page) .main-content {
        padding: 18px 12px;
    }

    .community-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .community-hero-actions {
        width: 100%;
        justify-content: space-between;
    }

    .community-new-post {
        flex: 1 1 auto;
    }

    .community-mode-switch {
        max-width: none;
    }

    .community-post-header {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .community-post-header .community-more-button {
        display: none;
    }

    .community-media-grid,
    .community-result-media {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .community-advanced-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-advanced-filters label:last-child {
        grid-column: auto;
    }

    .community-side-stack {
        padding-bottom: 86px;
    }

    .community-mobile-bar {
        position: fixed;
        right: 12px;
        bottom: 12px;
        left: 12px;
        z-index: 1020;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        background: #FFFFFF;
        border: 1px solid var(--community-line);
        border-radius: 8px;
        box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18);
    }

    .community-mobile-bar a,
    .community-mobile-bar button {
        display: inline-grid;
        min-height: 58px;
        place-items: center;
        gap: 2px;
        color: #202840;
        background: #FFFFFF;
        border: 0;
        border-right: 1px solid var(--community-line);
        text-decoration: none;
        font-size: 0.72rem;
        font-weight: 820;
    }

    .community-mobile-bar a:last-child {
        border-right: 0;
    }

    .community-mobile-bar i {
        color: var(--community-purple);
        font-size: 1.15rem;
    }
}

/* Frexima Timeline workspace */
.brand-body:has(.frexima-timeline-workspace) {
    --timeline-ink: #080B25;
    --timeline-muted: #596176;
    --timeline-line: #E8ECF5;
    --timeline-purple: #5B20F0;
    --timeline-green: #0EA56B;
    --timeline-amber: #F59E0B;
    --timeline-red: #EF233C;
    --timeline-lavender: #F3EEFF;
    background: #FFFFFF;
}

.brand-body:has(.frexima-timeline-workspace) .brand-topbar {
    display: none;
}

.brand-body:has(.frexima-timeline-workspace) .brand-main-content {
    max-width: none;
    padding: 30px 30px 28px;
}

.frexima-timeline-workspace {
    grid-template-columns: minmax(620px, 1.15fr) minmax(380px, 0.85fr);
    gap: 18px;
    max-width: 1760px;
    margin: 0 auto;
    color: var(--timeline-ink);
}

.frexima-timeline-workspace .community-hero,
.frexima-timeline-workspace > .community-composer,
.frexima-timeline-workspace > .collapse,
.frexima-timeline-workspace > .timeline-mode-switch,
.frexima-timeline-workspace > .timeline-mobile-bar {
    grid-column: 1 / -1;
}

.frexima-timeline-workspace .community-hero h1 {
    font-size: 1.8rem;
}

.frexima-timeline-workspace .community-hero p {
    font-size: 0.94rem;
}

.timeline-date-chip {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    gap: 10px;
    padding: 0 16px;
    color: var(--timeline-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--timeline-line);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.timeline-view-radio {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.timeline-view-hidden {
    display: none !important;
}

.frexima-timeline-workspace .timeline-mode-switch {
    max-width: 640px;
    border-radius: 8px;
}

.timeline-mode-switch label,
.timeline-mode-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    gap: 9px;
    margin: 0;
    color: #111734;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 850;
}

#timelineViewMy:checked ~ .timeline-mode-switch label[for="timelineViewMy"],
#timelineViewCommunity:checked ~ .timeline-mode-switch label[for="timelineViewCommunity"],
.frexima-timeline-workspace .timeline-mode-switch a.active {
    color: var(--timeline-purple);
    background: #FBF9FF;
    box-shadow: inset 0 -3px 0 var(--timeline-purple);
}

.timeline-my-panel,
.frexima-timeline-workspace .timeline-community-panel,
.timeline-summary-card {
    background: #FFFFFF;
    border: 1px solid var(--timeline-line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.055);
}

.timeline-my-panel {
    display: grid;
    gap: 16px;
    grid-column: 1;
    padding: 18px;
}

.timeline-panel-heading,
.timeline-day-actions,
.timeline-primary-actions,
.timeline-time-card,
.timeline-summary-grid span,
.timeline-action-list a,
.timeline-action-list button {
    display: flex;
    align-items: center;
}

.timeline-panel-heading {
    justify-content: space-between;
    gap: 16px;
}

.timeline-panel-heading h2,
.timeline-community-heading h2,
.timeline-summary-card h3 {
    margin: 0;
    color: var(--timeline-ink);
    font-size: 1.04rem;
    font-weight: 940;
}

.timeline-panel-heading p {
    margin: 3px 0 0;
    color: var(--timeline-muted);
    font-size: 0.82rem;
    font-weight: 760;
}

.timeline-day-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.timeline-day-actions a {
    display: inline-grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    color: #111734;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--timeline-line);
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 850;
}

.timeline-day-actions a.today {
    min-width: 58px;
    padding: 0 11px;
    color: var(--timeline-purple);
    border-color: rgba(91, 32, 240, 0.42);
}

.timeline-day-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 315px);
    gap: 18px;
    align-items: start;
}

.timeline-day-rail {
    display: grid;
    gap: 0;
}

.timeline-time-row {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 96px;
}

.timeline-time-row::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 66px;
    z-index: 1;
    width: 7px;
    height: 7px;
    background: var(--timeline-green);
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(14, 165, 107, 0.12);
}

.timeline-time-row::after {
    content: "";
    position: absolute;
    top: 25px;
    bottom: -8px;
    left: 69px;
    width: 1px;
    background: #E4E8F2;
}

.timeline-time-row:last-child::after {
    display: none;
}

.timeline-time-row.available::before {
    background: var(--timeline-purple);
    box-shadow: 0 0 0 3px rgba(91, 32, 240, 0.12);
}

.timeline-time-row.last-minute::before {
    background: var(--timeline-amber);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.timeline-time-row > time {
    padding-top: 13px;
    color: #17203B;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: right;
}

.timeline-time-card {
    position: relative;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
    min-height: 70px;
    margin: 0 0 18px 20px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 8px;
}

.timeline-time-row.has-appointment .timeline-time-card {
    border-color: #EFF2F8;
}

.timeline-time-row.has-appointment:nth-child(even) .timeline-time-card {
    background: linear-gradient(135deg, #FFFFFF, #F6F1FF);
}

.timeline-time-row.has-appointment:nth-child(odd) .timeline-time-card {
    background: linear-gradient(135deg, #FFFFFF, #EEF9F3);
}

.timeline-time-row.available .timeline-time-card {
    background: #FFFFFF;
    border-color: #DDD6FE;
    border-style: dashed;
}

.timeline-time-row.last-minute .timeline-time-card {
    background: #FFF8E7;
    border-color: #FBE7B6;
}

.timeline-client-avatar,
.timeline-slot-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    overflow: hidden;
    color: #FFFFFF;
    background: var(--timeline-purple);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.timeline-client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-slot-icon {
    color: var(--timeline-purple);
    background: #F1EDFF;
}

.timeline-slot-icon.warm {
    color: var(--timeline-amber);
    background: #FFF1D2;
}

.timeline-slot-icon.muted {
    color: #64748B;
    background: #F4F6FA;
}

.timeline-card-copy {
    min-width: 0;
}

.timeline-card-copy strong,
.timeline-card-copy span,
.timeline-card-copy small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-card-copy strong {
    color: var(--timeline-ink);
    font-size: 0.9rem;
    font-weight: 930;
}

.timeline-card-copy span {
    color: #303A53;
    font-size: 0.78rem;
    font-weight: 760;
}

.timeline-card-copy small {
    margin-top: 8px;
    color: #1D6F52;
    font-size: 0.76rem;
    font-weight: 840;
}

.timeline-status-pill {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
}

.timeline-status-pill.success {
    color: #067647;
    background: #E8F8EF;
}

.timeline-status-pill.warning {
    color: #B45309;
    background: #FFF4DA;
}

.timeline-status-pill.info {
    color: #2456C7;
    background: #EAF1FF;
}

.timeline-status-pill.danger {
    color: #B42318;
    background: #FEEDEC;
}

.timeline-status-pill.muted {
    color: #475569;
    background: #F1F5F9;
}

.timeline-slot-add,
.timeline-book-mini {
    margin-left: auto;
    color: var(--timeline-purple);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 900;
}

.timeline-slot-add {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
}

.timeline-time-row.is-drop-target .timeline-time-card {
    border-color: #4257D4;
    box-shadow: 0 0 0 3px rgba(66, 87, 212, 0.14);
}

.timeline-time-card.is-dragging {
    opacity: 0.55;
}

.timeline-inline-edit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(160px, 1.2fr) auto;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.timeline-inline-edit label,
.timeline-client-entry-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #4C5878;
    font-size: 0.76rem;
    font-weight: 800;
}

.timeline-inline-edit input,
.timeline-inline-edit select,
.timeline-client-entry-form input,
.timeline-client-entry-form textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    color: #111735;
    background: #FFFFFF;
    border: 1px solid #DFE4EF;
    border-radius: 8px;
    outline: 0;
    font: inherit;
    font-size: 0.86rem;
}

.timeline-inline-edit button {
    align-self: end;
    min-height: 38px;
    padding: 0 12px;
    color: #FFFFFF;
    background: #111735;
    border: 0;
    border-radius: 8px;
    font-weight: 850;
}

.timeline-client-entry-card {
    margin-top: 22px;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid #E2E7F0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(17, 23, 53, 0.05);
}

.timeline-client-entry-form {
    display: grid;
    gap: 12px;
}

.timeline-client-entry-form textarea {
    min-height: 92px;
    resize: vertical;
}

.timeline-client-entry-form > div {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 767.98px) {
    .timeline-inline-edit,
    .timeline-client-entry-form > div {
        grid-template-columns: 1fr;
    }

    .timeline-inline-edit button,
    .timeline-client-entry-form .btn {
        width: 100%;
    }
}

.timeline-book-mini {
    min-height: 32px;
    padding: 7px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(91, 32, 240, 0.42);
    border-radius: 8px;
}

.timeline-side-summary {
    display: grid;
    gap: 12px;
}

.timeline-summary-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

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

.timeline-summary-grid span {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.timeline-summary-grid i {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: var(--timeline-purple);
    background: #F1EDFF;
    border-radius: 8px;
}

.timeline-summary-grid strong {
    color: var(--timeline-ink);
    font-size: 0.98rem;
    font-weight: 940;
}

.timeline-summary-grid small {
    color: var(--timeline-muted);
    font-size: 0.75rem;
    font-weight: 760;
}

.timeline-action-list {
    display: grid;
    gap: 8px;
}

.timeline-action-list a,
.timeline-action-list button,
.timeline-outline-button {
    min-height: 42px;
    gap: 10px;
    padding: 0 12px;
    color: var(--timeline-ink);
    text-align: left;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #EEF1F7;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 820;
}

.timeline-action-list button {
    width: 100%;
}

.timeline-action-list i {
    color: var(--timeline-purple);
}

.timeline-reminders {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 17px;
    color: #29334D;
    font-size: 0.82rem;
    font-weight: 760;
}

.timeline-reminders li::marker {
    color: var(--timeline-purple);
}

.timeline-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--timeline-purple);
    border-color: rgba(91, 32, 240, 0.34);
}

.timeline-primary-actions {
    justify-content: flex-start;
    gap: 14px;
}

.timeline-private-feed {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.timeline-private-feed .community-feed-list {
    overflow: hidden;
    border: 1px solid var(--timeline-line);
    border-radius: 8px;
}

.timeline-private-post {
    border-bottom-color: var(--timeline-line);
}

.timeline-private-empty {
    padding: 28px 18px;
    background: #FFFFFF;
    border: 1px dashed #D8DDF0;
    border-radius: 8px;
}

.timeline-primary-actions .btn {
    min-height: 48px;
    min-width: 220px;
    border-radius: 8px;
    font-weight: 900;
}

.frexima-timeline-workspace .timeline-community-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-column: 2;
    overflow: hidden;
    align-self: start;
}

.frexima-timeline-workspace .community-time-rail,
.frexima-timeline-workspace .community-side-stack {
    display: none;
}

.timeline-community-heading {
    padding: 16px 18px 0;
}

.frexima-timeline-workspace .community-main-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.frexima-timeline-workspace .community-category-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 4px 0 0;
    overflow: visible;
}

.frexima-timeline-workspace .community-category-bar .community-chip {
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: #FFFFFF;
}

.frexima-timeline-workspace .community-category-bar .community-chip:nth-of-type(n+3),
.frexima-timeline-workspace .community-category-more {
    display: none;
}

.frexima-timeline-workspace .community-category-bar .community-chip.active {
    border-bottom-color: var(--timeline-purple);
    box-shadow: none;
}

.frexima-timeline-workspace .community-post-card {
    padding: 16px;
}

.frexima-timeline-workspace .community-media-grid.single .community-media-tile,
.frexima-timeline-workspace .community-media-grid.single .community-media-tile img {
    min-height: 220px;
    max-height: 360px;
}

@media (max-width: 1599.98px) {
    .timeline-day-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .timeline-side-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1399.98px) {
    .frexima-timeline-workspace {
        grid-template-columns: minmax(560px, 1fr) minmax(350px, 0.78fr);
    }
}

@media (max-width: 1199.98px) {
    .frexima-timeline-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .timeline-my-panel,
    .frexima-timeline-workspace .timeline-community-panel {
        grid-column: 1;
    }

    .frexima-timeline-workspace .timeline-community-panel {
        margin-bottom: 76px;
    }
}

@media (max-width: 767.98px) {
    .brand-body:has(.frexima-timeline-workspace) .brand-main-content {
        padding: 14px 12px 86px;
    }

    .frexima-timeline-workspace {
        gap: 14px;
    }

    .frexima-timeline-workspace .community-hero {
        flex-direction: row;
        align-items: center;
    }

    .frexima-timeline-workspace .community-hero p,
    .frexima-timeline-workspace .community-new-post,
    .frexima-timeline-workspace .timeline-date-chip,
    .frexima-timeline-workspace .community-avatar-button {
        display: none;
    }

    .frexima-timeline-workspace .community-icon-button {
        width: 40px;
        height: 40px;
    }

    .frexima-timeline-workspace .timeline-mode-switch {
        max-width: none;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .timeline-my-panel {
        padding: 14px 10px;
        border: 0;
        box-shadow: none;
    }

    .timeline-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .timeline-day-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .timeline-time-row {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 88px;
    }

    .timeline-time-row::before {
        left: 50px;
    }

    .timeline-time-row::after {
        left: 53px;
    }

    .timeline-time-row > time {
        font-size: 0.68rem;
    }

    .timeline-time-card {
        min-height: 64px;
        margin-left: 16px;
        padding: 10px;
    }

    .timeline-status-pill {
        font-size: 0.62rem;
    }

    .timeline-side-summary,
    .timeline-primary-actions {
        display: none;
    }

    .frexima-timeline-workspace .timeline-community-panel {
        border: 0;
        box-shadow: none;
    }

    #timelineViewMy:checked ~ .timeline-community-panel,
    #timelineViewCommunity:checked ~ .timeline-my-panel {
        display: none;
    }

    #timelineViewCommunity:checked ~ .timeline-community-panel {
        display: grid;
    }

    .frexima-timeline-workspace .community-post-card {
        padding: 14px 10px;
    }

    .frexima-timeline-workspace .community-media-grid.single .community-media-tile,
    .frexima-timeline-workspace .community-media-grid.single .community-media-tile img {
        min-height: 250px;
    }

    .timeline-mobile-bar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .timeline-mobile-bar .active {
        color: var(--timeline-purple);
        background: #F6F2FF;
    }
}

.business-profile-editor {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.business-profile-section {
    display: none;
    padding: 24px;
}

.business-profile-section.active {
    display: block;
}

.business-profile-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #E9ECF5;
}

.business-profile-section-header h3,
.business-subheading {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.02rem;
    font-weight: 860;
}

.business-contact-list,
.business-hours-list {
    display: grid;
    gap: 0;
}

.business-contact-row {
    display: grid;
    grid-template-columns: 48px minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #EEF1F7;
}

.business-contact-row:last-child,
.business-hours-row:last-child {
    border-bottom: 0;
}

.business-contact-row p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.business-profile-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--primary);
    background: #F1E9FF;
    border-radius: 10px;
    font-size: 1.1rem;
}

.business-hours-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 64px minmax(110px, 150px) auto minmax(110px, 150px);
    gap: 14px;
    align-items: center;
    min-height: 66px;
    padding: 12px 0;
    border-bottom: 1px solid #EEF1F7;
}

.business-hours-row > span {
    color: var(--text-muted);
    text-align: center;
}

.business-brand-logo-row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.business-logo-preview,
.business-preview-logo {
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 22%, rgba(91, 32, 240, 0.14), transparent 42%),
        #F6F1FF;
    border: 1px solid #E6E1F2;
    border-radius: 12px;
}

.business-logo-preview {
    width: 168px;
    height: 168px;
}

.business-logo-preview img,
.business-preview-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
}

.business-logo-preview strong {
    color: var(--primary);
    font-size: 2.4rem;
    font-weight: 920;
}

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

.business-color-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 0 0 12px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E9F3;
    border-radius: 10px;
}

.business-color-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.business-color-card span {
    display: block;
    height: 56px;
    border-bottom: 1px solid #E5E9F3;
}

.business-color-card strong,
.business-color-card small {
    display: block;
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-color-card strong {
    color: var(--text-dark);
    font-size: 0.78rem;
}

.business-color-card small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.business-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-chip-row span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    color: var(--primary);
    background: #F1E9FF;
    border: 1px solid rgba(91, 32, 240, 0.12);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 760;
}

.business-profile-savebar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid #E9ECF5;
    backdrop-filter: blur(12px);
}

.business-profile-preview {
    display: grid;
    gap: 20px;
}

.business-profile-preview > .content-panel {
    position: sticky;
    top: 96px;
}

.business-preview-list {
    display: grid;
    gap: 0;
    margin: 18px 0;
}

.business-preview-list div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #EEF1F7;
}

.business-preview-list div:last-child {
    border-bottom: 0;
}

.business-preview-list div.is-muted {
    color: var(--text-muted);
}

.business-preview-list dt,
.business-preview-list dd {
    margin: 0;
}

.business-preview-list dt {
    color: #596482;
    font-weight: 780;
}

.business-preview-list dd {
    color: var(--text-dark);
    overflow-wrap: anywhere;
}

.business-tip {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 18px;
    padding: 14px;
    color: var(--primary);
    background: #F7F2FF;
    border: 1px solid rgba(91, 32, 240, 0.12);
    border-radius: 10px;
    font-weight: 720;
}

.business-browser-preview {
    overflow: hidden;
    margin-top: 14px;
    padding: 56px 24px 24px;
    color: var(--profile-neutral);
    text-align: center;
    background: var(--profile-bg);
    border: 1px solid #E5E9F3;
    border-radius: 12px;
}

.business-browser-dots {
    display: flex;
    gap: 6px;
    margin: -40px 0 34px;
}

.business-browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #EF6A6A;
}

.business-browser-dots span:nth-child(2) {
    background: #F5B849;
}

.business-browser-dots span:nth-child(3) {
    background: #35B86F;
}

.business-preview-logo {
    width: 112px;
    height: 112px;
    margin: 0 auto 18px;
    border-radius: 999px;
}

.business-browser-preview h3 {
    margin: 0;
    color: var(--profile-neutral);
    font-size: 1.3rem;
    font-weight: 900;
}

.business-browser-preview p {
    margin: 6px 0 22px;
    color: #66708E;
}

.business-browser-preview button {
    width: 100%;
    min-height: 44px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--profile-primary), var(--profile-secondary));
    border: 0;
    border-radius: 8px;
    font-weight: 800;
}

.business-browser-preview nav {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 22px;
    color: #66708E;
    font-size: 0.84rem;
    font-weight: 740;
}

/* New appointment booking workspace */
.brand-body:has(.appointment-booking-workspace) {
    --booking-purple: #5517F2;
    --booking-purple-dark: #3F0CC8;
    --booking-ink: #080B25;
    --booking-muted: #59627D;
    --booking-line: #E8EBF4;
    --booking-soft: #F5F0FF;
    --booking-sidebar: #050D1D;
    background:
        radial-gradient(circle at 76% 8%, rgba(85, 23, 242, 0.08), transparent 28%),
        linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar {
    width: 260px;
    padding: 26px 16px 18px;
    border-right: 0;
    background:
        radial-gradient(circle at 20% 4%, rgba(85, 23, 242, 0.42), transparent 18%),
        linear-gradient(180deg, #020916 0%, #061126 100%);
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar .brand-mark {
    filter: drop-shadow(0 14px 24px rgba(85, 23, 242, 0.32));
}

.brand-body:has(.appointment-booking-workspace) .brand-wordmark strong,
.brand-body:has(.appointment-booking-workspace) .brand-wordmark small {
    color: #FFFFFF;
}

.brand-body:has(.appointment-booking-workspace) .brand-wordmark small {
    opacity: 0.78;
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar-section-label {
    color: rgba(255, 255, 255, 0.42);
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link {
    min-height: 50px;
    padding: 11px 12px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    border-color: transparent;
    font-size: 0.94rem;
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link i {
    color: rgba(255, 255, 255, 0.86);
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link:hover,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link:focus,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(85, 23, 242, 0.86), rgba(61, 15, 194, 0.86));
    border-color: rgba(255, 255, 255, 0.08);
}

.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link:hover i,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link:focus i,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link.active i {
    color: #FFFFFF;
}

.brand-body:has(.appointment-booking-workspace) .brand-help-card {
    color: #FFFFFF;
    text-align: left;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.1);
}

.brand-body:has(.appointment-booking-workspace) .brand-help-card h3,
.brand-body:has(.appointment-booking-workspace) .brand-help-card p {
    color: #FFFFFF;
}

.brand-body:has(.appointment-booking-workspace) .brand-help-card p {
    opacity: 0.78;
}

@media (min-width: 992px) {
    .brand-body:has(.appointment-booking-workspace) .brand-app-content {
        margin-left: 260px;
    }
}

.brand-body:has(.appointment-booking-workspace) .brand-topbar {
    min-height: 76px;
    padding: 18px 34px 0;
}

.brand-body:has(.appointment-booking-workspace) .brand-main-content {
    max-width: 1500px;
    padding: 0 34px 38px;
}

.appointment-booking-workspace,
.appointment-booking-workspace * {
    letter-spacing: 0;
}

.appointment-booking-workspace {
    color: var(--booking-ink);
}

.appointment-booking-heading,
.appointment-booking-top-actions,
.appointment-date-chip,
.appointment-mode-tabs,
.appointment-select-row,
.appointment-select-card,
.appointment-input-card,
.appointment-booking-savebar,
.appointment-mobile-savebar,
.appointment-ai-actions {
    display: flex;
    align-items: center;
}

.appointment-booking-heading {
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.appointment-booking-heading h2 {
    margin: 0;
    color: var(--booking-ink);
    font-size: clamp(1.65rem, 1.2vw + 1.15rem, 2.08rem);
    font-weight: 920;
    line-height: 1.12;
}

.appointment-booking-heading p {
    margin: 8px 0 0;
    color: #1F2948;
    font-size: 1rem;
    font-weight: 650;
}

.appointment-booking-top-actions {
    justify-content: flex-end;
    gap: 14px;
}

.appointment-date-chip,
.appointment-icon-action,
.appointment-square-action {
    color: var(--booking-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    box-shadow: 0 14px 32px rgba(34, 39, 70, 0.06);
}

.appointment-date-chip {
    gap: 12px;
    min-height: 54px;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 850;
}

.appointment-date-chip i,
.appointment-input-card > i:first-child {
    color: var(--booking-purple);
}

.appointment-icon-action,
.appointment-square-action,
.appointment-inline-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--booking-purple);
}

.appointment-icon-action {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    font-size: 1.22rem;
}

.appointment-brand-switcher {
    margin-bottom: 18px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.appointment-brand-switcher form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr) auto;
    gap: 12px;
    align-items: center;
}

.appointment-brand-switcher label {
    margin: 0;
    color: var(--booking-muted);
    font-weight: 820;
}

.appointment-brand-switcher select,
.appointment-brand-switcher button {
    min-height: 42px;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.appointment-brand-switcher button {
    padding: 0 18px;
    color: #FFFFFF;
    background: var(--booking-purple);
}

.appointment-booking-form-shell {
    display: grid;
    gap: 20px;
}

.appointment-booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 20px;
    align-items: start;
}

.appointment-booking-card {
    min-width: 0;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(19, 23, 45, 0.045);
}

.appointment-manual-card {
    padding: 18px;
}

.appointment-mode-tabs {
    overflow: hidden;
    margin-bottom: 30px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.appointment-mode-tabs button {
    position: relative;
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    padding: 0 14px;
    color: #111735;
    background: #FFFFFF;
    border: 0;
    font-weight: 850;
}

.appointment-mode-tabs button.active {
    color: var(--booking-purple);
    background: linear-gradient(90deg, #F7F2FF 0%, #FFFFFF 100%);
}

.appointment-mode-tabs button.active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--booking-purple);
}

.appointment-field-stack {
    display: grid;
    gap: 18px;
}

.appointment-form-section {
    display: grid;
    gap: 18px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(18, 24, 44, 0.035);
}

.appointment-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.appointment-section-heading > span:first-child {
    display: inline-grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #FFFFFF;
    background: var(--booking-purple);
    border-radius: 999px;
    font-weight: 900;
}

.appointment-section-heading h3,
.appointment-section-heading p {
    margin: 0;
}

.appointment-section-heading h3 {
    color: var(--booking-ink);
    font-size: 1rem;
    font-weight: 900;
}

.appointment-section-heading p {
    margin-top: 3px;
    color: #53607C;
    font-size: 0.84rem;
}

.appointment-client-search {
    min-height: 44px;
    padding: 0 14px;
    background: #F8F9FC !important;
    border: 1px solid #DFE4EF !important;
    border-radius: 9px;
}

.appointment-field-group {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.appointment-field-group label {
    margin: 0;
    color: #080B25;
    font-size: 0.9rem;
    font-weight: 850;
}

.appointment-field-group label span {
    color: #FF2A2A;
}

.appointment-field-group label em,
.appointment-advanced-settings em {
    color: #18213F;
    font-style: normal;
    font-weight: 650;
}

.appointment-select-row {
    gap: 12px;
}

.appointment-select-card,
.appointment-input-card,
.appointment-note-box,
.appointment-advanced-settings {
    min-height: 64px;
    background: #FFFFFF;
    border: 1px solid #DFE4EF;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(18, 24, 44, 0.035);
}

.appointment-select-card {
    position: relative;
    flex: 1 1 auto;
    gap: 14px;
    min-width: 0;
    padding: 10px 14px;
}

.appointment-select-card select {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.appointment-avatar,
.appointment-service-thumb {
    display: inline-grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    color: #FFFFFF;
    background:
        radial-gradient(circle at 70% 25%, #E8C1A0 0 18%, transparent 20%),
        linear-gradient(145deg, #1D1228, #D08A4E);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 900;
}

img.appointment-avatar {
    object-fit: cover;
}

.appointment-avatar-soft {
    color: var(--booking-purple);
    background: var(--booking-soft);
}

.appointment-service-thumb {
    background:
        radial-gradient(circle at 70% 18%, rgba(207, 138, 72, 0.88), transparent 28%),
        linear-gradient(145deg, #43210F, #B8753E 52%, #271408);
    border-radius: 8px;
    font-size: 1.1rem;
}

.appointment-select-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}

.appointment-select-copy strong,
.appointment-select-copy small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-select-copy strong {
    color: var(--booking-ink);
    font-size: 0.98rem;
    font-weight: 900;
}

.appointment-select-copy small {
    color: #34405E;
    font-size: 0.88rem;
    font-weight: 620;
}

.appointment-select-card > .bi-chevron-down,
.appointment-input-card > .bi-chevron-down {
    flex: 0 0 auto;
    color: var(--booking-ink);
    font-size: 1.05rem;
}

.appointment-square-action {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    font-size: 1.35rem;
}

.appointment-duration-pill {
    flex: 0 0 auto;
    max-width: 144px;
    padding: 6px 12px;
    overflow: hidden;
    color: var(--booking-purple);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--booking-soft);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 850;
}

.appointment-inline-icon {
    position: relative;
    z-index: 4;
    width: 34px;
    height: 34px;
    text-decoration: none;
    background: var(--booking-soft);
    border-radius: 999px;
}

.appointment-add-service-action {
    width: auto;
    min-width: 128px;
    padding: 0 14px;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 850;
}

.appointment-add-service-action span {
    white-space: nowrap;
}

.appointment-service-builder,
.appointment-service-selectors,
.appointment-selected-services {
    display: grid;
    gap: 10px;
}

.appointment-service-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
}

.appointment-service-picker select {
    min-height: 52px;
    padding: 0 14px;
    background: #FFFFFF;
    border: 1px solid #DFE4EF;
    border-radius: 9px;
    outline: 0;
    font-weight: 750;
}

.appointment-service-picker button {
    color: #C9394D;
    background: #FFF3F5;
    border: 1px solid #F5D6DC;
    border-radius: 9px;
}

.appointment-selected-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    background: #F8F6FF;
    border: 1px solid #E6DEFF;
    border-radius: 9px;
}

.appointment-selected-service-row span {
    display: grid;
    gap: 2px;
}

.appointment-selected-service-row small {
    color: #596682;
}

.appointment-add-service-button,
.appointment-availability-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-height: 42px;
    padding: 0 15px;
    color: var(--booking-purple);
    background: #F5F0FF;
    border: 1px solid #DED2FF;
    border-radius: 9px;
    font-weight: 850;
}

.appointment-availability {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.appointment-availability > span {
    color: #53607C;
    font-size: 0.86rem;
    font-weight: 750;
}

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

.appointment-slot-grid button {
    min-height: 40px;
    color: var(--booking-ink);
    background: #FFFFFF;
    border: 1px solid #DCE2EE;
    border-radius: 8px;
    font-weight: 800;
}

.appointment-slot-grid button.active {
    color: #FFFFFF;
    background: var(--booking-purple);
    border-color: var(--booking-purple);
}

.appointment-slot-grid button:disabled {
    color: #9AA4B8;
    text-decoration: line-through;
    background: #F1F3F7;
}

.appointment-availability-message {
    grid-column: 1 / -1;
    margin: 0;
    color: #53607C;
    font-size: 0.86rem;
}

.appointment-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.appointment-input-card {
    position: relative;
    gap: 12px;
    padding: 0 16px;
}

.appointment-input-card > i {
    pointer-events: none;
}

.appointment-input-card input,
.appointment-field-group select,
.appointment-field-group input {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    color: var(--booking-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 850;
}

.appointment-input-card input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}

.appointment-note-box {
    position: relative;
    min-height: 112px;
    padding: 14px 16px 28px;
}

.appointment-note-box textarea {
    width: 100%;
    height: 76px;
    resize: none;
    color: var(--booking-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 650;
}

.appointment-note-box textarea::placeholder,
.appointment-ai-transcript::placeholder {
    color: #7B86A3;
}

.appointment-note-box > span {
    position: absolute;
    right: 16px;
    bottom: 12px;
    color: #4C5878;
    font-size: 0.82rem;
    font-weight: 720;
}

.appointment-advanced-settings {
    min-height: 56px;
    padding: 0;
}

.appointment-advanced-settings summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 850;
}

.appointment-advanced-settings summary::-webkit-details-marker {
    display: none;
}

.appointment-advanced-settings[open] summary i {
    transform: rotate(180deg);
}

.appointment-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 16px 16px;
}

.appointment-advanced-grid .appointment-field-group {
    padding: 10px 12px;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.appointment-check-field label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.appointment-check-field input {
    width: auto;
}

.appointment-field-help {
    margin: 0;
    color: var(--booking-muted);
    font-size: 0.84rem;
}

.appointment-side-stack {
    display: grid;
    gap: 18px;
}

@media (min-width: 1200px) {
    .appointment-side-stack {
        position: sticky;
        top: 24px;
    }
}

.appointment-ai-booking-card h3,
.appointment-summary-card h3 {
    margin: 0 0 16px;
    color: var(--booking-ink);
    font-size: 1.08rem;
    font-weight: 920;
}

.appointment-voice-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 170px;
    margin-bottom: 14px;
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.86), transparent 9%),
        linear-gradient(145deg, #EFE5FF, #F8F2FF);
    border-radius: 8px;
}

.voice-mic {
    display: inline-grid;
    width: 74px;
    height: 74px;
    place-items: center;
    color: var(--booking-purple);
    background: #FFFFFF;
    border: 6px solid #DED0FF;
    border-radius: 999px;
    font-size: 2rem;
}

.voice-wave {
    width: 58px;
    height: 38px;
    opacity: 0.5;
    background:
        linear-gradient(90deg, transparent 0 8%, #D9C8FF 8% 14%, transparent 14% 24%, #D9C8FF 24% 31%, transparent 31% 43%, #D9C8FF 43% 50%, transparent 50% 64%, #D9C8FF 64% 71%, transparent 71% 100%);
    border-radius: 999px;
}

.appointment-ai-booking-card p {
    max-width: 250px;
    margin: 0 auto 14px;
    color: var(--booking-ink);
    text-align: center;
    line-height: 1.45;
    font-weight: 680;
}

.appointment-ai-transcript {
    width: 100%;
    min-height: 70px;
    margin-bottom: 12px;
    padding: 12px;
    resize: vertical;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    outline: 0;
}

.appointment-ai-actions {
    gap: 10px;
}

.appointment-primary-button,
.appointment-secondary-button,
.appointment-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    border-radius: 8px;
    font-weight: 850;
}

.appointment-primary-button {
    width: 100%;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--booking-purple), var(--booking-purple-dark));
    border: 0;
    box-shadow: 0 14px 26px rgba(85, 23, 242, 0.22);
}

.appointment-secondary-button {
    flex: 0 0 auto;
    padding: 0 14px;
    color: var(--booking-purple);
    background: #FFFFFF;
    border: 1px solid #DCD4FB;
}

.appointment-ai-approve {
    margin-top: 12px;
}

.appointment-ai-status {
    border-radius: 8px;
}

.appointment-ai-matches,
.appointment-ai-errors {
    margin-top: 12px;
}

.appointment-summary-list {
    display: grid;
    gap: 0;
}

.appointment-summary-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 0;
}

.appointment-summary-list > div > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--booking-purple);
    background: #F5F0FF;
    border-radius: 999px;
}

.appointment-summary-list p {
    display: grid;
    gap: 3px;
    margin: 0;
    color: #111735;
    font-size: 0.9rem;
    font-weight: 720;
}

.appointment-summary-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--booking-ink);
    font-size: 0.96rem;
    font-weight: 850;
}

.appointment-summary-price {
    margin-top: 8px;
    padding: 14px !important;
    background: linear-gradient(90deg, #F7F1FF, #FFFFFF);
    border-radius: 8px;
}

.appointment-summary-price strong {
    font-size: 1.18rem;
    font-weight: 940;
}

.appointment-booking-savebar {
    justify-content: flex-start;
    gap: 22px;
    min-height: 96px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(19, 23, 45, 0.045);
}

.appointment-save-confirm {
    max-width: 490px;
}

.appointment-link-button {
    padding: 0 8px;
    color: var(--booking-purple);
    background: transparent;
    border: 0;
}

.appointment-mobile-savebar {
    display: none;
}

.appointment-mobile-progress,
.appointment-mobile-step-actions {
    display: none;
}

@media (max-width: 1199.98px) {
    .appointment-booking-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .brand-body:has(.appointment-booking-workspace) .brand-topbar {
        min-height: 66px;
        padding: 12px 16px 0;
    }

    .brand-body:has(.appointment-booking-workspace) .brand-main-content {
        padding: 0 14px 104px;
    }

    .appointment-booking-heading {
        align-items: center;
        margin-bottom: 18px;
    }

    .appointment-booking-heading h2 {
        font-size: 1.24rem;
        text-align: center;
    }

    .appointment-booking-heading p,
    .appointment-booking-top-actions {
        display: none;
    }

    .appointment-brand-switcher form,
    .appointment-two-col,
    .appointment-advanced-grid,
    .appointment-side-stack {
        grid-template-columns: 1fr;
    }

    .appointment-booking-card,
    .appointment-manual-card {
        padding: 12px;
        box-shadow: 0 12px 30px rgba(19, 23, 45, 0.035);
    }

    .appointment-mode-tabs {
        margin-bottom: 22px;
    }

    .appointment-mode-tabs button {
        min-height: 46px;
        font-size: 0.83rem;
    }

    .appointment-field-stack {
        gap: 18px;
    }

    .appointment-select-card,
    .appointment-input-card {
        min-height: 58px;
        padding-inline: 10px;
    }

    .appointment-avatar,
    .appointment-service-thumb {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .appointment-square-action {
        width: 58px;
        height: 58px;
    }

    .appointment-duration-pill {
        max-width: 86px;
        padding-inline: 10px;
        font-size: 0.78rem;
    }

    .appointment-select-copy strong {
        font-size: 0.9rem;
    }

    .appointment-select-copy small {
        font-size: 0.8rem;
    }

    .appointment-ai-actions {
        flex-direction: column;
    }

    .appointment-secondary-button {
        width: 100%;
    }

    .appointment-booking-savebar {
        display: none;
    }

    .appointment-mobile-step-panel[hidden],
    .appointment-side-stack[hidden] {
        display: none !important;
    }

    .appointment-mobile-progress {
        display: grid;
        gap: 8px;
        margin-top: 16px;
        color: var(--booking-muted);
        font-size: 0.82rem;
        font-weight: 800;
    }

    .appointment-mobile-progress-bar {
        height: 5px;
        overflow: hidden;
        background: #ECEAF7;
        border-radius: 99px;
    }

    .appointment-mobile-progress-bar > span {
        display: block;
        width: 20%;
        height: 100%;
        background: var(--booking-purple);
        border-radius: inherit;
        transition: width 180ms ease;
    }

    .appointment-mobile-step-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 12px;
    }

    .appointment-mobile-step-actions .appointment-primary-button {
        width: auto;
        min-width: 142px;
        margin-left: auto;
        padding: 0 18px;
    }

    .appointment-client-combobox .appointment-select-copy {
        flex: 1 1 auto;
    }

    .appointment-client-combobox .appointment-client-search {
        width: 100%;
        min-height: 34px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0;
    }

    .appointment-mobile-savebar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        min-height: 78px;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--booking-line);
        box-shadow: 0 -18px 42px rgba(22, 26, 47, 0.12);
        backdrop-filter: blur(16px);
    }

    .appointment-mobile-savebar strong {
        color: var(--booking-ink);
        font-size: 1.25rem;
        font-weight: 940;
        white-space: nowrap;
    }

    .appointment-mobile-savebar .appointment-primary-button {
        width: auto;
        min-width: 166px;
        min-height: 52px;
        padding: 0 16px;
    }
}

@media (max-width: 1199.98px) {
    .business-profile-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-profile-nav,
    .business-profile-preview > .content-panel {
        position: static;
    }

    .business-profile-nav {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .business-contact-row,
    .business-brand-logo-row {
        grid-template-columns: 1fr;
    }

    .business-hours-row {
        grid-template-columns: minmax(0, 1fr) 56px;
    }

    .business-hours-row input[type="time"],
    .business-hours-row > span {
        grid-column: auto;
    }

    .business-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-profile-savebar {
        flex-direction: column-reverse;
    }
}

.calendar-staff-day-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
}

.calendar-staff-day-grid {
    display: grid;
    grid-template-columns: 72px repeat(var(--calendar-staff-columns), minmax(180px, 1fr));
    min-width: max(760px, calc(72px + var(--calendar-staff-columns) * 190px));
    overflow: hidden;
    border: 1px solid #E5E9F3;
    border-radius: 10px;
    background: #FFFFFF;
}

.calendar-staff-day-corner,
.calendar-staff-heading,
.calendar-staff-time,
.calendar-staff-slot {
    border-right: 1px solid #EEF1F7;
    border-bottom: 1px solid #EEF1F7;
}

.calendar-staff-heading:nth-child(n),
.calendar-staff-slot:nth-child(n) {
    min-width: 0;
}

.calendar-staff-day-corner,
.calendar-staff-time {
    display: grid;
    place-items: start center;
    color: #6D7691;
    background: #FCFDFF;
    font-size: 0.82rem;
    font-weight: 820;
}

.calendar-staff-day-corner {
    min-height: 70px;
    padding-top: 18px;
}

.calendar-staff-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 14px;
    background: #FFFFFF;
}

.calendar-staff-heading strong,
.calendar-staff-heading small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-staff-heading strong {
    color: var(--text-dark);
    font-size: 0.92rem;
}

.calendar-staff-heading small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.calendar-staff-time {
    min-height: 92px;
    padding-top: 14px;
}

.calendar-staff-slot {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 92px;
    padding: 10px;
    background:
        linear-gradient(to bottom, rgba(238, 241, 247, 0.72) 1px, transparent 1px) 0 50% / 100% 46px no-repeat,
        #FFFFFF;
}

.calendar-staff-slot .calendar-appointment {
    border-left-width: 3px;
}

.calendar-today-agenda {
    display: grid;
    gap: 0;
    margin-top: 12px;
}

.calendar-today-agenda a {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid #EEF1F7;
}

.calendar-today-agenda a:last-child {
    border-bottom: 0;
}

.calendar-today-agenda time {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 780;
}

.calendar-today-agenda strong,
.calendar-today-agenda small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* P012 settings: mobile category navigation, safe forms, and keyboard-visible controls. */
.settings-mobile-back {
    display: none;
}

.settings-detail-section[hidden] {
    display: none !important;
}

.settings-page [data-settings-form].is-submitting {
    cursor: progress;
}

.settings-page [data-settings-form] .form-control:focus,
.settings-page [data-settings-form] .form-select:focus,
.settings-page [data-settings-form] .form-check-input:focus,
.settings-page .settings-card:focus-visible,
.settings-page .settings-mobile-back:focus-visible {
    outline: 3px solid rgba(91, 32, 240, 0.28);
    outline-offset: 2px;
}

.settings-page .danger-zone {
    border-color: #F0C7C7 !important;
    background: #FFF9F9;
}

.settings-page .danger-zone strong {
    color: #8C1D1D;
}

@media (max-width: 767.98px) {
    .settings-page:not(.settings-mobile-detail) .settings-detail-section,
    .settings-page:not(.settings-mobile-detail) form[data-settings-form],
    .settings-page:not(.settings-mobile-detail) > .row > aside {
        display: none;
    }

    .settings-page.settings-mobile-detail .settings-hub,
    .settings-page.settings-mobile-detail .brand-help-strip,
    .settings-page.settings-mobile-detail > .row > aside,
    .settings-page.settings-mobile-detail[data-settings-active="profile"] form[data-settings-form] {
        display: none;
    }

    .settings-page.settings-mobile-detail > .row {
        display: block;
    }

    .settings-page.settings-mobile-detail > .row > .col-xl-9 {
        width: 100%;
    }

    .settings-page.settings-mobile-detail .settings-mobile-back {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 44px;
        margin-bottom: 14px;
    }

    .settings-page .settings-card {
        min-height: 84px;
        padding: 16px;
    }

    .settings-page .content-panel {
        padding: 18px;
    }

    .settings-page .settings-hub {
        gap: 20px;
    }
}

.calendar-today-agenda strong {
    font-size: 0.9rem;
}

/* Flow-style brand workspace refresh */
.brand-body {
    --brand-purple: #6D35F3;
    --brand-purple-dark: #5524D8;
    --brand-purple-soft: #F2ECFF;
    --brand-purple-softer: #FAF7FF;
    --brand-ink: #111322;
    --brand-muted: #66708D;
    --brand-line: #E7EAF3;
    --brand-blue: #326BDE;
    --brand-green: #11A678;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 56%, #FFFFFF 100%);
}

.brand-body .brand-sidebar {
    width: 264px;
    padding: 26px 18px 18px;
    overflow-y: auto;
    border-right: 1px solid var(--brand-line);
    background: rgba(255, 255, 255, 0.98);
}

.brand-body .brand-app-content {
    min-height: 100vh;
    background: transparent;
}

@media (min-width: 992px) {
    .brand-body .brand-app-content {
        margin-left: 264px;
    }
}

.brand-body .sidebar-brand {
    align-items: flex-start;
    min-height: 70px;
    padding: 2px 8px 12px;
}

.brand-body .brand-wordmark strong {
    color: var(--brand-purple);
    font-size: 1.75rem;
    font-weight: 950;
}

.brand-body .brand-wordmark small {
    color: var(--brand-purple);
    font-size: 0.84rem;
    font-weight: 760;
}

.brand-sidebar-section-label {
    display: block;
    margin: 22px 8px 8px;
    color: #78809B;
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand-body .brand-sidebar-nav {
    gap: 4px;
}

.brand-body .brand-sidebar-link {
    min-height: 42px;
    padding: 9px 12px;
    color: #28314D;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.93rem;
    font-weight: 740;
}

.brand-body .brand-sidebar-link i {
    color: #56617E;
    font-size: 1.08rem;
}

.brand-body .brand-sidebar-link:hover,
.brand-body .brand-sidebar-link:focus {
    color: var(--brand-purple);
    background: var(--brand-purple-softer);
    border-color: #EFE8FF;
}

.brand-body .brand-sidebar-link.active {
    color: var(--brand-purple);
    background: var(--brand-purple-soft);
    border-color: transparent;
}

.brand-body .brand-sidebar-link.active i {
    color: var(--brand-purple);
}

.brand-body .brand-help-card {
    margin-top: auto;
    padding: 18px 14px 14px;
    text-align: center;
    background: linear-gradient(155deg, #FFFFFF 0%, #F8F4FF 74%, #FFFDFC 100%);
    border: 1px solid #E9E4F7;
    border-radius: 8px;
}

.brand-body .brand-help-icon,
.brand-body .empty-icon,
.brand-body .settings-card-icon,
.brand-body .brand-tip-list > div > span,
.brand-body .brand-stat-list > div > span {
    color: var(--brand-purple);
    background: var(--brand-purple-soft);
    border-radius: 8px;
}

.brand-body .brand-topbar {
    min-height: 86px;
    justify-content: flex-end;
    padding: 20px 34px 10px;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
}

.brand-body .brand-topbar-title {
    display: none;
}

.brand-body .brand-topbar-actions {
    gap: 14px;
}

.brand-body .icon-button {
    display: inline-grid;
    width: 48px;
    height: 48px;
    min-height: 48px;
    place-items: center;
    color: #111322;
    background: #FFFFFF;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
}

.brand-body .brand-account-chip {
    min-height: 54px;
    padding: 7px 14px 7px 8px;
    background: #FFFFFF;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
}

.brand-body .brand-main-content {
    max-width: 1520px;
    padding: 0 34px 34px;
}

.brand-body .page-heading {
    align-items: center;
    margin-bottom: 26px;
    padding-bottom: 0;
}

.brand-body .page-heading h2 {
    margin-bottom: 6px;
    color: var(--brand-ink);
    font-size: clamp(1.65rem, 1.2vw + 1.2rem, 2.18rem);
    font-weight: 920;
}

.brand-body .page-heading-subtitle {
    color: var(--brand-muted);
    font-size: 0.98rem;
    font-weight: 620;
}

.brand-body .content-panel,
.brand-body .calendar-main-panel,
.brand-body .calendar-mini-panel,
.brand-body .calendar-summary-panel,
.brand-body .media-asset-card,
.brand-body .settings-card {
    border: 1px solid var(--brand-line);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(17, 19, 34, 0.035);
}

.brand-body .content-panel {
    padding: 24px;
}

.brand-body .btn {
    min-height: 42px;
    border-radius: 8px;
    font-weight: 780;
}

.brand-body .btn-primary {
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-dark));
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(109, 53, 243, 0.2);
}

.brand-body .btn-light,
.brand-body .btn-outline-primary {
    color: #2B3150;
    background: #FFFFFF;
    border-color: var(--brand-line);
}

.brand-body .btn-light:hover,
.brand-body .btn-light:focus,
.brand-body .btn-outline-primary:hover,
.brand-body .btn-outline-primary:focus {
    color: var(--brand-purple);
    background: var(--brand-purple-softer);
    border-color: #D9CDFC;
}

.brand-body .form-control,
.brand-body .form-select,
.brand-body .input-group-text {
    min-height: 46px;
    border-color: #DFE4EF;
    border-radius: 8px;
}

.brand-body textarea.form-control {
    min-height: 118px;
}

.brand-body .appointment-tabs .nav-link,
.brand-body .calendar-view-tabs .nav-link,
.brand-body .nav-pills .nav-link {
    min-height: 42px;
    padding: 9px 16px;
    color: #202842;
    background: #FFFFFF;
    border: 1px solid var(--brand-line);
    border-radius: 8px;
}

.brand-body .appointment-tabs .nav-link.active,
.brand-body .calendar-view-tabs .nav-link.active,
.brand-body .nav-pills .nav-link.active {
    color: var(--brand-purple);
    background: var(--brand-purple-soft);
    border-color: var(--brand-purple);
}

.brand-empty-hero {
    display: grid;
    min-height: 420px;
    place-items: center;
    align-content: center;
    text-align: center;
}

.brand-empty-hero .empty-icon {
    width: 118px;
    height: 118px;
    margin-bottom: 22px;
    font-size: 3.1rem;
    background:
        linear-gradient(180deg, rgba(109, 53, 243, 0.18), rgba(109, 53, 243, 0.08)),
        #F6F1FF;
}

.brand-empty-hero h3 {
    margin-bottom: 10px;
    font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem);
    font-weight: 900;
}

.brand-empty-hero p {
    max-width: 560px;
    color: var(--brand-muted);
}

.brand-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.brand-insight-panel {
    padding: 22px;
}

.brand-tip-list,
.brand-stat-list {
    display: grid;
    gap: 18px;
}

.brand-tip-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.brand-tip-list > div > span,
.brand-stat-list > div > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    font-size: 1.1rem;
}

.brand-tip-list strong,
.brand-stat-list strong {
    display: block;
    color: var(--brand-ink);
    font-weight: 860;
}

.brand-tip-list p,
.brand-stat-list small {
    margin: 4px 0 0;
    color: var(--brand-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.brand-stat-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.brand-stat-list strong {
    font-size: 1.1rem;
}

.settings-hub {
    display: grid;
    gap: 28px;
}

.settings-hub-group {
    display: grid;
    gap: 14px;
}

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

.settings-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 24px;
    gap: 16px;
    align-items: center;
    min-height: 112px;
    padding: 20px 22px;
    color: inherit;
    text-decoration: none;
}

.settings-card:hover,
.settings-card:focus {
    color: inherit;
    border-color: #D9CDFC;
    box-shadow: 0 14px 36px rgba(109, 53, 243, 0.08);
}

.settings-card-icon {
    display: inline-grid;
    width: 50px;
    height: 50px;
    place-items: center;
    font-size: 1.35rem;
}

.settings-card-copy strong,
.settings-card-copy small {
    display: block;
}

.settings-card-copy strong {
    color: var(--brand-ink);
    font-size: 1rem;
    font-weight: 860;
}

.settings-card-copy small {
    margin-top: 5px;
    color: var(--brand-muted);
    line-height: 1.45;
}

.settings-card-arrow {
    color: #56617E;
}

.brand-help-strip,
.brand-upgrade-strip {
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand-help-strip strong {
    display: block;
    color: var(--brand-ink);
    font-weight: 860;
}

.brand-upgrade-strip {
    min-height: 82px;
}

.brand-upgrade-strip p {
    color: var(--brand-muted);
}

.media-library-stat-grid .content-panel {
    min-height: 104px;
}

.media-drop-zone {
    min-height: 144px;
    border-color: #D8CEF8 !important;
    background: #FCFAFF !important;
}

.media-folder-link {
    border-color: var(--brand-line) !important;
}

.media-folder-link.active {
    color: var(--brand-purple) !important;
    background: var(--brand-purple-soft) !important;
    border-color: #D9CDFC !important;
}

.calendar-shell {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.calendar-main-panel {
    min-height: 620px;
}

.calendar-week-grid,
.calendar-month-grid,
.calendar-staff-day-grid {
    border-color: var(--brand-line);
    border-radius: 8px;
}

.calendar-mini-day.selected,
.calendar-mini-day.today,
.calendar-week-column.selected,
.calendar-month-cell.selected {
    border-color: var(--brand-purple);
    background: var(--brand-purple-soft);
}

.calendar-mini-day.selected {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-dark));
}

@media (max-width: 1199.98px) {
    .settings-card-grid,
    .calendar-shell {
        grid-template-columns: 1fr;
    }

    .brand-help-strip,
    .brand-upgrade-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .brand-body .brand-app-content {
        margin-left: 0;
    }

    .brand-body .brand-topbar {
        justify-content: space-between;
        min-height: 70px;
        padding: 12px 18px;
        border-bottom: 1px solid var(--brand-line);
        background: #FFFFFF;
    }

    .brand-body .brand-main-content {
        padding: 22px 18px;
    }
}

@media (max-width: 575.98px) {
    .brand-body .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-card {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 18px;
    }

    .settings-card-arrow {
        display: none;
    }

    .brand-empty-actions,
    .brand-empty-actions .btn {
        width: 100%;
    }
}

.calendar-today-agenda small {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Keep functional helper components on the existing Frexima visual system. */
.brand-body {
    background:
        radial-gradient(circle at 18% -10%, rgba(91, 32, 240, 0.055), transparent 28rem),
        radial-gradient(circle at 94% 4%, rgba(40, 112, 234, 0.035), transparent 24rem),
        linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 48%, #FFFFFF 100%);
}

.brand-body .brand-sidebar {
    width: var(--sidebar-width);
    padding: 28px 16px 18px;
    border-right-color: #E9ECF5;
    background: rgba(255, 255, 255, 0.96);
}

@media (min-width: 992px) {
    .brand-body .brand-app-content {
        margin-left: var(--sidebar-width);
    }
}

.brand-body .brand-topbar {
    justify-content: space-between;
    min-height: 76px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #EBEEF6;
}

.brand-body .brand-topbar-title {
    display: block;
}

.brand-body .brand-main-content {
    max-width: 1560px;
    padding: 30px;
}

.brand-body .sidebar-brand {
    align-items: center;
    min-height: 58px;
    padding: 0 4px;
}

.brand-body .brand-wordmark strong,
.brand-body .brand-wordmark small,
.brand-body .brand-sidebar-link.active,
.brand-body .brand-sidebar-link.active i,
.brand-body .brand-sidebar-link:hover,
.brand-body .brand-sidebar-link:focus,
.brand-body .settings-card:hover,
.brand-body .settings-card:focus,
.media-folder-link.active {
    color: var(--primary) !important;
}

.brand-body .brand-wordmark strong {
    font-size: 1.52rem;
}

.brand-body .brand-wordmark small {
    font-size: 0.82rem;
}

.brand-body .brand-sidebar-link {
    min-height: 42px;
    padding: 9px 11px;
    color: #34405D;
    border-radius: 8px;
}

.brand-body .brand-sidebar-link i {
    color: #596482;
}

.brand-body .brand-sidebar-link:hover,
.brand-body .brand-sidebar-link:focus,
.brand-body .brand-sidebar-link.active,
.brand-body .appointment-tabs .nav-link.active,
.brand-body .calendar-view-tabs .nav-link.active,
.brand-body .nav-pills .nav-link.active,
.media-folder-link.active {
    background: #F1EAFF !important;
    border-color: transparent !important;
}

.brand-body .content-panel,
.brand-body .calendar-main-panel,
.brand-body .calendar-mini-panel,
.brand-body .calendar-summary-panel,
.brand-body .media-asset-card,
.brand-body .settings-card {
    border-color: #E5E9F3;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.brand-body .btn-primary {
    background-color: var(--primary);
    background-image: var(--flow-gradient);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(91, 32, 240, 0.18);
}

.brand-body .btn-light,
.brand-body .btn-outline-primary {
    color: var(--primary);
    background: #FFFFFF;
    border-color: rgba(91, 32, 240, 0.22);
}

.brand-body .icon-button,
.brand-body .brand-account-chip {
    background: #FFFFFF;
    border: 1px solid #E5E9F3;
    border-radius: 10px;
}

.brand-body .icon-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
}

.brand-body .brand-help-icon,
.brand-body .empty-icon,
.brand-body .settings-card-icon,
.brand-body .brand-tip-list > div > span,
.brand-body .brand-stat-list > div > span {
    color: var(--primary);
    background: #F1E9FF;
}

.brand-empty-hero .empty-icon {
    background: #F1E9FF;
}

.brand-tip-list strong,
.brand-stat-list strong,
.settings-card-copy strong,
.brand-help-strip strong {
    color: var(--text-dark);
}

.brand-tip-list p,
.brand-stat-list small,
.settings-card-copy small,
.brand-upgrade-strip p,
.brand-empty-hero p {
    color: var(--text-muted);
}

.settings-card:hover,
.settings-card:focus {
    border-color: rgba(91, 32, 240, 0.22);
    box-shadow: 0 12px 28px rgba(20, 24, 48, 0.07);
}

.media-drop-zone {
    border-color: #B8C2D6 !important;
    background: #F8FAFC !important;
}

.calendar-mini-day.selected {
    color: #FFFFFF;
    background: var(--primary) !important;
}

@media (max-width: 991.98px) {
    .brand-body .brand-app-content {
        margin-left: 0;
    }

    .brand-body .brand-main-content {
        padding: 22px 18px;
    }
}

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

.module-card {
    display: grid;
    align-content: start;
    gap: 18px;
    min-height: 280px;
}

.module-card-icon {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: var(--primary);
    background: #F1E9FF;
    border-radius: 10px;
    font-size: 1.35rem;
}

.module-card h3 {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 860;
}

.module-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.module-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: end;
}

.module-card-locked .module-card-icon {
    color: #6D7691;
    background: #F4F6FA;
}

@media (max-width: 1399.98px) {
    .module-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .module-card-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-brand-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-brand-quick-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 220px;
    text-align: center;
}

.dashboard-brand-quick-card .metric-card-icon {
    margin: 0 auto;
}

.dashboard-brand-quick-card h3,
.dashboard-brand-intro h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 860;
}

.dashboard-brand-quick-card p,
.dashboard-brand-intro p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.dashboard-brand-checks {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.dashboard-brand-checks span {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text-dark);
    font-weight: 720;
}

.dashboard-brand-checks i {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--primary);
    background: #F1E9FF;
    border-radius: 999px;
}

.dashboard-brand-steps {
    display: grid;
    gap: 12px;
}

.dashboard-brand-steps > span {
    margin-bottom: 4px;
}

.dashboard-brand-steps a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid #EEF1F7;
}

.dashboard-brand-steps a:last-child {
    border-bottom: 0;
}

.dashboard-brand-steps a span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--primary);
    background: #F1E9FF;
    border-radius: 999px;
    font-weight: 820;
}

.dashboard-brand-steps a strong {
    color: var(--text-dark);
}

.dashboard-brand-steps a i {
    color: var(--text-muted);
}

@media (max-width: 1199.98px) {
    .dashboard-brand-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .dashboard-brand-quick-grid {
        grid-template-columns: 1fr;
    }
}

.client-profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.client-profile-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    color: var(--primary);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid rgba(91, 32, 240, 0.22);
    border-radius: 8px;
    font-weight: 760;
}

.client-profile-tabs a:hover,
.client-profile-tabs a:focus {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: rgba(91, 32, 240, 0.38);
}

/* Frexima scheduling timeline and calendar grid */
.calendar-page-heading,
.calendar-heading-actions,
.calendar-voice-panel,
.calendar-glance-list div,
.calendar-quick-actions a,
.calendar-mobile-nav {
    display: flex;
    align-items: center;
}

.calendar-page-heading {
    justify-content: space-between;
    gap: 16px;
}

.calendar-heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.calendar-voice-panel {
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    background: #FFFFFF;
    border-color: rgba(91, 32, 240, 0.18);
}

.calendar-voice-panel h3,
.calendar-voice-panel p {
    margin: 0;
}

.calendar-voice-panel h3 {
    color: var(--text-dark);
    font-size: 1.05rem;
}

.calendar-voice-panel p {
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 720;
}

.schedule-staff-panel {
    padding: 10px;
}

.schedule-staff-panel .schedule-staff-selector {
    margin: 0;
    padding-bottom: 0;
}

.schedule-staff-selector {
    display: flex;
    gap: 10px;
    min-width: 0;
    margin: 0 0 18px;
    padding: 2px 0 8px;
    overflow-x: auto;
}

.schedule-staff-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 178px;
    padding: 9px 11px;
    color: var(--text-dark);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E4E8F2;
    border-radius: 8px;
}

.schedule-staff-chip.active {
    border-color: rgba(91, 32, 240, 0.62);
    box-shadow: inset 0 0 0 2px rgba(91, 32, 240, 0.16);
}

.schedule-staff-chip.all-staff .avatar {
    color: #FFFFFF;
    background: #5B20F0;
}

.schedule-staff-chip strong,
.schedule-staff-chip small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-staff-chip small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.schedule-board-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}

.schedule-board {
    min-width: max(760px, calc(78px + var(--schedule-columns) * 216px));
    background: #FFFFFF;
    border: 1px solid var(--brand-line, #E7EAF3);
    border-radius: 8px;
}

.my-timeline-board {
    min-width: 0;
}

.schedule-header-row,
.schedule-body {
    display: grid;
    grid-template-columns: 78px repeat(var(--schedule-columns), minmax(216px, 1fr));
}

.schedule-header-row {
    position: sticky;
    top: 0;
    z-index: 4;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 8px 8px 0 0;
}

.schedule-time-corner,
.schedule-staff-heading {
    min-height: 68px;
    border-right: 1px solid #EEF1F7;
    border-bottom: 1px solid #EEF1F7;
}

.schedule-time-corner {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: #F8FAFC;
    font-size: 0.78rem;
    font-weight: 820;
}

.schedule-staff-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
}

.schedule-staff-heading strong,
.schedule-staff-heading small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-staff-heading strong {
    color: var(--text-dark);
    font-size: 0.92rem;
}

.schedule-staff-heading small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.schedule-body {
    position: relative;
    height: var(--schedule-height);
}

.schedule-time-axis,
.schedule-staff-column {
    position: relative;
    min-height: 100%;
    border-right: 1px solid #EEF1F7;
}

.schedule-time-axis {
    background: #FCFDFF;
}

.schedule-time-label {
    position: absolute;
    right: 10px;
    transform: translateY(-8px);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 820;
}

.schedule-staff-column {
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--schedule-hour-height) / 4 - 1px),
            #F2F4F8 calc(var(--schedule-hour-height) / 4 - 1px),
            #F2F4F8 calc(var(--schedule-hour-height) / 4)
        ),
        linear-gradient(to bottom, #FFFFFF, #FFFFFF);
}

.schedule-empty-slot {
    position: absolute;
    top: 14px;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 760;
}

.schedule-event {
    position: absolute;
    right: 8px;
    left: 8px;
    min-height: 46px;
    z-index: 2;
}

.schedule-event.is-dragging {
    opacity: 0.55;
}

.schedule-staff-column.is-drop-target {
    background:
        linear-gradient(rgba(18, 168, 125, 0.08), rgba(18, 168, 125, 0.08)),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--schedule-hour-height) / 4 - 1px),
            #D7F3EA calc(var(--schedule-hour-height) / 4 - 1px),
            #D7F3EA calc(var(--schedule-hour-height) / 4)
        ),
        #FFFFFF;
}

.schedule-appointment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 46px;
    overflow: hidden;
    padding: 10px 10px 9px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid #DDE3EE;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.schedule-card-time {
    display: block;
    width: fit-content;
    color: #5B20F0;
    font-size: 0.76rem;
    font-weight: 860;
    line-height: 1;
}

.schedule-appointment-card.status-warning {
    border-left-color: #F59E0B;
}

.schedule-appointment-card.status-primary {
    border-left-color: #5B20F0;
}

.schedule-appointment-card.status-success {
    border-left-color: #12A87D;
}

.schedule-appointment-card.status-danger {
    border-left-color: #DC2626;
}

.schedule-appointment-card.status-muted {
    border-left-color: #94A3B8;
}

.schedule-card-status {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--text-muted);
    background: #F8FAFC;
    border-radius: 999px;
    font-size: 0.82rem;
}

.schedule-card-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
}

.schedule-client-avatar {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    object-fit: cover;
    color: var(--primary);
    background: #F1E9FF;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 820;
}

.schedule-card-main strong,
.schedule-card-main span,
.schedule-card-main small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-card-main strong {
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.15;
}

.schedule-card-main span {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 760;
}

.schedule-card-main small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.schedule-card-status-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 820;
    line-height: 1.1;
}

.schedule-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #94A3B8;
    border-radius: 999px;
}

.schedule-status-dot.success {
    background: #12A87D;
}

.schedule-status-dot.warning {
    background: #F59E0B;
}

.schedule-status-dot.danger {
    background: #DC2626;
}

.schedule-status-dot.info {
    background: #2563EB;
}

.schedule-processing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 8px;
    color: #7C3A00;
    background: #FFF7E6;
    border: 1px solid #F9D996;
    border-radius: 8px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 820;
    line-height: 1.1;
}

.schedule-processing strong,
.schedule-processing span {
    display: inline-block;
}

.schedule-processing-available {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 860;
}

.schedule-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.schedule-icon-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: var(--text-dark);
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.86rem;
}

.schedule-icon-button.purple {
    color: #FFFFFF;
    background: #5B20F0;
    border-color: #5B20F0;
}

.schedule-icon-button.green {
    color: #FFFFFF;
    background: #12A87D;
    border-color: #12A87D;
}

.schedule-icon-button.neutral {
    color: #475569;
}

.schedule-card-menu {
    min-width: 230px;
    padding: 8px;
    border: 1px solid #E4E8F2;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.schedule-card-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    border-radius: 8px;
    font-weight: 760;
}

.schedule-card-menu form {
    margin: 0;
}

.schedule-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.schedule-card-footer .status-badge {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-card-footer .status-badge i {
    margin-right: 4px;
}

.schedule-available-slot {
    position: absolute;
    right: 12px;
    left: 12px;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 6px 6px 6px 10px;
    color: #0F766E;
    background: rgba(20, 184, 166, 0.08);
    border: 1px dashed rgba(15, 118, 110, 0.42);
    border-radius: 8px;
}

.schedule-available-slot:hover {
    color: #0F766E;
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(15, 118, 110, 0.68);
}

.schedule-available-slot a {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.schedule-slot-block-form {
    margin: 0;
}

.schedule-slot-block-form button {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #0F766E;
    background: #FFFFFF;
    border: 1px solid rgba(15, 118, 110, 0.24);
    border-radius: 8px;
}

.schedule-available-slot strong,
.schedule-available-slot span,
.schedule-available-slot small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-available-slot strong {
    font-size: 0.78rem;
    line-height: 1.1;
}

.schedule-available-slot span,
.schedule-available-slot small {
    color: #347E77;
    font-size: 0.68rem;
    font-weight: 760;
    line-height: 1.1;
}

.calendar-glance-panel,
.calendar-quick-actions-panel {
    padding: 20px;
}

.calendar-glance-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
}

.calendar-glance-list div {
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #EEF1F7;
}

.calendar-glance-list div:last-child {
    border-bottom: 0;
}

.calendar-glance-list dt,
.calendar-glance-list dd {
    margin: 0;
}

.calendar-glance-list dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 780;
}

.calendar-glance-list dd {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 860;
}

.calendar-quick-actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.calendar-quick-actions a {
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    color: var(--text-dark);
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid #E4E8F2;
    border-radius: 8px;
    font-weight: 780;
}

.calendar-quick-actions a:hover,
.calendar-quick-actions a:focus {
    color: var(--primary);
    background: #F7F3FF;
    border-color: rgba(91, 32, 240, 0.26);
}

.calendar-mobile-nav {
    display: none;
}

.schedule-now-line {
    position: absolute;
    right: 0;
    left: 78px;
    z-index: 3;
    height: 2px;
    background: #E11D48;
}

.schedule-now-line span {
    position: absolute;
    top: -11px;
    left: 8px;
    padding: 2px 7px;
    color: #FFFFFF;
    background: #E11D48;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 820;
}

.schedule-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.schedule-fab {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 20;
}

.schedule-fab-button {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #FFFFFF;
    background: #5B20F0;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 18px 34px rgba(91, 32, 240, 0.34);
    font-size: 1.35rem;
}

.schedule-fab-menu {
    min-width: 220px;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.schedule-fab-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    border-radius: 8px;
    font-weight: 760;
}

.modal-backdrop.show {
    opacity: 0.42;
    backdrop-filter: blur(5px);
}

@media (max-width: 991.98px) {
    .schedule-board {
        min-width: max(680px, calc(78px + var(--schedule-columns) * 206px));
    }
}

@media (max-width: 767.98px) {
    .calendar-page-heading,
    .calendar-voice-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-heading-actions,
    .calendar-voice-panel .btn {
        width: 100%;
    }

    .calendar-heading-actions .btn {
        flex: 1 1 160px;
    }

    .schedule-board-scroll {
        margin-right: -18px;
        margin-left: -18px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .my-timeline-board {
        min-width: 0;
    }

    .my-timeline-board .schedule-header-row,
    .my-timeline-board .schedule-body {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .my-timeline-board .schedule-time-corner,
    .my-timeline-board .schedule-time-axis {
        width: 64px;
    }

    .my-timeline-board .schedule-now-line {
        left: 64px;
    }

    .schedule-time-label {
        right: 7px;
        font-size: 0.7rem;
    }

    .schedule-staff-chip {
        min-width: 154px;
    }

    .schedule-appointment-card {
        gap: 7px;
        padding: 9px;
    }

    .schedule-card-footer .status-badge {
        display: none;
    }

    .schedule-fab {
        display: none;
    }

    .calendar-side-panel {
        display: none;
    }

    .calendar-mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        min-height: 72px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #E4E8F2;
        box-shadow: 0 -14px 34px rgba(15, 23, 42, 0.10);
    }

    .calendar-mobile-nav a,
    .calendar-mobile-nav > .dropup {
        display: grid;
        place-items: center;
        min-width: 0;
    }

    .calendar-mobile-nav a {
        gap: 3px;
        color: #536079;
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 780;
    }

    .calendar-mobile-nav a i {
        font-size: 1.08rem;
    }

    .calendar-mobile-nav a.active {
        color: #5B20F0;
    }

    .calendar-mobile-plus {
        display: inline-grid;
        width: 52px;
        height: 52px;
        place-items: center;
        color: #FFFFFF;
        background: #5B20F0;
        border: 0;
        border-radius: 999px;
        box-shadow: 0 14px 28px rgba(91, 32, 240, 0.28);
        font-size: 1.25rem;
    }

    .brand-main-content {
        padding-bottom: 96px;
    }
}

.calendar-ops-bar {
    padding: 14px;
}

.calendar-ops-main,
.calendar-ops-actions,
.calendar-staff-row,
.calendar-utility-header {
    display: flex;
    align-items: center;
}

.calendar-ops-main {
    justify-content: space-between;
    gap: 14px;
}

.calendar-title-block {
    min-width: 180px;
}

.calendar-title-block h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.4rem;
    letter-spacing: 0;
}

.calendar-title-block span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 760;
}

.calendar-ops-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-assist-button {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: rgba(91, 32, 240, 0.16);
}

.calendar-ops-bar .calendar-date-jump {
    margin-left: 2px;
}

.calendar-ops-bar .calendar-date-jump .form-control {
    width: 144px;
}

.calendar-staff-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #EEF1F7;
}

.calendar-staff-row .schedule-staff-selector {
    width: 100%;
    margin: 0;
    padding-bottom: 2px;
}

.calendar-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 14px;
}

.calendar-main-panel {
    grid-column: 2;
    min-height: 700px;
    padding: 16px;
}

.calendar-side-panel {
    grid-column: 1;
    grid-row: 1;
    gap: 14px;
}

.calendar-mini-panel {
    order: 1;
}

.calendar-utility-panel {
    order: 2;
}

.calendar-glance-panel {
    order: 3;
}

.calendar-utility-panel,
.calendar-glance-panel,
.calendar-mini-panel {
    padding: 16px;
}

.calendar-utility-header {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.calendar-clear-link {
    color: var(--primary-dark);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 820;
}

.calendar-filter-form {
    display: grid;
    gap: 8px;
}

.calendar-filter-form .form-label {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 820;
}

.calendar-filter-form .btn {
    margin-top: 4px;
}

.calendar-icon-ghost {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid rgba(91, 32, 240, 0.16);
    border-radius: 8px;
}

.calendar-overview-empty {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 720;
}

.calendar-today-agenda {
    margin-top: 12px;
}

.calendar-quick-actions-panel,
.calendar-summary-panel,
.calendar-voice-panel {
    display: none;
}

.schedule-fab {
    display: none;
}

.calendar-mobile-nav {
    display: none;
}

.schedule-board-scroll {
    max-height: calc(100vh - 238px);
    overflow: auto;
}

.schedule-header-row {
    top: 0;
}

.schedule-time-corner,
.schedule-time-axis {
    position: sticky;
    left: 0;
    z-index: 3;
}

.schedule-time-corner {
    z-index: 5;
}

.schedule-available-slot {
    border-style: dashed;
    box-shadow: none;
}

.schedule-empty-slot {
    padding: 7px 10px;
    background: rgba(248, 250, 252, 0.86);
    border: 1px dashed #D7DEEA;
    border-radius: 8px;
}

@media (max-width: 1199.98px) {
    .calendar-ops-main {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .calendar-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-main-panel,
    .calendar-side-panel {
        grid-column: auto;
        grid-row: auto;
    }

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

@media (max-width: 767.98px) {
    .calendar-ops-bar {
        padding: 12px;
    }

    .calendar-title-block {
        min-width: 0;
    }

    .calendar-title-block h2 {
        font-size: 1.2rem;
    }

    .calendar-ops-actions,
    .calendar-nav-actions,
    .calendar-date-jump {
        width: 100%;
    }

    .calendar-ops-actions .btn,
    .calendar-ops-actions .calendar-view-tabs {
        flex: 1 1 auto;
    }

    .calendar-ops-bar .calendar-date-jump .form-control {
        flex: 1 1 150px;
        width: auto;
    }

    .calendar-side-panel {
        display: none;
    }

    .calendar-mobile-nav {
        display: grid;
    }

    .schedule-board-scroll {
        max-height: none;
    }
}

/* Premium Frexima salon calendar */
.brand-body:has(.frexima-calendar-page) {
    --frexima-purple: #6C3CF0;
    --frexima-purple-dark: #4C1D95;
    --frexima-sidebar: #070B1F;
    --frexima-bg: #F8F7FC;
    --frexima-card: #FFFFFF;
    --frexima-border: #E7E7EF;
    --frexima-text: #151425;
    --frexima-muted: #6B6B80;
    --frexima-green: #22C55E;
    --frexima-orange: #F59E0B;
    --frexima-red: #EF4444;
    --frexima-blue: #3B82F6;
    --frexima-pink: #EC4899;
    background: var(--frexima-bg);
}

.brand-body:has(.frexima-calendar-page) .brand-topbar {
    display: none;
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar {
    width: 260px;
    padding: 24px 12px 16px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(108, 60, 240, 0.22), transparent 26%),
        var(--frexima-sidebar);
    border-right: 0;
    box-shadow: 24px 0 50px rgba(7, 11, 31, 0.12);
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.brand-body:has(.frexima-calendar-page) .brand-mark span {
    background: linear-gradient(135deg, #8B5CF6, #4F46E5);
}

.brand-body:has(.frexima-calendar-page) .brand-wordmark strong {
    color: #FFFFFF;
    letter-spacing: 0;
}

.brand-body:has(.frexima-calendar-page) .brand-wordmark small,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-section-label {
    color: rgba(255, 255, 255, 0.56);
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar-nav {
    gap: 4px;
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar-link {
    min-height: 48px;
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid transparent;
    border-radius: 10px;
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar-link i {
    color: #FFFFFF;
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar-link:hover,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-link:focus {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.brand-body:has(.frexima-calendar-page) .brand-sidebar-link.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #6C3CF0, #4C1D95);
    box-shadow: 0 14px 28px rgba(76, 29, 149, 0.34);
}

.brand-body:has(.frexima-calendar-page) .brand-nav-badge {
    color: #FFFFFF;
    background: #6C3CF0;
}

.brand-body:has(.frexima-calendar-page) .brand-help-card {
    margin-top: auto;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.brand-body:has(.frexima-calendar-page) .brand-help-card h3,
.brand-body:has(.frexima-calendar-page) .brand-help-card p {
    color: #FFFFFF;
}

.brand-body:has(.frexima-calendar-page) .brand-help-card .btn {
    background: linear-gradient(135deg, #6C3CF0, #4C1D95);
    border-color: transparent;
}

.brand-body:has(.frexima-calendar-page) .brand-app-content {
    background: var(--frexima-bg);
}

.brand-body:has(.frexima-calendar-page) .brand-main-content {
    min-height: 100vh;
    padding: 28px 28px 34px;
}

.frexima-calendar-page {
    color: var(--frexima-text);
}

.frexima-calendar-page .content-panel {
    background: var(--frexima-card);
    border: 1px solid var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.frexima-calendar-page .calendar-ops-bar {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.frexima-calendar-page .calendar-ops-main {
    gap: 18px;
    padding: 0 2px 18px;
}

.frexima-calendar-page .calendar-title-block h2 {
    color: #0B102F;
    font-size: 1.75rem;
    font-weight: 860;
}

.frexima-calendar-page .calendar-title-block span {
    color: var(--frexima-muted);
    font-weight: 760;
}

.frexima-calendar-page .calendar-nav-actions {
    gap: 8px;
}

.frexima-calendar-page .btn-light,
.frexima-calendar-page .calendar-date-display {
    min-height: 42px;
    color: #151425;
    background: #FFFFFF;
    border-color: var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    font-weight: 820;
}

.frexima-calendar-page .calendar-date-jump {
    position: relative;
    align-items: center;
    gap: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.frexima-calendar-page .calendar-date-jump .btn,
.frexima-calendar-page .calendar-date-display {
    border: 0;
    box-shadow: none;
}

.frexima-calendar-page .calendar-date-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 186px;
    padding: 0 14px;
    pointer-events: none;
    white-space: nowrap;
}

.frexima-calendar-page .calendar-native-date {
    position: absolute;
    inset: 0 42px;
    z-index: 2;
    width: auto;
    min-width: 0;
    cursor: pointer;
    opacity: 0;
}

.frexima-calendar-page .calendar-view-tabs {
    padding: 3px;
    background: #FFFFFF;
    border: 1px solid var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.frexima-calendar-page .calendar-view-tabs .nav-link {
    min-width: 70px;
    min-height: 36px;
    color: #3D3B67;
    border-radius: 7px;
    font-weight: 840;
}

.frexima-calendar-page .calendar-view-tabs .nav-link.active {
    color: #4C1D95;
    background: #F2ECFF;
    box-shadow: inset 0 0 0 1px rgba(108, 60, 240, 0.24);
}

.frexima-calendar-page .calendar-bell-button {
    position: relative;
    width: 44px;
    padding: 0;
}

.frexima-calendar-page .calendar-bell-button span {
    position: absolute;
    top: -7px;
    right: -5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #FFFFFF;
    background: #E11D48;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
}

.frexima-calendar-page .calendar-new-button {
    min-height: 42px;
    gap: 8px;
    padding-inline: 16px;
    background: linear-gradient(135deg, #6C3CF0, #4C1D95);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 14px 26px rgba(76, 29, 149, 0.28);
    font-weight: 850;
}

.frexima-calendar-page .calendar-staff-row {
    margin-top: 0;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--frexima-border);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.05);
}

.frexima-calendar-page .schedule-staff-selector {
    gap: 14px;
    padding: 0;
    scrollbar-width: thin;
}

.frexima-calendar-page .schedule-staff-chip {
    min-width: 170px;
    padding: 10px 12px;
    color: #17162C;
    background: #FFFFFF;
    border-color: transparent;
    border-radius: 8px;
    box-shadow: none;
}

.frexima-calendar-page .schedule-staff-chip.all-staff {
    min-width: 164px;
    background: #F5F0FF;
}

.frexima-calendar-page .schedule-staff-chip .avatar {
    width: 42px;
    height: 42px;
    border: 2px solid transparent;
}

.frexima-calendar-page .schedule-staff-chip.active {
    border-color: rgba(108, 60, 240, 0.28);
    box-shadow: inset 0 -3px 0 #6C3CF0;
}

.frexima-calendar-page .schedule-staff-chip.active .avatar {
    border-color: #6C3CF0;
}

.frexima-calendar-page .schedule-staff-chip strong {
    color: #151425;
    font-size: 0.88rem;
}

.frexima-calendar-page .schedule-staff-chip small {
    color: #343B63;
}

.frexima-calendar-page .calendar-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.frexima-calendar-page .calendar-main-panel {
    grid-column: 2;
    min-height: 720px;
    padding: 0;
    overflow: hidden;
}

.frexima-calendar-page .calendar-side-panel {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 14px;
}

.frexima-calendar-page .calendar-mini-panel,
.frexima-calendar-page .calendar-utility-panel,
.frexima-calendar-page .calendar-glance-panel {
    padding: 18px;
}

.frexima-calendar-page .calendar-mini-panel {
    order: 1;
}

.frexima-calendar-page .calendar-utility-panel {
    order: 2;
}

.frexima-calendar-page .calendar-glance-panel {
    order: 3;
}

.frexima-calendar-page .calendar-mini-header h3,
.frexima-calendar-page .calendar-section-header h3 {
    color: #151425;
    font-size: 1rem;
    font-weight: 860;
}

.frexima-calendar-page .section-label {
    color: #4C1D95;
    letter-spacing: 0;
}

.frexima-calendar-page .calendar-mini-grid {
    gap: 7px;
}

.frexima-calendar-page .calendar-mini-day {
    width: 32px;
    height: 32px;
    color: #222346;
    border-radius: 999px;
    font-weight: 820;
}

.frexima-calendar-page .calendar-mini-day.today {
    color: #4C1D95;
    background: #F2ECFF;
}

.frexima-calendar-page .calendar-mini-day.selected {
    color: #FFFFFF;
    background: #6C3CF0;
    box-shadow: 0 10px 20px rgba(108, 60, 240, 0.25);
}

.frexima-calendar-page .calendar-mini-day small {
    display: none;
}

.frexima-calendar-page .calendar-filter-form .form-select {
    min-height: 40px;
    border-color: var(--frexima-border);
    border-radius: 8px;
    font-weight: 760;
}

.frexima-calendar-page .calendar-filter-form .btn {
    color: #4C1D95;
    background: #F4F0FF;
    border-color: #DED4FF;
}

.frexima-calendar-page .calendar-glance-list {
    gap: 0;
}

.frexima-calendar-page .calendar-glance-list div {
    min-height: 54px;
}

.frexima-calendar-page .calendar-glance-list dt i {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #4C1D95;
    background: #F2ECFF;
    border-radius: 999px;
}

.frexima-calendar-page .calendar-glance-list dd {
    color: #151425;
    font-size: 1.08rem;
}

.frexima-calendar-page .calendar-section-header {
    min-height: 68px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--frexima-border);
}

.frexima-calendar-page .schedule-board-scroll {
    max-height: calc(100vh - 226px);
    padding: 0;
    overflow: auto;
}

.frexima-calendar-page .schedule-board {
    min-width: max(840px, calc(82px + var(--schedule-columns) * 210px));
    border: 0;
    border-radius: 0;
}

.frexima-calendar-page .schedule-header-row,
.frexima-calendar-page .schedule-body {
    grid-template-columns: 82px repeat(var(--schedule-columns), minmax(190px, 1fr));
}

.frexima-calendar-page .schedule-header-row {
    background: #FFFFFF;
    border-radius: 0;
}

.frexima-calendar-page .schedule-time-corner {
    color: #6B6B80;
    background: #FFFFFF;
}

.frexima-calendar-page .schedule-time-corner,
.frexima-calendar-page .schedule-staff-heading {
    min-height: 78px;
    border-color: var(--frexima-border);
}

.frexima-calendar-page .schedule-staff-heading {
    justify-content: center;
    text-align: left;
}

.frexima-calendar-page .schedule-staff-heading .avatar {
    width: 42px;
    height: 42px;
}

.frexima-calendar-page .schedule-time-axis,
.frexima-calendar-page .schedule-staff-column {
    border-color: var(--frexima-border);
}

.frexima-calendar-page .schedule-time-axis {
    background: #FFFFFF;
}

.frexima-calendar-page .schedule-time-label {
    right: 14px;
    color: #383A5C;
    font-size: 0.8rem;
}

.frexima-calendar-page .schedule-staff-column {
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--schedule-hour-height) - 1px),
            #E9ECF5 calc(var(--schedule-hour-height) - 1px),
            #E9ECF5 var(--schedule-hour-height)
        ),
        linear-gradient(to right, rgba(231, 231, 239, 0.72), rgba(231, 231, 239, 0.72) 1px, transparent 1px, transparent 100%),
        #FFFFFF;
}

.frexima-calendar-page .schedule-empty-slot {
    color: #6B6B80;
    background: rgba(255, 255, 255, 0.88);
    border-color: #E7E7EF;
}

.frexima-calendar-page .schedule-staff-column:has(.schedule-available-slot) .schedule-empty-slot {
    display: none;
}

.frexima-calendar-page .schedule-available-slot {
    min-height: 32px;
    padding: 6px 34px 6px 10px;
    color: #0F766E;
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(15, 118, 110, 0.28);
}

.frexima-calendar-page .schedule-blocked-slot {
    position: absolute;
    right: 8px;
    left: 8px;
    z-index: 2;
    min-height: 34px;
    padding: 8px 10px;
    color: #475569;
    background: #F4F6FA;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.56);
}

.frexima-calendar-page .schedule-blocked-slot strong,
.frexima-calendar-page .schedule-blocked-slot span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frexima-calendar-page .schedule-blocked-slot strong {
    color: #334155;
    font-size: 0.76rem;
    font-weight: 900;
}

.frexima-calendar-page .schedule-blocked-slot span {
    color: #64748B;
    font-size: 0.7rem;
    font-weight: 740;
}

.frexima-calendar-page .schedule-available-slot strong {
    font-size: 0.76rem;
}

.frexima-calendar-page .schedule-available-slot span,
.frexima-calendar-page .schedule-available-slot small {
    display: none;
}

.frexima-calendar-page .schedule-slot-block-form {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

.frexima-calendar-page .schedule-event {
    right: 8px;
    left: 8px;
}

.frexima-calendar-page .schedule-appointment-card {
    --service-accent: #6C3CF0;
    --service-soft: #F5F3FF;
    gap: 6px;
    min-height: 48px;
    padding: 10px 12px;
    color: #151425;
    background: linear-gradient(135deg, var(--service-soft), #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--service-accent) 44%, white);
    border-left-width: 1px;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.frexima-calendar-page .schedule-appointment-card.service-hair {
    --service-accent: #EC4899;
    --service-soft: #FDF2F8;
}

.frexima-calendar-page .schedule-appointment-card.service-nails {
    --service-accent: #F59E0B;
    --service-soft: #FFF7ED;
}

.frexima-calendar-page .schedule-appointment-card.service-color {
    --service-accent: #22C55E;
    --service-soft: #ECFDF5;
}

.frexima-calendar-page .schedule-appointment-card.service-treatment {
    --service-accent: #3B82F6;
    --service-soft: #EFF6FF;
}

.frexima-calendar-page .schedule-appointment-card.service-consultation {
    --service-accent: #7C3AED;
    --service-soft: #F5F3FF;
}

.frexima-calendar-page .schedule-appointment-card.service-massage {
    --service-accent: #14B8A6;
    --service-soft: #F0FDFA;
}

.frexima-calendar-page .schedule-card-status-icon {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: #FFFFFF;
    background: #94A3B8;
    border-radius: 999px;
    font-size: 0.78rem;
}

.frexima-calendar-page .schedule-card-status-icon.success {
    background: #16A34A;
}

.frexima-calendar-page .schedule-card-status-icon.warning {
    background: #F59E0B;
}

.frexima-calendar-page .schedule-card-status-icon.danger {
    background: #EF4444;
}

.frexima-calendar-page .schedule-card-status-icon.info {
    background: #7C3AED;
}

.frexima-calendar-page .schedule-card-time {
    color: var(--service-accent);
    font-size: 0.78rem;
}

.frexima-calendar-page .schedule-appointment-card.grid-mode .schedule-card-main {
    display: block;
    padding-right: 24px;
}

.frexima-calendar-page .schedule-appointment-card.grid-mode .schedule-client-avatar {
    display: none;
}

.frexima-calendar-page .schedule-card-main strong {
    color: #151425;
    font-size: 0.88rem;
}

.frexima-calendar-page .schedule-card-main span {
    color: #252847;
    font-size: 0.78rem;
}

.frexima-calendar-page .schedule-card-main small {
    color: #151425;
    font-size: 0.72rem;
}

.frexima-calendar-page .schedule-card-status-row {
    gap: 7px;
    color: #4B4D68;
}

.frexima-calendar-page .schedule-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 92px;
    overflow: hidden;
    padding: 3px 6px;
    color: #4C1D95;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(108, 60, 240, 0.14);
    border-radius: 999px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frexima-calendar-page .schedule-payment-badge.paid,
.frexima-calendar-page .schedule-payment-badge.deposit {
    color: #047857;
    border-color: rgba(34, 197, 94, 0.22);
}

.frexima-calendar-page .schedule-payment-badge.unpaid,
.frexima-calendar-page .schedule-payment-badge.overdue {
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.24);
}

.frexima-calendar-page .schedule-card-actions,
.frexima-calendar-page .schedule-card-footer {
    display: none;
}

.frexima-calendar-page .schedule-appointment-card:hover .schedule-card-actions,
.frexima-calendar-page .schedule-appointment-card:focus-within .schedule-card-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    padding-top: 8px;
    background: linear-gradient(180deg, transparent, var(--service-soft) 22%, var(--service-soft));
}

.frexima-calendar-page .schedule-icon-button {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
}

.frexima-calendar-page .schedule-processing {
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.18);
}

.frexima-calendar-page .calendar-week-grid {
    min-width: 980px;
}

.frexima-calendar-page .calendar-week-column,
.frexima-calendar-page .calendar-month-cell {
    border-color: var(--frexima-border);
    border-radius: 8px;
}

.frexima-calendar-page .calendar-appointment {
    border-radius: 8px;
}

.frexima-calendar-page .calendar-mobile-nav {
    z-index: 60;
    background: #FFFFFF;
    border-top: 1px solid var(--frexima-border);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.08);
}

.frexima-calendar-page .calendar-mobile-plus {
    background: linear-gradient(135deg, #6C3CF0, #4C1D95);
}

@media (max-width: 1199.98px) {
    .frexima-calendar-page .calendar-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .frexima-calendar-page .calendar-main-panel,
    .frexima-calendar-page .calendar-side-panel {
        grid-column: auto;
        grid-row: auto;
    }

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

@media (max-width: 767.98px) {
    .brand-body:has(.frexima-calendar-page) .brand-main-content {
        padding: 18px 14px 96px;
    }

    .frexima-calendar-page .calendar-ops-main {
        align-items: stretch;
        padding-bottom: 12px;
    }

    .frexima-calendar-page .calendar-title-block h2 {
        font-size: 1.35rem;
    }

    .frexima-calendar-page .calendar-title-block span,
    .frexima-calendar-page .calendar-ops-actions > .btn-light,
    .frexima-calendar-page .calendar-view-tabs {
        display: none;
    }

    .frexima-calendar-page .calendar-nav-actions,
    .frexima-calendar-page .calendar-date-jump {
        width: 100%;
    }

    .frexima-calendar-page .calendar-date-display {
        flex: 1 1 auto;
        width: 100%;
    }

    .frexima-calendar-page .calendar-native-date {
        inset: 0 42px;
    }

    .frexima-calendar-page .calendar-ops-actions {
        position: absolute;
        top: 16px;
        right: 14px;
        width: auto;
    }

    .frexima-calendar-page .calendar-ops-actions > .calendar-bell-button {
        display: inline-grid;
    }

    .frexima-calendar-page .calendar-new-button {
        width: 42px;
        padding: 0;
    }

    .frexima-calendar-page .calendar-new-button .bi-chevron-down,
    .frexima-calendar-page .calendar-new-button {
        font-size: 0;
    }

    .frexima-calendar-page .calendar-new-button .bi-plus-lg {
        font-size: 1.2rem;
    }

    .frexima-calendar-page .calendar-staff-row {
        padding: 10px 4px 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .frexima-calendar-page .schedule-staff-selector {
        gap: 18px;
        justify-content: flex-start;
    }

    .frexima-calendar-page .schedule-staff-chip {
        min-width: 64px;
        flex-direction: column;
        gap: 6px;
        padding: 0 0 8px;
        background: transparent;
        text-align: center;
    }

    .frexima-calendar-page .schedule-staff-chip.all-staff {
        display: none;
    }

    .frexima-calendar-page .schedule-staff-chip small {
        display: none;
    }

    .frexima-calendar-page .schedule-staff-chip strong {
        max-width: 68px;
        font-size: 0.76rem;
    }

    .frexima-calendar-page .calendar-side-panel {
        display: none;
    }

    .frexima-calendar-page .calendar-main-panel {
        min-height: 0;
    }

    .frexima-calendar-page .calendar-section-header {
        justify-content: center;
        min-height: 58px;
        padding: 14px 12px;
        text-align: center;
    }

    .frexima-calendar-page .calendar-section-header .status-badge {
        display: none;
    }

    .frexima-calendar-page .schedule-board-scroll {
        max-height: none;
        overflow-x: auto;
    }

    .frexima-calendar-page .schedule-board {
        min-width: max(390px, calc(74px + var(--schedule-columns) * 245px));
    }

    .frexima-calendar-page .my-timeline-board {
        min-width: 0;
    }

    .frexima-calendar-page .my-timeline-board .schedule-header-row,
    .frexima-calendar-page .my-timeline-board .schedule-body {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .frexima-calendar-page .schedule-header-row,
    .frexima-calendar-page .schedule-body {
        grid-template-columns: 74px repeat(var(--schedule-columns), minmax(245px, 1fr));
    }

    .frexima-calendar-page .schedule-time-corner,
    .frexima-calendar-page .schedule-staff-heading {
        min-height: 0;
        padding: 0;
    }

    .frexima-calendar-page .schedule-header-row {
        display: none;
    }

    .frexima-calendar-page .schedule-time-label {
        right: 8px;
        font-size: 0.72rem;
    }

    .frexima-calendar-page .schedule-appointment-card {
        padding: 12px;
    }

    .frexima-calendar-page .schedule-appointment-card.grid-mode .schedule-card-main,
    .frexima-calendar-page .schedule-card-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .frexima-calendar-page .schedule-client-avatar {
        display: none;
    }
}

/* Calendar 009: resilient mobile controls, overlap lanes, and request states. */
.frexima-calendar-page .calendar-offline-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    color: #7C2D12;
    background: #FFF7ED;
    border: 1px solid #FDBA74;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 760;
}
.frexima-calendar-page .calendar-offline-notice[hidden] { display: none; }
.frexima-calendar-page .calendar-offline-notice .btn { margin-left: auto; min-height: 36px; }
.frexima-calendar-page .calendar-request-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.frexima-calendar-page .calendar-list-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px 20px; color: #596176; font-weight: 800; }
.frexima-calendar-page .calendar-list-filter-panel > summary { display: none; }
.frexima-calendar-page .calendar-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 14px; }
.frexima-calendar-page .calendar-filter-chips span { padding: 5px 9px; color: #4C1D95; background: #F2ECFF; border: 1px solid #DED4FF; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.frexima-calendar-page .booking-request-conflict {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0;
    padding: 8px 10px;
    color: #9A3412;
    background: #FFF7ED;
    border: 1px solid #FDBA74;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 760;
}

@media (max-width: 767.98px) {
    .frexima-calendar-page .calendar-view-tabs {
        display: flex;
        max-width: calc(100vw - 28px);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .frexima-calendar-page .calendar-view-tabs::-webkit-scrollbar { display: none; }
    .frexima-calendar-page .calendar-view-tabs .nav-link { min-width: 64px; padding-inline: 10px; }
    .frexima-calendar-page .calendar-ops-actions > .calendar-mobile-filter-button { display: inline-flex !important; }
    .frexima-calendar-page .calendar-request-actions { width: 100%; }
    .frexima-calendar-page .calendar-request-actions .btn { flex: 1 1 auto; }
    .frexima-calendar-page .calendar-list-filter-panel { border-bottom: 1px solid var(--frexima-border); }
    .frexima-calendar-page .calendar-list-filter-panel > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; color: #4C1D95; cursor: pointer; font-weight: 850; }
    .frexima-calendar-page .calendar-list-filter-panel > summary::-webkit-details-marker { display: none; }
}

/* Frexima no-panic dashboard */
.brand-body:has(.frexima-dashboard-page) {
    --frexima-ink: #080B25;
    --frexima-muted: #38415F;
    --frexima-soft: #F8FAFF;
    --frexima-line: #E7EBF5;
    --frexima-purple: #5B20F0;
    --frexima-purple-deep: #3C05C8;
    --frexima-blue: #0F68F2;
    --timeline-ink: #080B25;
    --timeline-muted: #596176;
    --timeline-line: #E8ECF5;
    --timeline-purple: #5B20F0;
    --timeline-green: #0EA56B;
    --timeline-amber: #F59E0B;
    background: #FFFFFF;
}

/* Phase 3 premium daily dashboard */
.frexima-premium-dashboard { gap: 22px; }
.frexima-premium-dashboard .frexima-action-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.frexima-premium-dashboard .frexima-action-card:first-child { grid-column: span 6; }
.frexima-premium-dashboard .frexima-action-card:not(:first-child) { grid-column: span 3; }
.frexima-premium-dashboard .frexima-action-card { min-height: 104px; }
.dashboard-status-strip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 1px 8px; scrollbar-width: thin; }
.premium-status-card { display: grid; grid-template-columns: 48px minmax(150px, 1fr) 18px; gap: 13px; align-items: center; min-width: 220px; min-height: 96px; flex: 1 0 0; padding: 15px 17px; color: var(--frexima-ink); text-decoration: none; background: #fff; border: 1px solid var(--frexima-line); border-radius: 12px; box-shadow: 0 9px 24px rgba(17,24,39,.05); }
.premium-status-card:hover { color: var(--frexima-ink); border-color: #cfc3ff; transform: translateY(-1px); }
.premium-status-icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--frexima-purple); background: #f1ecff; border-radius: 10px; font-size: 1.25rem; }
.premium-status-card > span:nth-child(2) { display: grid; min-width: 0; }
.premium-status-card small { color: var(--frexima-muted); font-weight: 760; }
.premium-status-card strong { margin-top: 1px; color: var(--frexima-ink); font-size: 1.45rem; font-weight: 930; }
.premium-status-card em { overflow: hidden; color: #69718a; font-size: .76rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.premium-dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(310px, 1fr); gap: 20px; align-items: start; }
.frexima-premium-dashboard .frexima-panel { padding: 24px; border-radius: 12px; }
.frexima-premium-dashboard .frexima-panel-heading { margin-bottom: 19px; }
.premium-day-list { display: grid; gap: 9px; }
.premium-day-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; min-height: 72px; padding: 12px 14px; color: inherit; text-decoration: none; border: 1px solid var(--frexima-line); border-radius: 10px; }
.premium-day-row:hover { color: inherit; border-color: #cfc3ff; background: #fcfbff; }
.premium-day-row time { color: #151b35; font-weight: 850; }
.premium-day-row > span { display: grid; min-width: 0; }
.premium-day-row strong { overflow: hidden; color: var(--frexima-ink); text-overflow: ellipsis; white-space: nowrap; }
.premium-day-row small { overflow: hidden; color: var(--frexima-muted); text-overflow: ellipsis; white-space: nowrap; }
.premium-day-row em { padding: 5px 10px; color: #4b1bd4; background: #f0e8ff; border-radius: 999px; font-size: .78rem; font-style: normal; font-weight: 820; }
.premium-day-row.blocked em { color: #647083; background: #edf0f4; }
.premium-day-row.available { border-style: dashed; background: #faf8ff; }
.premium-more-count { margin: 14px 0 0; color: var(--frexima-purple); font-weight: 800; }
.frexima-premium-dashboard .frexima-update-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #f5f6fa; border-radius: 10px; }
.frexima-premium-dashboard .frexima-update-tabs button { padding: 9px 6px; color: #566079; background: transparent; border: 0; border-radius: 8px; font-weight: 820; }
.frexima-premium-dashboard .frexima-update-tabs button.active { color: var(--frexima-purple); background: #fff; box-shadow: 0 4px 12px rgba(17,24,39,.07); }
.premium-update-panel { min-height: 270px; padding-top: 14px; }
.premium-update-list { display: grid; }
.premium-update-list a { display: grid; gap: 3px; padding: 14px 2px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--frexima-line); }
.premium-update-list a:last-child { border-bottom: 0; }
.premium-update-list small { color: var(--frexima-purple); font-weight: 830; text-transform: capitalize; }
.premium-update-list strong { color: var(--frexima-ink); line-height: 1.25; }
.premium-update-list span { color: var(--frexima-muted); font-size: .82rem; }
.premium-community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.premium-community-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 13px;
    min-height: 104px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: #fbfcff;
    border: 1px solid var(--frexima-line);
    border-radius: 11px;
}
.premium-community-card:hover { color: inherit; border-color: #cfc3ff; background: #f9f7ff; }
.premium-community-card img,
.premium-community-placeholder { width: 112px; height: 82px; border-radius: 9px; object-fit: cover; background: #f1ecff; }
.premium-community-placeholder { display: grid; place-items: center; color: var(--frexima-purple); font-size: 1.35rem; }
.premium-community-card > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.premium-community-card small { color: var(--frexima-purple); font-weight: 830; text-transform: capitalize; }
.premium-community-card strong { color: var(--frexima-ink); line-height: 1.3; }
.premium-community-card em { color: var(--frexima-muted); font-size: .8rem; font-style: normal; }
.premium-community-card > i { color: #8991a5; }
.premium-payment-preview { display: grid; }
.premium-payment-preview a { display: flex; justify-content: space-between; gap: 12px; padding: 18px 2px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--frexima-line); }
.premium-payment-preview span { color: var(--frexima-muted); }
.premium-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 13px; color: var(--frexima-muted); text-align: center; }
.premium-empty i { color: var(--frexima-purple); font-size: 2rem; }
.premium-empty div { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.premium-empty a, .dashboard-section-error button { padding: 8px 13px; color: #fff; text-decoration: none; background: var(--frexima-purple); border: 0; border-radius: 8px; font-weight: 780; }
.premium-empty.compact { min-height: 210px; }
.dashboard-skeleton { overflow: hidden; background: linear-gradient(90deg,#f0f2f7 25%,#fafbfe 50%,#f0f2f7 75%); background-size: 200% 100%; animation: dashboard-shimmer 1.25s infinite linear; border-radius: 10px; }
.dashboard-skeleton.status-skeleton { min-width: 220px; height: 96px; flex: 1; }
.dashboard-skeleton.line { height: 68px; margin-bottom: 10px; }
.dashboard-skeleton.line.short { width: 68%; }
@keyframes dashboard-shimmer { to { background-position: -200% 0; } }
.dashboard-section-error { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 9px; color: #69718a; text-align: center; }
.dashboard-section-error i { color: #c2410c; font-size: 1.6rem; }
.dashboard-section-error p { margin: 0; }
.dashboard-toast { position: fixed; z-index: 1090; right: 28px; bottom: 28px; padding: 12px 18px; color: #fff; background: #15162d; border-radius: 9px; box-shadow: 0 14px 35px rgba(8,11,37,.24); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.dashboard-toast.show { opacity: 1; transform: none; }
.dashboard-search-modal .modal-content { overflow: hidden; border: 0; border-radius: 14px; box-shadow: 0 28px 70px rgba(8,11,37,.22); }
.dashboard-search-input { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--frexima-line); }
.dashboard-search-input i { color: var(--frexima-purple); font-size: 1.3rem; }
.dashboard-search-input input { width: 100%; font-size: 1.05rem; border: 0; outline: 0; }
.dashboard-search-results { max-height: 58vh; padding: 13px 20px 20px; overflow: auto; }
.dashboard-search-results section { margin-top: 12px; }
.dashboard-search-results h3 { margin: 0 0 5px; color: #7a8297; font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.dashboard-search-results a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 8px; color: inherit; text-decoration: none; border-radius: 7px; }
.dashboard-search-results a:hover { background: #f7f4ff; }
.dashboard-search-results small { color: var(--frexima-muted); }

@media (max-width: 1199.98px) {
    .premium-dashboard-workspace { grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr); }
}
@media (max-width: 991.98px) {
    .frexima-premium-dashboard .frexima-action-card:first-child { grid-column: 1 / -1; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) { grid-column: span 6; }
    .premium-dashboard-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .frexima-premium-dashboard .frexima-dashboard-hero { flex-direction: row; align-items: flex-start; }
    .frexima-premium-dashboard .frexima-dashboard-top-actions { flex-wrap: nowrap; }
    .frexima-premium-dashboard .frexima-date-pill, .frexima-premium-dashboard .frexima-icon-pill[aria-label="Help"], .frexima-premium-dashboard .frexima-icon-pill[aria-label="Profile menu"] { display: none; }
    .frexima-premium-dashboard .frexima-action-grid { gap: 10px; }
    .frexima-premium-dashboard .frexima-action-card { min-height: 88px; padding: 13px; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) { grid-column: span 6; align-items: flex-start; flex-direction: column; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) .frexima-action-arrow { display: none; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) .frexima-action-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 1.2rem; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) strong { font-size: .9rem; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) small { font-size: .72rem; }
    .dashboard-status-strip { margin-right: -18px; padding-right: 18px; }
    .premium-status-card, .dashboard-skeleton.status-skeleton { min-width: 245px; flex: 0 0 78vw; }
    .premium-day-row { grid-template-columns: 1fr auto; gap: 5px 12px; }
    .premium-day-row time { grid-column: 1; }
    .premium-day-row > span { grid-column: 1; }
    .premium-day-row em { grid-column: 2; grid-row: 1 / span 2; }
    .premium-day-row > i { display: none; }
    .dashboard-toast { right: 16px; bottom: 88px; left: 16px; text-align: center; }
}

.brand-body:has(.frexima-dashboard-page) .brand-topbar {
    display: none;
}

/* P029 daily-focus dashboard overrides. Keep the next task above secondary content. */
.frexima-premium-dashboard {
    overflow-x: hidden;
}

.frexima-premium-dashboard > .frexima-dashboard-hero { order: 1; }
.frexima-premium-dashboard > .ai-dashboard-strip { order: 2; }
.frexima-premium-dashboard > .dashboard-status-strip { order: 3; }
.frexima-premium-dashboard > .dashboard-preview-state { order: 4; }
.frexima-premium-dashboard > .frexima-action-grid { order: 5; }
.frexima-premium-dashboard > .premium-dashboard-workspace { order: 6; }
.frexima-premium-dashboard > .dashboard-onboarding { order: 7; }
.frexima-premium-dashboard > .dashboard-access-state { order: 8; }
.frexima-premium-dashboard .premium-dashboard-workspace {
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr);
    align-items: start;
}
.frexima-premium-dashboard .premium-my-day {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.frexima-premium-dashboard .premium-priorities { grid-column: 2; grid-row: 1; }
.frexima-premium-dashboard .premium-invitations { grid-column: 2; grid-row: 2; }
.frexima-premium-dashboard .premium-updates { grid-column: 1 / -1; grid-row: 3; }
.frexima-premium-dashboard .premium-invitations,
.frexima-premium-dashboard .premium-priorities,
.frexima-premium-dashboard .premium-updates { min-width: 0; }
.frexima-premium-dashboard .premium-priorities,
.frexima-premium-dashboard .premium-invitations { padding: 20px; }
.frexima-premium-dashboard .premium-priorities .frexima-panel-heading,
.frexima-premium-dashboard .premium-invitations .frexima-panel-heading { margin-bottom: 14px; }
.frexima-premium-dashboard .premium-update-panel { min-height: 0; }
.frexima-premium-dashboard .frexima-action-card { min-height: 82px; }
.frexima-premium-dashboard .dashboard-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #7c2d12;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 10px;
    font-weight: 720;
}
.frexima-premium-dashboard .dashboard-alert.danger { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.frexima-premium-dashboard .dashboard-alert i { font-size: 1.2rem; }
.frexima-premium-dashboard .dashboard-alert span { min-width: 0; flex: 1; }
.frexima-premium-dashboard .dashboard-alert a,
.frexima-premium-dashboard .dashboard-alert button {
    min-height: 44px;
    padding: 8px 12px;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-weight: 850;
    text-decoration: none;
}
.frexima-premium-dashboard .dashboard-preview-state[hidden],
.frexima-premium-dashboard .dashboard-access-state[hidden] { display: none; }
.frexima-premium-dashboard .dashboard-compact-notice {
    color: var(--frexima-muted);
    background: #fbfcff;
    border: 1px solid var(--frexima-line);
    border-radius: 10px;
}
.frexima-premium-dashboard .dashboard-compact-notice.danger { color: #8f2f2f; background: #fffafa; border-color: #f1cccc; }
.frexima-premium-dashboard .dashboard-compact-notice.warning { color: #854d0e; background: #fffdf5; border-color: #f4dfaa; }
.frexima-premium-dashboard .dashboard-compact-notice.preview { color: #5a4194; background: #fcfbff; border-color: #e2daf8; }
.frexima-premium-dashboard .dashboard-compact-notice summary {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 13px;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 820;
    list-style: none;
}
.frexima-premium-dashboard .dashboard-compact-notice summary::-webkit-details-marker { display: none; }
.frexima-premium-dashboard .dashboard-compact-notice summary > i:last-child { transition: transform .18s ease; }
.frexima-premium-dashboard .dashboard-compact-notice[open] summary > i:last-child { transform: rotate(180deg); }
.frexima-premium-dashboard .dashboard-compact-notice > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 13px 12px 44px;
}
.frexima-premium-dashboard .dashboard-compact-notice p { margin: 0; font-size: .8rem; line-height: 1.45; }
.frexima-premium-dashboard .dashboard-compact-notice a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px;
    color: inherit;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 820;
}
.frexima-premium-dashboard .premium-status-card.attention { border-color: #fdba74; box-shadow: 0 9px 24px rgba(194,65,12,.09); }
.frexima-premium-dashboard .premium-status-card.attention .premium-status-icon { color: #c2410c; background: #fff1e8; }
.frexima-premium-dashboard .invitation-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.frexima-premium-dashboard .invitation-preview > div { display: grid; gap: 5px; min-width: 0; }
.frexima-premium-dashboard .invitation-preview strong { color: var(--frexima-ink); font-size: 1.08rem; }
.frexima-premium-dashboard .invitation-preview span { color: var(--frexima-muted); font-size: .86rem; }
.frexima-premium-dashboard .invitation-preview a { min-height: 44px; padding: 10px 14px; color: #fff; background: var(--frexima-purple); border-radius: 8px; font-weight: 830; text-decoration: none; white-space: nowrap; }
.frexima-premium-dashboard .dashboard-priority-list { display: grid; gap: 8px; }
.frexima-premium-dashboard .dashboard-priority-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: #fbfcff;
    border: 1px solid var(--frexima-line);
    border-radius: 10px;
}
.frexima-premium-dashboard .dashboard-priority-row:hover { color: inherit; border-color: #cfc3ff; background: #f9f7ff; }
.frexima-premium-dashboard .dashboard-priority-row.attention { border-color: #fdba74; background: #fffaf5; }
.frexima-premium-dashboard [data-dashboard-demo-priority][hidden] { display: none; }
.frexima-premium-dashboard .dashboard-priority-demo {
    color: #5a4194;
    background: #fcfbff;
    border: 1px solid #e2daf8;
    border-radius: 10px;
}
.frexima-premium-dashboard .dashboard-priority-demo summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px;
    cursor: pointer;
    list-style: none;
}
.frexima-premium-dashboard .dashboard-priority-demo summary::-webkit-details-marker { display: none; }
.frexima-premium-dashboard .dashboard-priority-demo summary > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.frexima-premium-dashboard .dashboard-priority-demo strong { color: var(--frexima-ink); font-size: .9rem; line-height: 1.3; }
.frexima-premium-dashboard .dashboard-priority-demo small { color: var(--frexima-muted); font-size: .76rem; }
.frexima-premium-dashboard .dashboard-priority-demo summary > i { color: #8991a5; transition: transform .18s ease; }
.frexima-premium-dashboard .dashboard-priority-demo[open] summary > i { transform: rotate(180deg); }
.frexima-premium-dashboard .dashboard-priority-demo p { margin: 0; padding: 0 10px 11px 58px; color: var(--frexima-muted); font-size: .76rem; line-height: 1.4; }
.frexima-premium-dashboard .dashboard-priority-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--frexima-purple); background: #f1ecff; border-radius: 9px; }
.frexima-premium-dashboard .dashboard-priority-row.attention .dashboard-priority-icon { color: #c2410c; background: #fff1e8; }
.frexima-premium-dashboard .dashboard-priority-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.frexima-premium-dashboard .dashboard-priority-row strong { color: var(--frexima-ink); font-size: .9rem; line-height: 1.3; }
.frexima-premium-dashboard .dashboard-priority-row small { color: var(--frexima-muted); font-size: .76rem; line-height: 1.3; }
.frexima-premium-dashboard .dashboard-priority-row > i { color: #8991a5; }
.frexima-premium-dashboard .dashboard-today-task-list {
    display: grid;
    gap: 2px;
    padding: 5px 8px;
    background: #f8f9fc;
    border-radius: 9px;
}
.frexima-premium-dashboard .dashboard-today-task-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 5px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--frexima-line);
}
.frexima-premium-dashboard .dashboard-today-task-list a:last-child { border-bottom: 0; }
.frexima-premium-dashboard .dashboard-today-task-list span { display: grid; min-width: 0; }
.frexima-premium-dashboard .dashboard-today-task-list strong { overflow: hidden; color: var(--frexima-ink); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.frexima-premium-dashboard .dashboard-today-task-list small { color: var(--frexima-muted); font-size: .7rem; }
.frexima-premium-dashboard .dashboard-today-task-list time { color: var(--frexima-purple); font-size: .72rem; font-weight: 850; }
.frexima-premium-dashboard .premium-empty > span { color: var(--frexima-muted); }
.frexima-premium-dashboard .premium-empty button { min-height: 44px; padding: 8px 13px; color: var(--frexima-purple); background: #fff; border: 1px solid #cfc3ff; border-radius: 8px; font-weight: 780; }

@media (max-width: 991.98px) {
    .frexima-premium-dashboard .premium-dashboard-workspace { grid-template-columns: 1fr; }
    .frexima-premium-dashboard .premium-my-day,
    .frexima-premium-dashboard .premium-priorities,
    .frexima-premium-dashboard .premium-invitations,
    .frexima-premium-dashboard .premium-updates {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 767.98px) {
    .frexima-premium-dashboard > .premium-dashboard-workspace { display: grid; grid-template-columns: 1fr; }
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-my-day,
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-priorities,
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-invitations,
    .frexima-premium-dashboard > .premium-dashboard-workspace > .premium-updates {
        grid-column: 1;
        grid-row: auto;
    }
    .frexima-premium-dashboard .frexima-date-pill { display: flex; min-height: 44px; gap: 7px; padding: 0 10px; font-size: .74rem; }
    .frexima-premium-dashboard .dashboard-status-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-right: 0; padding: 0; overflow: visible; }
    .frexima-premium-dashboard .premium-status-card,
    .frexima-premium-dashboard .dashboard-skeleton.status-skeleton { min-width: 0; min-height: 88px; flex: none; }
    .frexima-premium-dashboard .premium-status-card { grid-template-columns: 36px minmax(0, 1fr) 12px; gap: 8px; padding: 11px; }
    .frexima-premium-dashboard .premium-status-icon { width: 36px; height: 36px; font-size: 1rem; }
    .frexima-premium-dashboard .premium-status-card strong { font-size: 1.16rem; }
    .frexima-premium-dashboard .premium-status-card em { font-size: .68rem; }
    .frexima-premium-dashboard .frexima-action-card { min-height: 76px; padding: 12px; }
    .frexima-premium-dashboard .frexima-action-card:first-child { grid-column: 1 / -1; }
    .frexima-premium-dashboard .frexima-action-card:not(:first-child) { min-width: 0; }
    .frexima-premium-dashboard .premium-day-row { min-width: 0; }
    .frexima-premium-dashboard .premium-day-row strong,
    .frexima-premium-dashboard .premium-day-row small { white-space: normal; overflow-wrap: anywhere; }
    .frexima-premium-dashboard .invitation-preview { align-items: stretch; flex-direction: column; }
    .frexima-premium-dashboard .invitation-preview a { text-align: center; }
    .frexima-premium-dashboard .dashboard-alert { align-items: flex-start; flex-wrap: wrap; }
    .frexima-premium-dashboard .dashboard-alert span { flex-basis: calc(100% - 36px); }
    .frexima-premium-dashboard .dashboard-alert a,
    .frexima-premium-dashboard .dashboard-alert button { width: 100%; text-align: center; }
    .frexima-premium-dashboard .dashboard-compact-notice > div {
        align-items: stretch;
        flex-direction: column;
        padding-left: 13px;
    }
    .frexima-premium-dashboard .dashboard-compact-notice a { width: 100%; text-align: center; }
    .frexima-premium-dashboard .premium-community-grid { grid-template-columns: 1fr; }
    .frexima-premium-dashboard .premium-community-card { grid-template-columns: 86px minmax(0, 1fr) 12px; }
    .frexima-premium-dashboard .premium-community-card img,
    .frexima-premium-dashboard .premium-community-placeholder { width: 86px; height: 72px; }
}

@media (max-width: 359.98px) {
    .frexima-premium-dashboard .frexima-dashboard-hero h1 { font-size: 1.45rem; }
    .frexima-premium-dashboard .frexima-date-pill { max-width: 130px; overflow: hidden; }
    .frexima-premium-dashboard .frexima-date-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.brand-body:has(.frexima-dashboard-page) .brand-main-content {
    max-width: none;
    padding: 38px 48px 44px;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar {
    width: 264px;
    padding: 34px 18px 24px;
    border-right: 0;
    background: linear-gradient(180deg, #080A21 0%, #05071A 100%);
}

@media (min-width: 992px) {
    .brand-body:has(.frexima-dashboard-page) .brand-app-content {
        margin-left: 264px;
    }
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar .brand-wordmark strong,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar .brand-wordmark small {
    color: #FFFFFF !important;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar .brand-wordmark small {
    opacity: 0.72;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link {
    min-height: 56px;
    padding: 13px 16px;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 1rem;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link:hover,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link:focus,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #6027F4, #4610C9) !important;
    border-color: transparent !important;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link:hover i,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link:focus i,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link.active i {
    color: #FFFFFF !important;
}

.brand-body:has(.frexima-dashboard-page) .brand-help-card {
    display: none;
}

.brand-body:has(.frexima-dashboard-page) .brand-sidebar-section-label {
    display: block;
    margin: 16px 12px 6px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.frexima-dashboard-page,
.frexima-dashboard-page * {
    letter-spacing: 0;
}

.frexima-dashboard-page {
    display: grid;
    gap: 28px;
    min-height: calc(100vh - 82px);
    color: var(--frexima-ink);
}

.frexima-dashboard-hero,
.frexima-dashboard-top-actions,
.frexima-date-pill,
.frexima-icon-pill,
.frexima-help-pill,
.frexima-panel-heading,
.frexima-panel-heading > div,
.frexima-panel-link,
.frexima-action-card,
.frexima-feed-actions,
.frexima-feed-row {
    display: flex;
    align-items: center;
}

.frexima-dashboard-hero {
    justify-content: space-between;
    gap: 24px;
}

.frexima-dashboard-hero h1 {
    margin: 0;
    color: var(--frexima-ink);
    font-size: clamp(2rem, 2.1vw, 2.9rem);
    font-weight: 940;
    line-height: 1.08;
}

.frexima-dashboard-hero h1 span:first-child {
    color: var(--frexima-purple);
}

.frexima-dashboard-hero p {
    margin: 10px 0 0;
    color: var(--frexima-muted);
    font-size: 1.08rem;
    font-weight: 620;
}

.frexima-dashboard-top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 16px;
}

.frexima-date-pill,
.frexima-icon-pill,
.frexima-help-pill {
    min-height: 54px;
    color: var(--frexima-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--frexima-line);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.055);
}

.frexima-date-pill {
    gap: 16px;
    padding: 0 22px;
    font-weight: 820;
}

.frexima-date-pill i:first-child,
.frexima-help-pill i {
    color: var(--frexima-purple);
    font-size: 1.3rem;
}

.frexima-icon-pill {
    position: relative;
    justify-content: center;
    width: 64px;
    color: var(--frexima-purple);
    font-size: 1.2rem;
}

.frexima-icon-pill span {
    position: absolute;
    top: -6px;
    right: 13px;
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    color: #FFFFFF;
    background: #FF315C;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
}

.frexima-help-pill {
    gap: 12px;
    padding: 0 22px;
    font-weight: 820;
}

.frexima-action-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 16px;
}

.frexima-action-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 108px;
    gap: 16px;
    overflow: hidden;
    padding: 20px 22px;
    color: #FFFFFF;
    text-align: left;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(55, 35, 180, 0.16);
}

.frexima-action-card:hover,
.frexima-action-card:focus {
    color: #FFFFFF;
    transform: translateY(-1px);
}

.frexima-action-card.purple {
    background: linear-gradient(135deg, var(--frexima-purple) 0%, var(--frexima-purple-deep) 100%);
}

.frexima-action-card.blue {
    background: linear-gradient(135deg, #3182FF 0%, var(--frexima-blue) 100%);
}

.frexima-action-card.secondary {
    color: var(--fx-text);
    background: #FFFFFF;
    border-color: var(--fx-border);
    box-shadow: 0 10px 26px rgba(21, 20, 37, 0.06);
}

.frexima-action-card.secondary:hover,
.frexima-action-card.secondary:focus {
    color: var(--fx-text);
    border-color: #CFC3FF;
    box-shadow: 0 14px 30px rgba(108, 60, 240, 0.12);
}

.frexima-action-icon,
.frexima-action-arrow {
    display: inline-grid;
    place-items: center;
    color: currentColor;
    background: rgba(255, 255, 255, 0.96);
}

.frexima-action-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    color: var(--frexima-purple);
    border-radius: 8px;
    font-size: 2.1rem;
}

.frexima-action-card.blue .frexima-action-icon {
    color: var(--frexima-blue);
}

.frexima-action-card.secondary .frexima-action-icon {
    color: var(--fx-primary);
    background: #F1ECFF;
}

.frexima-action-card strong,
.frexima-action-card small {
    display: block;
}

.frexima-action-card strong {
    color: #FFFFFF;
    font-size: 1.12rem;
    font-weight: 930;
    line-height: 1.15;
}

.frexima-action-card small {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.88);
    font-size: .86rem;
    font-weight: 650;
}

.frexima-action-arrow {
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: var(--frexima-purple);
    border-radius: 999px;
    font-size: 1.45rem;
}

.frexima-action-card.blue .frexima-action-arrow {
    color: var(--frexima-blue);
}

.frexima-action-card.secondary strong {
    color: var(--fx-text);
}

.frexima-action-card.secondary small {
    color: var(--fx-text-secondary);
}

.frexima-action-card.secondary .frexima-action-arrow {
    color: var(--fx-primary);
    background: #F7F4FF;
}

@media (max-width: 1199.98px) {
    .frexima-action-grid {
        grid-template-columns: 1fr 1fr;
    }

    .frexima-action-card.purple {
        grid-column: 1 / -1;
    }
}

.frexima-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.18fr);
    gap: 22px;
    align-items: stretch;
}

.frexima-panel {
    min-width: 0;
    padding: 28px 30px;
    background: #FFFFFF;
    border: 1px solid var(--frexima-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.055);
}

.frexima-panel-heading {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.frexima-panel-heading > div {
    min-width: 0;
    gap: 14px;
}

.frexima-panel-heading i {
    color: var(--frexima-purple);
    font-size: 1.45rem;
}

.frexima-panel-heading h2 {
    margin: 0;
    color: var(--frexima-ink);
    font-size: 1.28rem;
    font-weight: 930;
}

.frexima-panel-heading a,
.frexima-panel-link {
    color: var(--frexima-purple);
    text-decoration: none;
    font-weight: 870;
}

.frexima-timeline-list {
    position: relative;
    display: grid;
    gap: 12px;
    padding-left: 88px;
}

.frexima-timeline-list::before {
    position: absolute;
    top: 7px;
    bottom: 28px;
    left: 32px;
    width: 2px;
    content: "";
    background: linear-gradient(180deg, #9D75FF, #5B20F0);
    opacity: 0.58;
}

.frexima-timeline-item {
    position: relative;
    min-width: 0;
}

.frexima-timeline-item::before {
    position: absolute;
    top: 28px;
    left: -61px;
    width: 12px;
    height: 12px;
    content: "";
    background: var(--frexima-purple);
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(91, 32, 240, 0.12);
}

.frexima-timeline-item > time {
    position: absolute;
    top: 20px;
    left: -88px;
    width: 52px;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 820;
    line-height: 1.18;
    text-align: left;
}

.frexima-timeline-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 18px;
    gap: 14px;
    align-items: center;
    min-height: 88px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--frexima-line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.035);
}

.frexima-timeline-card:hover,
.frexima-timeline-card:focus {
    color: inherit;
    border-color: rgba(91, 32, 240, 0.32);
    box-shadow: 0 14px 30px rgba(91, 32, 240, 0.08);
}

.frexima-timeline-card > img,
.frexima-avatar-fallback {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    object-fit: cover;
    color: var(--frexima-purple);
    background: #F1EAFF;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.frexima-timeline-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.frexima-timeline-copy strong,
.frexima-timeline-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frexima-timeline-copy strong {
    color: var(--frexima-ink);
    font-size: 1rem;
    font-weight: 900;
}

.frexima-timeline-copy small {
    color: #24304F;
    font-size: 0.93rem;
    font-weight: 650;
}

.frexima-timeline-copy em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    padding: 9px 14px;
    overflow: hidden;
    color: #3110A5;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(135deg, #F7F1FF, #EFE6FF);
    border-radius: 8px;
    font-style: normal;
    font-weight: 760;
}

.frexima-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.frexima-status-pill.success {
    color: #07814E;
    background: #E9FAF1;
}

.frexima-status-pill.warning {
    color: #A05600;
    background: #FFF3DE;
}

.frexima-status-pill.info,
.frexima-status-pill.primary {
    color: #4B1BD4;
    background: #F0E8FF;
}

.frexima-status-pill.danger {
    color: #B42318;
    background: #FFF0F0;
}

.frexima-status-pill.muted {
    color: #536079;
    background: #F3F5F9;
}

.frexima-panel-link {
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    font-size: 1rem;
}

.frexima-panel-link.inline {
    display: inline-flex;
    justify-content: flex-start;
    margin-top: 14px;
}

.frexima-feed-list {
    display: grid;
}

.frexima-feed-feature {
    display: grid;
    grid-template-columns: minmax(220px, 0.92fr) minmax(220px, 1fr);
    gap: 28px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--frexima-line);
}

.frexima-feed-feature img {
    display: block;
    width: 100%;
    aspect-ratio: 1.25;
    object-fit: cover;
    border-radius: 8px;
}

.frexima-feed-feature h3,
.frexima-feed-row h3 {
    margin: 0;
    color: var(--frexima-ink);
    font-weight: 920;
    line-height: 1.28;
}

.frexima-feed-feature h3 {
    font-size: 1.32rem;
}

.frexima-feed-feature p,
.frexima-feed-row p {
    margin: 12px 0 0;
    color: #2F3858;
    font-weight: 620;
}

.frexima-feed-actions {
    gap: 24px;
    margin-top: 28px;
    color: #121A34;
    font-weight: 760;
}

.frexima-feed-actions span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.frexima-feed-actions .bi-heart-fill {
    color: #FF2851;
}

.frexima-feed-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto auto;
    gap: 18px;
    min-height: 112px;
    padding: 16px 0;
    border-bottom: 1px solid var(--frexima-line);
}

.frexima-feed-row:last-child {
    border-bottom: 0;
}

.frexima-feed-row img {
    width: 112px;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
}

.frexima-feed-row h3 {
    font-size: 1.02rem;
}

.frexima-feed-row > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1F2947;
    font-weight: 760;
    white-space: nowrap;
}

.frexima-feed-row .bi-heart {
    color: #FF2851;
}

.frexima-empty-state {
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 28px;
    color: var(--frexima-muted);
    text-align: center;
}

.frexima-empty-state > i {
    display: inline-grid;
    width: 74px;
    height: 74px;
    place-items: center;
    color: var(--frexima-purple);
    background: #F1EAFF;
    border-radius: 8px;
    font-size: 2rem;
}

.frexima-empty-state h3 {
    margin: 0;
    color: var(--frexima-ink);
    font-size: 1.18rem;
    font-weight: 900;
}

.frexima-empty-state p {
    max-width: 420px;
    margin: 0;
}

@media (max-width: 1399.98px) {
    .brand-body:has(.frexima-dashboard-page) .brand-main-content {
        padding: 30px;
    }

    .frexima-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .brand-body:has(.frexima-dashboard-page) .brand-topbar {
        display: flex;
    }

    .brand-body:has(.frexima-dashboard-page) .brand-main-content {
        padding: 18px;
    }

    .frexima-dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .frexima-dashboard-top-actions {
        justify-content: flex-start;
        gap: 10px;
    }

    .frexima-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .frexima-dashboard-page {
        gap: 16px;
    }

    .frexima-date-pill,
    .frexima-help-pill {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 12px;
    }

    .frexima-help-pill span,
    .frexima-search-pill kbd {
        display: none;
    }

    .frexima-icon-pill {
        width: 44px;
        min-height: 44px;
    }

    .frexima-action-card {
        min-height: 92px;
        padding: 16px;
    }

    .frexima-action-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        font-size: 1.55rem;
    }

    .frexima-panel {
        padding: 18px;
    }

    .frexima-dashboard-hero h1 {
        font-size: 1.62rem;
    }

    .frexima-dashboard-hero p {
        margin-top: 6px;
        font-size: 0.95rem;
    }

    .frexima-search-pill {
        min-height: 46px;
    }

    .frexima-empty-state {
        min-height: 0;
        padding: 18px 8px;
    }

    .frexima-empty-state > i {
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
    }

    .frexima-timeline-list {
        padding-left: 0;
    }

    .frexima-timeline-list::before,
    .frexima-timeline-item::before {
        display: none;
    }

    .frexima-timeline-item > time {
        position: static;
        display: block;
        width: auto;
        margin: 0 0 8px;
    }

    .frexima-timeline-card {
        grid-template-columns: 46px minmax(0, 1fr) 18px;
    }

    .frexima-timeline-card > img,
    .frexima-avatar-fallback {
        width: 46px;
        height: 46px;
    }

    .frexima-status-pill {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .frexima-feed-feature,
    .frexima-feed-row {
        grid-template-columns: 1fr;
    }

    .frexima-feed-row img {
        width: 100%;
        height: auto;
        aspect-ratio: 1.7;
    }

    .frexima-feed-row > span {
        justify-self: start;
    }
}

/* Frexima dashboard final overrides */
.frexima-dashboard-workspace {
    display: grid;
    grid-template-columns: minmax(520px, 1.42fr) minmax(340px, 0.82fr);
    gap: 22px;
    align-items: start;
}

.frexima-dashboard-rail {
    display: grid;
    gap: 18px;
}

.frexima-timeline-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.frexima-timeline-main {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.frexima-timeline-main > img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 999px;
}

.frexima-feed-panel .frexima-feed-feature {
    grid-template-columns: 1fr;
    gap: 14px;
}

.frexima-feed-panel .frexima-feed-feature img {
    aspect-ratio: 1.75;
}

.frexima-feed-panel .frexima-feed-row {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 88px;
}

.frexima-feed-panel .frexima-feed-row img {
    width: 76px;
    height: 72px;
}

.frexima-feed-panel .frexima-feed-row > span {
    display: none;
}

.frexima-dashboard-voice-card {
    min-height: 112px;
    padding: 22px 26px;
}

.frexima-dashboard-voice-card .frexima-voice-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    font-size: 1.45rem;
}

.frexima-dashboard-voice-card h2 {
    font-size: 1.24rem;
}

.frexima-dashboard-voice-card p {
    font-size: 0.94rem;
}

.frexima-timeline-panel .frexima-panel-heading {
    margin-bottom: 14px;
}

.frexima-dashboard-time-rail .timeline-time-card {
    box-shadow: none;
}

.frexima-dashboard-time-rail .timeline-status-pill {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.my-time-heading-actions,
.my-time-staff-switcher,
.my-time-day-summary,
.my-time-open-block,
.my-time-open-block a,
.my-time-blocked-block,
.my-time-appointment-block {
    display: flex;
    align-items: center;
}

.my-time-heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.my-time-heading-actions a {
    display: inline-grid;
    min-height: 34px;
    place-items: center;
    padding: 0 11px;
    color: var(--frexima-purple);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid rgba(91, 32, 240, 0.18);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 900;
}

.my-time-staff-switcher {
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 14px;
}

.my-time-staff-switcher a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: max-content;
    min-height: 42px;
    padding: 6px 12px 6px 7px;
    color: #17203B;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E7EBF5;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 900;
}

.my-time-staff-switcher a span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #FFFFFF;
    background: var(--frexima-purple);
    border-radius: 999px;
    font-size: 0.68rem;
}

.my-time-staff-switcher a.active {
    color: var(--frexima-purple);
    background: #F6F1FF;
    border-color: rgba(91, 32, 240, 0.34);
}

.my-time-planner {
    overflow-x: auto;
    padding: 4px 0 0;
}

.my-time-board {
    display: grid;
    grid-template-columns: 78px minmax(430px, 1fr);
    min-height: var(--my-time-height);
}

.my-time-axis,
.my-time-track {
    position: relative;
    min-height: var(--my-time-height);
}

.my-time-axis {
    border-right: 1px solid #E2E7F1;
}

.my-time-axis-label {
    position: absolute;
    right: 13px;
    color: #34405D;
    font-size: 0.78rem;
    font-weight: 900;
    transform: translateY(-50%);
}

.my-time-track {
    margin-left: 16px;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--my-time-hour-height) - 1px),
            #E8ECF5 calc(var(--my-time-hour-height) - 1px),
            #E8ECF5 var(--my-time-hour-height)
        ),
        #FFFFFF;
    border: 1px solid #E7EBF5;
    border-radius: 8px;
}

.my-time-track.is-drop-target {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(91, 32, 240, 0.035) 0,
            rgba(91, 32, 240, 0.035) calc(var(--my-time-hour-height) - 1px),
            rgba(91, 32, 240, 0.18) calc(var(--my-time-hour-height) - 1px),
            rgba(91, 32, 240, 0.18) var(--my-time-hour-height)
        ),
        #FFFFFF;
}

.my-time-open-block,
.my-time-blocked-block,
.my-time-appointment-block {
    position: absolute;
    right: 12px;
    left: 12px;
    z-index: 2;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.my-time-open-block {
    justify-content: space-between;
    color: #047857;
    background: #ECFDF5;
    border: 1px dashed rgba(14, 165, 107, 0.34);
    box-shadow: none;
}

.my-time-open-block a {
    min-width: 0;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.my-time-open-block a > i,
.my-time-blocked-block > i {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    background: #FFFFFF;
    border-radius: 999px;
}

.my-time-open-block strong,
.my-time-open-block small,
.my-time-blocked-block strong,
.my-time-blocked-block span {
    display: block;
}

.my-time-open-block strong,
.my-time-blocked-block strong {
    color: #111735;
    font-size: 0.86rem;
    font-weight: 940;
}

.my-time-open-block small,
.my-time-blocked-block span {
    margin-top: 2px;
    color: #34405D;
    font-size: 0.74rem;
    font-weight: 760;
}

.my-time-open-block form {
    margin: 0;
}

.my-time-open-block button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #64748B;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
}

.my-time-blocked-block {
    z-index: 3;
    color: #475569;
    background: #F4F6FA;
    border: 1px solid #E2E8F0;
    box-shadow: none;
}

.my-time-appointment-block {
    z-index: 4;
    background: linear-gradient(135deg, #F5F3FF 0%, #FFFFFF 100%);
    border: 1px solid rgba(91, 32, 240, 0.18);
    cursor: grab;
}

.my-time-appointment-block.warning {
    background: linear-gradient(135deg, #FFF7E6 0%, #FFFFFF 100%);
    border-color: rgba(245, 158, 11, 0.25);
}

.my-time-appointment-block.success {
    background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
    border-color: rgba(34, 197, 94, 0.22);
}

.my-time-appointment-block.danger {
    background: linear-gradient(135deg, #FEF2F2 0%, #FFFFFF 100%);
    border-color: rgba(239, 68, 68, 0.22);
}

.my-time-appointment-block.is-dragging {
    opacity: 0.58;
}

.my-time-empty-state {
    position: absolute;
    inset: 18px;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 240px;
    color: #38415F;
    text-align: center;
    background: rgba(248, 250, 255, 0.9);
    border: 1px dashed #D8DEEA;
    border-radius: 8px;
}

.my-time-empty-state strong,
.my-time-empty-state span {
    display: block;
}

.my-time-empty-state strong {
    color: #080B25;
    font-weight: 940;
}

.my-time-day-summary {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.my-time-day-summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-height: 36px;
    padding: 0 12px;
    color: #38415F;
    background: #F8FAFF;
    border: 1px solid #E7EBF5;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 820;
}

.my-time-day-summary strong {
    color: #080B25;
    font-size: 0.98rem;
    font-weight: 940;
}

@media (max-width: 767.98px) {
    .my-time-heading-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .my-time-board {
        grid-template-columns: 58px minmax(300px, 1fr);
    }

    .my-time-track {
        margin-left: 10px;
    }

    .my-time-axis-label {
        right: 8px;
        font-size: 0.68rem;
    }

    .my-time-open-block,
    .my-time-blocked-block,
    .my-time-appointment-block {
        right: 8px;
        left: 8px;
        gap: 8px;
        padding: 10px;
    }

    .my-time-appointment-block .timeline-client-avatar {
        display: none;
    }

    .my-time-appointment-block .timeline-status-pill {
        margin-left: 0;
    }

    .my-time-day-summary span {
        flex: 1 1 130px;
    }
}

.frexima-feed-new-post {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    margin: -8px 0 10px;
    padding: 0 14px;
    color: var(--frexima-purple);
    text-decoration: none;
    background: #F7F3FF;
    border: 1px dashed rgba(91, 32, 240, 0.42);
    border-radius: 8px;
    font-weight: 900;
}

.frexima-feed-new-post span {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #FFFFFF;
    background: var(--frexima-purple);
    border-radius: 8px;
}

.frexima-feed-new-post strong {
    color: var(--frexima-purple);
    font-size: 0.98rem;
}

.frexima-feed-panel .frexima-feed-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    min-height: 76px;
    gap: 12px;
    padding: 12px 0;
}

.frexima-feed-panel .frexima-feed-row.latest {
    min-height: 70px;
}

.frexima-feed-panel .frexima-feed-row img {
    width: 64px;
    height: 60px;
}

.frexima-feed-panel .frexima-feed-row h3 {
    font-size: 0.96rem;
}

.frexima-feed-panel .frexima-feed-row p {
    margin-top: 5px;
    font-size: 0.84rem;
}

.frexima-feed-view-new {
    align-self: center;
    justify-self: end;
    padding: 7px 10px;
    color: var(--frexima-purple);
    text-decoration: none;
    background: #F4F0FF;
    border: 1px solid rgba(91, 32, 240, 0.24);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 1399.98px) {
    .frexima-dashboard-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .frexima-timeline-main {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .frexima-timeline-main .frexima-status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .frexima-dashboard-voice-card {
        align-items: stretch;
        padding: 20px;
    }

    .frexima-feed-panel .frexima-feed-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .frexima-feed-panel .frexima-feed-row img {
        width: 58px;
        height: 56px;
    }

    .frexima-feed-view-new {
        grid-column: 2;
        justify-self: start;
    }
}

/* Frexima public booking experience */
.booking-body {
    --booking-ink: #080B32;
    --booking-muted: #4B5574;
    --booking-line: #E6EAF4;
    --booking-purple: #5520F0;
    --booking-purple-dark: #3D0BC7;
    --booking-purple-soft: #F3EEFF;
    --booking-green: #18A83C;
    --booking-amber: #F59E0B;
    --booking-navy: #071044;
    background:
        linear-gradient(135deg, #F7F8FE 0%, #FFFFFF 46%, #FDF8FA 100%);
    color: var(--booking-ink);
}

.booking-shell.booking-experience {
    width: min(1440px, calc(100% - 34px));
    padding: 28px 0 46px;
}

.booking-experience,
.booking-experience * {
    letter-spacing: 0;
}

.booking-topbar,
.booking-topbar-actions,
.booking-user-chip,
.booking-progress,
.booking-progress span,
.booking-section-heading,
.booking-selected-pill,
.booking-category-row,
.booking-filter-chips,
.booking-date-input,
.booking-date-rail,
.booking-slot-legend,
.booking-slot-legend span,
.booking-success-actions,
.booking-error-actions {
    display: flex;
    align-items: center;
}

.booking-topbar {
    min-height: 64px;
    margin-bottom: 18px;
}

.booking-topbar .booking-brand strong {
    color: var(--booking-ink);
    font-size: 1.42rem;
    font-weight: 940;
    text-transform: uppercase;
}

.booking-topbar .booking-brand img,
.booking-topbar .booking-brand span {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.booking-topbar-actions {
    justify-content: flex-end;
    gap: 14px;
}

.booking-icon-link,
.booking-user-chip {
    color: var(--booking-ink);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--booking-line);
    box-shadow: 0 14px 34px rgba(31, 35, 78, 0.075);
}

.booking-icon-link {
    position: relative;
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 999px;
    font-size: 1.18rem;
}

.booking-icon-link span {
    position: absolute;
    top: -7px;
    right: -4px;
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    color: #FFFFFF;
    background: var(--booking-purple);
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.booking-user-chip {
    gap: 11px;
    min-height: 52px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    font-weight: 850;
}

.booking-user-chip img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 999px;
}

.booking-modern-hero,
.booking-progress,
.booking-step-card,
.booking-summary-card,
.booking-success-page,
.booking-empty-modern,
.booking-profile-modal {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(36, 41, 86, 0.07);
}

.booking-modern-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    align-items: center;
    margin-bottom: 18px;
    padding: 28px 32px;
}

.booking-modern-hero h1 {
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 950;
}

.booking-modern-hero p {
    color: #1B214B;
    font-size: 1rem;
    font-weight: 680;
}

.booking-modern-hero .booking-contact-list span {
    color: var(--booking-muted);
    font-weight: 690;
}

.booking-progress {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 24px;
    overflow-x: auto;
}

.booking-progress span {
    position: relative;
    flex: 1 1 140px;
    min-width: 118px;
    gap: 11px;
    color: var(--booking-muted);
    font-weight: 820;
}

.booking-progress span:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: 10px;
    left: 48px;
    height: 1px;
    content: "";
    background: #D8DEF0;
    transform: translateY(-50%);
}

.booking-progress b {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--booking-ink);
    background: #FFFFFF;
    border: 1px solid #DDE3F2;
    border-radius: 999px;
    font-style: normal;
    font-weight: 930;
    box-shadow: 0 10px 22px rgba(35, 39, 78, 0.06);
}

.booking-progress em {
    position: relative;
    z-index: 1;
    padding-right: 12px;
    background: rgba(255, 255, 255, 0.92);
    font-style: normal;
    white-space: nowrap;
}

.booking-progress .active b,
.booking-progress .complete b {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--booking-purple), var(--booking-purple-dark));
    border-color: transparent;
}

.booking-progress .active em,
.booking-progress .complete em {
    color: var(--booking-ink);
}

.booking-selection-form,
.booking-confirm-form,
.booking-final-main {
    display: grid;
    gap: 18px;
}

.booking-step-card {
    min-width: 0;
    padding: 24px;
}

.booking-section-heading {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.booking-section-heading h2,
.booking-stylist-feature h3,
.booking-empty-slots h3,
.booking-summary-card h3 {
    margin: 0;
    color: var(--booking-ink);
    font-weight: 940;
    line-height: 1.18;
}

.booking-section-heading h2 {
    font-size: 1.12rem;
}

.section-label {
    margin: 0 0 5px;
    color: var(--booking-purple);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.booking-selected-pill {
    gap: 7px;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    color: #3513B7;
    background: var(--booking-purple-soft);
    border: 1px solid rgba(85, 32, 240, 0.16);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 860;
}

.booking-category-row {
    gap: 10px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.booking-progress,
.booking-category-row,
.booking-date-rail,
.booking-portfolio-strip {
    scrollbar-width: none;
}

.booking-progress::-webkit-scrollbar,
.booking-category-row::-webkit-scrollbar,
.booking-date-rail::-webkit-scrollbar,
.booking-portfolio-strip::-webkit-scrollbar {
    display: none;
}

.booking-category-row a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0 14px;
    color: #202849;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 820;
}

.booking-category-row a.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--booking-purple), var(--booking-purple-dark));
    border-color: transparent;
}

.booking-category-row a.muted:not(.active) {
    color: #7A839B;
    background: #F7F8FC;
}

.booking-service-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.booking-service-grid-modern .booking-service-card {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 128px;
    padding: 12px;
    border-color: var(--booking-line);
    box-shadow: 0 10px 24px rgba(35, 39, 78, 0.035);
}

.booking-service-grid-modern .booking-service-card:hover,
.booking-service-grid-modern .booking-service-card:focus-within,
.booking-service-grid-modern .booking-service-card.selected,
.booking-service-grid-modern .booking-service-card:has(input:checked) {
    border-color: rgba(85, 32, 240, 0.62);
    box-shadow: 0 0 0 3px rgba(85, 32, 240, 0.11), 0 14px 30px rgba(85, 32, 240, 0.08);
}

.booking-service-grid-modern .booking-service-image {
    width: 84px;
    height: 102px;
    color: var(--booking-purple);
    background: #F4F1FF;
}

.booking-service-copy span {
    color: var(--booking-ink);
    font-size: 0.88rem;
    font-weight: 870;
}

.booking-stylist-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.38fr) minmax(0, 1fr);
    gap: 18px;
}

.booking-filter-chips {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.booking-filter-chips button {
    min-height: 34px;
    padding: 0 12px;
    color: #303958;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 820;
}

.booking-filter-chips button.active {
    color: #FFFFFF;
    background: var(--booking-purple);
    border-color: var(--booking-purple);
}

.booking-selected-service {
    align-self: start;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.booking-selected-service p,
.booking-summary-card p {
    margin: 0 0 13px;
    color: var(--booking-muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.booking-selected-service div {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.booking-selected-service img {
    width: 62px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
}

.booking-selected-service strong,
.booking-selected-service small,
.booking-stylist-card strong,
.booking-stylist-card small,
.booking-stylist-card em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-selected-service strong {
    color: var(--booking-ink);
    font-weight: 930;
}

.booking-selected-service small {
    color: var(--booking-muted);
    font-size: 0.82rem;
    font-weight: 690;
}

.booking-selected-service a,
.booking-stylist-feature button,
.booking-stylist-card > button,
.booking-book-again,
.booking-show-more {
    color: var(--booking-purple);
    text-decoration: none;
    background: transparent;
    border: 0;
    font-weight: 880;
}

.booking-stylist-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.booking-stylist-feature {
    display: grid;
    grid-template-columns: 116px minmax(220px, 1fr) minmax(210px, 0.8fr);
    gap: 18px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.booking-stylist-feature > img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 999px;
}

.booking-stylist-feature p {
    margin: 7px 0 12px;
    color: var(--booking-purple);
    font-weight: 900;
}

.booking-stylist-feature span,
.booking-stylist-card small {
    color: #283252;
    font-size: 0.82rem;
    font-weight: 720;
}

.booking-stylist-feature .bi-star-fill,
.booking-stylist-card .bi-star-fill {
    color: #FFB000;
    margin-right: 4px;
}

.booking-portfolio-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.booking-portfolio-strip img {
    width: 100%;
    height: 108px;
    object-fit: cover;
    border-radius: 8px;
}

.booking-stylist-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.booking-stylist-card {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(35, 39, 78, 0.035);
}

.booking-stylist-card:hover,
.booking-stylist-card:focus-within,
.booking-stylist-card.selected,
.booking-stylist-card:has(input:checked) {
    border-color: rgba(85, 32, 240, 0.62);
    box-shadow: 0 0 0 3px rgba(85, 32, 240, 0.11);
}

.booking-stylist-card label {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}

.booking-stylist-card input,
.booking-payment-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-stylist-card img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 999px;
}

.booking-stylist-card strong {
    color: var(--booking-ink);
    font-size: 0.92rem;
    font-weight: 920;
}

.booking-stylist-card em {
    margin-top: 3px;
    color: var(--booking-muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 690;
}

.booking-stylist-card b {
    align-self: start;
    padding: 4px 7px;
    color: #3513B7;
    background: var(--booking-purple-soft);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
}

.booking-stylist-card > button {
    justify-self: start;
    padding: 0;
    font-size: 0.78rem;
}

.booking-date-input {
    gap: 10px;
    flex: 0 1 420px;
    justify-content: flex-end;
}

.booking-date-input .form-control {
    min-width: 170px;
}

.booking-date-rail {
    gap: 10px;
    overflow-x: auto;
}

.booking-date-rail a {
    display: grid;
    min-width: 104px;
    min-height: 66px;
    place-items: center;
    color: var(--booking-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    font-weight: 860;
}

.booking-date-rail a.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--booking-purple), var(--booking-purple-dark));
    border-color: transparent;
}

.booking-date-rail span {
    font-size: 0.82rem;
    opacity: 0.82;
}

.booking-final-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.36fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.booking-slot-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
}

.booking-slot-grid-modern .booking-slot {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 12px;
    align-items: center;
    align-content: center;
    gap: 8px;
    padding: 0 16px;
    color: var(--booking-ink);
    border-color: var(--booking-line);
    box-shadow: 0 8px 18px rgba(35, 39, 78, 0.035);
}

.booking-slot-grid-modern .booking-slot strong {
    font-size: 0.95rem;
    font-weight: 890;
}

.booking-slot-grid-modern .booking-slot i {
    width: 8px;
    height: 8px;
    background: var(--booking-green);
    border-radius: 999px;
}

.booking-slot-grid-modern .booking-slot.limited i {
    background: var(--booking-amber);
}

.booking-slot-grid-modern .booking-slot.disabled {
    color: #9AA3B8;
    cursor: not-allowed;
    background: #F2F4F8;
}

.booking-slot-grid-modern .booking-slot.disabled i {
    background: #B9C0D3;
}

.booking-slot-grid-modern .booking-slot:has(input:checked) {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--booking-purple), var(--booking-purple-dark));
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(85, 32, 240, 0.23);
}

.booking-slot-grid-modern .booking-slot:has(input:checked) i {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 2px solid #FFFFFF;
}

.booking-show-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 0;
}

.booking-slot-legend {
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: var(--booking-muted);
    font-size: 0.82rem;
    font-weight: 760;
}

.booking-slot-legend span {
    gap: 8px;
}

.booking-slot-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.booking-slot-legend .available {
    background: var(--booking-green);
}

.booking-slot-legend .selected {
    background: #FFFFFF;
    border: 2px solid var(--booking-purple);
}

.booking-slot-legend .booked {
    background: #AEB6CB;
}

.booking-slot-legend .limited {
    background: var(--booking-amber);
}

.booking-empty-slots {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding: 18px;
    background: #FFF9EF;
    border: 1px solid #FFE3B3;
    border-radius: 8px;
}

.booking-empty-slots p {
    margin: 0;
    color: #6E4B10;
    font-weight: 680;
}

.booking-empty-slots div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

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

.booking-details-grid .span-2 {
    grid-column: 1 / -1;
}

.booking-details-grid .form-label {
    color: #202849;
    font-size: 0.84rem;
    font-weight: 850;
}

.booking-details-grid .form-control,
.booking-date-input .form-control {
    min-height: 46px;
    color: var(--booking-ink);
    border-color: var(--booking-line);
    border-radius: 8px;
    font-weight: 680;
}

.booking-payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.booking-payment-options label {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 13px;
    color: #202849;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 820;
}

.booking-payment-options label.selected,
.booking-payment-options label:has(input:checked) {
    color: #3513B7;
    background: var(--booking-purple-soft);
    border-color: rgba(85, 32, 240, 0.36);
}

.booking-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.booking-policy-grid article {
    min-width: 0;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.booking-policy-grid i {
    color: var(--booking-purple);
    font-size: 1.35rem;
}

.booking-policy-grid strong {
    display: block;
    margin-top: 9px;
    color: var(--booking-ink);
    font-weight: 930;
}

.booking-policy-grid p {
    margin: 8px 0 0;
    color: var(--booking-muted);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.45;
}

.booking-confirm-button {
    min-height: 54px;
    gap: 12px;
    justify-content: center;
    border-radius: 8px;
    font-weight: 910;
}

.booking-summary-panel {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
}

.booking-summary-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.booking-summary-card > img {
    width: 100%;
    aspect-ratio: 1.75;
    object-fit: cover;
    border-radius: 8px;
}

.booking-summary-card h3 {
    font-size: 1.02rem;
}

.booking-summary-card strong {
    display: block;
    margin-top: 10px;
    color: #202849;
    font-weight: 850;
}

.booking-summary-card dl {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.booking-summary-card dl div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
}

.booking-summary-card dt {
    color: var(--booking-muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-summary-card dd {
    margin: 0;
    color: var(--booking-ink);
    font-size: 0.86rem;
    font-weight: 790;
    overflow-wrap: anywhere;
}

.booking-summary-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 58px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--booking-purple), var(--booking-purple-dark));
    border: 0;
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(85, 32, 240, 0.25);
    font-size: 1rem;
    font-weight: 930;
}

.booking-summary-submit:disabled,
.booking-confirm-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.booking-profile-modal {
    overflow: hidden;
}

.booking-profile-title {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.booking-profile-title img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 999px;
}

.booking-profile-title h2 {
    margin: 0;
    color: var(--booking-ink);
    font-size: 1.18rem;
    font-weight: 940;
}

.booking-profile-title p,
.booking-profile-modal .modal-body > p {
    margin: 4px 0 0;
    color: var(--booking-muted);
    font-weight: 660;
}

.booking-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.booking-profile-stats div {
    padding: 13px;
    background: #F8FAFF;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
}

.booking-profile-stats dt {
    color: var(--booking-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-profile-stats dd {
    margin: 4px 0 0;
    color: var(--booking-ink);
    font-weight: 900;
}

.booking-profile-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.booking-profile-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.booking-success-page {
    display: grid;
    justify-items: center;
    padding: 40px 30px;
}

.booking-success-page h1 {
    font-size: clamp(2rem, 3.4vw, 3.5rem);
    font-weight: 950;
}

.booking-success-list {
    width: min(860px, 100%);
    margin-top: 24px;
}

.booking-success-actions {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.booking-success-actions .btn {
    min-height: 44px;
    border-radius: 8px;
    font-weight: 850;
}

.booking-book-again {
    margin-top: 18px;
}

.booking-alert {
    display: grid;
    gap: 10px;
}

.booking-error-actions {
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1180px) {
    .booking-stylist-layout,
    .booking-final-layout {
        grid-template-columns: 1fr;
    }

    .booking-summary-panel {
        position: static;
    }

    .booking-summary-card {
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: center;
    }

    .booking-summary-card > img {
        aspect-ratio: 1;
    }
}

@media (max-width: 991.98px) {
    .booking-shell.booking-experience {
        width: min(100% - 24px, 1440px);
        padding-top: 18px;
        padding-bottom: 110px;
    }

    .booking-topbar {
        align-items: flex-start;
    }

    .booking-user-chip strong,
    .booking-user-chip i {
        display: none;
    }

    .booking-user-chip {
        min-height: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .booking-progress {
        padding: 14px;
    }

    .booking-progress span {
        flex: 0 0 108px;
        display: grid;
        justify-items: center;
        gap: 8px;
        text-align: center;
    }

    .booking-progress span::after {
        display: none;
    }

    .booking-progress em {
        padding: 0;
        background: transparent;
        font-size: 0.72rem;
    }

    .booking-modern-hero,
    .booking-stylist-feature,
    .booking-summary-card {
        grid-template-columns: 1fr;
    }

    .booking-portfolio-strip {
        grid-template-columns: repeat(3, minmax(86px, 1fr));
        overflow-x: auto;
    }

    .booking-policy-grid,
    .booking-profile-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .booking-topbar-actions {
        gap: 9px;
    }

    .booking-icon-link {
        width: 42px;
        height: 42px;
    }

    .booking-modern-hero,
    .booking-step-card,
    .booking-success-page,
    .booking-empty-modern {
        padding: 18px;
    }

    .booking-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-filter-chips,
    .booking-date-input {
        justify-content: flex-start;
    }

    .booking-date-input,
    .booking-details-grid {
        grid-template-columns: 1fr;
    }

    .booking-date-input {
        display: grid;
        width: 100%;
    }

    .booking-date-input .btn,
    .booking-date-input .form-control {
        width: 100%;
    }

    .booking-selected-service div,
    .booking-stylist-card label {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .booking-selected-service a,
    .booking-stylist-card b {
        grid-column: 2;
        justify-self: start;
    }

    .booking-stylist-feature > img {
        width: 88px;
        height: 88px;
    }

    .booking-slot-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-slot-grid-modern .booking-slot {
        min-height: 54px;
        padding: 0 12px;
    }

    .booking-payment-options {
        grid-template-columns: 1fr;
    }

    .booking-summary-panel {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        z-index: 1020;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 8px;
        background: var(--booking-navy);
        border-radius: 8px;
        box-shadow: 0 18px 38px rgba(7, 16, 68, 0.24);
    }

    .booking-summary-card {
        display: block;
        padding: 0 0 0 8px;
        color: #FFFFFF;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .booking-summary-card > img,
    .booking-summary-card p,
    .booking-summary-card dl {
        display: none;
    }

    .booking-summary-card h3 {
        color: #FFFFFF;
        font-size: 0.86rem;
    }

    .booking-summary-card strong {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.84);
        font-size: 0.78rem;
    }

    .booking-summary-submit {
        min-width: 118px;
        min-height: 48px;
        box-shadow: none;
    }

    .booking-profile-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .booking-slot-grid-modern {
        grid-template-columns: 1fr;
    }

    .booking-topbar .booking-brand strong {
        font-size: 1.18rem;
    }

    .booking-summary-panel {
        grid-template-columns: 1fr;
    }

    .booking-summary-submit {
        width: 100%;
    }
}

body:has(.frexima-community-wall-page) {
    --cw-ink: #151425;
    --cw-muted: #626981;
    --cw-line: #E7E7EF;
    --cw-purple: #6C3CF0;
    --cw-purple-dark: #5020D8;
    --cw-lavender: #F3EEFF;
    --cw-soft: #FAF9FF;
    --cw-green: #28A745;
    --cw-orange: #FF9F0A;
    background:
        linear-gradient(180deg, #FCFBFF 0%, #FFFFFF 48%),
        #FFFFFF;
}

body:has(.frexima-community-wall-page) .topbar,
body:has(.frexima-community-wall-page) .app-page-heading,
.brand-body:has(.frexima-community-wall-page) .brand-topbar {
    display: none;
}

.dashboard-body:has(.frexima-community-wall-page) .main-content,
.brand-body:has(.frexima-community-wall-page) .brand-main-content {
    max-width: none;
    padding: 26px 32px 34px;
}

.frexima-community-wall-page,
.frexima-community-wall-page * {
    letter-spacing: 0;
}

.frexima-community-wall-page {
    display: grid;
    gap: 16px;
    color: var(--cw-ink);
}

.cw-header,
.cw-header-controls,
.cw-select-pill,
.cw-icon-button,
.cw-profile-chip,
.cw-tabs,
.cw-search-row,
.cw-search-box,
.cw-category-rail,
.cw-feed-head,
.cw-side-panel header,
.cw-post-card header,
.cw-card-meta,
.cw-post-card footer,
.cw-saved-list a,
.cw-pro-list article,
.cw-mobile-nav,
.cw-detail-actions,
.cw-create-toggles {
    display: flex;
    align-items: center;
}

.cw-header {
    justify-content: space-between;
    gap: 20px;
}

.cw-title-block {
    min-width: 0;
}

.cw-kicker {
    margin: 0 0 5px;
    color: var(--cw-purple);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.cw-title-block h1 {
    margin: 0;
    color: var(--cw-ink);
    font-size: clamp(1.8rem, 2.5vw, 2.55rem);
    font-weight: 950;
    line-height: 1.05;
}

.cw-title-block h1 i {
    color: var(--cw-purple);
    font-size: 0.82em;
}

.cw-title-block p:last-child {
    margin: 8px 0 0;
    color: #30364F;
    font-weight: 650;
}

.cw-header-controls {
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.cw-select-pill,
.cw-search-box,
.cw-icon-button,
.cw-profile-chip,
.cw-tabs,
.cw-category-rail,
.cw-side-panel,
.cw-post-card,
.cw-empty-state,
.cw-modal,
.cw-detail-modal {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(37, 28, 88, 0.055);
}

.cw-select-pill {
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    color: var(--cw-purple);
    border-color: var(--fx-border-control);
}

.cw-select-pill select {
    min-width: 130px;
    min-height: 44px;
    color: var(--cw-ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-weight: 800;
}

.cw-new-post-button {
    min-height: 46px;
    gap: 8px;
    border-radius: 8px;
    font-weight: 900;
}

.cw-icon-button {
    position: relative;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--cw-ink);
    text-decoration: none;
}

.cw-icon-button span {
    position: absolute;
    top: -6px;
    right: -4px;
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    color: #FFFFFF;
    background: var(--cw-purple);
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
}

.cw-profile-chip {
    gap: 9px;
    min-height: 46px;
    padding: 4px 12px 4px 4px;
    color: var(--cw-ink);
    text-decoration: none;
    font-weight: 850;
}

.cw-profile-chip img,
.cw-profile-chip span {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #FFFFFF;
    object-fit: cover;
    background: linear-gradient(135deg, #B36BFF, var(--cw-purple));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.cw-tabs {
    width: fit-content;
    padding: 4px;
}

.cw-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    color: #2E3450;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 860;
}

.cw-tabs a.active,
.cw-tabs a:hover,
.cw-tabs a:focus {
    color: var(--cw-purple);
    background: var(--cw-lavender);
}

.cw-search-row {
    gap: 12px;
}

.cw-search-box {
    flex: 1 1 420px;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    color: var(--fx-text-secondary);
    border-color: var(--fx-border-control);
    box-shadow: 0 12px 28px rgba(37, 28, 88, 0.04);
}

.cw-search-box input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    color: var(--cw-ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-weight: 650;
}

.cw-search-row > .form-select {
    flex: 0 0 210px;
    min-height: 52px;
    border-color: var(--fx-border-control);
    border-radius: 8px;
    font-weight: 800;
}

.cw-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-active-filters-label {
    color: var(--cw-muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.cw-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
    color: var(--cw-purple-dark);
    background: var(--cw-lavender);
    border: 1px solid #e5d9ff;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
    text-decoration: none;
}

.cw-filter-chip i {
    font-size: 0.9rem;
}

.cw-filter-mobile-button {
    display: none;
    min-height: 52px;
    padding: 0 14px;
    color: var(--cw-purple);
    background: #FFFFFF;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    font-weight: 880;
}

.cw-category-rail {
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cw-category-rail::-webkit-scrollbar {
    display: none;
}

.cw-category-rail a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 12px;
    color: var(--fx-text-primary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 850;
}

.cw-category-rail a.active,
.cw-category-rail a:hover,
.cw-category-rail a:focus {
    color: var(--cw-purple);
    background: var(--cw-lavender);
}

.cw-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 18px;
    align-items: start;
}

.cw-main {
    min-width: 0;
}

.cw-feed-head {
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 14px;
}

.cw-feed-head span,
.cw-feed-head p {
    margin: 0;
    color: var(--cw-muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.cw-feed-head h2 {
    margin: 2px 0 0;
    color: var(--cw-ink);
    font-size: 1.08rem;
    font-weight: 940;
}

.cw-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px;
}

.cw-post-card {
    min-width: 0;
    overflow: hidden;
}

.cw-media-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #F4F1FA;
}

.cw-media-button > img,
.cw-before-after img {
    display: block;
    width: 100%;
    aspect-ratio: 1.56;
    object-fit: cover;
}

.cw-media-placeholder,
.cw-media-fallback {
    display: grid;
    min-height: 220px;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--cw-muted);
    background: linear-gradient(135deg, #f1edfb, #fbfaff);
    font-size: 0.82rem;
    font-weight: 800;
}

.cw-media-placeholder i,
.cw-media-fallback i {
    color: var(--cw-purple);
    font-size: 1.6rem;
}

.cw-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cw-before-after span {
    position: relative;
    min-width: 0;
}

.cw-before-after b,
.cw-distance,
.cw-badge,
.cw-video-badge,
.cw-save-float {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 900;
}

.cw-before-after b {
    top: 9px;
    left: 9px;
    color: var(--cw-ink);
    background: rgba(255, 255, 255, 0.9);
}

.cw-distance {
    left: 10px;
    bottom: 10px;
    color: var(--cw-ink);
    background: rgba(255, 255, 255, 0.94);
}

.cw-distance i {
    color: var(--cw-purple);
}

.cw-badge {
    top: 10px;
    left: 10px;
    color: #FFFFFF;
}

.cw-badge.green {
    background: var(--cw-green);
}

.cw-badge.orange {
    background: #F97316;
}

.cw-video-badge {
    right: 10px;
    bottom: 10px;
    color: #FFFFFF;
    background: rgba(21, 20, 37, 0.82);
}

.cw-save-float {
    top: 10px;
    right: 10px;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #29304A;
    background: rgba(255, 255, 255, 0.94);
}

.cw-save-float.is-saved,
[data-save-toggle].is-saved {
    color: var(--cw-purple);
}

.cw-card-body {
    display: grid;
    gap: 10px;
    padding: 13px;
}

.cw-post-card header {
    gap: 10px;
    min-width: 0;
}

.cw-avatar {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #FFFFFF;
    overflow: hidden;
    background: linear-gradient(135deg, #C486FF, var(--cw-purple));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.cw-avatar.small {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

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

.cw-post-card header div,
.cw-saved-list span,
.cw-pro-list div {
    min-width: 0;
}

.cw-post-card header strong,
.cw-post-card header small,
.cw-saved-list strong,
.cw-saved-list small,
.cw-pro-list strong,
.cw-pro-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-post-card header strong {
    color: var(--cw-ink);
    font-size: 0.88rem;
    font-weight: 920;
}

.cw-post-card header strong i {
    color: var(--cw-purple);
    margin-left: 3px;
}

.cw-post-card header small {
    color: var(--cw-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.cw-post-card h3 {
    margin: 0;
    color: var(--cw-ink);
    font-size: 1rem;
    font-weight: 940;
    line-height: 1.24;
}

.cw-post-card p {
    min-height: 40px;
    margin: 0;
    color: #39415E;
    font-size: 0.84rem;
    font-weight: 620;
    line-height: 1.45;
}

.cw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cw-tags a,
.cw-trend-cloud a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    color: var(--cw-purple);
    text-decoration: none;
    background: var(--cw-lavender);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 820;
}

.cw-card-meta {
    gap: 14px;
    color: #33405E;
    font-size: 0.8rem;
    font-weight: 760;
}

.cw-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cw-card-meta button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.cw-card-meta button:hover,
.cw-card-meta button:focus,
.cw-card-meta button.active {
    color: var(--cw-purple);
}

.cw-offer-summary,
.cw-availability-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .7rem;
    margin: .75rem 0;
    padding: .7rem .8rem;
    border: 1px solid #eadfff;
    border-radius: .8rem;
    background: #faf8ff;
}

.cw-offer-price {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
}

.cw-offer-price s {
    color: var(--cw-muted);
    font-size: .82rem;
}

.cw-offer-price strong {
    color: var(--cw-purple-dark);
    font-size: 1.08rem;
}

.cw-offer-discount {
    padding: .2rem .45rem;
    border-radius: 999px;
    color: #176c35;
    background: #dff7e6;
    font-size: .75rem;
}

.cw-offer-summary small,
.cw-availability-summary span {
    width: 100%;
    color: var(--cw-muted);
    font-size: .78rem;
}

.cw-availability-summary strong {
    color: var(--cw-purple-dark);
}

.cw-detail-comments {
    grid-column: 1 / -1;
    padding: 1rem 1.4rem 1.4rem;
    border-top: 1px solid var(--cw-line);
}

.cw-detail-comments h3 {
    margin: 0 0 .7rem;
    font-size: 1rem;
}

.cw-detail-comments form {
    display: flex;
    gap: .65rem;
    align-items: flex-end;
}

.forum-accepted-answer {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    margin: .45rem 0;
    color: #18743b;
    font-size: .82rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .cw-detail-comments form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cw-detail-comments .btn {
        width: 100%;
    }
}

.cw-post-card footer {
    gap: 8px;
    justify-content: flex-end;
}

.cw-want-button,
.cw-book-button,
.cw-icon-text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.cw-want-button,
.cw-icon-text-button {
    color: var(--cw-purple);
    background: var(--cw-lavender);
    border: 1px solid transparent;
}

.cw-book-button {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--cw-purple), var(--cw-purple-dark));
    border: 1px solid transparent;
}

.cw-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
}

.cw-side-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.cw-side-panel header {
    justify-content: space-between;
    gap: 12px;
}

.cw-side-panel h2 {
    margin: 0;
    color: var(--cw-ink);
    font-size: 0.98rem;
    font-weight: 940;
}

.cw-side-panel header a,
.cw-clear-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--cw-purple);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 850;
}

.cw-filter-form {
    display: grid;
    gap: 12px;
}

.cw-filter-form label {
    display: grid;
    gap: 6px;
    color: #303752;
    font-size: 0.78rem;
    font-weight: 850;
}

.cw-filter-form .form-control,
.cw-filter-form .form-select {
    min-height: 44px;
    border-color: var(--fx-border-control);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
}

.cw-input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
}

.cw-input-shell input {
    min-width: 0;
    min-height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
}

.cw-input-shell i {
    color: #7B84A0;
}

.cw-toggle-stack {
    display: grid;
    gap: 7px;
}

.cw-toggle-stack label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: 12px;
}

.cw-clear-filters {
    justify-self: center;
}

.cw-saved-list,
.cw-pro-list {
    display: grid;
    gap: 10px;
}

.cw-saved-list a {
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.cw-saved-list img {
    width: 54px;
    height: 48px;
    flex: 0 0 54px;
    object-fit: cover;
    border-radius: 8px;
}

.cw-saved-list strong,
.cw-pro-list strong {
    color: var(--cw-ink);
    font-size: 0.84rem;
    font-weight: 900;
}

.cw-saved-list small,
.cw-pro-list small {
    color: var(--cw-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.cw-pro-list article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 9px;
}

.cw-pro-list article > span:not(.cw-avatar),
.cw-pro-list em {
    color: #3F4865;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.cw-pro-list em i,
.cw-detail-copy dd i {
    color: #F8B400;
}

.cw-trend-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-empty-state {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 28px;
    text-align: center;
}

.cw-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.cw-feed-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #6b4a00;
    background: #fff8e6;
    border: 1px solid #f4d48a;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
}

.cw-feed-notice.is-visible {
    display: flex;
}

.cw-feed-notice > i {
    color: #b17800;
}

.cw-feed-notice > span {
    min-width: 0;
    flex: 1;
}

.cw-empty-state i {
    display: inline-grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--cw-purple);
    background: var(--cw-lavender);
    border-radius: 8px;
    font-size: 1.8rem;
}

.cw-empty-state h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 930;
}

.cw-empty-state p {
    margin: 0;
    color: var(--cw-muted);
}

.cw-filter-sheet {
    min-height: 80vh;
    border-radius: 8px 8px 0 0;
}

.cw-modal,
.cw-detail-modal {
    overflow: hidden;
}

.cw-modal .modal-header,
.cw-detail-modal .modal-header {
    border-color: var(--cw-line);
}

.cw-modal .modal-title {
    font-size: 1.08rem;
    font-weight: 940;
}

.cw-want-preview {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.cw-want-preview img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
}

.cw-want-preview strong,
.cw-want-preview small {
    display: block;
}

.cw-want-preview strong {
    color: var(--cw-ink);
    font-weight: 930;
}

.cw-want-preview small {
    margin-top: 4px;
    color: var(--cw-muted);
    font-weight: 700;
}

.cw-want-actions {
    display: grid;
    gap: 10px;
}

.cw-want-action {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    gap: 12px;
    padding: 0 14px;
    color: var(--cw-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    font: inherit;
    font-weight: 860;
    text-align: left;
}

.cw-want-action i {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--cw-purple);
    background: var(--cw-lavender);
    border-radius: 8px;
}

.cw-want-action.primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--cw-purple), var(--cw-purple-dark));
    border-color: transparent;
}

.cw-want-action.primary i {
    color: var(--cw-purple);
    background: #FFFFFF;
}

.cw-detail-modal {
    position: relative;
}

.cw-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    background-color: #FFFFFF;
    border-radius: 999px;
}

.cw-detail-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.58fr) minmax(320px, 0.42fr);
}

.cw-detail-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
}

.cw-detail-copy {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 32px;
}

.cw-detail-category {
    width: fit-content;
    padding: 6px 10px;
    color: var(--cw-purple);
    background: var(--cw-lavender);
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 900;
}

.cw-detail-copy h2 {
    margin: 0;
    color: var(--cw-ink);
    font-size: 1.8rem;
    font-weight: 950;
    line-height: 1.1;
}

.cw-detail-copy p {
    margin: 0;
    color: #313A58;
    font-weight: 640;
}

.cw-detail-copy dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.cw-detail-copy dl div {
    min-width: 0;
    padding: 12px;
    background: var(--cw-soft);
    border: 1px solid var(--cw-line);
    border-radius: 8px;
}

.cw-detail-copy dt {
    color: var(--cw-muted);
    font-size: 0.74rem;
    font-weight: 850;
}

.cw-detail-copy dd {
    margin: 4px 0 0;
    color: var(--cw-ink);
    font-size: 0.9rem;
    font-weight: 900;
}

.cw-slots h3 {
    margin: 0 0 10px;
    color: var(--cw-ink);
    font-size: 1rem;
    font-weight: 930;
}

.cw-slots div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-slots a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 11px;
    color: var(--cw-ink);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 850;
}

.cw-detail-actions {
    flex-wrap: wrap;
    gap: 9px;
}

.cw-moderation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-moderation-button {
    min-height: 44px;
    padding: 0 8px;
    color: var(--cw-muted);
    background: transparent;
    border: 0;
    font-size: 0.76rem;
    font-weight: 750;
}

.cw-moderation-button:hover,
.cw-moderation-button:focus {
    color: var(--cw-purple);
    text-decoration: underline;
}

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

.cw-create-grid label {
    display: grid;
    gap: 6px;
    color: #2F3854;
    font-size: 0.84rem;
    font-weight: 850;
}

.cw-create-grid .span-2 {
    grid-column: 1 / -1;
}

.cw-create-toggles {
    flex-wrap: wrap;
    gap: 14px;
}

.cw-mobile-nav {
    display: none;
}

@media (max-width: 1399.98px) {
    .cw-post-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .frexima-community-wall-page > *,
    .frexima-community-wall-page .cw-header,
    .frexima-community-wall-page .cw-header-controls,
    .frexima-community-wall-page .cw-search-row,
    .frexima-community-wall-page .cw-story-rail,
    .frexima-community-wall-page .cw-story-composer,
    .frexima-community-wall-page .cw-category-rail,
    .frexima-community-wall-page .short-video-feed {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .frexima-community-wall-page .cw-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .frexima-community-wall-page .cw-header-controls {
        justify-content: flex-start;
    }

    .frexima-community-wall-page .cw-search-row {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .frexima-community-wall-page .cw-search-box {
        grid-column: 1 / -1;
    }

    .cw-shell {
        grid-template-columns: 1fr;
    }

    .cw-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cw-filter-panel {
        display: none;
    }

    .cw-filter-mobile-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
}

@media (max-width: 991.98px) {
    .dashboard-body:has(.frexima-community-wall-page) .main-content,
    .brand-body:has(.frexima-community-wall-page) .brand-main-content {
        padding: 18px 16px 98px;
    }

    .cw-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cw-header-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .cw-search-row {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .cw-search-box {
        grid-column: 1 / -1;
    }

    .cw-search-row > .form-select {
        flex-basis: auto;
    }

    .cw-profile-chip strong {
        display: none;
    }

    .cw-sidebar {
        grid-template-columns: 1fr;
    }

    .cw-detail-grid {
        grid-template-columns: 1fr;
    }

    .cw-detail-media img {
        min-height: 320px;
        max-height: 48vh;
    }
}

@media (max-width: 767.98px) {
    .frexima-community-wall-page {
        gap: 12px;
    }

    .frexima-community-wall-page > *,
    .frexima-community-wall-page .cw-header,
    .frexima-community-wall-page .cw-header-controls,
    .frexima-community-wall-page .cw-search-row,
    .frexima-community-wall-page .short-video-feed {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .cw-title-block h1 {
        font-size: 1.65rem;
    }

    .cw-title-block p:last-child {
        font-size: 0.92rem;
    }

    .cw-select-pill {
        flex: 1 1 150px;
    }

    .cw-select-pill select {
        width: 100%;
        min-width: 0;
    }

    .cw-new-post-button {
        width: 100%;
    }

    .cw-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .cw-tabs a {
        flex: 1 0 auto;
        justify-content: center;
        padding: 0 12px;
        font-size: 0.84rem;
    }

    .cw-search-row {
        grid-template-columns: 1fr;
    }

    .cw-post-grid {
        grid-template-columns: 1fr;
    }

    .cw-media-button > img,
    .cw-before-after img {
        aspect-ratio: 1.18;
    }

    .cw-post-card p {
        min-height: 0;
    }

    .cw-post-card footer {
        display: grid;
        grid-template-columns: 1fr 0.74fr;
    }

    .cw-want-button,
    .cw-book-button {
        width: 100%;
    }

    .cw-side-panel {
        padding: 14px;
    }

    .cw-detail-copy {
        padding: 22px 18px;
    }

    .cw-detail-copy h2 {
        font-size: 1.35rem;
    }

    .cw-detail-copy dl,
    .cw-create-grid {
        grid-template-columns: 1fr;
    }

    .cw-create-grid .span-2 {
        grid-column: auto;
    }

    .cw-mobile-nav {
        position: fixed;
        right: 12px;
        bottom: 10px;
        left: 12px;
        z-index: 1025;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: hidden;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid var(--cw-line);
        border-radius: 8px;
        box-shadow: 0 16px 38px rgba(31, 28, 68, 0.16);
    }

    .cw-mobile-nav a {
        display: grid;
        min-height: 58px;
        place-items: center;
        align-content: center;
        gap: 3px;
        color: #5C647D;
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 850;
    }

    .cw-mobile-nav i {
        font-size: 1.05rem;
    }

    .cw-mobile-nav a.active {
        color: var(--cw-purple);
        background: var(--cw-lavender);
    }
}

.brand-body:has(.quick-client-invite-page) {
    --quick-purple: #4B16E8;
    --quick-purple-dark: #3210C4;
    --quick-ink: #090D22;
    --quick-muted: #4A5270;
    --quick-line: #E7E8F2;
    --quick-green: #11B873;
    background: #FFFFFF;
}

.brand-body:has(.quick-client-invite-page) .brand-topbar {
    display: none;
}

.brand-body:has(.quick-client-invite-page) .brand-app-content {
    background: #FFFFFF;
}

.brand-body:has(.quick-client-invite-page) .brand-main-content {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 28px 34px 24px;
    overflow: visible;
    background: #FFFFFF;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar {
    color: #FFFFFF;
    background: #020B18;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar .brand-wordmark strong,
.brand-body:has(.quick-client-invite-page) .brand-sidebar .brand-wordmark small {
    color: #FFFFFF;
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar .brand-wordmark small {
    opacity: 0.76;
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar-section-label,
.brand-body:has(.quick-client-invite-page) .brand-help-card {
    display: none;
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar-link {
    min-height: 50px;
    color: rgba(255, 255, 255, 0.88);
    border-radius: 8px;
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar-link i {
    color: rgba(255, 255, 255, 0.92);
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar-link:hover,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link:focus,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(91, 32, 240, 0.96), rgba(62, 16, 190, 0.96));
    border-color: rgba(255, 255, 255, 0.08);
}

.brand-body:has(.quick-client-invite-page) .brand-sidebar-link:hover i,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link:focus i,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link.active i {
    color: #FFFFFF;
}

.quick-client-invite-page,
.quick-client-invite-page * {
    box-sizing: border-box;
}

.quick-client-invite-page {
    min-height: calc(100vh - 52px);
    color: var(--quick-ink);
}

.quick-client-desktop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.quick-client-desktop-head h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    color: var(--quick-ink);
    font-size: 1.72rem;
    font-weight: 940;
    letter-spacing: 0;
}

.quick-client-desktop-head h1 span,
.quick-client-icon,
.quick-client-date,
.quick-client-account,
.quick-f-logo,
.quick-sender-card > span,
.quick-client-mobile-header span i {
    display: inline-grid;
    place-items: center;
}

.quick-client-desktop-head h1 span {
    width: 42px;
    height: 42px;
    color: var(--quick-purple);
    background: #F1EAFF;
    border-radius: 999px;
    font-size: 1.2rem;
}

.quick-client-desktop-head p {
    max-width: 560px;
    margin: 0;
    color: #303A5B;
    font-size: 1rem;
    font-weight: 560;
    line-height: 1.5;
}

.quick-client-head-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.quick-client-date,
.quick-client-icon,
.quick-client-account {
    min-height: 50px;
    color: var(--quick-ink);
    background: #FFFFFF;
    border: 1px solid #DFE3EF;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(20, 24, 42, 0.04);
}

.quick-client-date {
    gap: 14px;
    padding: 0 20px;
    font-weight: 850;
}

.quick-client-date i,
.quick-client-icon i {
    color: var(--quick-purple);
}

.quick-client-icon {
    position: relative;
    width: 50px;
}

.quick-client-icon span {
    position: absolute;
    top: -6px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    color: #FFFFFF;
    background: #F10F31;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
}

.quick-client-account {
    gap: 10px;
    padding: 4px 12px 4px 4px;
    cursor: default;
}

.quick-client-account span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, #D8794B, #7F2FDB);
    border-radius: 999px;
    font-weight: 900;
}

.quick-client-mobile-header {
    display: none;
}

.quick-client-form {
    display: grid;
    gap: 20px;
}

.quick-client-grid {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) minmax(270px, 1.04fr) minmax(270px, 1fr);
    gap: 18px;
    align-items: stretch;
}

.quick-client-card {
    min-width: 0;
    padding: 22px;
    background: #FFFFFF;
    border: 1px solid var(--quick-line);
    border-radius: 8px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.045);
}

.quick-client-basic-card,
.quick-preview-card {
    min-height: 640px;
}

.quick-client-card h2 {
    margin: 0 0 22px;
    color: var(--quick-ink);
    font-size: 1.02rem;
    font-weight: 920;
    letter-spacing: 0;
}

.quick-client-field-group {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.quick-client-label {
    color: #11172D;
    font-size: 0.86rem;
    font-weight: 850;
}

.quick-client-label span {
    color: #F10F31;
}

.quick-client-label i {
    margin-left: 5px;
    color: #66708C;
}

.quick-channel-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 48px;
    overflow: hidden;
    border: 1px solid #DEE3EF;
    border-radius: 8px;
}

.quick-channel-tabs label {
    min-width: 0;
    margin: 0;
}

.quick-channel-tabs input,
.quick-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quick-channel-tabs span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 10px;
    color: #171B31;
    background: #FFFFFF;
    border: 1px solid transparent;
    font-size: 0.88rem;
    font-weight: 860;
    cursor: pointer;
}

.quick-channel-tabs input:checked + span {
    color: var(--quick-purple);
    background: #F3EEFF;
    border-color: var(--quick-purple);
    box-shadow: inset 0 0 0 1px rgba(75, 22, 232, 0.08);
}

.quick-input-shell {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 13px;
    background: #FFFFFF;
    border: 1px solid #E0E5EF;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(20, 24, 42, 0.025);
}

.quick-input-shell > i:first-child,
.quick-date-grid i,
.quick-select-shell i {
    color: var(--quick-purple);
}

.quick-input-shell input,
.quick-date-grid input,
.quick-select-shell select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--quick-ink);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 680;
}

.quick-input-shell input::placeholder {
    color: #0F172A;
    opacity: 1;
}

.quick-valid {
    color: var(--quick-green);
}

.quick-client-invite-page [data-quick-phone-field] {
    display: none;
}

.quick-client-invite-page.is-sms [data-quick-email-field] {
    display: none;
}

.quick-client-invite-page.is-sms [data-quick-phone-field] {
    display: grid;
}

.quick-client-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    margin-top: 6px;
    padding: 18px;
    color: #121A35;
    background: #F6F1FF;
    border-radius: 8px;
}

.quick-client-note i {
    color: var(--quick-purple);
}

.quick-client-note strong,
.quick-client-note p {
    margin: 0;
}

.quick-client-note strong {
    display: block;
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 900;
}

.quick-client-note p,
.quick-card-copy,
.quick-muted-line,
.quick-preview-heading p,
.quick-email-frame p,
.quick-email-frame li,
.quick-sender-card p,
.quick-sender-card small {
    color: #303A5B;
    font-size: 0.86rem;
    line-height: 1.5;
}

.quick-client-middle {
    display: grid;
    gap: 18px;
}

.quick-client-steps {
    position: relative;
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-client-steps::before {
    position: absolute;
    top: 18px;
    bottom: 28px;
    left: 18px;
    width: 1px;
    content: "";
    background: #D8CDFE;
}

.quick-client-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    gap: 14px;
    align-items: start;
}

.quick-client-steps li > span {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #FFFFFF;
    background: var(--quick-purple);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 920;
}

.quick-client-steps li:not(.is-complete) > span {
    color: var(--quick-purple);
    background: #FFFFFF;
    border: 1px solid var(--quick-purple);
}

.quick-client-steps strong,
.quick-sender-card strong {
    color: var(--quick-ink);
    font-size: 0.9rem;
    font-weight: 900;
}

.quick-client-steps p {
    margin: 6px 0 0;
    color: #424C68;
    font-size: 0.84rem;
    line-height: 1.45;
}

.quick-client-steps li > i {
    margin-top: 4px;
    color: var(--quick-green);
}

.quick-client-steps li:not(.is-complete) > i {
    color: #CBD3E1;
}

.quick-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.quick-card-row h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9rem;
}

.quick-card-row h2 i {
    color: var(--quick-purple);
}

.quick-card-row h2 small {
    color: #3B4564;
    font-size: 0.8rem;
    font-weight: 560;
}

.quick-toggle span {
    display: block;
    width: 42px;
    height: 24px;
    padding: 3px;
    background: #D6DCE8;
    border-radius: 999px;
    cursor: pointer;
}

.quick-toggle span::before {
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background: #FFFFFF;
    border-radius: 999px;
    transition: transform 160ms ease;
}

.quick-toggle input:checked + span {
    background: var(--quick-purple);
}

.quick-toggle input:checked + span::before {
    transform: translateX(18px);
}

.quick-card-copy {
    margin: 0 0 18px;
}

.quick-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.quick-date-grid label,
.quick-select-shell {
    display: grid;
    align-items: center;
    min-height: 52px;
    padding: 0 13px;
    background: #FFFFFF;
    border: 1px solid #DFE5F0;
    border-radius: 8px;
}

.quick-date-grid label {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
}

.quick-select-shell {
    grid-template-columns: minmax(0, 1fr) 20px;
    margin-bottom: 14px;
}

.quick-select-shell select {
    appearance: none;
}

.quick-muted-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #626B84;
}

.quick-preview-heading h2 {
    margin-bottom: 6px;
}

.quick-preview-heading p {
    margin: 0 0 20px;
}

.quick-email-frame {
    display: grid;
    gap: 14px;
    max-width: 320px;
    margin: 0 auto 20px;
    padding: 28px 30px;
    background: #FFFFFF;
    border: 6px solid #F0ECFF;
    border-radius: 8px;
}

.quick-email-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.quick-f-logo {
    width: 28px;
    height: 34px;
    color: #FFFFFF;
    background: var(--quick-purple);
    border-radius: 8px 8px 4px 8px;
    font-size: 1.35rem;
    font-weight: 950;
}

.quick-email-logo strong {
    color: var(--quick-ink);
    font-size: 1.1rem;
    font-weight: 940;
    letter-spacing: 0;
}

.quick-email-frame p {
    margin: 0;
}

.quick-book-button {
    display: grid;
    min-height: 48px;
    place-items: center;
    color: #FFFFFF;
    text-decoration: none;
    background: linear-gradient(135deg, var(--quick-purple), var(--quick-purple-dark));
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 860;
}

.quick-email-frame ul {
    display: grid;
    gap: 10px;
    margin: 6px 0 8px;
    padding: 0;
    list-style: none;
}

.quick-email-frame li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #17213A;
}

.quick-email-frame li i {
    color: var(--quick-purple);
}

.quick-fallback-copy {
    padding-top: 12px;
}

.quick-preview-link {
    color: var(--quick-purple);
    font-size: 0.9rem;
    word-break: break-word;
}

.quick-sender-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
    background: #F7F3FF;
    border-radius: 8px;
}

.quick-sender-card > span {
    width: 44px;
    height: 44px;
    color: #FFFFFF;
    background: var(--quick-purple);
    border-radius: 999px;
}

.quick-sender-card small,
.quick-sender-card strong,
.quick-sender-card p {
    display: block;
    margin: 0;
}

.quick-sender-card small {
    color: var(--quick-purple);
    font-size: 0.74rem;
    font-weight: 760;
}

.quick-action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 14px;
    padding: 22px;
    background: #FFFFFF;
    border: 1px solid var(--quick-line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.05);
}

.quick-action-button {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 86px;
    padding: 14px 22px;
    text-align: center;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
}

.quick-action-button i {
    font-size: 1.16rem;
}

.quick-action-button span {
    display: grid;
    gap: 7px;
}

.quick-action-button strong {
    font-size: 0.98rem;
    font-weight: 900;
}

.quick-action-button small {
    font-size: 0.78rem;
    font-weight: 560;
}

.quick-action-button.secondary {
    color: var(--quick-purple);
    background: #FFFFFF;
    border: 1px solid var(--quick-purple);
}

.quick-action-button.secondary small {
    color: #303A5B;
}

.quick-action-button.primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--quick-purple), var(--quick-purple-dark));
    border: 1px solid var(--quick-purple-dark);
    box-shadow: 0 18px 30px rgba(75, 22, 232, 0.22);
}

.quick-action-button.primary small {
    color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 1399.98px) {
    .quick-client-grid {
        grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    }

    .quick-preview-card {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.8fr);
        gap: 18px;
        align-items: start;
        min-height: 0;
    }

    .quick-preview-heading {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .brand-body:has(.quick-client-invite-page) .brand-main-content {
        min-height: 100vh;
        padding: 0 0 112px;
    }

    .quick-client-invite-page {
        padding: 0 14px;
    }

    .quick-client-desktop-head {
        display: none;
    }

    .quick-client-mobile-header {
        position: sticky;
        top: 0;
        z-index: 18;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        margin: 0 -14px 12px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid #EEF0F6;
        backdrop-filter: blur(12px);
    }

    .quick-client-mobile-header a {
        color: var(--quick-ink);
    }

    .quick-client-mobile-header strong {
        overflow: hidden;
        color: var(--quick-ink);
        font-size: 0.92rem;
        font-weight: 920;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-client-mobile-header span {
        display: flex;
        gap: 8px;
    }

    .quick-client-mobile-header span i {
        width: 32px;
        height: 32px;
        color: var(--quick-purple);
        background: #FFFFFF;
        border: 1px solid #E3E6F0;
        border-radius: 8px;
    }

    .quick-client-grid,
    .quick-preview-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .quick-client-card {
        padding: 16px 14px;
    }

    .quick-client-basic-card,
    .quick-preview-card {
        min-height: 0;
    }

    .quick-client-card h2 {
        margin-bottom: 18px;
    }

    .quick-client-field-group {
        margin-bottom: 16px;
    }

    .quick-client-steps {
        gap: 18px;
    }

    .quick-email-frame {
        max-height: 360px;
        overflow: hidden;
        padding: 22px;
    }

    .quick-action-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: 0 -16px 34px rgba(15, 23, 42, 0.12);
    }

    .quick-action-button {
        min-height: 58px;
        padding: 10px 12px;
    }

    .quick-action-button.secondary {
        grid-template-columns: 1fr;
    }

    .quick-action-button.secondary:first-child {
        order: 3;
        grid-column: 1 / -1;
        grid-template-columns: 20px auto;
        justify-content: center;
        min-height: 34px;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .quick-action-button.secondary:first-child span,
    .quick-action-button.secondary:nth-child(2) span {
        display: block;
    }

    .quick-action-button.secondary:first-child span small,
    .quick-action-button.secondary:nth-child(2) span small,
    .quick-action-button.primary small {
        display: none;
    }

    .quick-action-button.secondary:nth-child(2) {
        order: 1;
    }

    .quick-action-button.primary {
        order: 2;
    }

    .quick-action-button.secondary:first-child strong,
    .quick-action-button.secondary:nth-child(2) strong {
        font-size: 0.74rem;
    }

    .quick-action-button.primary {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .quick-action-button.primary strong {
        font-size: 0.86rem;
    }
}

@media (max-width: 575.98px) {
    .quick-client-invite-page {
        padding-inline: 10px;
    }

    .quick-client-mobile-header {
        margin-inline: -10px;
    }

    .quick-channel-tabs span {
        font-size: 0.8rem;
    }

    .quick-date-grid {
        grid-template-columns: 1fr;
    }

    .quick-email-frame {
        border-width: 5px;
    }

    .quick-sender-card {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 14px;
    }

    .quick-sender-card > span {
        width: 38px;
        height: 38px;
    }
}

.salon-payments {
    display: grid;
    gap: 20px;
}

.payment-page-heading,
.payment-heading-actions,
.payment-filter-tabs,
.payment-toolbar,
.payment-summary-card,
.payment-client-cell,
.payment-row-actions,
.payment-details-actions,
.payment-mobile-actions,
.payment-public-methods,
.payment-public-success {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-page-heading {
    justify-content: space-between;
    gap: 18px;
}

.payment-page-heading h1 {
    margin: 0;
    color: var(--brand-ink, var(--text-dark));
    font-size: 1.72rem;
    font-weight: 920;
    letter-spacing: 0;
}

.payment-page-heading p {
    margin: 5px 0 0;
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.94rem;
    font-weight: 650;
}

.payment-heading-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.payment-filter-tabs {
    overflow-x: auto;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--brand-line, var(--border));
}

.payment-filter-tabs a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: #27304D;
    border-bottom: 2px solid transparent;
    font-weight: 820;
    text-decoration: none;
    white-space: nowrap;
}

.payment-filter-tabs a.active {
    color: var(--brand-purple, var(--primary));
    border-color: var(--brand-purple, var(--primary));
}

.payment-filter-tabs small {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 7px;
    color: #58617C;
    background: #F2F5FA;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 850;
}

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

.payment-summary-card {
    min-width: 0;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--brand-line, var(--border));
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17, 19, 34, 0.035);
}

.payment-summary-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: var(--brand-purple, var(--primary));
    background: var(--brand-purple-softer, var(--primary-light));
    border-radius: 8px;
    font-size: 1.1rem;
}

.payment-summary-card.success .payment-summary-icon {
    color: #067647;
    background: #E7F8EF;
}

.payment-summary-card.warning .payment-summary-icon {
    color: #B45309;
    background: #FFF4E5;
}

.payment-summary-card.danger .payment-summary-icon {
    color: #C81E1E;
    background: #FDE8E8;
}

.payment-summary-card p,
.payment-summary-card small {
    margin: 0;
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.8rem;
    font-weight: 760;
    line-height: 1.25;
}

.payment-summary-card strong {
    display: block;
    margin: 5px 0;
    color: var(--brand-ink, var(--text-dark));
    font-size: 1.45rem;
    font-weight: 920;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.payment-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 18px;
    align-items: start;
}

.payment-list-panel,
.payment-details-panel {
    min-width: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--brand-line, var(--border));
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17, 19, 34, 0.035);
}

.payment-details-panel {
    position: sticky;
    top: 94px;
    display: grid;
    gap: 18px;
    padding: 20px;
}

.payment-toolbar {
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--brand-line, var(--border));
}

.payment-toolbar .form-select,
.payment-toolbar .form-control {
    width: auto;
    min-width: 150px;
}

.payment-search {
    display: flex;
    min-width: min(100%, 310px);
    height: 46px;
    flex: 1 1 260px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: #66708B;
    background: #FFFFFF;
    border: 1px solid #DFE4EF;
    border-radius: 8px;
}

.payment-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--brand-ink, var(--text-dark));
    font-weight: 720;
}

.payment-table-wrap {
    overflow-x: auto;
}

.payment-request-table {
    min-width: 1060px;
    margin: 0;
}

.payment-request-table thead th {
    padding: 14px 16px;
    color: #52607A;
    background: #F8FAFD;
    border-bottom: 1px solid var(--brand-line, var(--border));
    font-size: 0.78rem;
    font-weight: 850;
}

.payment-request-table tbody td {
    padding: 14px 16px;
    border-color: var(--brand-line, var(--border));
    color: #1E2745;
    font-size: 0.88rem;
    font-weight: 680;
    vertical-align: middle;
}

.payment-request-table tbody tr:hover {
    background: #FBFAFF;
}

.payment-client-cell {
    min-width: 230px;
}

.payment-client-cell > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.payment-client-cell strong,
.payment-request-table td > strong {
    color: var(--brand-ink, var(--text-dark));
    font-size: 0.9rem;
    font-weight: 850;
}

.payment-client-cell small {
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.78rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}

.payment-client-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    object-fit: cover;
}

.payment-client-avatar-fallback {
    display: inline-grid;
    place-items: center;
    color: #FFFFFF;
    background: #2F3A5F;
    font-size: 0.78rem;
    font-weight: 900;
}

.payment-row-actions {
    justify-content: flex-start;
}

.payment-empty-state,
.payment-detail-empty {
    display: grid;
    min-height: 330px;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 32px;
    color: var(--brand-muted, var(--text-muted));
    text-align: center;
}

.payment-empty-state > span,
.payment-detail-empty i,
.payment-public-icon {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--brand-purple, var(--primary));
    background: var(--brand-purple-softer, var(--primary-light));
    border-radius: 8px;
    font-size: 1.45rem;
}

.payment-empty-state h3,
.payment-detail-empty h3 {
    margin: 0;
    color: var(--brand-ink, var(--text-dark));
    font-size: 1.08rem;
    font-weight: 880;
}

.payment-empty-state p,
.payment-detail-empty p {
    max-width: 380px;
    margin: 0;
}

.payment-details-actions {
    justify-content: space-between;
}

.payment-details-actions h3 {
    margin: 4px 0 0;
    color: var(--brand-ink, var(--text-dark));
    font-size: 1.18rem;
    font-weight: 900;
}

.payment-detail-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.payment-detail-list > div {
    display: grid;
    grid-template-columns: minmax(100px, 0.75fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #EDF1F7;
}

.payment-detail-list dt {
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.payment-detail-list dd {
    min-width: 0;
    margin: 0;
    color: var(--brand-ink, var(--text-dark));
    font-size: 0.88rem;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.payment-link-box {
    display: grid;
    gap: 8px;
}

.payment-link-box label {
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.payment-link-box > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
}

.payment-detail-button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-detail-button-grid .btn,
.payment-detail-button-grid form,
.payment-detail-button-grid form .btn {
    width: 100%;
}

.payment-history {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-line, var(--border));
}

.payment-history h4 {
    margin: 0;
    color: var(--brand-ink, var(--text-dark));
    font-size: 0.98rem;
    font-weight: 880;
}

.payment-history article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
}

.payment-history article > span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #4D5A7A;
    background: #F3F6FB;
    border-radius: 8px;
}

.payment-history strong,
.payment-history small {
    display: block;
}

.payment-history strong {
    color: var(--brand-ink, var(--text-dark));
    font-size: 0.86rem;
    font-weight: 840;
}

.payment-history small {
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.75rem;
    font-weight: 720;
}

.payment-history p {
    margin: 4px 0 0;
    color: #4F5B78;
    font-size: 0.82rem;
    line-height: 1.45;
}

.payment-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.payment-modal-grid.single {
    grid-template-columns: 1fr;
}

.payment-modal-wide {
    grid-column: 1 / -1;
}

.payment-amount-row,
.payment-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-advanced {
    padding: 14px;
    background: #F8FAFD;
    border: 1px solid var(--brand-line, var(--border));
    border-radius: 8px;
}

.payment-advanced summary {
    color: var(--brand-ink, var(--text-dark));
    cursor: pointer;
    font-weight: 850;
}

.payment-advanced-grid {
    margin-top: 14px;
}

.payment-followup-preview {
    display: grid;
    gap: 6px;
    padding: 14px;
    color: #35405F;
    background: #F8FAFD;
    border: 1px solid var(--brand-line, var(--border));
    border-radius: 8px;
}

.payment-followup-preview span {
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.payment-followup-preview p {
    margin: 0;
    white-space: pre-wrap;
}

.payment-mobile-list,
.payment-mobile-new {
    display: none;
}

.payment-mobile-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--brand-line, var(--border));
}

.payment-mobile-card-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.payment-mobile-card-main strong,
.payment-mobile-card-main small {
    display: block;
}

.payment-mobile-card-main strong {
    color: var(--brand-ink, var(--text-dark));
    font-weight: 880;
}

.payment-mobile-card-main small,
.payment-mobile-card-meta {
    color: var(--brand-muted, var(--text-muted));
    font-size: 0.82rem;
    font-weight: 720;
}

.payment-mobile-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.payment-mobile-actions .btn {
    flex: 1 1 0;
}

.payment-public-body {
    min-height: 100vh;
    background: #F5F7FB;
}

.payment-public-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px 16px;
}

.payment-public-card {
    display: grid;
    width: min(100%, 460px);
    gap: 18px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid #DDE3EF;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}

.payment-public-card h1 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    font-weight: 920;
    letter-spacing: 0;
}

.payment-public-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.payment-public-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EDF1F7;
}

.payment-public-card dt {
    color: #667085;
    font-size: 0.8rem;
    font-weight: 820;
}

.payment-public-card dd {
    margin: 0;
    color: #1F2937;
    font-weight: 820;
    text-align: right;
}

.payment-public-note,
.payment-public-alert,
.payment-public-success {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.payment-public-note {
    color: #35405F;
    background: #F8FAFD;
}

.payment-public-alert {
    color: #92400E;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
}

.payment-public-success {
    color: #067647;
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
    font-weight: 820;
}

.payment-public-methods {
    flex-wrap: wrap;
    gap: 8px;
}

.payment-public-methods span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    color: #344054;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 780;
}

@media (max-width: 1199.98px) {
    .payment-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-workspace {
        grid-template-columns: 1fr;
    }

    .payment-details-panel {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .payment-page-heading,
    .payment-heading-actions,
    .payment-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-heading-actions .btn,
    .payment-heading-actions form,
    .payment-toolbar .btn,
    .payment-toolbar .form-control,
    .payment-toolbar .form-select,
    .payment-search {
        width: 100%;
    }

    .payment-summary-grid,
    .payment-modal-grid,
    .payment-amount-row,
    .payment-advanced-grid,
    .payment-detail-button-grid {
        grid-template-columns: 1fr;
    }

    .payment-table-wrap {
        display: none;
    }

    .payment-mobile-list {
        display: grid;
    }

    .payment-list-panel {
        overflow: visible;
    }

    .payment-mobile-new {
        position: sticky;
        bottom: 16px;
        z-index: 5;
        display: inline-flex;
        justify-content: center;
        width: calc(100% - 24px);
        margin: 0 12px;
        box-shadow: 0 14px 30px rgba(109, 53, 243, 0.22);
    }
}

@media (max-width: 575.98px) {
    .payment-summary-grid {
        grid-template-columns: 1fr;
    }

    .payment-detail-list > div {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .payment-public-card dl > div {
        display: grid;
    }

    .payment-public-card dd {
        text-align: left;
    }

    .payment-public-card {
        padding: 22px;
    }
}
/* Frexima forum */
body:has(.frexima-forum-page) {
    --forum-ink: #151425;
    --forum-muted: #6B6B80;
    --forum-line: #E7E7EF;
    --forum-purple: #6C3CF0;
    --forum-lavender: #F0E9FF;
    --forum-soft: #FAF9FF;
    --forum-blue: #EAF3FF;
    --forum-green: #EAF8EF;
    --forum-pink: #FFEAF3;
    background: #FFFFFF;
    overflow-x: hidden;
}

.forum-guidelines-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 24px 0;
    padding: 16px 18px;
    color: var(--forum-ink, #151425);
    background: #FBFAFF;
    border: 1px solid #E7DFFF;
    border-radius: 14px;
}

.forum-guidelines-card h2,
.forum-guidelines-card p {
    margin: 0;
}

.forum-guidelines-card h2 {
    margin-top: 3px;
    font-size: 1rem;
}

.forum-guidelines-card p {
    margin-top: 5px;
    color: #5B6074;
    font-size: 0.86rem;
}

.forum-guidelines-card a {
    color: var(--forum-purple, #6C3CF0);
    font-weight: 750;
}

.forum-guidelines-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0F7A3D;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.forum-guidelines-page {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 48px);
}

.forum-guidelines-page h1 {
    margin: 8px 0 6px;
}

.forum-guidelines-body {
    white-space: pre-line;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .frexima-forum-page *,
    .forum-guidelines-page * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .forum-guidelines-card {
        align-items: flex-start;
        flex-direction: column;
        margin: 12px 12px 0;
    }

    .forum-guidelines-accept,
    .forum-guidelines-accept .btn {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .forum-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 12px;
    }

    .forum-region-form,
    .forum-profile-chip span {
        display: none;
    }

    .forum-top-actions {
        gap: 4px;
    }

    .forum-shell {
        padding-right: 12px;
        padding-left: 12px;
    }

    .forum-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 8px;
    }

    .forum-toolbar-actions {
        justify-content: space-between;
    }

    .forum-topic-copy strong {
        overflow-wrap: anywhere;
    }
}

body:has(.frexima-forum-page) .topbar,
body:has(.frexima-forum-page) .app-page-heading,
.brand-body:has(.frexima-forum-page) .brand-topbar {
    display: none;
}

/* The brand shell keeps an off-canvas menu in the DOM. Its transformed,
   hidden panel otherwise contributes to scroll width at tablet sizes. */
.brand-body:has(.frexima-forum-page) .brand-mobile-more {
    display: none !important;
}

.dashboard-body:has(.frexima-forum-page) .main-content,
.brand-body:has(.frexima-forum-page) .brand-main-content {
    max-width: none;
    padding: 0;
}

.sidebar-item-group {
    display: grid;
    gap: 4px;
}

.sidebar-link-caret {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: inherit;
    font-size: 0.72rem;
}

.sidebar-subnav {
    display: grid;
    gap: 2px;
    padding-left: 36px;
}

.sidebar-subnav.depth-2 {
    padding-left: 48px;
}

.sidebar-subnav.depth-3 {
    padding-left: 60px;
}

.sidebar-subnav-link {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 720;
}

.sidebar-subnav.depth-3 .sidebar-subnav-link {
    position: relative;
    font-size: 0.78rem;
    font-weight: 680;
}

.sidebar-subnav.depth-3 .sidebar-subnav-link::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: 0.8;
}

.sidebar-subnav-link:hover,
.sidebar-subnav-link:focus,
.sidebar-subnav-link.active {
    color: var(--primary);
    background: #F2ECFF;
}

.frexima-forum-page,
.frexima-forum-page * {
    letter-spacing: 0;
}

.frexima-forum-page {
    display: grid;
    gap: 0;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
    color: var(--forum-ink);
    background: #FFFFFF;
}

.forum-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(250px, 330px) auto;
    align-items: center;
    gap: 18px;
    min-height: 84px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--forum-line);
    backdrop-filter: blur(14px);
}

.forum-search-form {
    position: relative;
    min-width: 0;
}

.forum-search-box {
    position: relative;
    display: block;
    margin: 0;
}

.forum-search-box input {
    width: 100%;
    min-height: 50px;
    padding: 0 48px 0 20px;
    color: var(--forum-ink);
    background: #FFFFFF;
    border: 1px solid #DDE1EC;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 650;
    outline: 0;
    box-shadow: 0 12px 28px rgba(22, 24, 45, 0.035);
}

.forum-search-box i {
    position: absolute;
    right: 18px;
    top: 50%;
    color: #30364E;
    transform: translateY(-50%);
}

.forum-live-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 30;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--forum-line);
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.14);
}

.forum-live-results a,
.forum-live-results span {
    display: block;
    padding: 11px 14px;
    color: var(--forum-ink);
    text-decoration: none;
    border-bottom: 1px solid #F0F1F6;
    font-size: 0.88rem;
    font-weight: 760;
}

.forum-live-results a:hover,
.forum-live-results a:focus {
    color: var(--forum-purple);
    background: var(--forum-soft);
}

.forum-region-form .form-select {
    min-height: 50px;
    color: #24283A;
    border-color: #DDE1EC;
    border-radius: 8px;
    font-weight: 760;
}

.forum-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.forum-icon-button {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #182036;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
}

.frexima-forum-page a:focus-visible,
.frexima-forum-page button:focus-visible,
.frexima-forum-page input:focus-visible,
.frexima-forum-page select:focus-visible,
.frexima-forum-page textarea:focus-visible {
    outline: 3px solid rgba(108, 60, 240, 0.48);
    outline-offset: 2px;
}

.forum-topic-copy,
.forum-topic-copy strong,
.forum-topic-copy small,
.forum-topic-copy em,
.forum-detail-head,
.forum-detail-body,
.forum-reply {
    min-width: 0;
    overflow-wrap: anywhere;
}

.forum-icon-button:hover,
.forum-icon-button:focus {
    color: var(--forum-purple);
    background: var(--forum-lavender);
}

.forum-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    color: var(--forum-ink);
    text-decoration: none;
    font-weight: 820;
    white-space: nowrap;
}

.forum-profile-chip img,
.forum-profile-chip span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #FFFFFF;
    background: var(--forum-purple);
    border-radius: 999px;
    object-fit: cover;
    font-weight: 900;
}

.forum-shell {
    display: grid;
    grid-template-columns: minmax(640px, 1fr) minmax(320px, 410px);
    gap: 24px;
    align-items: start;
    padding: 18px 24px 28px;
}

.forum-main-panel {
    min-width: 0;
}

.forum-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 62px;
    border-bottom: 1px solid var(--forum-line);
}

.forum-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.forum-tabs::-webkit-scrollbar {
    display: none;
}

.forum-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    color: #383C53;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 790;
    white-space: nowrap;
}

.forum-tabs a.active,
.forum-tabs a:hover,
.forum-tabs a:focus {
    color: var(--forum-purple);
    background: var(--forum-lavender);
}

.forum-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-filter-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    color: #30364E;
    background: transparent;
    border: 0;
    font-weight: 760;
}

.forum-new-topic-button {
    min-height: 40px;
    border-radius: 8px;
    white-space: nowrap;
}

.forum-filter-panel {
    padding: 14px 0 18px;
    border-bottom: 1px solid var(--forum-line);
}

.forum-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.forum-filter-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.forum-filter-grid span {
    color: var(--forum-muted);
    font-size: 0.76rem;
    font-weight: 820;
}

.forum-topic-headings,
.forum-topic-row {
    display: grid;
    grid-template-columns: minmax(430px, 1fr) 170px 82px 82px 132px;
    gap: 16px;
    align-items: center;
}

.forum-topic-headings {
    min-height: 40px;
    color: #7C8195;
    border-bottom: 1px solid var(--forum-line);
    font-size: 0.78rem;
    font-weight: 760;
}

.forum-topic-row {
    min-height: 94px;
    padding: 11px 0;
    border-bottom: 1px solid var(--forum-line);
}

.forum-topic-main {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.forum-status-dot {
    width: 8px;
    height: 8px;
    margin-top: 9px;
    background: var(--forum-purple);
    border-radius: 999px;
    box-shadow: 0 0 0 4px #F4EEFF;
}

.forum-status-dot.expert {
    background: #16A34A;
    box-shadow: 0 0 0 4px #EAF8EF;
}

.forum-topic-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.forum-topic-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #101223;
    font-size: 0.99rem;
    font-weight: 900;
    line-height: 1.25;
}

.forum-topic-copy small,
.forum-topic-copy em,
.forum-topic-path {
    color: #4F566F;
    font-size: 0.82rem;
    font-weight: 560;
    line-height: 1.35;
}

.forum-topic-copy em {
    color: #6B6B80;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 680;
}

.forum-topic-path {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    color: #697089;
    font-weight: 760;
}

.forum-topic-path i {
    color: #A3A8B7;
}

.forum-title-check {
    color: #10B981;
    font-size: 0.84rem;
}

.forum-topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.forum-tag {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    gap: 5px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 800;
}

.forum-tag.primary {
    color: var(--forum-purple);
    background: var(--forum-lavender);
}

.forum-tag.secondary {
    color: #2563EB;
    background: var(--forum-blue);
}

.forum-tag.expert {
    color: #0F7A3D;
    background: var(--forum-green);
}

.forum-tag.hash {
    color: #3B6EB7;
    background: var(--forum-blue);
}

.forum-tag.solved {
    color: #047857;
    background: #DFF7EA;
}

.forum-tag.muted {
    color: #64748B;
    background: #F1F5F9;
}

.forum-contributors {
    display: flex;
    align-items: center;
    min-width: 0;
}

.forum-avatar,
.forum-mini-avatar,
.forum-expert-avatar {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    color: #FFFFFF;
    background: var(--forum-purple);
    border-radius: 999px;
    font-weight: 900;
}

.forum-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.forum-mini-avatar {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    margin-left: -7px;
    border: 2px solid #FFFFFF;
    font-size: 0.68rem;
}

.forum-mini-avatar:first-child {
    margin-left: 0;
}

.forum-avatar img,
.forum-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-mini-avatar.tint-pink {
    background: #E75F96;
}

.forum-mini-avatar.tint-blue {
    background: #2563EB;
}

.forum-contributor-more {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-left: 4px;
    color: var(--forum-purple);
    background: #F4EEFF;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
}

.forum-count,
.forum-activity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.forum-count {
    text-align: center;
}

.forum-count strong,
.forum-activity strong {
    color: #1A1C2C;
    font-size: 0.96rem;
    font-weight: 900;
}

.forum-count small,
.forum-activity small {
    color: #6E7487;
    font-size: 0.76rem;
    font-weight: 650;
}

.forum-topic-thumb {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: hidden;
    color: var(--forum-purple);
    background: #F3EEFF;
    border-radius: 8px;
    text-decoration: none;
}

.forum-topic-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 48px 18px;
    text-align: center;
}

.forum-empty-state i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--forum-purple);
    background: var(--forum-lavender);
    border-radius: 8px;
    font-size: 1.45rem;
}

.forum-empty-state h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 920;
}

.forum-empty-state p,
.forum-empty-copy {
    margin: 0;
    color: var(--forum-muted);
}

.forum-right-panel {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.forum-side-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--forum-line);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.055);
}

.forum-side-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.forum-side-card h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #151425;
    font-size: 0.98rem;
    font-weight: 920;
}

.forum-side-card h2 em {
    color: #7A7F93;
    font-size: 0.78rem;
    font-style: italic;
    font-weight: 650;
}

.forum-side-card header a {
    color: var(--forum-purple);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 820;
}

.forum-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.forum-tag-cloud a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    color: var(--forum-purple);
    background: #F4EEFF;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
}

.forum-expert-list {
    display: grid;
    gap: 12px;
}

.forum-expert-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.forum-expert-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #6C3CF0, #E75F96);
    font-size: 0.76rem;
}

.forum-expert-avatar i {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 9px;
    height: 9px;
    background: #16A34A;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
}

.forum-expert-list strong,
.forum-expert-list small {
    display: block;
}

.forum-expert-list strong {
    color: #151425;
    font-size: 0.86rem;
    font-weight: 900;
}

.forum-expert-list small {
    color: var(--forum-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.forum-expert-list article > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    color: var(--forum-purple);
    text-decoration: none;
    border: 1px solid var(--forum-purple);
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 840;
}

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

.forum-stat-grid span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.forum-stat-grid i {
    color: var(--forum-purple);
    font-size: 1rem;
}

.forum-stat-grid strong {
    color: #151425;
    font-size: 0.92rem;
    font-weight: 920;
}

.forum-stat-grid small {
    color: var(--forum-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.forum-top-contributor {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--forum-purple);
    background: #F5EEFF;
    border-radius: 8px;
}

.forum-top-contributor > i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    font-size: 1.2rem;
}

.forum-top-contributor span,
.forum-top-contributor strong {
    color: #6C3CF0;
    font-size: 0.82rem;
    font-weight: 880;
}

.forum-top-contributor small {
    display: block;
    color: #756A9B;
    font-size: 0.72rem;
    font-weight: 650;
}

.forum-topic-detail {
    display: grid;
    gap: 18px;
    padding: 18px 0 40px;
}

.forum-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--forum-purple);
    text-decoration: none;
    font-weight: 820;
}

.forum-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--forum-line);
}

.forum-detail-head h1 {
    margin: 10px 0 6px;
    color: #111326;
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    font-weight: 940;
    line-height: 1.12;
}

.forum-detail-head p {
    margin: 0;
    color: var(--forum-muted);
    font-weight: 650;
}

.forum-detail-actions {
    display: flex;
    gap: 8px;
}

.forum-detail-actions form {
    margin: 0;
}

.forum-detail-actions .forum-icon-button {
    border-color: var(--forum-line);
}

.forum-detail-body {
    display: grid;
    gap: 14px;
    color: #2D3148;
    font-size: 1rem;
    line-height: 1.65;
}

.forum-detail-body p {
    margin: 0;
}

.forum-medical-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    color: #7A4B00;
    background: #FFF7E6;
    border: 1px solid #FFE5AD;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 720;
}

.forum-detail-image {
    width: min(100%, 760px);
    max-height: 360px;
    object-fit: cover;
    border-radius: 8px;
}

.forum-replies {
    display: grid;
    gap: 12px;
    padding-top: 10px;
}

.forum-replies h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 920;
}

.forum-reply {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--forum-line);
    border-radius: 8px;
}

.forum-reply.expert {
    border-color: #CDEED9;
    background: linear-gradient(180deg, #FFFFFF, #FBFFFC);
}

.forum-reply header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.forum-reply header strong,
.forum-reply header small {
    display: block;
}

.forum-reply header strong {
    font-size: 0.95rem;
    font-weight: 900;
}

.forum-reply header small {
    color: var(--forum-muted);
    font-size: 0.8rem;
    font-weight: 650;
}

.forum-reply p {
    margin: 0;
    color: #2D3148;
    line-height: 1.58;
}

.forum-expert-actions,
.forum-reply footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.forum-expert-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    color: var(--forum-purple);
    background: var(--forum-lavender);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 850;
}

.forum-reply footer form {
    margin: 0;
}

.forum-reply footer button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #5F667A;
    background: transparent;
    border: 0;
    font-size: 0.82rem;
    font-weight: 780;
}

.forum-reply footer button.active,
.forum-reply footer button:hover,
.forum-reply footer button:focus {
    color: var(--forum-purple);
}

.forum-reply-form {
    display: grid;
    gap: 10px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid var(--forum-line);
    border-radius: 8px;
}

.forum-reply-form .btn {
    justify-self: start;
}

.forum-modal-form .modal-body {
    background: #FCFBFF;
}

.forum-mobile-nav {
    display: none;
}

.forum-ai-helper {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #DDD6FE;
    border-radius: 8px;
}

.forum-ai-helper header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-ai-helper header i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--forum-purple);
    background: var(--forum-lavender);
    border-radius: 8px;
}

.forum-ai-helper strong,
.forum-ai-helper small {
    display: block;
}

.forum-ai-helper strong {
    color: #151425;
    font-size: 0.88rem;
    font-weight: 900;
}

.forum-ai-helper small {
    color: var(--forum-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.forum-ai-helper-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.forum-ai-helper-grid > span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    background: #FAF9FF;
    border: 1px solid #EEEAFB;
    border-radius: 8px;
}

@media (max-width: 1399.98px) {
    .forum-topic-headings,
    .forum-topic-row {
        grid-template-columns: minmax(360px, 1fr) 150px 70px 70px 112px;
        gap: 12px;
    }
}

@media (max-width: 1199.98px) {
    .forum-topbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-top-actions {
        justify-content: flex-start;
    }

    .forum-shell {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 991.98px) {
    .forum-right-panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .dashboard-body:has(.frexima-forum-page) .main-content,
    .brand-body:has(.frexima-forum-page) .brand-main-content {
        padding: 0;
    }

    .forum-topbar {
        position: static;
        gap: 12px;
        min-height: 0;
        padding: 14px 12px;
    }

    .forum-top-actions {
        display: none;
    }

    .forum-shell {
        padding: 0 12px 86px;
    }

    .forum-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 12px 0;
    }

    .forum-toolbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .forum-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-ai-helper-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-topic-headings {
        display: none;
    }

    .forum-topic-list {
        display: grid;
        gap: 10px;
        padding-top: 10px;
    }

    .forum-topic-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        min-height: 0;
        padding: 14px;
        border: 1px solid var(--forum-line);
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
    }

    .forum-topic-main {
        grid-column: 1 / -1;
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .forum-contributors {
        display: none;
    }

    .forum-count {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        text-align: left;
    }

    .forum-count:nth-of-type(1),
    .forum-count:nth-of-type(2),
    .forum-activity {
        grid-column: 1 / 2;
    }

    .forum-count small {
        font-size: 0.72rem;
    }

    .forum-topic-thumb {
        width: 74px;
        height: 74px;
    }

    .forum-activity {
        display: inline-flex;
        gap: 6px;
    }

    .forum-detail-head {
        flex-direction: column;
    }

    .forum-reply header {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .forum-reply header .forum-tag {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .forum-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .forum-profile-chip strong {
        display: none;
    }

    .forum-mobile-nav {
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: hidden;
        background: #FFFFFF;
        border: 1px solid var(--forum-line);
        border-radius: 8px;
        box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    }

    .forum-mobile-nav a {
        display: grid;
        min-height: 58px;
        place-items: center;
        gap: 2px;
        color: #3A4054;
        text-decoration: none;
        border-right: 1px solid var(--forum-line);
        font-size: 0.66rem;
        font-weight: 820;
    }

    .forum-mobile-nav a:last-child {
        border-right: 0;
    }

    .forum-mobile-nav i {
        font-size: 1.08rem;
    }

    .forum-mobile-nav a.active {
        color: var(--forum-purple);
        background: #F4EEFF;
    }
}

/* Frexima final premium cascade */
.dashboard-body,
.brand-body {
    background: var(--frexima-bg);
    color: var(--frexima-text);
}

.text-muted,
.form-text,
.table small,
.content-panel p,
.brand-body .page-heading-subtitle {
    color: var(--frexima-muted) !important;
}

.content-panel,
.card,
.modal-content,
.dropdown-menu,
.appointment-booking-card,
.appointment-booking-savebar,
.timeline-my-panel,
.timeline-summary-card,
.frexima-timeline-workspace .timeline-community-panel,
.cw-post-card,
.cw-side-panel,
.forum-main-panel,
.forum-side-card,
.forum-reply,
.forum-reply-form {
    background: var(--frexima-card);
    border-color: var(--frexima-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
}

.btn-primary,
.brand-body .btn-primary,
.dashboard-body .btn-primary,
.appointment-primary-button,
.timeline-primary-actions .btn-primary,
.cw-book-button {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--frexima-purple), var(--frexima-purple-dark));
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(108, 60, 240, 0.24);
}

.btn-light,
.btn-outline-primary,
.form-control,
.form-select,
.input-group-text {
    color: var(--frexima-text);
    background-color: #FFFFFF;
    border-color: var(--frexima-border);
    border-radius: 8px;
}

.form-control,
.form-select {
    min-height: 42px;
    font-weight: 700;
}

.sidebar,
.brand-body .brand-sidebar,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar,
.brand-body:has(.frexima-calendar-page) .brand-sidebar,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar,
.brand-body:has(.frexima-community-page) .brand-sidebar,
.brand-body:has(.quick-client-invite-page) .brand-sidebar {
    width: var(--sidebar-width);
    background:
        radial-gradient(circle at 18% 0%, rgba(108, 60, 240, 0.24), transparent 28%),
        var(--frexima-sidebar);
    border-right: 0;
    box-shadow: 18px 0 44px rgba(7, 11, 31, 0.16);
}

@media (min-width: 992px) {
    .brand-body .brand-app-content,
    .brand-body:has(.frexima-dashboard-page) .brand-app-content,
    .brand-body:has(.frexima-calendar-page) .brand-app-content,
    .brand-body:has(.appointment-booking-workspace) .brand-app-content,
    .brand-body:has(.frexima-community-wall-page) .brand-app-content,
    .brand-body:has(.quick-client-invite-page) .brand-app-content {
        width: calc(100% - var(--sidebar-width));
        margin-left: var(--sidebar-width);
    }
}

.sidebar-link,
.brand-body .brand-sidebar-link,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-link,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link,
.brand-body:has(.frexima-community-page) .brand-sidebar-link,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link {
    min-height: 48px;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    border-color: transparent;
    border-radius: 8px;
}

.sidebar-link i,
.brand-body .brand-sidebar-link i,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link i,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-link i,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link i,
.brand-body:has(.frexima-community-page) .brand-sidebar-link i,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link i {
    color: rgba(255, 255, 255, 0.86);
}

.sidebar-link:hover,
.sidebar-link:focus,
.sidebar-link.active,
.brand-body .brand-sidebar-link:hover,
.brand-body .brand-sidebar-link:focus,
.brand-body .brand-sidebar-link.active,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link:hover,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link:focus,
.brand-body:has(.frexima-dashboard-page) .brand-sidebar-link.active,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-link:hover,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-link:focus,
.brand-body:has(.frexima-calendar-page) .brand-sidebar-link.active,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link:hover,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link:focus,
.brand-body:has(.appointment-booking-workspace) .brand-sidebar-link.active,
.brand-body:has(.frexima-community-page) .brand-sidebar-link:hover,
.brand-body:has(.frexima-community-page) .brand-sidebar-link:focus,
.brand-body:has(.frexima-community-page) .brand-sidebar-link.active,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link:hover,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link:focus,
.brand-body:has(.quick-client-invite-page) .brand-sidebar-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--frexima-purple), var(--frexima-purple-dark)) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-link:hover i,
.sidebar-link:focus i,
.sidebar-link.active i,
.brand-body .brand-sidebar-link:hover i,
.brand-body .brand-sidebar-link:focus i,
.brand-body .brand-sidebar-link.active i {
    color: #FFFFFF !important;
}

.brand-body .brand-sidebar .brand-wordmark strong,
.brand-body .brand-sidebar .brand-wordmark small,
.sidebar .brand-wordmark strong,
.sidebar .brand-wordmark small {
    color: #FFFFFF !important;
}

.brand-body .brand-sidebar-section-label,
.sidebar .brand-sidebar-section-label {
    color: rgba(255, 255, 255, 0.58) !important;
}

.appointment-booking-workspace,
.frexima-calendar-page,
.frexima-community-wall-page,
.frexima-forum-page {
    color: var(--frexima-text);
}

.appointment-duration-pill {
    max-width: 170px;
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
    border: 1px solid rgba(108, 60, 240, 0.18);
}

.appointment-select-card,
.appointment-input-card,
.appointment-note-box,
.appointment-advanced-settings {
    border-color: var(--frexima-border);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.appointment-summary-card {
    border-top: 4px solid var(--frexima-purple);
}

.frexima-calendar-page .calendar-shell {
    grid-template-columns: 304px minmax(0, 1fr);
}

.frexima-calendar-page .content-panel,
.frexima-calendar-page .calendar-staff-row,
.frexima-calendar-page .calendar-date-jump,
.frexima-calendar-page .calendar-view-tabs {
    border-color: var(--frexima-border);
    border-radius: var(--card-radius);
}

.frexima-calendar-page .schedule-staff-column {
    background:
        repeating-linear-gradient(
            to bottom,
            #FFFFFF 0,
            #FFFFFF calc(var(--schedule-hour-height) - 1px),
            #DDE2EE calc(var(--schedule-hour-height) - 1px),
            #DDE2EE var(--schedule-hour-height)
        ),
        #FFFFFF;
}

.frexima-calendar-page .schedule-staff-column.is-drop-target {
    box-shadow: inset 0 0 0 3px rgba(108, 60, 240, 0.2);
    background-color: #FBF9FF;
}

.frexima-calendar-page .schedule-event.is-dragging {
    opacity: 0.55;
}

.frexima-calendar-page .schedule-appointment-card {
    border-left: 4px solid var(--service-accent);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.frexima-calendar-page .schedule-available-slot {
    color: #047857;
    background: rgba(34, 197, 94, 0.08);
    border: 1px dashed rgba(34, 197, 94, 0.42);
    border-radius: 8px;
}

.frexima-calendar-page .schedule-available-slot strong::before,
.timeline-time-row.available .timeline-card-copy strong::before {
    content: "+ ";
}

.frexima-calendar-page .schedule-blocked-slot {
    color: #475569;
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.timeline-time-row.available .timeline-time-card {
    color: var(--frexima-purple-dark);
    background: #FBF9FF;
    border-color: rgba(108, 60, 240, 0.34);
    border-style: dashed;
}

.timeline-time-row.has-appointment .timeline-time-card {
    border-left: 4px solid var(--frexima-purple);
}

.cw-want-button {
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
    border-color: rgba(108, 60, 240, 0.18);
}

.cw-post-card footer {
    justify-content: space-between;
}

.forum-topic-row:hover,
.forum-topic-row:focus-within {
    background: #FBF9FF;
    box-shadow: inset 3px 0 0 var(--frexima-purple);
}

.forum-tag.primary,
.forum-tabs a.active,
.forum-tabs a:hover,
.forum-tabs a:focus {
    color: var(--frexima-purple-dark);
    background: #F1ECFF;
}

@media (max-width: 767.98px) {
    .content-panel,
    .card,
    .modal-content,
    .appointment-booking-card,
    .timeline-my-panel,
    .cw-post-card,
    .forum-topic-row {
        border-radius: 8px;
    }

    .frexima-calendar-page .calendar-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .cw-post-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .brand-body .brand-main-content {
        padding-right: 16px;
        padding-bottom: 96px;
        padding-left: 16px;
    }

    .brand-body .calendar-mobile-nav,
    .brand-body .forum-mobile-nav,
    .brand-body .cw-mobile-nav {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .brand-body:has(.frexima-community-wall-page) .brand-app-content,
    .brand-body:has(.frexima-forum-page) .brand-app-content {
        width: calc(100% - var(--sidebar-width));
        margin-left: var(--sidebar-width);
    }
}

/* Keep dashboard content inside the viewport beside the fixed sidebar. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dashboard-body .app-content {
        width: calc(100% - 76px);
        box-sizing: border-box;
    }
}

@media (min-width: 992px) {
    .dashboard-body .app-content {
        width: calc(100% - var(--sidebar-width));
        box-sizing: border-box;
    }
}

/* Phase 11 end-of-file overrides. */
@media (max-width: 767.98px) {
    .main-content,
    .brand-main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 16px 16px calc(78px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .app-content,
    .brand-app-content {
        margin-left: 0 !important;
    }

    .topbar-title span,
    .topbar-title h1 {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-title h1,
    .brand-topbar-title h1 {
        margin-top: 2px;
        color: var(--text-dark);
        font-size: 0.96rem;
        font-weight: 850;
        text-transform: none;
    }

    .user-chip,
    .brand-account-chip {
        width: 42px;
        max-width: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 3px;
        border-radius: 999px;
    }

    .user-chip .user-meta,
    .user-chip .user-chip-caret,
    .brand-account-chip .user-meta,
    .brand-account-chip .user-chip-caret {
        display: none;
    }

    .frexima-mobile-nav {
        right: 0;
        bottom: 0;
        left: 0;
        min-height: 78px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid var(--frexima-border);
        border-radius: 0;
        box-shadow: 0 -12px 32px rgba(7, 11, 31, 0.1);
    }

    .frexima-dashboard-top-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        width: 100%;
        gap: 8px;
    }

    .frexima-search-pill {
        grid-column: 1 / -1;
        width: 100%;
    }

    .frexima-date-pill,
    .frexima-help-pill {
        display: none;
    }

    .frexima-action-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .frexima-action-card,
    .frexima-action-card.purple,
    .frexima-action-card:not(:first-child) {
        grid-column: auto;
        min-height: 88px;
        padding: 14px;
    }

    .frexima-status-grid {
        display: flex;
        margin: 0 -16px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .frexima-status-card {
        flex: 0 0 min(78vw, 260px);
        scroll-snap-align: start;
    }

    .frexima-dashboard-workspace,
    .premium-dashboard-workspace,
    .payment-workspace,
    .messages-shell,
    .salon-messages-shell,
    .cw-shell,
    .forum-shell {
        grid-template-columns: 1fr;
    }

    .brand-body:has(.frexima-calendar-page) .brand-topbar,
    .brand-body:has(.frexima-community-wall-page) .brand-topbar,
    .brand-body:has(.frexima-forum-page) .brand-topbar {
        display: flex !important;
    }

    .frexima-calendar-page .calendar-ops-main {
        position: relative;
    }

    .frexima-calendar-page .calendar-ops-actions {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }

    .frexima-calendar-page .calendar-ops-actions > .btn-light:not(.calendar-bell-button),
    .frexima-calendar-page .calendar-view-tabs {
        display: none;
    }

    .frexima-calendar-page .calendar-mobile-filter-button {
        display: inline-flex !important;
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .frexima-calendar-page .calendar-mobile-filter-button i {
        font-size: 1rem;
    }

    .frexima-calendar-page .calendar-bell-button {
        display: none !important;
    }

    .frexima-calendar-page .calendar-new-button {
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .frexima-calendar-page .calendar-new-button .bi-plus-lg {
        font-size: 1.15rem;
    }

    .frexima-calendar-page .calendar-section-header {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #FFFFFF;
    }

    .frexima-calendar-page .schedule-board-scroll {
        max-height: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .frexima-calendar-page .schedule-header-row {
        display: none;
    }

    .frexima-calendar-page .schedule-body {
        grid-template-columns: 74px repeat(var(--schedule-columns), minmax(244px, 1fr));
    }

    .brand-body:has(.appointment-booking-workspace) .brand-main-content {
        padding-bottom: 168px !important;
    }

    .appointment-mobile-savebar {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }

    .frexima-client-page:not(.client-has-selection) .client-profile-area,
    .frexima-client-page.client-has-selection .client-list-panel {
        display: none;
    }

    .frexima-client-page.client-has-selection .client-profile-area {
        display: block;
    }

    .client-workspace-grid,
    .client-action-grid,
    .client-overview-grid,
    .client-detail-grid,
    .client-crm-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .salon-conversation-list,
    .salon-chat-panel {
        min-height: calc(100dvh - 170px);
    }

    .cw-sidebar,
    .forum-right-panel {
        display: none;
    }

    .cw-post-grid {
        grid-template-columns: 1fr;
    }

    .forum-topic-headings {
        display: none;
    }

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

    .forum-topic-row {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 14px;
    }

    .payment-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .payment-table-wrap {
        display: none;
    }

    .payment-mobile-list {
        display: grid;
    }

    .payment-mobile-new {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 575.98px) {
    .payment-summary-grid,
    .client-filter-row {
        grid-template-columns: 1fr;
    }
}
/* Social P0: short video feed */
.short-video-feed { max-width: 1120px; margin: 0 auto; padding: 1rem 0 5rem; }
.short-video-feed-header, .short-video-feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.short-video-feed-header h2 { margin: .25rem 0; color: #24113f; }
.short-video-feed-header p { max-width: 660px; margin: 0; color: #665782; }
.short-video-mode-tabs { display: inline-flex; gap: .35rem; padding: .25rem; border: 1px solid #e7def7; border-radius: 999px; background: #faf8ff; }
.short-video-mode-tabs button { min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: 999px; background: transparent; color: #665782; }
.short-video-mode-tabs button.active { background: #6f42c1; color: #fff; }
.short-video-topic-filter { display: flex; align-items: center; gap: .5rem; color: #665782; }
.short-video-topic-filter select { min-width: 170px; }
.short-video-topic-preferences { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 1rem; }
.short-video-topic-chip { min-height: 44px; padding: .5rem .8rem; border: 1px solid #e5dbf6; border-radius: 999px; background: #fff; color: #3e285f; white-space: nowrap; }
.short-video-topic-chip.active { border-color: #6f42c1; background: #f0eaff; color: #4d2a91; }
.short-video-topic-chip span { display: block; font-size: .7rem; opacity: .72; }
.short-video-card-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.short-video-card { overflow: hidden; border: 1px solid #e7def7; border-radius: 1.1rem; background: #1c122b; box-shadow: 0 .65rem 1.5rem rgba(45, 25, 74, .12); }
.short-video-stage { position: relative; aspect-ratio: 9 / 16; min-height: 420px; background: #24113f; }
.short-video-stage video { width: 100%; height: 100%; object-fit: cover; background: #24113f; }
.short-video-gradient { position: absolute; inset: 38% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(15, 8, 26, .92)); }
.short-video-overlay { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; display: grid; gap: .3rem; color: #fff; }
.short-video-overlay strong { font-size: 1rem; }
.short-video-overlay span { color: #e8def7; font-size: .8rem; }
.short-video-overlay p { margin: .25rem 0 .5rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.short-video-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .4rem; padding: .65rem .8rem; color: #ede5f7; font-size: .8rem; }
.short-video-actions button { min-height: 44px; border: 0; background: transparent; color: inherit; }
.short-video-actions button.active { color: #d7b9ff; }
.short-video-actions span { margin-left: auto; }
.external-share-asset-body { text-align: center; }
.external-share-asset-body > p { text-align: left; }
.external-share-asset-body [data-external-share-preview] {
    display: block;
    width: min(100%, 270px);
    aspect-ratio: 9 / 16;
    object-fit: cover;
    margin: 1rem auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(34, 20, 70, .2);
    background: #17112d;
}
.external-share-asset-body [data-external-share-preview][hidden] { display: none; }
.short-video-unavailable, .short-video-empty { display: grid; place-items: center; min-height: 240px; padding: 2rem; text-align: center; color: #665782; background: #faf8ff; }
.short-video-empty { border: 1px dashed #d8caef; border-radius: 1rem; }
.short-video-empty i { font-size: 2rem; color: #6f42c1; }
.short-video-empty h3 { margin: .5rem 0 0; color: #24113f; }
.short-video-empty p { margin: 0; }
.short-video-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.short-video-create-grid label { display: grid; gap: .35rem; color: #3e285f; }
.short-video-create-grid .span-2 { grid-column: span 2; }
.short-video-public-page { min-height: 70vh; display: grid; place-items: center; padding: 2rem 1rem; background: #faf8ff; }
.short-video-public-card { width: min(100%, 620px); padding: 1.25rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 1rem 3rem rgba(45, 25, 74, .12); text-align: center; }
.short-video-public-card video { width: min(100%, 360px); max-height: 70vh; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1rem; background: #24113f; }
.short-video-public-card .btn { margin: .25rem; }
@media (max-width: 991.98px) { .short-video-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .short-video-feed { padding: .5rem .75rem 6rem; } .short-video-feed-header, .short-video-feed-toolbar { align-items: stretch; flex-direction: column; } .short-video-feed-header .btn { width: 100%; } .short-video-card-list { grid-template-columns: 1fr; } .short-video-stage { min-height: 0; } .short-video-create-grid { grid-template-columns: 1fr; } .short-video-create-grid .span-2 { grid-column: auto; } }
/* Forum P0: compact mobile-first entry points and preference controls. */
.forum-mobile-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto 1rem;
    max-width: 1440px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--forum-line, #e7e7ef);
    border-radius: 1rem;
    background: #fff;
}
.forum-mobile-intro h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.forum-mobile-intro p { margin: .25rem 0 0; color: var(--forum-muted, #6b6b80); }
.forum-eyebrow { color: var(--forum-purple, #6c3cf0); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.forum-intro-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.forum-community-switch { display: flex; gap: .5rem; margin: 0 auto 1rem; max-width: 1440px; padding: .25rem; border-radius: .8rem; background: #f5f2ff; }
.forum-community-switch a { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1rem; border-radius: .6rem; color: inherit; text-decoration: none; }
.forum-community-switch a.active { background: #fff; color: var(--forum-purple, #6c3cf0); box-shadow: 0 2px 8px rgb(29 21 65 / 10%); }
.forum-preference-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .65rem; }
.forum-preference-option { min-height: 48px; display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--forum-line, #e7e7ef); border-radius: .7rem; cursor: pointer; }
.forum-preference-option:has(input:checked) { border-color: var(--forum-purple, #6c3cf0); background: #f5f2ff; }
.forum-mobile-plus { transform: translateY(-.35rem); border-radius: 999px !important; background: var(--forum-purple, #6c3cf0) !important; color: #fff !important; }
.client-bottom-nav-create { transform: translateY(-.35rem); border-radius: 999px !important; background: var(--forum-purple, #6c3cf0) !important; color: #fff !important; }

/* C03: client discovery and public provider profiles. */
.client-discovery-page, .client-salon-page { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 7rem; }
.client-discovery-hero { margin-bottom: 1.25rem; }
.client-discovery-hero h1, .client-salon-hero h1 { margin: .2rem 0 .35rem; }
.client-discovery-hero p, .client-salon-hero p { color: var(--bs-secondary-color); margin: 0; }
.client-discovery-search { background: #fff; border: 1px solid rgba(44, 35, 72, .1); border-radius: 1.25rem; padding: 1rem; box-shadow: 0 .5rem 1.5rem rgba(44, 35, 72, .06); }
.client-discovery-search-row { display: flex; align-items: center; gap: .65rem; border: 1px solid #d9d5e5; border-radius: .85rem; padding: .25rem .35rem .25rem .85rem; }
.client-discovery-search-row i { color: #6c3cf0; }
.client-discovery-search-row input { min-width: 0; flex: 1; border: 0; outline: 0; padding: .6rem 0; }
.client-discovery-quick-fields, .client-discovery-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .85rem; }
.client-discovery-quick-fields label, .client-discovery-filter-grid label { display: block; color: var(--bs-secondary-color); font-size: .78rem; font-weight: 600; margin-bottom: .3rem; }
.client-discovery-quick-fields input, .client-discovery-quick-fields select, .client-discovery-filter-grid input { width: 100%; border: 1px solid #d9d5e5; border-radius: .65rem; padding: .55rem .65rem; background: #fff; }
.client-discovery-city-field > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.client-discovery-city-field .btn { min-height: 44px; padding-inline: .8rem; }

/* Client Community timeline — current Frexima visual language with a calmer feed hierarchy. */
.frexima-community-wall-page:not(.salon-community-page) {
    width: min(100%, 1240px);
    margin-inline: auto;
    gap: 18px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-header {
    align-items: flex-start;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-title-block {
    max-width: 660px;
}

.cw-client-privacy-note {
    display: block;
    width: fit-content;
    margin: -4px 0 0;
    padding: 8px 11px;
    color: #625b72;
    background: #f8f6fc;
    border: 1px solid #ebe6f3;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.cw-client-privacy-note i {
    margin-right: 6px;
}

.cw-client-privacy-note i,
.cw-client-privacy-note a {
    color: var(--cw-purple);
}

.cw-client-privacy-note a {
    font-weight: 800;
    text-decoration: none;
}

.frexima-community-wall-page:not(.salon-community-page) > .cw-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px auto;
    padding: 0;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-filter-mobile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-story-rail {
    min-height: 0;
    margin: 0;
    padding: 17px 18px 13px;
    background: #fff;
    border-color: var(--cw-line);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(37, 28, 88, .045);
}

.frexima-community-wall-page:not(.salon-community-page) .cw-story-rail-heading {
    margin-bottom: 6px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-story-scroller {
    min-height: 118px;
}

.cw-client-feed-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--cw-line);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(37, 28, 88, .04);
    scrollbar-width: none;
}

.cw-client-feed-tabs::-webkit-scrollbar {
    display: none;
}

.cw-client-feed-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    color: #4c5368;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.cw-client-feed-tabs a:hover,
.cw-client-feed-tabs a:focus-visible,
.cw-client-feed-tabs a.active {
    color: var(--cw-purple);
    background: var(--cw-lavender);
}

.cw-client-feed-tabs .cw-client-bookable-tab {
    gap: 7px;
    margin-left: auto;
    color: #fff;
    background: linear-gradient(135deg, var(--cw-purple), var(--cw-purple-dark));
}

.cw-client-feed-tabs .cw-client-bookable-tab:hover,
.cw-client-feed-tabs .cw-client-bookable-tab:focus-visible,
.cw-client-feed-tabs .cw-client-bookable-tab.active {
    color: #fff;
    background: var(--cw-purple-dark);
}

.frexima-community-wall-page:not(.salon-community-page) .cw-category-rail {
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(37, 28, 88, .035);
}

.frexima-community-wall-page:not(.salon-community-page) .cw-shell {
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 20px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-main .cw-post-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-post-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body {
    display: contents;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > header {
    order: 1;
    padding: 17px 18px 0;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > :is(.cw-offer-summary, .cw-availability-summary) {
    order: 2;
    margin: 12px 18px 0;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > h3 {
    order: 3;
    margin: 12px 18px 0;
    font-size: 18px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > p {
    order: 4;
    min-height: 0;
    margin: 6px 18px 0;
    color: #3e4559;
    font-size: 15px;
    line-height: 1.55;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > .cw-tags {
    order: 5;
    margin: 10px 18px 0;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-media-button {
    order: 6;
    margin-top: 14px;
    border-block: 1px solid var(--cw-line);
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > .cw-card-meta {
    order: 7;
    min-height: 50px;
    padding: 8px 18px;
    font-size: 14px;
    border-bottom: 1px solid var(--cw-line);
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > footer {
    order: 8;
    padding: 13px 18px 17px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-card-body > footer :is(.cw-want-button, .cw-book-button) {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 14px;
}

.cw-media-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    background: #fff;
}

.cw-media-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 1.18;
    object-fit: cover;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-sidebar {
    top: 20px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-side-panel {
    padding: 18px;
    border-radius: 16px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-side-panel h2 {
    font-size: 16px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-side-panel p {
    margin: 4px 0 0;
    color: var(--cw-muted);
    font-size: 14px;
    line-height: 1.5;
}

.cw-community-book-card,
.cw-community-invite-card {
    align-content: start;
    background: linear-gradient(145deg, #fff, #f6f1ff);
}

.cw-community-book-card .btn,
.cw-community-invite-card .btn {
    width: 100%;
    min-height: 44px;
}

.cw-community-side-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--cw-purple);
    background: var(--cw-lavender);
    border-radius: 14px;
    font-size: 21px;
}

.cw-trends-panel header h2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cw-trends-panel header h2 i {
    color: #f05b57;
}

.cw-trend-list {
    display: grid;
    gap: 4px;
}

.cw-trend-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: 12px;
    padding: 6px 8px;
    color: var(--cw-ink);
    border-radius: 9px;
    text-decoration: none;
}

.cw-trend-list a:hover,
.cw-trend-list a:focus-visible {
    color: var(--cw-purple);
    background: var(--cw-lavender);
}

.cw-trend-list span {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-trend-list small {
    flex: 0 0 auto;
    color: var(--cw-muted);
    font-size: 12px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-pro-list article {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 52px;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-pro-list small i {
    color: #f8b400;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-pro-list button {
    min-width: 72px;
    min-height: 38px;
    padding: 0 10px;
    color: var(--cw-purple);
    background: #fff;
    border: 1px solid #ded5f0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 850;
}

.frexima-community-wall-page:not(.salon-community-page) .cw-pro-list button.active {
    color: #fff;
    background: var(--cw-purple);
    border-color: var(--cw-purple);
}

@media (max-width: 1099.98px) {
    .frexima-community-wall-page:not(.salon-community-page) .cw-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .frexima-community-wall-page:not(.salon-community-page) {
        gap: 12px;
    }

    .cw-client-privacy-note {
        width: 100%;
    }

    .frexima-community-wall-page:not(.salon-community-page) > .cw-search-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-search-box {
        grid-column: 1 / -1;
    }

    .cw-client-feed-tabs a {
        padding-inline: 13px;
    }

    .cw-client-feed-tabs .cw-client-bookable-tab {
        margin-left: 0;
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-story-rail {
        padding-inline: 13px;
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-story-privacy-note {
        display: none;
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-card-body > .cw-card-meta {
        overflow-x: auto;
        gap: 18px;
    }

    .frexima-community-wall-page:not(.salon-community-page) .cw-card-body > footer {
        grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    }

    .cw-media-gallery {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
        overflow-x: auto;
    }
}
.open-appointments-marketplace-note { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; }
.open-appointments-marketplace-note .btn-link { min-height: 44px; padding: .25rem .35rem; font-weight: 700; text-decoration: none; }
.client-discovery-filter-sheet { margin-top: .85rem; border-top: 1px solid #eeeaf5; padding-top: .75rem; }
.client-discovery-filter-sheet summary { cursor: pointer; color: #4d3c75; font-weight: 600; list-style: none; display: flex; gap: .5rem; align-items: center; }
.client-discovery-filter-sheet summary::-webkit-details-marker { display: none; }
.client-discovery-filter-sheet summary b { background: #eee8ff; border-radius: 999px; padding: .1rem .45rem; font-size: .75rem; }
.client-discovery-check { align-self: end; padding-bottom: .55rem; }
.client-discovery-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: 1.25rem 0 .75rem; scrollbar-width: none; }
.client-discovery-tabs a { white-space: nowrap; text-decoration: none; border: 1px solid #ddd8ea; color: #4d3c75; border-radius: 999px; padding: .55rem .8rem; background: #fff; }
.client-discovery-tabs a.active, .client-discovery-tabs a:hover, .client-discovery-tabs a:focus { background: #6c3cf0; color: #fff; border-color: #6c3cf0; }
.client-discovery-results-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: .4rem 0 .9rem; color: var(--bs-secondary-color); }
.client-discovery-results-header p { margin: 0; }
.client-discovery-results-header a { color: #6c3cf0; }
.client-discovery-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.client-discovery-card { background: #fff; border: 1px solid rgba(44, 35, 72, .1); border-radius: 1rem; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.client-discovery-card-media { display: block; aspect-ratio: 16 / 9; background: #f1eff8; overflow: hidden; text-decoration: none; }
.client-discovery-card-media img { width: 100%; height: 100%; object-fit: cover; }
.client-discovery-card-media span { height: 100%; display: grid; place-items: center; color: #8067ba; font-size: 2.4rem; }
.client-discovery-card-body { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.client-discovery-card-top { display: flex; justify-content: space-between; gap: .5rem; color: #7459ae; text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.client-discovery-card h2 { font-size: 1.05rem; margin: .4rem 0 .2rem; }
.client-discovery-card h2 a { color: #2c2348; text-decoration: none; }
.client-discovery-provider-service { margin: 0; font-weight: 600; }
.client-discovery-meta, .client-discovery-location, .client-discovery-availability { display: flex; gap: .7rem; flex-wrap: wrap; color: #4d3c75; font-size: .88rem; margin: .55rem 0 0; }
.client-discovery-location { color: var(--bs-secondary-color); }
.client-discovery-availability { color: #19734b; }
.client-discovery-availability.muted { color: var(--bs-secondary-color); }
.client-discovery-verified { color: #19734b; font-size: .78rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.client-discovery-card-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: 1rem; }
.client-discovery-card-actions .btn:last-child { margin-left: auto; }
.client-discovery-empty { background: #fff; border: 1px dashed #c8bfde; border-radius: 1rem; text-align: center; padding: 3rem 1rem; }
.client-discovery-empty > i { color: #8067ba; font-size: 2.5rem; }
.client-discovery-empty h2 { font-size: 1.2rem; margin-top: .8rem; }
.client-discovery-empty p { color: var(--bs-secondary-color); }
.client-discovery-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 1.5rem 0; }
.client-discovery-pagination a { color: #6c3cf0; }
.client-discovery-back { display: inline-block; color: #6c3cf0; text-decoration: none; margin-bottom: 1rem; }
.client-salon-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; background: #fff; border: 1px solid rgba(44, 35, 72, .1); border-radius: 1.25rem; padding: 1.25rem; }
.client-salon-logo { width: 88px; aspect-ratio: 1; border-radius: 1rem; overflow: hidden; background: #f1eff8; display: grid; place-items: center; color: #8067ba; font-size: 2rem; }
.client-salon-logo img { width: 100%; height: 100%; object-fit: cover; }
.client-salon-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: end; }
.client-salon-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; margin-top: 1rem; }
.client-salon-section, .client-salon-aside { background: #fff; border: 1px solid rgba(44, 35, 72, .1); border-radius: 1rem; padding: 1.1rem; margin-bottom: 1rem; }
.client-salon-section h2, .client-salon-aside h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.client-salon-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.client-salon-section-heading span { color: var(--bs-secondary-color); font-size: .85rem; }
.client-salon-service-list { display: grid; gap: .6rem; }
.client-salon-service-list article { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid #eeeaf5; padding-top: .75rem; }
.client-salon-service-list h3 { font-size: 1rem; margin: 0; }
.client-salon-service-list p { margin: .2rem 0; color: var(--bs-secondary-color); }
.client-salon-service-list span, .client-salon-service-list small { display: block; color: #4d3c75; }
.client-salon-service-list small { color: #19734b; margin-top: .25rem; }
.client-salon-inspiration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.client-salon-inspiration-grid a { color: #2c2348; text-decoration: none; min-width: 0; }
.client-salon-inspiration-grid img, .client-salon-inspiration-grid span { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f1eff8; border-radius: .7rem; }
.client-salon-inspiration-grid span { display: grid; place-items: center; color: #8067ba; font-size: 1.8rem; }
.client-salon-inspiration-grid strong { display: block; font-size: .8rem; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) { .client-discovery-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-salon-layout { grid-template-columns: 1fr; } .client-salon-aside { position: static; } }
@media (max-width: 575.98px) { .client-discovery-page, .client-salon-page { padding-left: .75rem; padding-right: .75rem; } .client-discovery-search-row .btn { padding-left: .7rem; padding-right: .7rem; } .client-discovery-quick-fields, .client-discovery-filter-grid, .client-discovery-card-grid { grid-template-columns: 1fr; } .client-salon-hero { grid-template-columns: auto 1fr; } .client-salon-actions { grid-column: 1 / -1; justify-content: start; } .client-salon-inspiration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .client-discovery-card-actions .btn:last-child { margin-left: 0; } }

/* Highest-priority salon palette guard: prevents legacy purple page rules from winning. */
.brand-body:has(.salon-community-page) .brand-sidebar-link:hover,
.brand-body:has(.salon-community-page) .brand-sidebar-link:focus,
.brand-body:has(.salon-community-page) .brand-sidebar-link.active,
.brand-body:has(.open-appointments-page) .brand-sidebar-link:hover,
.brand-body:has(.open-appointments-page) .brand-sidebar-link:focus,
.brand-body:has(.open-appointments-page) .brand-sidebar-link.active {
    color: #211C1D !important;
    background: #C9915E !important;
    border-color: #C9915E !important;
}

.brand-body:has(.salon-community-page) .brand-sidebar-link:hover i,
.brand-body:has(.salon-community-page) .brand-sidebar-link:focus i,
.brand-body:has(.salon-community-page) .brand-sidebar-link.active i,
.brand-body:has(.open-appointments-page) .brand-sidebar-link:hover i,
.brand-body:has(.open-appointments-page) .brand-sidebar-link:focus i,
.brand-body:has(.open-appointments-page) .brand-sidebar-link.active i {
    color: #211C1D !important;
}

.brand-body .salon-community-page .cw-new-post-button,
.brand-body .open-appointments-primary {
    color: #FFFFFF !important;
    background: #C9915E !important;
    border-color: #C9915E !important;
}

.brand-body .salon-community-page .cw-new-post-button:hover,
.brand-body .salon-community-page .cw-new-post-button:focus,
.brand-body .open-appointments-primary:hover,
.brand-body .open-appointments-primary:focus {
    color: #FFFFFF !important;
    background: #AD7446 !important;
    border-color: #AD7446 !important;
}

.brand-body .salon-community-page .cw-story-rail {
    background: #FFFFFF !important;
}

.brand-body .salon-community-page .cw-story-avatar.is-live,
.brand-body .salon-community-page .cw-story-avatar {
    background: #F5D9DE !important;
    border-color: #C9915E !important;
}

@media (max-width: 767.98px) {
    .brand-body .salon-community-page .cw-header-controls {
        display: flex !important;
        width: 100% !important;
    }

    .brand-body .salon-community-page .cw-new-post-button {
        display: inline-flex !important;
        width: 100% !important;
        align-items: center;
        justify-content: center;
    }
}

/* Final salon typography guard. */
.brand-body { font-size: 16px !important; line-height: 1.55; }
.brand-body .brand-main-content,
.brand-body .brand-app-content,
.brand-body input,
.brand-body select,
.brand-body textarea,
.brand-body button { font-size: 15px; }
.brand-body h1,
.brand-body .page-heading h1,
.brand-body .frexima-dashboard-hero h1,
.brand-body .salon-community-page .cw-title-block h1,
.brand-body .open-appointments-header h1 {
    font-size: clamp(30px, 3vw, 32px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.035em;
}
.brand-body h2,
.brand-body .content-panel h2,
.brand-body .frexima-panel-heading h2,
.brand-body .cw-feed-head h2,
.brand-body .cw-story-rail-heading h2 {
    font-size: clamp(18px, 2vw, 20px) !important;
    line-height: 1.3;
}
.brand-body h3,
.brand-body .content-panel h3,
.brand-body .cw-post-card h3 { font-size: 18px; line-height: 1.35; }
.brand-body small,
.brand-body .small,
.brand-body .form-text,
.brand-body .page-heading-subtitle { font-size: 14px; line-height: 1.45; }
.brand-body .brand-sidebar-link { min-height: 46px; font-size: 15px; font-weight: 650; }
.brand-body .btn,
.brand-body .form-control,
.brand-body .form-select { min-height: 44px; }
.brand-body .btn { font-size: 15px; font-weight: 700; }
.brand-body .section-label,
.brand-body .cw-kicker { font-size: 12px; font-weight: 800; letter-spacing: .09em; }
@media (max-width: 767.98px) {
    .brand-body { font-size: 15px !important; }
    .brand-body h1,
    .brand-body .page-heading h1,
    .brand-body .frexima-dashboard-hero h1,
    .brand-body .salon-community-page .cw-title-block h1,
    .brand-body .open-appointments-header h1 { font-size: 28px !important; }
}

/* Desktop composition mirrors the approved salon module references. */
@media (min-width: 992px) {
    .brand-body .salon-community-page {
        max-width: 1280px;
        margin: 0 auto;
        padding: 24px 28px 48px;
    }

    .brand-body .salon-community-page .cw-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 32px;
        align-items: start;
    }

    .brand-body .salon-community-page .cw-title-block {
        max-width: 760px;
    }

    .brand-body .salon-community-page .cw-header-controls {
        width: auto;
        justify-self: end;
    }

    .brand-body .salon-community-page .salon-community-audience-switch {
        max-width: 550px;
        margin-bottom: 24px;
    }

    .brand-body .salon-community-page .cw-story-rail {
        min-height: 0;
        margin-bottom: 16px;
        padding: 18px 20px 10px;
    }

    .brand-body .salon-community-page .cw-story-rail-heading {
        margin-bottom: 6px;
    }

    .brand-body .salon-community-page .cw-story-scroller {
        min-height: 118px;
        padding-bottom: 0;
    }

    .brand-body .salon-community-page .cw-story-card {
        min-height: 108px;
    }

    .brand-body .salon-community-page .cw-story-composer {
        min-height: 86px;
        margin-bottom: 24px;
        padding: 14px 18px;
    }

    .brand-body .salon-community-page .cw-shell {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 38px;
    }

    .brand-body .salon-community-page .cw-post-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .brand-body .salon-community-page .cw-post-card {
        display: grid;
        grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
    }

    .brand-body .salon-community-page .cw-media-button {
        height: 100%;
        min-height: 260px;
    }

    .brand-body .salon-community-page .cw-media-button > img,
    .brand-body .salon-community-page .cw-before-after,
    .brand-body .salon-community-page .cw-before-after img {
        height: 100%;
        min-height: 260px;
        object-fit: cover;
    }

    .brand-body .salon-community-page .cw-card-body {
        padding: 20px;
    }

    .brand-body .salon-community-page .salon-community-rules {
        top: 82px;
        min-height: 430px;
    }
}
@media (max-width: 767.98px) {
    .forum-mobile-intro { display: block; margin: 0 .75rem .75rem; padding: 1rem; }
    .forum-intro-actions { margin-top: .75rem; }
    .forum-intro-actions .btn { flex: 1 1 10rem; }
    .forum-community-switch { margin: 0 .75rem .75rem; }
    .forum-community-switch a { flex: 1; justify-content: center; }
}

/* Final salon visual direction: warm ivory, caramel gold, blush, and espresso. */
.brand-body {
    --fx-primary: #C9915E;
    --fx-primary-dark: #AD7446;
    --fx-sidebar: #211C1D;
    --fx-background: #FBF7F4;
    --fx-card: #FFFFFF;
    --fx-text: #1E1B1C;
    --fx-text-secondary: #746B68;
    --fx-text-muted: #746B68;
    --fx-border: #E9DFDA;
    --frexima-purple: #C9915E;
    --frexima-purple-dark: #AD7446;
    --frexima-sidebar: #211C1D;
    --frexima-bg: #FBF7F4;
    --frexima-border: #E9DFDA;
    --frexima-text: #1E1B1C;
    --frexima-muted: #746B68;
    --primary: #C9915E;
    --primary-dark: #AD7446;
    --primary-light: #F5EEEA;
    --primary-soft: #FBF7F4;
    --surface-muted: #F5EEEA;
    --body-bg: #FBF7F4;
    --sidebar-width: 224px;
    --content-padding: 32px;
    --card-radius: 18px;
    background: #FBF7F4;
}

.brand-body .brand-sidebar,
.brand-body .brand-sidebar-canvas {
    background: #211C1D !important;
}

.brand-body .brand-sidebar-link:hover,
.brand-body .brand-sidebar-link:focus,
.brand-body .brand-sidebar-link.active {
    color: #211C1D !important;
    background: #C9915E !important;
    border-color: #C9915E !important;
}

.brand-body .brand-sidebar-link:hover i,
.brand-body .brand-sidebar-link:focus i,
.brand-body .brand-sidebar-link.active i {
    color: #211C1D !important;
}

.brand-body .btn-primary,
.brand-body .fx-primary-cta {
    color: #211C1D;
    background: #C9915E;
    border-color: #C9915E;
}

.brand-body .btn-primary:hover,
.brand-body .btn-primary:focus,
.brand-body .fx-primary-cta:hover,
.brand-body .fx-primary-cta:focus {
    color: #FFFFFF;
    background: #AD7446;
    border-color: #AD7446;
}

.brand-body .content-panel,
.brand-body .card,
.brand-body .modal-content {
    border-color: #E9DFDA;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(33, 28, 29, .055);
}

/* Salon Community follows the approved document reference. */
.salon-community-page {
    max-width: 1440px;
    padding: 32px;
    color: #1E1B1C;
    background: #FBF7F4;
}

.salon-community-page .cw-header {
    align-items: center;
    padding: 0 0 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.salon-community-page .cw-title-block h1 {
    margin: 2px 0 4px;
    color: #1E1B1C;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -.04em;
}

.salon-community-page .cw-title-block p {
    color: #746B68;
}

.salon-community-page .cw-header-controls {
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.salon-community-page .cw-new-post-button,
.salon-community-page .cw-agent-link {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
}

.salon-community-page .cw-new-post-button {
    color: #FFFFFF;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(173, 116, 70, .2);
}

.salon-community-audience-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 550px;
    padding: 6px;
    background: #F5EEEA;
    border: 1px solid #E9DFDA;
    border-radius: 16px;
}

.salon-community-audience-switch a {
    min-height: 50px;
    padding: 9px 18px;
    color: #746B68;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 13px;
}

.salon-community-audience-switch a span,
.salon-community-audience-switch a small {
    display: block;
}

.salon-community-audience-switch a strong {
    color: #1E1B1C;
}

.salon-community-audience-switch a small {
    margin-top: 2px;
    font-size: .7rem;
}

.salon-community-audience-switch a.active {
    color: #1E1B1C;
    background: #FFFFFF;
    border-color: #E9DFDA;
    box-shadow: 0 6px 16px rgba(33, 28, 29, .06);
}

.salon-community-page .cw-search-row,
.salon-community-page .cw-story-rail,
.salon-community-page .cw-story-composer,
.salon-community-page .cw-post-card,
.salon-community-page .cw-side-panel {
    border-color: #E9DFDA;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(33, 28, 29, .05);
}

.salon-community-page > .cw-search-row,
.salon-community-page > .cw-category-rail,
.salon-community-page > .cw-active-filters {
    display: none;
}

.salon-community-page .cw-story-avatar.is-live {
    background: linear-gradient(135deg, #C9915E, #DEC19E, #C98291);
}

.salon-community-page .cw-want-button {
    color: #7A4050;
    background: #F5D9DE;
    border-color: #F0C9D1;
}

.salon-community-page .cw-book-button {
    color: #211C1D;
    background: #DEC19E;
    border-color: #DEC19E;
}

.salon-content-type,
.salon-audience-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    border: 0;
}

.salon-content-type legend,
.salon-audience-picker legend {
    grid-column: 1 / -1;
    margin: 0;
    color: #1E1B1C;
    font-size: .86rem;
    font-weight: 800;
}

.salon-content-type label,
.salon-audience-picker label {
    cursor: pointer;
}

.salon-content-type input,
.salon-audience-picker input {
    position: absolute;
    opacity: 0;
}

.salon-content-type label span,
.salon-audience-picker label span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    color: #746B68;
    background: #FBF7F4;
    border: 1px solid #E9DFDA;
    border-radius: 14px;
}

.salon-content-type input:checked + span,
.salon-audience-picker input:checked + span {
    color: #1E1B1C;
    background: #F5D9DE;
    border-color: #C98291;
    box-shadow: inset 0 0 0 1px #C98291;
}

.salon-audience-picker p {
    grid-column: 1 / -1;
    margin: 0;
    color: #746B68;
    font-size: .78rem;
}

.salon-community-rules {
    position: sticky;
    top: 92px;
    padding: 28px;
}

.salon-community-rules h2 {
    margin: 0 0 24px;
    color: #1E1B1C;
    font-size: 1.45rem;
}

.salon-community-rules ol {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.salon-community-rules li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: start;
}

.salon-community-rules li > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #AD7446;
    background: #F5D9DE;
    border-radius: 50%;
    font-weight: 800;
}

.salon-community-rules strong,
.salon-community-rules small {
    display: block;
}

.salon-community-rules small {
    margin-top: 3px;
    color: #746B68;
    line-height: 1.4;
}

/* Open Appointments follows the calendar-linked reference layout. */
.open-appointments-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 0 48px;
}

.open-appointments-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.open-appointments-header h1 {
    margin: 3px 0 2px;
    color: #1E1B1C;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -.04em;
}

.open-appointments-header p {
    margin: 0;
    color: #746B68;
}

.open-appointments-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    color: #FFFFFF;
    background: #C9915E;
    border: 1px solid #C9915E;
    border-radius: 14px;
    font-weight: 800;
}

.open-appointments-primary:hover {
    color: #FFFFFF;
    background: #AD7446;
}

.open-appointments-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 14px;
    max-width: 720px;
    margin: 26px 0;
}

.open-appointments-tabs a {
    min-height: 52px;
    display: grid;
    place-items: center;
    color: #746B68;
    text-decoration: none;
    background: #F5EEEA;
    border: 1px solid #E9DFDA;
    border-radius: 14px;
}

.open-appointments-tabs a.active {
    color: #1E1B1C;
    background: #FFFFFF;
    font-weight: 800;
}

.open-appointments-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 38px;
}

.open-appointments-empty,
.open-appointments-workflow {
    background: #FFFFFF;
    border: 1px solid #E9DFDA;
    border-radius: 20px;
}

.open-appointments-empty {
    display: grid;
    justify-items: center;
    min-height: 380px;
    align-content: center;
    padding: 40px;
    text-align: center;
}

.open-appointments-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #AD7446;
    background: #F5D9DE;
    border-radius: 20px;
    font-size: 1.6rem;
}

.open-appointments-empty h2 {
    margin: 18px 0 7px;
}

.open-appointments-empty p {
    max-width: 560px;
    margin: 0 0 22px;
    color: #746B68;
    line-height: 1.65;
}

.open-appointments-workflow {
    padding: 28px;
}

.open-appointments-workflow h2 {
    margin: 4px 0 24px;
}

.open-appointments-workflow ol {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.open-appointments-workflow li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: center;
}

.open-appointments-workflow li span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #AD7446;
    background: #F5D9DE;
    border-radius: 50%;
    font-weight: 800;
}

.open-appointments-workflow > p {
    margin: 28px 0 0;
    padding: 16px;
    color: #AD7446;
    text-align: center;
    background: #F5EEEA;
    border-radius: 14px;
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .open-appointments-layout {
        grid-template-columns: 1fr;
    }

    .open-appointments-workflow {
        order: -1;
    }
}

@media (max-width: 767.98px) {
    .salon-community-page {
        padding: 16px 0;
    }

    .salon-community-page .cw-header {
        align-items: flex-start;
        padding: 0 16px 20px;
    }

    .salon-community-page .cw-header-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .salon-community-audience-switch {
        grid-template-columns: 1fr;
        margin: 0 16px;
    }

    .salon-content-type,
    .salon-audience-picker {
        grid-template-columns: 1fr;
    }

    .open-appointments-page {
        padding: 8px 0 36px;
    }

    .open-appointments-header {
        display: grid;
    }

    .open-appointments-header .open-appointments-primary {
        width: 100%;
    }

    .open-appointments-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .open-appointments-empty,
    .open-appointments-workflow {
        padding: 22px 18px;
        border-radius: 16px;
    }
}