/* =========================================================
   Login / Owner Access ??? Premium UI (scoped)
   File: public/assets/css/ui-updates-salesbook.css
   ========================================================= */

.login-ui-page.sbo-auth-shell,
.login-ui-page {
    --login-ui-blue: #3b82d6;
    --login-ui-blue-deep: #2f6fbf;
    --login-ui-blue-soft: #e8f1fb;
    --login-ui-blue-soft-2: #d7e8f8;
    --login-ui-pink: #f08a8a;
    --login-ui-pink-deep: #e67878;
    --login-ui-pink-soft: #fde8e8;
    --login-ui-text: #1b2433;
    --login-ui-muted: #8a94a6;
    --login-ui-line: #e4e9f0;
    --login-ui-card: #ffffff;
    --login-ui-shadow: 0 18px 40px rgba(40, 70, 120, 0.08);
    --login-ui-shadow-sm: 0 8px 22px rgba(40, 70, 120, 0.06);
    --login-ui-radius: 22px;
    --login-ui-radius-sm: 14px;
    position: relative;
    z-index: 1;
    overflow: visible;
    width: 100%;
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Same clearance pattern as .sb-landing */
    padding: 24px 20px var(--sb-wave-clearance);
    background: transparent;
    place-items: unset;
    font-family: var(--sb-font-regular);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Same Mazzard typography system as /sales-book */
body.login-ui-auth,
body.login-ui-auth .login-ui-page,
.login-ui-page {
    font-family: var(--sb-font-regular);
}

body.login-ui-auth h1,
body.login-ui-auth h2,
body.login-ui-auth h3,
body.login-ui-auth h4,
body.login-ui-auth h5,
body.login-ui-auth h6,
body.login-ui-auth strong,
body.login-ui-auth b,
.login-ui-page h1,
.login-ui-page h2,
.login-ui-page h3,
.login-ui-page strong,
.login-ui-page b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

body.login-ui-auth button,
body.login-ui-auth input,
body.login-ui-auth select,
body.login-ui-auth textarea,
.login-ui-page button,
.login-ui-page input {
    font-family: inherit;
}

/* Match /sales-book body background image + clear owner overrides */
body.sales-book-body.sb-owner-body.login-ui-auth,
body.sbo-auth-body.login-ui-auth,
body.login-ui-auth {
    border-top: 0;
    border-image: none;
    background-color: #f4f7fb;
    background-image: var(--sb-body-bg-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/*
 * Wave footer: use EXACT same rules as public/css/sales-book.css
 * (.sb-landing-wave-footer). Do not override height ? mobile uses
 * :root --sb-wave-height from sales-book.css breakpoints.
 */
body.login-ui-auth .sb-landing-wave-footer,
body.otp-ui-auth .sb-landing-wave-footer,
body.login-ui-auth.otp-ui-auth .sb-landing-wave-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: var(--sb-wave-height);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

body.login-ui-auth .sb-landing-wave-footer__canvas,
body.otp-ui-auth .sb-landing-wave-footer__canvas,
body.login-ui-auth.otp-ui-auth .sb-landing-wave-footer__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Verify page ??? keep content above waves, transparent shell */
.login-ui-page.login-ui-verify .login-ui-container {
    position: relative;
    z-index: 1;
}

.login-ui-page.login-ui-verify .login-ui-card.sbo-verify-card {
    text-align: center;
}

.login-ui-page .login-ui-container,
.login-ui-page .sbo-auth-panel.login-ui-container {
    position: relative;
    z-index: 1;
    width: min(100%, min(660px, 100%));
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-ui-page .login-ui-fullscreen,
.login-ui-page .sbo-fullscreen.login-ui-fullscreen {
    z-index: 5;
    color: #9aa3b2;
    opacity: 0.55;
    transition: opacity 180ms ease, color 180ms ease;
}

.login-ui-page .login-ui-fullscreen:hover {
    opacity: 1;
    color: #3366cc;
}

/* ---------- Brand (exact /sales-book logo sizing) ---------- */
.login-ui-page .login-ui-brand.sb-landing-brand,
.login-ui-page .login-ui-brand {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 14px);
    margin: 0 0 clamp(18px, 3.5vw, 18px);
    text-align: center;
}

.login-ui-page .login-ui-brand > .sbo-brand {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-ui-page .login-ui-brand__mark.sb-landing-brand-text,
.login-ui-page .login-ui-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-ui-page .login-ui-brand__logo.sb-landing-brand-logo,
.login-ui-page .login-ui-brand__logo {
    display: block;
    height: clamp(28px, 5.5vw, 52px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ---------- Owner Access badge (match phone-entry security pill) ---------- */
.login-ui-page .login-ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 7px 16px;
    border-radius: 10px;
    background: #EAF0FF;
    color: #3366CC;
    box-shadow: none;
    font-family: var(--sb-font-regular);
    font-size: 18px;
    font-weight: normal;
    line-height: 24px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.login-ui-page .login-ui-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.12);
}

.login-ui-page .login-ui-badge__icon {
    width: 14px;
    height: 18px;
    flex: 0 0 auto;
}

/* ---------- Hero (match sb-landing-title / subtitle) ---------- */
.login-ui-page .login-ui-hero {
    width: 100%;
    text-align: center;
    margin: 0 0 clamp(16px, 3vw, 16px);
}

.login-ui-page .login-ui-hero__title {
    margin: 0 0 clamp(4px, 1vw, 5px);
    background: linear-gradient(93deg, #36C 29.89%, #EF626C 83.3%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: var(--sb-font-bold);
    font-size: clamp(22px, 5.5vw, 40px);
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.2;
}

.login-ui-page .login-ui-hero__accent {
    color: inherit;
    -webkit-text-fill-color: inherit;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.login-ui-page .login-ui-hero__subtitle {
    margin: 0 auto clamp(4px, 3vw, 4px);
    max-width: 511px;
    color: #222;
    font-family: var(--sb-font-regular);
    font-size: clamp(16px, 3.2vw, 22px);
    font-weight: normal;
    line-height: clamp(24px, 4.5vw, 32px);
}

.login-ui-page .login-ui-mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 13px;

    border-radius: 10px;
    background: #fff;

    color: #222;
    font-family: var(--sb-font-regular);
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: normal;
    line-height: 1.4;
}

.login-ui-page .login-ui-mode__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #3366cc;
}

.login-ui-page .login-ui-mode strong {
    color: #3366cc;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ---------- Login card (exact screenshot + sb-landing-card) ---------- */
.login-ui-page .login-ui-card,
.login-ui-page .sbo-auth-card.login-ui-card {
    width: 100%;
    position: relative;
    padding: clamp(24px, 5vw, 36px) clamp(20px, 5vw, 32px) clamp(20px, 4vw, 28px);
    border: 1px solid #e0e9fb;
    border-top: clamp(4px, 0.8vw, 5px) solid #3366cc;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 200ms ease;
}

.login-ui-page .login-ui-card::before {
    content: none;
    display: none;
}

.login-ui-page .login-ui-card:hover {
    transform: none;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
}

.login-ui-page.login-ui-verify .login-ui-card.sbo-verify-card::before {
    content: none;
    display: none;
}

.login-ui-page .login-ui-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.login-ui-notice{
    margin-top: 14px !important;
}
span.login-ui-help__label.sb-landing-trust-link-label{
    font-family: var(--sb-font-medium) !important;
}

.login-ui-page .login-ui-card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #3366cc;
    background: #eef4ff;
}

.login-ui-page .login-ui-card__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.login-ui-page .login-ui-card__copy {
    min-width: 0;
    flex: 1;
}

.login-ui-page .login-ui-card h1,
.login-ui-page .login-ui-card__copy h1 {
    margin: 0px 0 4px;
    color: #222222;
    font-family: var(--sb-font-bold);
    font-size: 24px;
    font-weight: normal;
    line-height: 1.25;
}

.login-ui-page .login-ui-card > p,
.login-ui-page .login-ui-card__copy p {
    margin: 0px 0 10px !important;
    color: #222;
    font-family: var(--sb-font-regular);
    font-size: 16px;
    font-weight: normal;
    line-height: 1.45;
    
}

/* ---------- Form / phone input ---------- */
.login-ui-page .login-ui-form,
.login-ui-page .sbo-auth-form.login-ui-form {
    margin-top: 0;
}

.login-ui-page .login-ui-input,
.login-ui-page .sbo-phone-field.login-ui-input {
    height: 52px;
    border-radius: 10px;
    border: 1px solid #DADADA;
    background: #FFF;
    box-shadow: none;
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login-ui-page .login-ui-input:focus-within,
.login-ui-page .sbo-phone-field.login-ui-input:focus-within {
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.login-ui-page .login-ui-input .sbo-phone-code {
    min-width: 68px;
    padding: 0 14px;
    color: #222222;
    background: #f3f4f6;
    border-right: 1px solid #DADADA;
    font-family: var(--sb-font-semibold);
    font-size: 18px;
    font-weight: normal;
}

.login-ui-page .login-ui-input input[name="phone_no"] {
    padding: 0 16px;
    color: #222222;
    background: #fff;
    font-family: var(--sb-font-regular);
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0.04em;
}

.login-ui-page .login-ui-input input[name="phone_no"]::placeholder {
    color: #b0b0b0;
    font-family: var(--sb-font-regular);
    letter-spacing: 0.06em;
}

.login-ui-page .login-ui-error,
.login-ui-page .sbo-field-error.login-ui-error {
    margin: 10px 0 0;
    color: #ef626c;
    font-family: var(--sb-font-regular);
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: normal;
}

/* ---------- Send code button (exact /sales-book sb-landing-btn--primary) ---------- */
.login-ui-page .login-ui-button,
.login-ui-page .sbo-primary-button.login-ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 8px);
    width: 100%;
    min-height: 48px;
    margin-top: 15px;
    padding: clamp(14px, 2.8vw, 18px) clamp(16px, 3.5vw, 24px);
    border: 1px solid #f2e1e1;
    border-bottom: none;
    border-radius: clamp(10px, 2vw, 13px);
    color: #fff;
    background: #ef626c;
    box-shadow: none;
    font-family: var(--sb-font-semibold);
    position: relative;
    z-index: 1;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
}

.login-ui-page .login-ui-button .sbo-button-icon,
.login-ui-page .login-ui-button .login-ui-button__icon,
.login-ui-page .login-ui-button .sbo-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.login-ui-page .login-ui-button .sbo-button-arrow svg,
.login-ui-page .login-ui-button .login-ui-button__icon svg {
    width: 10px;
    height: 12px;
    display: block;
}

.login-ui-page .login-ui-button.is-loading .sbo-button-icon,
.login-ui-page .login-ui-button.is-loading .login-ui-button__icon,
.login-ui-page .login-ui-button.is-loading .sbo-button-arrow {
    display: none;
}

.login-ui-page .login-ui-button:hover:not(:disabled),
.login-ui-page .sbo-primary-button.login-ui-button:hover:not(:disabled) {
    background: #e8555f;
    color: #fff;
    box-shadow: none;
    transform: none;
    filter: none;
}

.login-ui-page .login-ui-button:disabled,
.login-ui-page .sbo-primary-button.login-ui-button:disabled {
    opacity: 0.45;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.login-ui-page .login-ui-button.is-loading,
.login-ui-page .sbo-primary-button.login-ui-button.is-loading {
    opacity: 0.85;
    background: #ef626c;
}

body.sb-owner-body .login-ui-page .login-ui-button:not(:disabled):hover {
    filter: none;
}

/* ---------- Access notice ---------- */
.login-ui-page .login-ui-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    color: #222222;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
}

.login-ui-page .login-ui-notice svg {
    width: 12px;
    height: 15px;
    flex: 0 0 auto;
    color: #000;
    opacity: 1;
}

/* ---------- WhatsApp help card (exact /sales-book trust link) ---------- */
.login-ui-page .login-ui-help.sb-landing-trust-link,
.login-ui-page a.sbo-help.login-ui-help {
    width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    margin: clamp(16px, 3vw, 22px) 0 0;
    padding: clamp(14px, 2.8vw, 19px) clamp(14px, 3vw, 20px);
    border: 1px solid #ededed;
    border-radius: clamp(10px, 2vw, 13px);
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.1);
    color: #222;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.login-ui-page .login-ui-help.sb-landing-trust-link:hover,
.login-ui-page a.sbo-help.login-ui-help:hover {
    transform: none;
    border-color: #ededed;
    color: #222;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.login-ui-page .login-ui-help .sb-whatsapp-icon,
.login-ui-page .login-ui-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(24px, 4.5vw, 38px);
    height: clamp(24px, 4.5vw, 38px);
    flex: 0 0 auto;
    margin-top: 0;
    border-radius: 50%;
    color: #fff;
    background: #E7F9E9;
    box-shadow: none;
    line-height: 0;
}

.login-ui-page .login-ui-help .sb-whatsapp-icon svg,
.login-ui-page .login-ui-help__icon svg {
    width: clamp(14px, 2.8vw, 18px);
    height: clamp(14px, 2.8vw, 18px);
    
}

.login-ui-page .login-ui-help .sb-whatsapp-icon svg path,
.login-ui-page .login-ui-help__icon svg path {
    fill: #4BC853;
}

.login-ui-page .login-ui-help__copy.sb-landing-trust-link-text,
.login-ui-page .login-ui-help__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.login-ui-page .login-ui-help__label.sb-landing-trust-link-label,
.login-ui-page .login-ui-help__label {
    font-size: clamp(14px, 2.5vw, 16px);
    font-family: var(--sb-font-regular);
    font-weight: normal;
    color: #222222;
    line-height: 1.3;
}

.login-ui-page .login-ui-help__title.sb-landing-trust-link-title,
.login-ui-page .login-ui-help__title {
    font-size: clamp(15px, 2.8vw, 18px);
    font-family: var(--sb-font-regular);
    font-weight: normal;
    color: #3366CC;
    line-height: 1.3;
}

.login-ui-page .login-ui-help__arrow.sb-landing-trust-link-chevron,
.login-ui-page .login-ui-help__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3366CC;
    line-height: 1;
}

.login-ui-page .login-ui-help__arrow svg {
    width: clamp(7px, 1.5vw, 9px);
    height: auto;
}

.login-ui-page .login-ui-help__arrow svg path {
    fill: #3366CC;
}

/* ---------- Trust features (match screenshot) ---------- */
.login-ui-page .login-ui-features,
.login-ui-page .sbo-benefits.login-ui-features {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    margin: 38px 0 18px;
    padding: clamp(16px, 3vw, 22px) clamp(10px, 2vw, 16px);
    border: 1px solid #e0e9fb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
    color: #222;
    font-size: inherit;
}

.login-ui-page .login-ui-features::before {
    content: none;
}

.login-ui-page .login-ui-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 6px;
    color: #000;
    font-size: inherit;
}

.login-ui-page .login-ui-feature:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: calc(50% + 28px);
    right: calc(-50% + 28px);
    height: 1px;
    background: #CFDEFF;
    z-index: 0;
}

.login-ui-page .login-ui-feature:not(:first-child)::before {
    content: none;
}

.login-ui-page .login-ui-feature__icon,
.login-ui-page .login-ui-feature i.login-ui-feature__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e0e8fb;
    color: #3366cc;
    background: #eef4ff;
    box-shadow: none;
    font-style: normal;
    font-size: 0;
}

.login-ui-page .login-ui-feature__icon svg {
    width: auto;
    height: 16px;
    display: block;
}

.login-ui-page .login-ui-feature strong {
    display: block;
    margin: 2px 0 0;
    color: #222;
    font-family: var(--sb-font-semibold);
    font-size: 18px;
    font-weight: normal;
    line-height: 1.2;
}

.login-ui-page .login-ui-feature small {
    display: block;
    max-width: 120px;
    margin: 0;
    color: #000;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.35;
}

.login-ui-page .sbo-benefits.login-ui-features span:nth-child(1) i,
.login-ui-page .sbo-benefits.login-ui-features span:nth-child(2) i,
.login-ui-page .sbo-benefits.login-ui-features span:nth-child(3) i {
    background: #DEE8FF;
    
    color: #3366cc;
}

/* ---------- Footer ---------- */
.login-ui-page .login-ui-footer {
    margin: 4px 0 8px;
    color: #666666;
    font-family: var(--sb-font-regular);
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: normal;
    letter-spacing: 0.01em;
    text-align: center;
}

/* ---------- Responsive ? match .sb-landing mobile padding ---------- */
@media (min-width: 768px) {
    .login-ui-page {
        padding: clamp(24px, 6vw, 70px) clamp(16px, 4vw, 25px) var(--sb-wave-clearance);
        align-items: center;
    }

    .login-ui-page .login-ui-container,
    .login-ui-page .sbo-auth-panel.login-ui-container {
        width: min(100%, 660px);
    }
}

@media (max-width: 767px) {
    /* Match .sb-landing mobile padding + wave clearance */
    .login-ui-page.sbo-auth-shell,
    .login-ui-page {
        padding: 20px 14px 36px;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
    }

    .login-ui-page .login-ui-container,
    .login-ui-page .sbo-auth-panel.login-ui-container {
        width: min(100%, 560px);
    }

    .login-ui-page .login-ui-card h1,
    .login-ui-page .login-ui-card__copy h1 {
        font-size: 22px;
    }
}

@media (max-width: 380px) {
    .login-ui-page.sbo-auth-shell,
    .login-ui-page {
        padding: 20px 14px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-ui-page .login-ui-badge,
    .login-ui-page .login-ui-card,
    .login-ui-page .login-ui-button,
    .login-ui-page .login-ui-help,
    .login-ui-page .login-ui-input {
        transition: none;
    }
}

/* =========================================================
   OTP Verification / Check Your SMS ??? Premium UI (scoped)
   Prefix: otp-ui-*
   ========================================================= */

.otp-ui-page.sbo-auth-shell,
.otp-ui-page {
    --otp-ui-blue: #3366cc;
    --otp-ui-blue-soft: #eef4ff;
    --otp-ui-pink: #ef626c;
    --otp-ui-pink-deep: #e8555f;
    --otp-ui-text: #222222;
    --otp-ui-muted: #484848;
    --otp-ui-line: #ededed;
    --otp-ui-card: #ffffff;
    --otp-ui-yellow: #fff8e8;
    --otp-ui-yellow-border: #f5e0b0;
    --otp-ui-yellow-text: #7a5c1e;
    --otp-ui-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
    --otp-ui-shadow-sm: 0 2px 6px 0 rgba(51, 102, 204, 0.1);
    --otp-ui-radius: 30px;
    position: relative;
    z-index: 1;
    overflow: visible;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 20px var(--sb-wave-clearance);
    background: transparent;
    font-family: var(--sb-font-regular);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.otp-ui-auth,
body.otp-ui-auth .otp-ui-page,
.otp-ui-page {
    font-family: var(--sb-font-regular);
}

body.otp-ui-auth h1,
body.otp-ui-auth h2,
body.otp-ui-auth h3,
body.otp-ui-auth strong,
body.otp-ui-auth b,
.otp-ui-page h1,
.otp-ui-page strong,
.otp-ui-page b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

body.otp-ui-auth button,
body.otp-ui-auth input,
.otp-ui-page button,
.otp-ui-page input {
    font-family: inherit;
}

body.sales-book-body.sb-owner-body.otp-ui-auth,
body.sbo-auth-body.otp-ui-auth,
body.otp-ui-auth {
    border-top: 0;
    border-image: none;
    background-color: #f4f7fb;
    background-image: var(--sb-body-bg-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.otp-ui-page .otp-ui-container,
.otp-ui-page .sbo-auth-panel.otp-ui-container {
    position: relative;
    z-index: 1;
    width: min(100%, 710px);
    max-width: 710px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.otp-ui-page .otp-ui-fullscreen,
.otp-ui-page .sbo-fullscreen.otp-ui-fullscreen {
    z-index: 5;
    color: #9aa3b2;
    opacity: 0.55;
    transition: opacity 180ms ease, color 180ms ease;
}

.otp-ui-page .otp-ui-fullscreen:hover {
    opacity: 1;
    color: var(--otp-ui-blue);
}

/* Brand */
.otp-ui-page .otp-ui-brand.login-ui-brand,
.otp-ui-page .otp-ui-brand {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 14px);
    margin: 0 0 clamp(18px, 3.5vw, 28px);
    text-align: center;
}

.otp-ui-page .otp-ui-brand > .sbo-brand {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.otp-ui-page .otp-ui-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-ui-page .otp-ui-brand__logo {
    display: block;
    height: clamp(28px, 5.5vw, 52px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* OTP card */
.otp-ui-page .otp-ui-card.sbo-verify-card,
.otp-ui-page .otp-ui-card {
    width: 100%;
    position: relative;
    text-align: center;
    padding: 16px clamp(18px, 6vw, 40px) 30px;
    border: 1px solid #e0e9fb;
    border-top: 5px solid var(--otp-ui-blue);
    border-radius: var(--otp-ui-radius);
    background: var(--otp-ui-card);
    box-shadow: var(--otp-ui-shadow);
    overflow: visible;
    transition: box-shadow 200ms ease;
}

.otp-ui-page .otp-ui-card:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);

}

.otp-ui-page .otp-ui-card::before {
    content: none;
    display: none;
}

/* Header: back left + icon truly centered */
.otp-ui-page .otp-ui-header {
    display: grid;
    grid-template-columns: 58px 1fr 58px;
    align-items: center;
    width: 100%;
    margin: 8px 0 12px;
    min-height: 76px;
}

/* Back button */
.otp-ui-page .otp-ui-back {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 58px;
    height: 58px;
    margin: 0;
    line-height: 0;
    text-decoration: none;
    transition: transform 180ms ease;
}

.otp-ui-page .otp-ui-back:hover {
    transform: translateX(-2px);
}

.otp-ui-page .otp-ui-back svg {
    width: 58px;
    height: 58px;
    display: block;
}

/* SMS icon ??? centered in middle column */
.otp-ui-page .otp-ui-icon.sbo-message-icon,
.otp-ui-page .otp-ui-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    grid-column: 2;
    width: clamp(62px, 12vw, 76px);
    height: clamp(62px, 12vw, 76px);
    margin: 0 auto;
    border-radius: 50%;
    background: var(--otp-ui-blue-soft);
    color: var(--otp-ui-blue);
}

.otp-ui-page .otp-ui-icon svg {
    width: clamp(34px, 7vw, 42px);
    height: clamp(34px, 7vw, 42px);
    display: block;
}

/* Title & description ??? tight text group, larger gap before inputs */
.otp-ui-page .otp-ui-title {
    margin: 0 0 4px;
    color: #111827;
    font-family: var(--sb-font-bold);
    font-size: clamp(26px, 5.5vw, 40px);
    font-weight: normal;
    
    line-height: 1.2;
}

.otp-ui-page .otp-ui-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 0 28px;
    color: var(--otp-ui-muted);
    font-family: var(--sb-font-regular);
    font-size: clamp(15px, 3vw, 22px);
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
}

.otp-ui-page .otp-ui-desc__line {
    display: block;
    color: #484848;
}

.otp-ui-page .otp-ui-desc__phone,
.otp-ui-page .otp-ui-desc strong {
    display: block;
    margin: 2px 0;
    color: #111827;
    font-family: var(--sb-font-bold);
    font-size: clamp(20px, 4.5vw, 32px);
    font-weight: normal;
    line-height: 1.2;
}

.otp-ui-page .otp-ui-debug.sbo-debug-code,
.otp-ui-page .otp-ui-debug {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 10px 14px;
    border: 1px solid #f5e8ad;
    border-radius: 12px;
    color: #78610d;
    background: #fff8d8;
    font-family: var(--sb-font-regular);
    font-size: clamp(12px, 2.4vw, 14px);
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}

.otp-ui-page .otp-ui-desc:has(+ .otp-ui-debug),
.otp-ui-page .otp-ui-desc:has(+ .sbo-debug-code) {
    margin-bottom: 12px;
}

/* Stack: inputs ??? resend ??? verify */
.otp-ui-page .otp-ui-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

.otp-ui-page .otp-ui-form.sbo-auth-form,
.otp-ui-page .otp-ui-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

.otp-ui-page .otp-ui-inputs.sbo-otp-group,
.otp-ui-page .otp-ui-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(8px, 1.8vw, 16px);
    width: 100%;
    margin: 0;
    justify-content: center;
}

.otp-ui-page .otp-ui-input,
.otp-ui-page .otp-ui-inputs input[data-otp-digit] {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 70px;
    padding: 0;
    border: 1px solid var(--otp-ui-line);
    border-radius: 13px;
    outline: 0;
    text-align: center;
    color: #111827;
    background: #fff;
    box-shadow: var(--otp-ui-shadow-sm);
    font-family: var(--sb-font-bold);
    font-size: clamp(18px, 4vw, 24px);
    font-weight: normal;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.otp-ui-page .otp-ui-input:focus,
.otp-ui-page .otp-ui-inputs input[data-otp-digit]:focus {
    border-color: var(--otp-ui-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.otp-ui-page .otp-ui-error.sbo-field-error,
.otp-ui-page .otp-ui-error {
    margin: 12px 0 0;
    color: var(--otp-ui-pink);
    font-family: var(--sb-font-regular);
    font-size: clamp(13px, 2.4vw, 16px);
    text-align: center;
}

.otp-ui-page .otp-ui-progress.sbo-otp-progress,
.otp-ui-page .otp-ui-progress {
    display: none !important;
}

/* Resend ??? medium gap after inputs, larger gap before verify */
.otp-ui-page .otp-ui-resend.sbo-verify-actions,
.otp-ui-page .otp-ui-resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    width: 100%;
    margin: 20px 0 24px;
    text-align: center;
}

.otp-ui-page .otp-ui-resend__prompt {
    color: var(--otp-ui-text);
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 2.8vw, 20px);
    font-weight: normal;
    line-height: 1.4;
}

.otp-ui-page .otp-ui-resend__form {
    display: inline;
    margin: 0;
}

.otp-ui-page .otp-ui-resend__btn.sbo-link-button,
.otp-ui-page .otp-ui-resend__btn {
    display: inline;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--otp-ui-blue);
    cursor: pointer;
    font-family: var(--sb-font-semibold);
    font-size: clamp(14px, 2.8vw, 20px);
    font-weight: normal;
    line-height: 1.4;
    text-decoration: none;
    transition: color 180ms ease, opacity 180ms ease;
}

.otp-ui-page .otp-ui-resend__btn:hover:not(:disabled) {
    color: #2557b0;
}

.otp-ui-page .otp-ui-resend__btn:disabled {
    cursor: default;
    opacity: 1;
    color: var(--otp-ui-blue);
}

.otp-ui-page .otp-ui-resend__btn #resend-label {
    font-family: inherit;
    color: inherit;
}

.otp-ui-page .otp-ui-wrong-number {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Verify button */
.otp-ui-page .otp-ui-button.sbo-primary-button,
.otp-ui-page .otp-ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 8px);
    width: 100%;
    min-height: 48px;
    margin-top: 0;
    padding: clamp(14px, 2.8vw, 18px) clamp(16px, 3.5vw, 24px);
    border: 1px solid #f2e1e1;
    border-bottom: none;
    border-radius: clamp(10px, 2vw, 13px);
    color: #fff;
    background: var(--otp-ui-pink);
    box-shadow: none;
    font-family: var(--sb-font-semibold);
    font-size: clamp(15px, 2.8vw, 18px);
    position: relative;
    z-index: 1;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
}

.otp-ui-page .otp-ui-button .sbo-button-label {
    color: inherit;
    font-family: inherit;
}

.otp-ui-page .otp-ui-button__arrow {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.otp-ui-page .otp-ui-button:not(:disabled):not(.is-loading) .otp-ui-button__arrow {
    display: inline-flex;
}

.otp-ui-page .otp-ui-button__arrow svg {
    width: 10px;
    height: 12px;
    display: block;
}

.otp-ui-page .otp-ui-button:hover:not(:disabled) {
    background: var(--otp-ui-pink-deep);
    color: #fff;
    box-shadow: none;
    transform: none;
    filter: none;
}

.otp-ui-page .otp-ui-button:disabled {
    opacity: 0.45;
    color: #fff;
    background: var(--otp-ui-pink);
    box-shadow: none;
    cursor: not-allowed;
}

.otp-ui-page .otp-ui-button.is-loading {
    opacity: 0.85;
    background: var(--otp-ui-pink);
}

body.sb-owner-body .otp-ui-page .otp-ui-button:not(:disabled):hover {
    filter: none;
}

/* Override legacy verify button gray disabled look */
.otp-ui-page .otp-ui-card.sbo-verify-card .otp-ui-button.sbo-primary-button {
    margin-top: 0;
    background: var(--otp-ui-pink);
    color: #fff;
}

.otp-ui-page .otp-ui-card.sbo-verify-card .otp-ui-button.sbo-primary-button:not(:disabled) {
    color: #fff;
    background: var(--otp-ui-pink);
}

.otp-ui-page .otp-ui-card.sbo-verify-card .otp-ui-button.sbo-primary-button.is-loading {
    color: #fff;
    background: var(--otp-ui-pink);
}

/* WhatsApp help card (inside OTP card) */
.otp-ui-page .otp-ui-card .otp-ui-help.login-ui-help,
.otp-ui-page .otp-ui-card a.sbo-help.otp-ui-help,
.otp-ui-page .otp-ui-help.login-ui-help,
.otp-ui-page a.sbo-help.otp-ui-help {
    width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    margin: 22px 0 0;
    padding: clamp(14px, 2.8vw, 19px) clamp(14px, 3vw, 20px);
    border: 1px solid #ededed;
    border-radius: clamp(10px, 2vw, 13px);
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.1);
    color: #222;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 180ms ease;
}

.otp-ui-page .otp-ui-help:hover {
    transform: translateY(-1px);
    border-color: #ededed;
    color: #222;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.otp-ui-page .otp-ui-help__icon.sb-whatsapp-icon,
.otp-ui-page .otp-ui-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(24px, 4.5vw, 38px);
    height: clamp(24px, 4.5vw, 38px);
    flex: 0 0 auto;
    margin-top: 0;
    border-radius: 50%;
    color: #fff;
    background: #e7f9e9;
    box-shadow: none;
    line-height: 0;
}

.otp-ui-page .otp-ui-help__icon svg {
    width: clamp(14px, 2.8vw, 18px);
    height: clamp(14px, 2.8vw, 18px);
}

.otp-ui-page .otp-ui-help__icon svg path {
    fill: #4bc853;
}

.otp-ui-page .otp-ui-help__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.otp-ui-page .otp-ui-help__label {
    font-size: clamp(14px, 2.5vw, 16px);
    font-family: var(--sb-font-medium);
    font-weight: normal;
    color: #222222;
    line-height: 1.3;
}

.otp-ui-page .otp-ui-help__title {
    font-size: clamp(15px, 2.8vw, 18px);
    font-family: var(--sb-font-regular);
    font-weight: normal;
    color: var(--otp-ui-blue);
    line-height: 1.3;
}

.otp-ui-page .otp-ui-help__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--otp-ui-blue);
    line-height: 1;
}

.otp-ui-page .otp-ui-help__arrow svg {
    width: clamp(7px, 1.5vw, 9px);
    height: auto;
}

.otp-ui-page .otp-ui-help__arrow svg path {
    fill: var(--otp-ui-blue);
}

/* Tip card */
.otp-ui-page .otp-ui-tip.sbo-tip,
.otp-ui-page .otp-ui-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: clamp(14px, 2.5vw, 18px) 0 0;
    padding: clamp(12px, 2.5vw, 16px) clamp(14px, 3vw, 18px);
    border-radius: 15px;
    border: 1px solid #FFE79F;
    background: #FFFAEB;
    box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.05);
    color: #222222;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.45;
    text-align: left;
    transition: box-shadow 180ms ease;
}

.otp-ui-page .otp-ui-tip:hover {
    box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.08);
}

.otp-ui-page .otp-ui-tip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-top: 0;
    line-height: 0;
}

.otp-ui-page .otp-ui-tip__icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.otp-ui-page .otp-ui-tip p {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.otp-ui-page .otp-ui-tip strong {
    color: #222222;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

/* Footer */
.otp-ui-page .otp-ui-footer.login-ui-footer,
.otp-ui-page .otp-ui-footer {
    margin: clamp(18px, 3.5vw, 28px) 0 8px;
    color: #666666;
    font-family: var(--sb-font-regular);
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: normal;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Responsive */
@media (min-width: 768px) {
    .otp-ui-page {
        padding: clamp(24px, 6vw, 70px) clamp(16px, 4vw, 25px) var(--sb-wave-clearance);
        align-items: center;
    }

    .otp-ui-page .otp-ui-container,
    .otp-ui-page .sbo-auth-panel.otp-ui-container {
        width: min(100%, 710px);
    }

    .otp-ui-page .otp-ui-inputs.sbo-otp-group,
    .otp-ui-page .otp-ui-inputs {
        gap: 16px;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .otp-ui-page .otp-ui-input,
    .otp-ui-page .otp-ui-inputs input[data-otp-digit] {
        width: 70px;
        height: 70px;
        max-height: 70px;
        aspect-ratio: auto;
        justify-self: center;
    }
}

@media (max-width: 767px) {
    /* Same mobile padding-bottom as login-ui-page */
    .otp-ui-page.sbo-auth-shell,
    .otp-ui-page.login-ui-page,
    .otp-ui-page {
        padding: 20px 14px 36px;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
    }

    .otp-ui-page .otp-ui-container,
    .otp-ui-page .sbo-auth-panel.otp-ui-container,
    .otp-ui-page .login-ui-container {
        width: min(100%, 560px);
        max-width: 560px;
    }

    .otp-ui-page .otp-ui-brand.login-ui-brand,
    .otp-ui-page .otp-ui-brand {
        margin: 0 0 18px;
    }

    .otp-ui-page .otp-ui-card.sbo-verify-card,
    .otp-ui-page .otp-ui-card {
        padding: 14px 16px 20px;
        border-radius: 22px;
    }

    .otp-ui-page .otp-ui-header {
        grid-template-columns: 48px 1fr 48px;
        min-height: 62px;
        margin: 4px 0 10px;
    }

    .otp-ui-page .otp-ui-back {
        top: auto;
        left: auto;
        width: 48px;
        height: 48px;
    }

    .otp-ui-page .otp-ui-back svg {
        width: 48px;
        height: 48px;
    }

    .otp-ui-page .otp-ui-title {
        font-size: 26px;
    }

    .otp-ui-page .otp-ui-desc {
        margin: 0 0 22px;
        gap: 4px;
        font-size: 15px;
    }

    .otp-ui-page .otp-ui-desc__phone,
    .otp-ui-page .otp-ui-desc strong {
        font-size: 22px;
    }

    .otp-ui-page .otp-ui-desc:has(+ .otp-ui-debug),
    .otp-ui-page .otp-ui-desc:has(+ .sbo-debug-code) {
        margin-bottom: 10px;
    }

    .otp-ui-page .otp-ui-debug.sbo-debug-code,
    .otp-ui-page .otp-ui-debug {
        margin: 0 0 18px;
        padding: 10px 12px;
    }

    .otp-ui-page .otp-ui-resend.sbo-verify-actions,
    .otp-ui-page .otp-ui-resend {
        margin: 18px 0 22px;
    }

    .otp-ui-page .otp-ui-card .otp-ui-help,
    .otp-ui-page .otp-ui-card a.sbo-help.otp-ui-help {
        margin-top: 20px;
    }

    .otp-ui-page .otp-ui-tip.sbo-tip,
    .otp-ui-page .otp-ui-tip {
        margin-top: 14px;
        padding: 12px 14px;
        font-size: 14px;
    }

    .otp-ui-page .otp-ui-footer {
        margin: 18px 0 8px;
        font-size: 13px;
    }

    /* OTP inputs ? compact fixed boxes, centered row */
    .otp-ui-page .otp-ui-inputs.sbo-otp-group,
    .otp-ui-page .sbo-otp-group.otp-ui-inputs,
    .otp-ui-page .otp-ui-inputs {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        grid-template-columns: none;
    }

    .otp-ui-page .otp-ui-input,
    .otp-ui-page .otp-ui-inputs input[data-otp-digit],
    .otp-ui-page .sbo-otp-group.otp-ui-inputs input[data-otp-digit] {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        aspect-ratio: auto;
        border-radius: 12px;
        font-size: 20px;
        line-height: 1;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    .otp-ui-page .otp-ui-resend__prompt,
    .otp-ui-page .otp-ui-resend__btn {
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .otp-ui-page.sbo-auth-shell,
    .otp-ui-page.login-ui-page,
    .otp-ui-page {
        padding: 20px 14px 28px;
    }

    .otp-ui-page .otp-ui-inputs.sbo-otp-group,
    .otp-ui-page .sbo-otp-group.otp-ui-inputs,
    .otp-ui-page .otp-ui-inputs {
        gap: 6px;
    }

    .otp-ui-page .otp-ui-input,
    .otp-ui-page .otp-ui-inputs input[data-otp-digit],
    .otp-ui-page .sbo-otp-group.otp-ui-inputs input[data-otp-digit] {
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 46px;
        min-height: 46px;
        max-height: 46px;
        border-radius: 10px;
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .otp-ui-page .otp-ui-card,
    .otp-ui-page .otp-ui-back,
    .otp-ui-page .otp-ui-button,
    .otp-ui-page .otp-ui-help,
    .otp-ui-page .otp-ui-input,
    .otp-ui-page .otp-ui-tip {
        transition: none;
    }
}

/* =========================================================
   Sales Book Owner Dashboard ??? Premium Mobile UI (scoped)
   Prefix: sales-dashboard-*
   ========================================================= */

body.sales-dashboard-body.sbo-dashboard-body,
body.sbo-dashboard-body.sales-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.sales-dashboard-ui.sbo-dashboard,
.sbo-dashboard.sales-dashboard-ui {
    --sd-blue: #3b82f6;
    --sd-blue-deep: #2563eb;
    --sd-blue-soft: #e8f1fe;
    --sd-coral: #ef6b6b;
    --sd-coral-deep: #e25555;
    --sd-coral-soft: #fdecec;
    --sd-orange: #f59e0b;
    --sd-orange-soft: #fff7e8;
    --sd-green: #10b981;
    --sd-green-deep: #059669;
    --sd-green-soft: #e7f8f1;
    --sd-purple: #8b5cf6;
    --sd-purple-soft: #f1eaff;
    --sd-text: #1e293b;
    --sd-muted: #8a94a6;
    --sd-line: #e8edf3;
    --sd-card: #ffffff;
    --sd-bg: transparent;
    --sd-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --sd-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --sd-radius: 22px;
    --sd-radius-sm: 14px;
    /* Type scale ??? never below 14px */
    --sd-fs-min: 14px;
    --sd-fs-body: 14px;
    --sd-fs-label: 14px;
    --sd-fs-meta: 14px;
    --sd-fs-title: 16px;
    --sd-fs-heading: 18px;
    --sd-fs-hero: 22px;
    --sd-fs-display: 28px;
    --sd-fs-btn: 14px;
    /* iPad Pro canvas ??? beat owner.css 540/720 caps */
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
    color: var(--sd-text);
    font-family: var(--sb-font-regular);
    font-size: var(--sd-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
}

.sales-dashboard-ui h1,
.sales-dashboard-ui h2,
.sales-dashboard-ui h3,
.sales-dashboard-ui strong,
.sales-dashboard-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

/* ---------- Header (match design: #36C, radius 0 0 15px 15px) ---------- */
.sales-dashboard-ui .sales-dashboard-header.sbo-dashboard-header,
.sales-dashboard-ui .sbo-dashboard-header.sales-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 0;
    padding: 14px 16px 18px;
    display: block;
    align-items: unset;
    justify-content: unset;
    gap: 0;
    border-bottom: 0;
    border-radius: 0 0 15px 15px;
    background: #36C;
    backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible;
}

.sales-dashboard-ui .sales-dashboard-header__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    overflow: visible;
}

.sales-dashboard-ui .sales-dashboard-header__left {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: relative;
    overflow: visible;
    z-index: 60;
}

.sales-dashboard-ui .sales-dashboard-header__brand.sbo-dashboard-brand,
.sales-dashboard-ui .sbo-dashboard-brand.sales-dashboard-header__brand {
    min-width: 0;
    gap: 0;
    margin: 0;
}

.sales-dashboard-ui .sales-dashboard-header__mark.sbo-dashboard-brand__icon,
.sales-dashboard-ui .sbo-dashboard-brand__icon.sales-dashboard-header__mark {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sales-dashboard-ui .sales-dashboard-header__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-header__app,
.sales-dashboard-ui .sales-dashboard-header__titles strong,
.sales-dashboard-ui .sbo-dashboard-brand strong {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-dashboard-ui .sales-dashboard-header__business,
.sales-dashboard-ui .sales-dashboard-header__titles small,
.sales-dashboard-ui .sbo-dashboard-brand small {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sales-dashboard-ui .sales-dashboard-branch.sbo-branch-switcher {
    position: relative;
    width: auto;
    max-width: 100%;
    z-index: 60;
}

.sales-dashboard-ui .sales-dashboard-branch .sbo-branch-switcher__panel,
.sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch .sbo-branch-switcher__panel,
.sales-dashboard-ui .sbo-branch-switcher__panel.sales-dashboard-branch__panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 70;
    width: min(340px, calc(100vw - 24px)) !important;
    overflow: hidden;
    border: 1px solid #E0E8FF;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(51, 102, 204, 0.18);
}

.sales-dashboard-ui .sbo-branch-switcher__panel > header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid #E0E8FF;
    background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%);
}

.sales-dashboard-ui .sbo-branch-switcher__panel > header strong {
    color: #3366CC;
    font-size: 13px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sales-dashboard-ui .sbo-branch-switcher__panel > header small {
    margin-top: 4px;
    color: #64748B;
    font-size: 14px;
    font-family: var(--sb-font-regular);
}

.sales-dashboard-ui .sbo-branch-option.sales-dashboard-branch__option,
.sales-dashboard-ui .sales-dashboard-branch__option.sbo-branch-option {
    min-height: 0;
    padding: 14px 16px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid #E8EDF5;
    background: #fff;
}

.sales-dashboard-ui .sbo-branch-option:not(:disabled):hover {
    background: #F8FAFF;
}

.sales-dashboard-ui .sbo-branch-option.is-selected {
    background: #F3F7FF;
}

.sales-dashboard-ui .sbo-branch-option.is-inactive {
    opacity: 0.78;
}

.sales-dashboard-ui .sbo-branch-option__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #3366CC;
    background: #E8F0FE;
    font-size: 0;
    line-height: 0;
}

.sales-dashboard-ui .sbo-branch-option__icon svg {
    width: 18px;
    height: 16px;
    display: block;
}

.sales-dashboard-ui .sbo-branch-option.is-selected .sbo-branch-option__icon {
    color: #fff;
    background: #3366CC;
}

.sales-dashboard-ui .sbo-branch-option__copy {
    gap: 2px;
}

.sales-dashboard-ui .sbo-branch-option__copy strong {
    color: #1e293b;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.25;
}

.sales-dashboard-ui .sbo-branch-option__copy small {
    margin-top: 2px;
    color: #64748B;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    line-height: 1.35;
}

.sales-dashboard-ui .sbo-branch-option__copy em {
    margin-top: 4px;
    color: #059669;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-style: normal;
    line-height: 1.3;
}

.sales-dashboard-ui .sbo-branch-option__copy em.is-off {
    color: #94A3B8;
}

.sales-dashboard-ui .sbo-branch-option__state {
    margin-top: 2px;
    color: #3366CC;
    font-size: 0;
    line-height: 0;
}

.sales-dashboard-ui .sbo-branch-option__state.is-check {
    display: grid;
    place-items: center;
}

.sales-dashboard-ui .sbo-branch-option__state.is-check svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sales-dashboard-ui .sbo-branch-option__state.is-off {
    padding: 4px 10px;
    border-radius: 999px;
    color: #64748B;
    background: #EEF2F7;
    font-size: 12px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1.2;
}

.sales-dashboard-ui .sbo-branch-switcher__manage {
    min-height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3366CC;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    border-top: 1px solid #E0E8FF;
    background: #F8FAFF;
}

.sales-dashboard-ui .sbo-branch-switcher__manage svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.sales-dashboard-ui .sbo-branch-switcher__manage:hover {
    background: #EFF4FF;
}

.sales-dashboard-ui .sales-dashboard-branch.sbo-branch-switcher > summary,
.sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch > summary {
    min-width: 0;
    max-width: 100%;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    gap: 6px;
    cursor: pointer;
}

.sales-dashboard-ui .sales-dashboard-branch > summary strong,
.sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch > summary strong {
    flex: 0 1 auto;
    color: #fff;
    font-family: var(--sb-font-bold);
    font-size: 20px;
    line-height: 1.2;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-dashboard-ui .sales-dashboard-branch > summary b,
.sales-dashboard-ui .sales-dashboard-branch > summary > span {
    color: #fff;
    font-size: 14px;
    line-height: 1;
    opacity: 0.95;
}

.sales-dashboard-ui .sales-dashboard-header__chevron {
    display: block;
    width: 13px;
    height: 9px;
    flex-shrink: 0;
    transition: transform 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-branch[open] .sales-dashboard-header__chevron {
    transform: rotate(180deg);
}

.sales-dashboard-ui .sales-dashboard-branch[open] > summary,
.sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch[open] > summary {
    border-color: transparent;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-header__shop-fallback {
    margin: 0;
    color: #fff;
    font-family: var(--sb-font-bold);
    font-size: 20px;
    line-height: 1.2;
}

.sales-dashboard-ui .sales-dashboard-header__sync {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
     font-family: var(--sb-font-medium);
   
}

.sales-dashboard-ui .sales-dashboard-header__sync i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.sales-dashboard-ui .sales-dashboard-header__sync.is-live i {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.sales-dashboard-ui .sales-dashboard-header__actions.sbo-dashboard-user,
.sales-dashboard-ui .sbo-dashboard-user.sales-dashboard-header__actions {
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}

.sales-dashboard-ui .sales-dashboard-header__notify {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    text-decoration: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-header__notify:hover {
    background: transparent;
    opacity: 0.85;
    transform: none;
}

.sales-dashboard-ui .sales-dashboard-header__notify svg,
.sales-dashboard-ui .sales-dashboard-header__bell {
    width: 21px;
    height: 22px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-header__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 10px;
    height: 10px;
    padding: 0;
    display: block;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
    box-shadow: none;
    font-style: normal;
    overflow: hidden;
    pointer-events: none;
}

.sales-dashboard-ui .sales-dashboard-header__profile {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-header__avatar.sbo-avatar,
.sales-dashboard-ui .sbo-avatar.sales-dashboard-header__avatar {
    width: 48px;
    height: 48px;
    color: #36C;
    background: #fff;
    font-size: 16px;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-header__menu {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 2px #36C;
    text-decoration: none;
    padding: 0;
}

.sales-dashboard-ui .sales-dashboard-header__menu-icon {
    display: block;
    width: 22px;
    height: 22px;
}

.sales-dashboard-ui .sales-dashboard-header__menu span {
    display: none;
}

.sales-dashboard-ui .sales-dashboard-header__logout {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sales-dashboard-ui .sales-dashboard-header__logout-btn.sbo-icon-button,
.sales-dashboard-ui .sbo-icon-button.sales-dashboard-header__logout-btn {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-header__logout-btn:hover {
    background: transparent;
}

.sales-dashboard-ui .sales-dashboard-header__logout:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
}

/* ---------- Content shell ??? full canvas width (no 820px column) ---------- */
.sales-dashboard-ui .sales-dashboard-content.sbo-dashboard-content,
.sales-dashboard-ui .sbo-dashboard-content.sales-dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 12px 100px !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
}

.sales-dashboard-ui .sales-dashboard-content > section,
.sales-dashboard-ui .sales-dashboard-content > .sbo-alert,
.sales-dashboard-ui .sales-dashboard-content > .sales-dashboard-alert {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sales-dashboard-ui .sales-dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0 2px;
}

.sales-dashboard-ui .sales-dashboard-section-heading h2,
.sales-dashboard-ui .sbo-section-heading h2 {
    margin: 0;
    color: var(--sd-text);
    font-size: 16px;
    
}

.sales-dashboard-ui .sbo-section-heading p {
    margin: 3px 0 0;
    color: var(--sd-muted);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-card,
.sales-dashboard-ui .sbo-sales-card.sales-dashboard-summary,
.sales-dashboard-ui .sbo-day-footer.sales-dashboard-footer,
.sales-dashboard-ui .sales-dashboard-todo,
.sales-dashboard-ui .sales-dashboard-credit,
.sales-dashboard-ui .sales-dashboard-cash {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: var(--sd-radius);
    background: var(--sd-card);
    box-shadow: var(--sd-shadow-sm);
}

/* ---------- Hero greeting ---------- */
.sales-dashboard-ui .sales-dashboard-hero.sbo-greeting,
.sales-dashboard-ui .sbo-greeting.sales-dashboard-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
    padding: 18px 16px 16px;
    border: 0;
    border-radius: 15px;
    background: #EF626C;
   
    color: #fff;
}

.sales-dashboard-ui .sales-dashboard-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.sales-dashboard-ui .sales-dashboard-hero__date {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-hero__title,
.sales-dashboard-ui .sales-dashboard-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.sales-dashboard-ui .sales-dashboard-hero__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.sales-dashboard-ui .sales-dashboard-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
}

.sales-dashboard-ui .sales-dashboard-hero__pill--day.is-open {
    color: #15803d;
    background: #fff;
}

.sales-dashboard-ui .sales-dashboard-hero__pill--day.is-closed {
    color: #9a3412;
    background: #fff7ed;
}

.sales-dashboard-ui .sales-dashboard-hero__pill--day i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.sales-dashboard-ui .sales-dashboard-hero__pill--day.is-closed i {
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.sales-dashboard-ui .sales-dashboard-hero__pill--alerts {
    color: #be6e15;
    background: #fff6e8;
}

.sales-dashboard-ui .sales-dashboard-hero__pill--alerts svg {
    width: 11px;
    height: 10px;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-hero__branch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #D45A62;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-icon svg {
    width: 20px;
    height: 18px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-copy strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-copy small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.2;
}

.sales-dashboard-ui .sales-dashboard-hero__branch-copy small span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-ui .sales-dashboard-hero__pin {
    width: 11px;
    height: 13px;
    flex-shrink: 0;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-hero__live.sbo-live,
.sales-dashboard-ui .sbo-live.sales-dashboard-hero__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    color: #15803d;
    background: #ecfdf3;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-hero__live.is-active {
    color: #15803d;
}

.sales-dashboard-ui .sales-dashboard-hero__live:not(.is-active) {
    color: #6b7280;
    background: #f3f4f6;
}

.sales-dashboard-ui .sales-dashboard-hero__live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

/* Kept for commented legacy hero stats layout */
.sales-dashboard-ui .sales-dashboard-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sales-dashboard-ui .sales-dashboard-hero__shop {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.sales-dashboard-ui .sales-dashboard-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sales-dashboard-ui .sales-dashboard-hero__stat {
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 16px rgba(90, 20, 20, 0.1);
    text-align: left;
}

.sales-dashboard-ui .sales-dashboard-hero__stat-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 12px;
}

.sales-dashboard-ui .sales-dashboard-hero__stat-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.sales-dashboard-ui .sales-dashboard-hero__stat-icon.is-blue {
    color: var(--sd-blue-deep);
    background: var(--sd-blue-soft);
}

.sales-dashboard-ui .sales-dashboard-hero__stat-icon.is-green {
    color: var(--sd-green-deep);
    background: #eefbf3;
}

.sales-dashboard-ui .sales-dashboard-hero__stat-icon.is-coral {
    color: #c2410c;
    background: #fff4e5;
}

.sales-dashboard-ui .sales-dashboard-hero__stat strong {
    display: block;
    color: var(--sd-text);
    font-size: 14px;
    line-height: 1.2;
    
}

.sales-dashboard-ui .sales-dashboard-hero__stat small {
    display: block;
    margin-top: 4px;
    color: var(--sd-muted);
    font-size: 10px;
}

/* ---------- Alerts ---------- */
.sales-dashboard-ui .sales-dashboard-alert.sbo-notice,
.sales-dashboard-ui .sbo-notice.sales-dashboard-alert {
    position: relative;
    display: block;
    margin: 0;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    background: #FEF1F2;
    box-shadow: none;
    gap: 0;
    color: #DC2626;
}

.sales-dashboard-ui .sales-dashboard-alert__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: #c45b5b;
}

.sales-dashboard-ui .sales-dashboard-alert__close:hover {
    background: rgba(212, 90, 98, 0.08);
}

.sales-dashboard-ui .sales-dashboard-alert__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 28px;
    flex-direction: row;
}

.sales-dashboard-ui .sales-dashboard-alert__icon.sbo-notice__icon,
.sales-dashboard-ui .sbo-notice__icon.sales-dashboard-alert__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fee2e2;
    color: #DC2626;
    font-size: 16px;
}

.sales-dashboard-ui .sales-dashboard-alert__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.sales-dashboard-ui .sales-dashboard-alert__main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sales-dashboard-ui .sales-dashboard-alert__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-dashboard-ui .sales-dashboard-alert__copy strong,
.sales-dashboard-ui .sbo-notice strong {
    color: #DC2626;
    font-size: 15px;
    line-height: 1.25;
}

.sales-dashboard-ui .sales-dashboard-alert__copy small,
.sales-dashboard-ui .sbo-notice small {
    margin-top: 0;
    color: #DC2626;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.85;
}

.sales-dashboard-ui .sales-dashboard-alert__cta.sbo-notice__badge,
.sales-dashboard-ui a.sbo-notice__badge.sales-dashboard-alert__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 92px;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    color: #fff;
    background: #DC2626;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    box-shadow: none;
    transition: transform 180ms ease, background 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-alert__cta:hover {
    transform: translateY(-1px);
    background: #b91c1c;
    box-shadow: none;
}

.sales-dashboard-ui .sbo-alert.sales-dashboard-alert {
    margin: 0;
    border-radius: 16px;
    padding: 12px 14px;
}

/* ---------- Credit balance ---------- */
.sales-dashboard-ui .sales-dashboard-credit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1.5px solid #f6dfb3;
    border-radius: 16px;
    background: #fffaf3;
   
}

.sales-dashboard-ui .sales-dashboard-credit.is-low {
    border-color: #f9994d;
    background: #fff7f0;
    border-top: 4px solid #f9994d;
    
}

.sales-dashboard-ui .sales-dashboard-credit__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.sales-dashboard-ui .sales-dashboard-credit__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ffe8d6;
}

.sales-dashboard-ui .sales-dashboard-credit__icon svg {
    width: 18px;
    height: 16px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-credit__copy {
    min-width: 0;
    flex: 1;
}

.sales-dashboard-ui .sales-dashboard-credit__chip {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #b45309;
    background: #ffe8bf;
    font-size: 10px;
}

.sales-dashboard-ui .sales-dashboard-credit__copy strong {
    display: block;
    color: #111827;
    font-size: 16px;
    line-height: 1.25;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-credit__copy p {
    margin: 6px 0 0;
    color: #9b3d3d;
    font-size: 14px;
    line-height: 1.35;
}

.sales-dashboard-ui .sales-dashboard-credit__copy p span {
    margin: 0 4px;
    opacity: 0.7;
}

.sales-dashboard-ui .sales-dashboard-credit__copy b {
    color: var(--sd-text);
}

.sales-dashboard-ui .sales-dashboard-credit__copy em {
    margin-left: 6px;
    color: #d97706;
    font-style: normal;
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-credit__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sales-dashboard-ui .sales-dashboard-credit__badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-credit__badge.is-urgent {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

.sales-dashboard-ui .sales-dashboard-credit__badge.is-check {
    color: #c2410c;
    background: #fff7ed;
    border-color: #fdba74;
}

.sales-dashboard-ui .sales-dashboard-credit__badge.is-handover {
    color: #a16207;
    background: #fefce8;
    border-color: #fde047;
}

.sales-dashboard-ui .sales-dashboard-credit__btn {
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 92px;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    border-radius: 10px;
    color: #fff;
    background: #f97316;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    box-shadow: none;
    transition: transform 180ms ease, background 180ms ease;
    margin-top:5px;
}

.sales-dashboard-ui .sales-dashboard-credit__btn:hover {
    transform: translateY(-1px);
    background: #ea580c;
    box-shadow: none;
}

/* ---------- Sales summary ---------- */
.sales-dashboard-ui .sales-dashboard-sales-summary {
    margin: 0;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__heading {
    margin-bottom: 5px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__heading h2 {
    color: #222222;
    font-size: 18px !important;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-transform: none;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat::before {
    display: none;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat.is-sales {
    border-radius: 15px;
    border: 1px solid #B1D2FF;
    background: #EFF7FF;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat.is-seller {
    border-radius: 15px;
    border: 1px solid #E1DAFE;
    background: #F8F4FF;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat small {
    display: block;
    margin: 0;
    color: #000;
    font-size: 16px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    
    text-transform: none;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat strong {
    display: block;
    margin: 0;
    color: #000;
    font-size: 26px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.15;
    word-break: break-word;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat > span,
.sales-dashboard-ui .sales-dashboard-sales-summary__stat-copy > span {
    display: block;
    color: #333333;
    font-size: 15px;
    line-height: 1.35;
    font-family: var(--sb-font-regular);
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat.is-sales .sales-dashboard-sales-summary__stat-icon,
.sales-dashboard-ui .sales-dashboard-sales-summary__stat.is-seller .sales-dashboard-sales-summary__stat-icon {
    background: transparent;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__stat-icon svg {
    display: block;
    width: 38px;
    height: 38px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1;
    z-index: 1;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #dbeafe;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-icon svg {
    display: block;
    width: 19px;
    height: 12px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-head strong {
    color: #222222;
    font-size: 18px;
    font-family: var(--sb-font-bold);
    font-weight: normal;

}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-head span {
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bar-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f0f4ff;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bar-meta strong {
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bar-meta span {
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    white-space: nowrap;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bar-track {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__bar-track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 320ms ease;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-foot strong {
    color: #222222;
    font-size: 20px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-sales-summary__payments-foot span {
    color: #3366CC;
    font-size: 20px;
    font-family: var(--sb-font-extrabold);
    font-weight: normal;
}

/* ---------- Cash & expenses ---------- */
.sales-dashboard-ui .sales-dashboard-cash-expenses {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__heading {
    margin-bottom: 0;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__heading h2 {
    color: #222222;
    font-size: 16px !important;
    font-family: var(--sb-font-bold);
    font-weight: normal;
  
    text-transform: none;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 0;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
    overflow: hidden;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat::before {
    display: none;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat.is-check {
    border-top: 5px solid #F9A825;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat.is-handover {
    border-top: 5px solid #00BFA5;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat.is-expense {
    border-top: 5px solid #3B71CA;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__expense {
    margin-bottom: 0;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat small {
    display: block;
    margin: 0;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat strong {
    display: block;
    margin: 0;
    color: #000000;
    font-size: 26px;
    font-family: var(--sb-font-extrabold);
    font-weight: normal;
  
    line-height: 1.15;
    word-break: break-word;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__stat > span,
.sales-dashboard-ui .sales-dashboard-cash-expenses__stat-copy > span {
    display: block;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1.35;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__badge.is-alert {
    background: #DC2626;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__badge.is-warn {
    background: #F97316;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    background: #FEF1F2;
    box-shadow: none;
    text-decoration: none;
    color: #DC2626;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-icon {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #FEE2E2;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-icon em {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-copy strong {
    color: #DC2626;
    font-size: 15px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    letter-spacing: -0.01em;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-copy small {
    color: #DC2626;
    font-size: 12px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.35;
    opacity: 0.9;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-copy > span {
    color: #DC2626;
    font-size: 12px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    opacity: 0.95;
}

.sales-dashboard-ui .sales-dashboard-cash-expenses__alert-cta {
    flex-shrink: 0;
    min-height: 34px;
    padding: 7px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #DC2626;
    background: #fff;
    color: #DC2626;
    font-size: 14px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    white-space: nowrap;
}

/* ---------- Quick actions ---------- */
.sales-dashboard-ui .sales-dashboard-quick {
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.sales-dashboard-ui .sales-dashboard-quick__scroller {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: none;
    margin: 0 -12px;
    padding: 6px 12px 10px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    scroll-padding-inline: 12px;
}

.sales-dashboard-ui .sales-dashboard-quick__scroller::-webkit-scrollbar {
    height: 4px;
}

.sales-dashboard-ui .sales-dashboard-quick__scroller::-webkit-scrollbar-track {
    background: transparent;
}

.sales-dashboard-ui .sales-dashboard-quick__scroller::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.sales-dashboard-ui .sales-dashboard-quick__chip {
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 999px;
    background: #FFF;
    color: #111827;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sales-dashboard-ui .sales-dashboard-quick__chip:hover {
    background: #f8fafc;
    border-color: #c5d0df;
    transform: translateY(-1px);
}

.sales-dashboard-ui .sales-dashboard-quick__chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.sales-dashboard-ui .sales-dashboard-quick__chip > span {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: inherit;
}

.sales-dashboard-ui .sales-dashboard-quick__chip > span svg {
    display: block;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-primary {
    border-color: #3366CC;
    background: #3366CC;
    color: #fff;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-primary:hover {
    background: #2a57b0;
    border-color: #2a57b0;
    color: #fff;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-approvals {
    border-color: #DC2626;
    color: #DC2626;
    background: #fff;
    padding-right: 12px;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-approvals:hover {
    background: #fff5f5;
    border-color: #DC2626;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-expenses {
    border-color: #F9A825;
    color: #B45309;
    background: #FFF;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-expenses:hover {
    background: #FFFBEB;
    border-color: #F9A825;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-close-day {
    border-color: #00BFA5;
    color: #0F766E;
    background: #FFF;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-close-day:hover {
    background: #F0FDFA;
    border-color: #00BFA5;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-share {
    border-color: #B1D2FF;
    color: #3366CC;
    background: #FFF;
}

.sales-dashboard-ui .sales-dashboard-quick__chip.is-share:hover {
    background: #EFF7FF;
    border-color: #B1D2FF;
}

.sales-dashboard-ui .sales-dashboard-quick__badge {
    position: static;
    min-width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1;
    box-shadow: none;
}

/* ---------- Share summary modal ? match dashboard blue theme ---------- */
.sbo-share-summary-modal[hidden] {
    display: none;
}

.sbo-share-summary-modal {
    padding: 20px;
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 1600;
    inset: 0;
}

.sbo-share-summary-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 30, 55, 0.48);
    backdrop-filter: blur(4px);
    cursor: default;
}

.sbo-share-summary-modal__dialog {
    width: min(420px, 100%);
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #E0E8FF;
    background: #fff;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22);
}

.sbo-share-summary-modal__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 10px;
}

@media (max-width: 360px) {
    .sbo-share-summary-modal__header {
        align-items: start;
    }
}

.sbo-share-summary-modal__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #3366CC;
    background: #E8F0FE;
}

.sbo-share-summary-modal__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.sbo-share-summary-modal__header > div {
    flex: 1;
    min-width: 0;
}

.sbo-share-summary-modal__header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 18px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sbo-share-summary-modal__header p {
    margin: 4px 0 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
}

.sbo-share-summary-modal__close {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.sbo-share-summary-modal__close:hover {
    background: #E8EDF3;
    color: #334155;
}

.sbo-share-summary-modal__close svg {
    width: 16px;
    height: 16px;
    display: block;
}

.sbo-share-summary-modal__body {
    padding: 0 18px 18px;
}

.sbo-share-summary-modal__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    color: #64748B;
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

.sbo-share-summary-modal__loader[hidden],
.sbo-share-summary-modal__error[hidden],
.sbo-share-summary-modal__preview[hidden],
.sbo-share-summary-modal__actions[hidden] {
    display: none !important;
}

.sbo-share-summary-modal__loader i {
    width: 18px;
    height: 18px;
    border: 2px solid #C7D2FE;
    border-top-color: #3366CC;
    border-radius: 50%;
    animation: sbo-share-spin 0.7s linear infinite;
}

@keyframes sbo-share-spin {
    to { transform: rotate(360deg); }
}

.sbo-share-summary-modal__error {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #FECACA;
    border-radius: 14px;
    background: #FEF2F2;
    color: #B91C1C;
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

.sbo-share-summary-modal__preview {
    margin: 0 0 14px;
    max-height: 260px;
    overflow: auto;
    padding: 14px;
    border: 1px solid #E0E8FF;
    border-radius: 16px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.06);
    scrollbar-width: thin;
    scrollbar-color: #C7D2FE transparent;
}

.sbo-share-summary-modal__preview::-webkit-scrollbar {
    width: 6px;
}

.sbo-share-summary-modal__preview::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.sbo-share-summary-modal__preview::-webkit-scrollbar-thumb {
    background: #C7D2FE;
    border-radius: 999px;
}

.sbo-share-summary-modal__preview::-webkit-scrollbar-thumb:hover {
    background: #A5B4FC;
}

.sbo-share-summary-modal__preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.sbo-share-summary-modal__preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 11px;
    line-height: 1;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sbo-share-summary-modal__preview-date {
    color: #8a94a6;
    font-size: 16px;
    font-family: var(--sb-font-regular);
    line-height: 1.2;
}

.sbo-share-summary-modal__preview-shop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-width: 0;
}

.sbo-share-summary-modal__preview-shop-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #3366CC;
    background: #E8F0FE;
}

.sbo-share-summary-modal__preview-shop-icon svg {
    display: block;
}

.sbo-share-summary-modal__preview-shop strong {
    min-width: 0;
    color: #1e293b;
    font-size: 18px;
    line-height: 1.3;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbo-share-summary-modal__preview-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #D9E6FF;
    background: linear-gradient(135deg, #3366CC 0%, #4B7BE5 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(51, 102, 204, 0.22);
}

.sbo-share-summary-modal__preview-hero small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-family: var(--sb-font-regular);
    line-height: 1.2;
}

.sbo-share-summary-modal__preview-hero strong {
    color: #fff;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sbo-share-summary-modal__preview-hero span {
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    font-family: var(--sb-font-regular);
    line-height: 1.3;
}

.sbo-share-summary-modal__preview-pays {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.sbo-share-summary-modal__preview-pays[hidden] {
    display: none !important;
}

.sbo-share-summary-modal__preview-pay {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 9px 8px;
    border-radius: 12px;
    border: 1px solid #E0E8FF;
    background: #fff;
}

.sbo-share-summary-modal__preview-pay small {
    color: #8a94a6;
    font-size: 16px;
    line-height: 1.2;
    font-family: var(--sb-font-regular);
}

@media (min-width: 768px) {
    .sbo-share-summary-modal__preview-pay small {
        font-size: 16px;
    }
}

.sbo-share-summary-modal__preview-pay b {
    color: #1e293b;
    font-size: 16px;
    line-height: 1.25;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .sbo-share-summary-modal__preview-pay b {
        font-size: 18px;
    }
}

.sbo-share-summary-modal__preview-staff {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbo-share-summary-modal__preview-staff[hidden] {
    display: none !important;
}

.sbo-share-summary-modal__preview-staff-label {
    color: #222;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .sbo-share-summary-modal__preview-staff-label {
        font-size: 18px;
    }
}

.sbo-share-summary-modal__preview-staff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbo-share-summary-modal__preview-staff-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #E8EDF5;
    background: #fff;
}

.sbo-share-summary-modal__preview-staff-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 11px;
    line-height: 1;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sbo-share-summary-modal__preview-staff-list li > span:last-child {
    min-width: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
    font-family: var(--sb-font-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbo-share-summary-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sbo-share-summary-modal__action {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E0E8FF;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (max-width: 360px) {
    .sbo-share-summary-modal__action {
        align-items: start;
    }
}

.sbo-share-summary-modal__action:hover {
    background: #F8FAFF;
    border-color: #C7D2FE;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.1);
    transform: translateY(-1px);
}

.sbo-share-summary-modal__action-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.sbo-share-summary-modal__action.is-whatsapp .sbo-share-summary-modal__action-icon {
    background: #E7F8F1;
}

.sbo-share-summary-modal__action.is-email .sbo-share-summary-modal__action-icon {
    color: #3366CC;
    background: #E8F0FE;
}

.sbo-share-summary-modal__action.is-copy .sbo-share-summary-modal__action-icon {
    color: #D97706;
    background: #FFF7E8;
}

.sbo-share-summary-modal__action span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sbo-share-summary-modal__action strong {
    color: #1e293b;
    font-size: 18px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

@media (min-width: 768px) {
    .sbo-share-summary-modal__action strong {
        font-size: 18px;
    }
}

.sbo-share-summary-modal__action small {
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px;
}

@media (min-width: 768px) {
    .sbo-share-summary-modal__action small {
        font-size: 16px;
    }
}

/* ---------- Customers to call today ---------- */
.sales-dashboard-ui .sales-dashboard-callouts {
    margin: 0;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-callouts__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
}

.sales-dashboard-ui .sales-dashboard-callouts__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #7C3AED;
    background: #EDE9FE;
}

.sales-dashboard-ui .sales-dashboard-callouts__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-callouts__titles {
    flex: 1;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-callouts__titles h2 {
    margin: 0;
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    
}

.sales-dashboard-ui .sales-dashboard-callouts__titles p {
    margin: 0px 0 0;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.35;
}

.sales-dashboard-ui .sales-dashboard-callouts__count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #7C3AED;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-callouts__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-callout-card {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #DADADA;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-callout-card__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-callout-card__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #A77AF9 0%, #A865F8 100%);
    color: #fff;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-callout-card__copy {
    flex: 1;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-callout-card__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sales-dashboard-ui .sales-dashboard-callout-card__name-row strong {
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-callout-card__name-row span {
    padding: 5px 10px;
    border-radius: 30px;
    background: #7B39ED;
    color: #fff;
    font-size: 12px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1.2;
}

.sales-dashboard-ui .sales-dashboard-callout-card__visit,
.sales-dashboard-ui .sales-dashboard-callout-card__meta {
    margin: 4px 0 0;
    color: #7F7F7F;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.4;
}

.sales-dashboard-ui .sales-dashboard-callout-card__visit b {
    color: #0f172a;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-callout-card__meta b {
    color: #3366CC;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-callout-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #E00E12;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-callout-card__status.is-overdue {
    color: #E00E12;
}

.sales-dashboard-ui .sales-dashboard-callout-card__status svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-callout-card__btn svg {
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

.sales-dashboard-ui .sales-dashboard-callout-card__profile svg {
    width: 18px;
    height: 15px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-callout-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    margin: 12px -14px 0;
    padding: 12px 14px 0;
    border-top: 1px solid #E8EDF3;
}

.sales-dashboard-ui .sales-dashboard-callout-card__btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-callout-card__btn {
        font-size: 18px;
    }
}

.sales-dashboard-ui .sales-dashboard-callout-card__btn.is-call {
    background: #EF626C;
    color: #fff;
    border: 0;
}

.sales-dashboard-ui .sales-dashboard-callout-card__btn.is-whatsapp {
    background: #FFF;
    color: #16A34A;
    border-radius: 6px;
    border: 1px solid #4BC853;
}

.sales-dashboard-ui .sales-dashboard-callout-card__btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.sales-dashboard-ui .sales-dashboard-callout-card__profile {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #E0E8FF;
    border-radius: 10px;
    color: #64748b;
    background: #fff;
    text-decoration: none;
}

.sales-dashboard-ui .sales-dashboard-callouts__empty {
    padding: 22px 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    text-align: center;
}

.sales-dashboard-ui .sales-dashboard-callouts__empty strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-callouts__empty p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-callouts__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #36C;
    background: #FFF;
    color: #3366CC;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-decoration: none;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-callouts__footer {
        font-size: 18px;
    }
}

.sales-dashboard-ui .sales-dashboard-callouts__footer svg {
    flex-shrink: 0;
    display: block;
}
/* ---------- Expense book ---------- */
.sales-dashboard-ui .sales-dashboard-expense-book {
    margin: 0;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-expense-book__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
}

.sales-dashboard-ui .sales-dashboard-expense-book__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #FFE4E6;
}

.sales-dashboard-ui .sales-dashboard-expense-book__icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-expense-book__titles {
    flex: 1;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-expense-book__titles h2 {
    margin: 0;
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-expense-book__titles p {
    margin: 0;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.35;
}

.sales-dashboard-ui .sales-dashboard-expense-book__badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #F97316;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    white-space: nowrap;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-expense-book__panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-expense-book__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-expense-card {
    padding: 14px;
    border-radius: 15px;
    border: 1px solid #F3E8C8;
    background: #FFFDF8;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-expense-card.is-busy {
    opacity: 0.7;
    pointer-events: none;
}

.sales-dashboard-ui .sales-dashboard-expense-card__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #FEF3C7;
}

.sales-dashboard-ui .sales-dashboard-expense-card__icon svg {
    width: 17px;
    height: 12px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-expense-card__copy {
    flex: 1;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-expense-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__title-row strong {
    color: #0f172a;
    font-size: 15px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.3;
}

.sales-dashboard-ui .sales-dashboard-expense-card__title-row b {
    color: #B45309;
    font-size: 15px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    white-space: nowrap;
    line-height: 1.3;
}

.sales-dashboard-ui .sales-dashboard-expense-card__copy > p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.4;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags span svg {
    flex-shrink: 0;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags .is-photo svg {
    width: 11px;
    height: 9px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags .is-no-photo svg {
    width: 11px;
    height: 9px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags .is-needs svg {
    width: 9px;
    height: 9px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags .is-photo {
    color: #0F766E;
    background: #CCFBF1;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags .is-no-photo {
    color: #DC2626;
    background: #FEE2E2;
}

.sales-dashboard-ui .sales-dashboard-expense-card__tags .is-needs {
    color: #B45309;
    background: #FEF3C7;
}

.sales-dashboard-ui .sales-dashboard-expense-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.sales-dashboard-ui .sales-dashboard-expense-card__actions.has-ask {
    grid-template-columns: 1fr 1fr auto;
}

.sales-dashboard-ui .sales-dashboard-expense-card__btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    cursor: pointer;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-expense-card__btn svg {
    display: block;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-expense-card__btn.is-approve {
    border: 0;
    background: #16A34A;
    color: #fff;
}

.sales-dashboard-ui .sales-dashboard-expense-card__btn.is-reject {
    border: 1px solid #F87171;
    background: #FFF;
    color: #DC2626;
}

.sales-dashboard-ui .sales-dashboard-expense-card__btn.is-ask {
    border: 1px solid #E2E8F0;
    background: #FFF;
    color: #64748B;
    white-space: nowrap;
    padding: 0 12px;
}

.sales-dashboard-ui .sales-dashboard-expense-book__empty {
    padding: 22px 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    text-align: center;
}

.sales-dashboard-ui .sales-dashboard-expense-book__empty strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-expense-book__empty p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-expense-book__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #36C;
    background: #FFF;
    color: #3366CC;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-decoration: none;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-expense-book__footer {
        font-size: 18px;
    }
}

.sales-dashboard-ui .sales-dashboard-expense-book__footer svg {
    flex-shrink: 0;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-expense-book__toast {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-expense-book__toast.is-success {
    background: #ECFDF5;
    color: #047857;
}

.sales-dashboard-ui .sales-dashboard-expense-book__toast.is-error {
    background: #FEF2F2;
    color: #B91C1C;
}

/* ---------- Cash handover ---------- */
.sales-dashboard-ui .sales-dashboard-handovers {
    margin: 0;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-handovers__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
}

.sales-dashboard-ui .sales-dashboard-handovers__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #EFF6FF;
}

.sales-dashboard-ui .sales-dashboard-handovers__icon svg {
    width: 19px;
    height: 12px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-handovers__titles {
    flex: 1;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-handovers__titles h2 {
    margin: 0;
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-handovers__titles p {
    margin: 0;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.35;
}

.sales-dashboard-ui .sales-dashboard-handovers__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3366CC;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-handovers__all svg {
    width: 6px;
    height: 10px;
    display: block;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-handovers__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-handover-card {
    padding: 14px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-handover-card.is-confirmed {
    border: 1px solid #A7F3D0;
}

.sales-dashboard-ui .sales-dashboard-handover-card.is-pending {
    border: 1px solid #FDE68A;
}

.sales-dashboard-ui .sales-dashboard-handover-card__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-handover-card__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-handover-card__avatar.is-teal {
    background: #0F766E;
}

.sales-dashboard-ui .sales-dashboard-handover-card__avatar.is-navy {
    background: #3366CC;
}

.sales-dashboard-ui .sales-dashboard-handover-card__copy {
    flex: 1;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-handover-card__copy strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-handover-card__copy > p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.4;
}

.sales-dashboard-ui .sales-dashboard-handover-card__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-handover-card__status svg {
    flex-shrink: 0;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-handover-card__status.is-confirmed svg {
    width: 9px;
    height: 10px;
}

.sales-dashboard-ui .sales-dashboard-handover-card__status.is-pending svg {
    width: 9px;
    height: 9px;
}

.sales-dashboard-ui .sales-dashboard-handover-card__status.is-confirmed {
    color: #059669;
    background: #D1FAE5;
    border: 1px solid #6EE7B7;
}

.sales-dashboard-ui .sales-dashboard-handover-card__status.is-pending {
    color: #D87504;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
}

.sales-dashboard-ui .sales-dashboard-handover-card__amount {
    text-align: right;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-handover-card__amount strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.3;
}

.sales-dashboard-ui .sales-dashboard-handover-card__amount em {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 8px;
    color: #059669;
    font-size: 14px;
    font-style: normal;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-handover-card__amount em svg {
    width: 10px;
    height: 8px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-handover-card__confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    background: #3366CC;
    color: #fff;
    font-size: 14px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-handovers__empty {
    padding: 22px 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    text-align: center;
}

.sales-dashboard-ui .sales-dashboard-handovers__empty strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-handovers__empty p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-handovers__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #36C;
    background: #FFF;
}

.sales-dashboard-ui .sales-dashboard-handovers__total span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-handovers__total span {
        font-size: 18px;
    }
}

.sales-dashboard-ui .sales-dashboard-handovers__total span svg {
    width: 19px;
    height: 12px;
    display: block;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-handovers__total strong {
    color: #3366CC;
    font-size: 18px;
    font-family: var(--sb-font-extrabold);
    font-weight: normal;
}

/* ---------- Who sold what today ---------- */
.sales-dashboard-ui .sales-dashboard-who-sold {
    margin: 0;
    padding: 0;
}

.sales-dashboard-ui .sales-dashboard-who-sold__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 5px;
}

.sales-dashboard-ui .sales-dashboard-who-sold__head h2 {
    margin: 0;
    color: #222222;
    font-size: clamp(16px, 4.2vw, 18px);
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-who-sold__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3366CC;
    font-size: clamp(15px, 4vw, 17px);
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-who-sold__all svg {
    width: 6px;
    height: 10px;
    display: block;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-who-sold__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-who-sold__card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-who-sold__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: #fff;
    background: #3366CC;
    border: none;
    font-size: 14px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    letter-spacing: 0.02em;
}

.sales-dashboard-ui .sales-dashboard-who-sold__avatar.is-teal {
    color: #fff;
    background: #3366CC;
    border-color: transparent;
}

.sales-dashboard-ui .sales-dashboard-who-sold__avatar.is-navy {
    color: #fff;
    background: #3366CC;
    border-color: transparent;
}

.sales-dashboard-ui .sales-dashboard-who-sold__avatar.is-mint {
    color: #fff;
    background: #3366CC;
    border-color: transparent;
}

.sales-dashboard-ui .sales-dashboard-who-sold__copy {
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-who-sold__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-who-sold__name strong {
    color: #0f172a;
    font-size: clamp(15px, 4.1vw, 17px);
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-ui .sales-dashboard-who-sold__star {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-who-sold__copy p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: clamp(14px, 3.8vw, 16px);
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.4;
}

.sales-dashboard-ui .sales-dashboard-who-sold__commission {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    min-height: 26px;
    padding: 0 10px;
    
    
    border-radius: 30px;
border: 1px solid #A6EFCC;
background: #ECFDF5;
    color: #059669;
    font-size: clamp(13px, 3.6vw, 15px);
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-who-sold__amount {
    color: #3366CC;
    font-size: clamp(16px, 4.5vw, 20px);
    font-family: var(--sb-font-extrabold);
    font-weight: normal;
    white-space: nowrap;
    text-align: right;
    line-height: 1.2;
}

.sales-dashboard-ui .sales-dashboard-who-sold__empty {
    padding: 22px 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    text-align: center;
}

.sales-dashboard-ui .sales-dashboard-who-sold__empty strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-who-sold__empty p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

@media (max-width: 420px) {
    .sales-dashboard-ui .sales-dashboard-who-sold__card {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas:
            "avatar copy"
            "avatar amount";
        align-items: start;
    }

    .sales-dashboard-ui .sales-dashboard-who-sold__avatar {
        grid-area: avatar;
        width: 44px;
        height: 44px;
    }

    .sales-dashboard-ui .sales-dashboard-who-sold__copy {
        grid-area: copy;
    }

    .sales-dashboard-ui .sales-dashboard-who-sold__amount {
        grid-area: amount;
        margin-top: 4px;
        font-size: clamp(16px, 4.5vw, 18px);
        text-align: left;
    }
}

/* ---------- Recent sales + day end ---------- */
.sales-dashboard-ui .sales-dashboard-recent-sales {
    margin: 0;
    padding: 0;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 5px;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__head h2 {
    margin: 0;
    color: #222222;
    font-size: clamp(16px, 4.2vw, 18px);
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3366CC;
    font-size: clamp(15px, 4vw, 17px);
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__all svg {
    width: 6px;
    height: 10px;
    display: block;
    flex-shrink: 0;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
    text-decoration: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__row:hover {
    border-color: #c9d6f5;
    background: #fbfcff;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__row:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: #fff;
    background: #3366CC;
    border: none;
    font-size: 15px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__avatar.is-teal {
    color: #fff;
    background: #3366CC;
    border-color: transparent;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__avatar.is-navy {
    color: #fff;
    background: #3366CC;
    border-color: transparent;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__avatar.is-green {
    color: #fff;
    background: #3366CC;
    border-color: transparent;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__copy {
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__name {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-recent-sales__name {
        font-size: 18px;
    }
}

.sales-dashboard-ui .sales-dashboard-recent-sales__meta {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: clamp(14px, 3.8vw, 16px);
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__meta time {
    color: inherit;
    font: inherit;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 30px;
    border: 1px solid transparent;
    font-size: 14px;
    font-style: normal;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-recent-sales__pill {
        font-size: 16px;
    }
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-cash {
    color: #0F766E;
    background: #CCFBF1;
    border-color: #99F6E4;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-mpesa {
    color: #3366CC;
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-card {
    color: #7C3AED;
    background: #F5F3FF;
    border-color: #DDD6FE;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-other {
    color: #475569;
    background: #F1F5F9;
    border-color: #E2E8F0;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-status-synced {
    color: #059669;
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-status-edited {
    color: #D87504;
    background: #FFF7ED;
    border-color: #FDBA74;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__pill.is-status-voided {
    color: #DC2626;
    background: #FEF2F2;
    border-color: #FECACA;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__amount {
    color: #3366CC;
    font-size: clamp(16px, 4.5vw, 20px);
    font-family: var(--sb-font-extrabold);
    font-weight: normal;
    white-space: nowrap;
    text-align: right;
    line-height: 1.2;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__row.is-voided .sales-dashboard-recent-sales__amount {
    color: #93C5FD;
    font-family: var(--sb-font-extrabold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__empty {
    padding: 22px 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    text-align: center;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__empty strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-recent-sales__empty p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-day-end {
    display: grid;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0 0 8px;
}

.sales-dashboard-ui .sales-dashboard-day-end__credits {
    display: block;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #E0E8FF;
    background: #FFF;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-day-end__credits-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 5px;
}

.sales-dashboard-ui .sales-dashboard-day-end__credits-head h3 {
    margin: 0;
    color: #222222;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-day-end__topup {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #36C;
    border-radius: 8px;
    background: #FFF;
    color: #3366CC;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

@media (max-width: 360px) {
    .sales-dashboard-ui .sales-dashboard-day-end__credit-row {
        align-items: start;
    }
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #FFFAE6;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-icon.is-sms svg {
    width: 14px;
    height: 16px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-icon.is-wa {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-icon.is-wa svg {
    width: 32px;
    height: 32px;
    display: block;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-copy {
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-copy strong {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1.3;
}

.sales-dashboard-ui .sales-dashboard-day-end__soon {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #EDE9FE;
    color: #7B39ED;
    font-size: 14px;
    font-style: normal;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-copy p {
    margin: 4px 0 0;
    color: #7F7F7F;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    line-height: 1.4;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-copy p b {
    color: #D27204;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-row:not(.is-low) .sales-dashboard-day-end__credit-copy p b {
    color: #0f172a;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #D27204;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
    white-space: nowrap;
    line-height: 1;
}

.sales-dashboard-ui .sales-dashboard-day-end__credit-warn svg {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

/* Legacy compact credits selectors kept for reference compatibility */
.sales-dashboard-ui .sales-dashboard-day-end__bolt {
    display: none;
}

.sales-dashboard-ui .sales-dashboard-day-end__balances {
    display: none;
}

.sales-dashboard-ui .sales-dashboard-day-end__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 15px;
    background: #EF626C;
    color: #fff;
    font-size: 16px;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    cursor: pointer;
    box-shadow: none;
}

@media (min-width: 768px) {
    .sales-dashboard-ui .sales-dashboard-day-end__close {
        font-size: 18px;
    }
}

.sales-dashboard-ui .sales-dashboard-day-end__close:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.sales-dashboard-ui .sales-dashboard-day-end__note {
    margin: 0;
    color: #666666;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 420px) {
    .sales-dashboard-ui .sales-dashboard-recent-sales__row {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas:
            "avatar copy"
            "avatar amount";
        align-items: start;
        gap: 10px 12px;
    }

    .sales-dashboard-ui .sales-dashboard-recent-sales__avatar {
        grid-area: avatar;
        width: 44px;
        height: 44px;
    }

    .sales-dashboard-ui .sales-dashboard-recent-sales__copy {
        grid-area: copy;
    }

    .sales-dashboard-ui .sales-dashboard-recent-sales__amount {
        grid-area: amount;
        margin-top: 2px;
        font-size: clamp(16px, 4.5vw, 18px);
        text-align: left;
    }
}

/* ---------- Things to do ---------- */
.sales-dashboard-ui .sales-dashboard-todo {
    padding: 14px 16px 16px;
}

.sales-dashboard-ui .sales-dashboard-todo__head {
    margin-bottom: 12px;
}

.sales-dashboard-ui .sales-dashboard-todo__head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sales-dashboard-ui .sales-dashboard-todo__count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: #ef4444;
    font: 11px var(--sb-font-bold);
    font-style: normal;
}

.sales-dashboard-ui .sales-dashboard-todo__link {
    color: var(--sd-blue);
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-todo__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.sales-dashboard-ui .sales-dashboard-todo__row strong {
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-todo__pill {
    padding: 5px 10px;
    border-radius: 999px;
    color: #047857;
    background: var(--sd-green-soft);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-todo__pill.is-overdue {
    color: #b91c1c;
    background: var(--sd-coral-soft);
}

.sales-dashboard-ui .sales-dashboard-todo__cta {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, #f07878 0%, #e25555 100%);
    text-decoration: none;
    font: 14px var(--sb-font-bold);
    box-shadow: 0 8px 18px rgba(226, 85, 85, 0.24);
    transition: transform 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-todo__cta:hover {
    transform: translateY(-1px);
}

/* ---------- Sales summary ---------- */
.sales-dashboard-ui .sales-dashboard-summary.sbo-sales-card,
.sales-dashboard-ui .sbo-sales-card.sales-dashboard-summary {
    margin: 0;
    overflow: hidden;
    padding: 14px 0 0;
}

.sales-dashboard-ui .sales-dashboard-summary__head {
    padding: 0 16px;
}

.sales-dashboard-ui .sales-dashboard-summary__tabs {
    margin: 0 16px 12px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: 999px;
    background: #eef2f7;
}

.sales-dashboard-ui .sales-dashboard-summary__tab {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    color: var(--sd-muted);
    background: transparent;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-summary__tab.is-active {
    color: #fff;
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.28);
    font:  var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-summary__panel {
    padding: 0 0 14px;
}

.sales-dashboard-ui .sales-dashboard-summary__panel[hidden] {
    display: none !important;
}

.sales-dashboard-ui .sales-dashboard-summary__top.sbo-sales-card__top,
.sales-dashboard-ui .sbo-sales-card__top.sales-dashboard-summary__top {
    padding: 4px 16px 14px;
}

.sales-dashboard-ui .sales-dashboard-summary__top span {
    color: var(--sd-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sales-dashboard-ui .sales-dashboard-summary__top strong {
    margin: 4px 0;
    color: var(--sd-text);
    font-size: 28px;
    letter-spacing: -0.03em;
}

.sales-dashboard-ui .sales-dashboard-summary__top small {
    color: var(--sd-muted);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-progress.sbo-payment-bars,
.sales-dashboard-ui .sbo-payment-bars.sales-dashboard-progress {
    margin: 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--sd-line);
    border-radius: 16px;
    background: #f8fafc;
}

.sales-dashboard-ui .sales-dashboard-progress__row.sbo-payment-row,
.sales-dashboard-ui .sbo-payment-row.sales-dashboard-progress__row {
    grid-template-columns: 52px 1fr 88px;
    gap: 10px;
    margin: 9px 0;
    font-size: 11px;
    color: var(--sd-muted);
}

.sales-dashboard-ui .sales-dashboard-progress__row > div {
    height: 7px;
    border-radius: 999px;
    background: #e5eaf1;
    overflow: hidden;
}

.sales-dashboard-ui .sales-dashboard-progress__row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 220ms ease;
}

.sales-dashboard-ui .sales-dashboard-progress__row strong {
    color: var(--sd-text);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-metrics.sbo-metric-grid,
.sales-dashboard-ui .sbo-metric-grid.sales-dashboard-metrics {
    margin: 12px 12px 0;
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-metrics__card.sbo-metric-card,
.sales-dashboard-ui .sbo-metric-card.sales-dashboard-metrics__card {
    padding: 14px;
    border: 1px solid var(--sd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-metrics__card:hover {
    transform: translateY(-1px);
    box-shadow: var(--sd-shadow-sm);
}

.sales-dashboard-ui .sales-dashboard-metrics__card small {
    font-size: 10px;
}

.sales-dashboard-ui .sales-dashboard-metrics__card strong {
    margin: 8px 0 4px;
    font-size: 18px;
}

.sales-dashboard-ui .sales-dashboard-metrics__card em {
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-summary__panel[data-summary-panel="team"] {
    padding: 0 12px 12px;
}

/* ---------- Cash & expenses ---------- */
.sales-dashboard-ui .sales-dashboard-cash {
    padding: 14px 16px 16px;
}

.sales-dashboard-ui .sales-dashboard-cash__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-cash__item {
    padding: 14px 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid var(--sd-line);
}

.sales-dashboard-ui .sales-dashboard-cash__item small {
    display: block;
    color: var(--sd-muted);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-cash__item strong {
    display: block;
    margin-top: 6px;
    color: var(--sd-text);
    font-size: 16px;
    
}

.sales-dashboard-ui .sales-dashboard-cash__item.is-cash {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.sales-dashboard-ui .sales-dashboard-cash__item.is-handover {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
}

.sales-dashboard-ui .sales-dashboard-cash__item.is-expense {
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
    border-color: #fecdd3;
}

.sales-dashboard-ui .sales-dashboard-cash__item.is-pending {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
}

.sales-dashboard-ui .sales-dashboard-cash__badge {
    display: inline-flex;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--sd-blue-deep);
    background: rgba(255, 255, 255, 0.8);
    font-size: 10px;
}

.sales-dashboard-ui .sales-dashboard-cash__link {
    display: inline-flex;
    margin-top: 8px;
    color: var(--sd-purple);
    text-decoration: none;
    font: 11px var(--sb-font-semibold);
}

/* ---------- Sections / list cards ---------- */
.sales-dashboard-ui .sales-dashboard-section.sbo-section,
.sales-dashboard-ui .sbo-section.sales-dashboard-section {
    margin: 0;
}

.sales-dashboard-ui .sales-dashboard-section-heading.sbo-section-heading,
.sales-dashboard-ui .sbo-section-heading.sales-dashboard-section-heading {
    margin-bottom: 10px;
    align-items: center;
}

.sales-dashboard-ui .sales-dashboard-count.sbo-count-badge,
.sales-dashboard-ui .sbo-count-badge.sales-dashboard-count {
    min-width: 28px;
    height: 24px;
    border-radius: 999px;
    color: #6d28d9;
    background: var(--sd-purple-soft);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-count.sbo-count-badge--mint {
    color: #047857;
    background: var(--sd-green-soft);
}

.sales-dashboard-ui .sales-dashboard-section-total.sbo-section-total,
.sales-dashboard-ui .sbo-section-total.sales-dashboard-section-total {
    color: #d97706;
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-list.sbo-list,
.sales-dashboard-ui .sbo-list.sales-dashboard-list {
    gap: 10px;
}

.sales-dashboard-ui .sales-dashboard-customer.sbo-list-card,
.sales-dashboard-ui .sbo-list-card.sales-dashboard-customer {
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid var(--sd-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--sd-shadow-sm);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-customer:hover {
    transform: translateY(-1px);
    box-shadow: var(--sd-shadow);
}

.sales-dashboard-ui .sales-dashboard-customer__avatar.sbo-list-avatar,
.sales-dashboard-ui .sbo-list-avatar.sales-dashboard-customer__avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-customer__main strong,
.sales-dashboard-ui .sbo-list-main strong {
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-customer__main small,
.sales-dashboard-ui .sbo-list-main small {
    margin-top: 3px;
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-customer__follow {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--sd-blue-deep);
    background: var(--sd-blue-soft);
    font: 10px var(--sb-font-semibold);
    font-style: normal;
    width: fit-content;
}

.sales-dashboard-ui .sales-dashboard-customer__value strong,
.sales-dashboard-ui .sbo-list-value strong {
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-customer__value span,
.sales-dashboard-ui .sbo-list-value span {
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #b45309;
    background: var(--sd-orange-soft);
    font-size: 10px;
}

.sales-dashboard-ui .sales-dashboard-customer__action {
    margin-top: 6px;
    color: var(--sd-blue);
    text-decoration: none;
    font: 11px var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-customer__status.sbo-status-pill,
.sales-dashboard-ui .sbo-status-pill.sales-dashboard-customer__status {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
}

.sales-dashboard-ui .sbo-empty {
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed #d7dee8;
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

/* ---------- Sales history ---------- */
.sales-dashboard-ui .sales-dashboard-history {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--sd-line);
    background: #fff;
    box-shadow: var(--sd-shadow-sm);
    gap: 0;
}

.sales-dashboard-ui .sales-dashboard-history__row.sbo-sale-row,
.sales-dashboard-ui .sbo-sale-row.sales-dashboard-history__row {
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f6;
    background: transparent;
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-history__row:last-child {
    border-bottom: 0;
}

.sales-dashboard-ui .sales-dashboard-history__id {
    color: var(--sd-muted);
    font-size: 11px;
}

.sales-dashboard-ui .sales-dashboard-history__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sales-dashboard-ui .sales-dashboard-history__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--sd-blue-deep);
    background: var(--sd-blue-soft);
    font: 12px var(--sb-font-bold);
}

.sales-dashboard-ui .sales-dashboard-history__main > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sales-dashboard-ui .sales-dashboard-history__main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.sales-dashboard-ui .sales-dashboard-history__main small {
    margin-top: 2px;
    color: var(--sd-muted);
    font-size: 10px;
}

.sales-dashboard-ui .sales-dashboard-history__amount {
    color: var(--sd-text);
    font-size: 12px;
}

.sales-dashboard-ui .sales-dashboard-history__pay,
.sales-dashboard-ui .sbo-sale-row em.sales-dashboard-history__pay {
    padding: 5px 8px;
    border-radius: 999px;
    color: #047857;
    background: var(--sd-green-soft);
    font-size: 10px;
    font-style: normal;
}

/* ---------- Footer / Close day ---------- */
.sales-dashboard-ui .sales-dashboard-footer.sbo-day-footer,
.sales-dashboard-ui .sbo-day-footer.sales-dashboard-footer {
    margin: 0;
    padding: 16px;
    gap: 12px;
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
}

.sales-dashboard-ui .sales-dashboard-footer__topup.sbo-day-footer__topup,
.sales-dashboard-ui .sbo-day-footer__topup.sales-dashboard-footer__topup {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.24);
}

.sales-dashboard-ui .sales-dashboard-footer__close.sbo-day-footer__close,
.sales-dashboard-ui .sbo-day-footer__close.sales-dashboard-footer__close {
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
    font: 16px var(--sb-font-bold);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.sales-dashboard-ui .sales-dashboard-footer__close:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34);
}

.sales-dashboard-ui .sales-dashboard-footer__close:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sales-dashboard-ui .sales-dashboard-footer__note {
    color: var(--sd-muted);
    font-size: 12px;
}

/* ---------- FAB ---------- */
.sales-dashboard-ui .sales-dashboard-fab {
    position: fixed;
    left: 50%;
    bottom: 78px;
    z-index: 45;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.38), 0 0 0 6px rgba(59, 130, 246, 0.12);
    transition: transform 200ms ease, box-shadow 200ms ease;
    animation: sales-dashboard-fab-float 2.8s ease-in-out infinite;
}

.sales-dashboard-ui .sales-dashboard-fab span {
    font-size: 30px;
    line-height: 1;
    margin-top: -2px;
}

.sales-dashboard-ui .sales-dashboard-fab:hover {
    transform: translateX(-50%) translateY(-2px) scale(1.04);
    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.44), 0 0 0 8px rgba(59, 130, 246, 0.14);
}

@keyframes sales-dashboard-fab-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

/* ---------- Bottom navigation ---------- */
.sales-dashboard-ui .sbo-bottom-nav {
    height: 72px;
    padding: 10px 6px 12px;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
}

.sales-dashboard-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.sales-dashboard-ui .sbo-bottom-nav a span,
.sales-dashboard-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 11px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.sales-dashboard-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.sales-dashboard-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.sales-dashboard-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.sales-dashboard-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.sales-dashboard-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.sales-dashboard-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.sales-dashboard-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.sales-dashboard-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.sales-dashboard-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    font-family: var(--sb-font-semibold);
}

/* ---------- Typography ??? min 14px, screen-scaled ---------- */
.sales-dashboard-ui,
.sales-dashboard-ui p,
.sales-dashboard-ui span,
.sales-dashboard-ui small,
.sales-dashboard-ui label,
.sales-dashboard-ui a,
.sales-dashboard-ui button,
.sales-dashboard-ui input,
.sales-dashboard-ui select,
.sales-dashboard-ui textarea,
.sales-dashboard-ui em,
.sales-dashboard-ui i,
.sales-dashboard-ui b,
.sales-dashboard-ui strong,
.sales-dashboard-ui li,
.sales-dashboard-ui td,
.sales-dashboard-ui th,
.sales-dashboard-ui summary {
    font-size: max(14px, 1em);
}

.sales-dashboard-ui .sales-dashboard-header__titles strong,
.sales-dashboard-ui .sbo-dashboard-brand strong.sales-dashboard-header__app {
    font-size: 14px;
}

.sales-dashboard-ui .sales-dashboard-header__titles small,
.sales-dashboard-ui .sbo-dashboard-brand small {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-branch > summary strong,
.sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch > summary strong {
    font-size: 20px;
}

.sales-dashboard-ui .sales-dashboard-header__badge {
    font: var(--sd-fs-min)/1 var(--sb-font-bold);
    font-style: normal;
}

.sales-dashboard-ui .sales-dashboard-header__avatar.sbo-avatar,
.sales-dashboard-ui .sbo-avatar {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-section-heading h2,
.sales-dashboard-ui .sbo-section-heading h2 {
    font-size: var(--sd-fs-heading);
}

.sales-dashboard-ui .sbo-section-heading p {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-hero__date {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-hero__title,
.sales-dashboard-ui .sales-dashboard-hero h1,
.sales-dashboard-ui .sbo-greeting h1 {
    font-size: var(--sd-fs-hero);
}

.sales-dashboard-ui .sales-dashboard-hero__shop {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-hero__pill {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-hero__branch-copy strong {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-hero__branch-copy small {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-hero__live.sbo-live,
.sales-dashboard-ui .sales-dashboard-hero .sbo-live.sales-dashboard-hero__live {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-hero__stat strong {
    font-size: var(--sd-fs-title);
}

.sales-dashboard-ui .sales-dashboard-hero__stat small {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-alert__copy strong,
.sales-dashboard-ui .sbo-notice strong {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-alert__copy small,
.sales-dashboard-ui .sbo-notice small {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-alert__cta.sbo-notice__badge,
.sales-dashboard-ui a.sbo-notice__badge.sales-dashboard-alert__cta {
    font-size: 16px;
}

.sales-dashboard-ui a.sbo-notice__badge {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-credit__chip {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-credit__copy strong {
    font-size: var(--sd-fs-title);
}

.sales-dashboard-ui .sales-dashboard-credit__copy p,
.sales-dashboard-ui .sales-dashboard-credit__copy em {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-credit__badge {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-credit__btn {
    font-size: 16px;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.sales-dashboard-ui .sales-dashboard-quick__chip {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-todo__count {
    font: var(--sd-fs-min) var(--sb-font-bold);
    font-style: normal;
}

.sales-dashboard-ui .sales-dashboard-todo__link {
    font: var(--sd-fs-body) var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-todo__row strong {
    font-size: var(--sd-fs-title);
}

.sales-dashboard-ui .sales-dashboard-todo__pill {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-todo__cta {
    font: var(--sd-fs-btn) var(--sb-font-bold);
}

.sales-dashboard-ui .sales-dashboard-summary__tab {
    font: var(--sd-fs-body) var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-summary__top span,
.sales-dashboard-ui .sbo-sales-card__top span {
    font-size: var(--sd-fs-label);
}

.sales-dashboard-ui .sales-dashboard-summary__top strong,
.sales-dashboard-ui .sbo-sales-card__top strong {
    font-size: var(--sd-fs-display);
}

.sales-dashboard-ui .sales-dashboard-summary__top small,
.sales-dashboard-ui .sbo-sales-card__top small,
.sales-dashboard-ui .sbo-cashier small {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-progress__row.sbo-payment-row,
.sales-dashboard-ui .sbo-payment-row {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-progress__row strong,
.sales-dashboard-ui .sbo-payment-row strong {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-metrics__card small,
.sales-dashboard-ui .sbo-metric-card small {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-metrics__card strong,
.sales-dashboard-ui .sbo-metric-card strong {
    font-size: var(--sd-fs-heading);
}

.sales-dashboard-ui .sales-dashboard-metrics__card em,
.sales-dashboard-ui .sbo-metric-card em {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-cash__item small {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-cash__item strong {
    font-size: var(--sd-fs-title);
}

.sales-dashboard-ui .sales-dashboard-cash__badge,
.sales-dashboard-ui .sales-dashboard-cash__link {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-count.sbo-count-badge,
.sales-dashboard-ui .sbo-count-badge {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-section-total.sbo-section-total,
.sales-dashboard-ui .sbo-section-total {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-customer__main strong,
.sales-dashboard-ui .sbo-list-main strong {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-customer__main small,
.sales-dashboard-ui .sbo-list-main small {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-customer__follow {
    font: var(--sd-fs-min) var(--sb-font-semibold);
    font-style: normal;
}

.sales-dashboard-ui .sales-dashboard-customer__value strong,
.sales-dashboard-ui .sbo-list-value strong {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-customer__value span,
.sales-dashboard-ui .sbo-list-value span {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-customer__action {
    font: var(--sd-fs-min) var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-customer__status.sbo-status-pill,
.sales-dashboard-ui .sbo-status-pill {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sbo-rank {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sbo-empty {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-history__row.sbo-sale-row,
.sales-dashboard-ui .sbo-sale-row {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-history__id {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sales-dashboard-history__main strong,
.sales-dashboard-ui .sbo-sale-row strong {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-history__main small,
.sales-dashboard-ui .sbo-sale-row small {
    font-size: var(--sd-fs-meta);
}

.sales-dashboard-ui .sales-dashboard-history__amount {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-history__pay,
.sales-dashboard-ui .sbo-sale-row em {
    font-size: var(--sd-fs-min);
}

.sales-dashboard-ui .sbo-day-footer__balances p,
.sales-dashboard-ui .sales-dashboard-footer__balances p {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sales-dashboard-footer__topup.sbo-day-footer__topup,
.sales-dashboard-ui .sbo-day-footer__topup {
    font: var(--sd-fs-btn) var(--sb-font-semibold);
}

.sales-dashboard-ui .sales-dashboard-footer__close.sbo-day-footer__close,
.sales-dashboard-ui .sbo-day-footer__close {
    font: var(--sd-fs-heading) var(--sb-font-bold);
}

.sales-dashboard-ui .sales-dashboard-footer__note,
.sales-dashboard-ui .sbo-day-footer__note {
    font-size: var(--sd-fs-body);
}

.sales-dashboard-ui .sbo-bottom-nav a {
    font-size: 11px;
}

.sales-dashboard-ui .sbo-branch-switcher__panel > header strong {
    font-size: 13px;
}

.sales-dashboard-ui .sbo-branch-switcher__panel > header small,
.sales-dashboard-ui .sbo-branch-option__copy small,
.sales-dashboard-ui .sbo-branch-option__copy em {
    font-size: 14px;
}

.sales-dashboard-ui .sbo-branch-option__copy strong {
    font-size: 16px;
}

.sales-dashboard-ui .sbo-branch-switcher__manage {
    font-size: 16px;
}

.sales-dashboard-ui .sbo-branch-option__state.is-off {
    font-size: 12px;
}

/* ---------- Close Day preview modal ? match dashboard blue theme ---------- */
.sales-dashboard-ui ~ .sbo-close-day-modal.sales-dashboard-modal,
.sbo-close-day-modal.sales-dashboard-modal {
    padding: 20px;
    z-index: 1600;
}

.sales-dashboard-ui ~ .sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__backdrop,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__backdrop {
    background: rgba(15, 30, 55, 0.48);
    backdrop-filter: blur(4px);
}

.sales-dashboard-ui ~ .sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog,
.sales-dashboard-ui ~ .sales-dashboard-modal .sbo-close-day-modal__dialog,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog,
.sales-dashboard-modal .sbo-close-day-modal__dialog {
    width: min(420px, 100%);
    border-radius: 20px;
    border: 1px solid #E0E8FF;
    background: #fff;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22);
    overflow: hidden;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__header,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog > header {
    padding: 18px 18px 10px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0;
    background: #E7F8F1;
    color: #059669;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__close,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog > header > button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__close:hover,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog > header > button:hover {
    background: #E8EDF3;
    color: #334155;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__close svg,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog > header > button svg {
    width: 16px;
    height: 16px;
    display: block;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog h2,
.sales-dashboard-modal .sbo-close-day-modal__dialog h2 {
    margin: 0;
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 18px;
    font-weight: normal;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__dialog header p,
.sales-dashboard-modal .sbo-close-day-modal__dialog p {
    margin: 4px 0 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary,
.sales-dashboard-modal .sbo-close-day-modal__summary {
    margin: 0 18px;
    padding: 14px 16px;
    display: grid;
    gap: 12px;
    border: 1px solid #E8EDF3;
    border-radius: 14px;
    background: #F8FAFC;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary span,
.sales-dashboard-modal .sbo-close-day-modal__summary span {
    color: #64748B;
    font-family: var(--sb-font-regular);
    font-size: 16px;
}

@media (min-width: 768px) {
    .sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary span,
    .sales-dashboard-modal .sbo-close-day-modal__summary span {
        font-size: 16px;
    }
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary strong,
.sales-dashboard-modal .sbo-close-day-modal__summary strong {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

@media (min-width: 768px) {
    .sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary strong,
    .sales-dashboard-modal .sbo-close-day-modal__summary strong {
        font-size: 16px;
    }
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary strong i {
    display: inline-grid;
    place-items: center;
    font-style: normal;
    font-size: 0;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary strong i svg {
    width: 14px;
    height: 14px;
    display: block;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary .is-ok {
    color: #059669;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary .is-amber {
    color: #D97706;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__summary .is-danger {
    color: #EF4444;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__warn,
.sales-dashboard-modal .sbo-close-day-modal__warn {
    margin: 12px 18px 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    background: #FFFBEB;
    color: #B45309;
    font-size: 14px;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__warn > span {
    display: grid;
    place-items: center;
    margin-top: 2px;
    color: #D97706;
    font-size: 0;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__warn > span svg {
    width: 16px;
    height: 16px;
    display: block;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__warn strong {
    display: block;
    margin-bottom: 3px;
    color: #92400E;
    font-family: var(--sb-font-bold);
    font-size: 14px;
    font-weight: normal;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__warn p {
    margin: 0;
    color: #B45309;
    font-size: 12px;
    line-height: 1.4;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions,
.sales-dashboard-modal .sbo-close-day-modal__actions {
    margin-top: 18px;
    padding: 0 18px 18px;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-cancel,
.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-continue,
.sales-dashboard-modal .sbo-close-day-modal__actions a,
.sales-dashboard-modal .sbo-close-day-modal__actions button {
    min-height: 48px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

@media (min-width: 768px) {
    .sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-cancel,
    .sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-continue,
    .sales-dashboard-modal .sbo-close-day-modal__actions a,
    .sales-dashboard-modal .sbo-close-day-modal__actions button {
        font-size: 18px;
    }
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-cancel {
    border: 1.5px solid #E0E8FF;
    background: #fff;
    color: #475569;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-cancel:hover {
    border-color: #C7D2FE;
    background: #F8FAFF;
    color: #3366CC;
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-continue {
    border: 0;
    background: #3366CC;
    color: #fff;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24);
}

.sbo-close-day-modal.sales-dashboard-modal .sbo-close-day-modal__actions .is-continue:hover {
    background: #2554B0;
}

/* ---------- Responsive ??? iPad Pro screen first ---------- */
@media (min-width: 768px) {
    .sales-dashboard-ui.sbo-dashboard,
    .sbo-dashboard.sales-dashboard-ui {
        --sd-fs-body: 15px;
        --sd-fs-label: 14px;
        --sd-fs-meta: 14px;
        --sd-fs-title: 17px;
        --sd-fs-heading: 20px;
        --sd-fs-hero: 26px;
        --sd-fs-display: 32px;
        --sd-fs-btn: 15px;
        width: 100% !important;
        max-width: 1366px !important;
        margin: 0 auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
        font-size: var(--sd-fs-body);
    }

    .sales-dashboard-ui .sales-dashboard-content.sbo-dashboard-content,
    .sales-dashboard-ui .sbo-dashboard-content.sales-dashboard-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 16px 110px !important;
        gap: 15px;
    }

    .sales-dashboard-ui .sales-dashboard-header.sbo-dashboard-header {
        padding: 16px 20px 20px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 0 15px 15px;
        background: #36C;
    }

    .sales-dashboard-ui .sales-dashboard-branch > summary,
    .sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch > summary {
        max-width: 260px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__title {
        font-size: var(--sd-fs-hero);
    }

    .sales-dashboard-ui .sales-dashboard-quick__scroller {
        margin: 0 -16px;
        padding: 6px 16px 10px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-callout-card__name-row strong {
        font-size: 18px;
    }

    .sales-dashboard-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .sales-dashboard-ui .sbo-bottom-nav a {
        font-size: 12px;
    }

    .sales-dashboard-ui .sbo-bottom-nav a span,
    .sales-dashboard-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
        font-size: 12px !important;
    }

    .sales-dashboard-ui .sales-dashboard-fab {
        bottom: 92px;
    }
}

/* iPad Pro (1024+) ??? content fills the canvas, minimal side space */
@media (min-width: 1024px) {
    .sales-dashboard-ui.sbo-dashboard,
    .sbo-dashboard.sales-dashboard-ui {
        --sd-fs-body: 16px;
        --sd-fs-label: 14px;
        --sd-fs-meta: 14px;
        --sd-fs-title: 18px;
        --sd-fs-heading: 22px;
        --sd-fs-hero: 28px;
        --sd-fs-display: 36px;
        --sd-fs-btn: 16px;
        width: 100% !important;
        max-width: 1366px !important;
        font-size: var(--sd-fs-body);
    }

    .sales-dashboard-ui .sales-dashboard-content.sbo-dashboard-content,
    .sales-dashboard-ui .sbo-dashboard-content.sales-dashboard-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 20px 100px !important;
        gap: 15px;
    }

    .sales-dashboard-ui .sales-dashboard-quick__scroller {
        margin: 0 -20px;
        padding: 6px 20px 10px;
        scroll-padding-inline: 20px;
    }

    .sales-dashboard-ui .sales-dashboard-header.sbo-dashboard-header {
        padding: 18px 20px 22px;
        border-radius: 0 0 15px 15px;
        background: #36C;
    }
}

@media (max-width: 720px) {
    .sales-dashboard-ui .sales-dashboard-quick {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .sales-dashboard-ui .sales-dashboard-quick__scroller {
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        max-width: none;
        margin: 0 -12px;
        padding: 6px 12px 10px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 12px;
    }

    .sales-dashboard-ui .sales-dashboard-quick__chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

@media (max-width: 1366px) {
    .sales-dashboard-ui.sbo-dashboard,
    .sbo-dashboard.sales-dashboard-ui {
        --sd-fs-body: 16px;
        --sd-fs-label: 16px;
        --sd-fs-meta: 16px;
        --sd-fs-title: 15px;
        --sd-fs-heading: 17px;
        --sd-fs-hero: 20px;
        --sd-fs-display: 24px;
        --sd-fs-btn: 14px;
        font-size: 14px;
    }

    .sales-dashboard-ui .sales-dashboard-header__titles {
        display: flex;
    }

    .sales-dashboard-ui .sales-dashboard-branch > summary,
    .sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch > summary {
        max-width: 100%;
    }

    .sales-dashboard-ui .sales-dashboard-hero__stats {
        gap: 6px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__stat {
        padding: 10px 8px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__stat strong {
        font-size: 14px;
    }

    .sales-dashboard-ui .sales-dashboard-sales-summary__stat strong {
        font-size: 22px;
    }

    .sales-dashboard-ui .sales-dashboard-cash-expenses__stat strong {
        font-size: 22px;
    }

    .sales-dashboard-ui .sales-dashboard-cash-expenses__stat small,
    .sales-dashboard-ui .sales-dashboard-cash-expenses__stat > span,
    .sales-dashboard-ui .sales-dashboard-cash-expenses__stat-copy > span {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-expense-book__titles p,
    .sales-dashboard-ui .sales-dashboard-expense-book__empty p,
    .sales-dashboard-ui .sales-dashboard-handovers__titles p,
    .sales-dashboard-ui .sales-dashboard-handovers__empty p {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-copy small {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__pin {
        width: 14px;
        height: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-sales-summary__stat small,
    .sales-dashboard-ui .sales-dashboard-sales-summary__stat > span,
    .sales-dashboard-ui .sales-dashboard-sales-summary__stat-copy > span {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-callouts__titles p,
    .sales-dashboard-ui .sales-dashboard-callouts__empty p,
    .sales-dashboard-ui .sales-dashboard-who-sold__empty p,
    .sales-dashboard-ui .sales-dashboard-recent-sales__empty p,
    .sales-dashboard-ui .sales-dashboard-day-end__credit-copy p,
    .sales-dashboard-ui .sales-dashboard-day-end__note {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-who-sold__copy p {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-who-sold__name strong {
        font-size: 18px;
    }

    .sales-dashboard-ui .sales-dashboard-recent-sales__meta {
        font-size: 16px;
    }

    .sales-dashboard-ui .sbo-branch-switcher__panel > header small,
    .sales-dashboard-ui .sbo-branch-option__copy small {
        font-size: 16px;
    }

    .sales-dashboard-ui .sbo-branch-switcher__panel > header strong,
    .sales-dashboard-ui .sbo-branch-switcher__manage {
        font-size: 18px;
    }

    .sales-dashboard-ui .sbo-branch-option__copy strong {
        font-size: 18px;
    }

    .sales-dashboard-ui .sbo-branch-option__state.is-off {
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-cash-expenses__alert {
        flex-wrap: wrap;
    }

    .sales-dashboard-ui .sales-dashboard-cash-expenses__alert-cta {
        margin-left: auto;
    }

    .sales-dashboard-ui .sales-dashboard-sales-summary__bar-meta span {
        font-size: 16px;
        font-family: var(--sb-font-bold);
    }

    .sales-dashboard-ui .sales-dashboard-sales-summary__payments-head span {
        font-size: 12px;
    }

    .sales-dashboard-ui .sales-dashboard-quick__chip {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-callout-card__name-row span {
        padding: 3px 7px;
    }

    .sales-dashboard-ui .sales-dashboard-history__row.sbo-sale-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .sales-dashboard-ui .sales-dashboard-history__pay {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sales-dashboard-ui .sales-dashboard-fab,
    .sales-dashboard-ui .sales-dashboard-quick__chip,
    .sales-dashboard-ui .sales-dashboard-customer,
    .sales-dashboard-ui .sales-dashboard-footer__close,
    .sales-dashboard-ui .sales-dashboard-progress__row i {
        animation: none;
        transition: none;
    }
}

/* Force iPad Pro canvas vs sales-book-owner.css 540px / 720px */
body.sales-dashboard-body .sbo-dashboard.sales-dashboard-ui,
body.sbo-dashboard-body.sales-dashboard-body .sbo-dashboard.sales-dashboard-ui {
    width: 100% !important;
    max-width: 1366px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.sales-dashboard-body .sbo-dashboard-content.sales-dashboard-content,
body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

body.sales-dashboard-body .sbo-bottom-nav,
body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
}

body.sales-dashboard-body .sbo-bottom-nav a,
body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.sales-dashboard-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.sales-dashboard-body .sbo-bottom-nav a span,
body.sales-dashboard-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.sales-dashboard-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

body.sales-dashboard-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.sales-dashboard-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.sales-dashboard-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.sales-dashboard-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.sales-dashboard-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.sales-dashboard-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

/* Branch dropdown ??? always under shop name (left), never fixed right */
body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher.sales-dashboard-branch,
body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher {
    position: relative !important;
}

body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel,
body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-branch__panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    width: min(340px, calc(100vw - 24px)) !important;
    z-index: 80 !important;
}

@media (max-width: 720px) {
    body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel,
    body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: auto !important;
        width: min(340px, calc(100vw - 24px)) !important;
    }
}

@media (min-width: 700px) {
    body.sales-dashboard-body .sbo-dashboard.sales-dashboard-ui,
    body.sbo-dashboard-body.sales-dashboard-body .sbo-dashboard.sales-dashboard-ui {
        width: 100% !important;
        max-width: 1366px !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body.sales-dashboard-body .sbo-bottom-nav,
    body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

@media (min-width: 1024px) {
    body.sales-dashboard-body .sbo-dashboard-content.sales-dashboard-content,
    body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-dashboard-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Mobile ? hero branch card fonts */
@media (max-width: 1366px) {
    .sales-dashboard-ui .sales-dashboard-hero__branch {
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
        align-items: center;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-main {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-icon svg {
        width: 16px;
        height: 15px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-copy {
        flex: 1 1 auto;
        min-width: 0;
        gap: 2px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-copy strong {
        font-size: 14px !important;
        max-width: 100%;
    }

    .sales-dashboard-ui .sales-dashboard-hero__branch-copy small {
        width: 100%;
        font-size: 16px !important;
    }

    .sales-dashboard-ui .sales-dashboard-hero__pin {
        width: 14px;
        height: 16px;
    }

    .sales-dashboard-ui .sales-dashboard-hero__live.sbo-live,
    .sales-dashboard-ui .sbo-live.sales-dashboard-hero__live {
        flex-shrink: 0;
        min-height: 26px;
        padding: 4px 8px;
        gap: 4px;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .sales-dashboard-ui .sales-dashboard-hero__live i {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16);
    }
}

/* ==========================================================================
   LIVE SALES BOOK ??? premium POS UI (live-sales-ui)
   ========================================================================== */

body.live-sales-body.sbo-dashboard-body,
body.sbo-dashboard-body.live-sales-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.live-sales-ui.sbo-dashboard,
.sbo-dashboard.live-sales-ui {
    --ls-blue: #3366cc;
    --ls-blue-deep: #2554b0;
    --ls-blue-soft: #e8f0fe;
    --ls-coral: #ef626c;
    --ls-coral-deep: #e25555;
    --ls-coral-soft: #fdecec;
    --ls-green: #10b981;
    --ls-green-deep: #059669;
    --ls-green-soft: #e7f8f1;
    --ls-orange: #f59e0b;
    --ls-orange-soft: #fff7e8;
    --ls-purple: #8b5cf6;
    --ls-purple-soft: #f1eaff;
    --ls-text: #222;
    --ls-muted: #8a94a6;
    --ls-line: #e8edf3;
    --ls-card: #ffffff;
    --ls-bg: transparent;
    --ls-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --ls-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --ls-radius: 22px;
    --ls-radius-sm: 14px;
    --ls-fs-body: 14px; /* min body */
    --ls-fs-meta: 14px;
    --ls-fs-title: 16px;
    --ls-fs-heading: 18px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ls-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
}

body.live-sales-body,
body.live-sales-body .live-sales-ui {
    font-size: 14px;
}

.live-sales-ui h1,
.live-sales-ui h2,
.live-sales-ui h3,
.live-sales-ui strong,
.live-sales-ui b {
    font-family: var(--sb-font-bold) !important;
}

.live-sales-ui em,
.live-sales-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.live-sales-ui small,
.live-sales-ui p,
.live-sales-ui label,
.live-sales-ui input,
.live-sales-ui span {
    font-family: var(--sb-font-regular);
}

.live-sales-ui button,
.live-sales-ui .live-sales-periods a,
.live-sales-ui .live-sales-periods button,
.live-sales-ui .live-sales-periods__tab,
.live-sales-ui .live-sales-credits__btn,
.live-sales-ui .live-sales-alert__cta,
.live-sales-ui .live-sales-custom button,
.live-sales-ui .sbo-day-closures-staff button,
.live-sales-ui .sbo-live-sale__pill,
.live-sales-ui .live-sales-chip,
.live-sales-ui .live-sales-count,
.live-sales-ui .sbo-bottom-nav a.is-active {
    font-family: var(--sb-font-semibold);
}

.live-sales-ui .live-sales-header__title,
.live-sales-ui .live-sales-alert__title,
.live-sales-ui .sbo-live-sale__copy strong,
.live-sales-ui .sbo-live-sale__meta > strong,
.live-sales-ui .sbo-live-sales-empty h2,
.live-sales-ui .live-sales-tabs button.is-active,
.live-sales-ui .live-sales-tabs__btn.is-active {
    font-family: var(--sb-font-bold) !important;
}

/* ---------- Header ---------- */
.live-sales-ui .live-sales-header.sbo-staff-header,
.live-sales-ui .sbo-staff-header.live-sales-header,
.live-sales-ui .sbo-live-sales-header.live-sales-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-height: 0;
    padding: 18px 16px 16px;
    border-bottom: 0;
    border-radius: 0 0 15px 15px;
    background: #36C;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible;
}

.live-sales-ui .live-sales-header__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.live-sales-ui .live-sales-header__back.sbo-back-button,
.live-sales-ui .sbo-back-button.live-sales-header__back {
    display: none !important;
}

.live-sales-ui .live-sales-header__titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 1;
}

.live-sales-ui .live-sales-header__title,
.live-sales-ui .live-sales-header h1 {
    margin: 0;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-sales-ui .live-sales-header__subtitle,
.live-sales-ui .live-sales-header p,
.live-sales-ui .live-sales-header [data-live-sales-subtitle] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
}

.live-sales-ui .live-sales-header__actions,
.live-sales-ui .sbo-live-sales-header__actions.live-sales-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    grid-column: 2;
    margin-top: 2px;
}

.live-sales-ui .live-sales-header__icon.sbo-live-sales-icon,
.live-sales-ui .sbo-live-sales-icon.live-sales-header__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: transparent;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.live-sales-ui .live-sales-header__icon:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: none;
}

.live-sales-ui .live-sales-header__icon.is-active {
    background: #ffffff;
    color: #36C;
    box-shadow: none;
}

.live-sales-ui .live-sales-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.live-sales-ui .live-sales-header__icon svg[width="16"] {
    width: 16px;
    height: 18px;
}

.live-sales-ui .live-sales-header__icon.is-active svg path {
    fill: #36C;
}

.live-sales-ui .live-sales-header__icon[hidden] {
    display: none !important;
}

/* ---------- Content shell ---------- */
.live-sales-ui .live-sales-content.sbo-staff-content,
.live-sales-ui .sbo-staff-content.live-sales-content {
    padding: 14px 16px 120px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent;
}

.live-sales-ui .live-sales-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.live-sales-ui .live-sales-panel[hidden] {
    display: none !important;
}

/* ---------- Segmented tabs (inside blue header) ---------- */
.live-sales-ui .live-sales-header .live-sales-tabs.sbo-staff-tabs,
.live-sales-ui .live-sales-header .sbo-live-sales-tabs.live-sales-tabs,
.live-sales-ui .live-sales-tabs.sbo-staff-tabs,
.live-sales-ui .sbo-live-sales-tabs.live-sales-tabs,
.live-sales-ui .sbo-staff-tabs.sbo-live-sales-tabs.live-sales-tabs {
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border: 2px solid #36C !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.live-sales-ui .live-sales-tabs button,
.live-sales-ui .live-sales-tabs__btn,
.live-sales-ui .sbo-live-sales-tabs button,
.live-sales-ui .sbo-staff-tabs.live-sales-tabs button {
    position: relative;
    min-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 0 !important;
    border-radius: 7px !important;
    color: #1a1a1a !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}

@media (min-width: 768px) {
    .live-sales-ui .live-sales-tabs button,
    .live-sales-ui .live-sales-tabs__btn,
    .live-sales-ui .sbo-live-sales-tabs button,
    .live-sales-ui .sbo-staff-tabs.live-sales-tabs button {
        font-size: 18px !important;
    }
}

.live-sales-ui .live-sales-tabs button:not(.is-active):hover,
.live-sales-ui .live-sales-tabs__btn:not(.is-active):hover {
    color: #222 !important;
    background: rgba(51, 102, 204, 0.06) !important;
}

.live-sales-ui .live-sales-tabs button.is-active,
.live-sales-ui .live-sales-tabs__btn.is-active,
.live-sales-ui .sbo-live-sales-tabs button.is-active,
.live-sales-ui .sbo-staff-tabs.live-sales-tabs button.is-active {
    color: #fff !important;
    background: #36C !important;
    font-family: var(--sb-font-bold) !important;
    box-shadow: none !important;
}

.live-sales-ui .live-sales-tabs__icon,
.live-sales-ui .sbo-live-sales-tabs__icon {
    display: none !important;
}

.live-sales-ui .live-sales-tabs__dot,
.live-sales-ui .sbo-live-sales-tabs__dot {
    position: absolute;
    top: 7px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    display: grid;
    place-items: center;
    font-style: normal;
    pointer-events: none;
}

.live-sales-ui .live-sales-tabs__dot svg,
.live-sales-ui .sbo-live-sales-tabs__dot svg {
    display: block;
    width: 7px;
    height: 7px;
}

/* ---------- Summary chips (inside blue header) ---------- */
.live-sales-ui .live-sales-header .live-sales-summary,
.live-sales-ui .live-sales-summary.sbo-live-sales-summary,
.live-sales-ui .sbo-live-sales-summary.live-sales-summary {
    margin: 0;
    padding: 0 0 2px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.live-sales-ui[data-active-tab="closures"] .live-sales-summary {
    display: none;
}

.live-sales-ui .live-sales-summary::-webkit-scrollbar {
    display: none;
}

.live-sales-ui .live-sales-summary span,
.live-sales-ui .live-sales-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 999px;
    color: #222;
    background: #ffffff;
    box-shadow: var(--ls-shadow-sm);
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px;
    white-space: nowrap;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.live-sales-ui .live-sales-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--ls-shadow);
}

.live-sales-ui .live-sales-chip em,
.live-sales-ui .live-sales-summary em {
    color: #222;
    font-style: normal;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

.live-sales-ui .live-sales-chip--total,
.live-sales-ui .live-sales-chip--cash,
.live-sales-ui .live-sales-chip--mpesa,
.live-sales-ui .live-sales-chip--card {
    border-color: transparent;
    background: #ffffff;
}

.live-sales-ui .live-sales-chip--total em,
.live-sales-ui .live-sales-chip--cash em,
.live-sales-ui .live-sales-chip--mpesa em,
.live-sales-ui .live-sales-chip--card em {
    color: #222;
}

/* ---------- Subscription alert ---------- */
.live-sales-ui .live-sales-alert.sbo-live-sales-overdue,
.live-sales-ui .sbo-live-sales-overdue.live-sales-alert {
    margin: 0;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    border-radius: 15px;
    background: #FEF1F2;
    color: #DC2626;
    box-shadow: none;
}

.live-sales-ui .live-sales-alert__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fee2e2;
    color: #DC2626;
    font-size: 0;
}

.live-sales-ui .live-sales-alert__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.live-sales-ui .live-sales-alert__copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.live-sales-ui .live-sales-alert__title {
    color: #DC2626;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .live-sales-ui .live-sales-alert__title {
        font-size: 18px;
    }
}

.live-sales-ui .live-sales-alert__copy p,
.live-sales-ui .live-sales-alert p {
    margin: 0;
    color: #DC2626;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.85;
}

.live-sales-ui .live-sales-alert__cta,
.live-sales-ui .live-sales-alert a {
    margin-top: 2px;
    box-sizing: border-box;
    min-width: 92px;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff !important;
    background: #DC2626;
    text-decoration: none;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: transform 180ms ease, background 180ms ease;
}

.live-sales-ui .live-sales-alert__cta:hover,
.live-sales-ui .live-sales-alert a:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: none;
}

/* ---------- SMS / WhatsApp credits ---------- */
.live-sales-ui .live-sales-credits.sbo-live-sales-credits,
.live-sales-ui .sbo-live-sales-credits.live-sales-credits {
    margin: 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: var(--ls-shadow-sm);
}

.live-sales-ui .live-sales-credits__item,
.live-sales-ui .sbo-live-sales-credits__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #8a94a6;
    font-size: 14px;
}

.live-sales-ui .live-sales-credits__item.is-sms {
    flex: 0 1 auto;
    padding-right: 16px;
}

.live-sales-ui .live-sales-credits__item.is-wa {
    flex: 1 1 auto;
    padding-left: 16px;
    border-left: 1px solid #E5E7EB;
    min-height: 40px;
}

.live-sales-ui .live-sales-credits__item.is-wa .live-sales-credits__icon,
.live-sales-ui .live-sales-credits__item.is-wa i.is-wa {
    display: none !important;
}

.live-sales-ui .live-sales-credits__icon,
.live-sales-ui .live-sales-credits__item i,
.live-sales-ui .sbo-live-sales-credits__item i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-style: normal;
    font-size: 0;
    flex-shrink: 0;
}

.live-sales-ui .live-sales-credits__item i.is-sms,
.live-sales-ui .live-sales-credits__icon.is-sms {
    color: #EA580C;
    background: #FFEDD5;
}

.live-sales-ui .live-sales-credits__icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

.live-sales-ui .live-sales-credits__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.live-sales-ui .live-sales-credits__text--spaced {
    gap: 8px;
}

.live-sales-ui .live-sales-credits__text small {
    color: #333333;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .live-sales-ui .live-sales-credits__text small {
        font-size: 16px;
    }
}

.live-sales-ui .live-sales-credits__text b,
.live-sales-ui .live-sales-credits__item b {
    overflow: hidden;
    color: #8a94a6;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.25;
}

.live-sales-ui .live-sales-credits__count {
    color: #EA580C;
    font-family: var(--sb-font-bold) !important;
    font-style: normal;
    font-size: 14px;
}

.live-sales-ui .live-sales-credits__soon {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    color: #7C3AED;
    background: #EDE9FE;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    line-height: 1.2;
    font-style: normal;
}

.live-sales-ui .live-sales-credits__btn,
.live-sales-ui .sbo-live-sales-credits__btn.live-sales-credits__btn {
    margin-left: auto;
    min-height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid #2563EB;
    border-radius: 10px;
    color: #2563EB;
    background: #ffffff;
    text-decoration: none;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    box-shadow: none;
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

@media (min-width: 768px) {
    .live-sales-ui .live-sales-credits__btn,
    .live-sales-ui .sbo-live-sales-credits__btn.live-sales-credits__btn {
        font-size: 18px;
    }
}

.live-sales-ui .live-sales-credits__btn:hover {
    background: #EFF6FF;
    color: #1D4ED8;
    transform: translateY(-1px);
    box-shadow: none;
}

/* ---------- Toolbar / search / filters ---------- */
.live-sales-ui .live-sales-toolbar {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.live-sales-ui .live-sales-search.sbo-staff-search,
.live-sales-ui .sbo-live-sales-search.live-sales-search,
.live-sales-ui .sbo-staff-search.sbo-live-sales-search.live-sales-search {
    margin: 0 !important;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(232, 237, 243, 0.9) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: var(--ls-shadow-sm) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.live-sales-ui .live-sales-search:focus-within {
    border-color: #C7D2FE !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

.live-sales-ui .live-sales-search__icon,
.live-sales-ui .live-sales-search > span {
    color: #94a3b8;
    font-size: 0;
    line-height: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.live-sales-ui .live-sales-search__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.live-sales-ui .live-sales-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: #222;
    background: transparent;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.4;
}

.live-sales-ui .live-sales-search input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.live-sales-ui .live-sales-search__status,
.live-sales-ui .sbo-live-sales-search__status {
    min-height: 0;
    margin: 0;
    color: #8a94a6;
    font-size: 14px;
}

.live-sales-ui .live-sales-filter.sbo-live-sales-filters,
.live-sales-ui .sbo-live-sales-filters.live-sales-filter,
.live-sales-ui .sbo-live-sales-filters.sbo-day-closures-staff,
.live-sales-ui .sbo-day-closures-staff {
    margin: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
    background: transparent;
}

.live-sales-ui .live-sales-filter::-webkit-scrollbar,
.live-sales-ui .sbo-day-closures-staff::-webkit-scrollbar,
.live-sales-ui .sbo-live-sales-filters::-webkit-scrollbar {
    display: none;
}

.live-sales-ui .live-sales-filter a,
.live-sales-ui .live-sales-filter__chip,
.live-sales-ui .sbo-live-sales-filters a,
.live-sales-ui .sbo-live-sales-filters button,
.live-sales-ui .sbo-day-closures-staff button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    color: #222 !important;
    background: #ffffff !important;
    text-decoration: none;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal;
    font-size: 14px !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.live-sales-ui .live-sales-filter a:hover,
.live-sales-ui .live-sales-filter__chip:hover,
.live-sales-ui .sbo-live-sales-filters a:hover,
.live-sales-ui .sbo-live-sales-filters button:hover,
.live-sales-ui .sbo-day-closures-staff button:hover {
    transform: translateY(-1px);
    border-color: #BFDBFE !important;
    color: #2563EB !important;
    background: #ffffff !important;
}

.live-sales-ui .live-sales-filter a.is-active,
.live-sales-ui .live-sales-filter__chip.is-active,
.live-sales-ui .sbo-live-sales-filters a.is-active,
.live-sales-ui .sbo-live-sales-filters button.is-active,
.live-sales-ui .sbo-day-closures-staff button.is-active {
    border-color: #36C !important;
    color: #ffffff !important;
    background: #36C !important;
    box-shadow: none !important;
    font-family: var(--sb-font-semibold) !important;
}

/* ---------- Period tabs ---------- */
.live-sales-ui .live-sales-periods.sbo-live-sales-periods,
.live-sales-ui .sbo-live-sales-periods.live-sales-periods,
.live-sales-ui .sbo-live-sales-periods.live-sales-periods {
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.live-sales-ui .live-sales-periods a,
.live-sales-ui .live-sales-periods button,
.live-sales-ui .live-sales-periods__tab,
.live-sales-ui .sbo-live-sales-periods a,
.live-sales-ui .sbo-live-sales-periods button {
    min-height: 40px !important;
    display: grid !important;
    place-items: center;
    border: 0 !important;
    border-radius: 8px !important;
    color: #222 !important;
    background: transparent !important;
    text-decoration: none;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: color 180ms ease, background 180ms ease;
}

@media (min-width: 768px) {
    .live-sales-ui .live-sales-periods a,
    .live-sales-ui .live-sales-periods button,
    .live-sales-ui .live-sales-periods__tab,
    .live-sales-ui .sbo-live-sales-periods a,
    .live-sales-ui .sbo-live-sales-periods button {
        font-size: 18px !important;
    }
}

.live-sales-ui .live-sales-periods a:hover,
.live-sales-ui .live-sales-periods button:hover,
.live-sales-ui .live-sales-periods__tab:hover {
    color: #222 !important;
    background: #F3F4F6 !important;
}

.live-sales-ui .live-sales-periods a.is-active,
.live-sales-ui .live-sales-periods button.is-active,
.live-sales-ui .live-sales-periods__tab.is-active,
.live-sales-ui .sbo-live-sales-periods a.is-active,
.live-sales-ui .sbo-live-sales-periods button.is-active {
    color: #ffffff !important;
    background: #36C !important;
    font-family: var(--sb-font-bold) !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .live-sales-ui .live-sales-periods.sbo-live-sales-periods,
    .live-sales-ui .sbo-live-sales-periods.live-sales-periods,
    .live-sales-ui .sbo-day-closures-periods.live-sales-periods {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .live-sales-ui .live-sales-periods.sbo-live-sales-periods::-webkit-scrollbar,
    .live-sales-ui .sbo-live-sales-periods.live-sales-periods::-webkit-scrollbar,
    .live-sales-ui .sbo-day-closures-periods.live-sales-periods::-webkit-scrollbar {
        display: none !important;
    }

    .live-sales-ui .live-sales-periods a,
    .live-sales-ui .live-sales-periods button,
    .live-sales-ui .live-sales-periods__tab,
    .live-sales-ui .sbo-live-sales-periods a,
    .live-sales-ui .sbo-live-sales-periods button {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: max-content !important;
        width: auto !important;
        padding: 0 14px !important;
        white-space: nowrap !important;
    }
}

.live-sales-ui .live-sales-custom.sbo-live-sales-custom,
.live-sales-ui .sbo-live-sales-custom.live-sales-custom {
    margin: 0px 0 0;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    border: 1px solid var(--ls-line);
    border-radius: 16px;
    background: var(--ls-card);
    box-shadow: var(--ls-shadow-sm);
}

.live-sales-ui .live-sales-custom.sbo-live-sales-custom[hidden],
.live-sales-ui .sbo-live-sales-custom.live-sales-custom[hidden] {
    display: none !important;
}

.live-sales-ui .live-sales-custom label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ls-muted);
    font-size: 14px;
}

.live-sales-ui .live-sales-custom input {
    min-height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--ls-line);
    border-radius: 12px;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    background: #f8fafc;
}

.live-sales-ui .live-sales-custom input[type="date"] {
    cursor: pointer;
}

.live-sales-ui .live-sales-custom input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}

.live-sales-ui .live-sales-custom button {
    align-self: end;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--ls-blue);
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.live-sales-ui .live-sales-custom button:hover {
    background: var(--ls-blue-deep);
    transform: translateY(-1px);
}

/* ---------- Sales list / cards ---------- */
.live-sales-ui .live-sales-list.sbo-live-sales-list,
.live-sales-ui .sbo-live-sales-list.live-sales-list {
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.live-sales-ui .sbo-live-sale,
.live-sales-ui .live-sales-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--ls-shadow-sm);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.live-sales-ui .sbo-live-sale:hover,
.live-sales-ui .sbo-live-sale:focus-visible {
    transform: translateY(-1px);
    border-color: #C7D2FE;
    box-shadow: var(--ls-shadow);
    outline: none;
}

.live-sales-ui .sbo-live-sale.is-voided {
    opacity: 0.7;
    background: #F9FAFB;
}

.live-sales-ui .sbo-live-sale.is-voided:hover {
    opacity: 0.85;
}

.live-sales-ui .sbo-live-sale > time {
    display: none;
}

.live-sales-ui .sbo-live-sale__avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px;
    box-shadow: none;
    flex-shrink: 0;
}

.live-sales-ui .sbo-live-sale__avatar,
.live-sales-ui .sbo-live-sale__avatar.is-teal,
.live-sales-ui .sbo-live-sale__avatar.is-navy,
.live-sales-ui .sbo-live-sale__avatar.is-green,
.live-sales-ui .sbo-live-sale__avatar.is-orange,
.live-sales-ui .sbo-live-sale__avatar.is-brown {
    background: var(--ls-blue, #3366cc);
    color: #fff;
}

.live-sales-ui .sbo-live-sale__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.live-sales-ui .sbo-live-sale__copy strong {
    overflow: hidden;
    color: #222;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .live-sales-ui .sbo-live-sale__copy strong {
        font-size: 18px;
    }
}

.live-sales-ui .sbo-live-sale__copy small {
    display: block;
    overflow: hidden;
    color: #8a94a6;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.35;
    max-width: 100%;
}

@media (min-width: 768px) {
    .live-sales-ui .sbo-live-sale__copy small {
        font-size: 16px;
    }
}

.live-sales-ui .sbo-live-sale__copy small time,
.live-sales-ui .live-sales-card__sep {
    color: #8a94a6;
    font-family: inherit;
    font-size: inherit;
}

.live-sales-ui .live-sales-card__sep {
    margin: 0 4px;
}

.live-sales-ui .sbo-live-sale__copy small.is-void {
    color: #DC2626;
    font-family: var(--sb-font-semibold);
}

.live-sales-ui .sbo-live-sale__badges,
.live-sales-ui .live-sales-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.live-sales-ui .sbo-live-sale__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    align-self: center;
}

.live-sales-ui .sbo-live-sale__meta > strong {
    color: #36C;
    font-family: var(--sb-font-extrabold) !important;
    font-size: 16px;
    white-space: nowrap;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .live-sales-ui .sbo-live-sale__meta > strong {
        font-size: 20px;
    }
}

.live-sales-ui .sbo-live-sale.is-voided .sbo-live-sale__meta > strong {
    color: #94A3B8;
}

.live-sales-ui .sbo-live-sale__meta > div {
    display: none;
}

.live-sales-ui .sbo-live-sale__pill {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    line-height: 1.2;
    font-style: normal;
    white-space: nowrap;
}

.live-sales-ui .sbo-live-sale__pill.is-cash {
    color: #059669;
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.live-sales-ui .sbo-live-sale__pill.is-mpesa {
    color: #2563EB;
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.live-sales-ui .sbo-live-sale__pill.is-card {
    color: #7C3AED;
    background: #F5F3FF;
    border-color: #DDD6FE;
}

.live-sales-ui .sbo-live-sale__pill.is-other {
    color: #475569;
    background: #F1F5F9;
    border-color: #E2E8F0;
}

.live-sales-ui .sbo-live-sale__pill.is-status-synced {
    color: #059669;
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.live-sales-ui .sbo-live-sale__pill.is-status-edited {
    color: #D97706;
    background: #FFFBEB;
    border-color: #FDE68A;
}

.live-sales-ui .sbo-live-sale__pill.is-status-voided {
    color: #DC2626;
    background: #FEF2F2;
    border-color: #FECACA;
}

.live-sales-ui .sbo-live-sale__chevron {
    display: none !important;
}

.live-sales-ui .sbo-live-sales-empty {
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1.5px dashed #d5dbe3;
    border-radius: 12px;
    background: #ffffff;
    color: #8a94a6;
    box-shadow: none;
}

.live-sales-ui .sbo-live-sales-empty > span {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    border-radius: 14px;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 0;
}

.live-sales-ui .sbo-live-sales-empty > span svg {
    display: block;
    width: 24px;
    height: 24px;
}

.live-sales-ui .sbo-live-sales-empty h2 {
    margin: 12px 0 4px;
    color: #222;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px;
    line-height: 1.2;
}

.live-sales-ui .sbo-live-sales-empty p {
    margin: 0;
    font-size: 14px;
}

.live-sales-ui .live-sales-count.sbo-live-sales-count,
.live-sales-ui .sbo-live-sales-count.live-sales-count {
    margin: 8px auto 0;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 999px;
    color: #8a94a6;
    background: #e8edf5;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    text-align: center;
}

/* ---------- Day closures polish ---------- */
.live-sales-ui .live-sales-closures {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.live-sales-ui .live-sales-closures__toolbar,
.live-sales-ui .sbo-day-closures-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}



.live-sales-ui .sbo-day-closures-staff {
    margin-top: 0 !important;
}



.live-sales-ui .sbo-day-closures-summary,
.live-sales-ui .live-sales-closures-summary.sbo-day-closures-summary {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.live-sales-ui .sbo-day-closures-summary article,
.live-sales-ui .live-sales-closure-card {
    padding: 14px 14px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px;
    box-shadow: none;
    min-width: 0;
}

.live-sales-ui .sbo-day-closures-summary article:nth-child(1),
.live-sales-ui .live-sales-closure-card.is-revenue {
    grid-column: 1 / -1;
    border: 1px solid #BFDBFE;
    background: #EFF6FF;
}

.live-sales-ui .sbo-day-closures-summary article:nth-child(2),
.live-sales-ui .live-sales-closure-card.is-finalized {
    border: 1px solid #A7F3D0;
    background: #ECFDF5;
}

.live-sales-ui .sbo-day-closures-summary article:nth-child(3),
.live-sales-ui .live-sales-closure-card.is-variance {
    border: 1px solid #FECACA;
    background: #FEF2F2;
}

.live-sales-ui .live-sales-closure-card__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-sales-ui .sbo-day-closures-summary small {
    display: block;
    color: #222;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}

.live-sales-ui .sbo-day-closures-summary strong {
    display: block;
    margin-top: 0;
    color: #222;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px;
    line-height: 1.15;
}

.live-sales-ui .sbo-day-closures-summary strong.is-ok {
    color: #059669;
}

.live-sales-ui .sbo-day-closures-summary strong.is-short {
    color: #DC2626;
}

.live-sales-ui .sbo-day-closures-summary strong.is-over {
    color: #059669;
}

.live-sales-ui .sbo-day-closures-summary span:not(.live-sales-closure-card__icon) {
    display: block;
    margin-top: 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.3;
}

.live-sales-ui .live-sales-closure-card__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.live-sales-ui .live-sales-closure-card.is-revenue .live-sales-closure-card__icon {
    background: #DBEAFE;
}

.live-sales-ui .live-sales-closure-card.is-finalized .live-sales-closure-card__icon {
    background: #D1FAE5;
}

.live-sales-ui .live-sales-closure-card.is-variance .live-sales-closure-card__icon {
    background: #FEE2E2;
}

.live-sales-ui .live-sales-closure-card__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.live-sales-ui .sbo-day-closures-list,
.live-sales-ui .live-sales-closures__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.live-sales-ui .sbo-day-closures-list article,
.live-sales-ui .sbo-day-close.live-sales-closure-row {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 14px 14px 12px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--ls-shadow-sm);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.live-sales-ui .sbo-day-close.live-sales-closure-row.is-draft {
    border-color: #F6D98A;
}

.live-sales-ui .sbo-day-close.live-sales-closure-row.is-final {
    border-color: rgba(232, 237, 243, 0.9);
}

.live-sales-ui .sbo-day-closures-list article:hover,
.live-sales-ui .sbo-day-close.live-sales-closure-row:hover,
.live-sales-ui .sbo-day-close.live-sales-closure-row:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--ls-shadow);
    outline: none;
}

.live-sales-ui .sbo-day-close__date,
.live-sales-ui .live-sales-closure-row__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 64px;
    min-width: 48px;
    padding: 8px 6px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #F8FAFC;
    color: #222;
}

.live-sales-ui .sbo-day-close__date span,
.live-sales-ui .live-sales-closure-row__date span {
    margin: 0;
    color: #8a94a6;
    font-family: var(--sb-font-semibold);
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.live-sales-ui .sbo-day-close__date strong,
.live-sales-ui .live-sales-closure-row__date strong {
    margin-top: 2px;
    color: #222;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px;
    line-height: 1;
}

.live-sales-ui .sbo-day-close__body,
.live-sales-ui .live-sales-closure-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.live-sales-ui .sbo-day-close__top,
.live-sales-ui .sbo-day-close__mid,
.live-sales-ui .sbo-day-close__foot,
.live-sales-ui .live-sales-closure-row__top,
.live-sales-ui .live-sales-closure-row__mid,
.live-sales-ui .live-sales-closure-row__foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
}

.live-sales-ui .sbo-day-close__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.live-sales-ui .sbo-day-close__title > strong {
    color: #222;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px;
    line-height: 1.2;
}

.live-sales-ui .sbo-day-close__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--sb-font-semibold);
    font-size: 12px;
    font-style: normal;
    line-height: 1.2;
}

.live-sales-ui .sbo-day-close__status.is-draft {
    color: #D97706;
    border-color: #FCD34D;
    background: #FFFBEB;
}

.live-sales-ui .sbo-day-close__status.is-final {
    color: #059669;
    border-color: #6EE7B7;
    background: #ECFDF5;
}

.live-sales-ui .live-sales-closure-row__status-icon {
    display: inline-grid;
    place-items: center;
    width: 12px;
    height: 12px;
}

.live-sales-ui .live-sales-closure-row__status-icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

.live-sales-ui .sbo-day-close__staff {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.live-sales-ui .sbo-day-close__avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 11px;
    line-height: 1;
    background: #0D9488;
}

.live-sales-ui .sbo-day-close__avatar.is-navy { background: #3366CC; }
.live-sales-ui .sbo-day-close__avatar.is-green { background: #10B981; }
.live-sales-ui .sbo-day-close__avatar.is-teal { background: #0D9488; }

.live-sales-ui .sbo-day-close__staff b {
    display: inline;
    max-width: 140px;
    color: #333333;
    font-family: var(--sb-font-semibold);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-sales-ui .live-sales-closure-row__dot {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
}

.live-sales-ui .sbo-day-close__staff small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 13px;
    line-height: 1.2;
}

.live-sales-ui .live-sales-closure-row__clock {
    display: inline-grid;
    place-items: center;
    color: #94a3b8;
}

.live-sales-ui .live-sales-closure-row__clock svg {
    display: block;
    width: 12px;
    height: 12px;
}

.live-sales-ui .live-sales-closure-row__foot {
    gap: 12px;
    flex-wrap: wrap;
    color: #8a94a6;
    font-size: 13px;
}

.live-sales-ui .live-sales-closure-row__cash,
.live-sales-ui .live-sales-closure-row__txns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.live-sales-ui .live-sales-closure-row__cash-icon,
.live-sales-ui .live-sales-closure-row__txn-icon {
    display: inline-grid;
    place-items: center;
    color: #94a3b8;
}

.live-sales-ui .live-sales-closure-row__cash-icon svg,
.live-sales-ui .live-sales-closure-row__txn-icon svg {
    display: block;
    width: 13px;
    height: 13px;
}

.live-sales-ui .live-sales-closure-row__cash.is-short {
    color: #DC2626;
    font-family: var(--sb-font-semibold);
}

.live-sales-ui .live-sales-closure-row__cash.is-over {
    color: #059669;
    font-family: var(--sb-font-semibold);
}

.live-sales-ui .live-sales-closure-row__cash.is-balanced {
    color: #222;
    font-family: var(--sb-font-semibold);
}

.live-sales-ui .live-sales-closure-row__txns {
    color: #8a94a6;
    font-family: var(--sb-font-regular);
}

.live-sales-ui .sbo-day-close__aside,
.live-sales-ui .live-sales-closure-row__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    align-self: center;
}

.live-sales-ui .sbo-day-close__amount {
    color: #3366CC;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px;
    line-height: 1.15;
    white-space: nowrap;
}

.live-sales-ui .sbo-day-close__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sb-font-semibold);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.live-sales-ui .sbo-day-close__tag.is-short { color: #DC2626; }
.live-sales-ui .sbo-day-close__tag.is-over { color: #059669; }

.live-sales-ui .sbo-day-close__chevron {
    display: none !important;
}

@media (max-width: 420px) {
    .live-sales-ui .sbo-day-close.live-sales-closure-row {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .live-sales-ui .sbo-day-close__aside,
    .live-sales-ui .live-sales-closure-row__aside {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .live-sales-ui .sbo-day-close__amount {
        font-size: 15px;
    }

    .live-sales-ui .sbo-day-close__staff b {
        max-width: 110px;
    }
}

/* ---------- Floating action button ---------- */
.live-sales-ui .live-sales-fab.sbo-live-sales-fab,
.live-sales-ui .sbo-live-sales-fab.live-sales-fab {
    position: fixed;
    right: max(18px, calc(50% - 683px + 18px));
    bottom: 96px;
    z-index: 30;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--ls-coral);
    box-shadow: 0 14px 28px rgba(239, 98, 108, 0.36), 0 0 0 6px rgba(239, 98, 108, 0.12);
    font-size: 0;
    line-height: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.live-sales-ui .live-sales-fab svg {
    display: block;
    width: 22px;
    height: 22px;
}

.live-sales-ui .live-sales-fab:hover {
    background: var(--ls-coral-deep);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 18px 32px rgba(239, 98, 108, 0.42), 0 0 0 8px rgba(239, 98, 108, 0.14);
}

.live-sales-ui .live-sales-fab:active {
    transform: translateY(-1px) scale(0.98);
}

.live-sales-ui .live-sales-fab[hidden] {
    display: none !important;
}

/* ---------- Bottom navigation (match dashboard) ---------- */
.live-sales-ui .live-sales-bottomnav {
    position: relative;
}

.live-sales-ui .live-sales-bottomnav .sbo-bottom-nav,
.live-sales-ui .sbo-bottom-nav {
    height: 72px;
    padding: 10px 6px 12px;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: 25;
}

.live-sales-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.live-sales-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.live-sales-ui .sbo-bottom-nav a span,
.live-sales-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.live-sales-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.live-sales-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.live-sales-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.live-sales-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.live-sales-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.live-sales-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.live-sales-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.live-sales-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.live-sales-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

/* Body-level bottom nav overrides (match dashboard) */
body.live-sales-body .sbo-bottom-nav,
body.sbo-dashboard-body.live-sales-body .live-sales-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.live-sales-body .sbo-bottom-nav a,
body.sbo-dashboard-body.live-sales-body .live-sales-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.live-sales-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.live-sales-body .live-sales-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-bottom-nav a span,
body.live-sales-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.live-sales-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

body.live-sales-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.live-sales-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.live-sales-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.live-sales-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.live-sales-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.live-sales-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .live-sales-ui .live-sales-header.sbo-staff-header,
    .live-sales-ui .sbo-live-sales-header.live-sales-header {
        padding: 16px 14px 14px;
        gap: 12px;
    }

    .live-sales-ui .live-sales-header__title,
    .live-sales-ui .live-sales-header h1 {
        font-size: 20px;
    }

    .live-sales-ui .live-sales-header__icon {
        width: 34px;
        height: 34px;
    }

    .live-sales-ui .live-sales-content.sbo-staff-content {
        padding: 14px 12px 118px;
        gap: 12px;
    }

    .live-sales-ui .live-sales-alert.sbo-live-sales-overdue {
        flex-direction: row;
        align-items: flex-start;
    }

    .live-sales-ui .live-sales-alert__cta,
    .live-sales-ui .live-sales-alert a {
        width: fit-content;
    }

    .live-sales-ui .live-sales-credits.sbo-live-sales-credits {
        flex-wrap: wrap;
        gap: 10px;
    }

    .live-sales-ui .live-sales-credits__item.is-sms,
    .live-sales-ui .live-sales-credits__item.is-wa {
        flex: 1 1 auto;
        padding: 0;
        border-left: 0;
    }

    .live-sales-ui .live-sales-credits__item.is-wa {
        padding-left: 12px;
        border-left: 1px solid #E5E7EB;
    }

    .live-sales-ui .live-sales-credits__btn {
        width: auto;
        margin-left: auto;
    }

    .live-sales-ui .live-sales-periods.sbo-live-sales-periods,
    .live-sales-ui .sbo-live-sales-periods.live-sales-periods,
    .live-sales-ui .sbo-day-closures-periods.live-sales-periods {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .live-sales-ui .live-sales-periods.sbo-live-sales-periods::-webkit-scrollbar,
    .live-sales-ui .sbo-live-sales-periods.live-sales-periods::-webkit-scrollbar,
    .live-sales-ui .sbo-day-closures-periods.live-sales-periods::-webkit-scrollbar {
        display: none !important;
    }

    .live-sales-ui .live-sales-periods a,
    .live-sales-ui .live-sales-periods button,
    .live-sales-ui .live-sales-periods__tab,
    .live-sales-ui .sbo-live-sales-periods a,
    .live-sales-ui .sbo-live-sales-periods button {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: max-content !important;
        width: auto !important;
        padding: 0 14px !important;
        white-space: nowrap !important;
    }

    .live-sales-ui .sbo-live-sale {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 14px;
    }

    .live-sales-ui .sbo-live-sale__avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .live-sales-ui .sbo-live-sale__meta > strong {
        font-size: 16px;
    }

    .live-sales-ui .sbo-live-sale__chevron {
        display: none !important;
    }

    .live-sales-ui .sbo-day-closures-summary {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .live-sales-ui .sbo-day-closures-summary strong {
        font-size: 18px;
    }

    .live-sales-ui .live-sales-closure-card__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .live-sales-ui .live-sales-custom.sbo-live-sales-custom {
        grid-template-columns: 1fr;
    }

    .live-sales-ui .live-sales-custom label {
        text-align: left;
    }

    .live-sales-ui .live-sales-custom input {
        width: 100%;
    }

    .live-sales-ui .live-sales-custom button {
        width: 100%;
    }

    .live-sales-ui .live-sales-fab.sbo-live-sales-fab {
        right: 16px;
        bottom: 90px;
        width: 56px;
        height: 56px;
    }
}

@media (min-width: 700px) {
    body.live-sales-body .sbo-dashboard.live-sales-ui,
    body.sbo-dashboard-body.live-sales-body .sbo-dashboard.live-sales-ui {
        width: 100% !important;
        max-width: 1366px !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .live-sales-ui .live-sales-content.sbo-staff-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.live-sales-body .sbo-bottom-nav,
    body.sbo-dashboard-body.live-sales-body .live-sales-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

@media (min-width: 1024px) {
    .live-sales-ui .live-sales-content.sbo-staff-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .live-sales-ui .sbo-live-sale {
        padding: 16px 16px 16px 14px;
    }
}

/* Narrow phones ? credits card layout */
@media (max-width: 371px) {
    .live-sales-ui .live-sales-credits.sbo-live-sales-credits,
    .live-sales-ui .sbo-live-sales-credits.live-sales-credits {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "sms wa"
            "btn btn";
        align-items: start;
        gap: 10px 0;
        padding: 12px;
    }

    .live-sales-ui .live-sales-credits__item.is-sms {
        grid-area: sms;
        flex: none;
        width: 100%;
        padding: 0 10px 0 0;
        min-width: 0;
        align-items: flex-start;
        gap: 8px;
    }

    .live-sales-ui .live-sales-credits__item.is-wa {
        grid-area: wa;
        flex: none;
        width: 100%;
        padding: 0 0 0 10px;
        border-left: 1px solid #E5E7EB;
        min-height: 0;
        min-width: 0;
        align-items: flex-start;
    }

    .live-sales-ui .live-sales-credits__icon,
    .live-sales-ui .live-sales-credits__item i.is-sms {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .live-sales-ui .live-sales-credits__text {
        width: 100%;
        min-width: 0;
    }

    .live-sales-ui .live-sales-credits__text small,
    .live-sales-ui .live-sales-credits__text b,
    .live-sales-ui .live-sales-credits__count {
        font-size: 14px;
    }

    .live-sales-ui .live-sales-credits__soon {
        max-width: 100%;
        min-height: 24px;
        padding: 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .live-sales-ui .live-sales-credits__btn,
    .live-sales-ui .sbo-live-sales-credits__btn.live-sales-credits__btn {
        grid-area: btn;
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
        min-height: 40px;
        justify-self: stretch;
    }
}

/* Live Sales ? readable meta text up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    .live-sales-ui .live-sales-header__subtitle,
    .live-sales-ui .live-sales-header p,
    .live-sales-ui .live-sales-header [data-live-sales-subtitle] {
        font-size: 16px;
    }

    .live-sales-ui .live-sales-alert__title {
        font-size: 18px;
    }

    .live-sales-ui .live-sales-alert__copy p,
    .live-sales-ui .live-sales-alert p {
        font-size: 16px;
    }

    .live-sales-ui .live-sales-credits__text b,
    .live-sales-ui .live-sales-credits__item b {
        font-size: 16px;
    }

    .live-sales-ui .sbo-live-sales-empty p {
        font-size: 16px;
    }

    .live-sales-ui .live-sales-filter a,
    .live-sales-ui .live-sales-filter__chip,
    .live-sales-ui .sbo-live-sales-filters a,
    .live-sales-ui .sbo-live-sales-filters button {
        font-size: 16px !important;
    }

    .live-sales-ui .live-sales-chip,
    .live-sales-ui .live-sales-chip em,
    .live-sales-ui .live-sales-summary em {
        font-size: 16px;
    }

    .live-sales-ui .live-sales-custom label {
        font-size: 16px;
    }

    .live-sales-ui .live-sales-custom input {
        font-size: 16px;
    }

    .live-sales-ui .sbo-live-sale__copy strong {
        font-size: 18px !important;
    }

    .live-sales-ui .sbo-live-sale__copy small {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   EXPENSE BOOK ? match dashboard / live-sales UI (expense-book-ui)
   ========================================================================== */

body.expense-book-body.sbo-dashboard-body,
body.sbo-dashboard-body.expense-book-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.expense-book-ui.sbo-dashboard,
.sbo-dashboard.expense-book-ui {
    --eb-blue: #3366cc;
    --eb-blue-deep: #2554b0;
    --eb-blue-soft: #e8f0fe;
    --eb-coral: #ef626c;
    --eb-coral-soft: #fdecec;
    --eb-green: #10b981;
    --eb-green-deep: #059669;
    --eb-green-soft: #e7f8f1;
    --eb-orange: #f59e0b;
    --eb-orange-soft: #fff7e8;
    --eb-text: #222;
    --eb-muted: #8a94a6;
    --eb-line: #e8edf3;
    --eb-card: #ffffff;
    --eb-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --eb-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --eb-radius: 22px;
    --eb-radius-sm: 14px;
    --eb-fs-body: 14px;
    --eb-fs-meta: 14px;
    --eb-fs-title: 16px;
    --eb-fs-heading: 18px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--eb-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
}

body.expense-book-body,
body.expense-book-body .expense-book-ui {
    font-size: 14px;
}

.expense-book-ui h1,
.expense-book-ui h2,
.expense-book-ui h3,
.expense-book-ui strong,
.expense-book-ui b {
    font-family: var(--sb-font-bold) !important;
}

.expense-book-ui em,
.expense-book-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.expense-book-ui small,
.expense-book-ui p,
.expense-book-ui label,
.expense-book-ui input,
.expense-book-ui span,
.expense-book-ui textarea {
    font-family: var(--sb-font-regular);
}

.expense-book-ui button,
.expense-book-ui .sbo-expense-filters a,
.expense-book-ui .sbo-expense-period a,
.expense-book-ui .sbo-expense-status,
.expense-book-ui .sbo-expense-tag,
.expense-book-ui .sbo-bottom-nav a.is-active {
    font-family: var(--sb-font-semibold);
}

.expense-book-ui .expense-book-header__title,
.expense-book-ui .sbo-expense-card h2,
.expense-book-ui .sbo-expense-empty h2,
.expense-book-ui .sbo-expense-period a.is-active strong {
    font-family: var(--sb-font-bold) !important;
}

/* ---------- Header ---------- */
.expense-book-ui .sbo-expense-header.expense-book-header,
.expense-book-ui .expense-book-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 0;
    padding: 18px 16px 16px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "back icon titles badge record";
    align-items: center;
    gap: 10px;
    border-bottom: 0;
    border-radius: 0 0 15px 15px;
    background: #36C;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible;
}

.expense-book-ui .expense-book-header__back,
.expense-book-ui .sbo-expense-header > a {
    grid-area: back;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font: 28px/1 var(--sb-font-regular);
    background: transparent;
    transition: background 180ms ease;
    justify-self: start;
}

.expense-book-ui .expense-book-header__back:hover,
.expense-book-ui .sbo-expense-header > a:hover {
    background: rgba(255, 255, 255, 0.14);
}

.expense-book-ui .sbo-expense-header__icon,
.expense-book-ui .expense-book-header__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    flex-shrink: 0;
    justify-self: start;
}

.expense-book-ui .expense-book-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.expense-book-ui .expense-book-header__back svg {
    display: block;
}

.expense-book-ui .expense-book-header__titles {
    grid-area: titles;
    min-width: 0;
    justify-self: stretch;
}

.expense-book-ui .expense-book-header__title,
.expense-book-ui .sbo-expense-header h1 {
    margin: 0 0 4px;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expense-book-ui .expense-book-header__subtitle,
.expense-book-ui .sbo-expense-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.35;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expense-book-ui .sbo-expense-header__badge,
.expense-book-ui .expense-book-header__badge {
    grid-area: badge;
    min-height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #F97316;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1;
    justify-self: end;
}

.expense-book-ui .expense-book-header__record,
.expense-book-ui .sbo-expense-header > button {
    grid-area: record;
    width: auto;
    max-width: max-content;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #3366CC;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--eb-shadow-sm);
    justify-self: end;
    align-self: center;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.expense-book-ui .expense-book-header__record svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.expense-book-ui .expense-book-header__record:hover:not(:disabled),
.expense-book-ui .sbo-expense-header > button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--eb-shadow);
    background: #F7F9FD;
}

.expense-book-ui .expense-book-header__record:disabled,
.expense-book-ui .sbo-expense-header > button:disabled,
.expense-book-ui .sbo-record-expense:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ---------- Content shell ---------- */
.expense-book-ui .sbo-expense-content.expense-book-content,
.expense-book-ui .expense-book-content {
    padding: 14px 16px 120px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent;
}

.expense-book-ui .sbo-alert {
    margin: 0;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    background: #FEF1F2;
    color: #DC2626;
    font-size: 14px;
    box-shadow: none;
}

/* ---------- Info note ---------- */
.expense-book-ui .sbo-expense-note {
    margin: 0;
    min-height: 0;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: start;
    gap: 12px;
    border: 1px solid #F3E8C8;
    border-radius: 12px;
    background: #FFFDF8;
    color: #92400E;
    box-shadow: var(--eb-shadow-sm);
    text-align: left;
}

.expense-book-ui .sbo-expense-note span,
.expense-book-ui .sbo-expense-note__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #FEF3C7;
    color: #D97706;
    font-size: 0;
    flex-shrink: 0;
}

.expense-book-ui .sbo-expense-note__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.expense-book-ui .sbo-expense-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #92400E;
    text-align: left;
}

.expense-book-ui .sbo-expense-note strong {
    font-family: var(--sb-font-bold);
    font-size: inherit;
}

@media (min-width: 768px) {
    .expense-book-ui .sbo-expense-note {
        align-items: center;
    }

    .expense-book-ui .sbo-expense-note p {
        font-size: 16px;
    }
}

/* ---------- Period picker (match live-sales periods tabs) ---------- */
.expense-book-ui .sbo-expense-period {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.expense-book-ui .sbo-expense-period h2 {
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--eb-muted);
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}

.expense-book-ui .sbo-expense-period h2 svg {
    display: block;
    flex-shrink: 0;
    color: #3366CC;
}

.expense-book-ui .sbo-expense-period > div {
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.expense-book-ui .sbo-expense-period > div::-webkit-scrollbar {
    display: none;
}

.expense-book-ui .sbo-expense-period a {
    flex: 1 0 auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #222 !important;
    text-decoration: none;
    box-shadow: none !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}

@media (min-width: 768px) {
    .expense-book-ui .sbo-expense-period a {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .expense-book-ui .sbo-expense-period > div {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .expense-book-ui .sbo-expense-period a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: max-content !important;
        width: auto !important;
    }
}

.expense-book-ui .sbo-expense-period a:hover {
    color: #222 !important;
    background: #F3F4F6 !important;
    border-color: transparent !important;
    transform: none !important;
}

.expense-book-ui .sbo-expense-period__icon,
.expense-book-ui .sbo-expense-period a > span.sbo-expense-period__icon,
.expense-book-ui .sbo-expense-period a small {
    display: none !important;
}

.expense-book-ui .sbo-expense-period a strong {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    text-align: center;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .expense-book-ui .sbo-expense-period a strong {
        font-size: 18px !important;
    }
}

.expense-book-ui .sbo-expense-period a.is-active {
    color: #ffffff !important;
    background: #36C !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--sb-font-bold) !important;
}

.expense-book-ui .sbo-expense-period a.is-active strong {
    font-family: var(--sb-font-bold) !important;
    color: #ffffff !important;
}

.expense-book-ui .sbo-expense-period a.is-active small {
    display: none !important;
}

.expense-book-ui .sbo-expense-custom-range[hidden] {
    display: none !important;
}

.expense-book-ui .sbo-expense-custom-range {
    margin-top: 12px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 10px;
    border: 1px solid var(--eb-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--eb-shadow-sm);
}

.expense-book-ui .sbo-expense-custom-range label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--eb-muted);
    font-size: 14px;
    text-transform: none;
    font-family: var(--sb-font-regular);
}

.expense-book-ui .sbo-expense-custom-range input {
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--eb-line);
    border-radius: 12px;
    color: var(--eb-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    background: #f8fafc;
}

.expense-book-ui .sbo-expense-custom-range button {
    align-self: end;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #36C;
    color: #fff;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.expense-book-ui .sbo-expense-custom-range button:hover {
    background: var(--eb-blue-deep);
    transform: translateY(-1px);
}

/* ---------- Summary cards ---------- */
.expense-book-ui .sbo-expense-summary {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.expense-book-ui .sbo-expense-summary article {
    min-height: 96px;
    padding: 14px 16px;
    display: grid;
    align-content: center;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label icon"
        "value icon"
        "meta icon";
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--eb-shadow-sm);
}

.expense-book-ui .sbo-expense-summary__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-self: center;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #E8F0FE;
    color: #3366CC;
    box-sizing: border-box;
}

.expense-book-ui .sbo-expense-summary__icon.is-total {
    background: #E8F0FE;
    color: #3366CC;
}

.expense-book-ui .sbo-expense-summary__icon.is-cash {
    background: #FEF3C7 !important;
    color: #B45309 !important;
    border-radius: 12px;
}

.expense-book-ui .sbo-expense-summary__icon.is-check {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border-radius: 12px;
}

.expense-book-ui .sbo-expense-summary__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.expense-book-ui .expense-book-summary__label {
    grid-area: label;
    color: var(--eb-text);
    font-size: 16px !important;
    text-transform: none;
    font-family: var(--sb-font-semibold);
    letter-spacing: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .expense-book-ui .expense-book-summary__label {
        font-size: 16px !important;
    }
}

.expense-book-ui .expense-book-summary__value {
    grid-area: value;
    margin: 8px 0 4px;
    color: var(--eb-text);
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .expense-book-ui .expense-book-summary__value {
        font-size: 24px !important;
    }
}

.expense-book-ui .expense-book-summary__meta {
    grid-area: meta;
    color: var(--eb-muted);
    font-size: 14px !important;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .expense-book-ui .expense-book-summary__meta {
        font-size: 16px !important;
    }
}

.expense-book-ui .sbo-expense-summary article.is-cash {
    border-color: #F3E8C8;
    background: #FFFDF8;
}

.expense-book-ui .sbo-expense-summary article.is-cash .expense-book-summary__value {
    color: #B45309;
}

.expense-book-ui .sbo-expense-summary article.is-check {
    border-color: #FECACA;
    background: #FEF2F2;
}

.expense-book-ui .sbo-expense-summary article.is-check .expense-book-summary__value {
    color: #DC2626;
}

/* ---------- Record CTA ---------- */
.expense-book-ui .sbo-record-expense {
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 12px;
    background: #36C;
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.expense-book-ui .sbo-record-expense:hover:not(:disabled) {
    background: #2554b0;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.28);
}

.expense-book-ui .sbo-record-expense > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0;
    color: #fff;
}

.expense-book-ui .sbo-record-expense > span svg,
.expense-book-ui .sbo-record-expense i svg {
    display: block;
}

.expense-book-ui .sbo-record-expense b {
    display: grid;
    gap: 3px;
    font-family: var(--sb-font-bold) !important;
    line-height: 1.25;
}

.expense-book-ui .expense-book-record__title {
    display: block;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .expense-book-ui .expense-book-record__title {
        font-size: 18px !important;
    }
}

.expense-book-ui .expense-book-record__subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    line-height: 1.35;
}

@media (min-width: 768px) {
    .expense-book-ui .expense-book-record__subtitle {
        font-size: 16px !important;
    }
}

.expense-book-ui .sbo-record-expense i {
    display: grid;
    place-items: center;
    opacity: 0.9;
    color: #fff;
}

/* ---------- Status filters (match live-sales filter chips) ---------- */
.expense-book-ui .sbo-expense-filters {
    margin: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
    background: transparent;
}

.expense-book-ui .sbo-expense-filters::-webkit-scrollbar {
    display: none;
}

.expense-book-ui .sbo-expense-filters a,
.expense-book-ui .expense-book-filter__chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #222 !important;
    text-decoration: none;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.expense-book-ui .sbo-expense-filters a:hover,
.expense-book-ui .expense-book-filter__chip:hover {
    transform: translateY(-1px);
    border-color: #BFDBFE !important;
    color: #2563EB !important;
    background: #ffffff !important;
}

.expense-book-ui .sbo-expense-filters a span,
.expense-book-ui .expense-book-filter__chip span {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #F1F5F9;
    color: inherit;
    font-size: 14px;
    font-family: var(--sb-font-semibold);
}

.expense-book-ui .sbo-expense-filters a.is-active,
.expense-book-ui .expense-book-filter__chip.is-active {
    border-color: #36C !important;
    background: #36C !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-family: var(--sb-font-semibold) !important;
}

.expense-book-ui .sbo-expense-filters a.is-active span,
.expense-book-ui .expense-book-filter__chip.is-active span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ---------- Expense list / cards ---------- */
.expense-book-ui .sbo-expense-list {
    display: grid;
    gap: 12px;
}

.expense-book-ui .sbo-expense-card {
    min-height: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: 44px 1fr auto 28px;
    align-items: start;
    gap: 12px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--eb-shadow-sm);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.expense-book-ui .sbo-expense-card:hover {
    border-color: #C7D2FE;
    box-shadow: var(--eb-shadow);
    transform: translateY(-1px);
}

.expense-book-ui .sbo-expense-card:focus-visible {
    outline: 3px solid rgba(51, 102, 204, 0.25);
    outline-offset: 2px;
}

.expense-book-ui .sbo-expense-card__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #FEF3C7;
    color: #B45309;
    font-size: 0;
}

.expense-book-ui .sbo-expense-card__icon svg {
    display: block;
}

.expense-book-ui .sbo-expense-card p .is-payment {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.expense-book-ui .sbo-expense-card p .is-payment svg {
    display: block;
    flex-shrink: 0;
}

.expense-book-ui .sbo-expense-status,
.expense-book-ui .sbo-expense-tag {
    gap: 5px;
}

.expense-book-ui .sbo-expense-status svg,
.expense-book-ui .sbo-expense-tag svg {
    display: block;
    flex-shrink: 0;
}

.expense-book-ui .sbo-expense-card > button svg {
    display: block;
}

.expense-book-ui .sbo-expense-empty__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #FEF3C7;
    color: #D97706;
}

.expense-book-ui .sbo-expense-empty__icon svg {
    display: block;
}

.expense-book-ui .sbo-expense-card h2 {
    margin: 2px 0 6px;
    color: #222;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .expense-book-ui .sbo-expense-card h2 {
        font-size: 18px;
    }
}

.expense-book-ui .sbo-expense-card p {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--eb-muted);
    font-size: 14px;
    line-height: 1.35;
}

@media (min-width: 768px) {
    .expense-book-ui .sbo-expense-card p {
        font-size: 16px;
    }
}

.expense-book-ui .sbo-expense-card p i {
    color: #CBD5E1;
    font-style: normal;
}

.expense-book-ui .sbo-expense-card p .is-payment {
    font-family: var(--sb-font-semibold);
}

.expense-book-ui .sbo-expense-card p .is-payment.is-cash {
    color: #059669;
}

.expense-book-ui .sbo-expense-card p .is-payment.is-digital {
    color: #2563EB;
}

.expense-book-ui .expense-book-card__amount {
    margin-top: 2px;
    color: #36C;
    white-space: nowrap;
    font-family: var(--sb-font-extrabold, var(--sb-font-bold)) !important;
    font-size: 16px !important;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .expense-book-ui .expense-book-card__amount {
        font-size: 18px !important;
    }
}

.expense-book-ui .sbo-expense-card > button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748B;
    font-size: 18px;
    cursor: pointer;
}

.expense-book-ui .sbo-expense-card > button:hover {
    background: #F1F5F9;
}

.expense-book-ui .sbo-expense-status,
.expense-book-ui .sbo-expense-tag {
    min-height: 0;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #475569;
    background: #F1F5F9;
    border-color: #E2E8F0;
    font-size: 14px;
    line-height: 1.2;
    font-family: var(--sb-font-semibold);
    white-space: nowrap;
}

.expense-book-ui .sbo-expense-status.is-needs-check,
.expense-book-ui .sbo-expense-status.is-waiting-check {
    background: #FFFBEB;
    color: #D97706;
    border-color: #FDE68A;
}

.expense-book-ui .sbo-expense-status.is-needs-photo {
    background: #FFFBEB;
    color: #D97706;
    border-color: #FDE68A;
}

.expense-book-ui .sbo-expense-status.is-approved {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}

.expense-book-ui .sbo-expense-status.is-not-approved {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

.expense-book-ui .sbo-expense-tag.is-photo {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}

.expense-book-ui .sbo-expense-tag.is-no-photo {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

.expense-book-ui .sbo-expense-tag.is-items {
    background: #EFF6FF;
    color: #2563EB;
    border-color: #BFDBFE;
}

.expense-book-ui .sbo-expense-empty {
    padding: 48px 20px;
    display: grid;
    justify-items: center;
    gap: 6px;
    border: 1.5px dashed #d5dbe3;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: none;
}

.expense-book-ui .sbo-expense-empty > span {
    color: #D97706;
    font-size: 30px;
}

.expense-book-ui .sbo-expense-empty h2 {
    margin: 12px 0 4px;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px;
    line-height: 1.2;
    color: #222;
}

.expense-book-ui .sbo-expense-empty p {
    margin: 0;
    color: var(--eb-muted);
    font-size: 14px;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.expense-book-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.expense-book-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.expense-book-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.expense-book-ui .sbo-bottom-nav a span,
.expense-book-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.expense-book-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.expense-book-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.expense-book-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.expense-book-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.expense-book-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.expense-book-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.expense-book-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.expense-book-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.expense-book-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

/* Body-level bottom nav overrides (match dashboard) */
body.expense-book-body .sbo-bottom-nav,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.expense-book-body .sbo-bottom-nav a,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.expense-book-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.expense-book-body .sbo-bottom-nav a span,
body.expense-book-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.expense-book-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

body.expense-book-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.expense-book-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.expense-book-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.expense-book-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.expense-book-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.expense-book-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

/* ---------- Modal + detail (body-scoped) ---------- */
body.expense-book-body .sbo-expense-modal__dialog,
body.expense-book-body .sbo-expense-detail > section {
    border-radius: 20px;
    background: #fff !important;
    box-shadow: 0 25px 65px rgba(15, 30, 55, 0.28);
    border: 1px solid #E8EDF3;
    overflow-x: hidden;
    max-width: 100%;
}

body.expense-book-body .sbo-expense-modal__handle,
body.expense-book-body .sbo-expense-detail__handle {
    background: #E2E8F0;
}

body.expense-book-body .sbo-expense-modal header,
body.expense-book-body .sbo-expense-detail header {
    border-bottom: 1px solid #E8EDF3;
    background: #fff;
}

body.expense-book-body .sbo-expense-modal form {
    background: #fff;
    overflow-x: hidden;
    min-width: 0;
    max-width: 100%;
}

body.expense-book-body .sbo-expense-modal header > span {
    background: #E8F0FE;
    color: #3366CC;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(51, 102, 204, 0.12);
}

body.expense-book-body .sbo-expense-modal header h2,
body.expense-book-body .sbo-expense-detail h2 {
    font-family: var(--sb-font-bold) !important;
    font-size: 22px;
    color: #222;
}

body.expense-book-body .sbo-expense-modal header p,
body.expense-book-body .sbo-expense-detail header p {
    color: #8a94a6;
    font-size: 14px;
}

body.expense-book-body .sbo-expense-modal header p b,
body.expense-book-body .sbo-expense-modal header p [data-expense-step-number] {
    color: #3366CC;
    font-family: var(--sb-font-bold);
}

body.expense-book-body .sbo-expense-modal header button,
body.expense-book-body .sbo-expense-detail header button {
    background: #F1F5F9;
    color: #64748B;
    transition: background 160ms ease, color 160ms ease;
}

body.expense-book-body .sbo-expense-modal header button[hidden],
body.expense-book-body .sbo-expense-modal header button[data-expense-back][hidden] {
    display: none !important;
    visibility: hidden;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
}

body.expense-book-body .sbo-expense-modal header {
    grid-template-columns: auto 40px minmax(0, 1fr) 38px;
    gap: 10px;
}

body.expense-book-body .sbo-expense-modal header:not(:has([data-expense-back]:not([hidden]))) {
    grid-template-columns: 40px minmax(0, 1fr) 38px;
}

body.expense-book-body .sbo-expense-modal header button:hover,
body.expense-book-body .sbo-expense-detail header button:hover {
    background: #E8F0FE;
    color: #3366CC;
}

body.expense-book-body .sbo-expense-progress {
    gap: 6px;
    padding: 12px 20px 0;
}

body.expense-book-body .sbo-expense-progress i {
    height: 5px;
    border-radius: 999px;
    background: #E8EDF3;
}

body.expense-book-body .sbo-expense-progress i.is-active {
    background: linear-gradient(90deg, #3366CC 0%, #4B7FE3 100%);
    box-shadow: 0 2px 8px rgba(51, 102, 204, 0.28);
}

body.expense-book-body .sbo-expense-form-errors {
    border-radius: 12px;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: clamp(14px, 3.4vw, 16px);
}

body.expense-book-body .sbo-expense-step h3 {
    font-family: var(--sb-font-bold) !important;
    font-size: 22px;
    color: #222;
}

body.expense-book-body .sbo-expense-step > p {
    color: #8a94a6;
    font-size: 14px;
}

body.expense-book-body .sbo-expense-amount {
    border: 2px solid #3366CC;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.expense-book-body .sbo-expense-amount:focus-within {
    border-color: #2554B0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

body.expense-book-body .sbo-expense-amount span {
    border-right: 1px solid #D7E2F5;
    color: #3366CC;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px;
}

body.expense-book-body .sbo-expense-amount input {
    color: #222;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px;
}

body.expense-book-body .sbo-expense-next,
body.expense-book-body .sbo-expense-save {
    border-radius: 12px;
    background: #3366CC;
    color: #fff;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.expense-book-body .expense-book-modal__btn {
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.expense-book-body .expense-book-modal__btn {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-option__label {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-payment__label {
        font-size: 18px !important;
    }
}

body.expense-book-body .sbo-expense-next:hover:not(:disabled),
body.expense-book-body .sbo-expense-save:hover:not(:disabled) {
    background: #2554B0;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.28);
    transform: translateY(-1px);
}

body.expense-book-body .sbo-expense-next:disabled {
    background: #C5D4F0;
    color: #fff;
    box-shadow: none;
    transform: none;
}

body.expense-book-body .sbo-expense-save {
    background: #3366CC;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22);
}

body.expense-book-body .sbo-expense-save:hover:not(:disabled) {
    background: #2554B0;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.28);
}

body.expense-book-body .sbo-expense-options--categories label > span,
body.expense-book-body .sbo-expense-options--payment label > span {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body.expense-book-body .sbo-expense-options--categories label > span {
    min-height: 56px;
    line-height: 1.3;
}

body.expense-book-body .sbo-expense-options--categories input:checked + span {
    border-color: #3366CC;
    background: #fff;
    box-shadow: inset 0 0 0 1px #3366CC;
    color: #3366CC;
}

body.expense-book-body .sbo-expense-options--categories .expense-book-option__icon,
body.expense-book-body .expense-book-option__icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    border-radius: 10px !important;
    background: #EEF3FB !important;
    color: #3366CC;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px #D7E3F8;
}

body.expense-book-body .sbo-expense-options--categories .expense-book-option__icon svg,
body.expense-book-body .expense-book-option__icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

body.expense-book-body .sbo-expense-options--categories input:checked + span .expense-book-option__icon,
body.expense-book-body .sbo-expense-options--categories input:checked + span i {
    background: #3366CC !important;
    color: #fff !important;
    box-shadow: none;
}

body.expense-book-body .sbo-expense-options--payment strong,
body.expense-book-body .expense-book-payment__label {
    font-family: var(--sb-font-semibold);
    font-size: 16px;
}

body.expense-book-body .sbo-expense-options--payment small {
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-options--payment input:checked + span {
    border-color: #3366CC;
    background: #fff;
    box-shadow: inset 0 0 0 1px #3366CC;
}

body.expense-book-body .sbo-expense-options--payment input:checked + span > i {
    border: 5px solid #3366CC;
}

/* Payment method icons ? top-align with text on mobile */
@media (max-width: 767px) {
    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment.expense-book-payment-align-top label > span,
    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment label > span {
        align-items: start !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment label > span > b,
    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment label > span > i {
        align-self: start !important;
        margin-top: 2px !important;
    }
}

body.expense-book-body .sbo-expense-custom-category {
    margin-top: 14px;
}

body.expense-book-body .sbo-expense-custom-category[hidden] {
    display: none !important;
}

body.expense-book-body .sbo-expense-custom-category__hint {
    display: block;
    margin-top: 6px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 12px;
    line-height: 1.35;
}

body.expense-book-body .sbo-expense-item-linker {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
}

body.expense-book-body .sbo-expense-item-linker > header > span {
    background: #E8F0FE;
    color: #3366CC;
}

body.expense-book-body .sbo-expense-item-linker > header strong {
    font-family: var(--sb-font-semibold);
    font-size: 16px;
}

body.expense-book-body .sbo-expense-item-linker > header strong small {
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-item-linker > header p {
    margin-top: 6px;
    color: #8a94a6;
    font-size: 14px;
    line-height: 1.45;
}

body.expense-book-body .sbo-expense-item-linker__choice button {
    min-height: 48px;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-item-linker__choice button:last-child,
body.expense-book-body .sbo-expense-item-linker__choice button.is-active {
    border-color: #3366CC;
    background: #3366CC;
    color: #fff;
}

body.expense-book-body .sbo-expense-item-search {
    min-height: 48px;
    padding: 0 14px;
    gap: 10px;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none;
}

body.expense-book-body .sbo-expense-item-search input {
    font-family: var(--sb-font-regular);
    font-size: 14px;
    color: #222;
}

body.expense-book-body .sbo-expense-item-search input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

body.expense-book-body .sbo-expense-item-search:focus-within {
    border-color: #C7D2FE !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.expense-book-body .sbo-expense-item-categories {
    margin: 12px 0 8px;
    gap: 8px;
    padding: 2px 0;
}

body.expense-book-body .sbo-expense-item-categories button {
    min-height: 40px !important;
    padding: 8px 14px !important;
    gap: 8px;
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #222 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    box-shadow: none;
}

body.expense-book-body .sbo-expense-item-categories button.is-active {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.expense-book-body .sbo-expense-item-search__status {
    min-height: 18px;
    font-size: 14px;
    color: #8a94a6;
}

body.expense-book-body .sbo-expense-item-results {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

body.expense-book-body .sbo-expense-item-results > button {
    min-height: 68px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center;
    gap: 10px;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #222;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    overflow: hidden;
}

body.expense-book-body .sbo-expense-item-results > button:hover {
    border-color: #C7D2FE !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.1);
}

body.expense-book-body .sbo-expense-item-results > button > strong {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    line-height: 1.3;
    color: inherit;
}

body.expense-book-body .sbo-expense-item-results > button > strong,
body.expense-book-body .sbo-expense-item-results > button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.expense-book-body .sbo-expense-item-results > button small {
    font-family: var(--sb-font-regular);
    font-size: 13px;
    color: #8a94a6;
}

body.expense-book-body .sbo-expense-item-results > button.is-selected {
    border: 2px solid #3366CC !important;
    background: #F5F8FF !important;
    color: #3366CC;
    box-shadow: 0 4px 14px rgba(51, 102, 204, 0.12);
}

/* Plus / action icon removed from item cards */
body.expense-book-body .sbo-expense-item-results > button > .expense-book-item__action,
body.expense-book-body .sbo-expense-item-results > button > i.expense-book-item__action,
body.expense-book-body .sbo-expense-item-results > button > i:last-child {
    display: none !important;
}

body.expense-book-body .expense-book-item-search__icon {
    width: 20px;
    height: 20px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.expense-book-body .expense-book-item-search__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

body.expense-book-body .expense-book-item-search__clear {
    color: #94a3b8;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

body.expense-book-body .expense-book-item-search__clear:hover {
    background: #EEF3FB;
    color: #3366CC;
}

body.expense-book-body .expense-book-item-cat__icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #EEF3FB;
    color: #3366CC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.expense-book-body .sbo-expense-item-categories button.is-active .expense-book-item-cat__icon {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

body.expense-book-body .expense-book-item-cat__icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

body.expense-book-body .sbo-expense-item-results > button > .expense-book-item__icon,
body.expense-book-body .expense-book-item__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 10px;
    background: #EEF3FB;
    color: #3366CC;
    display: grid !important;
    place-items: center;
    font-size: 0 !important;
    line-height: 0;
}

body.expense-book-body .sbo-expense-item-results > button > .expense-book-item__icon svg,
body.expense-book-body .expense-book-item__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

body.expense-book-body .sbo-expense-item-results > button > i.expense-book-item__action,
body.expense-book-body .sbo-expense-item-results > button > .expense-book-item__action,
body.expense-book-body .sbo-expense-item-results > button > i:not(.expense-book-item__icon) {
    display: none !important;
}

body.expense-book-body .sbo-expense-item-results > button.is-selected > .expense-book-item__icon {
    background: #3366CC;
    color: #fff;
}

body.expense-book-body .sbo-expense-item-empty {
    font-size: 14px;
}

body.expense-book-body .sbo-expense-selected-items {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E8EDF3;
    background: transparent;
}

body.expense-book-body .sbo-expense-selected-items h4 {
    color: #3366CC;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px;
    letter-spacing: 0;
}

body.expense-book-body .sbo-expense-selected-items article,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article {
    padding: 10px 12px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.expense-book-body .sbo-expense-selected-items article > header,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #EEF2F7 !important;
    background: transparent !important;
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}

body.expense-book-body .sbo-expense-selected-items article > header strong,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong {
    margin: 0 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #222 !important;
}

body.expense-book-body .sbo-expense-selected-items article > header small,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small {
    margin: 0 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    color: #8a94a6 !important;
}

body.expense-book-body .sbo-expense-selected-items article > header button,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
}

body.expense-book-body .sbo-expense-selected-items article > header button svg,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header button svg {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
}

body.expense-book-body .sbo-expense-selected-items article > div,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > div {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
}

body.expense-book-body .sbo-expense-selected-items label {
    gap: 8px;
    color: #8a94a6;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

body.expense-book-body .sbo-expense-selected-items input {
    height: 48px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff !important;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    color: #222;
}

body.expense-book-body .sbo-expense-selected-items input:focus,
body.expense-book-body .sbo-expense-field input:focus,
body.expense-book-body .sbo-expense-field textarea:focus {
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.1);
    background: #fff;
}

body.expense-book-body .sbo-expense-review {
    border-radius: 12px;
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.expense-book-body .sbo-expense-item-browser {
    background: transparent;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body.expense-book-body .sbo-expense-item-linker {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body.expense-book-body .sbo-expense-item-empty {
    background: #fff;
}

body.expense-book-body .sbo-expense-review small {
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-review strong {
    font-family: var(--sb-font-bold) !important;
    font-size: 22px;
}

body.expense-book-body .sbo-expense-review p {
    font-size: 14px;
}

body.expense-book-body .sbo-expense-field {
    font-size: 14px;
}

body.expense-book-body .sbo-expense-field input[type="text"],
body.expense-book-body .sbo-expense-field textarea {
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-upload > strong {
    font-family: var(--sb-font-semibold);
    font-size: 16px;
}

body.expense-book-body .sbo-expense-upload > strong small {
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-upload em {
    font-style: normal;
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail header > span {
    background: #FEF3C7;
    color: #B45309;
}

body.expense-book-body .sbo-expense-detail__hero {
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(232, 237, 243, 0.9);
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.expense-book-body .sbo-expense-detail__hero strong {
    color: #36C;
    font-family: var(--sb-font-extrabold, var(--sb-font-bold)) !important;
    font-size: 28px;
}

body.expense-book-body .sbo-expense-detail dl div {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.expense-book-body .sbo-expense-detail dt {
    color: #8a94a6;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail dd {
    color: #222;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
}

body.expense-book-body .sbo-expense-detail dd > span {
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail__contact > small {
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail__linked-items h3 {
    font-family: var(--sb-font-bold) !important;
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail__review-actions form:first-child button {
    border-color: #16A34A;
    background: #16A34A;
    color: #fff;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail__review-actions form:last-child button {
    border-color: #F87171;
    background: #fff;
    color: #DC2626;
    font-family: var(--sb-font-semibold);
    font-size: 14px;
}

body.expense-book-body .sbo-expense-detail__contact a {
    border-color: #BFDBFE;
    color: #3366CC;
    border-radius: 12px;
}

body.expense-book-body .sbo-expense-detail__contact a:last-child {
    border-color: #99F6E4;
    color: #0F766E;
}

body.expense-book-body .sbo-expense-detail__linked-items h3 {
    color: #3366CC;
}

body.expense-book-body .sbo-expense-detail__linked-items > section {
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
}

body.expense-book-body .sbo-expense-detail__linked-items article > b,
body.expense-book-body .sbo-expense-detail__linked-items footer {
    color: #3366CC;
}

body.expense-book-body .sbo-expense-detail__linked-items footer {
    background: #E8F0FE;
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
    .expense-book-ui .sbo-expense-header.expense-book-header,
    .expense-book-ui .expense-book-header {
        min-height: 0;
        padding: 12px 12px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "back titles record";
        gap: 10px;
        align-items: center;
    }

    .expense-book-ui .sbo-expense-header__icon,
    .expense-book-ui .expense-book-header__icon {
        display: none;
    }

    .expense-book-ui .expense-book-header__title,
    .expense-book-ui .sbo-expense-header h1 {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .expense-book-ui .expense-book-header__subtitle,
    .expense-book-ui .sbo-expense-header p {
        display: block !important;
        font-size: 12px;
    }

    .expense-book-ui .sbo-expense-header__badge,
    .expense-book-ui .expense-book-header__badge {
        display: none;
    }

    .expense-book-ui .expense-book-header__record,
    .expense-book-ui .sbo-expense-header > button {
        grid-area: record;
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 11px;
        width: auto;
        max-width: max-content;
        justify-self: end;
    }

    .expense-book-ui .sbo-expense-content.expense-book-content,
    .expense-book-ui .expense-book-content {
        padding: 12px 12px 120px;
        gap: 12px;
    }

    .expense-book-ui .sbo-expense-period > div {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .expense-book-ui .sbo-expense-period a {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        padding: 0 16px !important;
        font-size: 16px !important;
    }

    .expense-book-ui .sbo-expense-period a strong {
        font-size: 16px !important;
    }

    .expense-book-ui .sbo-expense-summary {
        grid-template-columns: 1fr;
    }

    .expense-book-ui .sbo-expense-custom-range {
        grid-template-columns: 1fr;
    }

    .expense-book-ui .sbo-expense-card {
        grid-template-columns: 40px 1fr auto;
        gap: 12px;
        padding: 14px;
    }

    .expense-book-ui .sbo-expense-card > button {
        display: none;
    }

    /* Keep expense modals centered on mobile (override bottom-sheet) */
    body.expense-book-body .sbo-expense-modal,
    body.expense-book-body .sbo-expense-detail {
        padding: 16px !important;
        place-items: center !important;
        align-content: center;
        box-sizing: border-box;
    }

    body.expense-book-body .sbo-expense-modal__dialog,
    body.expense-book-body .sbo-expense-detail > section {
        width: min(100%, 520px) !important;
        max-height: min(88dvh, calc(100vh - 32px)) !important;
        margin: 0 auto;
        border-radius: 20px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.expense-book-body .sbo-expense-modal__handle,
    body.expense-book-body .sbo-expense-detail__handle {
        display: none;
    }

    body.expense-book-body .sbo-expense-modal form {
        padding: 18px 16px 20px;
    }

    body.expense-book-body .sbo-expense-next,
    body.expense-book-body .sbo-expense-save {
        margin-bottom: 4px;
    }
}

/* ---------- Expense book SVG icon polish (modal / detail) ---------- */
body.expense-book-body .sbo-expense-modal header > span,
body.expense-book-body .sbo-expense-detail header > span {
    font-size: 0;
    color: #3366CC;
}

body.expense-book-body .sbo-expense-modal header > span svg,
body.expense-book-body .sbo-expense-detail header > span svg,
body.expense-book-body .sbo-expense-modal header button svg,
body.expense-book-body .sbo-expense-detail header button svg {
    display: block;
}

body.expense-book-body .sbo-expense-modal header button,
body.expense-book-body .sbo-expense-detail header button {
    display: grid;
    place-items: center;
}

body.expense-book-body .sbo-expense-step__emoji {
    width: 64px;
    height: 64px;
    justify-self: center;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #EEF3FF 0%, #E0E9FC 100%);
    color: #3366CC;
    font-size: 0;
    box-shadow:
        inset 0 0 0 1px rgba(51, 102, 204, 0.14),
        0 8px 20px rgba(51, 102, 204, 0.12);
}

body.expense-book-body .sbo-expense-step__emoji svg {
    display: block;
}

body.expense-book-body .sbo-expense-next,
body.expense-book-body .sbo-expense-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.expense-book-body .sbo-expense-next span {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
}

body.expense-book-body .sbo-expense-next svg,
body.expense-book-body .sbo-expense-save svg {
    display: block;
}

body.expense-book-body .sbo-expense-item-linker > header > span {
    font-size: 0;
    color: #3366CC;
}

body.expense-book-body .sbo-expense-item-linker > header > span svg,
body.expense-book-body .sbo-expense-item-linker__choice button svg,
body.expense-book-body .sbo-expense-item-search > span svg,
body.expense-book-body .sbo-expense-item-search button svg,
body.expense-book-body .sbo-expense-selected-items h4 svg {
    display: block;
}

body.expense-book-body .sbo-expense-item-linker__choice button,
body.expense-book-body .sbo-expense-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.expense-book-body .sbo-expense-selected-items h4 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.expense-book-body .sbo-expense-options--payment label > span > b {
    font-size: 0;
    color: #B45309;
}

body.expense-book-body .sbo-expense-options--payment label > span > b.is-mpesa {
    color: #0F766E;
}

body.expense-book-body .sbo-expense-options--payment label > span > b.is-card {
    color: #3366CC;
}

body.expense-book-body .sbo-expense-options--payment label > span > b svg {
    display: block;
}

body.expense-book-body .sbo-expense-review i {
    font-size: 0;
    color: #10B981;
}

body.expense-book-body .sbo-expense-review i svg {
    display: block;
}

body.expense-book-body .sbo-expense-field > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
}

body.expense-book-body .sbo-expense-field > span svg {
    display: block;
    flex-shrink: 0;
}

body.expense-book-body .sbo-expense-upload > b {
    font-size: 0;
    color: #64748B;
}

body.expense-book-body .sbo-expense-upload > b svg {
    display: block;
}

body.expense-book-body .sbo-expense-detail__hero span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.expense-book-body .sbo-expense-detail__hero span svg {
    display: block;
    color: #0F766E;
}

body.expense-book-body .sbo-expense-detail dd > span {
    gap: 5px;
}

body.expense-book-body .sbo-expense-detail dd > span svg,
body.expense-book-body .sbo-expense-detail__receipt > b svg,
body.expense-book-body .sbo-expense-detail__missing > b svg,
body.expense-book-body .sbo-expense-detail__note b svg,
body.expense-book-body .sbo-expense-detail__linked-items h3 svg,
body.expense-book-body .sbo-expense-detail__no-items > span svg {
    display: block;
    flex-shrink: 0;
}

body.expense-book-body .sbo-expense-detail__receipt > b,
body.expense-book-body .sbo-expense-detail__missing > b,
body.expense-book-body .sbo-expense-detail__note b,
body.expense-book-body .sbo-expense-detail__no-items > span {
    font-size: 0;
}

body.expense-book-body .sbo-expense-detail__linked-items h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.expense-book-body .sbo-expense-detail__review-actions button,
body.expense-book-body .sbo-expense-detail__request button,
body.expense-book-body .sbo-expense-detail__contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.expense-book-body .sbo-expense-detail__review-actions button svg,
body.expense-book-body .sbo-expense-detail__request button svg,
body.expense-book-body .sbo-expense-detail__contact a svg {
    display: block;
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .expense-book-ui .sbo-expense-header.expense-book-header,
    .expense-book-ui .expense-book-header {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .expense-book-ui .expense-book-header__icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .expense-book-ui .sbo-expense-header__badge,
    .expense-book-ui .expense-book-header__badge {
        display: none;
    }
}
body.expense-book-body .sbo-expense-item-results > button > i,
body.expense-book-body .sbo-expense-item-results > button > .expense-book-item__action,
body.expense-book-body .sbo-expense-selected-items article > header button {
    display: grid;
    place-items: center;
    font-size: 0;
}
body.expense-book-body .sbo-expense-item-results > button > i svg,
body.expense-book-body .sbo-expense-item-results > button > .expense-book-item__action svg,
body.expense-book-body .sbo-expense-selected-items article > header button svg {
    display: block;
}
body.expense-book-body .sbo-expense-item-categories button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.expense-book-body .sbo-expense-item-categories button svg,
body.expense-book-body .sbo-expense-detail__linked-icon svg {
    display: block;
    flex-shrink: 0;
}

/* ==========================================================================
   Expense book tabs ? force live-sales look over owner.css
   ========================================================================== */
body.expense-book-body .sbo-expense-period,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.expense-book-body .sbo-expense-period > div,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period > div {
    margin: 0 !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
}

body.expense-book-body .sbo-expense-period > div::-webkit-scrollbar {
    display: none !important;
}

body.expense-book-body .sbo-expense-period a,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period a {
    flex: 1 0 auto !important;
    min-width: max-content !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

body.expense-book-body .sbo-expense-period a:hover {
    color: #111827 !important;
    background: #F3F4F6 !important;
    transform: none !important;
}

body.expense-book-body .sbo-expense-period a.is-active,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period a.is-active {
    color: #ffffff !important;
    background: #36C !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--sb-font-bold) !important;
}

body.expense-book-body .sbo-expense-period a .sbo-expense-period__icon,
body.expense-book-body .sbo-expense-period a > span,
body.expense-book-body .sbo-expense-period a small {
    display: none !important;
}

body.expense-book-body .sbo-expense-period a strong {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    body.expense-book-body .sbo-expense-period a strong,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period a strong {
        font-size: 18px !important;
    }
}

body.expense-book-body .sbo-expense-period a.is-active strong {
    font-family: var(--sb-font-bold) !important;
    color: #ffffff !important;
}

/* Status filter chips ? match live-sales filter chips */
body.expense-book-body .sbo-expense-filters,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-filters {
    margin: 0 !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 2px 0 !important;
    background: transparent !important;
}

body.expense-book-body .sbo-expense-filters a,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-filters a,
body.expense-book-body .expense-book-ui .expense-book-filter__chip {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #1F2937 !important;
    text-decoration: none !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.expense-book-body .sbo-expense-filters a:hover {
    transform: translateY(-1px);
    border-color: #BFDBFE !important;
    color: #2563EB !important;
    background: #ffffff !important;
}

body.expense-book-body .sbo-expense-filters a.is-active,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-filters a.is-active,
body.expense-book-body .expense-book-ui .expense-book-filter__chip.is-active {
    border-color: #36C !important;
    background: #36C !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-family: var(--sb-font-semibold) !important;
}

body.expense-book-body .sbo-expense-filters a span {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    color: inherit !important;
    font-size: 12px !important;
    font-family: var(--sb-font-bold) !important;
}

body.expense-book-body .sbo-expense-filters a.is-active span {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

@media (max-width: 520px) {
    body.expense-book-body .sbo-expense-period > div,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period > div {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        grid-template-columns: none !important;
    }

    body.expense-book-body .sbo-expense-period a,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period a {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        width: auto !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 16px !important;
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-period a strong {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    body.expense-book-body .sbo-expense-period a small {
        display: none !important;
    }
}

/* ==========================================================================
   Expense Book ? responsive heading font-size only (page-scoped)
   Mobile <768px: 18px | Tablet 768?1365px: 20px | Desktop =1366px: 22px
   ========================================================================== */
body.expense-book-body.sbo-dashboard-body h1,
body.expense-book-body.sbo-dashboard-body h2,
body.expense-book-body.sbo-dashboard-body h3,
body.expense-book-body.sbo-dashboard-body h4,
body.expense-book-body .expense-book-ui .expense-book-header__title,
body.expense-book-body .expense-book-ui .sbo-expense-header h1,
body.expense-book-body .expense-book-ui .sbo-expense-period h2,
body.expense-book-body .expense-book-ui .sbo-expense-card h2,
body.expense-book-body .expense-book-ui .sbo-expense-list h2,
body.expense-book-body .sbo-expense-modal header h2,
body.expense-book-body .sbo-expense-modal .sbo-expense-step h3,
body.expense-book-body .sbo-expense-modal h3,
body.expense-book-body .sbo-expense-modal h4,
body.expense-book-body .sbo-expense-detail h2,
body.expense-book-body .sbo-expense-detail h3 {
    font-size: 18px !important;
}

body.expense-book-body.sbo-dashboard-body h2,
body.expense-book-body.sbo-dashboard-body h3,
body.expense-book-body.sbo-dashboard-body h4,
body.expense-book-body .expense-book-ui .sbo-expense-period h2,
body.expense-book-body .expense-book-ui .sbo-expense-card h2,
body.expense-book-body .expense-book-ui .sbo-expense-list h2,
body.expense-book-body .sbo-expense-modal header h2,
body.expense-book-body .sbo-expense-modal .sbo-expense-step h3,
body.expense-book-body .sbo-expense-modal h3,
body.expense-book-body .sbo-expense-modal h4,
body.expense-book-body .sbo-expense-detail h2,
body.expense-book-body .sbo-expense-detail h3 {
    color: #000 !important;
}

body.expense-book-body .expense-book-ui .sbo-expense-period h2,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
}

body.expense-book-body .expense-book-ui .sbo-expense-period h2 svg,
body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-period h2 svg {
    display: block !important;
    flex-shrink: 0 !important;
    color: #3366CC !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.expense-book-body.sbo-dashboard-body h1,
    body.expense-book-body.sbo-dashboard-body h2,
    body.expense-book-body.sbo-dashboard-body h3,
    body.expense-book-body.sbo-dashboard-body h4,
    body.expense-book-body .expense-book-ui .expense-book-header__title,
    body.expense-book-body .expense-book-ui .sbo-expense-header h1,
    body.expense-book-body .expense-book-ui .sbo-expense-period h2,
    body.expense-book-body .expense-book-ui .sbo-expense-card h2,
    body.expense-book-body .expense-book-ui .sbo-expense-list h2,
    body.expense-book-body .sbo-expense-modal header h2,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step h3,
    body.expense-book-body .sbo-expense-modal h3,
    body.expense-book-body .sbo-expense-modal h4,
    body.expense-book-body .sbo-expense-detail h2,
    body.expense-book-body .sbo-expense-detail h3 {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.expense-book-body.sbo-dashboard-body h1,
    body.expense-book-body.sbo-dashboard-body h2,
    body.expense-book-body.sbo-dashboard-body h3,
    body.expense-book-body.sbo-dashboard-body h4,
    body.expense-book-body .expense-book-ui .expense-book-header__title,
    body.expense-book-body .expense-book-ui .sbo-expense-header h1,
    body.expense-book-body .expense-book-ui .sbo-expense-period h2,
    body.expense-book-body .expense-book-ui .sbo-expense-card h2,
    body.expense-book-body .expense-book-ui .sbo-expense-list h2,
    body.expense-book-body .sbo-expense-modal header h2,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step h3,
    body.expense-book-body .sbo-expense-modal h3,
    body.expense-book-body .sbo-expense-modal h4,
    body.expense-book-body .sbo-expense-detail h2,
    body.expense-book-body .sbo-expense-detail h3 {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   Expense Book ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   ========================================================================== */
body.expense-book-body,
body.expense-book-body .expense-book-ui {
    font-size: 14px !important;
}

body.expense-book-body .expense-book-header__subtitle,
body.expense-book-body .expense-book-ui .sbo-expense-header p,
body.expense-book-body .expense-book-ui .sbo-expense-card p,
body.expense-book-body .expense-book-ui .sbo-expense-card small,
body.expense-book-body .expense-book-ui .sbo-expense-status,
body.expense-book-body .expense-book-ui .sbo-expense-tag,
body.expense-book-body .expense-book-ui label,
body.expense-book-body .expense-book-ui .sbo-expense-custom-range label,
body.expense-book-body .sbo-expense-modal header p,
body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
body.expense-book-body .sbo-expense-modal label,
body.expense-book-body .sbo-expense-modal .sbo-expense-field,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items label,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header p,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-search__status,
body.expense-book-body .sbo-expense-modal .sbo-expense-review small,
body.expense-book-body .sbo-expense-modal .sbo-expense-review p,
body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong small,
body.expense-book-body .sbo-expense-detail header p,
body.expense-book-body .sbo-expense-detail dt,
body.expense-book-body .sbo-expense-detail small {
    font-size: 13px !important;
}

body.expense-book-body .expense-book-ui .expense-book-summary__label {
    font-size: 16px !important;
}

body.expense-book-body .expense-book-ui .expense-book-summary__value {
    font-size: 20px !important;
}

body.expense-book-body .expense-book-ui .expense-book-summary__meta {
    font-size: 14px !important;
}

body.expense-book-body .expense-book-ui .sbo-expense-period a,
body.expense-book-body .expense-book-ui .expense-book-header__record,
body.expense-book-body .expense-book-ui .sbo-expense-custom-range button,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header strong,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker__choice button,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-search input,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button > strong,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items h4,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items input,
body.expense-book-body .sbo-expense-modal .sbo-expense-field input,
body.expense-book-body .sbo-expense-modal .sbo-expense-field textarea,
body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong,
body.expense-book-body .sbo-expense-detail dd,
body.expense-book-body .sbo-expense-detail button {
    font-size: 14px !important;
}

body.expense-book-body .expense-book-ui .expense-book-card__amount {
    font-size: 16px !important;
    font-family: var(--sb-font-extrabold, var(--sb-font-bold)) !important;
}

body.expense-book-body .expense-book-modal__btn {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.expense-book-body .expense-book-option__label {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

body.expense-book-body .expense-book-payment__label {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

body.expense-book-body .expense-book-payment__label > small {
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: 400 !important;
}

body.expense-book-body .expense-book-field__label {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #222 !important;
}

body.expense-book-body .expense-book-field__label > small {
    color: #222 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: 400 !important;
    font-size: inherit !important;
}

body.expense-book-body .expense-book-field__label svg {
    width: 16px !important;
    height: 16px !important;
    color: #222 !important;
    flex-shrink: 0;
}

body.expense-book-body .sbo-expense-detail__contact a.expense-book-contact__btn {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

body.expense-book-body .sbo-expense-detail dd.expense-book-detail__value,
body.expense-book-body .sbo-expense-detail__receipt strong.expense-book-detail__value {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #222 !important;
}

body.expense-book-body .sbo-expense-detail__receipt .expense-book-detail__value-icon {
    color: #222 !important;
    font-size: 0 !important;
}

body.expense-book-body .sbo-expense-detail__receipt .expense-book-detail__value-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: #222 !important;
    display: block;
}

@media (min-width: 768px) {
    body.expense-book-body .expense-book-field__label {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-field__label svg {
        width: 18px !important;
        height: 18px !important;
    }

    body.expense-book-body .sbo-expense-detail__contact a.expense-book-contact__btn {
        font-size: 18px !important;
    }

    body.expense-book-body .sbo-expense-detail dd.expense-book-detail__value,
    body.expense-book-body .sbo-expense-detail__receipt strong.expense-book-detail__value {
        font-size: 18px !important;
    }

    body.expense-book-body .sbo-expense-detail__receipt .expense-book-detail__value-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

body.expense-book-body .expense-book-ui .expense-book-filter__chip {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.expense-book-body .expense-book-ui .expense-book-record__title {
    font-size: 16px !important;
}

body.expense-book-body .expense-book-ui .expense-book-record__subtitle {
    font-size: 14px !important;
}

body.expense-book-body .expense-book-ui .sbo-expense-period a strong {
    font-size: 16px !important;
}

body.expense-book-body .expense-book-ui .sbo-expense-note p,
body.expense-book-body .expense-book-ui .sbo-expense-note p strong {
    font-size: 14px !important;
}

body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment small,
body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button small,
body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small,
body.expense-book-body .expense-book-ui .sbo-expense-filters a span {
    font-size: 12px !important;
}

body.expense-book-body .sbo-expense-modal .sbo-expense-amount span {
    font-size: 16px !important;
}

body.expense-book-body .sbo-expense-modal .sbo-expense-amount input,
body.expense-book-body .sbo-expense-modal .sbo-expense-review strong,
body.expense-book-body .sbo-expense-detail__hero strong {
    font-size: 24px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.expense-book-body,
    body.expense-book-body .expense-book-ui {
        font-size: 15px !important;
    }

    body.expense-book-body .expense-book-header__subtitle,
    body.expense-book-body .expense-book-ui .sbo-expense-header p,
    body.expense-book-body .expense-book-ui .sbo-expense-card p,
    body.expense-book-body .expense-book-ui .sbo-expense-card small,
    body.expense-book-body .expense-book-ui .sbo-expense-status,
    body.expense-book-body .expense-book-ui .sbo-expense-tag,
    body.expense-book-body .expense-book-ui label,
    body.expense-book-body .expense-book-ui .sbo-expense-custom-range label,
    body.expense-book-body .sbo-expense-modal header p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
    body.expense-book-body .sbo-expense-modal label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-search__status,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong small,
    body.expense-book-body .sbo-expense-detail header p,
    body.expense-book-body .sbo-expense-detail dt,
    body.expense-book-body .sbo-expense-detail small {
        font-size: 14px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-summary__label {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-summary__value {
        font-size: 24px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-summary__meta {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .sbo-expense-period a,
    body.expense-book-body .expense-book-ui .expense-book-header__record,
    body.expense-book-body .expense-book-ui .sbo-expense-custom-range button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker__choice button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-search input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button > strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items h4,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field textarea,
    body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong,
    body.expense-book-body .sbo-expense-detail dd,
    body.expense-book-body .sbo-expense-detail button {
        font-size: 15px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-card__amount {
        font-size: 18px !important;
        font-family: var(--sb-font-extrabold, var(--sb-font-bold)) !important;
    }

    body.expense-book-body .expense-book-modal__btn {
        font-size: 18px !important;
        font-family: var(--sb-font-semibold) !important;
    }

    body.expense-book-body .expense-book-option__label {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-payment__label {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-filter__chip {
        font-size: 16px !important;
        font-family: var(--sb-font-semibold) !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-record__title {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-record__subtitle {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .sbo-expense-period a strong {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-ui .sbo-expense-note p,
    body.expense-book-body .expense-book-ui .sbo-expense-note p strong {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small,
    body.expense-book-body .expense-book-ui .sbo-expense-filters a span {
        font-size: 13px !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-amount span {
        font-size: 17px !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-amount input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review strong,
    body.expense-book-body .sbo-expense-detail__hero strong {
        font-size: 26px !important;
    }
}

@media (min-width: 1366px) {
    body.expense-book-body,
    body.expense-book-body .expense-book-ui {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-header__subtitle,
    body.expense-book-body .expense-book-ui .sbo-expense-header p,
    body.expense-book-body .expense-book-ui .sbo-expense-card p,
    body.expense-book-body .expense-book-ui .sbo-expense-card small,
    body.expense-book-body .expense-book-ui .sbo-expense-status,
    body.expense-book-body .expense-book-ui .sbo-expense-tag,
    body.expense-book-body .expense-book-ui label,
    body.expense-book-body .expense-book-ui .sbo-expense-custom-range label,
    body.expense-book-body .sbo-expense-modal header p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
    body.expense-book-body .sbo-expense-modal label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-search__status,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong small,
    body.expense-book-body .sbo-expense-detail header p,
    body.expense-book-body .sbo-expense-detail dt,
    body.expense-book-body .sbo-expense-detail small {
        font-size: 15px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-summary__label {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-summary__value {
        font-size: 24px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-summary__meta {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .sbo-expense-period a,
    body.expense-book-body .expense-book-ui .expense-book-header__record,
    body.expense-book-body .expense-book-ui .sbo-expense-custom-range button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker__choice button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-search input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button > strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items h4,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field textarea,
    body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong,
    body.expense-book-body .sbo-expense-detail dd,
    body.expense-book-body .sbo-expense-detail button {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-card__amount {
        font-size: 18px !important;
        font-family: var(--sb-font-extrabold, var(--sb-font-bold)) !important;
    }

    body.expense-book-body .expense-book-modal__btn {
        font-size: 18px !important;
        font-family: var(--sb-font-semibold) !important;
    }

    body.expense-book-body .expense-book-option__label {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-payment__label {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-filter__chip {
        font-size: 16px !important;
        font-family: var(--sb-font-semibold) !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-record__title {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-ui .expense-book-record__subtitle {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-ui .sbo-expense-period a strong {
        font-size: 18px !important;
    }

    body.expense-book-body .expense-book-ui .sbo-expense-note p,
    body.expense-book-body .expense-book-ui .sbo-expense-note p strong {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small,
    body.expense-book-body .expense-book-ui .sbo-expense-filters a span {
        font-size: 14px !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-amount span {
        font-size: 18px !important;
    }

    body.expense-book-body .sbo-expense-modal .sbo-expense-amount input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review strong,
    body.expense-book-body .sbo-expense-detail__hero strong {
        font-size: 28px !important;
    }
}

/* Expense Book ? readable header text up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    .expense-book-ui .expense-book-header__subtitle,
    .expense-book-ui .sbo-expense-header p,
    body.expense-book-body .expense-book-header__subtitle,
    body.expense-book-body .expense-book-ui .sbo-expense-header p {
        font-size: 16px !important;
    }

    .expense-book-ui .expense-book-header__record,
    .expense-book-ui .sbo-expense-header > button,
    body.expense-book-body .expense-book-ui .expense-book-header__record {
        font-size: 16px !important;
    }

    .expense-book-ui .sbo-expense-custom-range label,
    body.expense-book-body .expense-book-ui .sbo-expense-custom-range label {
        font-size: 16px !important;
    }

    .expense-book-ui .expense-book-summary__meta,
    body.expense-book-body .expense-book-ui .expense-book-summary__meta {
        font-size: 16px !important;
    }

    .expense-book-ui .expense-book-record__subtitle,
    body.expense-book-body .expense-book-ui .expense-book-record__subtitle {
        font-size: 16px !important;
    }

    .expense-book-ui .expense-book-record__title,
    body.expense-book-body .expense-book-ui .expense-book-record__title {
        font-size: 18px !important;
    }

    .expense-book-ui .sbo-expense-empty p,
    body.expense-book-body .expense-book-ui .sbo-expense-empty p {
        font-size: 16px !important;
    }

    .expense-book-ui .sbo-expense-note p,
    .expense-book-ui .sbo-expense-note p strong,
    body.expense-book-body .expense-book-ui .sbo-expense-note p,
    body.expense-book-body .expense-book-ui .sbo-expense-note p strong {
        font-size: 16px !important;
    }

    .expense-book-ui .sbo-expense-filters a,
    .expense-book-ui .expense-book-filter__chip,
    body.expense-book-body .sbo-expense-filters a,
    body.expense-book-body .expense-book-ui .expense-book-filter__chip,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-filters a,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .expense-book-filter__chip {
        font-size: 16px !important;
        font-family: var(--sb-font-regular) !important;
        font-weight: 400 !important;
    }

    .expense-book-ui .sbo-expense-filters a.is-active,
    .expense-book-ui .expense-book-filter__chip.is-active,
    body.expense-book-body .sbo-expense-filters a.is-active,
    body.expense-book-body .expense-book-ui .expense-book-filter__chip.is-active,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-filters a.is-active,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .expense-book-filter__chip.is-active {
        font-family: var(--sb-font-bold) !important;
        font-weight: 700 !important;
    }

    .expense-book-ui .sbo-expense-filters a span,
    .expense-book-ui .expense-book-filter__chip span,
    body.expense-book-body .expense-book-ui .sbo-expense-filters a span,
    body.expense-book-body .sbo-expense-filters a span,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-filters a span {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-modal header p,
    body.expense-book-body .sbo-expense-modal header p b,
    body.expense-book-body .sbo-expense-modal header p [data-expense-step-number],
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal header p,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal header p b,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal header p [data-expense-step-number] {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-modal header p {
        font-family: var(--sb-font-regular) !important;
        font-weight: 400 !important;
    }

    body.expense-book-body .sbo-expense-modal header p b,
    body.expense-book-body .sbo-expense-modal header p [data-expense-step-number] {
        font-family: var(--sb-font-bold) !important;
        font-weight: 700 !important;
    }

    body.expense-book-body .sbo-expense-step > p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-step > p {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-options--payment small,
    body.expense-book-body .expense-book-payment__label > small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment small {
        font-size: 16px !important;
    }

    body.expense-book-body .expense-book-payment__label,
    body.expense-book-body .sbo-expense-options--payment strong,
    body.expense-book-body .sbo-expense-modal .expense-book-payment__label,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .expense-book-payment__label {
        font-size: 18px !important;
    }

    body.expense-book-body .sbo-expense-item-linker > header p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header p,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header p {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-item-linker__choice button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker__choice button,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker__choice button {
        font-size: 16px !important;
    }

    /* Category grid ? readable labels; only selected is bold */
    body.expense-book-body .expense-book-option__label,
    body.expense-book-body .sbo-expense-options--categories label > span,
    body.sbo-dashboard-body.expense-book-body .expense-book-option__label {
        font-size: 16px !important;
        font-family: var(--sb-font-regular) !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
    }

    body.expense-book-body .sbo-expense-options--categories input:checked + span,
    body.expense-book-body .sbo-expense-options--categories input:checked + .expense-book-option__label,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-options--categories input:checked + span {
        font-family: var(--sb-font-bold) !important;
        font-weight: 700 !important;
    }

    /* Item linker: category chips + item titles + selected item name */
    body.expense-book-body .sbo-expense-item-categories button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button {
        font-size: 18px !important;
        font-family: var(--sb-font-regular) !important;
        font-weight: 400 !important;
    }

    body.expense-book-body .sbo-expense-item-categories button.is-active,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button.is-active,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button.is-active {
        font-family: var(--sb-font-bold) !important;
        font-weight: 700 !important;
    }

    body.expense-book-body .sbo-expense-item-results > button > strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button > strong,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button > strong {
        font-size: 18px !important;
    }

    body.expense-book-body .sbo-expense-selected-items article > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong {
        font-size: 18px !important;
    }

    body.expense-book-body .sbo-expense-item-search__status,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-search__status,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-search__status {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-item-results > button small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button small,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button small {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-selected-items article > header small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-selected-items label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items label,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items label {
        font-size: 16px !important;
    }

    /* Step 4 ? optional note + expense summary meta */
    body.expense-book-body .sbo-expense-step > p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
    body.expense-book-body .sbo-expense-review small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review small,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-review small,
    body.expense-book-body .sbo-expense-review p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review p,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-modal .sbo-expense-review p {
        font-size: 16px !important;
    }

    /* All expense-book popups ? primary text 18px */
    body.expense-book-body .sbo-expense-modal header h2,
    body.expense-book-body .sbo-expense-modal .sbo-expense-step h3,
    body.expense-book-body .sbo-expense-modal .expense-book-option__label,
    body.expense-book-body .sbo-expense-modal .expense-book-payment__label,
    body.expense-book-body .sbo-expense-modal .expense-book-field__label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-options--categories label > span,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker__choice button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-categories button,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button > strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items h4,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header strong,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field textarea,
    body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong,
    body.expense-book-body .sbo-expense-modal .expense-book-modal__btn,
    body.expense-book-body .sbo-expense-modal .sbo-expense-next,
    body.expense-book-body .sbo-expense-modal .sbo-expense-save,
    body.expense-book-body .sbo-expense-modal .sbo-expense-amount span,
    body.expense-book-body .sbo-expense-detail h2,
    body.expense-book-body .sbo-expense-detail dd,
    body.expense-book-body .sbo-expense-detail .expense-book-detail__value,
    body.expense-book-body .sbo-expense-detail__receipt strong,
    body.expense-book-body .sbo-expense-detail__missing strong,
    body.expense-book-body .sbo-expense-detail__linked-items h3,
    body.expense-book-body .sbo-expense-detail__linked-items article strong,
    body.expense-book-body .sbo-expense-detail__review-actions button,
    body.expense-book-body .sbo-expense-detail__contact a {
        font-size: 18px !important;
    }

    /* All expense-book popups ? secondary / meta text 16px */
    body.expense-book-body .sbo-expense-modal header p,
    body.expense-book-body .sbo-expense-modal header p b,
    body.expense-book-body .sbo-expense-modal header p [data-expense-step-number],
    body.expense-book-body .sbo-expense-modal .sbo-expense-step > p,
    body.expense-book-body .sbo-expense-modal label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-field,
    body.expense-book-body .sbo-expense-modal .expense-book-payment__label > small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-options--payment small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-linker > header p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-search__status,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-results > button small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items article > header small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-selected-items label,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review p,
    body.expense-book-body .sbo-expense-modal .sbo-expense-upload > strong small,
    body.expense-book-body .sbo-expense-modal .sbo-expense-custom-category__hint,
    body.expense-book-body .sbo-expense-modal .sbo-expense-item-empty,
    body.expense-book-body .sbo-expense-modal .expense-book-field__label > small,
    body.expense-book-body .sbo-expense-detail header p,
    body.expense-book-body .sbo-expense-detail dt,
    body.expense-book-body .sbo-expense-detail small,
    body.expense-book-body .sbo-expense-detail__hero span,
    body.expense-book-body .sbo-expense-detail__note span,
    body.expense-book-body .sbo-expense-detail__receipt small,
    body.expense-book-body .sbo-expense-detail__missing small,
    body.expense-book-body .sbo-expense-detail__linked-items small,
    body.expense-book-body .sbo-expense-detail__linked-items footer,
    body.expense-book-body .sbo-expense-detail__contact > small {
        font-size: 16px !important;
    }

    /* Keep large amount figures readable */
    body.expense-book-body .sbo-expense-modal .sbo-expense-amount input,
    body.expense-book-body .sbo-expense-modal .sbo-expense-review strong,
    body.expense-book-body .sbo-expense-detail__hero strong {
        font-size: 28px !important;
    }
}

/* Category grid ? mobile layout fix (no cramped 2-col wrap) */
@media (max-width: 520px) {
    body.expense-book-body .sbo-expense-options--categories,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-options--categories {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.expense-book-body .sbo-expense-options--categories label > span,
    body.expense-book-body .expense-book-option__label,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-options--categories label > span {
        min-height: 52px !important;
        padding: 10px 14px !important;
        gap: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.expense-book-body .sbo-expense-options--categories .expense-book-option__icon,
    body.expense-book-body .expense-book-option__icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 8px !important;
    }

    body.expense-book-body .sbo-expense-options--categories .expense-book-option__icon svg,
    body.expense-book-body .expense-book-option__icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    body.expense-book-body .sbo-expense-item-results,
    body.sbo-dashboard-body.expense-book-body .sbo-expense-item-results {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.expense-book-body .sbo-expense-item-results > button {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
    }

    body.expense-book-body .sbo-expense-modal__dialog,
    body.expense-book-body .sbo-expense-modal form,
    body.expense-book-body .sbo-expense-step {
        overflow-x: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   Expense Book detail popup ? responsive fonts (page-scoped)
   Mobile / Tablet / Desktop
   ========================================================================== */
body.expense-book-body .sbo-expense-detail h2 {
    font-size: 18px !important;
}

body.expense-book-body .sbo-expense-detail header p {
    font-size: 13px !important;
}

body.expense-book-body .sbo-expense-detail__hero strong {
    font-size: 28px !important;
}

body.expense-book-body .sbo-expense-detail__hero span {
    font-size: 14px !important;
}

body.expense-book-body .sbo-expense-detail dt,
body.expense-book-body .sbo-expense-detail__contact > small {
    font-size: 14px !important;
}

body.expense-book-body .sbo-expense-detail dd {
    font-size: 14px !important;
}

body.expense-book-body .sbo-expense-detail dd > span {
    font-size: 12px !important;
}

body.expense-book-body .sbo-expense-detail__missing strong,
body.expense-book-body .sbo-expense-detail__note,
body.expense-book-body .sbo-expense-detail__linked-items article strong,
body.expense-book-body .sbo-expense-detail__no-items strong,
body.expense-book-body .sbo-expense-detail__review-actions button,
body.expense-book-body .sbo-expense-detail__request button
{
    font-size: 14px !important;
}

body.expense-book-body .sbo-expense-detail__missing small,
body.expense-book-body .sbo-expense-detail__receipt small,
body.expense-book-body .sbo-expense-detail__linked-items article small,
body.expense-book-body .sbo-expense-detail__no-items small {
    font-size: 12px !important;
}

body.expense-book-body .sbo-expense-detail__linked-items h3 {
    font-size: 13px !important;
}

body.expense-book-body .sbo-expense-detail__linked-items article > b,
body.expense-book-body .sbo-expense-detail__linked-items footer strong,
body.expense-book-body .sbo-expense-detail__linked-items footer b {
    font-size: 13px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.expense-book-body .sbo-expense-detail h2 {
        font-size: 20px !important;
    }

    body.expense-book-body .sbo-expense-detail header p {
        font-size: 14px !important;
    }

    body.expense-book-body .sbo-expense-detail__hero strong {
        font-size: 32px !important;
    }

    body.expense-book-body .sbo-expense-detail__hero span {
        font-size: 15px !important;
    }

    body.expense-book-body .sbo-expense-detail dt,
    body.expense-book-body .sbo-expense-detail__contact > small {
        font-size: 13px !important;
    }

    body.expense-book-body .sbo-expense-detail dd {
        font-size: 15px !important;
    }

    body.expense-book-body .sbo-expense-detail dd > span {
        font-size: 13px !important;
    }

    body.expense-book-body .sbo-expense-detail__missing strong,
    body.expense-book-body .sbo-expense-detail__note,
    body.expense-book-body .sbo-expense-detail__linked-items article strong,
    body.expense-book-body .sbo-expense-detail__no-items strong,
    body.expense-book-body .sbo-expense-detail__review-actions button,
    body.expense-book-body .sbo-expense-detail__request button
    {
        font-size: 15px !important;
    }

    body.expense-book-body .sbo-expense-detail__missing small,
    body.expense-book-body .sbo-expense-detail__receipt small,
    body.expense-book-body .sbo-expense-detail__linked-items article small,
    body.expense-book-body .sbo-expense-detail__no-items small {
        font-size: 13px !important;
    }

    body.expense-book-body .sbo-expense-detail__linked-items h3 {
        font-size: 14px !important;
    }

    body.expense-book-body .sbo-expense-detail__linked-items article > b,
    body.expense-book-body .sbo-expense-detail__linked-items footer strong,
    body.expense-book-body .sbo-expense-detail__linked-items footer b {
        font-size: 14px !important;
    }
}

@media (min-width: 1366px) {
    body.expense-book-body .sbo-expense-detail h2 {
        font-size: 22px !important;
    }

    body.expense-book-body .sbo-expense-detail header p {
        font-size: 15px !important;
    }

    body.expense-book-body .sbo-expense-detail__hero strong {
        font-size: 34px !important;
    }

    body.expense-book-body .sbo-expense-detail__hero span {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-detail dt,
    body.expense-book-body .sbo-expense-detail__contact > small {
        font-size: 13px !important;
    }

    body.expense-book-body .sbo-expense-detail dd {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-detail dd > span {
        font-size: 14px !important;
    }

    body.expense-book-body .sbo-expense-detail__missing strong,
    body.expense-book-body .sbo-expense-detail__note,
    body.expense-book-body .sbo-expense-detail__linked-items article strong,
    body.expense-book-body .sbo-expense-detail__no-items strong,
    body.expense-book-body .sbo-expense-detail__review-actions button,
    body.expense-book-body .sbo-expense-detail__request button
    {
        font-size: 16px !important;
    }

    body.expense-book-body .sbo-expense-detail__missing small,
    body.expense-book-body .sbo-expense-detail__receipt small,
    body.expense-book-body .sbo-expense-detail__linked-items article small,
    body.expense-book-body .sbo-expense-detail__no-items small {
        font-size: 14px !important;
    }

    body.expense-book-body .sbo-expense-detail__linked-items h3 {
        font-size: 15px !important;
    }

    body.expense-book-body .sbo-expense-detail__linked-items article > b,
    body.expense-book-body .sbo-expense-detail__linked-items footer strong,
    body.expense-book-body .sbo-expense-detail__linked-items footer b {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   EXPENSE BOOK ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: expense-book-fs-min-16 ? overrides existing 14px/13px/12px rules
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.expense-book-body.expense-book-fs-min-16,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui.expense-book-fs-min-16,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui {
        font-size: 16px !important;
        --eb-fs-body: 16px;
        --eb-fs-meta: 16px;
        --eb-fs-min: 16px;
    }

    body.expense-book-body.expense-book-fs-min-16,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui p,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui span,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui small,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui label,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui a,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui button,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui input,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui select,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui textarea,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal span,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal label,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal a,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal input,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal select,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal textarea,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail span,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail label,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail a,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail dt,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail dd,
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav,
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav a,
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em);
    }

    /* Explicit under-16 overrides (existing !important 12/13/14/15px rules) */
    body.expense-book-body.expense-book-fs-min-16 .expense-book-header__subtitle,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-header p,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .expense-book-header__badge,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .expense-book-header__record,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-header > button,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-alert,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-note p,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-note p strong,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-period h2,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-custom-range label,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-custom-range input,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-custom-range button,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .expense-book-summary__meta,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .expense-book-record__subtitle,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .expense-book-filter__chip span,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-filters a span,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-card p,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-card small,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-status,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui .sbo-expense-tag,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui label,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-payment__label > small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal header p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-step > p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal label,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-field,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-selected-items label,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-linker > header p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-search__status,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-review small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-review p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-upload > strong small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-options--payment small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-results > button small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-selected-items article > header small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-custom-category__hint,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-linker > header strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-linker__choice button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-search input,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-categories button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-item-results > button > strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-selected-items h4,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-selected-items article > header strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-selected-items input,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-field input,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-field textarea,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal .sbo-expense-upload > strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail header p,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail dt,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail dd,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail dd > span,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__hero span,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__contact > small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__missing strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__missing small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__note,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__receipt small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__linked-items h3,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__linked-items article strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__linked-items article small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__linked-items article > b,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__linked-items footer strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__linked-items footer b,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__no-items strong,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__no-items small,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__review-actions button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail__request button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav a,
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav a span,
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.expense-book-body.expense-book-fs-min-16 .expense-book-ui [aria-hidden="true"],
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-modal [aria-hidden="true"],
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-detail [aria-hidden="true"],
    body.expense-book-body.expense-book-fs-min-16 .sbo-bottom-nav__icon,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-header__icon,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-header__back,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-note__icon,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-summary__icon,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-card__icon,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-empty__icon,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-period__icon,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-option__icon,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-item-search__icon,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-item-cat__icon,
    body.expense-book-body.expense-book-fs-min-16 .expense-book-detail__value-icon,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-item-results > button > i,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-item-results > button > .expense-book-item__action,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-selected-items article > header button,
    body.expense-book-body.expense-book-fs-min-16 .sbo-expense-progress i {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   EXPENSE BOOK ? fixed Next/Save footer in Record Expense popup
   Class: expense-book-modal-sticky-footer
   Header fixed | step content scrolls | button always visible at bottom
   ========================================================================== */
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-modal__dialog {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: calc(100vh - 40px) !important;
    height: calc(100dvh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-modal__handle,
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer > .sbo-expense-modal__dialog > header,
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-progress {
    flex: 0 0 auto !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer form[data-expense-form] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-form-errors {
    flex: 0 0 auto !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-step {
    display: none !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-step.is-active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-scroll .sbo-expense-step__emoji {
    display: grid !important;
    place-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-scroll > h3,
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-scroll > p {
    text-align: center !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-footer {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 8 !important;
    margin: 0 -20px !important;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #E8EDF3 !important;
    box-shadow: 0 -8px 20px rgba(15, 30, 55, 0.06) !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-footer .expense-book-modal__btn,
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-footer .sbo-expense-next,
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-footer .sbo-expense-save {
    position: static !important;
    margin: 0 !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-modal__dialog {
        height: 96vh !important;
        height: 96dvh !important;
        max-height: 96vh !important;
        max-height: 96dvh !important;
    }

    body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-footer {
        margin: 0 -12px !important;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 768px) {
    body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-modal__dialog {
        height: min(88dvh, calc(100vh - 32px)) !important;
        max-height: min(88dvh, calc(100vh - 32px)) !important;
    }

    body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .expense-book-step-footer {
        margin: 0 -16px !important;
        padding: 14px 16px 16px !important;
    }
}

/* Step 1 only ? no tall empty gap; modal hugs content */
body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-modal__dialog:has(.sbo-expense-step[data-expense-step="1"].is-active) {
    height: auto !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer form[data-expense-form]:has(.sbo-expense-step[data-expense-step="1"].is-active) {
    flex: 0 1 auto !important;
    overflow: visible !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-step[data-expense-step="1"].is-active {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-step[data-expense-step="1"].is-active .expense-book-step-scroll {
    flex: 0 0 auto !important;
    overflow: visible !important;
    padding-bottom: 4px !important;
}

body.expense-book-body .sbo-expense-modal.expense-book-modal-sticky-footer .sbo-expense-step[data-expense-step="1"].is-active .expense-book-step-footer {
    margin-top: 16px !important;
}

/* ==========================================================================
   BUSINESS REPORTS ? match dashboard / expense-book UI (business-reports-ui)
   ========================================================================== */

body.business-reports-body.sbo-dashboard-body,
body.sbo-dashboard-body.business-reports-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.business-reports-ui.sbo-dashboard,
.sbo-dashboard.business-reports-ui {
    --br-blue: #3366cc;
    --br-blue-deep: #2554b0;
    --br-blue-soft: #e8f0fe;
    --br-text: #1e293b;
    --br-muted: #8a94a6;
    --br-line: #e8edf3;
    --br-border: #E0E8FF;
    --br-card: #ffffff;
    --br-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --br-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --br-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--br-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.business-reports-body,
body.business-reports-body .business-reports-ui {
    font-size: 14px;
    color: #1e293b;
}
/* ---------- Typography ? min 14px ---------- */
body.business-reports-body,
body.business-reports-body .business-reports-ui,
body.business-reports-body .business-reports-ui p,
body.business-reports-body .business-reports-ui span,
body.business-reports-body .business-reports-ui small,
body.business-reports-body .business-reports-ui label,
body.business-reports-body .business-reports-ui a,
body.business-reports-body .business-reports-ui button,
body.business-reports-body .business-reports-ui input,
body.business-reports-body .business-reports-ui strong,
body.business-reports-body .business-reports-ui b,
body.business-reports-body .business-reports-ui em,
body.business-reports-body .business-reports-ui i,
body.business-reports-body .business-reports-ui li,
body.business-reports-body .sbo-custom-range,
body.business-reports-body .sbo-custom-range p,
body.business-reports-body .sbo-custom-range span,
body.business-reports-body .sbo-custom-range small,
body.business-reports-body .sbo-custom-range label,
body.business-reports-body .sbo-custom-range a,
body.business-reports-body .sbo-custom-range button,
body.business-reports-body .sbo-report-modal,
body.business-reports-body .sbo-report-modal p,
body.business-reports-body .sbo-report-modal span,
body.business-reports-body .sbo-report-modal small,
body.business-reports-body .sbo-report-modal label,
body.business-reports-body .sbo-report-modal a,
body.business-reports-body .sbo-report-modal button,
body.business-reports-body .sbo-report-modal strong,
body.business-reports-body .sbo-bottom-nav,
body.business-reports-body .sbo-bottom-nav a,
body.business-reports-body .sbo-bottom-nav span {
    font-size: max(14px, 1em);
}

/* Force small labels/meta up to 14px without crushing larger headings */
body.business-reports-body .business-reports-ui small,
body.business-reports-body .business-reports-ui .sbo-reports-card small,
body.business-reports-body .business-reports-ui .sbo-reports-card p,
body.business-reports-body .business-reports-ui .sbo-reports-card > span,
body.business-reports-body .business-reports-ui .sbo-reports-card > em,
body.business-reports-body .business-reports-ui .sbo-reports-row small,
body.business-reports-body .business-reports-ui .sbo-reports-row em,
body.business-reports-body .business-reports-ui .sbo-reports-profit__top small,
body.business-reports-body .business-reports-ui .sbo-reports-profit__legend,
body.business-reports-body .sbo-custom-range__label,
body.business-reports-body .sbo-custom-range__field > span,
body.business-reports-body .sbo-custom-range__presets button,
body.business-reports-body .sbo-report-modal small,
body.business-reports-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

body.business-reports-body .business-reports-ui [aria-hidden="true"],
body.business-reports-body .sbo-bottom-nav__icon,
body.business-reports-body .business-reports-header__icon,
body.business-reports-body .sbo-reports-row__icon,
body.business-reports-body .sbo-custom-range__icon,
body.business-reports-body .sbo-reports-section__title > span {
    font-size: 0 !important;
}


.business-reports-ui h1,
.business-reports-ui h2,
.business-reports-ui h3,
.business-reports-ui strong,
.business-reports-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.business-reports-ui em,
.business-reports-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.business-reports-ui small,
.business-reports-ui p,
.business-reports-ui label,
.business-reports-ui span,
.business-reports-ui button,
.business-reports-ui a {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header (match expense-book) ---------- */
body.business-reports-body .business-reports-ui .sbo-reports-header.business-reports-header,
body.business-reports-body .business-reports-ui .business-reports-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.business-reports-body .business-reports-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.business-reports-body .business-reports-header__back svg {
    display: block;
}

body.business-reports-body .business-reports-ui .sbo-reports-header__icon,
body.business-reports-body .business-reports-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
}

body.business-reports-body .business-reports-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.business-reports-body .business-reports-header__titles {
    min-width: 0;
}

body.business-reports-body .business-reports-ui .business-reports-header__title,
body.business-reports-body .business-reports-ui .sbo-reports-header h1,
body.business-reports-body .business-reports-header h1,
body.business-reports-body .business-reports-header__title,
body.sbo-dashboard-body.business-reports-body .business-reports-ui h1.business-reports-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.business-reports-body .business-reports-ui .business-reports-header__subtitle,
body.business-reports-body .business-reports-ui .sbo-reports-header p,
body.business-reports-body .business-reports-header p,
body.business-reports-body .business-reports-header__subtitle,
body.sbo-dashboard-body.business-reports-body .business-reports-ui p.business-reports-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-export,
body.business-reports-body .business-reports-header__export {
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
}

body.business-reports-body .business-reports-header__export:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

body.business-reports-body .business-reports-header__export svg {
    display: block;
    flex-shrink: 0;
}

/* ---------- Content shell ---------- */
body.business-reports-body .business-reports-ui .sbo-reports-main.business-reports-content,
body.business-reports-body .business-reports-ui .business-reports-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-branch,
body.business-reports-body .business-reports-ui .business-reports-branch {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: stretch !important;
    gap: 10px !important;
    background: #FFFDF8 !important;
    color: #92400E !important;
    border: 1px solid #F3E8C8 !important;
    border-radius: 15px !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-branch span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #FEF3C7;
    color: #D97706;
    flex-shrink: 0;
}

body.business-reports-body .business-reports-branch svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* ---------- Period tabs ---------- */
body.business-reports-body .business-reports-period,
body.business-reports-body .sbo-reports-periods-wrap {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-period h2,
body.business-reports-body .business-reports-ui .business-reports-period h2 {
    margin: 0 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

body.business-reports-body .business-reports-period h2 svg {
    display: block;
    width: 16px;
    height: 16px;
    color: #3366CC;
}

body.business-reports-body .business-reports-period h2 > span,
body.business-reports-body .business-reports-ui .business-reports-period h2 > span {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods {
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods::-webkit-scrollbar {
    display: none;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods button {
    min-height: 40px !important;
    height: auto !important;
    padding: 0 6px !important;
    display: grid !important;
    place-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #111827 !important;
    box-shadow: none !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods button:hover {
    color: #111827 !important;
    background: #F3F4F6 !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods button.is-active {
    color: #ffffff !important;
    background: #36C !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods button small {
    display: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods button strong {
    margin: 0 !important;
    color: inherit !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-periods button.is-active strong {
    font-family: var(--sb-font-bold) !important;
    color: #ffffff !important;
}

/* ---------- Loader ---------- */
body.business-reports-body .business-reports-ui .sbo-reports-loader {
    inset: 80px 16px auto !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
    padding: 28px 16px !important;
    gap: 10px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-loader__spinner {
    border-color: #D7DEEA !important;
    border-top-color: #36C !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-loader p {
    color: #8a94a6 !important;
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

/* ---------- Sections (14px gap ? same as expense-book content) ---------- */
body.business-reports-body .business-reports-ui [data-reports-content] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-section,
body.business-reports-body .sbo-reports-section {
    margin: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.business-reports-body .business-reports-ui .sbo-reports-section__title,
body.business-reports-body .sbo-reports-section__title {
    margin: 0 !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-section__title span {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-section__title span svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .business-reports-ui .sbo-reports-section__title h2,
body.business-reports-body .sbo-reports-section__title h2 {
    margin: 0 !important;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit {
    margin: 0 !important;
    padding: 16px !important;
    background: #36C !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit__top {
    margin-bottom: 10px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit__top small {
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    opacity: 0.95 !important;
    color: #fff !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit__top a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit > strong {
    display: block !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    color: #fff !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit > p {
    margin: 6px 0 14px !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit__bars {
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-profit__legend {
    margin-top: 10px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card {
    position: relative !important;
    min-height: 108px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 12px 12px 14px !important;
    display: grid !important;
    align-content: start !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "label icon"
        "value icon"
        "meta icon"
        "action icon" !important;
    border: 1px solid rgba(232, 237, 243, 0.9) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
    color: #1e293b !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.business-reports-body .business-reports-ui .sbo-reports-card:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 6px 18px rgba(30, 50, 80, 0.08) !important;
    transform: translateY(-1px);
}

body.business-reports-body .business-reports-ui .sbo-reports-card__icon {
    grid-area: icon !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    align-self: start !important;
    margin-top: 2px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card__icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card small {
    grid-area: label !important;
    display: block !important;
    margin: 0 !important;
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card strong {
    grid-area: value !important;
    display: block !important;
    margin: 6px 0 2px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card p {
    grid-area: meta !important;
    margin: 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon) {
    grid-area: action !important;
    display: block !important;
    margin-top: 4px !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card__tap-full,
body.business-reports-body .business-reports-ui .sbo-reports-card__tap-short {
    font-style: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card__tap-full {
    display: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card__tap-short {
    display: inline !important;
}

/* No extra meta row: put tap link in meta when card has neither p nor % badge */
body.business-reports-body .business-reports-ui .sbo-reports-card:not(:has(p)):not(:has(> em)) > span:not(.sbo-reports-card__icon) {
    grid-area: meta !important;
    margin-top: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card > em {
    position: static !important;
    grid-area: meta !important;
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    background: #F1F5F9 !important;
    color: #1e293b !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* When % badge exists, keep tap link on its own row below */
body.business-reports-body .business-reports-ui .sbo-reports-card:has(> em) > span:not(.sbo-reports-card__icon) {
    grid-area: action !important;
    margin-top: 4px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card > em.is-up {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card > em.is-down {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-paid {
    background: #FFFDF8 !important;
    border-color: #F3E8C8 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-paid .sbo-reports-card__icon {
    background: #FEF3C7 !important;
    color: #B45309 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-paid strong {
    color: #B45309 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-expense {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-expense .sbo-reports-card__icon {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-expense strong {
    color: #DC2626 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-vat {
    background: #E7F8F1 !important;
    border-color: #A7F3D0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-vat .sbo-reports-card__icon {
    background: #D1FAE5 !important;
    color: #059669 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-vat strong {
    color: #059669 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-staff {
    background: #F5F3FF !important;
    border-color: #DDD6FE !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-staff .sbo-reports-card__icon {
    background: #EDE9FE !important;
    color: #7C3AED !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-staff strong {
    color: #7C3AED !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-credit {
    background: #FFF7ED !important;
    border-color: #FED7AA !important;
    grid-column: 1 / -1 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-credit .sbo-reports-card__icon {
    background: #FFEDD5 !important;
    color: #EA580C !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card.is-credit strong {
    color: #EA580C !important;
}

/* Narrow phones ? give summary cards room to breathe */
@media (max-width: 420px) {
    body.business-reports-body .business-reports-ui .sbo-reports-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card,
    body.business-reports-body .business-reports-ui .sbo-reports-card.is-credit {
        grid-column: 1 / -1 !important;
        min-height: 0 !important;
        padding: 14px 14px 14px 16px !important;
        column-gap: 12px !important;
        row-gap: 2px !important;
        align-content: center !important;
        border-radius: 14px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card__icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        align-self: center !important;
        margin-top: 0 !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card small {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card strong {
        margin: 4px 0 2px !important;
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card p,
    body.business-reports-body .business-reports-ui .sbo-reports-card > em,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon) {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon) {
        margin-top: 2px !important;
    }
}

@media (min-width: 768px) {
    body.business-reports-body .business-reports-ui .sbo-reports-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card {
        min-height: 112px !important;
        padding: 14px 16px !important;
        column-gap: 12px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card.is-credit {
        grid-column: auto !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card__icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card__tap-full {
        display: inline !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card__tap-short {
        display: none !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card strong {
        font-size: 24px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card p,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon) {
        font-size: 16px !important;
    }
}

body.business-reports-body .business-reports-ui .sbo-reports-list {
    display: grid !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 10px 16px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border: 1px solid #E0E8FF !important;
    border-bottom: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.business-reports-body .business-reports-ui .sbo-reports-row > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row:hover {
    border-color: #BFDBFE !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
    transform: translateY(-1px);
}

body.business-reports-body .business-reports-ui .sbo-reports-row:last-child {
    border-bottom: 1px solid #E0E8FF !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row__icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-pnl { background: #E7F8F1 !important; color: #059669 !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-pay { background: #FEF3C7 !important; color: #B45309 !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-exp { background: #FEE2E2 !important; color: #DC2626 !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-top { background: #E8F0FE !important; color: #3366CC !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-vat { background: #E7F8F1 !important; color: #059669 !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-staff { background: #F5F3FF !important; color: #7C3AED !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row__icon.is-credit { background: #FFEDD5 !important; color: #EA580C !important; }

body.business-reports-body .business-reports-ui .sbo-reports-row strong,
body.business-reports-body .sbo-reports-row strong {
    display: block !important;
    margin: 0 0 4px !important;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row small {
    display: block !important;
    margin: 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row em {
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-row em.is-green { background: #E7F8F1 !important; color: #15803D !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row em.is-red { background: #FEE2E2 !important; color: #DC2626 !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row em.is-purple { background: #F5F3FF !important; color: #6D28D9 !important; }
body.business-reports-body .business-reports-ui .sbo-reports-row em.is-orange { background: #FFEDD5 !important; color: #C2410C !important; }

body.business-reports-body .business-reports-ui .sbo-reports-row > i {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    font-size: 18px !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    align-self: center !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share a {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    gap: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share a span {
    display: grid;
    place-items: center;
}

body.business-reports-body .business-reports-ui .sbo-reports-share a svg {
    display: block;
    width: 16px !important;
    height: 16px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share__wa {
    background: #16A34A !important;
    color: #fff !important;
    border: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share__pdf {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #E0E8FF !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share__pdf:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

/* ---------- Modals ---------- */
/* Keep every Business Reports popup centered (mobile + desktop) */
body.business-reports-body .sbo-custom-range,
body.business-reports-body .sbo-report-modal {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 16px !important;
    margin: 0 !important;
}

body.business-reports-body .sbo-custom-range[hidden],
body.business-reports-body .sbo-report-modal[hidden] {
    display: none !important;
}

body.business-reports-body .sbo-custom-range__dialog,
body.business-reports-body .sbo-report-modal__dialog {
    position: relative !important;
    margin: 0 auto !important;
    max-height: min(92vh, 100%) !important;
    border-radius: 15px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
    overflow: hidden !important;
    border: 0 !important;
}

body.business-reports-body .sbo-custom-range__header,
body.business-reports-body .sbo-report-modal__header {
    background: #36C !important;
    color: #fff !important;
    padding: 16px !important;
}

body.business-reports-body .sbo-custom-range__header h2,
body.business-reports-body .sbo-report-modal__header h2 {
    font-family: var(--sb-font-bold) !important;
    font-size: 17px !important;
    font-weight: normal !important;
    color: #fff !important;
}

body.business-reports-body .sbo-custom-range__header p,
body.business-reports-body .sbo-report-modal__header p {
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

body.business-reports-body .sbo-custom-range__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    font-size: 0 !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-custom-range__icon svg {
    display: block;
}

body.business-reports-body .sbo-custom-range__presets button {
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #1F2937 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    min-height: 40px !important;
}

body.business-reports-body .sbo-custom-range__presets button.is-active {
    border-color: #36C !important;
    background: #36C !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: var(--sb-font-bold) !important;
}

body.business-reports-body .sbo-custom-range__input {
    border: 1.5px solid #E8EDF3 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    min-height: 48px !important;
}

body.business-reports-body .sbo-custom-range__summary {
    border: 1px solid #A7F3D0 !important;
    border-radius: 12px !important;
    background: #E7F8F1 !important;
    box-shadow: none !important;
    padding: 12px 14px !important;
}

body.business-reports-body .sbo-custom-range__apply {
    min-height: 48px !important;
    background: #36C !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 15px !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-custom-range__cancel,
body.business-reports-body .sbo-report-modal__secondary {
    min-height: 48px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal__primary {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-report-modal__primary.is-navy,
body.business-reports-body .sbo-report-modal__primary.is-orange {
    background: #36C !important;
}

body.business-reports-body .sbo-pnl-hero {
    border-radius: 15px !important;
    padding: 16px !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-pnl-hero.is-profit {
    background: #10B981 !important;
}

body.business-reports-body .sbo-pnl-side,
body.business-reports-body .sbo-expense-break,
body.business-reports-body .sbo-pay-method {
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.business-reports-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.business-reports-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.business-reports-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.business-reports-ui .sbo-bottom-nav a span,
.business-reports-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.business-reports-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.business-reports-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.business-reports-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.business-reports-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.business-reports-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.business-reports-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.business-reports-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.business-reports-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.business-reports-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.business-reports-body .sbo-bottom-nav,
body.sbo-dashboard-body.business-reports-body .business-reports-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.business-reports-body .sbo-bottom-nav a,
body.sbo-dashboard-body.business-reports-body .business-reports-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

body.business-reports-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.business-reports-body .business-reports-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.business-reports-body .sbo-bottom-nav a span,
body.business-reports-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.business-reports-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

body.business-reports-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.business-reports-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.business-reports-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.business-reports-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (min-width: 700px) {
    body.business-reports-body .sbo-bottom-nav,
    body.sbo-dashboard-body.business-reports-body .business-reports-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

@media (max-width: 520px) {
    body.business-reports-body .business-reports-ui .business-reports-header {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 14px 12px 14px !important;
    }

    body.business-reports-body .business-reports-header__icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    body.business-reports-body .business-reports-header__title,
    body.business-reports-body .business-reports-ui .sbo-reports-header h1 {
        font-size: 18px !important;
        color: #ffffff !important;
        font-family: var(--sb-font-bold) !important;
    }

    body.business-reports-body .business-reports-header__subtitle,
    body.business-reports-body .business-reports-ui .sbo-reports-header p {
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-family: var(--sb-font-regular) !important;
    }

    body.business-reports-body .business-reports-header__export {
        min-height: 36px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-periods {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-periods::-webkit-scrollbar {
        display: none !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-periods button {
        flex: 0 0 auto !important;
        min-width: 96px !important;
        width: auto !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-periods button strong {
        min-height: auto !important;
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-profit > strong {
        font-size: 24px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card strong {
        font-size: 20px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-row__icon {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        border-radius: 13px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-row__icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-row > i {
        font-size: 26px !important;
        color: #64748B !important;
        min-width: 20px !important;
    }
}

/* ==========================================================================
   MORE ? match dashboard / expense-book / business-reports UI (more-ui)
   ========================================================================== */

body.more-body.sbo-dashboard-body,
body.sbo-dashboard-body.more-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.more-ui.sbo-dashboard,
.sbo-dashboard.more-ui {
    --more-blue: #3366cc;
    --more-blue-deep: #2554b0;
    --more-blue-soft: #e8f0fe;
    --more-text: #1e293b;
    --more-muted: #8a94a6;
    --more-line: #e8edf3;
    --more-border: #E0E8FF;
    --more-card: #ffffff;
    --more-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --more-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --more-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--more-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.more-body,
body.more-body .more-ui {
    font-size: 14px;
    color: #1e293b;
}

body.more-body,
body.more-body .more-ui,
body.more-body .more-ui p,
body.more-body .more-ui span,
body.more-body .more-ui small,
body.more-body .more-ui label,
body.more-body .more-ui a,
body.more-body .more-ui button,
body.more-body .more-ui input,
body.more-body .more-ui strong,
body.more-body .more-ui b,
body.more-body .sbo-owner-pin-modal,
body.more-body .sbo-owner-pin-modal p,
body.more-body .sbo-owner-pin-modal span,
body.more-body .sbo-owner-pin-modal small,
body.more-body .sbo-owner-pin-modal label,
body.more-body .sbo-owner-pin-modal a,
body.more-body .sbo-owner-pin-modal button,
body.more-body .sbo-owner-pin-modal input,
body.more-body .sbo-owner-pin-modal strong {
    font-size: max(14px, 1em);
}

body.more-body .more-ui small,
body.more-body .more-ui .sbo-menu-copy small,
body.more-body .more-ui .sbo-menu-heading small,
body.more-body .more-ui .sbo-menu-badge,
body.more-body .more-ui .sbo-menu-tag,
body.more-body .more-ui .sbo-more-footer small,
body.more-body .more-ui .sbo-more-footer a,
body.more-body .more-ui .sbo-more-footer p,
body.more-body .more-ui .sbo-more-footer p b,
body.more-body .sbo-owner-pin-modal small,
body.more-body .sbo-owner-pin-modal header p {
    font-size: 14px !important;
}

body.more-body .more-ui [aria-hidden="true"],
body.more-body .sbo-bottom-nav__icon,
body.more-body .more-header__icon,
body.more-body .more-ui .sbo-menu-icon,
body.more-body .more-ui .sbo-menu-arrow,
body.more-body .more-plan-warning__chevron {
    font-size: 0 !important;
}

.more-ui h1,
.more-ui h2,
.more-ui h3,
.more-ui strong,
.more-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.more-ui em,
.more-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.more-ui small,
.more-ui p,
.more-ui label,
.more-ui span,
.more-ui button,
.more-ui a,
.more-ui input {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.more-body .more-ui .sbo-more-header.more-header,
body.more-body .more-ui .more-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    justify-content: unset !important;
}

body.more-body .more-ui .sbo-more-header__icon,
body.more-body .more-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.more-body .more-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.more-body .more-header__titles {
    min-width: 0;
}

body.more-body .more-ui .more-header__title,
body.more-body .more-ui .sbo-more-header h1,
body.more-body .more-header h1,
body.more-body .more-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.more-body .more-ui .more-header__subtitle,
body.more-body .more-ui .sbo-more-header p,
body.more-body .more-header p,
body.more-body .more-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.more-body .more-ui .sbo-more-profile,
body.more-body .more-header__profile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}

body.more-body .more-header__avatar.sbo-avatar,
body.more-body .more-ui .more-header__avatar {
    width: 42px !important;
    height: 42px !important;
    color: #3366CC !important;
    background: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
    flex-shrink: 0;
}

body.more-body .more-header__profile-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
}

body.more-body .more-header__profile-copy strong,
body.more-body .more-ui .sbo-more-profile strong {
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.more-body .more-header__profile-copy small,
body.more-body .more-ui .sbo-more-profile small {
    margin-top: 2px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

/* ---------- Content shell ---------- */
body.more-body .more-ui .sbo-more-content.more-content,
body.more-body .more-ui .more-content {
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
}

/* ---------- Location pill ---------- */
body.more-body .more-ui .sbo-location-pill.more-location,
body.more-body .more-ui .more-location {
    margin: 0 0 4px !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: stretch !important;
    gap: 10px !important;
    background: #FFFDF8 !important;
    color: #92400E !important;
    border: 1px solid #F3E8C8 !important;
    border-radius: 15px !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    box-shadow: var(--more-shadow-sm) !important;
}

body.more-body .more-location__icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #FEF3C7 !important;
    color: #D97706 !important;
    flex-shrink: 0;
    font-size: 0 !important;
}

body.more-body .more-location__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.more-body .more-ui .more-location strong {
    color: #92400E !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.more-body .more-ui .more-location small {
    margin-left: auto !important;
    color: #B45309 !important;
    font-size: 14px !important;
}

/* ---------- Plan warning ---------- */
body.more-body .more-ui .sbo-plan-warning.more-plan-warning,
body.more-body .more-ui .more-plan-warning {
    min-height: 0 !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1px solid #FECACA !important;
    border-top: 4px solid #DC2626 !important;
    border-radius: 15px !important;
    color: #B91C1C !important;
    background: #FEF1F2 !important;
    text-decoration: none !important;
    box-shadow: var(--more-shadow-sm) !important;
}

body.more-body .more-plan-warning > span,
body.more-body .more-plan-warning__icon {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    font-size: 0 !important;
    flex-shrink: 0;
    align-self: flex-start !important;
}

body.more-body .more-plan-warning > span svg,
body.more-body .more-plan-warning__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.more-body .more-plan-warning__copy {
    flex: 1 !important;
    min-width: 0 !important;
}

body.more-body .more-plan-warning strong,
body.more-body .more-plan-warning__title {
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    color: #B91C1C !important;
}

body.more-body .more-plan-warning small,
body.more-body .more-plan-warning__desc {
    display: block !important;
    margin-top: 4px !important;
    color: #DC2626 !important;
    font-size: 16px !important;
}

body.more-body .more-plan-warning b,
body.more-body .more-plan-warning__chevron {
    color: #DC2626 !important;
    align-self: center !important;
}

/* ---------- Menu sections ---------- */
body.more-body .more-ui .sbo-menu-section.more-menu-section,
body.more-body .more-ui .more-menu-section {
    margin-top: 22px !important;
}

body.more-body .more-ui .sbo-menu-heading.more-menu-heading,
body.more-body .more-ui .more-menu-heading {
    margin: 0 0 10px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body.more-body .more-ui .more-menu-heading strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

body.more-body .more-ui .more-menu-heading small {
    margin-top: 0 !important;
    color: #333333 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.more-body .more-ui .sbo-menu-card.more-menu-card,
body.more-body .more-ui .more-menu-card {
    overflow: hidden !important;
    border: 1px solid var(--more-border) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: var(--more-shadow) !important;
}

body.more-body .more-ui .sbo-menu-row {
    width: 100% !important;
    min-height: 74px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--more-line) !important;
    color: var(--more-text) !important;
    background: #fff !important;
    text-align: left !important;
    text-decoration: none !important;
    font-family: var(--sb-font-regular) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

body.more-body .more-ui .sbo-menu-row:last-child,
body.more-body .more-ui .sbo-menu-form:last-child .sbo-menu-row {
    border-bottom: 0 !important;
}

body.more-body .more-ui .sbo-menu-row:hover {
    background: #F8FAFC !important;
}

body.more-body .more-ui .sbo-menu-icon {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    box-shadow: 0 2px 8px rgba(30, 50, 80, 0.06) !important;
}

body.more-body .more-ui .sbo-menu-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

body.more-body .more-ui .sbo-menu-icon--mint {
    color: #0F766E !important;
    background: #E7F8F1 !important;
}

body.more-body .more-ui .sbo-menu-icon--blue {
    color: #3366CC !important;
    background: #E8F0FE !important;
}

body.more-body .more-ui .sbo-menu-icon--purple {
    color: #6D28D9 !important;
    background: #F3E8FF !important;
}

body.more-body .more-ui .sbo-menu-icon--yellow {
    color: #B45309 !important;
    background: #FEF3C7 !important;
}

body.more-body .more-ui .sbo-menu-icon--green {
    color: #059669 !important;
    background: #D1FAE5 !important;
}

body.more-body .more-ui .sbo-menu-icon--red {
    color: #DC2626 !important;
    background: #FEE2E2 !important;
}

body.more-body .more-ui .sbo-menu-copy {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.more-body .more-ui .sbo-menu-copy strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.more-body .more-ui .sbo-menu-copy small {
    overflow: hidden !important;
    margin-top: 0px !important;
    color: #8a94a6 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
}

body.more-body .more-ui .sbo-menu-arrow {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    color: #A0AEC0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

body.more-body .more-ui .sbo-menu-arrow svg,
body.more-body .more-plan-warning__chevron svg {
    display: block !important;
    width: 8px !important;
    height: 14px !important;
}

body.more-body .more-plan-warning__chevron {
    display: grid !important;
    place-items: center !important;
    color: #DC2626 !important;
    font-size: 0 !important;
}

body.more-body .more-ui .sbo-menu-badge,
body.more-body .more-ui .sbo-menu-tag {
    flex: 0 0 auto !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    color: #0F766E !important;
    background: #E7F8F1 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

body.more-body .more-ui .sbo-menu-badge--yellow,
body.more-body .more-ui .sbo-menu-tag--yellow {
    color: #B45309 !important;
    background: #FEF3C7 !important;
}

body.more-body .more-ui .sbo-menu-tag--red {
    color: #B91C1C !important;
    background: #FEE2E2 !important;
    text-transform: capitalize !important;
}

body.more-body .more-ui .sbo-menu-form {
    margin: 0 !important;
}

body.more-body .more-ui .sbo-menu-row--danger .sbo-menu-copy strong {
    color: #DC2626 !important;
}

body.more-body .more-ui .sbo-menu-row--danger:hover {
    background: #FEF2F2 !important;
}

/* ---------- Footer ---------- */
body.more-body .more-ui .sbo-more-footer.more-footer,
body.more-body .more-ui .more-footer {
    padding: 24px 4px 8px !important;
    color: #8a94a6 !important;
    text-align: center !important;
}

body.more-body .more-ui .more-footer p {
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #8a94a6 !important;
}

body.more-body .more-ui .more-footer p span {
    width: 8px !important;
    height: 8px !important;
    margin-right: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}

body.more-body .more-ui .more-footer p b {
    margin-left: auto !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    color: #647084 !important;
}

body.more-body .more-ui .more-footer small {
    font-size: 14px !important;
    color: #8a94a6 !important;
}

body.more-body .more-ui .more-footer nav {
    margin-top: 8px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
}

body.more-body .more-ui .more-footer a {
    color: #647084 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

body.more-body .more-ui .more-footer a:hover {
    color: #3366CC !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.more-ui .sbo-bottom-nav {
    height: 72px;
    padding: 10px 6px 12px;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
}

.more-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.more-ui .sbo-bottom-nav a span,
.more-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 11px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.more-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.more-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.more-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.more-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.more-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.more-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.more-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.more-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.more-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    font-family: var(--sb-font-semibold);
}

body.more-body .sbo-bottom-nav,
body.sbo-dashboard-body.more-body .more-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.more-body .sbo-bottom-nav a,
body.sbo-dashboard-body.more-body .more-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.more-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.more-body .more-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.more-body .sbo-bottom-nav a span,
body.more-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.more-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

body.more-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.more-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.more-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.more-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.more-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.more-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

/* ---------- PIN modal (match Change Owner PIN design) ---------- */
body.more-body .sbo-owner-pin-modal.more-pin-modal,
body.more-body .more-pin-modal {
    padding: 20px !important;
    place-items: center !important;
    font-family: var(--sb-font-regular);
}

body.more-body .sbo-owner-pin-modal.more-pin-modal:not([hidden]),
body.more-body .more-pin-modal:not([hidden]) {
    display: grid !important;
}

body.more-body .sbo-owner-pin-modal.more-pin-modal[hidden],
body.more-body .more-pin-modal[hidden],
body.more-body .sbo-owner-pin-modal[hidden] {
    display: none !important;
}

body.more-body .sbo-owner-pin-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

body.more-body .sbo-owner-pin-modal__dialog {
    width: min(420px, 100%) !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 0 0 8px !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 30, 55, 0.28) !important;
    overflow-y: auto !important;
}

body.more-body .sbo-owner-pin-modal__handle {
    width: 40px !important;
    height: 4px !important;
    margin: 10px auto 0 !important;
    display: block !important;
    border-radius: 999px !important;
    background: #D5DCE6 !important;
}

body.more-body .sbo-owner-pin-modal__dialog > header,
body.more-body .sbo-owner-pin-modal__header {
    min-height: 0 !important;
    padding: 14px 20px 8px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 0 !important;
    background: #fff !important;
}

body.more-body .sbo-owner-pin-modal__dialog > header > span,
body.more-body .sbo-owner-pin-modal__icon {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
}

body.more-body .sbo-owner-pin-modal__dialog > header > span svg,
body.more-body .sbo-owner-pin-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.more-body .sbo-owner-pin-modal__dialog h2,
body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
body.more-body .more-pin-modal h2,
body.more-body #owner-pin-modal-title {
    margin: 0 0 2px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

@media (min-width: 768px) {
    body.more-body .sbo-owner-pin-modal__dialog h2,
    body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
    body.more-body .more-pin-modal h2,
    body.more-body #owner-pin-modal-title {
        font-size: 18px !important;
    }
}

body.more-body .sbo-owner-pin-modal__dialog header p,
body.more-body .sbo-owner-pin-modal__titles p,
body.more-body .sbo-owner-pin-modal.more-pin-modal .sbo-owner-pin-modal__titles p {
    margin: 0 !important;
    color: #8A94A6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.more-body .sbo-owner-pin-modal__dialog header button,
body.more-body .sbo-owner-pin-modal__close {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #EEF2F6 !important;
    color: #647084 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    align-self: start !important;
    margin-top: 2px !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

body.more-body .sbo-owner-pin-modal__dialog header button:hover,
body.more-body .sbo-owner-pin-modal__close:hover {
    background: #E2E8F0 !important;
    color: #334155 !important;
}

body.more-body .sbo-owner-pin-modal__dialog header button svg,
body.more-body .sbo-owner-pin-modal__close svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.more-body .sbo-owner-pin-modal form {
    padding: 8px 20px 20px !important;
}

body.more-body .sbo-owner-pin-modal form > label,
body.more-body .sbo-owner-pin-field {
    margin-bottom: 14px !important;
    display: grid !important;
    gap: 7px !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.more-body .sbo-owner-pin-field__label,
body.more-body .sbo-owner-pin-modal .sbo-owner-pin-field__label,
body.more-body .sbo-owner-pin-modal span.sbo-owner-pin-field__label {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    body.more-body .sbo-owner-pin-modal form > label,
    body.more-body .sbo-owner-pin-field,
    body.more-body .sbo-owner-pin-field__label,
    body.more-body .sbo-owner-pin-modal .sbo-owner-pin-field__label,
    body.more-body .sbo-owner-pin-modal span.sbo-owner-pin-field__label {
        font-size: 18px !important;
    }
}

body.more-body .sbo-owner-pin-input {
    min-height: 48px !important;
    padding: 0 12px 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

body.more-body .sbo-owner-pin-input:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    background: #fff !important;
}

body.more-body .sbo-owner-pin-input input {
    min-width: 0 !important;
    height: 46px !important;
    flex: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
}

body.more-body .sbo-owner-pin-input input::placeholder {
    color: #94A3B8 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}

body.more-body .sbo-owner-pin-input button {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #94A3B8 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

body.more-body .sbo-owner-pin-input button svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.more-body .sbo-owner-pin-input button:hover {
    background: #F1F5F9 !important;
    color: #647084 !important;
}

body.more-body .sbo-owner-pin-submit {
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 4px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}

body.more-body .sbo-owner-pin-submit:hover:not(:disabled) {
    background: #2554b0 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.more-body .sbo-owner-pin-submit:disabled {
    background: #95A5C0 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.more-body .sbo-owner-pin-modal form > small,
body.more-body .sbo-owner-pin-modal__hint {
    margin-top: 14px !important;
    display: block !important;
    color: #94A3B8 !important;
    text-align: center !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

body.more-body .sbo-owner-pin-modal__errors {
    margin-bottom: 14px !important;
    padding: 12px 14px !important;
    border: 1px solid #FECACA !important;
    border-radius: 12px !important;
    background: #FEF1F2 !important;
    color: #B91C1C !important;
    font-size: 13px !important;
}

body.more-body .sbo-owner-pin-modal__errors p {
    margin: 3px 0 !important;
}

/* ---------- Responsive ---------- */
@media (min-width: 700px) {
    .more-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .more-ui .sbo-bottom-nav a {
        font-size: 12px;
    }

    .more-ui .sbo-bottom-nav a span,
    .more-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
        font-size: 12px !important;
    }

    body.more-body .sbo-bottom-nav,
    body.sbo-dashboard-body.more-body .more-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    body.more-body .sbo-bottom-nav a span,
    body.more-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }
}

@media (max-width: 520px) {
    body.more-body .more-ui .more-header {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 14px 12px 14px !important;
    }

    body.more-body .more-header__icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    body.more-body .more-header__title,
    body.more-body .more-ui .sbo-more-header h1 {
        font-size: 18px !important;
        color: #ffffff !important;
        font-family: var(--sb-font-bold) !important;
    }

    body.more-body .more-header__subtitle,
    body.more-body .more-ui .sbo-more-header p {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.92) !important;
        display: none !important;
    }

    body.more-body .more-header__avatar.sbo-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }

    body.more-body .more-header__profile-copy strong {
        max-width: 72px !important;
        font-size: 13px !important;
    }

    body.more-body .more-header__profile-copy small {
        display: none !important;
    }

    body.more-body .more-ui .more-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.more-body .more-ui .more-location small {
        display: none !important;
    }

    body.more-body .more-ui .sbo-menu-row {
        padding-left: 12px !important;
        padding-right: 12px !important;
        min-height: 70px !important;
        gap: 12px !important;
    }

    body.more-body .more-ui .sbo-menu-icon {
        width: 40px !important;
        height: 40px !important;
    }

    body.more-body .more-ui .sbo-menu-copy strong {
        font-size: 16px !important;
        color: #222222 !important;
        font-family: var(--sb-font-bold) !important;
    }

    body.more-body .sbo-owner-pin-modal {
        padding: 16px !important;
        place-items: center !important;
    }

    body.more-body .sbo-owner-pin-modal__dialog {
        width: min(420px, 100%) !important;
        max-height: calc(100vh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        border-radius: 24px !important;
    }

    body.more-body .sbo-owner-pin-modal__dialog > header,
    body.more-body .sbo-owner-pin-modal__header {
        padding: 12px 16px 6px !important;
        grid-template-columns: 40px minmax(0, 1fr) 34px !important;
        gap: 10px !important;
    }

    body.more-body .sbo-owner-pin-modal__dialog > header > span,
    body.more-body .sbo-owner-pin-modal__icon {
        width: 40px !important;
        height: 40px !important;
    }

    body.more-body .sbo-owner-pin-modal__dialog header button,
    body.more-body .sbo-owner-pin-modal__close {
        width: 34px !important;
        height: 34px !important;
    }

    body.more-body .sbo-owner-pin-modal form {
        padding: 6px 16px 18px !important;
    }
}

/* ==========================================================================
   MORE ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: more-fs-min-16 ? overrides existing 14px rules without global clash
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.more-body.more-fs-min-16,
    body.more-body.more-fs-min-16 .more-ui.more-fs-min-16,
    body.more-body.more-fs-min-16 .more-ui {
        font-size: 16px;
        --more-fs-min: 16px;
    }

    body.more-body.more-fs-min-16,
    body.more-body.more-fs-min-16 .more-ui,
    body.more-body.more-fs-min-16 .more-ui p,
    body.more-body.more-fs-min-16 .more-ui span,
    body.more-body.more-fs-min-16 .more-ui small,
    body.more-body.more-fs-min-16 .more-ui label,
    body.more-body.more-fs-min-16 .more-ui a,
    body.more-body.more-fs-min-16 .more-ui button,
    body.more-body.more-fs-min-16 .more-ui input,
    body.more-body.more-fs-min-16 .more-ui strong,
    body.more-body.more-fs-min-16 .more-ui b,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal p,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal span,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal small,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal label,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal a,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal button,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal input,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal strong,
    body.more-body.more-fs-min-16 .sbo-bottom-nav,
    body.more-body.more-fs-min-16 .sbo-bottom-nav a,
    body.more-body.more-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em);
    }

    body.more-body.more-fs-min-16 .more-ui small,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-copy small,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-heading small,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-badge,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-tag,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-footer small,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-footer a,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-footer p,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-footer p b,
    body.more-body.more-fs-min-16 .more-ui .more-footer small,
    body.more-body.more-fs-min-16 .more-ui .more-footer a,
    body.more-body.more-fs-min-16 .more-ui .more-footer p,
    body.more-body.more-fs-min-16 .more-ui .more-footer p b,
    body.more-body.more-fs-min-16 .more-header__subtitle,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-header p,
    body.more-body.more-fs-min-16 .more-header p,
    body.more-body.more-fs-min-16 .more-header__avatar.sbo-avatar,
    body.more-body.more-fs-min-16 .more-ui .more-header__avatar,
    body.more-body.more-fs-min-16 .more-header__profile-copy strong,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-profile strong,
    body.more-body.more-fs-min-16 .more-header__profile-copy small,
    body.more-body.more-fs-min-16 .more-ui .sbo-more-profile small,
    body.more-body.more-fs-min-16 .more-ui .sbo-location-pill.more-location,
    body.more-body.more-fs-min-16 .more-ui .more-location,
    body.more-body.more-fs-min-16 .more-ui .more-location strong,
    body.more-body.more-fs-min-16 .more-ui .more-location small,
    body.more-body.more-fs-min-16 .more-plan-warning small,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal small,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal header p,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal__dialog header p,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal__titles p,
    body.more-body.more-fs-min-16 .sbo-owner-pin-input input,
    body.more-body.more-fs-min-16 .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.more-body.more-fs-min-16 .more-ui [aria-hidden="true"],
    body.more-body.more-fs-min-16 .sbo-bottom-nav__icon,
    body.more-body.more-fs-min-16 .more-header__icon,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-icon,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-arrow,
    body.more-body.more-fs-min-16 .more-plan-warning__chevron,
    body.more-body.more-fs-min-16 .more-location__icon,
    body.more-body.more-fs-min-16 .more-plan-warning > span,
    body.more-body.more-fs-min-16 .sbo-owner-pin-modal__close,
    body.more-body.more-fs-min-16 .sbo-owner-pin-input button {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   WHO IS SELLING ? match dashboard / expense-book / more UI (who-is-selling-ui)
   ========================================================================== */

body.who-is-selling-body.sbo-dashboard-body,
body.sbo-dashboard-body.who-is-selling-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.who-is-selling-ui.sbo-dashboard,
.sbo-dashboard.who-is-selling-ui {
    --wis-blue: #3366cc;
    --wis-blue-deep: #2554b0;
    --wis-blue-soft: #e8f0fe;
    --wis-mint: #0d9488;
    --wis-mint-soft: #e6f7f5;
    --wis-gold: #b77908;
    --wis-gold-soft: #fff8e7;
    --wis-text: #1e293b;
    --wis-muted: #8a94a6;
    --wis-line: #e8edf3;
    --wis-border: #E0E8FF;
    --wis-card: #ffffff;
    --wis-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --wis-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --wis-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wis-text);
    font-family: var(--sb-font-regular);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.who-is-selling-body,
body.who-is-selling-body .who-is-selling-ui {
    font-size: 16px;
    color: #1e293b;
}

body.who-is-selling-body,
body.who-is-selling-body .who-is-selling-ui,
body.who-is-selling-body .who-is-selling-ui p,
body.who-is-selling-body .who-is-selling-ui span,
body.who-is-selling-body .who-is-selling-ui small,
body.who-is-selling-body .who-is-selling-ui label,
body.who-is-selling-body .who-is-selling-ui a,
body.who-is-selling-body .who-is-selling-ui button,
body.who-is-selling-body .who-is-selling-ui strong,
body.who-is-selling-body .who-is-selling-ui b,
body.who-is-selling-body .who-is-selling-ui em,
body.who-is-selling-body .who-is-selling-ui i,
body.who-is-selling-body .sbo-selling-modal,
body.who-is-selling-body .sbo-selling-modal p,
body.who-is-selling-body .sbo-selling-modal span,
body.who-is-selling-body .sbo-selling-modal small,
body.who-is-selling-body .sbo-selling-modal a,
body.who-is-selling-body .sbo-selling-modal button,
body.who-is-selling-body .sbo-selling-modal strong,
body.who-is-selling-body .sbo-bottom-nav,
body.who-is-selling-body .sbo-bottom-nav a,
body.who-is-selling-body .sbo-bottom-nav span {
    font-size: max(16px, 1em);
}

body.who-is-selling-body .who-is-selling-ui small,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > small,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-review p small,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage p small,
body.who-is-selling-body .sbo-selling-modal small,
body.who-is-selling-body .sbo-bottom-nav a {
    font-size: 16px !important;
}

body.who-is-selling-body .who-is-selling-ui [aria-hidden="true"],
body.who-is-selling-body .sbo-bottom-nav__icon,
body.who-is-selling-body .who-is-selling-header__icon,
body.who-is-selling-body .who-is-selling-header__back,
body.who-is-selling-body .sbo-selling-review > span,
body.who-is-selling-body .sbo-selling-manage > span,
body.who-is-selling-body .sbo-selling-manage > b,
body.who-is-selling-body .sbo-selling-empty > span,
body.who-is-selling-body .sbo-selling-modal__icon,
body.who-is-selling-body .sbo-activity-empty > span,
body.who-is-selling-body .sbo-activity-error > span,
body.who-is-selling-body .sbo-activity-all b {
    font-size: 0 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-medal svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-medal svg {
    width: 22px;
    height: 22px;
}

.who-is-selling-ui h1,
.who-is-selling-ui h2,
.who-is-selling-ui h3,
.who-is-selling-ui strong,
.who-is-selling-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.who-is-selling-ui em,
.who-is-selling-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.who-is-selling-ui small,
.who-is-selling-ui p,
.who-is-selling-ui label,
.who-is-selling-ui span,
.who-is-selling-ui button,
.who-is-selling-ui a {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.who-is-selling-body .who-is-selling-ui .sbo-selling-header.who-is-selling-header,
body.who-is-selling-body .who-is-selling-ui .who-is-selling-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.who-is-selling-body .who-is-selling-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.who-is-selling-body .who-is-selling-header__back svg {
    display: block;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-header__icon,
body.who-is-selling-body .who-is-selling-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.who-is-selling-body .who-is-selling-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.who-is-selling-body .who-is-selling-header__titles {
    min-width: 0;
}

body.who-is-selling-body .who-is-selling-ui .who-is-selling-header__title,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-header h1,
body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui h1.who-is-selling-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 24px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.who-is-selling-body .who-is-selling-ui .who-is-selling-header__subtitle,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-header p,
body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui p.who-is-selling-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-header__action,
body.who-is-selling-body .who-is-selling-header__action {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
}

body.who-is-selling-body .who-is-selling-header__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

body.who-is-selling-body .who-is-selling-header__action svg {
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 14px;
}

/* ---------- Content shell ---------- */
body.who-is-selling-body .who-is-selling-ui .sbo-selling-content.who-is-selling-content,
body.who-is-selling-body .who-is-selling-ui .who-is-selling-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-alert {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #FDE68A !important;
    border-radius: 15px !important;
    background: #FFFBEB !important;
    color: #92400E !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

/* ---------- Leader card ---------- */
body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 14px !important;
    border: 1px solid #F3E8C8 !important;
    border-radius: 15px !important;
    background: #FFFDF8 !important;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader--empty {
    grid-template-columns: 1fr !important;
    border-color: #E0E8FF !important;
    background: #fff !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__top {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader--empty .sbo-selling-leader__top {
    grid-template-columns: 48px minmax(0, 1fr) !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-medal {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    border: 1px solid #BFDBFE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-align: center;
    flex-shrink: 0;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader--empty .sbo-selling-medal {
    background: #E8F0FE !important;
    border-color: #BFDBFE !important;
    color: #3366CC !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__copy {
    min-width: 0;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader small {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px;
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 1px solid #BFDBFE !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader--empty small {
    border-color: #BFDBFE !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader h2 {
    margin: 8px 0 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__meta {
    margin-top: 8px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader strong {
    display: inline !important;
    color: #B77908 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__meta > span {
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader p {
    margin: 8px 0 0 !important;
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__share {
    text-align: center !important;
    min-width: 78px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #F3E8C8;
    box-shadow: none;
    align-self: center;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__share b {
    display: block !important;
    color: #B77908 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__share small {
    display: block !important;
    margin-top: 4px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #92400E !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__progress {
    margin: 0;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__progress p {
    margin: 0 0 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__progress p b {
    color: #B77908 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__progress > i {
    height: 7px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #FFF1C9 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__progress > i span {
    width: var(--progress);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #F6C453, #B77908) !important;
}

/* ---------- Metrics ---------- */
body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 14px 14px 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article.is-sales {
    border: 1px solid #BFDBFE !important;
    background: #EFF6FF !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article.is-active {
    border: 1px solid #A7F3D0 !important;
    background: #ECFDF5 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics small {
    display: block !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics strong {
    display: block !important;
    margin: 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article.is-sales strong {
    color: #2563EB !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article.is-active strong.is-count {
    color: #059669 !important;
    font-size: 22px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics__copy > span {
    display: block !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics__progress,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress > i {
    height: 8px !important;
    margin-top: 8px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #DBEAFE !important;
    font-style: normal !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics__progress span,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress > i span {
    width: var(--progress);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #3366CC, #2554b0) !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics__icon {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    margin-top: 2px;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article.is-sales .sbo-selling-metrics__icon {
    background: #DBEAFE !important;
    color: #2563EB !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics article.is-active .sbo-selling-metrics__icon {
    background: #D1FAE5 !important;
    color: #059669 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-active-faces {
    min-height: 0 !important;
    margin-top: 4px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-active-faces span,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-active-faces b {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #A7F3D0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #059669 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 11px !important;
    margin-left: 0;
    box-shadow: none;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-active-faces em {
    color: #8a94a6 !important;
    font: normal 14px var(--sb-font-regular) !important;
}

/* ---------- Rankings ---------- */
body.who-is-selling-body .who-is-selling-ui .sbo-selling-rankings {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-section-title {
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px;
    padding: 0 2px;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-section-title h2 {
    margin: 0 !important;
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-section-title small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-list {
    display: grid !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card:last-child {
    border-bottom: 1px solid #E0E8FF !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card:hover {
    border-color: #BFDBFE !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card.is-leader {
    border-color: #E0E8FF !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card.is-leader:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card.is-off-shift {
    opacity: 1 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__identity {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__avatar {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    box-shadow: none;
    border: 0;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__avatar[data-tone="2"] {
    background: #0d9488 !important;
    box-shadow: none;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__avatar[data-tone="3"] {
    background: #2554b0 !important;
    box-shadow: none;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__person {
    min-width: 0 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name h3 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: 0;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span.is-leader-badge {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span.is-live {
    border: 1px solid #99F6E4 !important;
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span.is-off {
    border: 1px solid #E2E8F0 !important;
    background: #F1F5F9 !important;
    color: #647084 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats {
    margin-top: 6px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > strong {
    color: #0d9488 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > small {
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p {
    margin: 0 0 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    color: #8a94a6 !important;
    font-size: 15px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p b {
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress > i {
    height: 7px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions a,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions button,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions span {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: none;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions a svg,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions button svg {
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions [data-open-appreciate] {
    color: #3366CC !important;
    background: #fff !important;
    border-color: #BFDBFE !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions [data-open-activity] {
    color: #0d9488 !important;
    background: #fff !important;
    border-color: #99E2D8 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions [data-open-appreciate]:hover,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions [data-open-activity]:hover {
    transform: none;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions span.is-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    color: #647084 !important;
    background: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-empty {
    padding: 40px 20px !important;
    text-align: center !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-empty > span {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #E8F0FE;
    color: #3366CC;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-empty > span svg {
    display: block;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-empty h2 {
    margin: 14px 0 6px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 19px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 16px !important;
}

/* ---------- Footer links ---------- */
body.who-is-selling-body .who-is-selling-ui .sbo-selling-review,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 14px 14px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review:hover,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage:hover {
    transform: none;
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review {
    border-color: #F3E8C8 !important;
    background: #FFFDF8 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review > span,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage > span {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #FEF3C7 !important;
    color: #D97706 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage > span {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review > span svg,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage > span svg,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage > b svg {
    display: block;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review p,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage p {
    margin: 0 !important;
    display: grid !important;
    gap: 0 !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review p strong,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage p strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage p strong.sbo-selling-manage__title {
    font-size: 18px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review p small,
body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage p small {
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-review > b {
    padding: 8px 12px !important;
    border: 1px solid #F3E8C8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #B45309 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 15px !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage {
    border-style: solid !important;
}

body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage > b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #8a94a6 !important;
}

/* ---------- Modals ---------- */
body.who-is-selling-body .sbo-selling-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

body.who-is-selling-body .sbo-selling-modal[hidden] {
    display: none !important;
}

body.who-is-selling-body .sbo-selling-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(23, 32, 51, 0.48);
    cursor: pointer;
}

body.who-is-selling-body .sbo-selling-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    max-height: min(88vh, 720px);
    margin: auto;
    overflow: auto;
    padding: 0;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #E0E8FF;
    box-shadow: 0 22px 50px rgba(30, 50, 80, 0.18);
}

body.who-is-selling-body .sbo-selling-modal__handle {
    width: 42px;
    height: 5px;
    margin: 10px auto 0;
    display: none;
    border-radius: 999px;
    background: #E0E8FF;
}

body.who-is-selling-body .sbo-selling-modal__header {
    min-height: 72px;
    padding: 12px 18px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #E8EDF3;
    background: #fff;
}

body.who-is-selling-body .sbo-selling-modal__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 0 !important;
    line-height: 1;
}

body.who-is-selling-body .sbo-selling-modal__icon.is-activity {
    background: #E6F7F5;
    color: #0d9488;
}

body.who-is-selling-body .sbo-selling-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.who-is-selling-body .sbo-selling-modal__titles {
    min-width: 0;
    flex: 1 1 auto;
}

body.who-is-selling-body .sbo-selling-modal__header h2 {
    margin: 0 0 3px;
    text-align: left;
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: clamp(16px, 4.2vw, 18px);
    line-height: 1.2;
}

body.who-is-selling-body .sbo-selling-modal__titles p {
    margin: 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.35;
}

body.who-is-selling-body .sbo-selling-modal__header > button {
    width: 36px;
    height: 36px;
    margin-left: auto;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #F1F5F9;
    color: #647084;
    font-size: 0 !important;
    cursor: pointer;
}

body.who-is-selling-body .sbo-selling-modal__header > button:hover {
    background: #E2E8F0;
    color: #334155;
}

body.who-is-selling-body .sbo-selling-modal__header > button svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.who-is-selling-body .sbo-selling-modal__body {
    padding: 16px 18px 22px;
}

body.who-is-selling-body .sbo-selling-modal__message {
    margin: 0;
    padding: 14px;
    text-align: left;
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #E8F0FE;
    color: #334155;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.5;
}

body.who-is-selling-body .sbo-selling-modal__actions,
body.who-is-selling-body .sbo-selling-modal__footer {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.who-is-selling-body .sbo-selling-modal__actions button {
    min-height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    font-family: var(--sb-font-semibold);
    font-size: 18px !important;
    cursor: pointer;
}

body.who-is-selling-body .sbo-selling-modal__actions .is-cancel {
    border: 1px solid #E0E8FF;
    background: #fff;
    color: #475569;
}

body.who-is-selling-body .sbo-selling-modal__actions .is-send {
    border: 0;
    background: #3366CC;
    color: #fff;
    font-family: var(--sb-font-bold);
}

body.who-is-selling-body .sbo-selling-modal__actions .is-send:disabled {
    opacity: 0.7;
    cursor: wait;
}

body.who-is-selling-body .sbo-selling-modal__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.who-is-selling-body .sbo-selling-modal__btn-label svg {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

body.who-is-selling-body .sbo-selling-modal__note {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: #8a94a6;
    font-size: 16px !important;
}

/* Appreciate modal ? redesigned card UI (match design mock) */
body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__dialog {
    width: min(100%, 400px);
    max-height: min(90vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__handle {
    display: none;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 0 !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-close:hover {
    background: #E2E8F0;
    color: #334155;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-close svg {
    display: block;
    width: 12px;
    height: 12px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 48px 6px 22px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-hero-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    font-size: 0 !important;
    line-height: 0;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-hero-icon svg {
    display: block;
    width: 64px;
    height: 64px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles {
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 4px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles h2 {
    margin: 0;
    color: #1E293B;
    font-family: var(--sb-font-bold);
    font-size: clamp(16px, 4.6vw, 20px) !important;
    line-height: 1.3;
    text-align: left;
    letter-spacing: -0.01em;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles__lead {
    position: relative;
    display: inline-block;
    margin-right: 0.28em;
    padding-bottom: 5px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles__lead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 56px;
    height: 3.5px;
    border-radius: 999px;
    background: #2563EB;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles p {
    margin: 10px 0 0;
    color: #64748B;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 3.5vw, 15px) !important;
    line-height: 1.45;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles p strong {
    color: #2563EB;
    font-family: var(--sb-font-bold);
    font-weight: 700;
    font-size: inherit !important;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-body {
    padding: 14px 22px 18px;
    overflow: auto;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview {
    padding: 14px 14px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #1E293B;
    font-family: var(--sb-font-semibold);
    font-weight: 600;
    font-size: 16px !important;
    line-height: 1.2;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-chat-icon,
body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__label svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #2563EB;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__message,
body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__message {
    margin: 0;
    padding: 14px 15px;
    border: 0;
    border-radius: 10px;
    background: #EEF3FF;
    color: #334155;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 3.5vw, 15px) !important;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions,
body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions button {
    min-height: clamp(42px, 11vw, 46px);
    padding: 0 14px;
    border-radius: 12px;
    font-family: var(--sb-font-bold);
    font-size: clamp(14px, 3.8vw, 16px) !important;
    cursor: pointer;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions .is-cancel {
    border: 1.5px solid #E5E7EB;
    background: #fff;
    color: #64748B;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions .is-cancel:hover {
    background: #F8FAFC;
    color: #475569;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions .is-send {
    border: 0;
    background: #36C;
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.26);
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions .is-send:hover {
    filter: brightness(1.03);
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions .is-send:disabled {
    opacity: 0.72;
    cursor: wait;
    filter: none;
    box-shadow: none;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__btn-label svg {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions .is-send .sbo-selling-modal__btn-label svg {
    width: 16px;
    height: 16px;
    transform: translateY(0.5px);
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 13px 18px;
    background: #F8FAFC;
    border-top: 1px solid #F1F5F9;
    color: #64748B;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 3.3vw, 14px) !important;
    line-height: 1.3;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-credit .sbo-appreciate-chat-icon {
    width: 14px;
    height: 14px;
    color: #2563EB;
}

body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-credit strong {
    color: #2563EB;
    font-family: var(--sb-font-bold);
    font-weight: 700;
    font-size: inherit !important;
}

@media (max-width: 640px) {
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__dialog {
        width: min(100%, 400px) !important;
        border-radius: 22px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-header {
        padding: 22px 44px 4px 18px;
        gap: 12px;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-hero-icon,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-hero-icon svg {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-body {
        padding: 12px 16px 14px;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions {
        grid-template-columns: 1fr 1.3fr;
    }
}

/* Very small phones ? min 14px floor */
@media (max-width: 380px) {
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles h2 {
        font-size: 16px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles p,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions button,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-credit {
        font-size: 14px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__label {
        font-size: 16px !important;
        font-family: var(--sb-font-semibold);
        font-weight: 600;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions button {
        min-height: 42px;
    }
}

/* Tablet / desktop ? title + lead + staff name 20px */
@media (min-width: 768px) {
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles h2,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles__lead,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles h2 [data-appreciate-name] {
        font-size: 20px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-titles p,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-credit {
        font-size: 14px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-preview__label {
        font-size: 16px !important;
        font-family: var(--sb-font-semibold);
        font-weight: 600;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions button {
        font-size: 15px !important;
        min-height: 46px;
    }
}

body.who-is-selling-body .sbo-activity-body {
    margin-top: 0;
    min-height: 90px;
}

body.who-is-selling-body .sbo-activity-loading[hidden],
body.who-is-selling-body .sbo-activity-timeline[hidden],
body.who-is-selling-body .sbo-activity-empty[hidden],
body.who-is-selling-body .sbo-activity-error[hidden] {
    display: none !important;
}

body.who-is-selling-body .sbo-activity-loading {
    padding: 24px 0;
    text-align: center;
    color: #8a94a6;
    font-size: 16px !important;
}

body.who-is-selling-body .sbo-activity-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 18px;
}

body.who-is-selling-body .sbo-activity-timeline li {
    display: grid;
    grid-template-columns: 66px 1fr;
    align-items: start;
    gap: 14px;
    position: relative;
}

body.who-is-selling-body .sbo-activity-timeline li::before {
    content: '';
    position: absolute;
    left: 72px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3366CC;
}

body.who-is-selling-body .sbo-activity-timeline li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 76px;
    top: 18px;
    bottom: -16px;
    width: 1px;
    background: #E0E8FF;
}

body.who-is-selling-body .sbo-activity-time {
    color: #8a94a6;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    padding-top: 2px;
}

body.who-is-selling-body .sbo-activity-copy {
    padding-left: 20px;
    color: #1e293b;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    line-height: 1.4;
}

body.who-is-selling-body .sbo-activity-empty,
body.who-is-selling-body .sbo-activity-error {
    padding: 26px 0;
    text-align: center;
}

body.who-is-selling-body .sbo-activity-empty > span,
body.who-is-selling-body .sbo-activity-error > span {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #E8F0FE;
    color: #3366CC;
}

body.who-is-selling-body .sbo-activity-error > span {
    background: #FDECEC;
    color: #C62828;
}

body.who-is-selling-body .sbo-activity-empty > span svg,
body.who-is-selling-body .sbo-activity-error > span svg {
    display: block;
}

body.who-is-selling-body .sbo-activity-empty p,
body.who-is-selling-body .sbo-activity-error p {
    margin: 10px 0 0;
    color: #8a94a6;
    font-size: 16px !important;
}

body.who-is-selling-body .sbo-activity-error p {
    color: #C62828;
}

body.who-is-selling-body .sbo-activity-all {
    margin-top: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #C7D7F5;
    border-radius: 12px;
    background: #F4F7FD;
    color: #3366CC;
    text-decoration: none;
    font-family: var(--sb-font-bold);
    font-size: 18px !important;
}

body.who-is-selling-body .sbo-activity-all b {
    display: grid;
    place-items: center;
    color: #3366CC;
    font-size: 1em;
}

body.who-is-selling-body .sbo-activity-all b svg {
    display: block;
    width: 0.5em;
    height: 1em;
}

/* ---------- Bottom nav ---------- */
.who-is-selling-ui .sbo-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    margin: 0 !important;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid #E8EDF3 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 28px rgba(30, 50, 80, 0.08) !important;
}

.who-is-selling-ui .sbo-bottom-nav a {
    min-height: 58px;
    padding: 6px 4px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 14px;
    color: #8a94a6;
    text-decoration: none;
    font-family: var(--sb-font-regular);
    font-size: 13px;
}

.who-is-selling-ui .sbo-bottom-nav a:hover {
    background: #F8FAFC;
    color: #3366CC;
}

.who-is-selling-ui .sbo-bottom-nav a span,
.who-is-selling-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 13px !important;
    line-height: 1.2;
}

.who-is-selling-ui .sbo-bottom-nav__icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: inherit;
}

.who-is-selling-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.who-is-selling-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

.who-is-selling-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

.who-is-selling-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.who-is-selling-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

.who-is-selling-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

.who-is-selling-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: #E8F0FE;
    font-family: var(--sb-font-semibold);
}

.who-is-selling-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    font-family: var(--sb-font-semibold);
}

body.who-is-selling-body .sbo-bottom-nav,
body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 28px rgba(30, 50, 80, 0.08) !important;
}

body.who-is-selling-body .sbo-bottom-nav a,
body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui .sbo-bottom-nav a {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.who-is-selling-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: #E8F0FE !important;
}

body.who-is-selling-body .sbo-bottom-nav a span,
body.who-is-selling-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 13px !important;
}

body.who-is-selling-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
}

body.who-is-selling-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.who-is-selling-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

body.who-is-selling-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

body.who-is-selling-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.who-is-selling-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

body.who-is-selling-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-manage p strong.sbo-selling-manage__title {
        font-size: 16px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card {
        padding: 14px 12px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        column-gap: 12px !important;
        row-gap: 12px !important;
        gap: 12px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__identity {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__avatar {
        width: 40px !important;
        height: 40px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name h3 {
        font-size: 16px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 3px 7px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats {
        margin-top: 4px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > strong {
        font-size: 18px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > small {
        font-size: 14px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p {
        font-size: 13px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p b {
        font-size: 13px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions a,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions button,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions span {
        min-width: 0 !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }
}

@media (min-width: 700px) {
    .who-is-selling-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .who-is-selling-ui .sbo-bottom-nav a {
        font-size: 14px;
    }

    .who-is-selling-ui .sbo-bottom-nav a span,
    .who-is-selling-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
        font-size: 14px !important;
    }

    body.who-is-selling-body .sbo-bottom-nav,
    body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    body.who-is-selling-body .sbo-bottom-nav a span,
    body.who-is-selling-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }
}

@media (max-width: 520px) {
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-header.who-is-selling-header,
    body.who-is-selling-body .who-is-selling-ui .who-is-selling-header {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 12px 12px !important;
        align-items: center !important;
    }

    body.who-is-selling-body .who-is-selling-header__icon,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-header__icon {
        display: none !important;
    }

    body.who-is-selling-body .who-is-selling-header__back {
        width: 34px !important;
        height: 34px !important;
        margin-top: 0;
        align-self: center !important;
    }

    body.who-is-selling-body .who-is-selling-header__titles {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding-top: 0;
    }

    body.who-is-selling-body .who-is-selling-header__title,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-header h1,
    body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui h1.who-is-selling-header__title {
        font-size: 18px !important;
        margin: 0 0 2px !important;
        color: #ffffff !important;
        font-family: var(--sb-font-bold) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }

    body.who-is-selling-body .who-is-selling-header__subtitle,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-header p,
    body.sbo-dashboard-body.who-is-selling-body .who-is-selling-ui p.who-is-selling-header__subtitle {
        font-size: 12px !important;
        line-height: 1.25 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-header__action,
    body.who-is-selling-body .who-is-selling-header__action {
        width: auto !important;
        max-width: max-content !important;
        min-width: max-content !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
        gap: 6px !important;
        border-radius: 10px !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
        justify-self: end !important;
        align-self: center !important;
        overflow: visible !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }

    body.who-is-selling-body .who-is-selling-header__action svg {
        width: 6px;
        height: 10px;
        flex-shrink: 0;
    }

    body.who-is-selling-body .who-is-selling-ui .who-is-selling-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader {
        padding: 14px 12px !important;
        gap: 12px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__top {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-medal {
        width: 42px !important;
        height: 42px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-medal svg {
        width: 20px;
        height: 20px;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader h2 {
        font-size: 18px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader strong {
        font-size: 22px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__share {
        grid-column: 2 / -1;
        justify-self: start;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        text-align: left !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__share b {
        display: inline !important;
        font-size: 16px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-leader__share small {
        display: inline !important;
        margin-top: 0 !important;
        font-size: 14px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-metrics {
        grid-template-columns: 1fr !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-section-title h2 {
        font-size: 18px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card {
        padding: 14px 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__identity {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__avatar {
        width: 40px !important;
        height: 40px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__person {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name h3 {
        font-size: 16px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name span {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 3px 7px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats {
        margin-top: 4px !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 8px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > strong {
        font-size: 18px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__stats > small {
        font-size: 14px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p {
        font-size: 13px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-progress p b {
        font-size: 13px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        gap: 8px !important;
    }

    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions a,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions button,
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__actions span {
        min-width: 0 !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }

    body.who-is-selling-body .sbo-selling-modal {
        padding: 16px !important;
        place-items: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.who-is-selling-body .sbo-selling-modal__dialog {
        width: min(100%, 540px) !important;
        max-height: min(88vh, 720px) !important;
        margin: auto !important;
        border-radius: 20px !important;
        border: 1px solid #E0E8FF !important;
        box-shadow: 0 22px 50px rgba(30, 50, 80, 0.18) !important;
    }

    body.who-is-selling-body .sbo-selling-modal__handle {
        display: none !important;
    }

    body.who-is-selling-body .sbo-selling-modal__header {
        padding: 12px 14px 14px !important;
        min-height: 64px !important;
    }

    body.who-is-selling-body .sbo-selling-modal__body {
        padding: 14px 14px 20px !important;
    }

    body.who-is-selling-body .sbo-selling-modal__actions button,
    body.who-is-selling-body .sbo-activity-all {
        font-size: 16px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-selling-modal__dialog {
        width: min(100%, 400px) !important;
        max-height: min(90vh, 640px) !important;
        border: 0 !important;
        border-radius: 22px !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate .sbo-appreciate-actions button {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   WHO IS SELLING ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: who-is-selling-fs-min-16 ? overrides existing 14px/13px/12px rules
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.who-is-selling-body.who-is-selling-fs-min-16,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui.who-is-selling-fs-min-16,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui {
        font-size: 16px;
        --wis-fs-min: 16px;
    }

    body.who-is-selling-body.who-is-selling-fs-min-16,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui label,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui a,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui button,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui strong,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui b,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui em,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui i,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal a,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal button,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal strong,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav a,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em);
    }

    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-leader small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-leader__share small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-leader__progress p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-leader__progress p b,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-metrics small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-metrics__copy > span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-active-faces em,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-section-title small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-card__avatar,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-card__stats > small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-progress p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-progress p b,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-review > b,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-review p small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-manage p small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-header__subtitle,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-header p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui p.who-is-selling-header__subtitle,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal small,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal__note,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-loading,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-time,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-copy,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-empty p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-error p,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav a,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav a span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-bottom-nav a,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-bottom-nav a span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
        font-size: 16px !important;
    }

    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-active-faces span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-active-faces b {
        font-size: 16px !important;
    }

    /* Name badges (Leader / Off shift / Selling) stay 14px */
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-card__name span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-card__name span.is-leader-badge,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-card__name span.is-off,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-card__name span.is-live {
        font-size: 14px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui [aria-hidden="true"],
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-bottom-nav__icon,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-header__icon,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-header__back,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-review > span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-manage > span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-manage > b,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-empty > span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-selling-modal__icon,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-empty > span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-error > span,
    body.who-is-selling-body.who-is-selling-fs-min-16 .sbo-activity-all b,
    body.who-is-selling-body.who-is-selling-fs-min-16 .who-is-selling-ui .sbo-selling-medal {
        font-size: 0 !important;
    }
}

/* Who Is Selling ? staff names 18px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.who-is-selling-body .who-is-selling-ui .sbo-selling-card__name h3 {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   WHO IS SELLING ? popup/modal text 14px ? 16px (page-scoped)
   Class: who-is-selling-popup-fs-16 ? overrides clamp/14px modal rules without clash
   ========================================================================== */
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 p,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 span,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 small,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 label,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 a,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 button,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 strong,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 b,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 li,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__titles p,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__message,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__note,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-loading,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-time,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-copy,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-empty p,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-error p {
    font-size: 16px !important;
}

/* Keep larger modal titles/actions above the 16px floor */
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__header h2 {
    font-size: clamp(16px, 4.2vw, 18px) !important;
}

body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__actions button,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-all {
    font-size: 18px !important;
}

/* Icon-only nodes in popups stay at 0 */
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__icon,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-selling-modal__header > button,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-empty > span,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-error > span,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-activity-all b,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-appreciate-close,
body.who-is-selling-body .sbo-selling-modal.who-is-selling-popup-fs-16 .sbo-appreciate-hero-icon {
    font-size: 0 !important;
}

/* Appreciate redesign ? responsive type, min 14px */
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles h2 {
    font-size: clamp(16px, 4.6vw, 20px) !important;
}

body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles p,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-preview__message,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-selling-modal__message,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit span,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit strong {
    font-size: clamp(14px, 3.5vw, 15px) !important;
}

body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-preview__label {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold);
    font-weight: 600;
}

body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-actions button,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-actions .is-cancel,
body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-actions .is-send {
    font-size: clamp(14px, 3.8vw, 16px) !important;
}

@media (max-width: 380px) {
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles h2 {
        font-size: 16px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles p,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-preview__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-selling-modal__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-actions button,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit span,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit strong {
        font-size: 14px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-preview__label {
        font-size: 16px !important;
        font-family: var(--sb-font-semibold);
        font-weight: 600;
    }
}

@media (min-width: 768px) {
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles h2,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles__lead,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles h2 [data-appreciate-name],
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 [data-appreciate-name] {
        font-size: 20px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-titles p,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-preview__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-selling-modal__message,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit span,
    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-credit strong {
        font-size: 14px !important;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-preview__label {
        font-size: 16px !important;
        font-family: var(--sb-font-semibold);
        font-weight: 600;
    }

    body.who-is-selling-body .sbo-selling-modal--appreciate.who-is-selling-popup-fs-16 .sbo-appreciate-actions button {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   STAFF & PINs ? match dashboard / expense-book / who-is-selling UI (staff-ui)
   ========================================================================== */

body.staff-body.sbo-dashboard-body,
body.sbo-dashboard-body.staff-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.staff-ui.sbo-dashboard,
.sbo-dashboard.staff-ui {
    --staff-blue: #3366cc;
    --staff-blue-deep: #2554b0;
    --staff-blue-soft: #e8f0fe;
    --staff-mint: #0d9488;
    --staff-mint-soft: #e6f7f5;
    --staff-text: #1e293b;
    --staff-muted: #8a94a6;
    --staff-line: #e8edf3;
    --staff-border: #E0E8FF;
    --staff-card: #ffffff;
    --staff-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --staff-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --staff-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--staff-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.staff-body,
body.staff-body .staff-ui {
    font-size: 14px;
    color: #1e293b;
}

body.staff-body,
body.staff-body .staff-ui,
body.staff-body .staff-ui p,
body.staff-body .staff-ui span,
body.staff-body .staff-ui small,
body.staff-body .staff-ui label,
body.staff-body .staff-ui a,
body.staff-body .staff-ui button,
body.staff-body .staff-ui input,
body.staff-body .staff-ui select,
body.staff-body .staff-ui textarea,
body.staff-body .staff-ui strong,
body.staff-body .staff-ui b,
body.staff-body .staff-ui em,
body.staff-body .staff-ui i,
body.staff-body .staff-ui legend,
body.staff-body .sbo-add-staff-modal,
body.staff-body .sbo-add-staff-modal *,
body.staff-body .sbo-role-modal,
body.staff-body .sbo-role-modal *,
body.staff-body .sbo-pin-modal,
body.staff-body .sbo-pin-modal *,
body.staff-body .sbo-remove-staff-modal,
body.staff-body .sbo-remove-staff-modal *,
body.staff-body .sbo-staff-limit-modal,
body.staff-body .sbo-staff-limit-modal *,
body.staff-body .sbo-bottom-nav,
body.staff-body .sbo-bottom-nav a,
body.staff-body .sbo-bottom-nav span {
    font-size: 14px !important;
}

body.staff-body .staff-ui small,
body.staff-body .staff-ui .sbo-staff-stats small,
body.staff-body .staff-ui .sbo-staff-usage small,
body.staff-body .staff-ui .sbo-staff-card__main > small,
body.staff-body .staff-ui .sbo-staff-search__status,
body.staff-body .staff-ui .sbo-role-staff-count,
body.staff-body .staff-ui .sbo-role-name,
body.staff-body .staff-ui .sbo-system-role,
body.staff-body .staff-ui .sbo-role-pill,
body.staff-body .staff-ui .sbo-status-pill,
body.staff-body .staff-ui .sbo-staff-tabs a,
body.staff-body .staff-ui .sbo-staff-tabs button,
body.staff-body .staff-ui .sbo-staff-access > span,
body.staff-body .staff-ui .sbo-staff-permissions > span,
body.staff-body .staff-ui .sbo-staff-access-pill,
body.staff-body .staff-ui .sbo-staff-permission-pill,
body.staff-body .staff-ui .sbo-pin-mask,
body.staff-body .staff-ui .sbo-regenerate-pin,
body.staff-body .staff-ui .sbo-pin-status,
body.staff-body .sbo-role-permission-option strong,
body.staff-body .sbo-role-permission-option small,
body.staff-body .sbo-role-permission-option em,
body.staff-body .sbo-bottom-nav a,
body.staff-body .sbo-bottom-nav a span,
body.staff-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 14px !important;
}

body.staff-body .sbo-bottom-nav__icon,
body.staff-body .staff-header__icon,
body.staff-body .staff-header__back,
body.staff-body .staff-ui .sbo-staff-info__icon,
body.staff-body .staff-ui .sbo-staff-usage__icon,
body.staff-body .staff-ui .sbo-staff-search__icon,
body.staff-body .staff-ui .sbo-roles-info__icon,
body.staff-body .staff-ui .sbo-staff-footer-note__icon,
body.staff-body .staff-ui .sbo-staff-search__loader {
    font-size: 0 !important;
}

/* Keep decorative icon wrappers textless, but never style them as pills */
body.staff-body .staff-ui .sbo-inline-icon[aria-hidden="true"],
body.staff-body .staff-ui .sbo-modal-icon[aria-hidden="true"] {
    font-size: 0 !important;
}

.staff-ui h1,
.staff-ui h2,
.staff-ui h3,
.staff-ui strong,
.staff-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.staff-ui em,
.staff-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.staff-ui small,
.staff-ui p,
.staff-ui label,
.staff-ui span,
.staff-ui button,
.staff-ui a,
.staff-ui input,
.staff-ui select {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.staff-body .staff-ui .sbo-staff-header.staff-header,
body.staff-body .staff-ui .staff-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.staff-body .staff-header__back,
body.staff-body .staff-ui .sbo-back-button.staff-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.staff-body .staff-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.staff-body .staff-header__back svg {
    display: block;
}

body.staff-body .staff-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.staff-body .staff-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.staff-body .staff-header__titles {
    min-width: 0;
}

body.staff-body .staff-ui .staff-header__title,
body.staff-body .staff-ui .sbo-staff-header h1,
body.sbo-dashboard-body.staff-body .staff-ui h1.staff-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.staff-body .staff-ui .staff-header__subtitle,
body.staff-body .staff-ui .sbo-staff-header p,
body.sbo-dashboard-body.staff-body .staff-ui p.staff-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.staff-body .staff-ui .sbo-add-staff-button.staff-header__action,
body.staff-body .staff-header__action {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
    cursor: pointer;
}

body.staff-body .staff-header__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

body.staff-body .staff-header__action svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ---------- Content shell ---------- */
body.staff-body .staff-ui .sbo-staff-content.staff-content,
body.staff-body .staff-ui .staff-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

/* ---------- Tabs ---------- */
body.staff-body .staff-ui .sbo-staff-tabs {
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border: 2px solid #36C !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
}

body.staff-body .staff-ui .sbo-staff-tabs a,
body.staff-body .staff-ui .sbo-staff-tabs button {
    position: relative;
    min-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    border: 0 !important;
    border-radius: 7px !important;
    color: #1a1a1a !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-tabs a:not(.is-active):hover,
body.staff-body .staff-ui .sbo-staff-tabs button:not(.is-active):hover {
    color: #0f172a !important;
    background: rgba(51, 102, 204, 0.06) !important;
}

body.staff-body .staff-ui .sbo-staff-tabs a.is-active,
body.staff-body .staff-ui .sbo-staff-tabs button.is-active {
    color: #fff !important;
    background: #36C !important;
    font-family: var(--sb-font-bold) !important;
    box-shadow: none !important;
}

/* ---------- Stats ---------- */
body.staff-body .staff-ui .sbo-staff-stats {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

body.staff-body .staff-ui .sbo-staff-stats article {
    min-height: 0 !important;
    padding: 16px 12px !important;
    display: grid !important;
    place-content: center !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-stats strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}

body.staff-body .staff-ui .sbo-staff-stats strong.is-active {
    color: #0d9488 !important;
}

body.staff-body .staff-ui .sbo-staff-stats strong.is-inactive {
    color: #8a94a6 !important;
}

body.staff-body .staff-ui .sbo-staff-stats small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------- Info / usage / search ---------- */
body.staff-body .staff-ui .sbo-staff-info,
body.staff-body .staff-ui .sbo-roles-info {
    margin: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 15px !important;
    color: #1e293b !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-info__icon,
body.staff-body .staff-ui .sbo-roles-info__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-info__icon svg,
body.staff-body .staff-ui .sbo-roles-info__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.staff-body .staff-ui .sbo-staff-info p,
body.staff-body .staff-ui .sbo-roles-info p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

body.staff-body .staff-ui .sbo-staff-info strong,
body.staff-body .staff-ui .sbo-roles-info strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
}

body.staff-body .staff-ui .sbo-staff-usage {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 40px 1fr minmax(90px, 120px) !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-usage__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-usage__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.staff-body .staff-ui .sbo-staff-usage > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.staff-body .staff-ui .sbo-staff-usage strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.staff-body .staff-ui .sbo-staff-usage small {
    margin-top: 4px !important;
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.staff-body .staff-ui .sbo-staff-progress {
    height: 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #E8F0FE !important;
}

body.staff-body .staff-ui .sbo-staff-progress i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #3366CC, #2554b0) !important;
    transition: width .3s;
}

body.staff-body .staff-ui .sbo-staff-search {
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #8a94a6 !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-search:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.staff-body .staff-ui .sbo-staff-search__icon {
    display: grid;
    place-items: center;
    color: #3366CC;
    font-size: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-search__icon svg {
    display: block;
}

body.staff-body .staff-ui .sbo-staff-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: #1e293b !important;
    background: transparent;
    font: 14px var(--sb-font-regular) !important;
}

body.staff-body .staff-ui .sbo-staff-search__loader {
    border-color: #E0E8FF !important;
    border-top-color: #3366CC !important;
}

body.staff-body .staff-ui .sbo-staff-search__status {
    min-height: 18px !important;
    margin: -6px 2px 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

/* ---------- Staff cards ---------- */
body.staff-body .staff-ui .sbo-staff-list {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.staff-body .staff-ui .sbo-staff-card {
    position: relative !important;
    min-height: 0 !important;
    padding: 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-card.is-inactive {
    opacity: 0.7 !important;
}

body.staff-body .staff-ui .sbo-staff-avatar {
    width: 52px !important;
    height: 52px !important;
}

body.staff-body .staff-ui .sbo-staff-avatar img {
    border: 2px solid #E8F0FE;
}

body.staff-body .staff-ui .sbo-staff-avatar i.is-online {
    background: #0d9488 !important;
}

body.staff-body .staff-ui .sbo-staff-card__title > strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.staff-body .staff-ui .sbo-role-pill {
    padding: 4px 8px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 999px !important;
    color: #3366CC !important;
    background: #E8F0FE !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-status-pill {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-status-pill--danger {
    color: #DC2626 !important;
    background: #FEF2F2 !important;
}

body.staff-body .staff-ui .sbo-staff-card__main > p {
    margin: 8px 0 2px !important;
    color: #475569 !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-card__main > small {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-security {
    margin-top: 12px !important;
    gap: 8px !important;
}

body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
body.staff-body .staff-ui .sbo-regenerate-pin,
body.staff-body .staff-ui .sbo-pin-status {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask {
    border: 1px solid #E0E8FF !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    font-family: var(--sb-font-semibold) !important;
}

body.staff-body .staff-ui .sbo-regenerate-pin {
    color: #0d9488 !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.staff-body .staff-ui .sbo-pin-status.is-success {
    color: #0d9488 !important;
    background: #E6F7F5 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.staff-body .staff-ui .sbo-pin-status.is-warning {
    color: #B45309 !important;
    background: #FEF3C7 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.staff-body .staff-ui .sbo-staff-access > span,
body.staff-body .staff-ui .sbo-staff-access-pill {
    padding: 5px 10px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 999px !important;
    color: #33425a !important;
    background: #F8FAFC !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-access > span.is-shops,
body.staff-body .staff-ui .sbo-staff-access-pill.is-shops {
    color: #0d9488 !important;
    border-color: #99F6E4 !important;
    background: #E6F7F5 !important;
}

body.staff-body .staff-ui .sbo-staff-access > span.is-sales,
body.staff-body .staff-ui .sbo-staff-access-pill.is-sales {
    color: #3366CC !important;
    border-color: #BFDBFE !important;
    background: #E8F0FE !important;
}

body.staff-body .staff-ui .sbo-staff-permissions > span,
body.staff-body .staff-ui .sbo-staff-permission-pill {
    padding: 5px 9px !important;
    border-radius: 9px !important;
    color: #647084 !important;
    background: #F1F5F9 !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-actions summary {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    color: #8a94a6 !important;
}

body.staff-body .staff-ui .sbo-staff-actions summary:hover {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.staff-body .staff-ui .sbo-staff-actions > div {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(30, 50, 80, 0.12) !important;
}

body.staff-body .staff-ui .sbo-staff-actions button {
    color: #1e293b !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-actions button:hover {
    background: #F8FAFC !important;
}

body.staff-body .staff-ui .sbo-staff-actions button.is-danger {
    color: #DC2626 !important;
    border-top: 1px solid #E8EDF3 !important;
}

body.staff-body .staff-ui .sbo-empty {
    margin: 0 !important;
    padding: 28px 16px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #8a94a6 !important;
    text-align: center;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-footer-note {
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    color: #64728a !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-staff-footer-note__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    background: #E6F7F5;
    color: #0d9488 !important;
}

body.staff-body .staff-ui .sbo-staff-footer-note p {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

body.staff-body .staff-ui .sbo-staff-footer-note p strong {
    color: #1e293b !important;
}

body.staff-body .staff-ui .sbo-staff-footer-note__plan b {
    color: #3366CC !important;
}

/* Footer note ? force 16px on mobile, tablet, and desktop */
body.staff-body .staff-ui .sbo-staff-footer-note,
body.staff-body .staff-ui .sbo-staff-footer-note p,
body.staff-body .staff-ui .sbo-staff-footer-note p strong,
body.staff-body .staff-ui .sbo-staff-footer-note__plan,
body.staff-body .staff-ui .sbo-staff-footer-note__plan b {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.staff-body .staff-ui .sbo-staff-footer-note,
    body.staff-body .staff-ui .sbo-staff-footer-note p,
    body.staff-body .staff-ui .sbo-staff-footer-note p strong,
    body.staff-body .staff-ui .sbo-staff-footer-note__plan,
    body.staff-body .staff-ui .sbo-staff-footer-note__plan b {
        font-size: 16px !important;
    }
}

/* ---------- Roles ---------- */
body.staff-body .staff-ui .sbo-role-list {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.staff-body .staff-ui .sbo-role-card {
    padding: 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.staff-body .staff-ui .sbo-role-card__header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding-bottom: 12px !important;
    margin-bottom: 2px !important;
    border-bottom: 1px solid #E8EDF3 !important;
}

body.staff-body .staff-ui .sbo-role-name {
    min-height: 30px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

body.staff-body .staff-ui .sbo-system-role {
    min-height: 28px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 999px !important;
    color: #3366CC !important;
    background: #E8F0FE !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-role-staff-count {
    margin-left: auto !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    white-space: nowrap;
}

body.staff-body .staff-ui .sbo-role-edit {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 10px !important;
    color: #8a94a6 !important;
    background: #fff !important;
    font-size: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
}

body.staff-body .staff-ui .sbo-role-edit svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.staff-body .staff-ui .sbo-role-edit:hover {
    background: #E8F0FE !important;
    border-color: #BFDBFE !important;
    color: #3366CC !important;
}

body.staff-body .staff-ui .sbo-role-permissions {
    margin-top: 12px !important;
    display: grid !important;
    gap: 8px !important;
}

body.staff-body .staff-ui .sbo-role-permissions > div {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body.staff-body .staff-ui .sbo-role-permissions > div.is-enabled {
    border-color: #BFDBFE !important;
    background: #F8FAFC !important;
}

body.staff-body .staff-ui .sbo-role-permissions > div.is-disabled {
    opacity: 1 !important;
    background: #fff !important;
    border-color: #E8EDF3 !important;
}

body.staff-body .staff-ui .sbo-role-permissions > div.is-disabled strong,
body.staff-body .staff-ui .sbo-role-permissions > div.is-disabled small {
    color: #94A3B8 !important;
}

body.staff-body .staff-ui .sbo-permission-check {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    border: 1.5px solid #CBD5E1 !important;
    background: #fff !important;
    color: #fff !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.staff-body .staff-ui .sbo-permission-check svg {
    display: block;
    width: 12px;
    height: 12px;
}

body.staff-body .staff-ui .sbo-role-permissions > div.is-enabled .sbo-permission-check {
    border-color: #0d9488 !important;
    background: #0d9488 !important;
    color: #fff !important;
}

body.staff-body .staff-ui .sbo-role-permissions > div.is-disabled .sbo-permission-check {
    border-color: #CBD5E1 !important;
    background: #fff !important;
    color: transparent !important;
}

body.staff-body .staff-ui .sbo-role-permissions strong {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-width: 0;
}

body.staff-body .staff-ui .sbo-role-permissions small {
    min-height: 28px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 999px !important;
    color: #647084 !important;
    background: #F1F5F9 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    white-space: nowrap;
}

body.staff-body .staff-ui .sbo-role-permissions > div.is-enabled small {
    color: #3366CC !important;
    border-color: #BFDBFE !important;
    background: #E8F0FE !important;
}

body.staff-body .staff-ui .sbo-create-role-button {
    margin: 0 !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px dashed #BFDBFE !important;
    border-radius: 12px !important;
    color: #3366CC !important;
    background: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    cursor: pointer;
    box-shadow: none !important;
    width: 100%;
}

body.staff-body .staff-ui .sbo-create-role-button:hover {
    border-style: solid !important;
    border-color: #3366CC !important;
    background: #E8F0FE !important;
}

body.staff-body .staff-ui .sbo-create-role-button svg {
    display: block;
    width: 14px;
    height: 14px;
}

@media (max-width: 520px) {
    body.staff-body .staff-ui .sbo-role-permissions > div {
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions small {
        grid-column: 2;
        justify-self: start;
    }
}

/* ---------- Modals polish ---------- */
body.staff-body .sbo-add-staff-modal__dialog,
body.staff-body .sbo-role-modal__dialog,
body.staff-body .sbo-pin-modal__dialog,
body.staff-body .sbo-remove-staff-modal__dialog,
body.staff-body .sbo-staff-limit-modal__dialog {
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
}

body.staff-body .sbo-add-staff-modal__header,
body.staff-body .sbo-role-modal__header,
body.staff-body .sbo-pin-modal__header,
body.staff-body .sbo-remove-staff-modal__header,
body.staff-body .sbo-staff-limit-modal__dialog > header {
    border-bottom: 1px solid #E8EDF3 !important;
}

body.staff-body .sbo-add-staff-modal__header h2,
body.staff-body .sbo-role-modal__header h2,
body.staff-body .sbo-pin-modal__header h2,
body.staff-body .sbo-remove-staff-modal__header h2,
body.staff-body .sbo-staff-limit-modal__dialog h2 {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
}

body.staff-body .sbo-add-staff-field input,
body.staff-body .sbo-add-staff-field select,
body.staff-body .sbo-role-field input,
body.staff-body .sbo-add-staff-phone {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.staff-body .sbo-add-staff-field input:focus,
body.staff-body .sbo-add-staff-field select:focus,
body.staff-body .sbo-role-field input:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    outline: none;
}

body.staff-body .sbo-badge-colors i {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid rgba(30, 40, 55, 0.2) !important;
    box-shadow: 0 1px 3px rgba(30, 40, 55, 0.14) !important;
}

body.staff-body .sbo-badge-colors input:checked + i {
    border-color: #153562 !important;
    box-shadow: 0 0 0 3px #fff inset, 0 0 0 2px rgba(21, 53, 98, 0.28) !important;
}

body.staff-body .sbo-add-staff-send,
body.staff-body .sbo-role-submit,
body.staff-body .sbo-staff-limit-modal__dialog footer button {
    border-radius: 12px !important;
    background: #3366CC !important;
    border-color: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
}

body.staff-body .sbo-add-staff-cancel,
body.staff-body .sbo-role-cancel,
body.staff-body .sbo-remove-staff-cancel {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #475569 !important;
    background: #fff !important;
}

body.staff-body .sbo-remove-staff-submit {
    border-radius: 12px !important;
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* ---------- PIN modals (Regenerate / Resend) ---------- */
body.staff-body .sbo-pin-modal__dialog {
    background: #ffffff !important;
    overflow: hidden !important;
}

body.staff-body .sbo-pin-modal__header {
    min-height: 72px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #fff !important;
}

body.staff-body .sbo-pin-modal__icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.staff-body .sbo-pin-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.staff-body .sbo-pin-modal__titles {
    min-width: 0;
    flex: 1 1 auto;
}

body.staff-body .sbo-pin-modal__header h2 {
    margin: 0 0 3px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4.2vw, 18px) !important;
    line-height: 1.2 !important;
}

body.staff-body .sbo-pin-modal__titles p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.35 !important;
}

body.staff-body .sbo-pin-modal__header > button {
    width: 36px !important;
    height: 36px !important;
    margin-left: auto !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #647084 !important;
    font-size: 0 !important;
    cursor: pointer !important;
}

body.staff-body .sbo-pin-modal__header > button:hover {
    background: #E2E8F0 !important;
    color: #334155 !important;
}

body.staff-body .sbo-pin-modal__header > button svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.staff-body .sbo-pin-modal form {
    padding: clamp(14px, 3.5vw, 18px) !important;
    background: #fff !important;
}

body.staff-body .sbo-pin-question {
    margin: 0 0 14px !important;
    color: #475569 !important;
    font-size: clamp(13px, 3.5vw, 14px) !important;
    line-height: 1.45 !important;
}

body.staff-body .sbo-pin-question strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: inherit !important;
}

body.staff-body .sbo-pin-privacy {
    padding: clamp(12px, 3vw, 14px) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #334155 !important;
    background: #E8F0FE !important;
}

body.staff-body .sbo-pin-privacy__icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #3366CC !important;
    font-size: 0 !important;
    box-shadow: 0 1px 3px rgba(51, 102, 204, 0.08);
}

body.staff-body .sbo-pin-privacy__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.staff-body .sbo-pin-privacy p {
    margin: 0 !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.55 !important;
    color: #334155 !important;
}

body.staff-body .sbo-pin-privacy strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: inherit !important;
}

body.staff-body .sbo-pin-details {
    margin: 14px 0 0 !important;
    padding: clamp(10px, 2.8vw, 14px) !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
}

body.staff-body .sbo-pin-details dt {
    color: #8a94a6 !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
}

body.staff-body .sbo-pin-details dd {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
}

body.staff-body .sbo-pin-details__pin {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    letter-spacing: 0.04em;
}

body.staff-body .sbo-pin-details__pin-icon {
    display: inline-grid !important;
    place-items: center !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.staff-body .sbo-pin-details__pin-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.staff-body .sbo-pin-details dd small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: clamp(10px, 2.6vw, 12px) !important;
    letter-spacing: 0;
}

body.staff-body .sbo-pin-modal__footer {
    margin-top: 16px !important;
    gap: clamp(8px, 2vw, 10px) !important;
}

body.staff-body .sbo-pin-cancel,
body.staff-body .sbo-pin-regenerate,
body.staff-body .sbo-pin-send {
    min-height: clamp(44px, 11vw, 48px) !important;
    padding: 0 clamp(8px, 2vw, 12px) !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

body.staff-body .sbo-pin-cancel {
    border: 1px solid #E0E8FF !important;
    color: #475569 !important;
    background: #fff !important;
}

body.staff-body .sbo-pin-regenerate {
    border: 1px solid #C7D7F5 !important;
    color: #3366CC !important;
    background: #F4F7FD !important;
}

body.staff-body .sbo-pin-send {
    border: 0 !important;
    color: #fff !important;
    background: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
}

body.staff-body .sbo-pin-modal .sbo-button-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: inherit !important;
}

body.staff-body .sbo-pin-modal .sbo-button-label svg {
    display: block;
    flex-shrink: 0;
    width: clamp(13px, 3.4vw, 15px);
    height: clamp(13px, 3.4vw, 15px);
}

@media (hover: hover) and (pointer: fine) {
    body.staff-body .sbo-pin-cancel:hover {
        border-color: #3366CC !important;
        color: #3366CC !important;
        background: #F4F7FD !important;
    }

    body.staff-body .sbo-pin-regenerate:not(:disabled):hover {
        border-color: #3366CC !important;
        color: #2554b0 !important;
        background: #E8F0FE !important;
    }

    body.staff-body .sbo-pin-send:not(:disabled):hover {
        background: #2554b0 !important;
        box-shadow: 0 8px 18px rgba(51, 102, 204, 0.22) !important;
    }
}

/* PIN modal ? tablet / desktop type scale (matches More page) */
@media (min-width: 768px) and (max-width: 1365px) {
    body.staff-body .sbo-pin-modal__header h2 {
        font-size: 20px !important;
    }

    body.staff-body .sbo-pin-modal__titles p,
    body.staff-body .sbo-pin-question,
    body.staff-body .sbo-pin-privacy p,
    body.staff-body .sbo-pin-details dt,
    body.staff-body .sbo-pin-details dd {
        font-size: 15px !important;
    }

    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate,
    body.staff-body .sbo-pin-send,
    body.staff-body .sbo-pin-modal .sbo-button-label {
        font-size: 18px !important;
    }

    body.staff-body .sbo-pin-details dd small {
        font-size: 12px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body .sbo-pin-modal__header h2 {
        font-size: 22px !important;
    }

    body.staff-body .sbo-pin-modal__titles p,
    body.staff-body .sbo-pin-question,
    body.staff-body .sbo-pin-privacy p,
    body.staff-body .sbo-pin-details dt,
    body.staff-body .sbo-pin-details dd {
        font-size: 16px !important;
    }

    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate,
    body.staff-body .sbo-pin-send,
    body.staff-body .sbo-pin-modal .sbo-button-label {
        font-size: 18px !important;
    }

    body.staff-body .sbo-pin-details dd small {
        font-size: 13px !important;
    }
}

/* ---------- Bottom nav ---------- */
.staff-ui .sbo-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    margin: 0 !important;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid #E8EDF3 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 28px rgba(30, 50, 80, 0.08) !important;
}

.staff-ui .sbo-bottom-nav a {
    min-height: 58px;
    padding: 6px 4px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 14px;
    color: #8a94a6;
    text-decoration: none;
    font-family: var(--sb-font-regular);
    font-size: 14px;
}

.staff-ui .sbo-bottom-nav a:hover {
    background: #F8FAFC;
    color: #3366CC;
}

.staff-ui .sbo-bottom-nav a span,
.staff-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 14px !important;
    line-height: 1.2;
}

.staff-ui .sbo-bottom-nav__icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: inherit;
}

.staff-ui .sbo-bottom-nav__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.staff-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: #E8F0FE;
    font-family: var(--sb-font-semibold);
}

body.staff-body .sbo-bottom-nav,
body.sbo-dashboard-body.staff-body .staff-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 28px rgba(30, 50, 80, 0.08) !important;
}

body.staff-body .sbo-bottom-nav a,
body.sbo-dashboard-body.staff-body .staff-ui .sbo-bottom-nav a {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.staff-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.staff-body .staff-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: #E8F0FE !important;
}

body.staff-body .sbo-bottom-nav a span,
body.staff-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 14px !important;
}

body.staff-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
}

body.staff-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* ---------- Responsive ---------- */
@media (min-width: 700px) {
    .staff-ui .sbo-bottom-nav,
    body.staff-body .sbo-bottom-nav,
    body.sbo-dashboard-body.staff-body .staff-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    body.staff-body .sbo-bottom-nav a span,
    body.staff-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }
}

@media (max-width: 520px) {
    body.staff-body .staff-ui .staff-header {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 12px 12px !important;
        align-items: center !important;
    }

    body.staff-body .staff-header__icon {
        display: none !important;
    }

    body.staff-body .staff-header__back,
    body.staff-body .staff-ui .sbo-back-button.staff-header__back {
        width: 34px !important;
        height: 34px !important;
    }

    body.staff-body .staff-header__titles {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.staff-body .staff-header__title,
    body.staff-body .staff-ui .sbo-staff-header h1 {
        font-size: 18px !important;
        margin: 0 0 2px !important;
        color: #ffffff !important;
        font-family: var(--sb-font-bold) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.staff-body .staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-header p {
        font-size: 12px !important;
        line-height: 1.25 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.staff-body .staff-header__action {
        min-height: 36px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        gap: 6px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    body.staff-body .staff-header__action svg {
        width: 13px !important;
        height: 13px !important;
    }

    body.staff-body .staff-ui .staff-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.staff-body .staff-ui .sbo-staff-stats {
        gap: 8px !important;
    }

    body.staff-body .staff-ui .sbo-staff-stats article {
        padding: 12px 8px !important;
    }

    body.staff-body .staff-ui .sbo-staff-stats strong {
        font-size: 18px !important;
    }

    body.staff-body .staff-ui .sbo-staff-usage {
        grid-template-columns: 36px 1fr !important;
        gap: 10px !important;
    }

    body.staff-body .staff-ui .sbo-staff-progress {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.staff-body .staff-ui .sbo-staff-card {
        padding: 14px 12px !important;
        gap: 10px !important;
    }

    body.staff-body .staff-ui .sbo-staff-card__head {
        gap: 10px !important;
        padding-right: 28px !important;
    }

    body.staff-body .staff-ui .sbo-staff-avatar {
        width: 44px !important;
        height: 44px !important;
    }

    body.staff-body .sbo-add-staff-modal,
    body.staff-body .sbo-role-modal,
    body.staff-body .sbo-pin-modal,
    body.staff-body .sbo-remove-staff-modal,
    body.staff-body .sbo-staff-limit-modal {
        padding: 14px !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body.staff-body .sbo-add-staff-modal__dialog,
    body.staff-body .sbo-role-modal__dialog,
    body.staff-body .sbo-pin-modal__dialog,
    body.staff-body .sbo-remove-staff-modal__dialog,
    body.staff-body .sbo-staff-limit-modal__dialog {
        width: min(100%, 560px) !important;
        max-height: calc(100vh - 28px) !important;
        margin: auto !important;
        border-radius: 20px 20px 20px 20px !important;
    }

    body.staff-body .sbo-pin-modal__header {
        min-height: 64px !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    body.staff-body .sbo-pin-modal__icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        border-radius: 10px !important;
    }

    body.staff-body .sbo-pin-modal__icon svg {
        width: 18px;
        height: 18px;
    }

    body.staff-body .sbo-pin-modal__header h2 {
        font-size: 16px !important;
    }

    body.staff-body .sbo-pin-modal__titles p,
    body.staff-body .sbo-pin-question,
    body.staff-body .sbo-pin-privacy p,
    body.staff-body .sbo-pin-details dt,
    body.staff-body .sbo-pin-details dd {
        font-size: 13px !important;
    }

    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate,
    body.staff-body .sbo-pin-send,
    body.staff-body .sbo-pin-modal .sbo-button-label {
        font-size: 16px !important;
    }

    body.staff-body .sbo-pin-details dd small {
        font-size: 11px !important;
    }

    body.staff-body .sbo-pin-privacy__icon {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }

    body.staff-body .sbo-pin-modal__footer {
        grid-template-columns: 1fr 1fr !important;
    }

    body.staff-body .sbo-pin-send {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate {
        grid-row: 2 !important;
    }

    body.staff-body .sbo-resend-pin-modal__footer {
        grid-template-columns: 1fr 1fr !important;
    }

    body.staff-body .sbo-resend-pin-modal__footer .sbo-pin-send,
    body.staff-body .sbo-resend-pin-modal__footer .sbo-pin-cancel {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* ==========================================================================
   STAFF & PINs ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: staff-fs-min-16 ? overrides existing 14px/13px/12px rules without global clash
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.staff-body.staff-fs-min-16,
    body.staff-body.staff-fs-min-16 .staff-ui.staff-fs-min-16,
    body.staff-body.staff-fs-min-16 .staff-ui {
        font-size: 16px;
        --staff-fs-min: 16px;
    }

    body.staff-body.staff-fs-min-16,
    body.staff-body.staff-fs-min-16 .staff-ui,
    body.staff-body.staff-fs-min-16 .staff-ui p,
    body.staff-body.staff-fs-min-16 .staff-ui span,
    body.staff-body.staff-fs-min-16 .staff-ui small,
    body.staff-body.staff-fs-min-16 .staff-ui label,
    body.staff-body.staff-fs-min-16 .staff-ui a,
    body.staff-body.staff-fs-min-16 .staff-ui button,
    body.staff-body.staff-fs-min-16 .staff-ui input,
    body.staff-body.staff-fs-min-16 .staff-ui select,
    body.staff-body.staff-fs-min-16 .staff-ui textarea,
    body.staff-body.staff-fs-min-16 .staff-ui strong,
    body.staff-body.staff-fs-min-16 .staff-ui b,
    body.staff-body.staff-fs-min-16 .staff-ui em,
    body.staff-body.staff-fs-min-16 .staff-ui i,
    body.staff-body.staff-fs-min-16 .staff-ui legend,
    body.staff-body.staff-fs-min-16 .sbo-add-staff-modal,
    body.staff-body.staff-fs-min-16 .sbo-add-staff-modal *,
    body.staff-body.staff-fs-min-16 .sbo-role-modal,
    body.staff-body.staff-fs-min-16 .sbo-role-modal *,
    body.staff-body.staff-fs-min-16 .sbo-pin-modal,
    body.staff-body.staff-fs-min-16 .sbo-pin-modal *,
    body.staff-body.staff-fs-min-16 .sbo-remove-staff-modal,
    body.staff-body.staff-fs-min-16 .sbo-remove-staff-modal *,
    body.staff-body.staff-fs-min-16 .sbo-staff-limit-modal,
    body.staff-body.staff-fs-min-16 .sbo-staff-limit-modal *,
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav,
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav a,
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em) !important;
    }

    body.staff-body.staff-fs-min-16 .staff-ui small,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-stats small,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-usage small,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-card__main > small,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-search__status,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-staff-count,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-name,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-system-role,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-pill,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-status-pill,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-tabs a,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-tabs button,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-access > span,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-permissions > span,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-access-pill,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-permission-pill,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-pin-mask,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-regenerate-pin,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-pin-status,
    body.staff-body.staff-fs-min-16 .staff-header__subtitle,
    body.staff-body.staff-fs-min-16 .staff-ui .staff-header__subtitle,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-header p,
    body.staff-body.staff-fs-min-16 .staff-header__action,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-add-staff-button,
    body.staff-body.staff-fs-min-16 .sbo-role-permission-option strong,
    body.staff-body.staff-fs-min-16 .sbo-role-permission-option small,
    body.staff-body.staff-fs-min-16 .sbo-role-permission-option em,
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav a,
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav a span,
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.staff-body.staff-fs-min-16 .staff-ui [aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-add-staff-modal [aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-role-modal [aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-pin-modal [aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-remove-staff-modal [aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-staff-limit-modal [aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-bottom-nav__icon,
    body.staff-body.staff-fs-min-16 .staff-header__icon,
    body.staff-body.staff-fs-min-16 .staff-header__back,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-info__icon,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-usage__icon,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-search__icon,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-roles-info__icon,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-footer-note__icon,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-search__loader,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-inline-icon[aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-modal-icon[aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-modal-icon[aria-hidden="true"],
    body.staff-body.staff-fs-min-16 .sbo-pin-modal__header > button,
    body.staff-body.staff-fs-min-16 .sbo-pin-privacy__icon,
    body.staff-body.staff-fs-min-16 .sbo-pin-details__pin-icon {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   APPROVALS ? match dashboard / expense-book / staff UI (approvals-ui)
   ========================================================================== */

body.approvals-body.sbo-dashboard-body,
body.sbo-dashboard-body.approvals-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.approvals-ui.sbo-dashboard,
.sbo-dashboard.approvals-ui {
    --approvals-blue: #3366cc;
    --approvals-blue-deep: #2554b0;
    --approvals-blue-soft: #e8f0fe;
    --approvals-mint: #0d9488;
    --approvals-mint-soft: #e6f7f5;
    --approvals-text: #1e293b;
    --approvals-muted: #8a94a6;
    --approvals-line: #e8edf3;
    --approvals-border: #E0E8FF;
    --approvals-card: #ffffff;
    --approvals-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --approvals-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --approvals-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--approvals-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.approvals-body,
body.approvals-body .approvals-ui {
    font-size: 14px;
    color: #1e293b;
}

body.approvals-body,
body.approvals-body .approvals-ui,
body.approvals-body .approvals-ui p,
body.approvals-body .approvals-ui span,
body.approvals-body .approvals-ui small,
body.approvals-body .approvals-ui label,
body.approvals-body .approvals-ui a,
body.approvals-body .approvals-ui button,
body.approvals-body .approvals-ui input,
body.approvals-body .approvals-ui select,
body.approvals-body .approvals-ui strong,
body.approvals-body .approvals-ui b,
body.approvals-body .approvals-ui em,
body.approvals-body .approvals-ui i {
    font-size: 14px !important;
}

body.approvals-body .approvals-ui small,
body.approvals-body .approvals-ui .sbo-approvals-summary small,
body.approvals-body .approvals-ui .sbo-approvals-toolbar > small,
body.approvals-body .approvals-ui .sbo-approval-card__meta,
body.approvals-body .approvals-ui .sbo-approval-status,
body.approvals-body .approvals-ui .sbo-approvals-select {
    font-size: 14px !important;
}

body.approvals-body .approvals-ui [aria-hidden="true"],
body.approvals-body .sbo-bottom-nav__icon,
body.approvals-body .approvals-header__icon,
body.approvals-body .approvals-header__back,
body.approvals-body .approvals-ui .sbo-approvals-loader i {
    font-size: 0 !important;
}

.approvals-ui h1,
.approvals-ui h2,
.approvals-ui h3,
.approvals-ui strong,
.approvals-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.approvals-ui em,
.approvals-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.approvals-ui small,
.approvals-ui p,
.approvals-ui label,
.approvals-ui span,
.approvals-ui button,
.approvals-ui a,
.approvals-ui input,
.approvals-ui select {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.approvals-body .approvals-ui .sbo-approvals-header.approvals-header,
body.approvals-body .approvals-ui .approvals-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.approvals-body .approvals-header__back,
body.approvals-body .approvals-ui .approvals-header > a.approvals-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.approvals-body .approvals-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.approvals-body .approvals-header__back svg {
    display: block;
}

body.approvals-body .approvals-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.approvals-body .approvals-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.approvals-body .approvals-header__titles {
    min-width: 0;
}

body.approvals-body .approvals-ui .approvals-header__title,
body.approvals-body .approvals-ui .sbo-approvals-header h1,
body.sbo-dashboard-body.approvals-body .approvals-ui h1.approvals-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.approvals-body .approvals-ui .approvals-header__subtitle,
body.approvals-body .approvals-ui .sbo-approvals-header p,
body.sbo-dashboard-body.approvals-body .approvals-ui p.approvals-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.approvals-body .approvals-ui .sbo-approvals-header__badge,
body.approvals-body .approvals-header__badge {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #FBBF24 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.12) !important;
}

body.approvals-body .approvals-ui .sbo-approvals-header__badge[hidden],
body.approvals-body .approvals-header__badge[hidden] {
    display: none !important;
}

/* ---------- Content shell ---------- */
body.approvals-body .approvals-ui .sbo-approvals-content.approvals-content,
body.approvals-body .approvals-ui .approvals-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-alert {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #FDE68A !important;
    border-radius: 15px !important;
    background: #FFFBEB !important;
    color: #92400E !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

/* ---------- Summary ---------- */
body.approvals-body .approvals-ui .sbo-approvals-summary {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary article {
    min-height: 0 !important;
    padding: 16px 12px !important;
    display: grid !important;
    place-content: center !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary strong {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 1 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-pending {
    border-color: #FDE68A !important;
    background: #FFFBEB !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-pending strong {
    color: #B45309 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-pending small {
    color: #B45309 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-approved {
    border-color: #A7F3D0 !important;
    background: #ECFDF5 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-approved strong {
    color: #0d9488 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-approved small {
    color: #0d9488 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-rejected {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-rejected strong {
    color: #DC2626 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-summary .is-rejected small {
    color: #DC2626 !important;
}

/* ---------- Tabs ---------- */
body.approvals-body .approvals-ui .sbo-approvals-tabs {
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: visible !important;
    border: 2px solid #36C !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
}

body.approvals-body .approvals-ui .sbo-approvals-tabs a,
body.approvals-body .approvals-ui .sbo-approvals-tabs button {
    position: relative;
    min-height: 42px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #1a1a1a !important;
    background: transparent !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    text-align: center !important;
}

@media (min-width: 768px) {
    body.approvals-body .approvals-ui .sbo-approvals-tabs a,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button {
        font-size: 18px !important;
    }
}

body.approvals-body .approvals-ui .sbo-approvals-tabs a:not(.is-active):hover,
body.approvals-body .approvals-ui .sbo-approvals-tabs button:not(.is-active):hover {
    color: #0f172a !important;
    background: rgba(51, 102, 204, 0.06) !important;
}

body.approvals-body .approvals-ui .sbo-approvals-tabs a.is-active,
body.approvals-body .approvals-ui .sbo-approvals-tabs button.is-active {
    color: #fff !important;
    background: #36C !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-tabs a:not(.is-active),
body.approvals-body .approvals-ui .sbo-approvals-tabs button:not(.is-active) {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.approvals-body .approvals-ui .sbo-approvals-tabs a span,
body.approvals-body .approvals-ui .sbo-approvals-tabs button span {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(51, 102, 204, 0.12) !important;
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: 12px !important;
}

body.approvals-body .approvals-ui .sbo-approvals-tabs a.is-active span,
body.approvals-body .approvals-ui .sbo-approvals-tabs button.is-active span {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* ---------- Toolbar / filters ---------- */
body.approvals-body .approvals-ui .sbo-approvals-toolbar {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body.approvals-body .approvals-ui .sbo-approvals-toolbar > small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.approvals-body .approvals-ui .sbo-approvals-filters {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.approvals-body .approvals-ui .sbo-approvals-select {
    min-height: 42px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-select__icon {
    display: grid !important;
    place-items: center !important;
    color: #3366CC !important;
    font-size: inherit !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-select__icon svg {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
}

body.approvals-body .approvals-ui .sbo-approvals-select select {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    outline: none !important;
    cursor: pointer;
    max-width: 160px;
}

body.approvals-body .approvals-ui .sbo-approvals-custom-range {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.approvals-body .approvals-ui .sbo-approvals-custom-range[hidden] {
    display: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-custom-range input[type="date"] {
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-custom-range button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.approvals-body .approvals-ui .sbo-approvals-custom-range button:hover {
    background: #2554b0 !important;
}

/* ---------- Results / loader ---------- */
body.approvals-body .approvals-ui .sbo-approvals-results {
    position: relative !important;
    min-height: 120px !important;
}

body.approvals-body .approvals-ui .sbo-approvals-results.is-loading .sbo-approvals-list {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-loader {
    position: absolute !important;
    inset: 24px 0 auto !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 24px rgba(30, 50, 80, 0.1) !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.approvals-body .approvals-ui .sbo-approvals-loader[hidden] {
    display: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-loader i {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(51, 102, 204, 0.18) !important;
    border-top-color: #3366CC !important;
    border-radius: 50% !important;
    animation: sbo-approvals-spin 0.7s linear infinite !important;
    font-size: 0 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-list {
    display: grid !important;
    gap: 12px !important;
}

/* ---------- Cards ---------- */
body.approvals-body .approvals-ui .sbo-approval-card {
    padding: 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__top {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    gap: 12px !important;
    align-items: start !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__icon {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    border: 1px solid transparent;
    flex-shrink: 0;
}

body.approvals-body .approvals-ui .sbo-approval-card__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.approvals-body .approvals-ui .sbo-approval-card__icon.is-void {
    background: #FFFBEB !important;
    color: #B45309 !important;
    border-color: #FDE68A !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__icon.is-discount {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border-color: #BFDBFE !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__icon.is-refund {
    background: #ECFDF5 !important;
    color: #0d9488 !important;
    border-color: #A7F3D0 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__icon.is-delete {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    border-color: #FECACA !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy h2 {
    margin: 2px 0 8px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p span {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #F8FAFC !important;
    border: 1px solid #E0E8FF !important;
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p em {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-style: normal !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p em.is-void {
    background: #FFFBEB !important;
    color: #B45309 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p em.is-discount {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p em.is-refund {
    background: #ECFDF5 !important;
    color: #0d9488 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__copy p em.is-delete {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.approvals-body .approvals-ui .sbo-approval-status {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    border: 1px solid transparent;
}

body.approvals-body .approvals-ui .sbo-approval-status.is-pending {
    background: #FFFBEB !important;
    color: #B45309 !important;
    border-color: #FDE68A !important;
}

body.approvals-body .approvals-ui .sbo-approval-status.is-approved {
    background: #ECFDF5 !important;
    color: #0d9488 !important;
    border-color: #A7F3D0 !important;
}

body.approvals-body .approvals-ui .sbo-approval-status.is-rejected {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    border-color: #FECACA !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__meta {
    margin-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__meta > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__meta svg {
    display: block;
    width: 14px;
    height: 14px;
    color: #3366CC;
    flex-shrink: 0;
}

body.approvals-body .approvals-ui .sbo-approval-card__meta strong {
    margin-left: auto !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__reason {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__reason > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #FFFBEB;
    color: #B45309;
    flex-shrink: 0;
    font-size: 0 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__reason > span svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.approvals-body .approvals-ui .sbo-approval-card__reason p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions form {
    margin: 0 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions button {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    cursor: pointer;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions button svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions .is-reject {
    border: 1.5px solid #FECACA !important;
    background: #fff !important;
    color: #DC2626 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions .is-reject:hover {
    background: #FEF2F2 !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions .is-approve {
    border: 0 !important;
    background: #0d9488 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.22) !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions .is-approve:hover {
    background: #0f766e !important;
}

body.approvals-body .approvals-ui .sbo-approval-card__actions button:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
}

/* ---------- Empty ---------- */
body.approvals-body .approvals-ui .sbo-approvals-empty {
    padding: 48px 20px !important;
    text-align: center !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.approvals-body .approvals-ui .sbo-approvals-empty > span {
    display: inline-grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.approvals-body .approvals-ui .sbo-approvals-empty > span svg {
    display: block;
    width: 24px;
    height: 24px;
}

body.approvals-body .approvals-ui .sbo-approvals-empty h2 {
    margin: 0 0 6px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
}

body.approvals-body .approvals-ui .sbo-approvals-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.approvals-ui .sbo-bottom-nav {
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    backdrop-filter: none !important;
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
}

.approvals-ui .sbo-bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #333333 !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    text-decoration: none !important;
    transition: color 160ms ease;
}

.approvals-ui .sbo-bottom-nav a:hover {
    background: transparent !important;
    color: #3366CC !important;
}

.approvals-ui .sbo-bottom-nav a span,
.approvals-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

.approvals-ui .sbo-bottom-nav__icon {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    color: inherit;
}

.approvals-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.approvals-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px !important;
    height: 16px !important;
}

.approvals-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px !important;
    height: 15px !important;
}

.approvals-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.approvals-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px !important;
    height: 16px !important;
}

.approvals-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px !important;
    height: 4px !important;
}

.approvals-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

.approvals-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    font-family: var(--sb-font-semibold) !important;
}

body.approvals-body .sbo-bottom-nav,
body.sbo-dashboard-body.approvals-body .approvals-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
}

body.approvals-body .sbo-bottom-nav a,
body.sbo-dashboard-body.approvals-body .approvals-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.approvals-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.approvals-body .approvals-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.approvals-body .sbo-bottom-nav a span,
body.approvals-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.approvals-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
}

body.approvals-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.approvals-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.approvals-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px !important;
    height: 15px !important;
}

body.approvals-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.approvals-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.approvals-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px !important;
    height: 4px !important;
}

/* ---------- Responsive ---------- */
@media (min-width: 700px) {
    .approvals-ui .sbo-bottom-nav,
    body.approvals-body .sbo-bottom-nav,
    body.sbo-dashboard-body.approvals-body .approvals-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

@media (max-width: 520px) {
    body.approvals-body .approvals-ui .approvals-header {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 14px 12px 14px !important;
    }

    body.approvals-body .approvals-header__icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    body.approvals-body .approvals-header__title,
    body.approvals-body .approvals-ui .sbo-approvals-header h1 {
        font-size: 18px !important;
        color: #ffffff !important;
        font-family: var(--sb-font-bold) !important;
    }

    body.approvals-body .approvals-header__subtitle,
    body.approvals-body .approvals-ui .sbo-approvals-header p {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.92) !important;
        display: block !important;
    }

    body.approvals-body .approvals-ui .approvals-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary {
        gap: 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary article {
        padding: 12px 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary strong {
        font-size: 18px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 4px !important;
        padding: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs::-webkit-scrollbar {
        display: none;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs a,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button {
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs a span,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button span {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card {
        padding: 14px 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__top {
        gap: 10px !important;
        grid-template-columns: 40px 1fr !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__icon {
        width: 40px !important;
        height: 40px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__copy h2 {
        font-size: 15px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__meta strong {
        margin-left: 0 !important;
        width: 100%;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__actions button {
        min-height: 44px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 420px) {
    body.approvals-body .approvals-ui .approvals-header {
        gap: 6px !important;
        padding: 12px 10px 12px !important;
    }

    body.approvals-body .approvals-header__back {
        width: 32px !important;
        height: 32px !important;
    }

    body.approvals-body .approvals-header__icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    body.approvals-body .approvals-header__title,
    body.approvals-body .approvals-ui .sbo-approvals-header h1 {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }

    body.approvals-body .approvals-header__subtitle,
    body.approvals-body .approvals-ui .sbo-approvals-header p {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-header__badge,
    body.approvals-body .approvals-header__badge {
        min-width: 24px !important;
        height: 24px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
    }

    body.approvals-body .approvals-ui .approvals-content {
        padding: 12px 10px 120px !important;
        gap: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary article {
        padding: 10px 4px !important;
        border-radius: 12px !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary strong {
        font-size: 16px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary small {
        font-size: 10px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs::-webkit-scrollbar {
        display: none;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs a,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 16px !important;
        gap: 6px !important;
        border-radius: 8px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs a span,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button span {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-toolbar > small {
        order: 2;
        text-align: left !important;
        font-size: 13px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-select select {
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 13px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-custom-range {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-custom-range input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-custom-range button {
        grid-column: 1 / -1;
        min-height: 40px !important;
        width: 100% !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card {
        padding: 12px 10px !important;
        border-radius: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__top {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 0 !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__icon svg {
        width: 18px;
        height: 18px;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__copy h2 {
        font-size: 14px !important;
        margin: 0 0 6px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__copy p {
        gap: 6px !important;
        font-size: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-status {
        margin-top: 2px;
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__meta {
        gap: 8px 10px !important;
        font-size: 13px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__actions {
        gap: 8px !important;
    }

    body.approvals-body .approvals-ui .sbo-approval-card__actions button {
        min-height: 42px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-empty {
        padding: 36px 14px !important;
        border-radius: 12px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-empty h2 {
        font-size: 16px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-empty p {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   SERVICES & ITEMS ? match dashboard / staff / approvals UI (catalog-ui)
   ========================================================================== */

body.catalog-body.sbo-dashboard-body,
body.sbo-dashboard-body.catalog-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.catalog-ui.sbo-dashboard,
.sbo-dashboard.catalog-ui {
    --catalog-blue: #3366cc;
    --catalog-blue-deep: #2554b0;
    --catalog-blue-soft: #e8f0fe;
    --catalog-mint: #0d9488;
    --catalog-mint-soft: #e6f7f5;
    --catalog-text: #1e293b;
    --catalog-muted: #8a94a6;
    --catalog-line: #e8edf3;
    --catalog-border: #E0E8FF;
    --catalog-card: #ffffff;
    --catalog-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --catalog-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --catalog-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--catalog-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.catalog-body,
body.catalog-body .catalog-ui {
    font-size: 14px;
    color: #1e293b;
}

body.catalog-body,
body.catalog-body .catalog-ui,
body.catalog-body .catalog-ui p,
body.catalog-body .catalog-ui span,
body.catalog-body .catalog-ui small,
body.catalog-body .catalog-ui label,
body.catalog-body .catalog-ui a,
body.catalog-body .catalog-ui button,
body.catalog-body .catalog-ui input,
body.catalog-body .catalog-ui select,
body.catalog-body .catalog-ui strong,
body.catalog-body .catalog-ui b,
body.catalog-body .catalog-ui em,
body.catalog-body .catalog-ui i,
body.catalog-body .catalog-ui legend,
body.catalog-body .sbo-catalog-modal,
body.catalog-body .sbo-catalog-modal p,
body.catalog-body .sbo-catalog-modal span,
body.catalog-body .sbo-catalog-modal small,
body.catalog-body .sbo-catalog-modal label,
body.catalog-body .sbo-catalog-modal a,
body.catalog-body .sbo-catalog-modal button,
body.catalog-body .sbo-catalog-modal input,
body.catalog-body .sbo-catalog-modal select,
body.catalog-body .sbo-catalog-modal strong,
body.catalog-body .sbo-bottom-nav,
body.catalog-body .sbo-bottom-nav a,
body.catalog-body .sbo-bottom-nav span {
    font-size: 14px !important;
}

body.catalog-body .catalog-ui small,
body.catalog-body .catalog-ui .sbo-catalog-stats small,
body.catalog-body .catalog-ui .sbo-catalog-search__status,
body.catalog-body .catalog-ui .sbo-catalog-item__tags small,
body.catalog-body .catalog-ui .sbo-catalog-tag,
body.catalog-body .catalog-ui .sbo-category-pills button,
body.catalog-body .catalog-ui .sbo-catalog-tabs button,
body.catalog-body .catalog-ui .sbo-catalog-tip,
body.catalog-body .catalog-ui .sbo-category-card p,
body.catalog-body .catalog-ui .sbo-catalog-empty p,
body.catalog-body .catalog-ui .sbo-catalog-actions button,
body.catalog-body .sbo-catalog-modal label,
body.catalog-body .sbo-catalog-modal small,
body.catalog-body .sbo-catalog-modal p,
body.catalog-body .sbo-item-option small,
body.catalog-body .sbo-item-option strong,
body.catalog-body .sbo-commission-rate,
body.catalog-body .sbo-commission-rate span,
body.catalog-body .sbo-emoji-selected,
body.catalog-body .sbo-emoji-selected span,
body.catalog-body .sbo-color-picker button,
body.catalog-body .sbo-color-picker legend,
body.catalog-body .sbo-category-preview,
body.catalog-body .sbo-catalog-modal__buttons button,
body.catalog-body .sbo-bottom-nav a,
body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 14px !important;
}

body.catalog-body .catalog-ui [aria-hidden="true"],
body.catalog-body .sbo-bottom-nav__icon,
body.catalog-body .catalog-header__icon,
body.catalog-body .catalog-header__back,
body.catalog-body .catalog-ui .sbo-catalog-search__icon,
body.catalog-body .catalog-ui .sbo-catalog-search__loader,
body.catalog-body .catalog-ui .sbo-catalog-tip__icon {
 font-size: 0 !important;
}

.catalog-ui h1,
.catalog-ui h2,
.catalog-ui h3,
.catalog-ui strong,
.catalog-ui b {
 font-family: var(--sb-font-bold);
 font-weight: normal;
}

.catalog-ui em,
.catalog-ui i {
 font-style: normal;
 font-family: var(--sb-font-semibold);
}

.catalog-ui small,
.catalog-ui p,
.catalog-ui label,
.catalog-ui span,
.catalog-ui button,
.catalog-ui a,
.catalog-ui input,
.catalog-ui select {
 font-family: var(--sb-font-regular);
 font-weight: normal;
}

/* ---------- Header ---------- */
body.catalog-body .catalog-ui .sbo-catalog-header.catalog-header,
body.catalog-body .catalog-ui .catalog-header {
 position: sticky !important;
 top: 0 !important;
 z-index: 40 !important;
 min-height: 0 !important;
 padding: 18px 16px 16px !important;
 display: grid !important;
 grid-template-columns: auto auto minmax(0, 1fr) auto !important;
 align-items: center !important;
 gap: 10px !important;
 border: 0 !important;
 border-bottom: 0 !important;
 border-radius: 0 0 15px 15px !important;
 background: #36C !important;
 box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
 width: 100% !important;
 max-width: 100% !important;
 margin: 0 !important;
 box-sizing: border-box !important;
 overflow: visible !important;
}

body.catalog-body .catalog-header__back,
body.catalog-body .catalog-ui .catalog-header > a.catalog-header__back {
 width: 36px !important;
 height: 36px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 10px !important;
 color: #fff !important;
 text-decoration: none !important;
 background: transparent !important;
 box-shadow: none !important;
 font-size: 0 !important;
}

body.catalog-body .catalog-header__back:hover {
 background: rgba(255, 255, 255, 0.14) !important;
}

body.catalog-body .catalog-header__back svg {
 display: block;
}

body.catalog-body .catalog-header__icon {
 width: 40px !important;
 height: 40px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 12px !important;
 background: rgba(255, 255, 255, 0.16) !important;
 color: #fff !important;
 box-shadow: none !important;
 border: 0 !important;
 font-size: 0 !important;
 flex-shrink: 0;
}

body.catalog-body .catalog-header__icon svg {
 display: block;
 width: 18px;
 height: 18px;
}

body.catalog-body .catalog-header__titles {
 min-width: 0;
}

body.catalog-body .catalog-ui .catalog-header__title,
body.catalog-body .catalog-ui .sbo-catalog-header h1,
body.sbo-dashboard-body.catalog-body .catalog-ui h1.catalog-header__title {
 margin: 0 0 4px !important;
 color: #ffffff !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 22px !important;
 font-weight: normal !important;
 line-height: 1.15 !important;
 letter-spacing: -0.02em !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

body.catalog-body .catalog-ui .catalog-header__subtitle,
body.catalog-body .catalog-ui .sbo-catalog-header p,
body.sbo-dashboard-body.catalog-body .catalog-ui p.catalog-header__subtitle {
 margin: 0 !important;
 color: rgba(255, 255, 255, 0.92) !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 14px !important;
 font-weight: normal !important;
 line-height: 1.35 !important;
 display: block !important;
}

body.catalog-body .catalog-ui .catalog-header__action,
body.catalog-body .catalog-header__action {
 min-height: 40px !important;
 padding: 0 14px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 8px !important;
 border: 0 !important;
 border-radius: 10px !important;
 background: #fff !important;
 color: #3366CC !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 font-weight: normal !important;
 text-decoration: none !important;
 white-space: nowrap !important;
 box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
 cursor: pointer;
}

body.catalog-body .catalog-header__action [data-catalog-primary-label],
body.catalog-body .catalog-ui .catalog-header__action [data-catalog-primary-label] {
 font-family: var(--sb-font-semibold) !important;
 font-weight: normal !important;
}

body.catalog-body .catalog-header__action:hover {
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

/* ---------- Content shell ---------- */
body.catalog-body .catalog-ui .sbo-catalog-content.catalog-content,
body.catalog-body .catalog-ui .catalog-content {
 position: relative !important;
 padding: 14px 16px 120px !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 14px !important;
 background: transparent !important;
 min-height: 240px !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui [data-catalog-panel] {
 display: flex !important;
 flex-direction: column !important;
 gap: 14px !important;
}

body.catalog-body .catalog-ui [data-catalog-panel][hidden] {
 display: none !important;
}

/* Search/filter: display:grid !important on cards must not override [hidden] */
body.catalog-body .catalog-ui .sbo-catalog-item[hidden],
body.catalog-body .catalog-ui .sbo-catalog-empty[hidden] {
 display: none !important;
}

/* ---------- Tabs ---------- */
body.catalog-body .catalog-ui .sbo-catalog-tabs {
 margin: 0 !important;
 padding: 5px !important;
 display: grid !important;
 grid-template-columns: 1fr 1fr !important;
 gap: 0 !important;
 border: 2px solid #36C !important;
 border-radius: 10px !important;
 background: #ffffff !important;
 box-shadow: none !important;
 width: 100%;
 box-sizing: border-box;
}

body.catalog-body .catalog-ui .sbo-catalog-tabs button {
 position: relative;
 min-height: 42px !important;
 padding: 0 14px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 border: 0 !important;
 border-radius: 7px !important;
 color: #1a1a1a !important;
 background: transparent !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 16px !important;
 font-weight: normal !important;
 line-height: 1.2 !important;
 box-shadow: none !important;
 cursor: pointer;
}

body.catalog-body .catalog-ui .sbo-catalog-tabs button:not(.is-active):hover {
 color: #0f172a !important;
 background: rgba(51, 102, 204, 0.06) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tabs button.is-active {
 color: #fff !important;
 background: #36C !important;
 font-family: var(--sb-font-bold) !important;
 font-weight: normal !important;
 box-shadow: none !important;
}

/* ---------- Stats ---------- */
body.catalog-body .catalog-ui .sbo-catalog-stats {
 margin: 0 !important;
 display: grid !important;
 gap: 10px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats--items {
 grid-template-columns: repeat(3, 1fr) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats--categories {
 grid-template-columns: repeat(2, 1fr) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats > div {
 min-height: 0 !important;
 padding: 16px 12px !important;
 display: grid !important;
 place-content: center !important;
 gap: 6px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 15px !important;
 text-align: center !important;
 background: #fff !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats strong {
 margin: 0 !important;
 color: #1e293b !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 22px !important;
 line-height: 1.2 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats strong.is-active,
body.catalog-body .catalog-ui .sbo-catalog-stats--items > div:nth-child(2) strong {
 color: #0d9488 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats strong.is-inactive,
body.catalog-body .catalog-ui .sbo-catalog-stats--items > div:nth-child(3) strong {
 color: #8a94a6 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-stats small {
 margin: 0 !important;
 color: #8a94a6 !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 text-transform: uppercase;
 letter-spacing: 0.03em;
}

/* ---------- Filters / search ---------- */
body.catalog-body .catalog-ui .sbo-catalog-filters {
 margin: 0 !important;
 display: grid !important;
 grid-template-columns: 1fr minmax(140px, 180px) !important;
 gap: 10px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-search {
 min-height: 46px !important;
 height: auto !important;
 padding: 0 14px !important;
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 12px !important;
 background: #fff !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-search:focus-within {
 border-color: #3366CC !important;
 box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-search__icon {
 display: grid;
 place-items: center;
 color: #3366CC;
 flex: 0 0 auto;
}

body.catalog-body .catalog-ui .sbo-catalog-search__icon svg {
 display: block;
 width: 16px;
 height: 16px;
}

body.catalog-body .catalog-ui .sbo-catalog-search input,
body.catalog-body .catalog-ui .sbo-catalog-filters select {
 width: 100% !important;
 min-height: 46px !important;
 height: auto !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 12px !important;
 outline: 0 !important;
 background: #fff !important;
 color: #1e293b !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 14px !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-search input {
 border: 0 !important;
 min-height: 0 !important;
 padding: 0 !important;
 background: transparent !important;
}

body.catalog-body .catalog-ui .sbo-catalog-filters select {
 padding: 0 12px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-filters select:focus {
 border-color: #3366CC !important;
 box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-search__loader {
 flex: 0 0 auto;
 display: none;
 width: 16px !important;
 height: 16px !important;
 border: 2px solid rgba(51, 102, 204, 0.18) !important;
 border-top-color: #3366CC !important;
 border-radius: 50% !important;
 animation: sbo-catalog-spin 0.7s linear infinite !important;
}

body.catalog-body .catalog-ui .sbo-catalog-search.is-loading .sbo-catalog-search__loader {
 display: block;
}

body.catalog-body .catalog-ui .sbo-catalog-search__status {
 min-height: 18px !important;
 margin: -6px 2px 0 !important;
 color: #8a94a6 !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 14px !important;
}

@keyframes sbo-catalog-spin {
 to { transform: rotate(360deg); }
}

/* ---------- Category pills (match staff / approvals / catalog tabs) ---------- */
body.catalog-body .catalog-ui .sbo-category-pills {
 margin: 0 !important;
 padding: 5px !important;
 display: flex !important;
 gap: 4px !important;
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 border: 2px solid #36C !important;
 border-radius: 10px !important;
 background: #ffffff !important;
 box-shadow: none !important;
 width: 100%;
 box-sizing: border-box;
}

body.catalog-body .catalog-ui .sbo-category-pills::-webkit-scrollbar {
 display: none;
}

body.catalog-body .catalog-ui .sbo-category-pills button {
 position: relative;
 min-height: 42px !important;
 padding: 0 14px !important;
 flex: 0 0 auto;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 6px !important;
 border: 0 !important;
 border-radius: 7px !important;
 background: transparent !important;
 color: #1a1a1a !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 14px !important;
 line-height: 1.2 !important;
 white-space: nowrap !important;
 box-shadow: none !important;
 cursor: pointer;
}

body.catalog-body .catalog-ui .sbo-category-pills button:not(.is-active):hover {
 color: #0f172a !important;
 background: rgba(51, 102, 204, 0.06) !important;
}

body.catalog-body .catalog-ui .sbo-category-pills button.is-active {
 background: #36C !important;
 border-color: transparent !important;
 color: #fff !important;
 font-family: var(--sb-font-bold) !important;
 box-shadow: none !important;
}

/* ---------- Item / category cards ---------- */
body.catalog-body .catalog-ui .sbo-catalog-item-list,
body.catalog-body .catalog-ui .sbo-category-list {
 display: grid !important;
 gap: 12px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item {
 min-height: 0 !important;
 padding: 16px !important;
 display: grid !important;
 grid-template-columns: 48px minmax(0, 1fr) auto auto !important;
 align-items: start !important;
 gap: 12px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 15px !important;
 background: #fff !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item:hover {
 border-color: #BFDBFE !important;
 box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item.is-inactive {
 opacity: 0.55 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-emoji {
 width: 48px !important;
 height: 48px !important;
 border-radius: 12px !important;
 font-size: 22px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
body.catalog-body .catalog-ui .sbo-category-card h3 {
 margin: 0 0 8px !important;
 color: #1e293b !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 16px !important;
 line-height: 1.3 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__tags {
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__tags small {
 color: #8a94a6 !important;
 font-size: 14px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag {
 padding: 4px 8px !important;
 border-radius: 8px !important;
 border: 1px solid transparent;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag--violet {
 background: #F5F3FF !important;
 color: #6D28D9 !important;
 border-color: #DDD6FE !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag--amber {
 background: #FFFBEB !important;
 color: #B45309 !important;
 border-color: #FDE68A !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag--slate {
 background: #F8FAFC !important;
 color: #64748B !important;
 border-color: #E0E8FF !important;
}

body.catalog-body .catalog-ui .sbo-catalog-price {
 margin-top: 10px !important;
 color: #3366CC !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 15px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-toggle {
 width: 36px !important;
 height: 20px !important;
 padding: 2px !important;
 border: 1px solid #CBD5E1 !important;
 border-radius: 999px !important;
 background: #fff !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-toggle i {
 width: 14px !important;
 height: 14px !important;
 border-radius: 50% !important;
 background: #94A3B8 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-toggle.is-on {
 border-color: #0d9488 !important;
 background: #ECFDF5 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-toggle.is-on i {
 background: #0d9488 !important;
 transform: translateX(14px);
}

body.catalog-body .catalog-ui .sbo-catalog-actions summary {
 width: 32px !important;
 height: 32px !important;
 border-radius: 10px !important;
 color: #64748B !important;
 font-size: 18px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions summary:hover {
 background: #F1F5F9 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions > div {
 width: 180px !important;
 padding: 8px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 12px !important;
 background: #fff !important;
 box-shadow: 0 12px 28px rgba(30, 50, 80, 0.14) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions button {
 border-radius: 8px !important;
 color: #1e293b !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions button:hover {
 background: #F8FAFC !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions button.is-danger {
 color: #DC2626 !important;
}

body.catalog-body .catalog-ui .sbo-category-card {
 min-height: 0 !important;
 padding: 14px 16px !important;
 display: grid !important;
 grid-template-columns: 48px minmax(0, 1fr) 28px 32px !important;
 align-items: center !important;
 gap: 12px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 15px !important;
 background: #fff !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-category-card:hover {
 border-color: #BFDBFE !important;
 box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.catalog-body .catalog-ui .sbo-category-card p {
 margin: 0 !important;
 color: #8a94a6 !important;
 font-size: 14px !important;
}

body.catalog-body .catalog-ui .sbo-category-open {
 color: #94A3B8 !important;
}

body.catalog-body .catalog-ui .sbo-category-card .sbo-category-open,
body.catalog-body .catalog-ui .sbo-category-card .sbo-catalog-actions summary {
    position: relative !important;
}

body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]::before,
body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 80;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(4px);
    padding: 7px 11px;
    border-radius: 8px;
    background: #1e293b;
    color: #fff;
    font-family: var(--sb-font-regular) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .22);
}

body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]::before {
    content: "";
    position: absolute;
    z-index: 80;
    top: 50%;
    right: calc(100% + 2px);
    transform: translateY(-50%) translateX(4px);
    border: 6px solid transparent;
    border-left-color: #1e293b;
}

@media (hover: hover) {
    body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]:hover::before,
    body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]:hover::after,
    body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]:focus-visible::before,
    body.catalog-body .catalog-ui .sbo-category-card [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

body.catalog-body .catalog-ui .sbo-category-card .sbo-catalog-actions[open] summary[data-tooltip]::before,
body.catalog-body .catalog-ui .sbo-category-card .sbo-catalog-actions[open] summary[data-tooltip]::after {
    opacity: 0 !important;
}

body.catalog-body .catalog-ui .sbo-new-category-row {
 min-height: 56px !important;
 border: 1px dashed #BFDBFE !important;
 border-radius: 15px !important;
 background: #F8FAFC !important;
 color: #3366CC !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-new-category-row:hover {
 border-color: #3366CC !important;
 background: #E8F0FE !important;
 color: #2554b0 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-empty {
 padding: 42px 18px !important;
 border: 1px dashed #BFDBFE !important;
 border-radius: 15px !important;
 background: #fff !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-empty > span {
 color: #3366CC !important;
 font-size: 28px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-empty h3 {
 color: #1e293b !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 16px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-empty p {
 color: #8a94a6 !important;
 font-size: 14px !important;
}

/* ---------- Tip ---------- */
body.catalog-body .catalog-ui .sbo-catalog-tip {
 margin: 0 !important;
 padding: 14px 16px !important;
 display: flex !important;
 align-items: flex-start !important;
 gap: 12px !important;
 border: 1px solid #BFDBFE !important;
 border-radius: 15px !important;
 background: #F8FAFC !important;
 color: #475569 !important;
 font-size: 14px !important;
 line-height: 1.55 !important;
 box-shadow: none !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tip__icon {
 width: 36px !important;
 height: 36px !important;
 margin: 0 !important;
 flex: 0 0 auto;
 padding: 8px;
 border-radius: 10px;
 background: #E8F0FE;
 stroke: #3366CC !important;
 box-sizing: border-box;
}

body.catalog-body .catalog-ui .sbo-catalog-tip b {
 color: #1e293b !important;
 font-family: var(--sb-font-bold) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tip b.is-commission {
 color: #6D28D9 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tip b.is-open-price {
 color: #EA580C !important;
}

/* ---------- Modals ---------- */
body.catalog-body .sbo-catalog-modal__dialog {
 border-radius: 15px !important;
 box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
 border: 0 !important;
}

body.catalog-body .sbo-catalog-modal__close {
 border-radius: 10px !important;
 color: #64748B !important;
}

body.catalog-body .sbo-catalog-modal__close:hover {
 background: #F1F5F9 !important;
}

body.catalog-body .sbo-catalog-modal h2 {
 color: #1e293b !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 18px !important;
}

body.catalog-body .sbo-catalog-modal h2:first-letter {
 color: #3366CC !important;
}

body.catalog-body .sbo-catalog-modal label {
 color: #1e293b !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
}

body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
body.catalog-body .sbo-catalog-modal select {
 border: 1px solid #E0E8FF !important;
 border-radius: 12px !important;
 color: #1e293b !important;
 font-size: 14px !important;
 box-shadow: none !important;
}

body.catalog-body .sbo-catalog-modal input:focus,
body.catalog-body .sbo-catalog-modal select:focus {
 border-color: #3366CC !important;
 box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.catalog-body .sbo-emoji-selected strong {
 border-color: #3366CC !important;
 background: #F8FAFC !important;
}

body.catalog-body .sbo-emoji-grid,
body.catalog-body .sbo-color-picker button {
 border-color: #E0E8FF !important;
}

body.catalog-body .sbo-emoji-grid button.is-selected,
body.catalog-body .sbo-color-picker button.is-selected {
 border-color: #3366CC !important;
 box-shadow: 0 0 0 1px #3366CC !important;
}

body.catalog-body .sbo-catalog-modal__buttons button {
 border: 1px solid #E0E8FF !important;
 border-radius: 12px !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 14px !important;
 box-shadow: none !important;
}

body.catalog-body .sbo-catalog-modal__buttons button:last-child {
 background: #36C !important;
 border-color: #36C !important;
 color: #fff !important;
 box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.catalog-body .sbo-catalog-modal__buttons button:last-child:hover {
 background: #2554b0 !important;
}

body.catalog-body .sbo-catalog-modal__buttons button.is-danger {
 background: #DC2626 !important;
 border-color: #DC2626 !important;
}

body.catalog-body .sbo-item-option,
body.catalog-body .sbo-item-option-group {
 background: #F8FAFC !important;
 border-radius: 12px !important;
}

body.catalog-body .sbo-item-option input:checked + i {
 border-color: #3366CC !important;
}

body.catalog-body .sbo-item-option input:checked + i::after {
 background: #3366CC !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.catalog-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.catalog-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.catalog-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.catalog-ui .sbo-bottom-nav a span,
.catalog-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.catalog-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 0 !important;
}

.catalog-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.catalog-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.catalog-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.catalog-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.catalog-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.catalog-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.catalog-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.catalog-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.catalog-body .sbo-bottom-nav,
body.sbo-dashboard-body.catalog-body .catalog-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.catalog-body .sbo-bottom-nav a,
body.sbo-dashboard-body.catalog-body .catalog-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

body.catalog-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.catalog-body .catalog-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.catalog-body .sbo-bottom-nav a span,
body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.catalog-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.catalog-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.catalog-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.catalog-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.catalog-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (min-width: 700px) {
    body.catalog-body .sbo-bottom-nav,
    body.sbo-dashboard-body.catalog-body .catalog-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
 body.catalog-body .catalog-ui .catalog-header {
 padding: 14px 12px 14px !important;
 gap: 8px !important;
 grid-template-columns: auto auto minmax(0, 1fr) auto !important;
 }

 body.catalog-body .catalog-header__icon {
 width: 36px !important;
 height: 36px !important;
 border-radius: 10px !important;
 }

 body.catalog-body .catalog-ui .catalog-header__title,
 body.catalog-body .catalog-ui .sbo-catalog-header h1 {
 font-size: 18px !important;
 }

 body.catalog-body .catalog-ui .catalog-header__subtitle,
 body.catalog-body .catalog-ui .sbo-catalog-header p {
 font-size: 14px !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 }

 body.catalog-body .catalog-header__action {
 min-height: 36px !important;
 padding: 0 10px !important;
 font-size: 14px !important;
 }

 body.catalog-body .catalog-ui .catalog-content {
 padding: 12px 10px 120px !important;
 gap: 12px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-stats--items {
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 6px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-stats > div {
 padding: 10px 4px !important;
 border-radius: 12px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-stats strong {
 font-size: 16px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-stats small {
 font-size: 14px !important;
 letter-spacing: 0.02em !important;
 line-height: 1.2 !important;
 word-break: break-word !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-filters {
 grid-template-columns: 1fr !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-item {
 padding: 12px 10px !important;
 grid-template-columns: 42px minmax(0, 1fr) auto !important;
 border-radius: 12px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-emoji {
 width: 40px !important;
 height: 40px !important;
 border-radius: 10px !important;
 font-size: 18px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
 body.catalog-body .catalog-ui .sbo-category-card h3 {
 font-size: 14px !important;
 }

 body.catalog-body .catalog-ui .sbo-catalog-toggle-form {
 display: none !important;
 }

 body.catalog-body .catalog-ui .sbo-category-card {
 padding: 12px 10px !important;
 grid-template-columns: 42px minmax(0, 1fr) 22px 28px !important;
 border-radius: 12px !important;
 }

 body.catalog-body .sbo-catalog-modal {
 padding: 16px !important;
 place-items: center !important;
 }

 body.catalog-body .sbo-catalog-modal__dialog,
 body.catalog-body .sbo-item-modal__dialog {
 width: min(100%, 480px) !important;
 max-height: calc(100vh - 32px) !important;
 border-radius: 16px !important;
 }
}

/* ==========================================================================
   SERVICES & ITEMS ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: catalog-fs-min-16 ? overrides existing 14px rules without global clash
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.catalog-body.catalog-fs-min-16,
    body.catalog-body.catalog-fs-min-16 .catalog-ui.catalog-fs-min-16,
    body.catalog-body.catalog-fs-min-16 .catalog-ui {
        font-size: 16px;
        --catalog-fs-min: 16px;
    }

    body.catalog-body.catalog-fs-min-16,
    body.catalog-body.catalog-fs-min-16 .catalog-ui,
    body.catalog-body.catalog-fs-min-16 .catalog-ui p,
    body.catalog-body.catalog-fs-min-16 .catalog-ui span,
    body.catalog-body.catalog-fs-min-16 .catalog-ui small,
    body.catalog-body.catalog-fs-min-16 .catalog-ui label,
    body.catalog-body.catalog-fs-min-16 .catalog-ui a,
    body.catalog-body.catalog-fs-min-16 .catalog-ui button,
    body.catalog-body.catalog-fs-min-16 .catalog-ui input,
    body.catalog-body.catalog-fs-min-16 .catalog-ui select,
    body.catalog-body.catalog-fs-min-16 .catalog-ui strong,
    body.catalog-body.catalog-fs-min-16 .catalog-ui b,
    body.catalog-body.catalog-fs-min-16 .catalog-ui em,
    body.catalog-body.catalog-fs-min-16 .catalog-ui i,
    body.catalog-body.catalog-fs-min-16 .catalog-ui legend,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal p,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal span,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal small,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal label,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal a,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal button,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal input,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal select,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal strong,
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav,
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav a,
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em) !important;
    }

    body.catalog-body.catalog-fs-min-16 .catalog-ui small,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-stats small,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-search__status,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-item__tags small,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-tag,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-category-pills button,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-tabs button,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-tip,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-category-card p,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-empty p,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-actions button,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-category-card h3,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .catalog-header__subtitle,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-header p,
    body.catalog-body.catalog-fs-min-16 .catalog-ui p.catalog-header__subtitle,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .catalog-header__action,
    body.catalog-body.catalog-fs-min-16 .catalog-header__action,
    body.catalog-body.catalog-fs-min-16 .catalog-header__action [data-catalog-primary-label],
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal label,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal small,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal p,
    body.catalog-body.catalog-fs-min-16 .sbo-item-option small,
    body.catalog-body.catalog-fs-min-16 .sbo-item-option strong,
    body.catalog-body.catalog-fs-min-16 .sbo-commission-rate,
    body.catalog-body.catalog-fs-min-16 .sbo-commission-rate span,
    body.catalog-body.catalog-fs-min-16 .sbo-emoji-selected,
    body.catalog-body.catalog-fs-min-16 .sbo-emoji-selected span,
    body.catalog-body.catalog-fs-min-16 .sbo-color-picker button,
    body.catalog-body.catalog-fs-min-16 .sbo-color-picker legend,
    body.catalog-body.catalog-fs-min-16 .sbo-category-preview,
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal__buttons button,
    body.catalog-body.catalog-fs-min-16 .sbo-new-category-row,
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav a,
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav a span,
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.catalog-body.catalog-fs-min-16 .catalog-ui [aria-hidden="true"],
    body.catalog-body.catalog-fs-min-16 .sbo-catalog-modal [aria-hidden="true"],
    body.catalog-body.catalog-fs-min-16 .sbo-bottom-nav__icon,
    body.catalog-body.catalog-fs-min-16 .catalog-header__icon,
    body.catalog-body.catalog-fs-min-16 .catalog-header__back,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-search__icon,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-search__loader,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-tip__icon,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-inline-icon[aria-hidden="true"] {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   SHOPS & DEVICES ? match dashboard / staff / catalog UI (shops-ui)
   ========================================================================== */

body.shops-body.sbo-dashboard-body,
body.sbo-dashboard-body.shops-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.shops-ui.sbo-dashboard,
.sbo-dashboard.shops-ui {
    --shops-blue: #3366cc;
    --shops-blue-deep: #2554b0;
    --shops-blue-soft: #e8f0fe;
    --shops-mint: #0d9488;
    --shops-mint-soft: #e6f7f5;
    --shops-text: #1e293b;
    --shops-muted: #8a94a6;
    --shops-line: #e8edf3;
    --shops-border: #E0E8FF;
    --shops-card: #ffffff;
    --shops-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --shops-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --shops-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--shops-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.shops-body,
body.shops-body .shops-ui {
    font-size: 14px;
    color: #1e293b;
}

body.shops-body,
body.shops-body .shops-ui,
body.shops-body .shops-ui p,
body.shops-body .shops-ui span,
body.shops-body .shops-ui small,
body.shops-body .shops-ui label,
body.shops-body .shops-ui a,
body.shops-body .shops-ui button,
body.shops-body .shops-ui input,
body.shops-body .shops-ui select,
body.shops-body .shops-ui strong,
body.shops-body .shops-ui b,
body.shops-body .shops-ui em,
body.shops-body .shops-ui i,
body.shops-body .sbo-shop-modal,
body.shops-body .sbo-shop-modal p,
body.shops-body .sbo-shop-modal span,
body.shops-body .sbo-shop-modal small,
body.shops-body .sbo-shop-modal label,
body.shops-body .sbo-shop-modal a,
body.shops-body .sbo-shop-modal button,
body.shops-body .sbo-shop-modal input,
body.shops-body .sbo-shop-modal select,
body.shops-body .sbo-shop-modal strong,
body.shops-body .sbo-bottom-nav,
body.shops-body .sbo-bottom-nav a,
body.shops-body .sbo-bottom-nav span {
    font-size: 14px !important;
}

body.shops-body .shops-ui small,
body.shops-body .shops-ui .sbo-shop-tabs button,
body.shops-body .shops-ui .sbo-shop-status,
body.shops-body .shops-ui .sbo-shop-fact-copy small,
body.shops-body .shops-ui .sbo-devices-heading p,
body.shops-body .shops-ui .sbo-device-copy p,
body.shops-body .shops-ui .sbo-device-copy small,
body.shops-body .shops-ui .sbo-device-empty p,
body.shops-body .shops-ui .sbo-shop-plan-note,
body.shops-body .shops-ui .sbo-all-shops small,
body.shops-body .shops-ui .sbo-shop-billing-note p,
body.shops-body .shops-ui .sbo-shop-device-note p,
body.shops-body .shops-ui .sbo-shops-empty p,
body.shops-body .shops-ui .sbo-shop-actions button,
body.shops-body .shops-ui .sbo-device-actions button,
body.shops-body .sbo-shop-modal label,
body.shops-body .sbo-shop-modal small,
body.shops-body .sbo-shop-modal p,
body.shops-body .sbo-shop-modal__info,
body.shops-body .sbo-shop-modal__buttons button,
body.shops-body .sbo-bottom-nav a,
body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 14px !important;
}

body.shops-body .shops-ui [aria-hidden="true"],
body.shops-body .sbo-bottom-nav__icon,
body.shops-body .shops-header__icon,
body.shops-body .shops-header__back {
    font-size: 0 !important;
}

.shops-ui h1,
.shops-ui h2,
.shops-ui h3,
.shops-ui h4,
.shops-ui strong,
.shops-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.shops-ui em,
.shops-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.shops-ui small,
.shops-ui p,
.shops-ui label,
.shops-ui span,
.shops-ui button,
.shops-ui a,
.shops-ui input,
.shops-ui select {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.shops-body .shops-ui .sbo-shops-header.shops-header,
body.shops-body .shops-ui .shops-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.shops-body .shops-header__back,
body.shops-body .shops-ui .shops-header > a.shops-header__back,
body.shops-body .shops-ui .sbo-shops-back.shops-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.shops-body .shops-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.shops-body .shops-header__back svg {
    display: block;
}

body.shops-body .shops-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.shops-body .shops-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.shops-body .shops-header__titles {
    min-width: 0;
}

body.shops-body .shops-ui .shops-header__title,
body.shops-body .shops-ui .sbo-shops-header h1,
body.sbo-dashboard-body.shops-body .shops-ui h1.shops-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.shops-body .shops-ui .shops-header__subtitle,
body.shops-body .shops-ui .sbo-shops-header p,
body.sbo-dashboard-body.shops-body .shops-ui p.shops-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.shops-body .shops-ui .shops-header__action,
body.shops-body .shops-header__action,
body.shops-body .shops-ui .sbo-shop-add-button.shops-header__action {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
    cursor: pointer;
}

body.shops-body .shops-header__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

body.shops-body .shops-header__action svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* ---------- Content shell ---------- */
body.shops-body .shops-ui .sbo-shops-content.shops-content,
body.shops-body .shops-ui .shops-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

body.shops-body .shops-ui .sbo-shop-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body.shops-body .shops-ui .sbo-shop-panel[hidden] {
    display: none !important;
}

/* ---------- Shop tabs ---------- */
body.shops-body .shops-ui .sbo-shop-tabs {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    scrollbar-width: none;
}

body.shops-body .shops-ui .sbo-shop-tabs::-webkit-scrollbar {
    display: none;
}

body.shops-body .shops-ui .sbo-shop-tabs button {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer;
}

body.shops-body .shops-ui .sbo-shop-tabs button:hover {
    border-color: #BFDBFE !important;
    color: #3366CC !important;
    background: #F8FAFC !important;
}

body.shops-body .shops-ui .sbo-shop-tabs button.is-active {
    background: #36C !important;
    border-color: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.shops-body .shops-ui .sbo-shop-tabs button small {
    padding: 2px 6px !important;
    border-radius: 6px !important;
    background: rgba(148, 163, 184, 0.2) !important;
    color: inherit !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.shops-body .shops-ui .sbo-shop-tabs button.is-active small {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* ---------- Shop card ---------- */
body.shops-body .shops-ui .sbo-shop-card {
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.shops-body .shops-ui .sbo-shop-card__head {
    min-height: 0 !important;
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    background: #36C !important;
    border-radius: 14px 14px 0 0 !important;
    color: #fff !important;
}

body.shops-body .shops-ui .sbo-shop-building {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    font-size: 22px !important;
}

body.shops-body .shops-ui .sbo-shop-card__head h2 {
    margin: 0 0 6px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-shop-status {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-shop-status.is-active {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #A7F3D0 !important;
}

body.shops-body .shops-ui .sbo-shop-status.is-inactive {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

body.shops-body .shops-ui .sbo-shop-branch-code {
    display: inline-block !important;
    margin: 0 0 0 8px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #E2E8F0 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    vertical-align: middle !important;
}

body.shops-body .shops-ui .sbo-shop-actions summary {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    cursor: pointer;
    list-style: none;
    font-size: 18px !important;
}

body.shops-body .shops-ui .sbo-shop-actions summary::-webkit-details-marker {
    display: none;
}

body.shops-body .shops-ui .sbo-shop-actions summary:hover {
    background: rgba(255, 255, 255, 0.24) !important;
}

body.shops-body .shops-ui .sbo-shop-actions > div {
    width: 210px !important;
    padding: 8px !important;
    position: absolute;
    z-index: 8;
    top: 40px;
    right: 0;
    background: #fff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(30, 50, 80, 0.14) !important;
}

body.shops-body .shops-ui .sbo-shop-actions button {
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #1e293b !important;
    text-align: left;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    cursor: pointer;
}

body.shops-body .shops-ui .sbo-shop-actions button:hover {
    background: #F8FAFC !important;
}

body.shops-body .shops-ui .sbo-shop-actions button.is-danger {
    color: #DC2626 !important;
}

body.shops-body .shops-ui .sbo-shop-facts {
    margin: 0 !important;
    border-radius: 0 0 14px 14px !important;
    overflow: hidden;
}

body.shops-body .shops-ui .sbo-shop-facts > div {
    min-height: 0 !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-top: 1px solid #E0E8FF !important;
    background: #fff !important;
}

body.shops-body .shops-ui .sbo-shop-fact-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-fact-copy {
    display: grid;
    gap: 0 !important;
    row-gap: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-fact-copy small {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

body.shops-body .shops-ui .sbo-shop-fact-copy strong {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

@media (min-width: 768px) {
    body.shops-body .shops-ui .sbo-shop-fact-copy strong {
        font-size: 18px !important;
    }
}

body.shops-body .shops-ui .sbo-shop-facts em {
    color: #0d9488 !important;
    font-size: 14px !important;
    font-style: normal;
    font-family: var(--sb-font-semibold) !important;
}

/* ---------- Branch QR Code ---------- */
body.shops-body .shops-ui .sbo-branch-qr {
    margin-top: 16px !important;
    padding: 16px 18px 18px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.shops-body .shops-ui .sbo-branch-qr__head h3 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-branch-qr__head p {
    margin: 4px 0 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.shops-body .shops-ui .sbo-branch-qr__card {
    margin-top: 14px !important;
    padding: 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    display: grid !important;
    gap: 14px !important;
    justify-items: center !important;
}

body.shops-body .shops-ui .sbo-branch-qr__preview {
    width: 240px !important;
    max-width: 100% !important;
    padding: 12px !important;
    border: 4px solid #3366CC !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.08) !important;
}

body.shops-body .shops-ui .sbo-branch-qr__preview img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

body.shops-body .shops-ui .sbo-branch-qr__meta {
    width: 100% !important;
    display: grid !important;
    gap: 4px !important;
    text-align: center !important;
}

body.shops-body .shops-ui .sbo-branch-qr__meta strong {
    color: #13203f !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-branch-qr__meta span {
    color: #1246D2 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.shops-body .shops-ui .sbo-branch-qr__meta small {
    color: #6b7280 !important;
    font-size: 13px !important;
}

body.shops-body .shops-ui .sbo-branch-qr__actions {
    margin-top: 14px !important;
    display: grid !important;
    gap: 10px !important;
}

body.shops-body .shops-ui .sbo-branch-qr__action {
    min-height: 44px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #D7E3FF !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer;
}

body.shops-body .shops-ui .sbo-branch-qr__action:hover {
    background: #F8FAFC !important;
}

body.shops-body .shops-ui .sbo-branch-qr__action span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3366CC !important;
}

/* ---------- Devices ---------- */
body.shops-body .shops-ui .sbo-devices-heading {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

body.shops-body .shops-ui .sbo-devices-heading h3,
body.shops-body .shops-ui .sbo-all-shops h3 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-transform: none !important;
}

body.shops-body .shops-ui .sbo-devices-heading > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

body.shops-body .shops-ui .sbo-devices-heading p {
    margin: 2px 0 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

body.shops-body .shops-ui .sbo-devices-heading h3 {
    margin: 0 !important;
    line-height: 1.2 !important;
}

body.shops-body .shops-ui .sbo-devices-heading button,
body.shops-body .shops-ui .sbo-shops-empty button {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.2) !important;
    cursor: pointer;
}

body.shops-body .shops-ui .sbo-devices-heading button:hover,
body.shops-body .shops-ui .sbo-shops-empty button:hover {
    background: #2554b0 !important;
}

body.shops-body .shops-ui .sbo-devices-heading button:disabled {
    background: #94A3B8 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

body.shops-body .shops-ui .sbo-device-list {
    display: grid !important;
    gap: 12px !important;
    margin-top: -8px !important;
}

body.shops-body .shops-ui .sbo-device-card {
    position: relative !important;
    min-height: 0 !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #fff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04) !important;
    overflow: visible !important;
}

body.shops-body .shops-ui .sbo-device-card:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 6px 18px rgba(30, 50, 80, 0.07) !important;
}

body.shops-body .shops-ui .sbo-device-icon {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

body.shops-body .shops-ui .sbo-device-icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

body.shops-body .shops-ui .sbo-device-icon.is-online {
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

body.shops-body .shops-ui .sbo-device-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding-right: 4px !important;
}

body.shops-body .shops-ui .sbo-device-copy h4 {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

@media (max-width: 1366px) {
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-device-copy h4 {
        font-size: 18px !important;
    }
}

body.shops-body .shops-ui .sbo-device-copy h4 span {
    margin-left: 0 !important;
    min-height: 24px !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.shops-body .shops-ui .sbo-device-copy h4 span.is-online {
    background: #E6F7F5 !important;
    border-color: transparent !important;
    color: #0d9488 !important;
}

body.shops-body .shops-ui .sbo-device-copy h4 span .sbo-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}

body.shops-body .shops-ui .sbo-device-copy p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.shops-body .shops-ui .sbo-device-copy small {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body.shops-body .shops-ui .sbo-device-copy p strong {
    color: #0f172a !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-device-actions {
    position: relative !important;
    margin-top: 2px !important;
}

body.shops-body .shops-ui .sbo-device-actions summary {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    color: #64748B !important;
    cursor: pointer;
    list-style: none;
    font-size: 0 !important;
    border: 1px solid #E0E8FF !important;
}

body.shops-body .shops-ui .sbo-device-actions summary::-webkit-details-marker {
    display: none;
}

body.shops-body .shops-ui .sbo-device-actions summary:hover {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border-color: #BFDBFE !important;
}

body.shops-body .shops-ui .sbo-device-actions summary svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

body.shops-body .shops-ui .sbo-device-actions > div {
    width: 190px !important;
    padding: 8px !important;
    position: absolute;
    z-index: 8;
    top: 40px;
    right: 0;
    background: #fff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(30, 50, 80, 0.14) !important;
}

body.shops-body .shops-ui .sbo-device-actions button {
    width: 100% !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #1e293b !important;
    text-align: left;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    cursor: pointer;
}

body.shops-body .shops-ui .sbo-device-actions button:hover {
    background: #F8FAFC !important;
}

body.shops-body .shops-ui .sbo-device-actions button.is-danger {
    color: #DC2626 !important;
}

body.shops-body .shops-ui .sbo-device-empty {
    padding: 28px 18px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    background: #fff !important;
    border: 1px dashed #BFDBFE !important;
    border-radius: 15px !important;
    text-align: center !important;
    box-shadow: none !important;
}

body.shops-body .shops-ui .sbo-device-empty > span {
    font-size: 28px !important;
    color: #3366CC !important;
}

body.shops-body .shops-ui .sbo-device-empty strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
}

body.shops-body .shops-ui .sbo-device-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.shops-body .shops-ui .sbo-shop-plan-note {
    margin: 0 !important;
    color: #B45309 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

/* ---------- All shops overview ---------- */
body.shops-body .shops-ui .sbo-all-shops {
    margin-top: 4px !important;
}

body.shops-body .shops-ui .sbo-all-shops h3 {
    margin: 0 0 4px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

body.shops-body .shops-ui .sbo-all-shops button {
    width: 100% !important;
    min-height: 0 !important;
    margin-bottom: 10px !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr auto 14px !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #1e293b !important;
    text-align: left;
    font-family: var(--sb-font-regular) !important;
    box-shadow: none !important;
    cursor: pointer;
}

body.shops-body .shops-ui .sbo-all-shops button:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
    transform: none;
}

body.shops-body .shops-ui .sbo-all-shops button.is-current {
    border-color: #3366CC !important;
    box-shadow: inset 0 0 0 1px #3366CC !important;
}

body.shops-body .shops-ui .sbo-all-shops button.is-inactive {
    opacity: 0.6;
}

body.shops-body .shops-ui .sbo-overview-icon {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 22px !important;
}

body.shops-body .shops-ui .sbo-all-shops button > span {
    display: grid;
}

body.shops-body .shops-ui .sbo-all-shops button > span:nth-child(3) {
    text-align: right;
}

body.shops-body .shops-ui .sbo-all-shops strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-all-shops button > span:nth-child(2) > strong,
body.shops-body .shops-ui .sbo-all-shops button > span:nth-child(3) > strong {
    font-size: 16px !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}

@media (max-width: 1366px) {
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-all-shops button > span:nth-child(2) > strong,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-all-shops button > span:nth-child(3) > strong {
        font-size: 18px !important;
    }
}

body.shops-body .shops-ui .sbo-all-shops small {
    margin-top: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.shops-body .shops-ui .sbo-all-shops button > span:nth-child(3) small {
    color: #0d9488 !important;
}

body.shops-body .shops-ui .sbo-all-shops button > b {
    color: #94A3B8 !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

/* ---------- Notes / empty ---------- */
body.shops-body .shops-ui .sbo-shop-billing-note,
body.shops-body .shops-ui .sbo-shop-device-note {
    margin-top: 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 15px !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    box-shadow: none !important;
}

body.shops-body .shops-ui .sbo-shop-device-note {
    min-height: 0 !important;
    align-items: center !important;
    border-color: #E0E8FF !important;
    background: #fff !important;
}

body.shops-body .shops-ui .sbo-shop-note-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 16px !important;
    line-height: 1;
    text-align: center;
}

body.shops-body .shops-ui .sbo-shop-billing-note p,
body.shops-body .shops-ui .sbo-shop-device-note p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body.shops-body .shops-ui .sbo-shop-billing-note strong {
    display: block;
    margin-bottom: 4px;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.shops-body .shops-ui .sbo-shop-billing-note b {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
}

body.shops-body .shops-ui .sbo-shop-billing-note a {
    margin-top: 8px !important;
    display: inline-block;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    body.shops-body .shops-ui .sbo-shop-billing-note strong,
    body.shops-body .shops-ui .sbo-shop-billing-note a {
        font-size: 18px !important;
    }
}

body.shops-body .shops-ui .sbo-shop-billing-note a:hover {
    color: #2554b0 !important;
    text-decoration: underline;
}

body.shops-body .shops-ui .sbo-shops-empty {
    padding: 48px 20px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1px dashed #BFDBFE !important;
    border-radius: 15px !important;
    text-align: center !important;
    box-shadow: none !important;
}

body.shops-body .shops-ui .sbo-shops-empty > span {
    font-size: 36px !important;
    color: #3366CC !important;
}

body.shops-body .shops-ui .sbo-shops-empty h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
}

body.shops-body .shops-ui .sbo-shops-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

/* ---------- Modals ---------- */
body.shops-body .sbo-shop-modal__dialog {
    border: 1px solid #E0E8FF !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 60px rgba(30, 50, 80, 0.22) !important;
    font-family: var(--sb-font-regular) !important;
}

body.shops-body .sbo-shop-modal h2 {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

body.shops-body .sbo-shop-modal h2 span {
    color: #3366CC !important;
}

body.shops-body .sbo-shop-modal__info {
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    font-size: 14px !important;
}

body.shops-body .sbo-shop-modal label {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.shops-body .sbo-shop-modal input,
body.shops-body .sbo-shop-modal select {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

body.shops-body .sbo-shop-modal input:focus,
body.shops-body .sbo-shop-modal select:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.shops-body .sbo-shop-phone {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
}

body.shops-body .sbo-shop-phone:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.shops-body .sbo-shop-modal__buttons button {
    border: 1px solid #E0E8FF !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.shops-body .sbo-shop-modal__buttons button:last-child {
    background: #36C !important;
    border-color: #36C !important;
    color: #fff !important;
}

body.shops-body .sbo-shop-modal__buttons button:hover {
    border-color: #3366CC !important;
}

body.shops-body .sbo-shop-modal__buttons button:last-child:hover {
    background: #2554b0 !important;
}

body.shops-body .sbo-remove-device-modal h2,
body.shops-body .sbo-remove-device-modal h2 span {
    color: #DC2626 !important;
}

body.shops-body .sbo-remove-device-modal .sbo-remove-device-confirm,
body.shops-body .sbo-remove-device-modal .sbo-remove-device-confirm:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #fff !important;
}

/* ---------- Bottom nav ---------- */
.shops-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.shops-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.shops-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.shops-ui .sbo-bottom-nav a span,
.shops-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.shops-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 0 !important;
}

.shops-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.shops-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.shops-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.shops-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.shops-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.shops-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.shops-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.shops-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.shops-body .sbo-bottom-nav,
body.sbo-dashboard-body.shops-body .shops-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.shops-body .sbo-bottom-nav a,
body.sbo-dashboard-body.shops-body .shops-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

body.shops-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.shops-body .shops-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.shops-body .sbo-bottom-nav a span,
body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.shops-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.shops-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.shops-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.shops-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.shops-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.shops-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.shops-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (min-width: 700px) {
    body.shops-body .sbo-bottom-nav,
    body.sbo-dashboard-body.shops-body .shops-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
    body.shops-body .shops-ui .shops-header {
        padding: 14px 12px 14px !important;
        gap: 8px !important;
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    }

    body.shops-body .shops-header__icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    body.shops-body .shops-ui .shops-header__title,
    body.shops-body .shops-ui .sbo-shops-header h1 {
        font-size: 18px !important;
    }

    body.shops-body .shops-ui .shops-header__subtitle,
    body.shops-body .shops-ui .sbo-shops-header p {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.shops-body .shops-header__action {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
    }

    body.shops-body .shops-ui .shops-content {
        padding: 12px 10px 120px !important;
        gap: 12px !important;
    }

    body.shops-body .shops-ui .sbo-shop-card__head {
        padding: 14px !important;
        grid-template-columns: 42px 1fr auto !important;
        gap: 10px !important;
    }

    body.shops-body .shops-ui .sbo-shop-building {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        font-size: 20px !important;
    }

    body.shops-body .shops-ui .sbo-shop-card__head h2 {
        font-size: 16px !important;
    }

    body.shops-body .shops-ui .sbo-shop-facts > div {
        padding: 12px 14px !important;
        grid-template-columns: 40px 1fr !important;
        gap: 10px !important;
    }

    body.shops-body .shops-ui .sbo-shop-fact-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
    }

    body.shops-body .shops-ui .sbo-shop-fact-copy strong {
        font-size: 16px !important;
    }

    body.shops-body .shops-ui .sbo-devices-heading button {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
    }

    body.shops-body .shops-ui .sbo-device-card {
        padding: 14px 12px !important;
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        border-radius: 14px !important;
        gap: 12px !important;
    }

    body.shops-body .shops-ui .sbo-device-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 0 !important;
        background: #E8F0FE !important;
        color: #3366CC !important;
    }

    body.shops-body .shops-ui .sbo-device-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    body.shops-body .shops-ui .sbo-device-copy h4 {
        font-size: 16px !important;
    }

    body.shops-body .shops-ui .sbo-all-shops button {
        padding: 12px 10px !important;
        grid-template-columns: 40px 1fr auto 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    body.shops-body .shops-ui .sbo-overview-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 18px !important;
    }

    body.shops-body .sbo-shop-modal {
        padding: 16px !important;
        place-items: center !important;
    }

    body.shops-body .sbo-shop-modal__dialog,
    body.shops-body .sbo-shop-modal__dialog--device {
        width: min(100%, 470px) !important;
        max-height: calc(100vh - 32px) !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   SHOPS & DEVICES ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: shops-fs-min-16 ? overrides existing 14px rules without global clash
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.shops-body.shops-fs-min-16,
    body.shops-body.shops-fs-min-16 .shops-ui.shops-fs-min-16,
    body.shops-body.shops-fs-min-16 .shops-ui {
        font-size: 16px;
        --shops-fs-min: 16px;
    }

    body.shops-body.shops-fs-min-16,
    body.shops-body.shops-fs-min-16 .shops-ui,
    body.shops-body.shops-fs-min-16 .shops-ui p,
    body.shops-body.shops-fs-min-16 .shops-ui span,
    body.shops-body.shops-fs-min-16 .shops-ui small,
    body.shops-body.shops-fs-min-16 .shops-ui label,
    body.shops-body.shops-fs-min-16 .shops-ui a,
    body.shops-body.shops-fs-min-16 .shops-ui button,
    body.shops-body.shops-fs-min-16 .shops-ui input,
    body.shops-body.shops-fs-min-16 .shops-ui select,
    body.shops-body.shops-fs-min-16 .shops-ui strong,
    body.shops-body.shops-fs-min-16 .shops-ui b,
    body.shops-body.shops-fs-min-16 .shops-ui em,
    body.shops-body.shops-fs-min-16 .shops-ui i,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal p,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal span,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal small,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal label,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal a,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal button,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal input,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal select,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal strong,
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav,
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav a,
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em) !important;
    }

    body.shops-body.shops-fs-min-16 .shops-ui small,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-tabs button,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-status,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-fact-copy small,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-devices-heading p,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-device-copy p,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-device-copy small,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-device-empty p,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-plan-note,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-all-shops small,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-billing-note p,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-device-note p,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shops-empty p,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-actions button,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-device-actions button,
    body.shops-body.shops-fs-min-16 .shops-ui .shops-header__subtitle,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shops-header p,
    body.shops-body.shops-fs-min-16 .shops-ui p.shops-header__subtitle,
    body.shops-body.shops-fs-min-16 .shops-ui .shops-header__action,
    body.shops-body.shops-fs-min-16 .shops-header__action,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-shop-add-button.shops-header__action,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal label,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal small,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal p,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal__info,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal__buttons button,
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav a,
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav a span,
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.shops-body.shops-fs-min-16 .shops-ui [aria-hidden="true"],
    body.shops-body.shops-fs-min-16 .sbo-shop-modal [aria-hidden="true"],
    body.shops-body.shops-fs-min-16 .sbo-bottom-nav__icon,
    body.shops-body.shops-fs-min-16 .shops-header__icon,
    body.shops-body.shops-fs-min-16 .shops-header__back {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   CREDIT LEDGER ? match dashboard / expense-book / staff UI (credit-ledger-ui)
   ========================================================================== */

body.credit-ledger-body.sbo-dashboard-body,
body.sbo-dashboard-body.credit-ledger-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.credit-ledger-ui.sbo-dashboard,
.sbo-dashboard.credit-ledger-ui {
    --cl-blue: #3366cc;
    --cl-blue-deep: #2554b0;
    --cl-blue-soft: #e8f0fe;
    --cl-mint: #0d9488;
    --cl-mint-soft: #e6f7f5;
    --cl-text: #1e293b;
    --cl-muted: #8a94a6;
    --cl-line: #e8edf3;
    --cl-border: #E0E8FF;
    --cl-card: #ffffff;
    --cl-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --cl-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --cl-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cl-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.credit-ledger-body,
body.credit-ledger-body .credit-ledger-ui {
    font-size: 14px;
    color: #1e293b;
}

body.credit-ledger-body,
body.credit-ledger-body .credit-ledger-ui,
body.credit-ledger-body .credit-ledger-ui p,
body.credit-ledger-body .credit-ledger-ui span,
body.credit-ledger-body .credit-ledger-ui small,
body.credit-ledger-body .credit-ledger-ui label,
body.credit-ledger-body .credit-ledger-ui a,
body.credit-ledger-body .credit-ledger-ui button,
body.credit-ledger-body .credit-ledger-ui input,
body.credit-ledger-body .credit-ledger-ui strong,
body.credit-ledger-body .credit-ledger-ui b,
body.credit-ledger-body .credit-ledger-ui em,
body.credit-ledger-body .credit-ledger-ui i,
body.credit-ledger-body .sbo-credit-customer-modal,
body.credit-ledger-body .sbo-credit-limit-modal,
body.credit-ledger-body .sbo-credit-customer-modal p,
body.credit-ledger-body .sbo-credit-customer-modal span,
body.credit-ledger-body .sbo-credit-customer-modal small,
body.credit-ledger-body .sbo-credit-customer-modal label,
body.credit-ledger-body .sbo-credit-customer-modal button,
body.credit-ledger-body .sbo-credit-customer-modal input,
body.credit-ledger-body .sbo-credit-limit-modal p,
body.credit-ledger-body .sbo-credit-limit-modal span,
body.credit-ledger-body .sbo-credit-limit-modal small,
body.credit-ledger-body .sbo-credit-limit-modal label,
body.credit-ledger-body .sbo-credit-limit-modal button,
body.credit-ledger-body .sbo-credit-limit-modal input {
    font-size: 14px !important;
}

body.credit-ledger-body .credit-ledger-ui small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-status,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__last,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage-label,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status {
    font-size: 14px !important;
}

body.credit-ledger-body .credit-ledger-ui [aria-hidden="true"],
body.credit-ledger-body .sbo-bottom-nav__icon,
body.credit-ledger-body .credit-ledger-header__icon,
body.credit-ledger-body .credit-ledger-header__back,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__loader {
    font-size: 0 !important;
}

.credit-ledger-ui h1,
.credit-ledger-ui h2,
.credit-ledger-ui h3,
.credit-ledger-ui strong,
.credit-ledger-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.credit-ledger-ui em,
.credit-ledger-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.credit-ledger-ui small,
.credit-ledger-ui p,
.credit-ledger-ui label,
.credit-ledger-ui span,
.credit-ledger-ui button,
.credit-ledger-ui a,
.credit-ledger-ui input {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.credit-ledger-body .credit-ledger-ui .sbo-staff-header.credit-ledger-header,
body.credit-ledger-body .credit-ledger-ui .credit-ledger-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.credit-ledger-body .credit-ledger-header__back,
body.credit-ledger-body .credit-ledger-ui .sbo-back-button.credit-ledger-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.credit-ledger-body .credit-ledger-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.credit-ledger-body .credit-ledger-header__back svg {
    display: block;
}

body.credit-ledger-body .credit-ledger-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.credit-ledger-body .credit-ledger-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.credit-ledger-body .credit-ledger-header__titles {
    min-width: 0;
}

body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__title,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-header h1,
body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui h1.credit-ledger-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__subtitle,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-header p,
body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui p.credit-ledger-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-add-staff-button.credit-ledger-header__action,
body.credit-ledger-body .credit-ledger-header__action {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
    cursor: pointer;
}

body.credit-ledger-body .credit-ledger-header__action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

body.credit-ledger-body .credit-ledger-header__action:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

body.credit-ledger-body .credit-ledger-header__action svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ---------- Content shell ---------- */
body.credit-ledger-body .credit-ledger-ui .sbo-staff-content.credit-ledger-content,
body.credit-ledger-body .credit-ledger-ui .credit-ledger-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

/* ---------- Summary ---------- */
body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary article {
    min-height: 0 !important;
    padding: 16px 12px !important;
    display: grid !important;
    place-content: center !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 1 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary article.is-alert {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary article.is-alert small {
    color: #DC2626 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary article.is-alert strong {
    color: #DC2626 !important;
}

/* ---------- Toolbar / search / filters ---------- */
body.credit-ledger-body .credit-ledger-ui .sbo-credit-toolbar {
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    flex-wrap: wrap;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-search.sbo-staff-search,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search.sbo-credit-search {
    flex: 1 1 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #8a94a6 !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-search:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon {
    display: grid;
    place-items: center;
    color: #3366CC;
    font-size: 0 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon svg {
    display: block;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: #1e293b !important;
    background: transparent;
    font: 14px var(--sb-font-regular) !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__loader {
    border-color: #E0E8FF !important;
    border-top-color: #3366CC !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status:empty,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status:empty {
    display: none !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status:not(:empty),
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status:not(:empty) {
    min-height: 18px !important;
    margin: 0 2px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters {
    flex: 1 1 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 2px solid #36C !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a {
    flex: 1 1 0 !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #1a1a1a !important;
    background: transparent !important;
    text-decoration: none !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a:hover:not(.is-active) {
    color: #0f172a !important;
    background: rgba(51, 102, 204, 0.06) !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a.is-active {
    border-color: transparent !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

@media (min-width: 768px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a {
        font-size: 18px !important;
    }
}

/* ---------- Customer cards ---------- */
body.credit-ledger-body .credit-ledger-ui .sbo-credit-list {
    margin: 0 !important;
    display: grid !important;
    gap: 16px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-item {
    margin: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card {
    padding: 16px !important;
    display: grid !important;
    gap: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__top {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto 18px !important;
    gap: 12px !important;
    align-items: center !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__avatar {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    border: 1px solid #BFDBFE !important;
    flex-shrink: 0;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity {
    min-width: 0;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity p {
    margin: 4px 0 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-status {
    min-height: 28px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-status__icon {
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-status__icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-status.is-active {
    border: 1px solid #99F6E4 !important;
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-status.is-suspended {
    border: 1px solid #FECACA !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__arrow {
    display: grid !important;
    place-items: center !important;
    color: #9aa5b3 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics small {
    display: block !important;
    margin-bottom: 4px !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__limit {
    display: grid !important;
    justify-items: end !important;
    gap: 4px !important;
    text-align: right !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__limit small {
    margin-bottom: 0 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit {
    margin: 0 !important;
    padding: 2px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #3366CC !important;
    font-size: 0 !important;
    cursor: pointer;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit:hover {
    background: #E8F0FE !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage {
    display: grid !important;
    gap: 6px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__bar {
    height: 6px !important;
    border-radius: 999px !important;
    background: #E8EDF3 !important;
    overflow: hidden !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__bar > i {
    display: block !important;
    height: 100% !important;
    min-width: 0 !important;
    border-radius: inherit !important;
    background: #0d9488 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__bar > i.is-near {
    background: #F59E0B !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__bar > i.is-over {
    background: #DC2626 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage-label {
    margin-top: 0 !important;
    display: inline-block !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage-label.is-near {
    color: #B45309 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage-label.is-over {
    color: #DC2626 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 2px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__last,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer small {
    min-height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__last,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer small {
        font-size: 16px !important;
    }
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup {
    min-height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup:hover {
    background: #dbe7fd !important;
    border-color: #93C5FD !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup-icon {
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty {
    padding: 42px 16px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    text-align: center !important;
    box-shadow: none !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty > span,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty__icon {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty__icon svg,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty > span svg {
    display: block;
    width: 28px;
    height: 28px;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

/* ---------- Modals polish ---------- */
body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__dialog,
body.credit-ledger-body .sbo-credit-limit-modal .sbo-add-staff-modal__dialog {
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    background: #fff !important;
}

body.credit-ledger-body .sbo-credit-modal__header,
body.credit-ledger-body .sbo-credit-limit-modal__header {
    border-bottom: 1px solid #E8EDF3 !important;
    background: #fff !important;
}

body.credit-ledger-body .sbo-credit-modal__header h2,
body.credit-ledger-body .sbo-credit-limit-modal__header h2 {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
}

body.credit-ledger-body .sbo-credit-modal__header button,
body.credit-ledger-body .sbo-credit-limit-modal__header button {
    background: #F1F5F9 !important;
    color: #64748B !important;
}

body.credit-ledger-body .sbo-credit-limit-modal__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    border-radius: 12px !important;
    font-size: 0 !important;
}

body.credit-ledger-body .sbo-credit-limit-modal__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.credit-ledger-body .sbo-credit-customer-form input,
body.credit-ledger-body .sbo-credit-limit-field input {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
}

body.credit-ledger-body .sbo-credit-customer-form input:focus,
body.credit-ledger-body .sbo-credit-limit-field input:focus,
body.credit-ledger-body .sbo-credit-limit-field input.is-warning {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    outline: none;
    background: #fff !important;
}

body.credit-ledger-body .sbo-credit-limit-customer {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #64748B !important;
}

body.credit-ledger-body .sbo-credit-limit-customer strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button[type="button"],
body.credit-ledger-body .sbo-credit-limit-form__footer button[type="button"] {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #475569 !important;
    background: #fff !important;
    font-family: var(--sb-font-semibold) !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button[type="submit"],
body.credit-ledger-body .sbo-credit-limit-form__footer button[type="submit"] {
    border: 1px solid #3366CC !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
}

body.credit-ledger-body .sbo-credit-customer-form__errors {
    border: 1px solid #FECACA !important;
    border-radius: 12px !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.credit-ledger-body .sbo-credit-limit-warning {
    color: #B45309 !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.credit-ledger-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.credit-ledger-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.credit-ledger-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.credit-ledger-ui .sbo-bottom-nav a span,
.credit-ledger-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.credit-ledger-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.credit-ledger-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.credit-ledger-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.credit-ledger-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.credit-ledger-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.credit-ledger-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.credit-ledger-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.credit-ledger-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.credit-ledger-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

/* Body-level bottom nav overrides (match dashboard) */
body.credit-ledger-body .sbo-bottom-nav,
body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
}

body.credit-ledger-body .sbo-bottom-nav a,
body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.credit-ledger-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.credit-ledger-body .sbo-bottom-nav a span,
body.credit-ledger-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.credit-ledger-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.credit-ledger-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.credit-ledger-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.credit-ledger-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.credit-ledger-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.credit-ledger-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.credit-ledger-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (max-width: 720px) {
    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 14px 12px 14px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__title {
        font-size: 18px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__subtitle {
        font-size: 16px !important;
    }

    body.credit-ledger-body .credit-ledger-header__action {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 16px !important;
        gap: 6px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary {
        gap: 8px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary article {
        padding: 12px 8px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
        font-size: 15px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a {
        width: 100% !important;
        padding: 0 8px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__top {
        grid-template-columns: 42px minmax(0, 1fr) auto 14px !important;
        gap: 10px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup {
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    body.credit-ledger-body .sbo-credit-customer-modal,
    body.credit-ledger-body .sbo-credit-limit-modal {
        padding: 16px !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body.credit-ledger-body .sbo-credit-customer-modal.is-open,
    body.credit-ledger-body .sbo-credit-limit-modal.is-open {
        display: grid !important;
    }

    body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__dialog,
    body.credit-ledger-body .sbo-credit-limit-modal .sbo-add-staff-modal__dialog {
        width: min(100%, 480px) !important;
        max-height: 90vh !important;
        height: auto !important;
        border-radius: 15px !important;
        margin: auto !important;
    }
}

/* ==========================================================================
   FOLLOW-UPS ? match dashboard / expense-book / staff UI (followups-ui)
   ========================================================================== */

body.followups-body.sbo-dashboard-body,
body.sbo-dashboard-body.followups-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.followups-ui.sbo-dashboard,
.sbo-dashboard.followups-ui {
    --fu-blue: #3366cc;
    --fu-blue-deep: #2554b0;
    --fu-blue-soft: #e8f0fe;
    --fu-mint: #0d9488;
    --fu-mint-soft: #e6f7f5;
    --fu-text: #1e293b;
    --fu-muted: #8a94a6;
    --fu-line: #e8edf3;
    --fu-border: #E0E8FF;
    --fu-card: #ffffff;
    --fu-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --fu-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --fu-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fu-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.followups-body,
body.followups-body .followups-ui {
    font-size: 14px;
    color: #1e293b;
}

body.followups-body,
body.followups-body .followups-ui,
body.followups-body .followups-ui p,
body.followups-body .followups-ui span,
body.followups-body .followups-ui small,
body.followups-body .followups-ui label,
body.followups-body .followups-ui a,
body.followups-body .followups-ui button,
body.followups-body .followups-ui input,
body.followups-body .followups-ui select,
body.followups-body .followups-ui textarea,
body.followups-body .followups-ui strong,
body.followups-body .followups-ui b,
body.followups-body .followups-ui em,
body.followups-body .followups-ui i,
body.followups-body .sbo-followup-modal,
body.followups-body .sbo-complete-followup-modal,
body.followups-body .sbo-followup-action-modal,
body.followups-body .sbo-followup-modal p,
body.followups-body .sbo-followup-modal span,
body.followups-body .sbo-followup-modal small,
body.followups-body .sbo-followup-modal label,
body.followups-body .sbo-followup-modal button,
body.followups-body .sbo-followup-modal input,
body.followups-body .sbo-followup-modal select,
body.followups-body .sbo-followup-modal textarea,
body.followups-body .sbo-complete-followup-modal p,
body.followups-body .sbo-complete-followup-modal span,
body.followups-body .sbo-complete-followup-modal small,
body.followups-body .sbo-complete-followup-modal label,
body.followups-body .sbo-complete-followup-modal button,
body.followups-body .sbo-followup-action-modal p,
body.followups-body .sbo-followup-action-modal span,
body.followups-body .sbo-followup-action-modal small,
body.followups-body .sbo-followup-action-modal label,
body.followups-body .sbo-followup-action-modal button,
body.followups-body .sbo-followup-action-modal textarea {
    font-size: 16px !important;
}

body.followups-body .followups-ui small,
body.followups-body .followups-ui .sbo-followups-stats small,
body.followups-body .followups-ui .sbo-followup-card__copy h2 small {
    font-size: 14px !important;
}

body.followups-body .followups-ui [aria-hidden="true"],
body.followups-body .sbo-bottom-nav__icon,
body.followups-body .followups-header__icon,
body.followups-body .followups-header__back {
    font-size: 0 !important;
}

.followups-ui h1,
.followups-ui h2,
.followups-ui h3,
.followups-ui strong,
.followups-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.followups-ui em,
.followups-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.followups-ui small,
.followups-ui p,
.followups-ui label,
.followups-ui span,
.followups-ui button,
.followups-ui a,
.followups-ui input,
.followups-ui select,
.followups-ui textarea {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.followups-body .followups-ui .sbo-followups-header.followups-header,
body.followups-body .followups-ui .followups-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.followups-body .followups-header__back,
body.followups-body .followups-ui .followups-header > a.followups-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.followups-body .followups-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.followups-body .followups-header__back svg {
    display: block;
}

body.followups-body .followups-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.followups-body .followups-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.followups-body .followups-header__titles {
    min-width: 0;
}

body.followups-body .followups-ui .followups-header__title,
body.followups-body .followups-ui .sbo-followups-header h1,
body.sbo-dashboard-body.followups-body .followups-ui h1.followups-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.followups-body .followups-ui .followups-header__subtitle,
body.followups-body .followups-ui .sbo-followups-header p,
body.sbo-dashboard-body.followups-body .followups-ui p.followups-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.followups-body .followups-ui .followups-header__action,
body.followups-body .followups-header__action {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.1) !important;
    cursor: pointer;
}

@media (min-width: 768px) {
    body.followups-body .followups-ui .followups-header__action,
    body.followups-body .followups-header__action {
        font-size: 18px !important;
    }
}

body.followups-body .followups-header__action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.14) !important;
}

body.followups-body .followups-header__action:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

body.followups-body .followups-header__action svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ---------- Content shell ---------- */
body.followups-body .followups-ui .sbo-followups-content.followups-content,
body.followups-body .followups-ui .followups-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

/* ---------- Stats ---------- */
body.followups-body .followups-ui .sbo-followups-stats {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

body.followups-body .followups-ui .sbo-followups-stats article {
    min-height: 0 !important;
    padding: 16px 12px !important;
    display: grid !important;
    place-content: center !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.followups-body .followups-ui .sbo-followups-stats article strong {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.followups-body .followups-ui .sbo-followups-stats article small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 1 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-purple {
    border-color: #BFDBFE !important;
    background: #F8FBFF !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-purple strong {
    color: #3366CC !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-purple small {
    color: #3366CC !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-red {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-red strong {
    color: #DC2626 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-red small {
    color: #DC2626 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-amber {
    border-color: #FDE68A !important;
    background: #FFFBEB !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-amber strong {
    color: #B45309 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-amber small {
    color: #B45309 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-green {
    border-color: #A7F3D0 !important;
    background: #ECFDF5 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-green strong {
    color: #0d9488 !important;
}

body.followups-body .followups-ui .sbo-followups-stats .is-green small {
    color: #0d9488 !important;
}

/* ---------- Tabs ---------- */
body.followups-body .followups-ui .sbo-followups-tabs {
    margin: 0 !important;
    padding: 5px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    border: 2px solid #36C !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
}

body.followups-body .followups-ui .sbo-followups-tabs::-webkit-scrollbar {
    display: none;
}

body.followups-body .followups-ui .sbo-followups-tabs button {
    min-height: 38px !important;
    padding: 0 14px !important;
    flex: 1 1 0 !important;
    min-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #1a1a1a !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer;
}

@media (min-width: 768px) {
    body.followups-body .followups-ui .sbo-followups-tabs button {
        font-size: 18px !important;
    }
}

body.followups-body .followups-ui .sbo-followups-tabs button span {
    min-width: 20px !important;
    height: 20px !important;
    margin-left: 0 !important;
    padding: 0 5px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(51, 102, 204, 0.1) !important;
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: 14px !important;
}

body.followups-body .followups-ui .sbo-followups-tabs button:hover:not(.is-active) {
    color: #0f172a !important;
    background: rgba(51, 102, 204, 0.06) !important;
}

body.followups-body .followups-ui .sbo-followups-tabs button:not(.is-active) {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.followups-body .followups-ui .sbo-followups-tabs button.is-active {
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body .followups-ui .sbo-followups-tabs button.is-active span {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* ---------- Cards ---------- */
body.followups-body .followups-ui .sbo-followups-list {
    margin: 0 !important;
    display: grid !important;
    gap: 12px !important;
}

body.followups-body .followups-ui .sbo-followup-card {
    padding: 16px !important;
    display: grid !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: inherit !important;
}

body.followups-body .followups-ui .sbo-followup-card[hidden] {
    display: none !important;
}

body.followups-body .followups-ui .sbo-followup-card:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.followups-body .followups-ui .sbo-followup-card__top {
    display: grid !important;
    grid-template-columns: 48px 1fr 28px !important;
    gap: 12px !important;
    align-items: start !important;
}

body.followups-body .followups-ui .sbo-followup-avatar {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    border: 1px solid #BFDBFE !important;
}

body.followups-body .followups-ui .sbo-followup-card__copy h2 {
    margin: 0 0 5px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    body.followups-body .followups-ui .sbo-followup-card__copy h2 {
        font-size: 18px !important;
    }
}

body.followups-body .followups-ui .sbo-followup-card__copy h2 small {
    margin-left: 6px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 12px !important;
    vertical-align: middle;
}

body.followups-body .followups-ui .sbo-followup-card__copy h2 small.is-overdue {
    background: #FFFBEB !important;
    color: #B45309 !important;
    border: 1px solid #FDE68A !important;
}

body.followups-body .followups-ui .sbo-followup-card__copy h2 small.is-done {
    background: #ECFDF5 !important;
    color: #0d9488 !important;
    border: 1px solid #A7F3D0 !important;
}

body.followups-body .followups-ui .sbo-followup-card__copy h2 small.is-today,
body.followups-body .followups-ui .sbo-followup-card__copy h2 small.is-upcoming {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #BFDBFE !important;
}

body.followups-body .followups-ui .sbo-followup-card__copy p {
    margin: 0 0 4px !important;
    overflow: hidden !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    body.followups-body .followups-ui .sbo-followup-card__copy p {
        font-size: 16px !important;
    }
}

body.followups-body .followups-ui .sbo-followup-card__copy > small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body.followups-body .followups-ui .sbo-followup-card__copy > small {
        font-size: 16px !important;
    }
}

body.followups-body .followups-ui .sbo-followup-card__copy > small svg {
    display: block;
    flex-shrink: 0;
    color: #8a94a6;
}

body.followups-body .followups-ui .sbo-followup-card__arrow {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 0 !important;
    cursor: pointer;
}

body.followups-body .followups-ui .sbo-followup-card__arrow svg {
    display: block;
}

body.followups-body .followups-ui .sbo-followup-card__actions {
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

body.followups-body .followups-ui .sbo-followup-card__actions a,
body.followups-body .followups-ui .sbo-followup-card__actions button,
body.followups-body .followups-ui .sbo-followup-card__actions .is-completed {
    width: 100% !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0d9488 !important;
    text-decoration: none !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 16px !important;
    cursor: pointer;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    body.followups-body .followups-ui .sbo-followup-card__actions a,
    body.followups-body .followups-ui .sbo-followup-card__actions button,
    body.followups-body .followups-ui .sbo-followup-card__actions .is-completed {
        font-size: 18px !important;
    }
}

body.followups-body .followups-ui .sbo-followup-card__actions a svg,
body.followups-body .followups-ui .sbo-followup-card__actions button svg,
body.followups-body .followups-ui .sbo-followup-card__actions .is-completed svg {
    display: block;
    flex-shrink: 0;
}

body.followups-body .followups-ui .sbo-followup-card__actions a.is-call {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body .followups-ui .sbo-followup-card__actions .is-completed {
    border-color: #E0E8FF !important;
    background: #F8FAFC !important;
    color: #8a94a6 !important;
}

/* ---------- Empty ---------- */
body.followups-body .followups-ui .sbo-followups-empty {
    padding: 42px 16px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    text-align: center !important;
    box-shadow: none !important;
}

body.followups-body .followups-ui .sbo-followups-empty[hidden] {
    display: none !important;
}

body.followups-body .followups-ui .sbo-followups-empty > span {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    border: 1px solid #BFDBFE !important;
}

body.followups-body .followups-ui .sbo-followups-empty > span svg {
    display: block;
    width: 26px;
    height: 26px;
}

body.followups-body .followups-ui .sbo-followups-empty h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.followups-body .followups-ui .sbo-followups-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

/* ---------- Modals polish ---------- */
body.followups-body .sbo-followup-modal__dialog,
body.followups-body .sbo-complete-followup-modal__dialog,
body.followups-body .sbo-followup-action-modal__dialog,
body.followups-body .sbo-followup-detail-modal__dialog {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    background: #fff !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-modal__dialog {
    width: min(100%, 540px) !important;
    max-height: calc(100vh - 32px) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 22px 50px rgba(30, 50, 80, 0.18) !important;
}

body.followups-body .sbo-followup-modal__dialog > header,
body.followups-body .sbo-followup-modal__header {
    margin: 0 !important;
    min-height: 64px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    border-bottom: 1px solid #E8EDF3 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

body.followups-body .sbo-followup-modal__header .sbo-modal-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex: 0 0 auto !important;
}

body.followups-body .sbo-followup-modal__header .sbo-modal-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

body.followups-body .sbo-followup-modal__dialog h2,
body.followups-body .sbo-followup-modal__header h2,
body.followups-body #followup-modal-title,
body.followups-body .sbo-complete-followup-modal__dialog h2,
body.followups-body .sbo-followup-action-modal__dialog h2,
body.followups-body .sbo-followup-detail-modal__dialog h2 {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.followups-body .sbo-followup-modal__dialog header > button,
body.followups-body .sbo-followup-modal__header > button,
body.followups-body .sbo-complete-followup-modal__dialog header button,
body.followups-body .sbo-followup-action-modal__dialog header button,
body.followups-body .sbo-followup-detail-modal__dialog header > button {
    width: 36px !important;
    height: 36px !important;
    margin-left: auto !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #647084 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

body.followups-body .sbo-followup-modal__header > button:hover {
    background: #E2E8F0 !important;
    color: #334155 !important;
}

body.followups-body .sbo-followup-modal__header > button svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

body.followups-body .sbo-followup-modal__dialog > form {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
}

body.followups-body .sbo-followup-modal__body {
    padding: 16px 16px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    background: #F8FAFC !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body.followups-body .sbo-followup-section {
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: grid !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-section:last-of-type {
    margin-bottom: 0 !important;
}

body.followups-body .sbo-followup-section__card {
    margin: 0 !important;
    padding: 14px !important;
    display: grid !important;
    gap: 10px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-modal label,
body.followups-body .sbo-followup-field {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-modal label[hidden],
body.followups-body .sbo-followup-field[hidden] {
    display: none !important;
}

body.followups-body .sbo-followup-modal label > span,
body.followups-body .sbo-followup-field > span {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

body.followups-body .sbo-followup-modal label > span small,
body.followups-body .sbo-followup-field > span small,
body.followups-body .sbo-followup-modal label > small {
    color: #94a3b8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    text-transform: none !important;
}

body.followups-body .sbo-followup-modal input,
body.followups-body .sbo-followup-modal select,
body.followups-body .sbo-followup-modal textarea,
body.followups-body .sbo-followup-customer-search__input,
body.followups-body .sbo-followup-action-modal textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-modal textarea,
body.followups-body .sbo-followup-action-modal textarea {
    height: auto !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    resize: vertical !important;
}

body.followups-body .sbo-followup-modal input::placeholder,
body.followups-body .sbo-followup-modal textarea::placeholder {
    color: #94A3B8 !important;
}

body.followups-body .sbo-followup-modal input:focus,
body.followups-body .sbo-followup-modal select:focus,
body.followups-body .sbo-followup-modal textarea:focus,
body.followups-body .sbo-followup-customer-search__input:focus-within,
body.followups-body .sbo-followup-action-modal textarea:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    outline: none !important;
}

body.followups-body .sbo-followup-customer-search {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

body.followups-body .sbo-followup-customer-search > label {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.followups-body .sbo-followup-customer-search > label > span {
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    min-width: 0 !important;
}

body.followups-body .sbo-followup-customer-search > label small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-transform: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

body.followups-body .sbo-followup-customer-search > label small svg {
    display: block;
}

body.followups-body .sbo-followup-customer-search__input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-customer-search__input > span {
    display: grid !important;
    place-items: center !important;
    color: #3366CC !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
}

body.followups-body .sbo-followup-customer-search__input > span svg {
    display: block;
}

body.followups-body .sbo-followup-modal .sbo-followup-customer-search__input input {
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    flex: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 16px !important;
}

body.followups-body .sbo-followup-customer-status {
    margin: 0 !important;
    min-height: 0 !important;
    color: #64748B !important;
    font-size: 13px !important;
}

body.followups-body .sbo-followup-customer-results {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    body.followups-body .sbo-followup-customer-search {
        gap: 8px !important;
    }

    body.followups-body .sbo-followup-customer-search > label {
        gap: 8px !important;
        font-size: 16px !important;
    }

    body.followups-body .sbo-followup-customer-search > label small {
        font-size: 14px !important;
    }

    body.followups-body .sbo-followup-customer-search__input {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 14px !important;
    }

    body.followups-body .sbo-followup-modal .sbo-followup-customer-search__input input {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    body.followups-body .sbo-followup-customer-search > label {
        font-size: 18px !important;
    }

    body.followups-body .sbo-followup-customer-search > label small {
        font-size: 15px !important;
    }

    body.followups-body .sbo-followup-customer-search__input {
        min-height: 52px !important;
        height: 52px !important;
    }

    body.followups-body .sbo-followup-modal .sbo-followup-customer-search__input input {
        font-size: 18px !important;
    }
}

body.followups-body .sbo-followup-kind {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-kind label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
}

body.followups-body .sbo-followup-kind span,
body.followups-body .sbo-followup-date-shortcuts button {
    width: 100% !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #475569 !important;
    background: #fff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

body.followups-body .sbo-followup-kind span {
    white-space: nowrap !important;
}

body.followups-body .sbo-followup-date-shortcuts button {
    white-space: nowrap !important;
}

body.followups-body .sbo-followup-kind span svg,
body.followups-body .sbo-followup-date-shortcuts button svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
    position: static !important;
    margin: 0 !important;
}

body.followups-body .sbo-followup-kind span:hover,
body.followups-body .sbo-followup-date-shortcuts button:hover:not(.is-active) {
    border-color: #3366CC !important;
    background: #F8FBFF !important;
    color: #3366CC !important;
    filter: none !important;
    transform: none !important;
}

body.followups-body .sbo-followup-kind input:checked + span {
    border-color: #3366CC !important;
    box-shadow: none !important;
    color: #fff !important;
    background: #3366CC !important;
}

body.followups-body .sbo-followup-kind input:checked + span svg {
    color: #fff !important;
}

@media (max-width: 767px) {
    body.followups-body .sbo-followup-kind {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.followups-body .sbo-followup-kind span {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 14px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        font-size: 16px !important;
    }
}

body.followups-body .sbo-followup-date-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
}

body.followups-body .sbo-followup-date-shortcuts button {
    width: 100% !important;
    min-height: 52px !important;
    padding: 10px 8px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

body.followups-body .sbo-followup-date-shortcuts button svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto !important;
    position: static !important;
    margin: 0 !important;
}

body.followups-body .sbo-followup-date-shortcuts button.is-active {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

body.followups-body .sbo-followup-date-shortcuts button.is-active svg {
    color: #fff !important;
}

@media (max-width: 767px) {
    body.followups-body .sbo-followup-date-shortcuts {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.followups-body .sbo-followup-date-shortcuts button {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 14px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        font-size: 16px !important;
    }

    body.followups-body .sbo-followup-date-shortcuts button svg {
        width: 16px !important;
        height: 16px !important;
    }
}

body.followups-body .sbo-followup-section__title,
body.followups-body .sbo-followup-modal legend {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.followups-body .sbo-followup-section__title span,
body.followups-body .sbo-followup-modal legend span {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
    font-weight: normal !important;
    flex-shrink: 0 !important;
}

body.followups-body .sbo-followup-modal footer,
body.followups-body .sbo-followup-modal__footer {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 8px !important;
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top: 1px solid #E8EDF3 !important;
    box-shadow: none !important;
    z-index: 5 !important;
}

body.followups-body .sbo-followup-modal footer button,
body.followups-body .sbo-followup-modal footer button[type="button"],
body.followups-body .sbo-followup-modal footer button[type="submit"],
body.followups-body .sbo-followup-cancel,
body.followups-body .sbo-followup-submit {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    font-family: var(--sb-font-bold) !important;
}

body.followups-body .sbo-followup-modal footer button[type="button"],
body.followups-body .sbo-followup-cancel {
    border: 1px solid #E0E8FF !important;
    color: #475569 !important;
    background: #fff !important;
}

body.followups-body .sbo-followup-modal footer button[type="button"]:hover,
body.followups-body .sbo-followup-cancel:hover {
    border-color: #3366CC !important;
    color: #3366CC !important;
    background: #F8FBFF !important;
    filter: none !important;
    transform: none !important;
}

body.followups-body .sbo-followup-modal footer button[type="submit"],
body.followups-body .sbo-followup-submit,
body.followups-body .sbo-complete-followup-confirm,
body.followups-body .sbo-followup-action-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #3366CC !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

body.followups-body .sbo-followup-modal footer button[type="submit"]:hover,
body.followups-body .sbo-followup-submit:hover {
    background: #2554b0 !important;
    border-color: #2554b0 !important;
    filter: none !important;
}

body.followups-body .sbo-followup-submit .sbo-button-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    body.followups-body .sbo-followup-modal footer button,
    body.followups-body .sbo-followup-modal footer button[type="button"],
    body.followups-body .sbo-followup-modal footer button[type="submit"],
    body.followups-body .sbo-followup-cancel,
    body.followups-body .sbo-followup-submit {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
    }

    body.followups-body .sbo-followup-field > span,
    body.followups-body .sbo-followup-modal label > span {
        font-size: 18px !important;
    }

    body.followups-body .sbo-followup-field > span small {
        font-size: 15px !important;
    }
}

body.followups-body .sbo-complete-followup-confirm svg,
body.followups-body .sbo-followup-action-submit svg {
    display: block;
    flex-shrink: 0;
}

body.followups-body .sbo-followup-action-submit.is-remind {
    border: 1px solid #F59E0B !important;
    background: #fff !important;
    color: #B45309 !important;
    box-shadow: none !important;
}

body.followups-body .sbo-complete-followup-confirm:disabled,
body.followups-body .sbo-followup-action-submit:disabled {
    border-color: #CBD5E1 !important;
    background: #CBD5E1 !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body.followups-body .sbo-followup-modal__errors {
    padding: 10px 12px !important;
    border: 1px solid #FECACA !important;
    border-radius: 12px !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    font-size: 16px !important;
}

body.followups-body .sbo-complete-followup-modal label span,
body.followups-body .sbo-followup-action-options label > span,
body.followups-body .sbo-followup-reassign-options label > span,
body.followups-body .sbo-followup-detail-actions > button {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.followups-body .sbo-complete-followup-modal label span,
    body.followups-body .sbo-followup-action-options label > span,
    body.followups-body .sbo-followup-reassign-options label > span,
    body.followups-body .sbo-followup-detail-actions > button {
        font-size: 18px !important;
    }
}

body.followups-body .sbo-complete-followup-modal label input:checked + span,
body.followups-body .sbo-followup-reassign-options input:checked + span {
    border-color: #3366CC !important;
    background: #E8F0FE !important;
    box-shadow: inset 0 0 0 1px #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body .sbo-complete-followup-modal label input:checked + span i,
body.followups-body .sbo-followup-reassign-options input:checked + span em {
    border-color: #3366CC !important;
    color: #3366CC !important;
}

body.followups-body .sbo-followup-action-options input:checked + span {
    border-color: #F59E0B !important;
    background: #FFFBEB !important;
    box-shadow: inset 0 0 0 1px #F59E0B !important;
}

body.followups-body .sbo-followup-action-options input:checked + span i {
    border-color: #F59E0B !important;
}

body.followups-body .sbo-followup-customer-result__avatar,
body.followups-body .sbo-followup-detail-avatar,
body.followups-body .sbo-followup-reassign-options label > span i {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
}

body.followups-body .sbo-followup-customer-result__avatar svg {
    display: block;
}

body.followups-body .sbo-followup-detail-modal__dialog header > small {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.followups-body .sbo-followup-detail-modal dl {
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #F8FAFC !important;
}

body.followups-body .sbo-followup-detail-contact a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 12px !important;
    color: #0d9488 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.followups-body .sbo-followup-detail-contact a svg {
    display: block;
    flex-shrink: 0;
}

body.followups-body .sbo-followup-detail-contact a:first-child {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
}

body.followups-body .sbo-followup-detail-actions > button > span {
    font-size: 0 !important;
}

body.followups-body .sbo-followup-detail-actions > button > span svg,
body.followups-body .sbo-followup-detail-actions > button > i svg {
    display: block;
}

body.followups-body .sbo-followup-detail-actions > button > i {
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    color: #8a94a6 !important;
}

body.followups-body .sbo-followup-reassign-options label > span em {
    display: none;
    place-items: center;
    font-size: 0 !important;
}

body.followups-body .sbo-followup-reassign-options input:checked + span em {
    display: grid !important;
}

body.followups-body .sbo-followup-reassign-options label > span em svg {
    display: block;
}

body.followups-body .sbo-followup-detail-actions > button.is-done {
    border-color: #A7F3D0 !important;
    background: #ECFDF5 !important;
}

body.followups-body .sbo-followup-detail-actions > button.is-done b,
body.followups-body .sbo-followup-detail-actions > button.is-done i {
    color: #0d9488 !important;
}

/* All follow-ups popups ? mobile 16px | tablet & desktop 18px */
body.followups-body .sbo-followup-modal,
body.followups-body .sbo-followup-modal p,
body.followups-body .sbo-followup-modal span,
body.followups-body .sbo-followup-modal small,
body.followups-body .sbo-followup-modal label,
body.followups-body .sbo-followup-modal button,
body.followups-body .sbo-followup-modal input,
body.followups-body .sbo-followup-modal select,
body.followups-body .sbo-followup-modal textarea,
body.followups-body .sbo-followup-modal legend,
body.followups-body .sbo-followup-section__title,
body.followups-body .sbo-followup-modal label > span,
body.followups-body .sbo-followup-modal label > small,
body.followups-body .sbo-followup-modal .sbo-followup-customer-search__input input,
body.followups-body .sbo-followup-kind span,
body.followups-body .sbo-followup-date-shortcuts button,
body.followups-body .sbo-followup-modal footer button,
body.followups-body .sbo-followup-modal__errors,
body.followups-body .sbo-followup-modal__errors p,
body.followups-body .sbo-followup-modal__dialog header p,
body.followups-body .sbo-followup-modal__dialog h2,
body.followups-body #followup-modal-title,
body.followups-body .sbo-followup-customer-search > label small,
body.followups-body .sbo-complete-followup-modal,
body.followups-body .sbo-complete-followup-modal p,
body.followups-body .sbo-complete-followup-modal span,
body.followups-body .sbo-complete-followup-modal small,
body.followups-body .sbo-complete-followup-modal label,
body.followups-body .sbo-complete-followup-modal button,
body.followups-body .sbo-complete-followup-modal legend,
body.followups-body .sbo-complete-followup-modal label span,
body.followups-body .sbo-complete-followup-confirm,
body.followups-body .sbo-complete-followup-modal__dialog header p,
body.followups-body .sbo-complete-followup-modal__dialog h2,
body.followups-body #complete-followup-title,
body.followups-body .sbo-followup-detail-modal,
body.followups-body .sbo-followup-detail-modal p,
body.followups-body .sbo-followup-detail-modal span,
body.followups-body .sbo-followup-detail-modal small,
body.followups-body .sbo-followup-detail-modal button,
body.followups-body .sbo-followup-detail-modal a,
body.followups-body .sbo-followup-detail-modal dt,
body.followups-body .sbo-followup-detail-modal dd,
body.followups-body .sbo-followup-detail-modal h3,
body.followups-body .sbo-followup-detail-modal b,
body.followups-body .sbo-followup-detail-contact a,
body.followups-body .sbo-followup-detail-actions > button,
body.followups-body .sbo-followup-detail-actions > button b,
body.followups-body .sbo-followup-detail-actions > button small,
body.followups-body .sbo-followup-detail-modal__dialog header p,
body.followups-body .sbo-followup-detail-modal__dialog h2,
body.followups-body .sbo-followup-detail-modal__dialog header > small,
body.followups-body .sbo-followup-detail-modal__dialog > h3,
body.followups-body #followup-detail-name,
body.followups-body .sbo-followup-action-modal,
body.followups-body .sbo-followup-action-modal p,
body.followups-body .sbo-followup-action-modal span,
body.followups-body .sbo-followup-action-modal small,
body.followups-body .sbo-followup-action-modal label,
body.followups-body .sbo-followup-action-modal button,
body.followups-body .sbo-followup-action-modal textarea,
body.followups-body .sbo-followup-action-modal strong,
body.followups-body .sbo-followup-action-modal__dialog h2,
body.followups-body .sbo-followup-action-submit,
body.followups-body #note-followup-modal,
body.followups-body #note-followup-modal p,
body.followups-body #note-followup-modal span,
body.followups-body #note-followup-modal small,
body.followups-body #note-followup-modal label,
body.followups-body #note-followup-modal button,
body.followups-body #note-followup-modal textarea,
body.followups-body #note-followup-modal strong,
body.followups-body #note-followup-title,
body.followups-body #remind-followup-modal,
body.followups-body #remind-followup-modal p,
body.followups-body #remind-followup-modal span,
body.followups-body #remind-followup-modal label,
body.followups-body #remind-followup-modal button,
body.followups-body #remind-followup-title,
body.followups-body #reassign-followup-modal,
body.followups-body #reassign-followup-modal p,
body.followups-body #reassign-followup-modal span,
body.followups-body #reassign-followup-modal label,
body.followups-body #reassign-followup-modal button,
body.followups-body #reassign-followup-title {
    font-size: 16px !important;
}

body.followups-body .sbo-followup-modal__dialog h2,
body.followups-body #followup-modal-title,
body.followups-body .sbo-complete-followup-modal__dialog h2,
body.followups-body #complete-followup-title,
body.followups-body .sbo-followup-detail-modal__dialog h2,
body.followups-body #followup-detail-name,
body.followups-body .sbo-followup-action-modal__dialog h2,
body.followups-body #note-followup-title,
body.followups-body #remind-followup-title,
body.followups-body #reassign-followup-title {
    font-family: var(--sb-font-bold) !important;
}

/* New Follow-Up ? match Add New Staff modal chrome */
body.followups-body .sbo-followup-modal__header h2,
body.followups-body .sbo-followup-modal__dialog > .sbo-followup-modal__header h2,
body.followups-body #followup-modal-title {
    font-size: 18px !important;
    color: #0f172a !important;
}

body.followups-body .sbo-followup-modal__header > button {
    font-size: 0 !important;
    line-height: 0 !important;
}

body.followups-body .sbo-followup-modal__header .sbo-modal-icon,
body.followups-body .sbo-followup-modal__header .sbo-modal-icon[aria-hidden="true"] {
    font-size: 0 !important;
}

body.followups-body .sbo-followup-cancel,
body.followups-body .sbo-followup-submit,
body.followups-body .sbo-followup-modal__footer button {
    font-size: 14px !important;
    min-height: 46px !important;
    height: 46px !important;
}

body.followups-body .sbo-complete-followup-modal legend {
    font-family: var(--sb-font-semibold) !important;
}

body.followups-body .sbo-complete-followup-modal label span {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.followups-body .sbo-complete-followup-modal label input:checked + span {
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body .sbo-followup-detail-modal dt {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    color: #8a94a6 !important;
}

body.followups-body .sbo-followup-detail-modal dd {
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    color: #1e293b !important;
}

body.followups-body .sbo-followup-detail-modal__dialog > h3 {
    font-family: var(--sb-font-semibold) !important;
    letter-spacing: 0.04em !important;
}

body.followups-body .sbo-followup-detail-contact a {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.followups-body .sbo-followup-detail-contact a:first-child {
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body .sbo-followup-detail-actions > button b {
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body .sbo-followup-detail-actions > button small {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.followups-body #note-followup-modal .sbo-followup-action-submit,
body.followups-body .sbo-followup-action-submit,
body.followups-body .sbo-complete-followup-confirm {
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.followups-body #note-followup-modal p,
body.followups-body #remind-followup-modal p,
body.followups-body #reassign-followup-modal p {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.followups-body #note-followup-modal p strong,
body.followups-body #remind-followup-modal p strong,
body.followups-body #reassign-followup-modal p strong {
    font-family: var(--sb-font-semibold) !important;
}

body.followups-body #note-followup-modal textarea {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.followups-body .sbo-followup-modal__dialog header > button,
body.followups-body .sbo-followup-modal__header > button {
    font-size: 0 !important;
    line-height: 0 !important;
}

body.followups-body .sbo-complete-followup-modal__dialog header button,
body.followups-body .sbo-followup-action-modal__dialog header button,
body.followups-body .sbo-followup-detail-modal__dialog header > button {
    font-size: 22px !important;
    line-height: 1 !important;
}

body.followups-body .sbo-followup-customer-search__input > span,
body.followups-body .sbo-followup-detail-actions > button > span,
body.followups-body .sbo-followup-detail-actions > button > i {
    font-size: 0 !important;
}

@media (min-width: 768px) {
    body.followups-body .sbo-followup-modal,
    body.followups-body .sbo-followup-modal p,
    body.followups-body .sbo-followup-modal span,
    body.followups-body .sbo-followup-modal small,
    body.followups-body .sbo-followup-modal label,
    body.followups-body .sbo-followup-modal button,
    body.followups-body .sbo-followup-modal input,
    body.followups-body .sbo-followup-modal select,
    body.followups-body .sbo-followup-modal textarea,
    body.followups-body .sbo-followup-modal legend,
    body.followups-body .sbo-followup-section__title,
    body.followups-body .sbo-followup-modal label > span,
    body.followups-body .sbo-followup-modal label > small,
    body.followups-body .sbo-followup-modal .sbo-followup-customer-search__input input,
    body.followups-body .sbo-followup-kind span,
    body.followups-body .sbo-followup-date-shortcuts button,
    body.followups-body .sbo-followup-modal footer button,
    body.followups-body .sbo-followup-modal__errors,
    body.followups-body .sbo-followup-modal__errors p,
    body.followups-body .sbo-followup-modal__dialog header p,
    body.followups-body .sbo-followup-modal__dialog h2,
    body.followups-body #followup-modal-title,
    body.followups-body .sbo-followup-customer-search > label small,
    body.followups-body .sbo-complete-followup-modal,
    body.followups-body .sbo-complete-followup-modal p,
    body.followups-body .sbo-complete-followup-modal span,
    body.followups-body .sbo-complete-followup-modal small,
    body.followups-body .sbo-complete-followup-modal label,
    body.followups-body .sbo-complete-followup-modal button,
    body.followups-body .sbo-complete-followup-modal legend,
    body.followups-body .sbo-complete-followup-modal label span,
    body.followups-body .sbo-complete-followup-confirm,
    body.followups-body .sbo-complete-followup-modal__dialog header p,
    body.followups-body .sbo-complete-followup-modal__dialog h2,
    body.followups-body #complete-followup-title,
    body.followups-body .sbo-followup-detail-modal,
    body.followups-body .sbo-followup-detail-modal p,
    body.followups-body .sbo-followup-detail-modal span,
    body.followups-body .sbo-followup-detail-modal small,
    body.followups-body .sbo-followup-detail-modal button,
    body.followups-body .sbo-followup-detail-modal a,
    body.followups-body .sbo-followup-detail-modal dt,
    body.followups-body .sbo-followup-detail-modal dd,
    body.followups-body .sbo-followup-detail-modal h3,
    body.followups-body .sbo-followup-detail-modal b,
    body.followups-body .sbo-followup-detail-contact a,
    body.followups-body .sbo-followup-detail-actions > button,
    body.followups-body .sbo-followup-detail-actions > button b,
    body.followups-body .sbo-followup-detail-actions > button small,
    body.followups-body .sbo-followup-detail-modal__dialog header p,
    body.followups-body .sbo-followup-detail-modal__dialog h2,
    body.followups-body .sbo-followup-detail-modal__dialog header > small,
    body.followups-body .sbo-followup-detail-modal__dialog > h3,
    body.followups-body #followup-detail-name,
    body.followups-body .sbo-followup-action-modal,
    body.followups-body .sbo-followup-action-modal p,
    body.followups-body .sbo-followup-action-modal span,
    body.followups-body .sbo-followup-action-modal small,
    body.followups-body .sbo-followup-action-modal label,
    body.followups-body .sbo-followup-action-modal button,
    body.followups-body .sbo-followup-action-modal textarea,
    body.followups-body .sbo-followup-action-modal strong,
    body.followups-body .sbo-followup-action-modal__dialog h2,
    body.followups-body .sbo-followup-action-submit,
    body.followups-body #note-followup-modal,
    body.followups-body #note-followup-modal p,
    body.followups-body #note-followup-modal span,
    body.followups-body #note-followup-modal small,
    body.followups-body #note-followup-modal label,
    body.followups-body #note-followup-modal button,
    body.followups-body #note-followup-modal textarea,
    body.followups-body #note-followup-modal strong,
    body.followups-body #note-followup-title,
    body.followups-body #remind-followup-modal,
    body.followups-body #remind-followup-modal p,
    body.followups-body #remind-followup-modal span,
    body.followups-body #remind-followup-modal label,
    body.followups-body #remind-followup-modal button,
    body.followups-body #remind-followup-title,
    body.followups-body #reassign-followup-modal,
    body.followups-body #reassign-followup-modal p,
    body.followups-body #reassign-followup-modal span,
    body.followups-body #reassign-followup-modal label,
    body.followups-body #reassign-followup-modal button,
    body.followups-body #reassign-followup-title {
        font-size: 18px !important;
    }

    body.followups-body .sbo-followup-modal__dialog header > button,
    body.followups-body .sbo-complete-followup-modal__dialog header button,
    body.followups-body .sbo-followup-action-modal__dialog header button,
    body.followups-body .sbo-followup-detail-modal__dialog header > button {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    body.followups-body .sbo-followup-kind span,
    body.followups-body .sbo-followup-date-shortcuts button {
        min-height: 56px !important;
    }

    body.followups-body .sbo-followup-customer-search__input > span,
    body.followups-body .sbo-followup-detail-actions > button > span,
    body.followups-body .sbo-followup-detail-actions > button > i {
        font-size: 0 !important;
    }
}

/* New Follow-Up modal title/labels + card name ? =1366px (includes mobile) */
@media (max-width: 1366px) {
    body.followups-body .sbo-followup-modal__dialog h2,
    body.followups-body .sbo-followup-modal__header h2,
    body.followups-body #followup-modal-title {
        font-size: 18px !important;
    }

    body.followups-body .sbo-followup-modal legend,
    body.followups-body .sbo-followup-section__title,
    body.followups-body .sbo-followup-modal label,
    body.followups-body .sbo-followup-modal label > span,
    body.followups-body .sbo-followup-field > span,
    body.followups-body .sbo-followup-customer-search > label,
    body.followups-body .sbo-followup-customer-search > label > span,
    body.followups-body .followups-ui .sbo-followup-card__copy h2 {
        font-size: 18px !important;
    }

    body.followups-body .sbo-followup-cancel,
    body.followups-body .sbo-followup-submit,
    body.followups-body .sbo-followup-modal__footer button {
        font-size: 14px !important;
    }
}

/* ---------- Bottom nav (match dashboard) ---------- */
.followups-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.followups-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.followups-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.followups-ui .sbo-bottom-nav a span,
.followups-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.followups-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.followups-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.followups-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.followups-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.followups-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.followups-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.followups-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.followups-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.followups-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.followups-body .sbo-bottom-nav,
body.sbo-dashboard-body.followups-body .followups-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
}

body.followups-body .sbo-bottom-nav a,
body.sbo-dashboard-body.followups-body .followups-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

body.followups-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.followups-body .followups-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.followups-body .sbo-bottom-nav a span,
body.followups-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.followups-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.followups-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.followups-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.followups-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.followups-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.followups-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.followups-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (max-width: 720px) {
    body.followups-body .followups-ui .followups-header {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 14px 12px 14px !important;
    }

    body.followups-body .followups-ui .followups-header__title {
        font-size: 18px !important;
    }

    body.followups-body .followups-ui .followups-header__subtitle {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.followups-body .followups-header__action {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 16px !important;
        gap: 6px !important;
    }

    body.followups-body .followups-ui .followups-content {
        padding: 12px 10px 120px !important;
        gap: 12px !important;
    }

    body.followups-body .followups-ui .sbo-followups-stats {
        gap: 8px !important;
    }

    body.followups-body .followups-ui .sbo-followups-stats article {
        padding: 12px 10px !important;
    }

    body.followups-body .followups-ui .sbo-followups-stats article strong {
        font-size: 18px !important;
    }

    body.followups-body .followups-ui .sbo-followups-tabs button {
        padding: 0 12px !important;
        font-size: 16px !important;
    }

    body.followups-body .followups-ui .sbo-followup-card {
        padding: 12px 10px !important;
    }

    body.followups-body .followups-ui .sbo-followup-card__top {
        grid-template-columns: 42px 1fr 26px !important;
        gap: 10px !important;
    }

    body.followups-body .followups-ui .sbo-followup-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
    }

    body.followups-body .followups-ui .sbo-followup-card__copy h2 {
        font-size: 18px !important;
    }

    body.followups-body .followups-ui .sbo-followup-card__actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.followups-body .followups-ui .sbo-followup-card__actions a.is-call {
        grid-column: 1 / -1 !important;
    }

    body.followups-body .followups-ui .sbo-followup-card__actions a,
    body.followups-body .followups-ui .sbo-followup-card__actions button,
    body.followups-body .followups-ui .sbo-followup-card__actions .is-completed {
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 16px !important;
    }

    body.followups-body .sbo-followup-modal,
    body.followups-body .sbo-complete-followup-modal,
    body.followups-body .sbo-followup-action-modal,
    body.followups-body .sbo-followup-detail-modal {
        padding: 14px !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body.followups-body .sbo-followup-modal__dialog,
    body.followups-body .sbo-complete-followup-modal__dialog,
    body.followups-body .sbo-followup-action-modal__dialog,
    body.followups-body .sbo-followup-detail-modal__dialog {
        width: min(100%, 520px) !important;
        max-width: 100% !important;
        max-height: calc(100vh - 28px) !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 20px !important;
        border: 1px solid #E0E8FF !important;
    }

    body.followups-body .sbo-followup-modal__dialog > header,
    body.followups-body .sbo-followup-modal__header {
        padding: 12px 14px !important;
        min-height: 60px !important;
    }

    body.followups-body .sbo-followup-modal__dialog > form {
        padding: 0 !important;
    }

    body.followups-body .sbo-followup-modal__body {
        padding: 14px 14px 16px !important;
    }

    body.followups-body .sbo-followup-kind {
        gap: 6px !important;
    }

    body.followups-body .sbo-followup-modal footer,
    body.followups-body .sbo-followup-modal__footer {
        margin: 0 !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        border-radius: 0 0 20px 20px !important;
    }
}

/* ==========================================================================
   MY HANDOVERS ? match dashboard / expense-book / staff UI (handovers-ui)
   ========================================================================== */

body.handovers-body.sbo-dashboard-body,
body.sbo-dashboard-body.handovers-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.handovers-ui.sbo-dashboard,
.sbo-dashboard.handovers-ui {
    --handovers-blue: #3366cc;
    --handovers-blue-deep: #2554b0;
    --handovers-blue-soft: #e8f0fe;
    --handovers-mint: #0d9488;
    --handovers-mint-soft: #e6f7f5;
    --handovers-text: #1e293b;
    --handovers-muted: #8a94a6;
    --handovers-line: #e8edf3;
    --handovers-border: #E0E8FF;
    --handovers-card: #ffffff;
    --handovers-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --handovers-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --handovers-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--handovers-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.handovers-body,
body.handovers-body .handovers-ui {
    font-size: 14px;
    color: #1e293b;
}

body.handovers-body,
body.handovers-body .handovers-ui,
body.handovers-body .handovers-ui p,
body.handovers-body .handovers-ui span,
body.handovers-body .handovers-ui small,
body.handovers-body .handovers-ui label,
body.handovers-body .handovers-ui a,
body.handovers-body .handovers-ui button,
body.handovers-body .handovers-ui strong,
body.handovers-body .handovers-ui b,
body.handovers-body .handovers-ui em,
body.handovers-body .handovers-ui i,
body.handovers-body .sbo-handover-detail,
body.handovers-body .sbo-handover-detail p,
body.handovers-body .sbo-handover-detail span,
body.handovers-body .sbo-handover-detail small,
body.handovers-body .sbo-handover-detail a,
body.handovers-body .sbo-handover-detail button,
body.handovers-body .sbo-handover-detail strong,
body.handovers-body .sbo-handover-detail dt,
body.handovers-body .sbo-handover-detail dd {
    font-size: 14px !important;
}

body.handovers-body .handovers-ui small,
body.handovers-body .handovers-ui .sbo-handover-summary small,
body.handovers-body .handovers-ui .sbo-handover-summary__label,
body.handovers-body .handovers-ui .sbo-handover-summary__meta,
body.handovers-body .handovers-ui .sbo-handover-status,
body.handovers-body .handovers-ui .sbo-handover-card__amount small,
body.handovers-body .handovers-ui .sbo-handover-card__main p {
    font-size: 14px !important;
}

body.handovers-body .handovers-ui [aria-hidden="true"],
body.handovers-body .sbo-bottom-nav__icon,
body.handovers-body .handovers-header__icon,
body.handovers-body .handovers-header__back,
body.handovers-body .handovers-ui .sbo-handover-summary__icon,
body.handovers-body .handovers-ui .sbo-handover-sms-alert__icon,
body.handovers-body .handovers-ui .sbo-handover-empty > span {
    font-size: 0 !important;
}

.handovers-ui h1,
.handovers-ui h2,
.handovers-ui h3,
.handovers-ui strong,
.handovers-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.handovers-ui em,
.handovers-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.handovers-ui small,
.handovers-ui p,
.handovers-ui label,
.handovers-ui span,
.handovers-ui button,
.handovers-ui a {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.handovers-body .handovers-ui .sbo-handover-header.handovers-header,
body.handovers-body .handovers-ui .handovers-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.handovers-body .handovers-header__back,
body.handovers-body .handovers-ui .handovers-header > a.handovers-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.handovers-body .handovers-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.handovers-body .handovers-header__back svg {
    display: block;
}

body.handovers-body .handovers-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.handovers-body .handovers-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.handovers-body .handovers-header__titles {
    min-width: 0;
}

body.handovers-body .handovers-ui .handovers-header__title,
body.handovers-body .handovers-ui .sbo-handover-header h1,
body.sbo-dashboard-body.handovers-body .handovers-ui h1.handovers-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.handovers-body .handovers-ui .handovers-header__subtitle,
body.handovers-body .handovers-ui .sbo-handover-header p,
body.sbo-dashboard-body.handovers-body .handovers-ui p.handovers-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.handovers-body .handovers-ui .sbo-handover-header__badge,
body.handovers-body .handovers-header__badge {
    min-height: 28px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #FBBF24 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.12) !important;
}

/* ---------- Content shell ---------- */
body.handovers-body .handovers-ui .sbo-handover-content.handovers-content,
body.handovers-body .handovers-ui .handovers-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

/* ---------- SMS alert ---------- */
body.handovers-body .handovers-ui .sbo-handover-sms-alert {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 36px 1fr auto !important;
    align-items: start !important;
    gap: 12px !important;
    border: 1px solid #FDE68A !important;
    border-radius: 15px !important;
    background: #FFFBEB !important;
    color: #92400E !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.handovers-body .handovers-ui .sbo-handover-sms-alert__icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #FEF3C7 !important;
    color: #B45309 !important;
    font-size: 0 !important;
}

body.handovers-body .handovers-ui .sbo-handover-sms-alert__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.handovers-body .handovers-ui .sbo-handover-sms-alert strong {
    display: block !important;
    color: #92400E !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

body.handovers-body .handovers-ui .sbo-handover-sms-alert p {
    margin: 4px 0 0 !important;
    color: #A16207 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

@media (min-width: 768px) {
    body.handovers-body .handovers-ui .sbo-handover-sms-alert strong,
    body.handovers-body .handovers-ui .sbo-handover-sms-alert p {
        font-size: 18px !important;
    }
}

body.handovers-body .handovers-ui .sbo-handover-sms-alert i {
    color: #B45309 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 22px !important;
    font-style: normal !important;
    line-height: 1 !important;
}

/* ---------- Summary ---------- */
body.handovers-body .handovers-ui .sbo-handover-summary {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary article {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 14px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary__icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 0 6px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary__icon svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary small,
body.handovers-body .handovers-ui .sbo-handover-summary__label {
    display: block !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary strong,
body.handovers-body .handovers-ui .sbo-handover-summary__value {
    display: block !important;
    margin: 2px 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary__meta {
    display: block !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-handed {
    border-color: #A7F3D0 !important;
    background: #ECFDF5 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-handed .sbo-handover-summary__icon {
    background: #0d9488 !important;
    color: #fff !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-handed strong,
body.handovers-body .handovers-ui .sbo-handover-summary .is-handed .sbo-handover-summary__value,
body.handovers-body .handovers-ui .sbo-handover-summary .is-handed small,
body.handovers-body .handovers-ui .sbo-handover-summary .is-handed .sbo-handover-summary__label {
    color: #0d9488 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-handed .sbo-handover-summary__meta {
    color: #0f766e !important;
    opacity: 0.85 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-pending {
    border-color: #FDE68A !important;
    background: #FFFBEB !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-pending .sbo-handover-summary__icon {
    background: #B45309 !important;
    color: #fff !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-pending strong,
body.handovers-body .handovers-ui .sbo-handover-summary .is-pending .sbo-handover-summary__value,
body.handovers-body .handovers-ui .sbo-handover-summary .is-pending small,
body.handovers-body .handovers-ui .sbo-handover-summary .is-pending .sbo-handover-summary__label {
    color: #B45309 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-pending .sbo-handover-summary__meta {
    color: #92400e !important;
    opacity: 0.85 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-staff {
    border-color: #FED7AA !important;
    background: #FFF7ED !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-staff .sbo-handover-summary__icon {
    background: #EA580C !important;
    color: #fff !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-staff strong,
body.handovers-body .handovers-ui .sbo-handover-summary .is-staff .sbo-handover-summary__value,
body.handovers-body .handovers-ui .sbo-handover-summary .is-staff small,
body.handovers-body .handovers-ui .sbo-handover-summary .is-staff .sbo-handover-summary__label {
    color: #C2410C !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-staff .sbo-handover-summary__meta {
    color: #9a3412 !important;
    opacity: 0.85 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected .sbo-handover-summary__icon {
    background: #DC2626 !important;
    color: #fff !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected strong,
body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected .sbo-handover-summary__value,
body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected small,
body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected .sbo-handover-summary__label {
    color: #DC2626 !important;
}

body.handovers-body .handovers-ui .sbo-handover-summary .is-rejected .sbo-handover-summary__meta {
    color: #991b1b !important;
    opacity: 0.85 !important;
}

/* ---------- Filters ---------- */
body.handovers-body .handovers-ui .sbo-handover-filters {
    margin: 0 !important;
    padding: 5px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    border: 2px solid #36C !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
}

body.handovers-body .handovers-ui .sbo-handover-filters::-webkit-scrollbar {
    display: none;
}

body.handovers-body .handovers-ui .sbo-handover-filters a {
    min-height: 38px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 1 0 !important;
    min-width: max-content !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    body.handovers-body .handovers-ui .sbo-handover-filters a {
        font-size: 18px !important;
    }
}

body.handovers-body .handovers-ui .sbo-handover-filters a span {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(51, 102, 204, 0.12) !important;
    color: inherit !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 12px !important;
}

body.handovers-body .handovers-ui .sbo-handover-filters a:hover:not(.is-active) {
    color: #0f172a !important;
    background: rgba(51, 102, 204, 0.06) !important;
}

body.handovers-body .handovers-ui .sbo-handover-filters a:not(.is-active) {
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.handovers-body .handovers-ui .sbo-handover-filters a.is-active {
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: 700 !important;
}

body.handovers-body .handovers-ui .sbo-handover-filters a.is-active span {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* ---------- Cards ---------- */
body.handovers-body .handovers-ui .sbo-handover-list {
    margin: 0 !important;
    display: grid !important;
    gap: 12px !important;
}

body.handovers-body .handovers-ui .sbo-handover-card {
    min-height: 0 !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr auto !important;
    align-items: start !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    width: 100% !important;
    text-align: left !important;
    color: inherit !important;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.handovers-body .handovers-ui .sbo-handover-card:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.handovers-body .handovers-ui .sbo-handover-card:focus-visible {
    outline: 3px solid rgba(51, 102, 204, 0.28) !important;
    outline-offset: 2px !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__avatar {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    border: 1px solid transparent;
}

body.handovers-body .handovers-ui .sbo-handover-card__avatar.is-teal {
    background: #0d9488 !important;
    border-color: #99F6E4 !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__avatar.is-navy {
    background: #3366CC !important;
    border-color: #BFDBFE !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__avatar.is-green {
    background: #15803D !important;
    border-color: #BBF7D0 !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__main {
    min-width: 0 !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__title strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__main p {
    margin: 0 0 3px !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__amount {
    text-align: right !important;
    white-space: nowrap !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__amount strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.handovers-body .handovers-ui .sbo-handover-card__amount small {
    display: block !important;
    margin-top: 6px !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.handovers-body .handovers-ui .sbo-handover-status {
    min-height: 28px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.handovers-body .handovers-ui .sbo-handover-status.is-confirmed {
    border: 1px solid #99F6E4 !important;
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

body.handovers-body .handovers-ui .sbo-handover-status.is-pending {
    border: 1px solid #FDE68A !important;
    background: #FFFBEB !important;
    color: #B45309 !important;
}

body.handovers-body .handovers-ui .sbo-handover-status.is-rejected {
    border: 1px solid #FECACA !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

/* ---------- Empty ---------- */
body.handovers-body .handovers-ui .sbo-handover-empty {
    padding: 42px 16px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    text-align: center !important;
    box-shadow: none !important;
}

body.handovers-body .handovers-ui .sbo-handover-empty > span {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.handovers-body .handovers-ui .sbo-handover-empty > span svg {
    display: block;
    width: 28px;
    height: 28px;
}

body.handovers-body .handovers-ui .sbo-handover-empty h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.handovers-body .handovers-ui .sbo-handover-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.handovers-body .handovers-ui .sbo-handover-empty p.handovers-empty__msg,
body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-empty p.handovers-empty__msg {
    font-size: 16px !important;
}

/* ---------- Detail modal ---------- */
body.handovers-body .sbo-handover-detail[hidden] {
    display: none !important;
}

body.handovers-body .sbo-handover-detail {
    padding: 20px !important;
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    z-index: 1300 !important;
    inset: 0 !important;
    font-family: var(--sb-font-regular) !important;
}

body.handovers-body .sbo-handover-detail__backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(3px);
    cursor: default;
}

body.handovers-body .sbo-handover-detail__backdrop:hover,
body.handovers-body .sbo-handover-detail__backdrop:active {
    transform: none !important;
    filter: none !important;
}

body.handovers-body .sbo-handover-detail__dialog {
    width: min(660px, 100%) !important;
    max-height: calc(100vh - 40px) !important;
    position: relative !important;
    z-index: 1 !important;
    overflow-y: auto !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 17px !important;
    background: #f8fafc !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.28) !important;
}

body.handovers-body .sbo-handover-detail__handle {
    width: 42px !important;
    height: 4px !important;
    margin: 12px auto 1px !important;
    display: block !important;
    border-radius: 3px !important;
    background: #CBD5E1 !important;
}

body.handovers-body .sbo-handover-detail__dialog > header {
    min-height: 0 !important;
    padding: 12px 18px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr 36px !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #E0E8FF !important;
    background: #fff !important;
}

body.handovers-body .sbo-handover-detail__avatar {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.handovers-body .sbo-handover-detail__avatar.is-teal {
    background: #0d9488 !important;
}

body.handovers-body .sbo-handover-detail__avatar.is-navy {
    background: #3366CC !important;
}

body.handovers-body .sbo-handover-detail__avatar.is-green {
    background: #15803D !important;
}

body.handovers-body .sbo-handover-detail__dialog h2 {
    margin: 0 0 4px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
}

body.handovers-body .sbo-handover-detail__dialog header p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.handovers-body .sbo-handover-detail__dialog header button {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #E8EDF3 !important;
    color: #64748B !important;
    font-size: 22px !important;
    cursor: pointer;
}

body.handovers-body .sbo-handover-detail__body {
    padding: 18px !important;
}

body.handovers-body .sbo-handover-detail__amount {
    min-height: 0 !important;
    padding: 18px 16px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.handovers-body .sbo-handover-detail__amount > small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.handovers-body .sbo-handover-detail__amount > strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px !important;
}

body.handovers-body .sbo-handover-detail__status {
    min-height: 28px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 999px !important;
    background: #E6F7F5 !important;
    color: #0d9488 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.handovers-body .sbo-handover-detail__status.is-pending {
    border-color: #FDE68A !important;
    background: #FFFBEB !important;
    color: #B45309 !important;
}

body.handovers-body .sbo-handover-detail__status.is-rejected {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.handovers-body .sbo-handover-detail__facts {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 0 !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

body.handovers-body .sbo-handover-detail__facts div {
    min-height: 48px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-bottom: 1px solid #E8EDF3 !important;
}

body.handovers-body .sbo-handover-detail__facts div:last-child {
    border-bottom: 0 !important;
}

body.handovers-body .sbo-handover-detail__facts dt {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.handovers-body .sbo-handover-detail__facts dd {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-align: right !important;
}

body.handovers-body .sbo-handover-detail__note {
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
}

body.handovers-body .sbo-handover-detail__note > small {
    display: block !important;
    margin-bottom: 6px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.handovers-body .sbo-handover-detail__note p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.handovers-body .sbo-handover-detail__actions {
    margin-top: 18px !important;
    padding-top: 4px !important;
}

body.handovers-body .sbo-handover-detail__actions > small {
    display: block !important;
    margin-bottom: 10px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.handovers-body .sbo-handover-detail__call,
body.handovers-body .sbo-handover-detail__whatsapp,
body.handovers-body .sbo-handover-detail__review {
    width: 100% !important;
    min-height: 48px !important;
    margin-bottom: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
}

body.handovers-body .sbo-handover-detail__call svg,
body.handovers-body .sbo-handover-detail__whatsapp svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

body.handovers-body .sbo-handover-detail__call[hidden],
body.handovers-body .sbo-handover-detail__whatsapp[hidden] {
    display: none !important;
}

body.handovers-body .sbo-handover-detail__call {
    border: 0 !important;
    background: #36C !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.handovers-body .sbo-handover-detail__whatsapp {
    border: 1px solid #99F6E4 !important;
    background: #fff !important;
    color: #0d9488 !important;
}

body.handovers-body .sbo-handover-detail__review {
    border: 1px solid #E0E8FF !important;
    background: #fff !important;
    color: #64748B !important;
}

body.handovers-body .sbo-handover-detail__review.is-reviewed {
    border-color: #CBD5E1 !important;
    background: #F1F5F9 !important;
    color: #94A3B8 !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.handovers-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.handovers-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.handovers-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.handovers-ui .sbo-bottom-nav a span,
.handovers-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.handovers-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.handovers-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.handovers-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.handovers-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.handovers-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.handovers-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.handovers-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.handovers-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.handovers-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.handovers-body .sbo-bottom-nav,
body.sbo-dashboard-body.handovers-body .handovers-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
}

body.handovers-body .sbo-bottom-nav a,
body.sbo-dashboard-body.handovers-body .handovers-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

body.handovers-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.handovers-body .handovers-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.handovers-body .sbo-bottom-nav a span,
body.handovers-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.handovers-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.handovers-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.handovers-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.handovers-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.handovers-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.handovers-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.handovers-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
    body.handovers-body .handovers-ui .handovers-header {
        padding: 14px 12px 14px !important;
        gap: 8px !important;
    }

    body.handovers-body .handovers-ui .handovers-header__title {
        font-size: 18px !important;
    }

    body.handovers-body .handovers-ui .handovers-header__subtitle {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.handovers-body .handovers-ui .handovers-content {
        padding: 12px 10px 120px !important;
        gap: 12px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-summary {
        gap: 8px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-summary article {
        padding: 12px 10px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-summary strong,
    body.handovers-body .handovers-ui .sbo-handover-summary__value {
        font-size: 16px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-filters a {
        padding: 0 10px !important;
        font-size: 16px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-card {
        padding: 12px 10px !important;
        grid-template-columns: 42px 1fr auto !important;
        gap: 10px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-card__avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
    }

    body.handovers-body .handovers-ui .sbo-handover-card__title strong,
    body.handovers-body .handovers-ui .sbo-handover-card__amount strong {
        font-size: 15px !important;
    }

    body.handovers-body .sbo-handover-detail {
        padding: 0 !important;
        place-items: end center !important;
    }

    body.handovers-body .sbo-handover-detail__dialog {
        width: 100% !important;
        max-height: 95vh !important;
        border-radius: 17px 17px 0 0 !important;
    }

    body.handovers-body .sbo-handover-detail__dialog > header {
        padding: 10px 12px !important;
        grid-template-columns: 42px 1fr 34px !important;
        gap: 10px !important;
    }

    body.handovers-body .sbo-handover-detail__avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
    }

    body.handovers-body .sbo-handover-detail__dialog h2 {
        font-size: 16px !important;
    }

    body.handovers-body .sbo-handover-detail__body {
        padding: 14px 12px 18px !important;
    }

    body.handovers-body .sbo-handover-detail__amount > strong {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   MY HANDOVERS ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: handovers-fs-min-16 ? overrides existing 14px/13px/12px rules
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.handovers-body.handovers-fs-min-16,
    body.handovers-body.handovers-fs-min-16 .handovers-ui.handovers-fs-min-16,
    body.handovers-body.handovers-fs-min-16 .handovers-ui {
        font-size: 16px !important;
        --handovers-fs-min: 16px;
    }

    body.handovers-body.handovers-fs-min-16,
    body.handovers-body.handovers-fs-min-16 .handovers-ui,
    body.handovers-body.handovers-fs-min-16 .handovers-ui p,
    body.handovers-body.handovers-fs-min-16 .handovers-ui span,
    body.handovers-body.handovers-fs-min-16 .handovers-ui small,
    body.handovers-body.handovers-fs-min-16 .handovers-ui label,
    body.handovers-body.handovers-fs-min-16 .handovers-ui a,
    body.handovers-body.handovers-fs-min-16 .handovers-ui button,
    body.handovers-body.handovers-fs-min-16 .handovers-ui strong,
    body.handovers-body.handovers-fs-min-16 .handovers-ui b,
    body.handovers-body.handovers-fs-min-16 .handovers-ui em,
    body.handovers-body.handovers-fs-min-16 .handovers-ui i,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail p,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail span,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail small,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail a,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail button,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail strong,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail dt,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail dd,
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav,
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav a,
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em) !important;
    }

    body.handovers-body.handovers-fs-min-16 .handovers-ui small,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-summary small,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-summary__label,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-summary__meta,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-status,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-card__amount small,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-card__main p,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .handovers-header__subtitle,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-header p,
    body.handovers-body.handovers-fs-min-16 .handovers-ui p.handovers-header__subtitle,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-header__badge,
    body.handovers-body.handovers-fs-min-16 .handovers-header__badge,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-filters a span,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-card__avatar,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-empty p,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__avatar,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__dialog header p,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__amount > small,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__status,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__facts dt,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__facts dd,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__note > small,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__note p,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__actions > small,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__call,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__whatsapp,
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail__review,
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav a,
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav a span,
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.handovers-body.handovers-fs-min-16 .handovers-ui [aria-hidden="true"],
    body.handovers-body.handovers-fs-min-16 .sbo-handover-detail [aria-hidden="true"],
    body.handovers-body.handovers-fs-min-16 .sbo-bottom-nav__icon,
    body.handovers-body.handovers-fs-min-16 .handovers-header__icon,
    body.handovers-body.handovers-fs-min-16 .handovers-header__back,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-summary__icon,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-sms-alert__icon,
    body.handovers-body.handovers-fs-min-16 .handovers-ui .sbo-handover-empty > span {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   PLANS & PAYMENTS ? match dashboard / expense-book / staff UI (plans-ui)
   ========================================================================== */

body.plans-body.sbo-dashboard-body,
body.sbo-dashboard-body.plans-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.plans-ui.sbo-dashboard,
.sbo-dashboard.plans-ui {
    --plans-blue: #3366cc;
    --plans-blue-deep: #2554b0;
    --plans-blue-soft: #e8f0fe;
    --plans-mint: #0d9488;
    --plans-mint-soft: #e6f7f5;
    --plans-text: #1e293b;
    --plans-muted: #8a94a6;
    --plans-line: #e8edf3;
    --plans-border: #E0E8FF;
    --plans-card: #ffffff;
    --plans-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --plans-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --plans-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--plans-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.plans-body,
body.plans-body .plans-ui {
    font-size: 14px;
    color: #1e293b;
}

body.plans-body,
body.plans-body .plans-ui,
body.plans-body .plans-ui p,
body.plans-body .plans-ui span,
body.plans-body .plans-ui small,
body.plans-body .plans-ui label,
body.plans-body .plans-ui a,
body.plans-body .plans-ui button,
body.plans-body .plans-ui input,
body.plans-body .plans-ui select,
body.plans-body .plans-ui strong,
body.plans-body .plans-ui b,
body.plans-body .plans-ui em,
body.plans-body .plans-ui i,
body.plans-body .plans-ui summary,
body.plans-body .plans-ui details {
    font-size: 14px !important;
}

body.plans-body .plans-ui small,
body.plans-body .plans-ui .sbo-plans-status,
body.plans-body .plans-ui .sbo-plans-shop-row small,
body.plans-body .plans-ui .sbo-plans-addon-row small,
body.plans-body .plans-ui .sbo-plans-invoice-row small,
body.plans-body .plans-ui .sbo-plans-upgrade-row small,
body.plans-body .plans-ui .sbo-plans-credit small,
body.plans-body .plans-ui .sbo-plans-perks small,
body.plans-body .plans-ui .sbo-plans-shops__footer,
body.plans-body .plans-ui .sbo-plans-add {
    font-size: 14px !important;
}

body.plans-body .sbo-bottom-nav__icon,
body.plans-body .plans-header__icon,
body.plans-body .plans-header__back,
body.plans-body .plans-ui .sbo-plans-overdue__icon {
    font-size: 0 !important;
}

.plans-ui h1,
.plans-ui h2,
.plans-ui h3,
.plans-ui strong,
.plans-ui b {
 font-family: var(--sb-font-bold);
 font-weight: normal;
}

.plans-ui em,
.plans-ui i {
 font-style: normal;
 font-family: var(--sb-font-semibold);
}

.plans-ui small,
.plans-ui p,
.plans-ui label,
.plans-ui span,
.plans-ui button,
.plans-ui a,
.plans-ui input,
.plans-ui select,
.plans-ui summary {
 font-family: var(--sb-font-regular);
 font-weight: normal;
}

/* ---------- Header ---------- */
body.plans-body .plans-ui .sbo-plans-header.plans-header,
body.plans-body .plans-ui .plans-header {
 position: sticky !important;
 top: 0 !important;
 z-index: 40 !important;
 min-height: 0 !important;
 padding: 18px 16px 16px !important;
 display: grid !important;
 grid-template-columns: auto auto minmax(0, 1fr) !important;
 align-items: center !important;
 gap: 10px !important;
 border: 0 !important;
 border-bottom: 0 !important;
 border-radius: 0 0 15px 15px !important;
 background: #36C !important;
 box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
 width: 100% !important;
 max-width: 100% !important;
 margin: 0 !important;
 box-sizing: border-box !important;
 overflow: visible !important;
}

body.plans-body .plans-header__back,
body.plans-body .plans-ui .plans-header > a.plans-header__back {
 width: 36px !important;
 height: 36px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 10px !important;
 color: #fff !important;
 text-decoration: none !important;
 background: transparent !important;
 box-shadow: none !important;
 font-size: 0 !important;
}

body.plans-body .plans-header__back:hover {
 background: rgba(255, 255, 255, 0.14) !important;
}

body.plans-body .plans-header__back svg {
 display: block;
}

body.plans-body .plans-header__icon {
 width: 40px !important;
 height: 40px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 12px !important;
 background: rgba(255, 255, 255, 0.16) !important;
 color: #fff !important;
 box-shadow: none !important;
 border: 0 !important;
 font-size: 0 !important;
 flex-shrink: 0;
}

body.plans-body .plans-header__icon svg {
 display: block;
 width: 18px;
 height: 18px;
}

body.plans-body .plans-header__titles {
 min-width: 0;
}

body.plans-body .plans-ui .plans-header__title,
body.plans-body .plans-ui .sbo-plans-header h1,
body.plans-body .plans-header h1,
body.plans-body .plans-header__title,
body.plans-body .sbo-plans-header h1,
body.sbo-dashboard-body.plans-body .plans-ui h1.plans-header__title,
body.sbo-dashboard-body.plans-body h1.plans-header__title {
 margin: 0 0 4px !important;
 color: #ffffff !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 22px !important;
 font-weight: normal !important;
 line-height: 1.15 !important;
 letter-spacing: -0.02em !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

body.plans-body .plans-ui .plans-header__subtitle,
body.plans-body .plans-ui .sbo-plans-header p,
body.plans-body .plans-header p,
body.plans-body .plans-header__subtitle,
body.plans-body .sbo-plans-header p,
body.sbo-dashboard-body.plans-body .plans-ui p.plans-header__subtitle,
body.sbo-dashboard-body.plans-body p.plans-header__subtitle {
 margin: 0 !important;
 color: rgba(255, 255, 255, 0.92) !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 14px !important;
 font-weight: normal !important;
 line-height: 1.35 !important;
 display: block !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

body.plans-body .plans-ui .sbo-plans-close {
 display: none !important;
}

/* ---------- Content shell ---------- */
body.plans-body .plans-ui .sbo-plans-content.plans-content,
body.plans-body .plans-ui .plans-content {
 position: relative !important;
 padding: 14px 16px 120px !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 16px !important;
 background: transparent !important;
 min-height: 240px !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-section {
 display: grid !important;
 gap: 10px !important;
}

body.plans-body .plans-ui .sbo-plans-section__head h2 {
 margin: 0 !important;
 color: #222 !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 22px !important;
 letter-spacing: 0 !important;
 text-transform: none !important;
 line-height: 1.25 !important;
}

@media (max-width: 767px) {
 body.plans-body .plans-ui .sbo-plans-section__head h2 {
  font-size: 18px !important;
 }
}

/* ---------- Cards ---------- */
body.plans-body .plans-ui .sbo-plans-card {
 padding: 4px 16px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 15px !important;
 background: #ffffff !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-empty {
 margin: 14px 0 !important;
 color: #8a94a6 !important;
 font-size: 14px !important;
}

/* ---------- Overdue alert ---------- */
body.plans-body .plans-ui .sbo-plans-overdue {
 padding: 14px 16px !important;
 display: grid !important;
 grid-template-columns: 36px 1fr !important;
 gap: 10px 12px !important;
 align-items: start !important;
 border: 1px solid #FECACA !important;
 border-radius: 15px !important;
 background: #FEF2F2 !important;
 color: #B91C1C !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-overdue__icon {
 width: 36px !important;
 height: 36px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 10px !important;
 background: #FEE2E2 !important;
 color: #DC2626 !important;
 font-size: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-overdue__icon svg {
 display: block;
 width: 18px;
 height: 18px;
}

body.plans-body .plans-ui .sbo-plans-overdue > div {
 grid-column: 2 !important;
}

body.plans-body .plans-ui .sbo-plans-overdue strong {
 display: block !important;
 margin-bottom: 4px !important;
 color: #B91C1C !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 14px !important;
 line-height: 1.3 !important;
}

body.plans-body .plans-ui .sbo-plans-overdue p {
 margin: 0 !important;
 color: #9F1239 !important;
 font-size: 14px !important;
 line-height: 1.45 !important;
}

body.plans-body .plans-ui .sbo-plans-overdue__cta {
 grid-column: 1 / -1 !important;
 justify-self: start !important;
 min-height: 36px !important;
 padding: 0 14px !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 6px !important;
 border-radius: 10px !important;
 background: #EF4444 !important;
 color: #fff !important;
 text-decoration: none !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-overdue__cta b {
 font-family: var(--sb-font-regular) !important;
 font-size: 16px !important;
}

/* ---------- Rows ---------- */
body.plans-body .plans-ui .sbo-plans-shop-row,
body.plans-body .plans-ui .sbo-plans-invoice-row,
body.plans-body .plans-ui .sbo-plans-feature {
 min-height: 64px !important;
 display: grid !important;
 grid-template-columns: auto 1fr auto !important;
 gap: 12px !important;
 align-items: center !important;
 padding: 12px 0 !important;
 border-bottom: 1px solid #e8edf3 !important;
}

body.plans-body .plans-ui .sbo-plans-addon-row,
body.plans-body .plans-ui .sbo-plans-upgrade-row {
 min-height: 64px !important;
 display: grid !important;
 grid-template-columns: minmax(0, 1fr) auto !important;
 gap: 12px !important;
 align-items: center !important;
 padding: 12px 0 !important;
 border-bottom: 1px solid #e8edf3 !important;
}

body.plans-body .plans-ui .sbo-plans-addon-row > div,
body.plans-body .plans-ui .sbo-plans-upgrade-row > div {
 min-width: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-feature {
 grid-template-columns: 28px 1fr !important;
 min-height: 0 !important;
 padding: 11px 0 !important;
}

body.plans-body .plans-ui .sbo-plans-shop-row:last-of-type,
body.plans-body .plans-ui .sbo-plans-addon-row:last-child,
body.plans-body .plans-ui .sbo-plans-invoice-row:last-child,
body.plans-body .plans-ui .sbo-plans-upgrade-row:last-child,
body.plans-body .plans-ui .sbo-plans-feature:last-child {
 border-bottom: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-shop-row__icon,
body.plans-body .plans-ui .sbo-plans-feature > span {
 width: 38px !important;
 height: 38px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 11px !important;
 background: #E8F0FE !important;
 color: #3366CC !important;
 font-size: 16px !important;
}

body.plans-body .plans-ui .sbo-plans-feature > span {
 width: 28px !important;
 height: 28px !important;
 border-radius: 50% !important;
 background: #e6f7f5 !important;
 color: #0d9488 !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 13px !important;
}

body.plans-body .plans-ui .sbo-plans-shop-row strong,
body.plans-body .plans-ui .sbo-plans-addon-row strong,
body.plans-body .plans-ui .sbo-plans-invoice-row strong,
body.plans-body .plans-ui .sbo-plans-upgrade-row strong,
body.plans-body .plans-ui .sbo-plans-feature p {
 display: block !important;
 margin: 0 !important;
 color: #1e293b !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 line-height: 1.25 !important;
}

body.plans-body .plans-ui .sbo-plans-shop-row small,
body.plans-body .plans-ui .sbo-plans-addon-row small,
body.plans-body .plans-ui .sbo-plans-invoice-row small,
body.plans-body .plans-ui .sbo-plans-upgrade-row small {
 display: block !important;
 margin-top: 3px !important;
 color: #8a94a6 !important;
 font-size: 14px !important;
 line-height: 1.35 !important;
}

body.plans-body .plans-ui .sbo-plans-status {
 padding: 4px 10px !important;
 border-radius: 999px !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 13px !important;
 white-space: nowrap !important;
 border: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-status.is-active {
 background: #e6f7f5 !important;
 color: #0d9488 !important;
}

body.plans-body .plans-ui .sbo-plans-status.is-inactive {
 background: #F1F5F9 !important;
 color: #8a94a6 !important;
}

body.plans-body .plans-ui .sbo-plans-status.is-warning {
 background: #FEF2F2 !important;
 color: #DC2626 !important;
}

body.plans-body .plans-ui .sbo-plans-shops__footer {
 margin: 2px 0 10px !important;
 padding-top: 10px !important;
 display: flex !important;
 justify-content: space-between !important;
 gap: 10px !important;
 border-top: 1px dashed #E0E8FF !important;
 color: #8a94a6 !important;
 font-size: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-shops__footer a {
 color: #0d9488 !important;
 text-decoration: none !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
}

/* ---------- Current plan ---------- */
body.plans-body .plans-ui .sbo-plans-current {
 padding: 18px !important;
 border-radius: 15px !important;
 background: linear-gradient(160deg, #2554b0 0%, #3366cc 100%) !important;
 color: #fff !important;
 border: 1px solid transparent !important;
 box-shadow: 0 10px 28px rgba(51, 102, 204, 0.22) !important;
}

body.plans-body .plans-ui .sbo-plans-current__top {
 display: grid !important;
 gap: 10px !important;
}

body.plans-body .plans-ui .sbo-plans-current__top > div,
body.plans-body .plans-ui .sbo-plans-current__title {
 display: flex !important;
 align-items: flex-start !important;
 justify-content: space-between !important;
 gap: 10px !important;
 min-width: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-current h3 {
 margin: 0 !important;
 color: #fff !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 22px !important;
 line-height: 1.25 !important;
 flex: 1 1 auto !important;
 min-width: 0 !important;
 overflow-wrap: anywhere !important;
 word-break: break-word !important;
}

body.plans-body .plans-ui .sbo-plans-current .sbo-plans-status {
 flex-shrink: 0 !important;
 margin-top: 2px !important;
 white-space: nowrap !important;
}

body.plans-body .plans-ui .sbo-plans-current .sbo-plans-status.is-active {
 background: rgba(255, 255, 255, 0.18) !important;
 color: #D1FAE5 !important;
}

body.plans-body .plans-ui .sbo-plans-current .sbo-plans-status.is-warning {
 background: rgba(255, 255, 255, 0.18) !important;
 color: #FECACA !important;
}

body.plans-body .plans-ui .sbo-plans-current__price {
 margin: 0 !important;
 color: #fff !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 18px !important;
 line-height: 1.2 !important;
}

body.plans-body .plans-ui .sbo-plans-current__price small {
 display: block !important;
 margin-top: 4px !important;
 color: rgba(255, 255, 255, 0.78) !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-current__meta {
 margin: 0 !important;
 color: rgba(255, 255, 255, 0.82) !important;
 font-size: 14px !important;
 line-height: 1.45 !important;
 overflow-wrap: anywhere !important;
}

body.plans-body .plans-ui .sbo-plans-current__actions {
 margin-top: 16px !important;
 display: grid !important;
 grid-template-columns: 1fr 1fr !important;
 gap: 10px !important;
}

@media (max-width: 767px) {
 body.plans-body .plans-ui .sbo-plans-current {
  padding: 14px !important;
 }

 body.plans-body .plans-ui .sbo-plans-current__top {
  gap: 8px !important;
 }

 body.plans-body .plans-ui .sbo-plans-current__title {
  gap: 8px !important;
 }

 body.plans-body .plans-ui .sbo-plans-current h3 {
  font-size: 18px !important;
  line-height: 1.3 !important;
 }

 body.plans-body .plans-ui .sbo-plans-current__price {
  font-size: 18px !important;
 }

 body.plans-body .plans-ui .sbo-plans-current__price small,
 body.plans-body .plans-ui .sbo-plans-current__meta {
  font-size: 13px !important;
  line-height: 1.4 !important;
 }

 body.plans-body .plans-ui .sbo-plans-current__actions {
  margin-top: 14px !important;
  gap: 8px !important;
 }

 body.plans-body .plans-ui .sbo-plans-current__actions .sbo-plans-btn {
  min-height: 42px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
 }
}

/* ---------- Buttons ---------- */
body.plans-body .plans-ui .sbo-plans-btn {
 min-height: 44px !important;
 padding: 0 14px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 border: 0 !important;
 border-radius: 12px !important;
 text-decoration: none !important;
 cursor: pointer;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-btn--ghost {
 background: rgba(255, 255, 255, 0.12) !important;
 color: #fff !important;
 border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

body.plans-body .plans-ui .sbo-plans-btn--soft {
 background: rgba(255, 255, 255, 0.22) !important;
 color: #fff !important;
}

body.plans-body .plans-ui .sbo-plans-btn--navy {
 background: #3366CC !important;
 color: #fff !important;
}

body.plans-body .plans-ui .sbo-plans-btn--teal {
 background: #0d9488 !important;
 color: #fff !important;
}

body.plans-body .plans-ui .sbo-plans-btn--amber {
 background: #F59E0B !important;
 color: #1e293b !important;
}

body.plans-body .plans-ui .sbo-plans-btn--violet {
 background: #7C3AED !important;
 color: #fff !important;
}

body.plans-body .plans-ui .sbo-plans-btn:disabled {
 opacity: 0.45 !important;
 cursor: not-allowed !important;
 pointer-events: none !important;
}

body.plans-body .plans-ui .sbo-plans-add {
 min-height: 34px !important;
 min-width: 0 !important;
 width: auto !important;
 max-width: max-content !important;
 padding: 0 14px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 justify-self: end !important;
 border-radius: 999px !important;
 background: #E8F0FE !important;
 color: #3366CC !important;
 text-decoration: none !important;
 border: 0 !important;
 cursor: pointer;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 line-height: 1 !important;
 white-space: nowrap !important;
 box-shadow: none !important;
 flex: 0 0 auto !important;
}

body.plans-body .plans-ui .sbo-plans-addon-row .sbo-plans-status,
body.plans-body .plans-ui .sbo-plans-upgrade-row .sbo-plans-status {
 justify-self: end !important;
 width: auto !important;
 max-width: max-content !important;
 flex: 0 0 auto !important;
}

body.plans-body .plans-ui .sbo-plans-add.is-muted {
 background: #F1F5F9 !important;
 color: #8a94a6 !important;
}

body.plans-body .plans-ui .sbo-plans-add:hover {
 background: #d7e6fb !important;
}

/* ---------- Staff pack ---------- */
body.plans-body .plans-ui .sbo-plans-staff-pack {
 padding: 16px !important;
 display: grid !important;
 gap: 14px !important;
 background: #E8F0FE !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 15px !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-staff-pack__copy {
 display: grid !important;
 grid-template-columns: 42px 1fr !important;
 gap: 12px !important;
 align-items: start !important;
}

body.plans-body .plans-ui .sbo-plans-staff-pack__icon {
 width: 42px !important;
 height: 42px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 12px !important;
 background: #fff !important;
 color: #3366CC !important;
 font-size: 18px !important;
 border: 1px solid #E0E8FF !important;
}

body.plans-body .plans-ui .sbo-plans-staff-pack strong {
 display: block !important;
 margin-bottom: 4px !important;
 color: #1e293b !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 15px !important;
}

body.plans-body .plans-ui .sbo-plans-staff-pack p {
 margin: 0 !important;
 color: #64748B !important;
 font-size: 14px !important;
 line-height: 1.45 !important;
}

body.plans-body .plans-ui .sbo-plans-staff-pack p b {
 color: #3366CC !important;
 font-family: var(--sb-font-bold) !important;
}

/* ---------- Credits ---------- */
body.plans-body .plans-ui .sbo-plans-credits {
 padding: 12px !important;
 display: grid !important;
 gap: 10px !important;
}

body.plans-body .plans-ui .sbo-plans-credit {
 padding: 12px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 12px !important;
 border-radius: 12px !important;
 border: 1px solid transparent !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-credit > div {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
}

body.plans-body .plans-ui .sbo-plans-credit > div > span {
 width: 38px !important;
 height: 38px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 11px !important;
 background: rgba(255, 255, 255, 0.75) !important;
 font-size: 16px !important;
}

body.plans-body .plans-ui .sbo-plans-credit strong {
 display: block !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-credit small {
 display: block !important;
 margin-top: 2px !important;
 font-size: 14px !important;
 opacity: 0.9 !important;
}

body.plans-body .plans-ui .sbo-plans-credit--sms {
 background: #FFFBEB !important;
 border-color: #FDE68A !important;
 color: #92400E !important;
}

body.plans-body .plans-ui .sbo-plans-credit--wa {
 background: #F5F3FF !important;
 border-color: #DDD6FE !important;
 color: #5B21B6 !important;
}

body.plans-body .plans-ui .sbo-plans-features {
 padding: 8px 16px !important;
}

body.plans-body .plans-ui .sbo-plans-addons,
body.plans-body .plans-ui .sbo-plans-invoices,
body.plans-body .plans-ui .sbo-plans-upgrade-list,
body.plans-body .plans-ui .sbo-plans-faq {
 padding: 4px 16px !important;
}

body.plans-body .plans-ui .sbo-plans-invoice-row {
 grid-template-columns: 1fr auto !important;
}

body.plans-body .plans-ui .sbo-plans-invoice-row__meta {
 display: grid !important;
 justify-items: end !important;
 gap: 6px !important;
}

body.plans-body .plans-ui .sbo-plans-invoice-row__meta strong {
 font-family: var(--sb-font-bold) !important;
 font-size: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-upgrade-row.is-current {
 background: #F8FAFC !important;
 margin: 0 -8px !important;
 padding-left: 8px !important;
 padding-right: 8px !important;
 border-radius: 12px !important;
 border-bottom-color: transparent !important;
}

/* ---------- How to pay ---------- */
body.plans-body .plans-ui .sbo-plans-pay {
 padding: 14px !important;
 display: grid !important;
 gap: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-pay-tabs {
 padding: 4px !important;
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 4px !important;
 border-radius: 12px !important;
 background: #F1F5F9 !important;
 border: 1px solid #E0E8FF !important;
}

body.plans-body .plans-ui .sbo-plans-pay-tabs button {
 min-height: 38px !important;
 border: 0 !important;
 border-radius: 10px !important;
 background: transparent !important;
 color: #8a94a6 !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
 cursor: pointer;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-pay-tabs button.is-active {
 background: #fff !important;
 color: #1e293b !important;
 box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.plans-body .plans-ui .sbo-plans-pay-panel p {
 margin: 0 0 12px !important;
 color: #64748B !important;
 font-size: 14px !important;
 line-height: 1.45 !important;
}

/* ---------- Help + perks ---------- */
body.plans-body .plans-ui .sbo-plans-help {
 padding: 18px !important;
 display: grid !important;
 gap: 12px !important;
 border-radius: 15px !important;
 background: #e6f7f5 !important;
 border: 1px solid #A7F3D0 !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-help > span {
 width: 42px !important;
 height: 42px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 12px !important;
 background: #fff !important;
 font-size: 20px !important;
 border: 1px solid #A7F3D0 !important;
 color: #0d9488 !important;
}

body.plans-body .plans-ui .sbo-plans-help h2 {
 margin: 0 0 4px !important;
 font-family: var(--sb-font-bold) !important;
 font-size: 18px !important;
 line-height: 1.2 !important;
 color: #0f766e !important;
}

body.plans-body .plans-ui .sbo-plans-help p {
 margin: 0 !important;
 color: #0f766e !important;
 font-size: 14px !important;
 line-height: 1.4 !important;
}

body.plans-body .plans-ui .sbo-plans-perks {
 display: grid !important;
 grid-template-columns: 1fr 1fr !important;
 gap: 10px !important;
}

body.plans-body .plans-ui .sbo-plans-perks article {
 padding: 14px 12px !important;
 border: 1px solid #E0E8FF !important;
 border-radius: 15px !important;
 background: #fff !important;
 display: grid !important;
 gap: 4px !important;
 box-shadow: none !important;
}

body.plans-body .plans-ui .sbo-plans-perks span {
 font-size: 18px !important;
 color: #3366CC !important;
}

body.plans-body .plans-ui .sbo-plans-perks strong {
 color: #1e293b !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-perks small {
 color: #8a94a6 !important;
 font-size: 14px !important;
 line-height: 1.35 !important;
}

/* ---------- FAQ ---------- */
body.plans-body .plans-ui .sbo-plans-faq-item {
 border-bottom: 1px solid #e8edf3 !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item:last-child {
 border-bottom: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item summary {
 list-style: none !important;
 min-height: 52px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 12px !important;
 cursor: pointer;
 color: #222 !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 16px !important;
 line-height: 1.35 !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item summary::-webkit-details-marker {
 display: none;
}

body.plans-body .plans-ui .sbo-plans-faq-item summary::after {
 content: none !important;
 display: none !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item__q {
 flex: 1 1 auto !important;
 min-width: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item__icon {
 width: 28px !important;
 height: 28px !important;
 flex-shrink: 0 !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 8px !important;
 background: #E8F0FE !important;
 color: #3366CC !important;
 font-size: 0 !important;
 line-height: 0 !important;
 transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item__icon svg {
 display: block !important;
 width: 16px !important;
 height: 16px !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item[open] .sbo-plans-faq-item__icon {
 transform: rotate(180deg) !important;
 background: #3366CC !important;
 color: #ffffff !important;
}

body.plans-body .plans-ui .sbo-plans-faq-item p {
 margin: 0 0 14px !important;
 color: #64748B !important;
 font-size: 14px !important;
 line-height: 1.45 !important;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.plans-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.plans-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.plans-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.plans-ui .sbo-bottom-nav a span,
.plans-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.plans-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 0 !important;
}

.plans-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.plans-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.plans-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.plans-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.plans-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.plans-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.plans-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.plans-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.plans-body .sbo-bottom-nav,
body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    backdrop-filter: none !important;
}

body.plans-body .sbo-bottom-nav a,
body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.plans-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.plans-body .sbo-bottom-nav a span,
body.plans-body .sbo-bottom-nav .sbo-bottom-nav__label,
body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav a span,
body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

body.plans-body .sbo-bottom-nav .sbo-bottom-nav__icon,
body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 0 !important;
}

body.plans-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.plans-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.plans-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.plans-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.plans-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.plans-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (min-width: 700px) {
    body.plans-body .sbo-bottom-nav,
    body.sbo-dashboard-body.plans-body .plans-ui .sbo-bottom-nav,
    .plans-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    body.plans-body .sbo-bottom-nav a span,
    body.plans-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }
}

/* ---------- Modals (visual only) ---------- */
body.plans-body .sbo-staff-pack-modal,
body.plans-body .sbo-sms-credit-modal,
body.plans-body .sbo-switch-plan-modal,
body.plans-body .sbo-delytt-help-modal,
body.plans-body .sbo-staff-pack-success-modal,
body.plans-body .sbo-sms-credit-success-modal,
body.plans-body .sbo-switch-plan-success-modal,
body.plans-body .sbo-delytt-help-success-modal,
body.plans-body .sbo-whatsapp-notify-modal {
 font-family: var(--sb-font-regular);
}

body.plans-body .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-sms-credit-modal__dialog,
body.plans-body .sbo-switch-plan-modal .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-delytt-help-modal .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-staff-pack-success .sbo-staff-pack-modal__dialog {
    border-radius: 17px !important;
    border: 1px solid #E0E8FF !important;
    box-shadow: 0 10px 28px rgba(30, 50, 80, 0.12) !important;
}

body.plans-body .sbo-staff-pack-modal h2,
body.plans-body .sbo-sms-credit-modal h2,
body.plans-body .sbo-switch-plan-modal h2,
body.plans-body .sbo-delytt-help-modal h2,
body.plans-body .sbo-staff-pack-modal strong,
body.plans-body .sbo-sms-credit-modal strong,
body.plans-body .sbo-switch-plan-modal strong,
body.plans-body .sbo-delytt-help-modal strong {
 font-family: var(--sb-font-bold) !important;
 font-weight: normal !important;
}

/* ---------- Buy SMS Credits modal ? match plans blue theme ---------- */
body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-sms-credit-modal__dialog,
body.plans-body .sbo-sms-credit-success .sbo-staff-pack-modal__dialog {
    background: #ffffff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 40px rgba(51, 102, 204, 0.16) !important;
}

body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-modal__handle,
body.plans-body .sbo-sms-credit-success .sbo-staff-pack-modal__handle {
    background: #C7D2FE !important;
}

body.plans-body .sbo-sms-credit-modal header,
body.plans-body .sbo-sms-credit-success header {
    border-bottom: 1px solid #E8EDF3 !important;
}

body.plans-body .sbo-sms-credit-modal__icon,
body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-modal__icon,
body.plans-body .sbo-sms-credit-success .sbo-sms-credit-modal__icon {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #E0E8FF !important;
    font-size: 0 !important;
}

body.plans-body .sbo-sms-credit-modal h2,
body.plans-body .sbo-sms-credit-success h2,
body.plans-body .sbo-sms-credit-modal #sms-credit-modal-title,
body.plans-body .sbo-sms-credit-success #sms-credit-success-title {
    color: #0f172a !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

body.plans-body .sbo-sms-credit-modal header p,
body.plans-body .sbo-sms-credit-success header p {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.plans-body .sbo-sms-credit-modal header p strong,
body.plans-body .sbo-sms-credit-success header p strong {
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
}

body.plans-body .sbo-sms-credit-modal header button,
body.plans-body .sbo-sms-credit-success header button {
    background: #EEF2FF !important;
    color: #3366CC !important;
}

body.plans-body .sbo-sms-credit-modal__body {
    padding: 14px 18px 22px !important;
    gap: 16px !important;
}

body.plans-body .sbo-sms-credit-bundles h3,
body.plans-body .sbo-sms-credit-custom h3,
body.plans-body .sbo-sms-credit-pay__head h3,
body.plans-body .sbo-sms-credit-modal .sbo-sms-credit-pay__head h3 {
    margin: 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
}

body.plans-body .sbo-sms-credit-pay__head h3,
body.plans-body .sbo-sms-credit-modal .sbo-sms-credit-pay__head h3 {
    margin: 0 0 4px !important;
}

body.plans-body .sbo-sms-credit-bundles > div {
    gap: 10px !important;
}

body.plans-body .sbo-sms-credit-bundles button {
    min-height: 78px !important;
    padding: 14px 14px 12px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #222 !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

body.plans-body .sbo-sms-credit-bundles button:has(em) {
    padding-top: 28px !important;
}

body.plans-body .sbo-sms-credit-bundles button:hover {
    border-color: #93B4F0 !important;
    background: #F8FAFF !important;
}

body.plans-body .sbo-sms-credit-bundles button.is-selected {
    border-color: #3366CC !important;
    background: #EEF3FF !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.plans-body .sbo-sms-credit-bundles strong {
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 17px !important;
}

body.plans-body .sbo-sms-credit-bundles small {
    color: #64748B !important;
    font-size: 13px !important;
}

body.plans-body .sbo-sms-credit-bundles em {
    background: #3366CC !important;
    color: #ffffff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.plans-body .sbo-sms-credit-bundles button.is-selected .sbo-sms-credit-bundles__radio {
    border-color: #3366CC !important;
    background: #3366CC !important;
}

body.plans-body .sbo-sms-credit-custom {
    padding: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 16px !important;
    background: #F8FAFF !important;
}

body.plans-body .sbo-sms-credit-custom__icon {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.plans-body .sbo-sms-credit-custom__field {
    width: 100% !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body.plans-body .sbo-sms-credit-custom__field:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.plans-body .sbo-sms-credit-custom__field input {
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    text-align: left !important;
}

body.plans-body .sbo-sms-credit-custom__field span {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.plans-body .sbo-sms-credit-custom small {
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.plans-body .sbo-sms-credit-pay,
body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-pay.sbo-sms-credit-pay {
    padding: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 16px !important;
    background: #F8FAFF !important;
}

body.plans-body .sbo-sms-credit-pay__icon {
    background: #E8F8EF !important;
    color: #16A34A !important;
}

body.plans-body .sbo-sms-credit-pay .sbo-staff-pack-pay__hint,
body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-pay__hint {
    color: #64748B !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.plans-body .sbo-sms-credit-pay .sbo-staff-pack-pay__hint strong,
body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-pay__hint strong {
    color: #3366CC !important;
}

body.plans-body .sbo-sms-credit-pay__gateways {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 5px !important;
    border-radius: 14px !important;
    background: #EEF2F7 !important;
}

body.plans-body .sbo-sms-credit-pay__gateways > button {
    min-height: 44px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #64748B !important;
    box-shadow: none !important;
}

body.plans-body .sbo-sms-credit-pay__gateways > button.is-active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}

body.plans-body .sbo-sms-credit-gateway-logo--lollapay b {
    color: #2563EB !important;
}

body.plans-body .sbo-sms-credit-gateway-logo--lollapay em {
    color: #16A34A !important;
    background: transparent !important;
    padding: 0 !important;
    position: static !important;
}

body.plans-body .sbo-sms-credit-gateway-logo--mpesa {
    color: #64748B !important;
}

body.plans-body .sbo-sms-credit-pay__gateways > button.is-active .sbo-sms-credit-gateway-logo--mpesa {
    color: #334155 !important;
}

body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-pay__methods label {
    border-color: #E0E8FF !important;
    color: #222 !important;
}

body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-pay__methods label.is-active,
body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-pay__methods label:has(input:checked) {
    border-color: #3366CC !important;
    background: #EEF3FF !important;
    color: #3366CC !important;
}

body.plans-body .sbo-sms-credit-submit {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.plans-body .sbo-sms-credit-submit:hover:not(:disabled) {
    background: #2554B0 !important;
}

body.plans-body .sbo-sms-credit-submit:disabled {
    background: #93B4E8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

body.plans-body .sbo-sms-credit-modal .sbo-staff-pack-note,
body.plans-body .sbo-sms-credit-note {
    color: #8a94a6 !important;
    font-size: 12px !important;
    text-align: center !important;
}

body.plans-body .sbo-sms-credit-note > span {
    color: #3366CC !important;
}

body.plans-body .sbo-sms-credit-success .sbo-staff-pack-success__check {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.plans-body .sbo-sms-credit-success .sbo-staff-pack-success__body h3 {
    color: #222 !important;
    font-size: 22px !important;
    text-transform: none !important;
}

body.plans-body .sbo-sms-credit-success .sbo-staff-pack-success__body p {
    color: #64748B !important;
}

body.plans-body .sbo-sms-credit-success .sbo-plans-btn--navy {
    background: #3366CC !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    body.plans-body .sbo-sms-credit-modal h2,
    body.plans-body .sbo-sms-credit-success h2,
    body.plans-body .sbo-sms-credit-modal #sms-credit-modal-title,
    body.plans-body .sbo-sms-credit-success #sms-credit-success-title,
    body.plans-body .sbo-sms-credit-success .sbo-staff-pack-success__body h3 {
        font-size: 18px !important;
    }

    body.plans-body .sbo-sms-credit-bundles h3,
    body.plans-body .sbo-sms-credit-custom h3,
    body.plans-body .sbo-sms-credit-pay__head h3,
    body.plans-body .sbo-sms-credit-modal .sbo-sms-credit-pay__head h3 {
        font-size: 16px !important;
    }

    body.plans-body .sbo-sms-credit-modal__body {
        padding: 12px 14px 20px !important;
        gap: 14px !important;
    }

    body.plans-body .sbo-sms-credit-bundles button {
        min-height: 74px !important;
        padding: 12px !important;
    }

    body.plans-body .sbo-sms-credit-bundles button:has(em) {
        padding-top: 26px !important;
    }

    body.plans-body .sbo-sms-credit-bundles strong {
        font-size: 16px !important;
    }

    body.plans-body .sbo-sms-credit-submit {
        font-size: 16px !important;
    }

    body.plans-body .sbo-sms-credit-custom__field input {
        font-size: 20px !important;
    }
}

/* ---------- Extra Staff Pack modal ? match plans blue theme + readable fonts ---------- */
body.plans-body .sbo-staff-pack-modal:not(.sbo-sms-credit-modal):not(.sbo-switch-plan-modal):not(.sbo-delytt-help-modal) .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-modal__dialog {
    background: #ffffff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 17px !important;
    box-shadow: 0 16px 40px rgba(51, 102, 204, 0.16) !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-modal__handle,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-modal__handle {
    background: #C7D2FE !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] header,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] header {
    border-bottom: 1px solid #E8EDF3 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-modal__icon,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-modal__icon {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #E0E8FF !important;
    font-size: 0 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] h2,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] h2,
body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] #staff-pack-modal-title {
    color: #222 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] header p,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] header p {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] header button,
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] header button {
    background: #EEF2FF !important;
    color: #3366CC !important;
}

/* Extra Staff Pack success body — match plans blue theme */
body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__body {
    padding: 26px 22px 30px !important;
    gap: 12px !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__check {
    width: 84px !important;
    height: 84px !important;
    border: 3px solid #3366CC !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__body h3 {
    margin: 4px 0 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__body p {
    color: #64748B !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__note {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFF !important;
    color: #64748B !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__actions {
    margin-top: 8px !important;
    width: 100% !important;
    gap: 10px !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-plans-btn {
    min-height: 48px !important;
    width: 100% !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-plans-btn--navy {
    background: #3366CC !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-plans-btn--navy:hover {
    background: #2554B0 !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-plans-btn--ghost-dark {
    background: #EEF2FF !important;
    color: #3366CC !important;
    border: 1px solid #E0E8FF !important;
    box-shadow: none !important;
}

body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-plans-btn--ghost-dark:hover {
    background: #E0E8FF !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] form {
    padding: 14px 18px 22px !important;
    gap: 16px !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included h3,
body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branches h3,
body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay h3 {
    margin: 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included {
    padding: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #F8FAFF !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid {
    gap: 8px !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid article {
    min-height: 78px !important;
    padding: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid small {
    color: #64748B !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid > article > span {
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid > article > span.is-check {
    background: #e6f7f5 !important;
    color: #0d9488 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch {
    min-height: 60px !important;
    padding: 12px 14px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch:hover:not(.is-disabled) {
    border-color: #93B4F0 !important;
    background: #F8FAFF !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch.is-selected {
    border-color: #3366CC !important;
    background: #EEF3FF !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch > i {
    border-color: #C7D2FE !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch.is-selected > i {
    border-color: #3366CC !important;
    background: #3366CC !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch small {
    color: #64748B !important;
    font-size: 13px !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch.is-disabled {
    opacity: 1 !important;
    background: #F8FAFC !important;
    border-color: #E8EDF3 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch.is-disabled strong,
body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch.is-disabled small {
    color: #94A3B8 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay {
    padding: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay__hint {
    color: #64748B !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay__hint strong {
    color: #3366CC !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay__methods span {
    border-color: #E0E8FF !important;
    color: #222 !important;
    font-size: 14px !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay__methods label.is-active span,
body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay__methods label:has(input:checked) span {
    border-color: #3366CC !important;
    background: #EEF3FF !important;
    color: #3366CC !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-submit {
    min-height: 52px !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-submit:hover:not(:disabled) {
    background: #2554B0 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-submit:disabled {
    background: #93B4E8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-note {
    color: #8a94a6 !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-empty {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

@media (max-width: 767px) {
    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] h2,
    body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] h2,
    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] #staff-pack-modal-title,
    body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__body h3 {
        font-size: 18px !important;
    }

    body.plans-body .sbo-staff-pack-success[data-staff-pack-success-modal] .sbo-staff-pack-success__body {
        padding: 22px 16px 26px !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included h3,
    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branches h3,
    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay h3 {
        font-size: 16px !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] form {
        padding: 12px 14px 20px !important;
        gap: 14px !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid {
        grid-template-columns: 1fr !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid article {
        min-height: 0 !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-included__grid strong {
        font-size: 14px !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch strong {
        font-size: 15px !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-branch small,
    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-pay__hint {
        font-size: 13px !important;
    }

    body.plans-body .sbo-staff-pack-modal[data-staff-pack-modal] .sbo-staff-pack-submit {
        font-size: 16px !important;
    }
}

/* ---------- Delytt Help modal ? match plans blue theme + readable fonts ---------- */
body.plans-body .sbo-delytt-help-modal .sbo-delytt-help-modal__dialog,
body.plans-body .sbo-delytt-help-modal .sbo-staff-pack-modal__dialog,
body.plans-body .sbo-delytt-help-success .sbo-staff-pack-modal__dialog {
    background: #ffffff !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 17px !important;
    box-shadow: 0 16px 40px rgba(51, 102, 204, 0.16) !important;
}

body.plans-body .sbo-delytt-help-modal .sbo-staff-pack-modal__handle,
body.plans-body .sbo-delytt-help-success .sbo-staff-pack-modal__handle {
    background: #C7D2FE !important;
}

body.plans-body .sbo-delytt-help-modal header,
body.plans-body .sbo-delytt-help-success header {
    border-bottom: 1px solid #E8EDF3 !important;
}

body.plans-body .sbo-delytt-help-modal__icon,
body.plans-body .sbo-delytt-help-modal .sbo-staff-pack-modal__icon,
body.plans-body .sbo-delytt-help-success .sbo-delytt-help-modal__icon {
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #E0E8FF !important;
    font-size: 0 !important;
}

body.plans-body .sbo-delytt-help-modal h2,
body.plans-body .sbo-delytt-help-success h2,
body.plans-body .sbo-delytt-help-modal #delytt-help-modal-title,
body.plans-body .sbo-delytt-help-success #delytt-help-success-title {
    color: #222 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

body.plans-body .sbo-delytt-help-modal header p,
body.plans-body .sbo-delytt-help-success header p {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.plans-body .sbo-delytt-help-modal header button,
body.plans-body .sbo-delytt-help-success header button {
    background: #EEF2FF !important;
    color: #3366CC !important;
}

body.plans-body .sbo-delytt-help-modal__body {
    padding: 14px 18px 22px !important;
    gap: 16px !important;
}

body.plans-body .sbo-delytt-help-field > span,
body.plans-body .sbo-delytt-help-need > span {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.plans-body .sbo-delytt-help-field > span em {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.plans-body .sbo-delytt-help-field input,
body.plans-body .sbo-delytt-help-field textarea {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #222 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

body.plans-body .sbo-delytt-help-field textarea {
    min-height: 110px !important;
}

body.plans-body .sbo-delytt-help-field input:focus,
body.plans-body .sbo-delytt-help-field textarea:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.plans-body .sbo-delytt-help-need__grid {
    gap: 10px !important;
}

body.plans-body .sbo-delytt-help-need__grid button {
    min-height: 46px !important;
    padding: 10px 12px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

body.plans-body .sbo-delytt-help-need__grid button:hover {
    border-color: #93B4F0 !important;
    background: #F8FAFF !important;
}

body.plans-body .sbo-delytt-help-need__grid button.is-selected {
    border-color: #3366CC !important;
    border-width: 1.5px !important;
    background: #EEF3FF !important;
    color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.plans-body .sbo-delytt-help-submit {
    min-height: 52px !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.plans-body .sbo-delytt-help-submit:hover:not(:disabled) {
    background: #2554B0 !important;
}

body.plans-body .sbo-delytt-help-submit:disabled {
    background: #93B4E8 !important;
    box-shadow: none !important;
}

body.plans-body .sbo-delytt-help-note {
    color: #8a94a6 !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

body.plans-body .sbo-delytt-help-success .sbo-staff-pack-success__check {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.plans-body .sbo-delytt-help-success .sbo-plans-btn--teal,
body.plans-body .sbo-delytt-help-success__done {
    background: #3366CC !important;
    color: #fff !important;
    border-color: #3366CC !important;
}

@media (max-width: 767px) {
    body.plans-body .sbo-delytt-help-modal h2,
    body.plans-body .sbo-delytt-help-success h2,
    body.plans-body .sbo-delytt-help-modal #delytt-help-modal-title,
    body.plans-body .sbo-delytt-help-success #delytt-help-success-title {
        font-size: 18px !important;
    }

    body.plans-body .sbo-delytt-help-field > span,
    body.plans-body .sbo-delytt-help-need > span {
        font-size: 16px !important;
    }

    body.plans-body .sbo-delytt-help-modal__body {
        padding: 12px 14px 20px !important;
        gap: 14px !important;
    }

    body.plans-body .sbo-delytt-help-field input,
    body.plans-body .sbo-delytt-help-field textarea {
        font-size: 15px !important;
    }

    body.plans-body .sbo-delytt-help-need__grid button {
        font-size: 13px !important;
        min-height: 44px !important;
    }

    body.plans-body .sbo-delytt-help-submit {
        font-size: 16px !important;
    }
}

/* ---------- Modern SVG icons (page-scoped) ---------- */
body.plans-body .plans-ui .sbo-plans-shop-row__icon,
body.plans-body .plans-ui .sbo-plans-staff-pack__icon,
body.plans-body .plans-ui .sbo-plans-credit__icon,
body.plans-body .plans-ui .sbo-plans-feature__icon,
body.plans-body .plans-ui .sbo-plans-help__icon,
body.plans-body .plans-ui .sbo-plans-perks__icon,
body.plans-body .sbo-staff-pack-included__grid > article > span,
body.plans-body .sbo-staff-pack-modal__icon,
body.plans-body .sbo-sms-credit-modal__icon {
 display: inline-grid !important;
 place-items: center !important;
 line-height: 0 !important;
 font-size: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-shop-row__icon svg,
body.plans-body .plans-ui .sbo-plans-staff-pack__icon svg,
body.plans-body .plans-ui .sbo-plans-credit__icon svg,
body.plans-body .plans-ui .sbo-plans-feature__icon svg,
body.plans-body .plans-ui .sbo-plans-help__icon svg,
body.plans-body .plans-ui .sbo-plans-perks__icon svg,
body.plans-body .sbo-staff-pack-included__grid > article > span svg,
body.plans-body .sbo-staff-pack-modal__icon svg,
body.plans-body .sbo-sms-credit-modal__icon svg {
 display: block !important;
 flex-shrink: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-shop-row__icon svg,
body.plans-body .plans-ui .sbo-plans-staff-pack__icon svg,
body.plans-body .plans-ui .sbo-plans-credit__icon svg,
body.plans-body .plans-ui .sbo-plans-help__icon svg {
 width: 18px !important;
 height: 18px !important;
}

body.plans-body .plans-ui .sbo-plans-feature__icon {
 width: 28px !important;
 height: 28px !important;
 border-radius: 50% !important;
 background: #e6f7f5 !important;
 color: #0d9488 !important;
 font-size: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-feature__icon svg {
 width: 14px !important;
 height: 14px !important;
}

body.plans-body .plans-ui .sbo-plans-credit > div > span.sbo-plans-credit__icon {
 font-size: 0 !important;
 color: inherit !important;
}

body.plans-body .plans-ui .sbo-plans-credit--sms .sbo-plans-credit__icon {
 color: #B45309 !important;
 background: rgba(255, 255, 255, 0.85) !important;
}

body.plans-body .plans-ui .sbo-plans-credit--wa .sbo-plans-credit__icon {
 color: #6D28D9 !important;
 background: rgba(255, 255, 255, 0.85) !important;
}

body.plans-body .plans-ui .sbo-plans-staff-pack__icon {
 font-size: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-help > span.sbo-plans-help__icon {
 font-size: 0 !important;
}

body.plans-body .plans-ui .sbo-plans-perks__icon {
 width: 28px !important;
 height: 28px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 9px !important;
 background: #E8F0FE !important;
 color: #3366CC !important;
 font-size: 0 !important;
 margin-bottom: 2px !important;
}

body.plans-body .plans-ui .sbo-plans-perks__icon svg {
 width: 16px !important;
 height: 16px !important;
}

body.plans-body .sbo-staff-pack-included__grid > article > span {
 width: 28px !important;
 height: 28px !important;
 border-radius: 8px !important;
 background: #E8F0FE !important;
 color: #3366CC !important;
 font-size: 0 !important;
}

body.plans-body .sbo-staff-pack-included__grid > article > span svg {
 width: 15px !important;
 height: 15px !important;
}

body.plans-body .sbo-staff-pack-included__grid > article > span.is-check {
 background: #e6f7f5 !important;
 color: #0d9488 !important;
}

body.plans-body .sbo-staff-pack-modal__icon svg,
body.plans-body .sbo-sms-credit-modal__icon svg {
 width: 20px !important;
 height: 20px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 420px) {
 body.plans-body .plans-ui .plans-header,
 body.plans-body .plans-ui .sbo-plans-header.plans-header {
 padding: 14px 12px 14px !important;
 gap: 8px !important;
 }

 body.plans-body .plans-ui .plans-header__title,
 body.plans-body .plans-header__title,
 body.plans-body .sbo-plans-header h1,
 body.sbo-dashboard-body.plans-body .plans-ui h1.plans-header__title {
 font-size: 18px !important;
 color: #ffffff !important;
 font-family: var(--sb-font-bold) !important;
 }

 body.plans-body .plans-ui .plans-header__subtitle,
 body.plans-body .plans-header__subtitle,
 body.plans-body .sbo-plans-header p {
 font-size: 14px !important;
 color: rgba(255, 255, 255, 0.92) !important;
 }

 body.plans-body .plans-ui .plans-content,
 body.plans-body .plans-ui .sbo-plans-content.plans-content {
 padding: 12px 12px 120px !important;
 gap: 14px !important;
 }

 body.plans-body .plans-ui .sbo-plans-current h3 {
 font-size: 18px !important;
 }

 body.plans-body .plans-ui .sbo-plans-credit {
 flex-direction: column !important;
 align-items: stretch !important;
 }

 body.plans-body .plans-ui .sbo-plans-credit .sbo-plans-btn {
 width: 100% !important;
 }

 body.plans-body .plans-ui .sbo-plans-perks {
 grid-template-columns: 1fr !important;
 }
}

/* ==========================================================================
   Sales Dashboard ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-section-heading h2,
body.sales-dashboard-body .sales-dashboard-ui .sbo-section-heading h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-sales-summary__heading h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-cash-expenses__heading h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-callouts__titles h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-expense-book__titles h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-handovers__titles h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-who-sold__head h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-recent-sales__head h2,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-day-end__credits-head h3 {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-section-heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sbo-section-heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-sales-summary__heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-cash-expenses__heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-callouts__titles h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-expense-book__titles h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-handovers__titles h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-who-sold__head h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-recent-sales__head h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-day-end__credits-head h3 {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-section-heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sbo-section-heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-sales-summary__heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-cash-expenses__heading h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-callouts__titles h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-expense-book__titles h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-handovers__titles h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-who-sold__head h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-recent-sales__head h2,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-day-end__credits-head h3 {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   Sales Dashboard ? alert/credit card headings (page-scoped)
   <=1366px: 18px | Desktop (1367px+): 20px
   Targets: Cashflow overview, Credit Balance Low
   ========================================================================== */

body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-alert__copy strong,
body.sales-dashboard-body .sales-dashboard-ui .sbo-notice strong,
body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-credit__copy strong {
    font-size: 18px !important;
}

@media (max-width: 1366px) {
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-alert__copy strong,
    body.sales-dashboard-body .sales-dashboard-ui .sbo-notice strong,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-credit__copy strong {
        font-size: 18px !important;
    }
}

@media (min-width: 1367px) {
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-alert__copy strong,
    body.sales-dashboard-body .sales-dashboard-ui .sbo-notice strong,
    body.sales-dashboard-body .sales-dashboard-ui .sales-dashboard-credit__copy strong {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   Live Sales ? Record Sale ("Choose Items") modal theme
   Align teal accents with Live Sales blue (#3366cc / #36C)
   Modal sits outside .live-sales-ui, so scope via body.live-sales-body
   ========================================================================== */

body.live-sales-body .sbo-record-sale {
    --sbo-teal: #3366cc;
    --rs-blue: #3366cc;
    --rs-blue-deep: #2554b0;
    --rs-blue-soft: #e8f0fe;
    --rs-line: #e8edf3;
    --rs-text: #222;
    --rs-muted: #8a94a6;
}

body.live-sales-body .sbo-record-sale__sheet {
    border-radius: 20px;
    border: 1px solid #E0E8FF;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22);
    height: auto;
    max-height: min(90vh, 820px);
    max-height: min(90dvh, 820px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.live-sales-body .sbo-record-sale__step {
    min-height: 0;
    overflow: hidden;
}

body.live-sales-body .sbo-record-sale__body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-record-sale {
        padding: 10px;
        align-items: center;
    }

    body.live-sales-body .sbo-record-sale__sheet {
        width: 100%;
        max-height: min(94vh, 94dvh);
    }

    body.live-sales-body .sbo-record-sale__dialog {
        padding: 10px;
        align-items: center;
    }

    body.live-sales-body .sbo-record-sale__dialog > section {
        width: 100%;
        max-height: min(92vh, 92dvh);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Choose Items ? match top/bottom spacing; hug content when short */
body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 16px;
    max-height: calc(min(90vh, 820px) - 150px);
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__footer:not([hidden]) {
    padding-top: 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

body.live-sales-body .sbo-record-sale__header h2 {
    color: var(--rs-text);
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 16px !important; /* Mobile (<768px) ? min */
    line-height: 1.2;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.live-sales-body .sbo-record-sale__header h2 {
        font-size: 18px !important; /* Tablet */
    }
}

@media (min-width: 1366px) {
    body.live-sales-body .sbo-record-sale__header h2 {
        font-size: 20px !important; /* Desktop */
    }
}

body.live-sales-body .sbo-record-sale__header p {
    margin: 4px 0 0;
    color: var(--rs-muted);
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 1.35;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__header p,
body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__heading p {
    font-size: 14px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    line-height: 1.35;
}

body.live-sales-body .sbo-record-sale__progress i.is-active,
body.live-sales-body .sbo-record-sale__qty-badge,
body.live-sales-body .sbo-record-sale__primary,
body.live-sales-body .sbo-record-sale__cashier-picked i:not(.sbo-record-sale__icon),
body.live-sales-body .sbo-record-sale__pay-grid button.is-active,
body.live-sales-body .sbo-record-sale__dialog footer button.is-primary {
    background: var(--rs-blue) !important;
    border-color: var(--rs-blue) !important;
    color: #fff !important;
}

body.live-sales-body .sbo-record-sale__search.sbo-staff-search {
    border: 1px solid #d1d5db !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
    min-height: 48px;
}

body.live-sales-body .sbo-record-sale__search.sbo-staff-search:focus-within {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

body.live-sales-body .sbo-record-sale__search > span {
    color: #94a3b8 !important;
}

/* ---------- Choose Items step UI ---------- */
body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 12px;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__heading {
    min-width: 0;
    padding-right: 4px;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__heading h2 {
    margin: 0;
    line-height: 1.2;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__heading p {
    margin: 4px 0 0;
    max-width: 100%;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__cart-btn {
    align-self: center;
    margin-top: 0;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__close {
    align-self: center;
    margin-top: 0;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__cart-btn[hidden] {
    display: none !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__progress {
    padding: 6px 18px 14px;
}

body.live-sales-body .sbo-record-sale__cart-btn {
    width: auto !important;
    min-width: 0;
    height: 40px;
    padding: 0 12px 0 10px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #e0e6ef !important;
    border-radius: 12px !important;
    background: #f7f8fb !important;
    color: var(--rs-text) !important;
    box-shadow: none !important;
    cursor: pointer;
}

body.live-sales-body .sbo-record-sale__cart-btn-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

body.live-sales-body .sbo-record-sale__cart-btn .sbo-record-sale__icon {
    font-size: 20px;
    color: var(--rs-blue);
}

body.live-sales-body .sbo-record-sale__cart-btn em[data-rs-cart-badge] {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--rs-blue) !important;
    color: #fff !important;
    font: 10px/1 var(--sb-font-semibold);
    font-style: normal;
}

body.live-sales-body .sbo-record-sale__cart-btn-total {
    position: static;
    color: var(--rs-text);
    font-family: var(--sb-font-semibold);
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
}

body.live-sales-body .sbo-record-sale__cart-btn-total em {
    position: static !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: inline !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-style: normal;
    font-family: inherit;
    font-size: inherit;
}

body.live-sales-body .sbo-record-sale__close,
body.live-sales-body .sbo-record-sale__nav {
    font-size: 0 !important;
    line-height: 0 !important;
    color: #64748B !important;
}

body.live-sales-body .sbo-record-sale__close .sbo-record-sale__icon,
body.live-sales-body .sbo-record-sale__nav .sbo-record-sale__icon {
    font-size: 16px;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__search > span,
body.live-sales-body .sbo-record-sale__search > .sbo-record-sale__icon {
    color: #94a3b8 !important;
    font-size: 18px !important;
    display: grid !important;
    place-items: center;
    line-height: 0;
}

body.live-sales-body .sbo-record-sale__card-actions button {
    display: grid;
    place-items: center;
    font-size: 0 !important;
    line-height: 0 !important;
}

body.live-sales-body .sbo-record-sale__card-actions button .sbo-record-sale__icon {
    font-size: 15px;
    color: var(--rs-blue);
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__footer {
    border-top: 1px solid var(--rs-line);
    background: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue {
    width: 100%;
    min-height: 64px;
    max-width: 100%;
    padding: 10px 10px 10px 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.28);
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
}

body.live-sales-body .sbo-record-sale__continue-cart {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

body.live-sales-body .sbo-record-sale__continue-cart .sbo-record-sale__icon {
    font-size: 20px;
    color: #fff;
}

body.live-sales-body .sbo-record-sale__continue-cart em {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: #fff !important;
    color: var(--rs-blue) !important;
    font: 10px/1 var(--sb-font-bold);
    font-style: normal;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

body.live-sales-body .sbo-record-sale__continue-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong,
body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong em {
    display: inline;
    color: #fff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1.25;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.live-sales-body .sbo-record-sale__continue-copy small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.3;
}

body.live-sales-body .sbo-record-sale__continue-arrow {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-left: auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: var(--rs-text);
}

body.live-sales-body .sbo-record-sale__continue-arrow .sbo-record-sale__icon {
    font-size: 16px;
    color: var(--rs-text);
}

body.live-sales-body .sbo-record-sale__open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.live-sales-body .sbo-record-sale__open .sbo-record-sale__icon {
    font-size: 14px;
}

body.live-sales-body .sbo-record-sale__stepper button {
    display: grid;
    place-items: center;
    font-size: 0 !important;
    line-height: 0 !important;
}

body.live-sales-body .sbo-record-sale__stepper button .sbo-record-sale__icon {
    font-size: 14px;
}

body.live-sales-body .sbo-record-sale__progress {
    padding: 4px 18px 14px;
    gap: 8px;
}

body.live-sales-body .sbo-record-sale__progress i {
    height: 4px;
    border-radius: 99px;
}

body.live-sales-body .sbo-record-sale__search.sbo-staff-search {
    margin-bottom: 14px;
}

body.live-sales-body .sbo-record-sale__search input {
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    color: var(--rs-text) !important;
}

body.live-sales-body .sbo-record-sale__search input::placeholder {
    color: #94a3b8;
}

body.live-sales-body .sbo-record-sale__chips-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    max-width: 100%;
}

body.live-sales-body .sbo-record-sale__chips-nav {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #e0e6ef;
    border-radius: 50%;
    background: #fff;
    color: var(--rs-blue);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    z-index: 1;
}

body.live-sales-body .sbo-record-sale__chips-nav[hidden] {
    display: none !important;
}

body.live-sales-body .sbo-record-sale__chips-nav:hover {
    border-color: #bfdbfe;
    background: #f5f8ff;
}

body.live-sales-body .sbo-record-sale__chips-nav .sbo-record-sale__icon {
    font-size: 16px;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 2px 2px 4px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.live-sales-body .sbo-record-sale__chips::-webkit-scrollbar {
    display: none;
    height: 0;
}

body.live-sales-body .sbo-record-sale__chips button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 999px !important;
    color: #222 !important;
    background: #fff !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

body.live-sales-body .sbo-record-sale__chips button:hover {
    border-color: #bfdbfe !important;
    color: #2563eb !important;
    background: #fff !important;
}

body.live-sales-body .sbo-record-sale__chips button.is-active {
    border-color: #36c !important;
    color: #fff !important;
    background: #36c !important;
    font-family: var(--sb-font-medium) !important;
    font-weight: normal !important;
}

body.live-sales-body .sbo-record-sale__group {
    margin-bottom: 20px;
    padding-bottom: 4px;
    border-bottom: none;
}

body.live-sales-body .sbo-record-sale__group > h3 {
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #36c  !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    font-size: 20px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
}

body.live-sales-body .sbo-record-sale__group > h3::after {
    content: "";
    flex: 1 1 auto;
    min-width: 24px;
    height: 1px;
    background: #e4e8ed;
}

body.live-sales-body .sbo-record-sale__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body.live-sales-body .sbo-record-sale__card {
    min-width: 0;
    min-height: 0;
    padding: 14px 16px;
    gap: 4px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

body.live-sales-body .sbo-record-sale__card:hover {
    border-color: #bfdbfe !important;
}

body.live-sales-body .sbo-record-sale__card.is-selected {
    border-color: var(--rs-blue) !important;
    box-shadow: 0 0 0 1px rgba(51, 102, 204, 0.18) !important;
    background: #fafcff;
}

body.live-sales-body .sbo-record-sale__card > strong {
    padding-right: 28px;
    color: var(--rs-text) !important;
    font-family: var(--sb-font-medium) !important;
    font-weight: normal !important;
    font-size: 18px !important;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.live-sales-body .sbo-record-sale__price {
    margin-top: 2px;
    color: #434e5c;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    font-size: 18px;
}

body.live-sales-body .sbo-record-sale__open {
    margin-top: 2px !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-record-sale__qty-badge {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 0 !important;
    line-height: 0 !important;
}

body.live-sales-body .sbo-record-sale__qty-badge .sbo-record-sale__icon {
    font-size: 12px;
    color: #fff;
}

body.live-sales-body .sbo-record-sale__card-actions {
    margin-top: 10px;
    padding: 0;
    border: 1px solid #d7e0ef;
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    grid-template-columns: none;
}

body.live-sales-body .sbo-record-sale__card-actions button {
    width: 40px;
    height: 36px;
    flex: 0 0 auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: #eef3fb !important;
    color: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__card-actions button[data-rs-qty-dec],
body.live-sales-body .sbo-record-sale__card-actions button[data-rs-qty-inc] {
    background: #eef3fb !important;
    border-color: transparent !important;
    color: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__card-actions button .sbo-record-sale__icon {
    color: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__card-actions b,
body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input {
    flex: 0 0 auto;
    min-width: 40px;
    width: 48px;
    height: 36px;
    display: grid;
    place-items: center;
    text-align: center;
    background: #fff;
    border: 0;
    border-left: 1px solid #e4ebf5;
    border-right: 1px solid #e4ebf5;
    border-radius: 0;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 16px !important;
    color: var(--rs-text);
}

body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input {
    display: block;
    padding: 0 4px;
    line-height: 36px;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input::-webkit-outer-spin-button,
body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-record-sale__cart-btn-total {
        font-size: 16px;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong em {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-record-sale__continue-copy small {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-record-sale__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    body.live-sales-body .sbo-record-sale__card {
        padding: 12px;
    }

    body.live-sales-body .sbo-record-sale__card > strong {
        font-size: 15px !important;
        padding-right: 24px;
    }

    body.live-sales-body .sbo-record-sale__price {
        font-size: 14px;
    }

    body.live-sales-body .sbo-record-sale__card-actions {
        margin-top: 8px;
        width: 100%;
        max-width: 100%;
    }

    body.live-sales-body .sbo-record-sale__card-actions button {
        width: 34px;
        height: 32px;
    }

    body.live-sales-body .sbo-record-sale__card-actions b,
    body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 32px;
        font-size: 14px !important;
    }

    body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input {
        line-height: 32px;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}

body.live-sales-body .sbo-record-sale__add-more {
    color: var(--rs-blue) !important;
    background: var(--rs-blue-soft) !important;
    border-color: #bfdbfe !important;
}

body.live-sales-body .sbo-record-sale__amount-card > span:not(.sbo-record-sale__icon) {
    background: var(--rs-blue-soft) !important;
}

body.live-sales-body .sbo-record-sale__customer-actions button.is-teal {
    border-color: #bfdbfe !important;
    color: var(--rs-blue) !important;
    background: var(--rs-blue-soft) !important;
}

body.live-sales-body .sbo-record-sale__customer-search i {
    border-top-color: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__customer-row em b,
body.live-sales-body .sbo-record-sale__confirm-summary dd[data-rs-confirm-cashier] {
    color: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__cashier-list button.is-active {
    border-color: var(--rs-blue) !important;
    background: var(--rs-blue-soft) !important;
}

body.live-sales-body .sbo-record-sale__field textarea:focus,
body.live-sales-body .sbo-record-sale__field > input[type="text"]:focus,
body.live-sales-body .sbo-record-sale__money:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

/* Fix: display:flex/grid must not override [hidden] (cashier/customer overlap) */
body.live-sales-body .sbo-record-sale [hidden],
body.live-sales-body .sbo-record-sale__cashier-empty[hidden],
body.live-sales-body .sbo-record-sale__cashier-picked[hidden],
body.live-sales-body .sbo-record-sale__customer-actions[hidden],
body.live-sales-body .sbo-record-sale__customer-selected[hidden],
body.live-sales-body .sbo-record-sale__hint[hidden],
body.live-sales-body .sbo-record-sale__footer[hidden],
body.live-sales-body .sbo-record-sale__cart-btn[hidden],
body.live-sales-body .sbo-record-sale__step[hidden],
body.live-sales-body .sbo-record-sale__dialog[hidden] {
    display: none !important;
}

/* ---------- Payment step UI ---------- */
body.live-sales-body .sbo-record-sale__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    line-height: 0;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__header {
    grid-template-columns: 36px 1fr 36px;
    gap: 8px;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__header p {
    font-size: 14px !important;
    color: #8a94a6;
}

body.live-sales-body .sbo-record-sale__amount-card {
    padding: 16px 18px;
    border-radius: 14px;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb;
    margin-top: 18px;
}

body.live-sales-body .sbo-record-sale__amount-card small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-record-sale__amount-card strong {
    color: var(--rs-text) !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 26px !important;
    line-height: 1.15;
}

body.live-sales-body .sbo-record-sale__amount-card > .sbo-record-sale__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rs-blue-soft) !important;
    color: var(--rs-blue) !important;
    font-size: 20px;
}

body.live-sales-body .sbo-record-sale__section {
    margin-top: 18px;
}

body.live-sales-body .sbo-record-sale__section h3 {
    margin: 0 0 10px;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.live-sales-body .sbo-record-sale__section h3 .sbo-record-sale__icon {
    font-size: 16px;
    color: #222 !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__section h3 .sbo-record-sale__icon {
    font-size: 16px;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-record-sale__section h3 .sbo-record-sale__icon,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__section h3 .sbo-record-sale__icon {
        font-size: 18px;
    }
}

body.live-sales-body .sbo-record-sale__section h3 small {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-family: var(--sb-font-regular) !important;
    text-transform: none;
    letter-spacing: 0;
}

body.live-sales-body .sbo-record-sale__cashier {
    min-height: 56px;
    padding: 0 14px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.live-sales-body .sbo-record-sale__cashier.is-missing {
    border-color: #f0b35a !important;
    background: #fff8ee !important;
}

body.live-sales-body .sbo-record-sale__section.is-missing-cashier h3 small.is-required {
    color: #c58916 !important;
    font-weight: 600;
}

body.live-sales-body .sbo-record-sale__cashier:hover {
    border-color: #bfdbfe !important;
}

body.live-sales-body .sbo-record-sale__cashier.is-missing:hover {
    border-color: #e09a2f !important;
}

body.live-sales-body .sbo-record-sale__cashier-empty,
body.live-sales-body .sbo-record-sale__cashier-picked {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__cashier-empty > .sbo-record-sale__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef2f7;
    color: #8a94a6;
    font-size: 18px;
}

body.live-sales-body .sbo-record-sale__cashier-empty > .sbo-record-sale__icon svg,
body.live-sales-body .sbo-record-sale__cashier-empty > i.sbo-record-sale__icon svg {
    width: 18px;
    height: 18px;
}

body.live-sales-body .sbo-record-sale__cashier-empty > b,
body.live-sales-body .sbo-record-sale__cashier-picked > b {
    margin-left: auto;
    font-size: 22px !important;
    line-height: 1;
    font-weight: normal !important;
    color: #94a3b8 !important;
}

body.live-sales-body .sbo-record-sale__cashier-picked strong,
body.live-sales-body .sbo-record-sale__customer-picked-copy strong {
    color: var(--rs-text) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__cashier-picked i:not(.sbo-record-sale__icon) {
    width: 36px;
    height: 36px;
    font-size: 12px !important;
    background: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__hint {
    margin-top: 8px;
    color: #b45309 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.35;
}

body.live-sales-body .sbo-record-sale__hint.is-center {
    margin: 0 0 10px;
}

body.live-sales-body .sbo-record-sale__customer-actions {
    gap: 10px;
}

body.live-sales-body .sbo-record-sale__customer-actions button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #333333 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__customer-actions button .sbo-record-sale__icon {
    font-size: 16px;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__customer-actions button.is-teal {
    border-color: #bfdbfe !important;
    color: var(--rs-blue) !important;
    background: var(--rs-blue-soft) !important;
}

body.live-sales-body .sbo-record-sale__customer-selected {
    margin-top: 0;
    gap: 8px;
}

body.live-sales-body .sbo-record-sale__customer-clear {
    width: 48px;
    height: 48px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 12px !important;
    color: #8a94a6 !important;
    background: #fff !important;
    font-size: 22px;
}

body.live-sales-body .sbo-record-sale__pay-grid {
    gap: 10px;
}

body.live-sales-body .sbo-record-sale__pay-grid button {
    min-height: 76px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #333333 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    gap: 8px;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

body.live-sales-body .sbo-record-sale__pay-grid button:hover:not(:disabled):not(.is-active) {
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

body.live-sales-body .sbo-record-sale__pay-grid button.is-active {
    border-color: #36c !important;
    background: #36c !important;
    color: #fff !important;
}

body.live-sales-body .sbo-record-sale__pay-grid button .sbo-record-sale__icon,
body.live-sales-body .sbo-record-sale__pay-grid button b.sbo-record-sale__icon {
    font-size: 22px !important;
    font-weight: normal;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary .sbo-record-sale__icon {
    font-size: 18px;
    margin-right: 2px;
}

body.live-sales-body .sbo-record-sale__field {
    margin-top: 18px;
    font-size: 18px !important;
    color: var(--rs-text) !important;
}

body.live-sales-body .sbo-record-sale__field small {
    font-size: 14px !important;
    color: #94a3b8 !important;
}

body.live-sales-body .sbo-record-sale__field > input[type="text"] {
    min-height: 48px;
    border: 1px solid var(--rs-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 16px !important;
}

/* Collect button: keep label together (avoid flex space-between splitting text) */
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary {
    justify-content: center !important;
    gap: 6px !important;
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    border-radius: 14px !important;
    min-height: 54px;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary .sbo-record-sale__icon {
        font-size: 18px;
    }
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary em,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary span:not(.sbo-record-sale__icon) {
    font-family: var(--sb-font-bold) !important;
    font-style: normal;
}

/* Payment step: keep label/body hierarchy consistent */
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__section h3 {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__section h3 {
        font-size: 18px !important;
    }
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__section h3 small {
    font-size: 13px !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__cashier-empty,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__cashier-picked,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__cashier-picked strong,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__customer-actions button,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__pay-grid button,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__field,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__field > input[type="text"] {
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__hint,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__amount-card small,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__header p,
body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__field small {
    font-size: 14px !important;
}

/* Payment ? meta / hints / optional labels 16px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__cashier-empty,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__hint,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__section h3 small,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__field small {
        font-size: 16px !important;
    }
}

body.live-sales-body .sbo-record-sale__primary:disabled {
    opacity: 0.45;
    background: #93b4e8 !important;
    border-color: #93b4e8 !important;
}

/* Mobile (<768px): 16px minimum font size for readable modal text */
@media (max-width: 767px) {
    body.live-sales-body .sbo-record-sale {
        font-size: 16px;
    }

    body.live-sales-body .sbo-record-sale__search input,
    body.live-sales-body .sbo-record-sale__open,
    body.live-sales-body .sbo-record-sale__card-actions b,
    body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input,
    body.live-sales-body .sbo-record-sale__card-actions i,
    body.live-sales-body .sbo-record-sale__loading,
    body.live-sales-body .sbo-record-sale__empty,
    body.live-sales-body .sbo-record-sale__empty h3,
    body.live-sales-body .sbo-record-sale__empty p,
    body.live-sales-body .sbo-record-sale__primary,
    body.live-sales-body .sbo-record-sale__field,
    body.live-sales-body .sbo-record-sale__field small,
    body.live-sales-body .sbo-record-sale__field textarea,
    body.live-sales-body .sbo-record-sale__field > input[type="text"],
    body.live-sales-body .sbo-record-sale__add-more,
    body.live-sales-body .sbo-record-sale__cashier-empty,
    body.live-sales-body .sbo-record-sale__cashier-picked,
    body.live-sales-body .sbo-record-sale__cashier-picked strong,
    body.live-sales-body .sbo-record-sale__customer-picked-copy strong,
    body.live-sales-body .sbo-record-sale__hint,
    body.live-sales-body .sbo-record-sale__customer-actions button,
    body.live-sales-body .sbo-record-sale__pay-grid button,
    body.live-sales-body .sbo-record-sale__amount-card small,
    body.live-sales-body .sbo-record-sale__dialog header h3,
    body.live-sales-body .sbo-record-sale__dialog footer button,
    body.live-sales-body .sbo-record-sale__review-card > header strong,
    body.live-sales-body .sbo-record-sale__review-meta,
    body.live-sales-body .sbo-record-sale__review-totals {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-record-sale__amount-card strong {
        font-size: 26px !important;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.live-sales-body .sbo-record-sale__search input,
    body.live-sales-body .sbo-record-sale__card-actions b,
    body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input,
    body.live-sales-body .sbo-record-sale__card-actions i,
    body.live-sales-body .sbo-record-sale__cashier-empty,
    body.live-sales-body .sbo-record-sale__cashier-picked,
    body.live-sales-body .sbo-record-sale__cashier-picked strong,
    body.live-sales-body .sbo-record-sale__customer-actions button,
    body.live-sales-body .sbo-record-sale__pay-grid button,
    body.live-sales-body .sbo-record-sale__hint {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-record-sale__chips button {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary {
        font-size: 18px !important;
    }
}

@media (min-width: 1366px) {
    body.live-sales-body .sbo-record-sale__search input,
    body.live-sales-body .sbo-record-sale__card-actions b,
    body.live-sales-body .sbo-record-sale__card-actions .sbo-record-sale__qty-input,
    body.live-sales-body .sbo-record-sale__card-actions i,
    body.live-sales-body .sbo-record-sale__cashier-empty,
    body.live-sales-body .sbo-record-sale__cashier-picked,
    body.live-sales-body .sbo-record-sale__cashier-picked strong,
    body.live-sales-body .sbo-record-sale__customer-actions button,
    body.live-sales-body .sbo-record-sale__pay-grid button,
    body.live-sales-body .sbo-record-sale__hint {
        font-size: 20px !important;
    }

    body.live-sales-body .sbo-record-sale__chips button {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="3"] .sbo-record-sale__primary {
        font-size: 18px !important;
    }
}

/* Continue bar ? lock typography after shared primary font overrides */
body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong,
body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong em {
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy small {
    font-size: 14px !important;
}

@media (max-width: 380px) {
    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue {
        gap: 8px;
        padding: 8px 8px 8px 10px !important;
        min-height: 58px;
    }

    body.live-sales-body .sbo-record-sale__continue-cart,
    body.live-sales-body .sbo-record-sale__continue-arrow {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy strong em {
        font-size: 14px !important;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="1"] .sbo-record-sale__continue-copy small {
        font-size: 12px !important;
    }
}

/* Category labels ? 20px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__group > h3 {
        font-size: 20px !important;
    }

    body.live-sales-body .sbo-record-sale__chips button {
        font-size: 18px !important;
        font-family: var(--sb-font-regular) !important;
        font-weight: normal !important;
    }

    body.live-sales-body .sbo-record-sale__chips button.is-active {
        font-family: var(--sb-font-semibold) !important;
        font-weight: normal !important;
    }
}

/* ==========================================================================
   Live Sales ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.live-sales-body .live-sales-ui .live-sales-header__title,
body.live-sales-body .live-sales-ui .live-sales-header h1,
body.live-sales-body .live-sales-ui .sbo-live-sales-empty h2,
body.live-sales-body .sbo-record-sale__header h2,
body.live-sales-body .sbo-day-closure__intro h2,
body.live-sales-body .sbo-record-sale__dialog header h3,
body.live-sales-body .sbo-record-sale__dialog > section > h3,
body.live-sales-body .sbo-record-sale__empty h3 {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.live-sales-body .live-sales-ui .live-sales-header__title,
    body.live-sales-body .live-sales-ui .live-sales-header h1,
    body.live-sales-body .live-sales-ui .sbo-live-sales-empty h2,
    body.live-sales-body .sbo-record-sale__header h2,
    body.live-sales-body .sbo-day-closure__intro h2,
    body.live-sales-body .sbo-record-sale__dialog header h3,
    body.live-sales-body .sbo-record-sale__dialog > section > h3,
    body.live-sales-body .sbo-record-sale__empty h3 {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.live-sales-body .live-sales-ui .live-sales-header__title,
    body.live-sales-body .live-sales-ui .live-sales-header h1,
    body.live-sales-body .live-sales-ui .sbo-live-sales-empty h2,
    body.live-sales-body .sbo-record-sale__header h2,
    body.live-sales-body .sbo-day-closure__intro h2,
    body.live-sales-body .sbo-record-sale__dialog header h3,
    body.live-sales-body .sbo-record-sale__dialog > section > h3,
    body.live-sales-body .sbo-record-sale__empty h3 {
        font-size: 22px !important;
    }
}

/* Choose Items ? item title 18px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__card > strong {
        font-size: 18px !important;
    }
}

@media (min-width: 1367px) {
    body.live-sales-body .sbo-record-sale__card > strong {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Live Sales ? Review Cart step (icons, fonts, theme)
   ========================================================================== */

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__header {
    grid-template-columns: 36px 1fr 36px;
    gap: 8px;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__header p {
    font-size: 14px !important;
    color: #8a94a6;
}

body.live-sales-body .sbo-record-sale__review-card {
    margin-bottom: 14px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.live-sales-body .sbo-record-sale__review-card > header strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    line-height: 1.3;
    word-break: break-word;
}

body.live-sales-body .sbo-record-sale__review-card > header button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #dc2626 !important;
    background: #fee2e2 !important;
    font-size: 16px;
}

body.live-sales-body .sbo-record-sale__review-card > header button .sbo-record-sale__icon {
    font-size: 15px;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__review-meta {
    margin-top: 6px;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-record-sale__review-meta small {
    font-size: 14px !important;
    color: #8a94a6 !important;
}

body.live-sales-body .sbo-record-sale__review-controls {
    margin-top: 12px;
    gap: 12px;
}

body.live-sales-body .sbo-record-sale__stepper {
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    padding: 4px;
}

@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__stepper {
        border-radius: 10px !important;
        padding: 7px;
    }
}

body.live-sales-body .sbo-record-sale__stepper button {
    width: 32px;
    height: 32px;
    color: #222 !important;
    background: #fff !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__stepper b,
body.live-sales-body .sbo-record-sale__stepper .sbo-record-sale__qty-input {
    min-width: 22px;
    width: 52px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    color: #222;
    -moz-appearance: textfield;
}

body.live-sales-body .sbo-record-sale__stepper .sbo-record-sale__qty-input::-webkit-outer-spin-button,
body.live-sales-body .sbo-record-sale__stepper .sbo-record-sale__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__money {
    min-height: 48px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__money em {
    color: #8a94a6 !important;
    font-size: 18px !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__money input {
    font-size: 16px !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-record-sale__review-totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
    font-size: 16px !important;
    color: #222 !important;
}

body.live-sales-body .sbo-record-sale__review-totals span {
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
}

body.live-sales-body .sbo-record-sale__review-totals strong {
    font-family: var(--sb-font-bold) !important;
    color: #222 !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field {
    margin-top: 16px;
    font-size: 16px !important;
    color: #222 !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #222 !important;
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field .sbo-record-sale__icon {
    font-size: 16px;
    color: #222 !important;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field > span:first-child {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field .sbo-record-sale__icon {
        font-size: 18px;
    }
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field small {
    font-size: 14px !important;
    color: #94a3b8 !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field small.sbo-record-sale__field-error,
body.live-sales-body .sbo-record-sale__field small.sbo-record-sale__field-error {
    display: block;
    margin-top: 8px;
    font-size: 13px !important;
    line-height: 1.35;
    color: #dc2626 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field small.sbo-record-sale__field-error[hidden],
body.live-sales-body .sbo-record-sale__field small.sbo-record-sale__field-error[hidden] {
    display: none !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field.is-invalid .sbo-record-sale__money {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field textarea {
    min-height: 88px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 16px !important;
    color: #222 !important;
}

body.live-sales-body .sbo-record-sale__add-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: 16px;
    border: 1.5px dashed #bfdbfe !important;
    border-radius: 12px !important;
    color: #3366cc !important;
    background: #e8f0fe !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__add-more .sbo-record-sale__icon {
    font-size: 16px;
    color: currentColor;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary {
    min-height: 54px;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary .sbo-record-sale__icon {
    font-size: 16px;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary span,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary strong {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary .sbo-record-sale__icon {
        font-size: 18px;
    }
}

body.live-sales-body .sbo-record-sale__card-actions button[data-rs-qty-dec] .sbo-record-sale__icon,
body.live-sales-body .sbo-record-sale__card-actions button[data-rs-qty-inc] .sbo-record-sale__icon {
    font-size: 15px;
    color: var(--rs-blue) !important;
}

body.live-sales-body .sbo-record-sale__review-card > header button[data-rs-remove] {
    color: #DC2626 !important;
}

body.live-sales-body .sbo-record-sale__review-card > header button[data-rs-remove] .sbo-record-sale__icon {
    color: #DC2626 !important;
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-record-sale__review-card > header strong,
    body.live-sales-body .sbo-record-sale__review-totals,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__field textarea,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__money input,
    body.live-sales-body .sbo-record-sale__add-more,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary span,
    body.live-sales-body .sbo-record-sale__step[data-rs-step="2"] .sbo-record-sale__primary strong {
        font-size: 16px !important;
    }
}

/* Review Cart ? item title 18px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__review-card > header strong {
        font-size: 18px !important;
    }
}

@media (min-width: 1367px) {
    body.live-sales-body .sbo-record-sale__review-card > header strong {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Live Sales ? Sale Recorded success dialog (theme match)
   ========================================================================== */

body.live-sales-body .sbo-record-sale__dialog[data-rs-success-dialog] > section,
body.live-sales-body .sbo-record-sale__success {
    width: min(100%, 420px);
    padding: 22px 20px 20px;
    border-radius: 20px !important;
    border: 1px solid #E0E8FF !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22) !important;
    text-align: center;
}

body.live-sales-body .sbo-record-sale__success-close {
    width: 34px;
    height: 34px;
    border: 0 !important;
    border-radius: 50%;
    color: #8a94a6 !important;
    background: #F1F5F9 !important;
}

body.live-sales-body .sbo-record-sale__success-close:hover {
    background: #E8EDF3 !important;
    color: #334155 !important;
}

body.live-sales-body .sbo-record-sale__success-icon {
    width: 68px;
    height: 68px;
    margin: 8px auto 16px;
    border-radius: 50%;
    color: #3366cc !important;
    background: #e8f0fe !important;
    border: 3px solid #3366cc !important;
    box-shadow: 0 0 0 10px rgba(51, 102, 204, 0.12) !important;
    font-size: 0 !important;
}

body.live-sales-body .sbo-record-sale__success-icon svg {
    display: block;
    width: 28px;
    height: 28px;
}

body.live-sales-body .sbo-record-sale__dialog[data-rs-success-dialog] #rs-success-title,
body.live-sales-body .sbo-record-sale__success #rs-success-title {
    margin: 0;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    line-height: 1.25;
    text-align: center;
}

body.live-sales-body .sbo-record-sale__success-total {
    margin: 8px 0 0;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    text-align: center;
}

body.live-sales-body .sbo-record-sale__success-staff {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    text-align: center;
}

body.live-sales-body .sbo-record-sale__success-staff strong {
    color: #333333 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-record-sale__receipt {
    margin-top: 20px;
}

body.live-sales-body .sbo-record-sale__receipt > span {
    margin-bottom: 10px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em;
}

@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__success-staff,
    body.live-sales-body .sbo-record-sale__success-staff strong,
    body.live-sales-body .sbo-record-sale__receipt > span {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-record-sale__dialog[data-rs-success-dialog] #rs-success-title,
    body.live-sales-body .sbo-record-sale__success #rs-success-title {
        font-size: 20px !important;
    }
}

body.live-sales-body .sbo-record-sale__receipt > div {
    gap: 10px;
}

body.live-sales-body .sbo-record-sale__receipt button,
body.live-sales-body .sbo-record-sale__success-actions button {
    min-height: 48px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    box-shadow: none !important;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

body.live-sales-body .sbo-record-sale__receipt button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

body.live-sales-body .sbo-record-sale__receipt button:not(:disabled) {
    cursor: pointer;
    opacity: 1;
}

body.live-sales-body .sbo-record-sale__receipt button:not(:disabled):hover {
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

body.live-sales-body .sbo-record-sale__receipt button.is-soon {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.15;
}

body.live-sales-body .sbo-record-sale__receipt button.is-soon em {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 10px;
    border-radius: 999px;
    color: #7c3aed !important;
    background: #ede9fe !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 11px !important;
    font-style: normal;
    letter-spacing: 0;
}

body.live-sales-body .sbo-record-sale__receipt-hint {
    margin: 10px 0 0;
    text-align: center;
    color: #b45309 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.live-sales-body .sbo-record-sale__receipt-status {
    margin: 10px 0 0;
    text-align: center;
    color: #2563eb !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.live-sales-body .sbo-record-sale__receipt-status.is-error {
    color: #dc2626 !important;
}

body.live-sales-body .sbo-record-sale__receipt-status.is-success {
    color: #15803d !important;
}

body.live-sales-body .sbo-record-sale__success-actions {
    margin-top: 14px;
    gap: 10px;
}

body.live-sales-body .sbo-record-sale__success-actions button:not(.is-navy):not(.is-primary-blue) {
    border: 1.5px solid #E0E8FF !important;
    background: #EEF2FF !important;
    color: #3366CC !important;
}

body.live-sales-body .sbo-record-sale__success-actions button:not(.is-navy):not(.is-primary-blue):hover {
    border-color: #C7D2FE !important;
    background: #E0E8FF !important;
    color: #3366CC !important;
}

body.live-sales-body .sbo-record-sale__success-actions button.is-navy,
body.live-sales-body .sbo-record-sale__success-actions button.is-primary-blue {
    border: 0 !important;
    color: #fff !important;
    background: #3366cc !important;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24) !important;
}

body.live-sales-body .sbo-record-sale__success-actions button.is-navy:hover,
body.live-sales-body .sbo-record-sale__success-actions button.is-primary-blue:hover {
    background: #2554b0 !important;
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-record-sale__dialog[data-rs-success-dialog] #rs-success-title,
    body.live-sales-body .sbo-record-sale__success #rs-success-title {
        font-size: 20px !important;
    }

    body.live-sales-body .sbo-record-sale__success-total,
    body.live-sales-body .sbo-record-sale__receipt button,
    body.live-sales-body .sbo-record-sale__success-actions button {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Live Sales ? nested dialogs (Link Customer / Cashier / Amount / Confirm)
   ========================================================================== */

body.live-sales-body .sbo-record-sale__dialog > section {
    border-radius: 20px !important;
    border: 1px solid #E0E8FF !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22) !important;
}

body.live-sales-body .sbo-record-sale__dialog header h3 {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

body.live-sales-body .sbo-record-sale__dialog header h3 .sbo-record-sale__icon {
    font-size: 18px;
    color: #3366cc;
}

body.live-sales-body .sbo-record-sale__dialog header h3 .sbo-record-sale__icon--title {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E8F0FE;
    color: #3366CC !important;
    font-size: 0;
    border: 1px solid #E0E8FF;
}

body.live-sales-body .sbo-record-sale__dialog header h3 .sbo-record-sale__icon--title svg {
    width: 20px;
    height: 20px;
}

body.live-sales-body .sbo-record-sale__dialog header button {
    width: 34px;
    height: 34px;
    border: 0 !important;
    border-radius: 50%;
    color: #8a94a6 !important;
    background: #F1F5F9 !important;
}

body.live-sales-body .sbo-record-sale__dialog header button:hover {
    background: #E8EDF3 !important;
    color: #334155 !important;
}

body.live-sales-body .sbo-record-sale__customer-dialog {
    width: min(100%, 420px);
    max-height: min(90vh, 580px);
    padding: 18px !important;
}

body.live-sales-body .sbo-record-sale__customer-search {
    min-height: 48px !important;
    margin-bottom: 14px !important;
    padding: 0 14px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body.live-sales-body .sbo-record-sale__customer-search:focus-within {
    border-color: #3366CC !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.live-sales-body .sbo-record-sale__customer-search > .sbo-record-sale__icon,
body.live-sales-body .sbo-record-sale__customer-search > span {
    color: #94a3b8 !important;
    font-size: 18px !important;
    display: inline-grid;
    place-items: center;
    line-height: 0;
}

body.live-sales-body .sbo-record-sale__customer-search input {
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    color: #222 !important;
    background: transparent !important;
}

body.live-sales-body .sbo-record-sale__customer-search input::placeholder {
    color: #94a3b8;
}

body.live-sales-body .sbo-record-sale__customer-search i {
    border-top-color: #3366cc !important;
}

body.live-sales-body .sbo-record-sale__customer-list {
    gap: 10px !important;
}

body.live-sales-body .sbo-record-sale__customer-empty {
    margin: 28px 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-record-sale__customer-row {
    min-height: 68px !important;
    padding: 12px 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body.live-sales-body .sbo-record-sale__customer-row:hover,
body.live-sales-body .sbo-record-sale__customer-row.is-active {
    border-color: #C7D2FE !important;
    background: #F8FAFF !important;
    box-shadow: 0 0 0 1px rgba(51, 102, 204, 0.12);
}

body.live-sales-body .sbo-record-sale__customer-row i {
    width: 42px !important;
    height: 42px !important;
    color: #fff !important;
    background: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 12px !important;
}

body.live-sales-body .sbo-record-sale__customer-row strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__customer-row small {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.live-sales-body .sbo-record-sale__customer-row em small {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

body.live-sales-body .sbo-record-sale__customer-row em b {
    color: #3366cc !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-record-sale__customer-status {
    margin-top: 10px !important;
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.live-sales-body .sbo-record-sale__customer-dialog-footer {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #E8EDF3 !important;
}

body.live-sales-body .sbo-record-sale__customer-dialog-footer button,
body.live-sales-body .sbo-record-sale__dialog footer button {
    min-height: 48px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #475569 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.live-sales-body .sbo-record-sale__customer-dialog-footer button:hover,
body.live-sales-body .sbo-record-sale__dialog footer button:not(.is-primary):hover {
    border-color: #C7D2FE !important;
    background: #F8FAFF !important;
    color: #3366CC !important;
}

body.live-sales-body .sbo-record-sale__dialog footer button.is-primary {
    border: 0 !important;
    color: #fff !important;
    background: #3366cc !important;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24) !important;
}

body.live-sales-body .sbo-record-sale__dialog footer button.is-primary:hover {
    background: #2554b0 !important;
}

body.live-sales-body .sbo-record-sale__cashier-dialog {
    width: min(100%, 420px);
    padding: 18px !important;
    border-radius: 20px !important;
}

body.live-sales-body .sbo-record-sale__cashier-dialog header h3 .sbo-record-sale__icon--title {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E8F0FE;
    color: #3366CC !important;
    font-size: 0;
    border: 1px solid #E0E8FF;
}

body.live-sales-body .sbo-record-sale__cashier-dialog header h3 .sbo-record-sale__icon--title svg {
    width: 20px;
    height: 20px;
}

body.live-sales-body .sbo-record-sale__cashier-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

body.live-sales-body .sbo-record-sale__cashier-list button,
body.live-sales-body .sbo-record-sale__cashier-row {
    width: 100%;
    min-height: 64px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body.live-sales-body .sbo-record-sale__cashier-list button:hover,
body.live-sales-body .sbo-record-sale__cashier-row:hover,
body.live-sales-body .sbo-record-sale__cashier-list button.is-active,
body.live-sales-body .sbo-record-sale__cashier-row.is-active {
    border-color: #C7D2FE !important;
    background: #F8FAFF !important;
    box-shadow: 0 0 0 1px rgba(51, 102, 204, 0.12);
}

body.live-sales-body .sbo-record-sale__cashier-list i {
    width: 42px !important;
    height: 42px !important;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff !important;
    background: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 12px !important;
    font-style: normal;
}

body.live-sales-body .sbo-record-sale__cashier-list strong {
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    color: #222 !important;
}

body.live-sales-body .sbo-record-sale__cashier-chevron {
    color: #94a3b8 !important;
    font-size: 14px;
}

body.live-sales-body .sbo-record-sale__amount-summary {
    background: #f3f4f6 !important;
    border-radius: 14px !important;
}

body.live-sales-body .sbo-record-sale__confirm-summary {
    background: #f3f4f6 !important;
    border-radius: 14px !important;
}

body.live-sales-body .sbo-record-sale__confirm-summary dd[data-rs-confirm-cashier] {
    color: #3366cc !important;
}

@media (max-width: 1366px) {
    body.live-sales-body .sbo-record-sale__confirm-summary dt,
    body.live-sales-body .sbo-record-sale__confirm-summary dd {
        font-size: 16px !important;
    }
}

body.live-sales-body .sbo-record-sale__money.is-large {
    border-color: #3366cc !important;
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-record-sale__customer-search input,
    body.live-sales-body .sbo-record-sale__customer-row strong,
    body.live-sales-body .sbo-record-sale__customer-dialog-footer button,
    body.live-sales-body .sbo-record-sale__dialog footer button,
    body.live-sales-body .sbo-record-sale__cashier-list strong {
        font-size: 16px !important;
    }
}

/* ===== Live Sales: Sale Detail (Transaction) modal ? blue theme + modern icons ===== */
body.live-sales-body .sbo-sale-detail__backdrop {
    background: rgba(15, 30, 55, 0.48) !important;
    backdrop-filter: blur(4px);
}

body.live-sales-body .sbo-sale-detail__dialog {
    border-radius: 20px !important;
    border: 1px solid #E0E8FF !important;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22) !important;
    max-height: min(92vh, 760px);
    max-height: min(92dvh, 760px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-sale-detail {
        padding: 12px;
        align-items: center;
    }

    body.live-sales-body .sbo-sale-detail__dialog {
        width: 100%;
        max-height: min(94vh, 94dvh);
    }
}

body.live-sales-body .sbo-sale-detail__hero {
    display: block !important;
    position: relative;
    padding: 20px 18px 18px !important;
    background:
        linear-gradient(180deg, #eef3ff 0%, #f7f9fd 72%, #ffffff 100%) !important;
    border-bottom: 1px solid #E8EDF3;
}

body.live-sales-body .sbo-sale-detail__hero-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-right: 44px;
    min-width: 0;
}

body.live-sales-body .sbo-sale-detail__hero small {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 4px 10px;
    border-radius: 999px;
    color: #3366CC !important;
    background: rgba(51, 102, 204, 0.1);
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

body.live-sales-body .sbo-sale-detail__hero strong {
    display: block !important;
    margin: 2px 0 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-extrabold, var(--sb-font-bold)) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
}

body.live-sales-body .sbo-sale-detail__hero strong em {
    font-style: normal !important;
    font-family: inherit !important;
}

body.live-sales-body .sbo-sale-detail__hero p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.live-sales-body .sbo-sale-detail__badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 0 !important;
}

body.live-sales-body .sbo-sale-detail__badges em {
    min-height: 26px;
    padding: 5px 12px !important;
    display: inline-flex !important;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-style: normal !important;
    white-space: nowrap;
}

body.live-sales-body .sbo-sale-detail__badges .is-status,
body.live-sales-body .sbo-sale-detail__badges .is-synced {
    color: #2554B0 !important;
    background: #E8F0FE !important;
    border-color: #D0E0FF !important;
}

body.live-sales-body .sbo-sale-detail__badges .is-edited {
    color: #B45309 !important;
    background: #FFF7ED !important;
    border-color: #FED7AA !important;
}

body.live-sales-body .sbo-sale-detail__badges .is-voided {
    color: #DC2626 !important;
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
}

body.live-sales-body .sbo-sale-detail__badges .is-pay.is-cash {
    color: #047857 !important;
    background: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}

body.live-sales-body .sbo-sale-detail__badges .is-pay.is-mpesa {
    color: #047857 !important;
    background: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}

body.live-sales-body .sbo-sale-detail__badges .is-pay.is-card {
    color: #2554B0 !important;
    background: #E8F0FE !important;
    border-color: #D0E0FF !important;
}

body.live-sales-body .sbo-sale-detail__badges .is-pay.is-other {
    color: #475569 !important;
    background: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

body.live-sales-body .sbo-sale-detail__close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 2;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center;
    border: 0 !important;
    border-radius: 50% !important;
    color: #64748B !important;
    background: #F1F5F9 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
}

body.live-sales-body .sbo-sale-detail__close svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.live-sales-body .sbo-sale-detail__close:hover {
    color: #334155 !important;
    background: #E8EDF3 !important;
}

body.live-sales-body .sbo-sale-detail__icon {
    display: inline-grid !important;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    color: #3366cc !important;
    font-size: inherit !important;
    line-height: 0 !important;
}

body.live-sales-body .sbo-sale-detail__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.live-sales-body .sbo-sale-detail__people article {
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

body.live-sales-body .sbo-sale-detail__people .sbo-sale-detail__icon {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 6px !important;
    border-radius: 8px;
    background: #e8f0fe;
    color: #3366cc !important;
}

body.live-sales-body .sbo-sale-detail__people .sbo-sale-detail__icon svg {
    width: 15px;
    height: 15px;
}

body.live-sales-body .sbo-sale-detail__people span:not(.sbo-sale-detail__icon) {
    display: none !important;
}

body.live-sales-body .sbo-sale-detail__people small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-medium) !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.live-sales-body .sbo-sale-detail__people strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-sale-detail__items-card {
    margin-top: 12px !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.live-sales-body .sbo-sale-detail__items-card > h3,
body.live-sales-body .sbo-sale-detail__receipt > h3 {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

@media (max-width: 1366px) {
    body.live-sales-body .sbo-sale-detail__items-card > h3,
    body.live-sales-body .sbo-sale-detail__receipt > h3 {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-sale-detail__totals > div.is-total,
    body.live-sales-body .sbo-sale-detail__totals > div.is-total span,
    body.live-sales-body .sbo-sale-detail__totals > div.is-total b {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-sale-detail__item span,
    body.live-sales-body .sbo-sale-detail__item strong,
    body.live-sales-body .sbo-sale-detail__totals > div:not(.is-total),
    body.live-sales-body .sbo-sale-detail__totals > div:not(.is-total) span,
    body.live-sales-body .sbo-sale-detail__totals > div:not(.is-total) b,
    body.live-sales-body .sbo-sale-detail__payrow span,
    body.live-sales-body .sbo-sale-detail__payrow span b,
    body.live-sales-body .sbo-sale-detail__payrow small,
    body.live-sales-body .sbo-sale-detail__receipt button,
    body.live-sales-body .sbo-sale-detail__badges em,
    body.live-sales-body .sbo-sale-detail__actions button {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-sale-detail__badges em {
        font-family: var(--sb-font-medium) !important;
        font-weight: normal !important;
    }
}

body.live-sales-body .sbo-sale-detail__item i {
    color: #2554b0 !important;
    background: #e8f0fe !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-sale-detail__item span {
    color: #222 !important;
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-sale-detail__item span {
        font-size: 16px !important;
    }
}

body.live-sales-body .sbo-sale-detail__item span small {
    color: #8a94a6 !important;
}

body.live-sales-body .sbo-sale-detail__item strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-sale-detail__totals {
    border-top-color: #e2e8f0 !important;
}

body.live-sales-body .sbo-sale-detail__totals > div {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-sale-detail__totals > div {
        font-size: 16px !important;
    }
}

body.live-sales-body .sbo-sale-detail__totals > div.is-total {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-sale-detail__payrow {
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

body.live-sales-body .sbo-sale-detail__payrow span {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.live-sales-body .sbo-sale-detail__payrow span b {
    font-size: 14px !important;
}

body.live-sales-body .sbo-sale-detail__payrow .sbo-sale-detail__icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px;
    background: #e8f0fe;
    color: #3366cc !important;
}

body.live-sales-body .sbo-sale-detail__payrow .sbo-sale-detail__icon svg {
    width: 15px;
    height: 15px;
}

body.live-sales-body .sbo-sale-detail__payrow small {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.live-sales-body .sbo-sale-detail__note {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

body.live-sales-body .sbo-sale-detail__note > h3 {
    margin: 0 0 8px;
    color: #8a94a6 !important;
    font: 11px var(--sb-font-semibold) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.live-sales-body .sbo-sale-detail__note > p {
    margin: 0;
    color: #222 !important;
    font-size: 14px !important;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

body.live-sales-body .sbo-sale-detail__receipt {
    margin-top: 16px;
}

body.live-sales-body .sbo-sale-detail__receipt > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
}

body.live-sales-body .sbo-sale-detail__receipt button {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #222 !important;
    font-family: var(--sb-font-medium) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

body.live-sales-body .sbo-sale-detail__receipt button:not(:disabled):hover {
    border-color: #bfdbfe !important;
    background: #f5f8ff !important;
    color: #2563eb !important;
}

body.live-sales-body .sbo-sale-detail__receipt button:disabled {
    color: #5b6475 !important;
    background: #fff !important;
    border-color: #e2e8f0 !important;
    opacity: 0.55 !important;
    cursor: not-allowed;
}

body.live-sales-body .sbo-sale-detail__receipt button .sbo-sale-detail__icon,
body.live-sales-body .sbo-sale-detail__receipt button span.sbo-sale-detail__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #e8f0fe !important;
    color: #3366cc !important;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0 !important;
}

body.live-sales-body .sbo-sale-detail__receipt button .sbo-sale-detail__icon svg {
    width: 18px !important;
    height: 18px !important;
}

@media (max-width: 1366px) {
    body.live-sales-body .sbo-sale-detail__receipt button {
        font-family: var(--sb-font-medium) !important;
        font-size: 16px !important;
        font-weight: normal !important;
    }
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-sale-detail__receipt > div {
        gap: 8px !important;
    }

    body.live-sales-body .sbo-sale-detail__receipt button {
        min-height: 72px !important;
        padding: 10px 6px !important;
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-sale-detail__receipt button .sbo-sale-detail__icon,
    body.live-sales-body .sbo-sale-detail__receipt button span.sbo-sale-detail__icon {
        width: 34px !important;
        height: 34px !important;
    }
}

body.live-sales-body .sbo-sale-detail__actions button {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px !important;
    background: #fff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

body.live-sales-body .sbo-sale-detail__actions button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

body.live-sales-body .sbo-sale-detail__actions .is-void {
    border: 1.5px solid #2563EB !important;
    color: #2563EB !important;
}

body.live-sales-body .sbo-sale-detail__actions .is-void .sbo-sale-detail__icon {
    color: #3366cc !important;
}

body.live-sales-body .sbo-sale-detail__actions .is-refund {
    border: 1.5px solid #2563EB !important;
    color: #2563EB !important;
}

body.live-sales-body .sbo-sale-detail__actions .is-refund .sbo-sale-detail__icon {
    color: #3366cc !important;
}

body.live-sales-body .sbo-sale-detail__loading {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

@media (max-width: 767px) {
    body.live-sales-body .sbo-sale-detail__hero strong {
        font-size: 26px !important;
    }

    body.live-sales-body .sbo-sale-detail__hero small {
        font-size: 12px !important;
    }

    body.live-sales-body .sbo-sale-detail__people small {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-sale-detail__items-card > h3,
    body.live-sales-body .sbo-sale-detail__receipt > h3 {
        font-size: 18px !important;
    }

    body.live-sales-body .sbo-sale-detail__people strong {
        font-size: 14px !important;
    }

    body.live-sales-body .sbo-sale-detail__item span,
    body.live-sales-body .sbo-sale-detail__item strong,
    body.live-sales-body .sbo-sale-detail__totals > div:not(.is-total),
    body.live-sales-body .sbo-sale-detail__totals > div:not(.is-total) span,
    body.live-sales-body .sbo-sale-detail__totals > div:not(.is-total) b,
    body.live-sales-body .sbo-sale-detail__payrow span,
    body.live-sales-body .sbo-sale-detail__payrow span b,
    body.live-sales-body .sbo-sale-detail__payrow small,
    body.live-sales-body .sbo-sale-detail__receipt button,
    body.live-sales-body .sbo-sale-detail__actions button {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-sale-detail__hero {
        padding: 22px 20px 20px !important;
    }

    body.live-sales-body .sbo-sale-detail__hero strong {
        font-size: 32px !important;
    }

    body.live-sales-body .sbo-sale-detail__hero p {
        font-size: 15px !important;
    }

    body.live-sales-body .sbo-sale-detail__badges em {
        font-size: 16px !important;
        min-height: 28px;
        padding: 6px 12px !important;
    }
}

/* ---------- Advanced Filters modal ? match dashboard blue theme ---------- */
body.live-sales-body .sbo-adv-filters {
    padding: 20px;
    z-index: 1600;
}

body.live-sales-body .sbo-adv-filters__backdrop {
    background: rgba(15, 30, 55, 0.48) !important;
    backdrop-filter: blur(4px);
}

body.live-sales-body .sbo-adv-filters__dialog {
    width: min(420px, 100%) !important;
    border-radius: 20px !important;
    border: 1px solid #E0E8FF;
    background: #fff;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22) !important;
    overflow: hidden;
}

body.live-sales-body .sbo-adv-filters__header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: start;
    gap: 12px;
    padding: 18px 18px 10px !important;
}

body.live-sales-body .sbo-adv-filters__title-icon {
    width: 44px !important;
    height: 44px !important;
    display: grid;
    place-items: center;
    border-radius: 50% !important;
    flex-shrink: 0;
    color: #3366CC !important;
    background: #E8F0FE !important;
}

body.live-sales-body .sbo-adv-filters__title-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

body.live-sales-body .sbo-adv-filters__title {
    display: block !important;
    min-width: 0;
}

body.live-sales-body .sbo-adv-filters__title h2 {
    margin: 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}

body.live-sales-body .sbo-adv-filters__title p {
    margin: 4px 0 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.live-sales-body .sbo-adv-filters__close {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #8a94a6 !important;
    font-size: 0 !important;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
}

body.live-sales-body .sbo-adv-filters__close:hover {
    background: #E8EDF3 !important;
    color: #334155 !important;
}

body.live-sales-body .sbo-adv-filters__close svg {
    width: 16px;
    height: 16px;
    display: block;
}

body.live-sales-body .sbo-adv-filters__body {
    padding: 4px 18px 8px !important;
}

body.live-sales-body .sbo-adv-filters__section {
    margin-bottom: 18px;
}

body.live-sales-body .sbo-adv-filters__section h3 {
    margin: 0 0 10px !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.live-sales-body .sbo-adv-filters__void-icon {
    display: inline-grid;
    place-items: center;
    color: #EF4444 !important;
    font-size: 0 !important;
}

body.live-sales-body .sbo-adv-filters__void-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

body.live-sales-body .sbo-adv-filters__chips {
    gap: 8px;
}

body.live-sales-body .sbo-adv-filters__chip {
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #475569 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

body.live-sales-body .sbo-adv-filters__chip:hover {
    border-color: #C7D2FE !important;
    color: #3366CC !important;
    background: #F8FAFF !important;
}

body.live-sales-body .sbo-adv-filters__chip.is-active {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
}

body.live-sales-body .sbo-adv-filters__chip.is-void.is-active {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.live-sales-body .sbo-adv-filters__chip.is-staff.is-active {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
}

body.live-sales-body .sbo-adv-filters__range {
    gap: 10px;
}

body.live-sales-body .sbo-adv-filters__range span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
}

body.live-sales-body .sbo-adv-filters__range input {
    height: 44px !important;
    padding: 0 12px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    outline: 0;
    box-shadow: none !important;
}

body.live-sales-body .sbo-adv-filters__range input::placeholder {
    color: #94A3B8;
}

body.live-sales-body .sbo-adv-filters__range input:focus {
    border-color: #3366CC !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.live-sales-body .sbo-adv-filters__footer {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 18px 18px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff;
}

body.live-sales-body .sbo-adv-filters__reset,
body.live-sales-body .sbo-adv-filters__apply {
    min-height: 48px !important;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    cursor: pointer;
    box-shadow: none !important;
}

body.live-sales-body .sbo-adv-filters__reset {
    border: 1.5px solid #E0E8FF !important;
    background: #fff !important;
    color: #475569 !important;
}

body.live-sales-body .sbo-adv-filters__reset:hover {
    border-color: #C7D2FE !important;
    background: #F8FAFF !important;
    color: #3366CC !important;
}

body.live-sales-body .sbo-adv-filters__apply {
    border: 0 !important;
    background: #3366CC !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24) !important;
}

body.live-sales-body .sbo-adv-filters__apply:hover {
    background: #2554B0 !important;
    filter: none !important;
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-adv-filters__reset,
    body.live-sales-body .sbo-adv-filters__apply {
        font-size: 18px !important;
    }
}

@media (max-width: 420px) {
    body.live-sales-body .sbo-adv-filters {
        padding: 10px 10px 14px;
        align-items: end;
    }

    body.live-sales-body .sbo-adv-filters__dialog {
        width: 100% !important;
        border-radius: 20px 20px 14px 14px !important;
    }
}

/* ==========================================================================
   Live Sales — Day Closure detail modal (TOTAL DAY SALES blue theme)
   ========================================================================== */

body.live-sales-body .sbo-day-closure__dialog {
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22) !important;
}

body.live-sales-body .sbo-day-closure__total {
    background: linear-gradient(135deg, #3366CC 0%, #2554B0 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(51, 102, 204, 0.28);
}

body.live-sales-body .sbo-day-closure__avatar.is-teal,
body.live-sales-body .sbo-day-closure__avatar.is-navy {
    background: #3366CC !important;
}

body.live-sales-body .sbo-day-closure__people {
    background: #F8FAFF !important;
    border: 1px solid #E0E8FF;
}

body.live-sales-body .sbo-day-closure__payments article {
    border-color: #E0E8FF !important;
}

body.live-sales-body .sbo-day-closure__footer .is-print,
body.live-sales-body .sbo-day-closure__footer .is-export {
    border-color: #E0E8FF !important;
    color: #3366CC !important;
}

body.live-sales-body .sbo-day-closure__footer .is-print:hover,
body.live-sales-body .sbo-day-closure__footer .is-export:hover {
    background: #F8FAFF !important;
    border-color: #C7D2FE !important;
}

body.live-sales-body .sbo-day-closure__footer .is-finalize {
    background: #3366CC !important;
    border-color: #3366CC !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24);
}

body.live-sales-body .sbo-day-closure__footer .is-finalize:hover {
    background: #2554B0 !important;
    border-color: #2554B0 !important;
}

/* Day Closure modal — font sizes match Sale Detail / other Live Sales modals */
body.live-sales-body .sbo-day-closure__eyebrow small {
    font-size: 12px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-day-closure__badge {
    font-size: 12px !important;
}

body.live-sales-body .sbo-day-closure__intro h2 {
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    color: #222 !important;
}

body.live-sales-body .sbo-day-closure__intro p {
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
    color: #8a94a6 !important;
}

body.live-sales-body .sbo-day-closure__person small,
body.live-sales-body .sbo-day-closure__txns small {
    font-size: 14px !important;
    font-family: var(--sb-font-regular) !important;
}

body.live-sales-body .sbo-day-closure__person strong,
body.live-sales-body .sbo-day-closure__txns strong {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    color: #222 !important;
}

body.live-sales-body .sbo-day-closure__total small {
    font-size: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    letter-spacing: 0.06em;
}

body.live-sales-body .sbo-day-closure__total strong {
    font-size: 24px !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.live-sales-body .sbo-day-closure__payments span {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    color: #222 !important;
}

body.live-sales-body .sbo-day-closure__payments strong {
    font-size: 16px !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    color: #222 !important;
}

body.live-sales-body .sbo-day-closure__variance-row small,
body.live-sales-body .sbo-day-closure__variance-result small {
    font-size: 12px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-day-closure__variance-row strong,
body.live-sales-body .sbo-day-closure__variance-result strong {
    font-size: 16px !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.live-sales-body .sbo-day-closure__variants-head {
    font-size: 12px !important;
    font-family: var(--sb-font-semibold) !important;
}

body.live-sales-body .sbo-day-closure__variant span,
body.live-sales-body .sbo-day-closure__variant b,
body.live-sales-body .sbo-day-closure__variant strong {
    font-size: 14px !important;
}

body.live-sales-body .sbo-day-closure__variant span {
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.live-sales-body .sbo-day-closure__variant b,
body.live-sales-body .sbo-day-closure__variant strong {
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.live-sales-body .sbo-day-closure__warning p {
    font-size: 14px !important;
}

body.live-sales-body .sbo-day-closure__footer button,
body.live-sales-body .sbo-day-closure__footer a {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

@media (max-width: 1366px) {
    body.live-sales-body .sbo-day-closure__person strong,
    body.live-sales-body .sbo-day-closure__txns strong,
    body.live-sales-body .sbo-day-closure__payments span,
    body.live-sales-body .sbo-day-closure__payments strong,
    body.live-sales-body .sbo-day-closure__variance-row strong,
    body.live-sales-body .sbo-day-closure__variance-result strong,
    body.live-sales-body .sbo-day-closure__variant span,
    body.live-sales-body .sbo-day-closure__variant b,
    body.live-sales-body .sbo-day-closure__variant strong,
    body.live-sales-body .sbo-day-closure__footer button,
    body.live-sales-body .sbo-day-closure__footer a {
        font-size: 16px !important;
    }

    body.live-sales-body .sbo-day-closure__total strong {
        font-size: 26px !important;
    }
}

@media (min-width: 768px) {
    body.live-sales-body .sbo-day-closure__footer button,
    body.live-sales-body .sbo-day-closure__footer a {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Business Reports ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.business-reports-body.sbo-dashboard-body h1,
body.business-reports-body.sbo-dashboard-body h2,
body.business-reports-body.sbo-dashboard-body h3,
body.business-reports-body.sbo-dashboard-body h4,
body.business-reports-body .business-reports-ui .business-reports-header__title,
body.business-reports-body .business-reports-ui .sbo-reports-header h1,
body.business-reports-body .business-reports-header h1,
body.business-reports-body .business-reports-header__title,
body.sbo-dashboard-body.business-reports-body .business-reports-ui h1.business-reports-header__title,
body.business-reports-body .business-reports-ui .sbo-reports-section__title h2,
body.business-reports-body .sbo-reports-section__title h2,
body.business-reports-body .business-reports-ui .business-reports-period h2,
body.business-reports-body .business-reports-period h2,
body.business-reports-body .sbo-custom-range__header h2,
body.business-reports-body .sbo-report-modal__header h2,
body.business-reports-body .sbo-report-modal h2,
body.business-reports-body .sbo-report-modal h3,
body.business-reports-body .sbo-report-modal__section,
body.business-reports-body .sbo-custom-range h2 {
    font-size: 18px !important;
}

/* Match Dashboard section heading font + color (#222222 / sb-font-bold) */
body.business-reports-body .business-reports-ui .sbo-reports-section__title h2,
body.business-reports-body .sbo-reports-section__title h2,
body.business-reports-body .business-reports-ui .business-reports-period h2,
body.business-reports-body .business-reports-period h2,
body.business-reports-body .sbo-report-modal__body h2,
body.business-reports-body .sbo-report-modal__body h3,
body.business-reports-body .sbo-report-modal__section {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body.sbo-dashboard-body h1,
    body.business-reports-body.sbo-dashboard-body h2,
    body.business-reports-body.sbo-dashboard-body h3,
    body.business-reports-body.sbo-dashboard-body h4,
    body.business-reports-body .business-reports-ui .business-reports-header__title,
    body.business-reports-body .business-reports-ui .sbo-reports-header h1,
    body.business-reports-body .business-reports-header h1,
    body.business-reports-body .business-reports-header__title,
    body.sbo-dashboard-body.business-reports-body .business-reports-ui h1.business-reports-header__title,
    body.business-reports-body .business-reports-ui .sbo-reports-section__title h2,
    body.business-reports-body .sbo-reports-section__title h2,
    body.business-reports-body .business-reports-ui .business-reports-period h2,
    body.business-reports-body .business-reports-period h2,
    body.business-reports-body .sbo-custom-range__header h2,
    body.business-reports-body .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal h2,
    body.business-reports-body .sbo-report-modal h3,
    body.business-reports-body .sbo-report-modal__section,
    body.business-reports-body .sbo-custom-range h2 {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body.sbo-dashboard-body h1,
    body.business-reports-body.sbo-dashboard-body h2,
    body.business-reports-body.sbo-dashboard-body h3,
    body.business-reports-body.sbo-dashboard-body h4,
    body.business-reports-body .business-reports-ui .business-reports-header__title,
    body.business-reports-body .business-reports-ui .sbo-reports-header h1,
    body.business-reports-body .business-reports-header h1,
    body.business-reports-body .business-reports-header__title,
    body.sbo-dashboard-body.business-reports-body .business-reports-ui h1.business-reports-header__title,
    body.business-reports-body .business-reports-ui .sbo-reports-section__title h2,
    body.business-reports-body .sbo-reports-section__title h2,
    body.business-reports-body .business-reports-ui .business-reports-period h2,
    body.business-reports-body .business-reports-period h2,
    body.business-reports-body .sbo-custom-range__header h2,
    body.business-reports-body .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal h2,
    body.business-reports-body .sbo-report-modal h3,
    body.business-reports-body .sbo-report-modal__section,
    body.business-reports-body .sbo-custom-range h2 {
        font-size: 22px !important;
    }
}


/* ==========================================================================
   Business Reports ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.business-reports-body,
body.business-reports-body .business-reports-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.business-reports-body .business-reports-header__subtitle,
body.business-reports-body .business-reports-ui .sbo-reports-header p,
body.business-reports-body .business-reports-ui .business-reports-branch,
body.business-reports-body .business-reports-ui .sbo-reports-branch,
body.business-reports-body .business-reports-ui .sbo-reports-periods button,
body.business-reports-body .business-reports-ui .sbo-reports-periods button small,
body.business-reports-body .business-reports-ui .sbo-reports-profit__top small,
body.business-reports-body .business-reports-ui .sbo-reports-profit__top a,
body.business-reports-body .business-reports-ui .sbo-reports-profit > p,
body.business-reports-body .business-reports-ui .sbo-reports-profit__legend,
body.business-reports-body .business-reports-ui .sbo-reports-card small,
body.business-reports-body .business-reports-ui .sbo-reports-card p,
body.business-reports-body .business-reports-ui .sbo-reports-card > span,
body.business-reports-body .business-reports-ui .sbo-reports-card > em,
body.business-reports-body .business-reports-ui .sbo-reports-row small,
body.business-reports-body .business-reports-ui .sbo-reports-row em,
body.business-reports-body .business-reports-ui .sbo-reports-loader p,
body.business-reports-body .sbo-custom-range__header p,
body.business-reports-body .sbo-report-modal__header p,
body.business-reports-body .sbo-custom-range__label,
body.business-reports-body .sbo-custom-range__field > span,
body.business-reports-body .sbo-custom-range__presets button,
body.business-reports-body .sbo-custom-range__divider,
body.business-reports-body .sbo-custom-range__summary,
body.business-reports-body .sbo-custom-range__summary span,
body.business-reports-body .sbo-custom-range__input span,
body.business-reports-body .sbo-pnl-hero small,
body.business-reports-body .sbo-pnl-hero p,
body.business-reports-body .sbo-pnl-side small,
body.business-reports-body .sbo-pnl-calc,
body.business-reports-body .sbo-pnl-calc span,
body.business-reports-body .sbo-expense-break small,
body.business-reports-body .sbo-pay-hero small,
body.business-reports-body .sbo-exp-hero small,
body.business-reports-body .sbo-vat-hero small,
body.business-reports-body .sbo-comm-hero small,
body.business-reports-body .sbo-credit-hero small,
body.business-reports-body .sbo-pay-chart > small,
body.business-reports-body .sbo-pay-chart__bars span,
body.business-reports-body .sbo-pay-chart__legend,
body.business-reports-body .sbo-vat-item > small,
body.business-reports-body .sbo-vat-item em,
body.business-reports-body .sbo-exp-ratio > div,
body.business-reports-body .sbo-exp-ratio small,
body.business-reports-body .sbo-report-empty,
body.business-reports-body .sbo-report-note,
body.business-reports-body .sbo-report-note p,
body.business-reports-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Body / UI actions */
body.business-reports-body .business-reports-header__export,
body.business-reports-body .business-reports-ui .sbo-reports-export,
body.business-reports-body .business-reports-ui .sbo-reports-periods button strong,
body.business-reports-body .business-reports-ui .sbo-reports-share a,
body.business-reports-body .sbo-custom-range__cancel,
body.business-reports-body .sbo-report-modal__secondary,
body.business-reports-body .sbo-report-modal__primary,
body.business-reports-body .sbo-pnl-side strong,
body.business-reports-body .sbo-expense-break strong,
body.business-reports-body .sbo-pay-method strong,
body.business-reports-body .sbo-exp-row strong,
body.business-reports-body .sbo-vat-item strong,
body.business-reports-body .sbo-comm-row strong,
body.business-reports-body .sbo-credit-row strong,
body.business-reports-body .sbo-seller-row strong {
    font-size: 14px !important;
}

body.business-reports-body .sbo-custom-range__apply {
    font-size: 15px !important;
}

/* Mid emphasis */
body.business-reports-body .business-reports-ui .sbo-reports-row strong,
body.business-reports-body .sbo-reports-row strong,
body.business-reports-body .sbo-pnl-side b,
body.business-reports-body .sbo-pnl-calc strong,
body.business-reports-body .sbo-expense-break b,
body.business-reports-body .sbo-pay-method b,
body.business-reports-body .sbo-exp-row b,
body.business-reports-body .sbo-vat-item b,
body.business-reports-body .sbo-comm-row b,
body.business-reports-body .sbo-credit-row b,
body.business-reports-body .sbo-seller-row b,
body.business-reports-body .sbo-bottom-nav a span,
body.business-reports-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Card amounts */
body.business-reports-body .business-reports-ui .sbo-reports-card strong {
    font-size: 20px !important;
}

/* Modal hero amounts */
body.business-reports-body .sbo-pay-hero strong,
body.business-reports-body .sbo-exp-hero strong,
body.business-reports-body .sbo-vat-hero strong,
body.business-reports-body .sbo-comm-hero strong,
body.business-reports-body .sbo-credit-hero strong {
    font-size: 24px !important;
}

/* Large hero amounts */
body.business-reports-body .business-reports-ui .sbo-reports-profit > strong,
body.business-reports-body .sbo-pnl-hero strong {
    font-size: 28px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body,
    body.business-reports-body .business-reports-ui {
        font-size: 15px !important;
    }

    body.business-reports-body .business-reports-header__subtitle,
    body.business-reports-body .business-reports-ui .sbo-reports-header p,
    body.business-reports-body .business-reports-ui .business-reports-branch,
    body.business-reports-body .business-reports-ui .sbo-reports-branch,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button small,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__top small,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__top a,
    body.business-reports-body .business-reports-ui .sbo-reports-profit > p,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__legend,
    body.business-reports-body .business-reports-ui .sbo-reports-card small,
    body.business-reports-body .business-reports-ui .sbo-reports-card p,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span,
    body.business-reports-body .business-reports-ui .sbo-reports-card > em,
    body.business-reports-body .business-reports-ui .sbo-reports-row small,
    body.business-reports-body .business-reports-ui .sbo-reports-row em,
    body.business-reports-body .business-reports-ui .sbo-reports-loader p,
    body.business-reports-body .sbo-custom-range__header p,
    body.business-reports-body .sbo-report-modal__header p,
    body.business-reports-body .sbo-custom-range__label,
    body.business-reports-body .sbo-custom-range__field > span,
    body.business-reports-body .sbo-custom-range__presets button,
    body.business-reports-body .sbo-custom-range__divider,
    body.business-reports-body .sbo-custom-range__summary,
    body.business-reports-body .sbo-custom-range__summary span,
    body.business-reports-body .sbo-custom-range__input span,
    body.business-reports-body .sbo-pnl-hero small,
    body.business-reports-body .sbo-pnl-hero p,
    body.business-reports-body .sbo-pnl-side small,
    body.business-reports-body .sbo-pnl-calc,
    body.business-reports-body .sbo-pnl-calc span,
    body.business-reports-body .sbo-expense-break small,
    body.business-reports-body .sbo-pay-hero small,
    body.business-reports-body .sbo-exp-hero small,
    body.business-reports-body .sbo-vat-hero small,
    body.business-reports-body .sbo-comm-hero small,
    body.business-reports-body .sbo-credit-hero small,
    body.business-reports-body .sbo-pay-chart > small,
    body.business-reports-body .sbo-pay-chart__bars span,
    body.business-reports-body .sbo-pay-chart__legend,
    body.business-reports-body .sbo-vat-item > small,
    body.business-reports-body .sbo-vat-item em,
    body.business-reports-body .sbo-exp-ratio > div,
    body.business-reports-body .sbo-exp-ratio small,
    body.business-reports-body .sbo-report-empty,
    body.business-reports-body .sbo-report-note,
    body.business-reports-body .sbo-report-note p,
    body.business-reports-body .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.business-reports-body .business-reports-header__export,
    body.business-reports-body .business-reports-ui .sbo-reports-export,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button strong,
    body.business-reports-body .business-reports-ui .sbo-reports-share a,
    body.business-reports-body .sbo-custom-range__cancel,
    body.business-reports-body .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal__primary,
    body.business-reports-body .sbo-pnl-side strong,
    body.business-reports-body .sbo-expense-break strong,
    body.business-reports-body .sbo-pay-method strong,
    body.business-reports-body .sbo-exp-row strong,
    body.business-reports-body .sbo-vat-item strong,
    body.business-reports-body .sbo-comm-row strong,
    body.business-reports-body .sbo-credit-row strong,
    body.business-reports-body .sbo-seller-row strong {
        font-size: 15px !important;
    }

    body.business-reports-body .sbo-custom-range__apply {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-row strong,
    body.business-reports-body .sbo-reports-row strong,
    body.business-reports-body .sbo-pnl-side b,
    body.business-reports-body .sbo-pnl-calc strong,
    body.business-reports-body .sbo-expense-break b,
    body.business-reports-body .sbo-pay-method b,
    body.business-reports-body .sbo-exp-row b,
    body.business-reports-body .sbo-vat-item b,
    body.business-reports-body .sbo-comm-row b,
    body.business-reports-body .sbo-credit-row b,
    body.business-reports-body .sbo-seller-row b,
    body.business-reports-body .sbo-bottom-nav a span,
    body.business-reports-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card strong {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-pay-hero strong,
    body.business-reports-body .sbo-exp-hero strong,
    body.business-reports-body .sbo-vat-hero strong,
    body.business-reports-body .sbo-comm-hero strong,
    body.business-reports-body .sbo-credit-hero strong {
        font-size: 26px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-profit > strong,
    body.business-reports-body .sbo-pnl-hero strong {
        font-size: 30px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body,
    body.business-reports-body .business-reports-ui {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-header__subtitle,
    body.business-reports-body .business-reports-ui .sbo-reports-header p,
    body.business-reports-body .business-reports-ui .business-reports-branch,
    body.business-reports-body .business-reports-ui .sbo-reports-branch,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button small,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__top small,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__top a,
    body.business-reports-body .business-reports-ui .sbo-reports-profit > p,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__legend,
    body.business-reports-body .business-reports-ui .sbo-reports-card small,
    body.business-reports-body .business-reports-ui .sbo-reports-card p,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span,
    body.business-reports-body .business-reports-ui .sbo-reports-card > em,
    body.business-reports-body .business-reports-ui .sbo-reports-row small,
    body.business-reports-body .business-reports-ui .sbo-reports-row em,
    body.business-reports-body .business-reports-ui .sbo-reports-loader p,
    body.business-reports-body .sbo-custom-range__header p,
    body.business-reports-body .sbo-report-modal__header p,
    body.business-reports-body .sbo-custom-range__label,
    body.business-reports-body .sbo-custom-range__field > span,
    body.business-reports-body .sbo-custom-range__presets button,
    body.business-reports-body .sbo-custom-range__divider,
    body.business-reports-body .sbo-custom-range__summary,
    body.business-reports-body .sbo-custom-range__summary span,
    body.business-reports-body .sbo-custom-range__input span,
    body.business-reports-body .sbo-pnl-hero small,
    body.business-reports-body .sbo-pnl-hero p,
    body.business-reports-body .sbo-pnl-side small,
    body.business-reports-body .sbo-pnl-calc,
    body.business-reports-body .sbo-pnl-calc span,
    body.business-reports-body .sbo-expense-break small,
    body.business-reports-body .sbo-pay-hero small,
    body.business-reports-body .sbo-exp-hero small,
    body.business-reports-body .sbo-vat-hero small,
    body.business-reports-body .sbo-comm-hero small,
    body.business-reports-body .sbo-credit-hero small,
    body.business-reports-body .sbo-pay-chart > small,
    body.business-reports-body .sbo-pay-chart__bars span,
    body.business-reports-body .sbo-pay-chart__legend,
    body.business-reports-body .sbo-vat-item > small,
    body.business-reports-body .sbo-vat-item em,
    body.business-reports-body .sbo-exp-ratio > div,
    body.business-reports-body .sbo-exp-ratio small,
    body.business-reports-body .sbo-report-empty,
    body.business-reports-body .sbo-report-note,
    body.business-reports-body .sbo-report-note p,
    body.business-reports-body .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-header__export,
    body.business-reports-body .business-reports-ui .sbo-reports-export,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button strong,
    body.business-reports-body .business-reports-ui .sbo-reports-share a,
    body.business-reports-body .sbo-custom-range__cancel,
    body.business-reports-body .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal__primary,
    body.business-reports-body .sbo-pnl-side strong,
    body.business-reports-body .sbo-expense-break strong,
    body.business-reports-body .sbo-pay-method strong,
    body.business-reports-body .sbo-exp-row strong,
    body.business-reports-body .sbo-vat-item strong,
    body.business-reports-body .sbo-comm-row strong,
    body.business-reports-body .sbo-credit-row strong,
    body.business-reports-body .sbo-seller-row strong {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-custom-range__apply {
        font-size: 17px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-row strong,
    body.business-reports-body .sbo-reports-row strong,
    body.business-reports-body .sbo-pnl-side b,
    body.business-reports-body .sbo-pnl-calc strong,
    body.business-reports-body .sbo-expense-break b,
    body.business-reports-body .sbo-pay-method b,
    body.business-reports-body .sbo-exp-row b,
    body.business-reports-body .sbo-vat-item b,
    body.business-reports-body .sbo-comm-row b,
    body.business-reports-body .sbo-credit-row b,
    body.business-reports-body .sbo-seller-row b,
    body.business-reports-body .sbo-bottom-nav a span,
    body.business-reports-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card strong {
        font-size: 24px !important;
    }

    body.business-reports-body .sbo-pay-hero strong,
    body.business-reports-body .sbo-exp-hero strong,
    body.business-reports-body .sbo-vat-hero strong,
    body.business-reports-body .sbo-comm-hero strong,
    body.business-reports-body .sbo-credit-hero strong {
        font-size: 28px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-profit > strong,
    body.business-reports-body .sbo-pnl-hero strong {
        font-size: 32px !important;
    }
}

/* Match sbo-expense-summary card font sizes only */
body.business-reports-body .business-reports-ui .sbo-reports-card small {
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    color: #222222 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card strong {
    font-size: 20px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-card p,
body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon) {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.business-reports-body .business-reports-ui .sbo-reports-card small {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card strong {
        font-size: 24px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-card p,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon) {
        font-size: 16px !important;
    }
}

/* Share buttons ? mobile 16px | tablet & desktop 18px */
body.business-reports-body .business-reports-ui .sbo-reports-share a {
    font-size: 16px !important;
}

body.business-reports-body .business-reports-ui .sbo-reports-share a svg {
    width: 16px !important;
    height: 16px !important;
}

@media (min-width: 768px) {
    body.business-reports-body .business-reports-ui .sbo-reports-share a {
        font-size: 18px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-share a svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* Period buttons ? mobile 16px | tablet & desktop 18px */
body.business-reports-body .business-reports-ui .sbo-reports-periods button,
body.business-reports-body .business-reports-ui .sbo-reports-periods button strong {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.business-reports-body .business-reports-ui .sbo-reports-periods button,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button strong {
        font-size: 18px !important;
    }
}

/* Share buttons ? fix cramped layout below 406px: stack one under the other */
@media (max-width: 406px) {
    body.business-reports-body .business-reports-ui .sbo-reports-share {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-share a {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        gap: 8px !important;
        border-radius: 15px !important;
        white-space: nowrap !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-share a svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
}

/* Business Reports ? all former 14px text ? 16px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.business-reports-body,
    body.business-reports-body .business-reports-ui {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-header__subtitle,
    body.business-reports-body .business-reports-ui .sbo-reports-header p,
    body.business-reports-body .business-reports-ui .business-reports-branch,
    body.business-reports-body .business-reports-ui .sbo-reports-branch,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__top small,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__top a,
    body.business-reports-body .business-reports-ui .sbo-reports-profit > p,
    body.business-reports-body .business-reports-ui .sbo-reports-profit__legend,
    body.business-reports-body .business-reports-ui .sbo-reports-card small,
    body.business-reports-body .business-reports-ui .sbo-reports-card p,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span,
    body.business-reports-body .business-reports-ui .sbo-reports-card > span:not(.sbo-reports-card__icon),
    body.business-reports-body .business-reports-ui .sbo-reports-card > em,
    body.business-reports-body .business-reports-ui .sbo-reports-row small,
    body.business-reports-body .business-reports-ui .sbo-reports-row em,
    body.business-reports-body .business-reports-ui .sbo-reports-loader p,
    body.business-reports-body .sbo-custom-range__header p,
    body.business-reports-body .sbo-report-modal__header p,
    body.business-reports-body .sbo-custom-range__label,
    body.business-reports-body .sbo-custom-range__field > span,
    body.business-reports-body .sbo-custom-range__presets button,
    body.business-reports-body .sbo-custom-range__divider,
    body.business-reports-body .sbo-custom-range__summary,
    body.business-reports-body .sbo-custom-range__summary span,
    body.business-reports-body .sbo-custom-range__input span,
    body.business-reports-body .sbo-pnl-hero small,
    body.business-reports-body .sbo-pnl-hero p,
    body.business-reports-body .sbo-pnl-side small,
    body.business-reports-body .sbo-pnl-calc,
    body.business-reports-body .sbo-pnl-calc span,
    body.business-reports-body .sbo-expense-break small,
    body.business-reports-body .sbo-pay-hero small,
    body.business-reports-body .sbo-exp-hero small,
    body.business-reports-body .sbo-vat-hero small,
    body.business-reports-body .sbo-comm-hero small,
    body.business-reports-body .sbo-credit-hero small,
    body.business-reports-body .sbo-pay-chart > small,
    body.business-reports-body .sbo-pay-chart__bars span,
    body.business-reports-body .sbo-pay-chart__legend,
    body.business-reports-body .sbo-vat-item > small,
    body.business-reports-body .sbo-vat-item em,
    body.business-reports-body .sbo-exp-ratio > div,
    body.business-reports-body .sbo-exp-ratio small,
    body.business-reports-body .sbo-report-empty,
    body.business-reports-body .sbo-report-note,
    body.business-reports-body .sbo-report-note p,
    body.business-reports-body .sbo-bottom-nav a,
    body.business-reports-body .business-reports-header__export,
    body.business-reports-body .business-reports-ui .sbo-reports-export,
    body.business-reports-body .sbo-custom-range__cancel,
    body.business-reports-body .sbo-custom-range__apply,
    body.business-reports-body .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal__primary,
    body.business-reports-body .sbo-pnl-side strong,
    body.business-reports-body .sbo-expense-break strong,
    body.business-reports-body .sbo-pay-method strong,
    body.business-reports-body .sbo-exp-row strong,
    body.business-reports-body .sbo-vat-item strong,
    body.business-reports-body .sbo-comm-row strong,
    body.business-reports-body .sbo-credit-row strong,
    body.business-reports-body .sbo-seller-row strong,
    body.business-reports-body .business-reports-ui small,
    body.business-reports-body .business-reports-ui .sbo-reports-periods button small,
    body.business-reports-body .sbo-report-modal small {
        font-size: 16px !important;
    }

    body.business-reports-body .business-reports-ui .sbo-reports-row strong,
    body.business-reports-body .sbo-reports-row strong {
        font-size: 18px !important;
    }
}


/* ==========================================================================
   Business Reports ? Custom Date Range popup (theme + icons + fonts)
   Page-scoped via body.business-reports-body. Font-size only scales by screen.
   ========================================================================== */

body.business-reports-body .sbo-custom-range {
    --br-blue: #3366cc;
    --br-blue-deep: #2554b0;
    --br-text: #1e293b;
    --br-muted: #8a94a6;
    --br-line: #e8edf3;
    --br-border: #E0E8FF;
}

body.business-reports-body .sbo-custom-range__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px);
}

body.business-reports-body .sbo-custom-range__dialog {
    width: min(440px, calc(100% - 24px)) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-custom-range__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 16px 14px !important;
    background: #36C !important;
    color: #fff !important;
}

body.business-reports-body .sbo-custom-range__title {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-width: 0 !important;
}

body.business-reports-body .sbo-custom-range__icon {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-custom-range__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.business-reports-body .sbo-custom-range__header h2,
body.business-reports-body .sbo-custom-range h2#custom-range-title {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

body.business-reports-body .sbo-custom-range__header p {
    margin: 4px 0 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-custom-range__close {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 160ms ease;
}

body.business-reports-body .sbo-custom-range__close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.business-reports-body .sbo-custom-range__close svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-custom-range__body {
    padding: 16px !important;
}

body.business-reports-body .sbo-custom-range__label {
    margin: 0 0 10px !important;
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.business-reports-body .sbo-custom-range__presets {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

body.business-reports-body .sbo-custom-range__presets button {
    min-height: 42px !important;
    padding: 8px 6px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

body.business-reports-body .sbo-custom-range__presets button:hover {
    border-color: #BFDBFE !important;
    background: #F8FAFF !important;
    color: #2554b0 !important;
}

body.business-reports-body .sbo-custom-range__presets button.is-active {
    border-color: #36C !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-custom-range__divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 0 14px !important;
    color: #94a3b8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-custom-range__divider span {
    font-size: inherit !important;
    white-space: nowrap !important;
}

body.business-reports-body .sbo-custom-range__divider::before,
body.business-reports-body .sbo-custom-range__divider::after {
    background: #E8EDF3 !important;
}

body.business-reports-body .sbo-custom-range__field {
    display: block !important;
    margin-bottom: 12px !important;
}

body.business-reports-body .sbo-custom-range__field > span {
    display: block !important;
    margin-bottom: 6px !important;
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.business-reports-body .sbo-custom-range__input {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 40px !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 4px 0 14px !important;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, background 160ms ease;
    cursor: pointer !important;
}

body.business-reports-body .sbo-custom-range__input:focus-within {
    border-color: #36C !important;
    background: #fff !important;
}

body.business-reports-body .sbo-custom-range__input > span {
    position: relative !important;
    z-index: 1 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    letter-spacing: 0.01em !important;
    pointer-events: none !important;
}

body.business-reports-body .sbo-custom-range__input input[type="date"] {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 40px !important;
    bottom: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.011 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    cursor: pointer !important;
    z-index: 2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.business-reports-body .sbo-custom-range__input button {
    position: relative !important;
    z-index: 3 !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #3366cc !important;
    font-size: 0 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-custom-range__input button:hover {
    background: #E8F0FE !important;
}

body.business-reports-body .sbo-custom-range__input button svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

body.business-reports-body .sbo-custom-range__summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 4px !important;
    padding: 12px 14px !important;
    border: 1px solid #A7F3D0 !important;
    border-radius: 12px !important;
    background: #E7F8F1 !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-custom-range__summary > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: #047857 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-custom-range__summary i {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #059669 !important;
    font-size: 0 !important;
    font-style: normal !important;
}

body.business-reports-body .sbo-custom-range__summary i svg {
    display: block;
    width: 15px;
    height: 15px;
}

body.business-reports-body .sbo-custom-range__summary b {
    color: #065f46 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-custom-range__summary small {
    flex-shrink: 0 !important;
    color: #64748b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-custom-range__footer {
    padding: 0 16px 16px !important;
    display: grid !important;
    gap: 10px !important;
}

body.business-reports-body .sbo-custom-range__apply {
    min-height: 50px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
    cursor: pointer !important;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body.business-reports-body .sbo-custom-range__apply:hover {
    background: #2554b0 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.28) !important;
}

body.business-reports-body .sbo-custom-range__apply > span {
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-custom-range__apply svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.business-reports-body .sbo-custom-range__cancel {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-custom-range__cancel:hover {
    background: #F8FAFF !important;
    border-color: #BFDBFE !important;
}

/* Responsive fonts ? Custom Date Range popup */
@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body .sbo-custom-range__header h2,
    body.business-reports-body .sbo-custom-range h2#custom-range-title {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-custom-range__header p,
    body.business-reports-body .sbo-custom-range__label,
    body.business-reports-body .sbo-custom-range__field > span,
    body.business-reports-body .sbo-custom-range__presets button,
    body.business-reports-body .sbo-custom-range__divider,
    body.business-reports-body .sbo-custom-range__summary > span,
    body.business-reports-body .sbo-custom-range__summary b,
    body.business-reports-body .sbo-custom-range__summary small,
    body.business-reports-body .sbo-custom-range__cancel {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-custom-range__input > span {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-custom-range__apply {
        font-size: 16px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body .sbo-custom-range__header h2,
    body.business-reports-body .sbo-custom-range h2#custom-range-title {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-custom-range__header p,
    body.business-reports-body .sbo-custom-range__label,
    body.business-reports-body .sbo-custom-range__field > span,
    body.business-reports-body .sbo-custom-range__presets button,
    body.business-reports-body .sbo-custom-range__divider,
    body.business-reports-body .sbo-custom-range__summary > span,
    body.business-reports-body .sbo-custom-range__summary b,
    body.business-reports-body .sbo-custom-range__summary small,
    body.business-reports-body .sbo-custom-range__cancel {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-custom-range__input > span {
        font-size: 17px !important;
    }

    body.business-reports-body .sbo-custom-range__apply {
        font-size: 17px !important;
    }
}

@media (max-width: 520px) {
    body.business-reports-body .sbo-custom-range__presets {
        grid-template-columns: 1fr !important;
    }

    body.business-reports-body .sbo-custom-range__presets button {
        min-height: 44px !important;
    }

    body.business-reports-body .sbo-custom-range__header {
        padding: 14px !important;
    }

    body.business-reports-body .sbo-custom-range__icon {
        width: 38px !important;
        height: 38px !important;
    }
}


/* ==========================================================================
   Business Reports ? Profit & Loss popup (theme + icons + fonts)
   Page-scoped via body.business-reports-body
   ========================================================================== */

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px);
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__dialog {
    width: min(460px, calc(100% - 24px)) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header {
    display: grid !important;
    grid-template-columns: 42px 1fr 36px !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #36C !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header h2 {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header p {
    margin: 4px 0 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__close {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__close svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #F8FAFC !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero {
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero.is-profit {
    background: linear-gradient(145deg, #10B981 0%, #059669 100%) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero.is-loss {
    background: linear-gradient(145deg, #EF4444 0%, #DC2626 100%) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero small svg {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero strong {
    display: block !important;
    margin: 8px 0 4px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side {
    margin: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side > div > span {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side > div > span svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side.is-in > div > span {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side.is-out > div > span {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side small {
    display: block !important;
    margin-top: 2px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side b {
    flex-shrink: 0 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side.is-in b {
    color: #059669 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side.is-out b {
    color: #DC2626 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 1px solid #E8EDF3 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc span {
    color: #647084 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc strong {
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc .is-green {
    color: #059669 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc .is-red {
    color: #DC2626 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__section {
    margin: 4px 0 0 !important;
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break__icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break > div > div {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break b {
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break > i {
    display: block !important;
    height: 8px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break > i em {
    display: block !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: #F87171 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break small {
    display: block !important;
    margin-top: 8px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-empty {
    margin: 0 !important;
    padding: 20px 12px !important;
    text-align: center !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note.is-amber {
    background: #FFF7ED !important;
    border: 1px solid #FED7AA !important;
    color: #9A3412 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note > span {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #FFEDD5 !important;
    color: #EA580C !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note > span svg {
    display: block;
    width: 15px;
    height: 15px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note p {
    margin: 0 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__footer {
    padding: 12px 16px 16px !important;
    display: grid !important;
    gap: 10px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__primary {
    min-height: 50px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__primary:hover {
    background: #2554b0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__primary svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__secondary {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__secondary:hover {
    background: #F8FAFF !important;
    border-color: #BFDBFE !important;
}

/* Responsive fonts ? P&L popup */
@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header h2 {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero p,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side small,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc span,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__section,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break b,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break small,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side b,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__primary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero strong {
        font-size: 30px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header h2 {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero p,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side small,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc span,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__section,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break b,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-expense-break small,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-side b,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-calc strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-report-modal__primary {
        font-size: 17px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="pnl"] .sbo-pnl-hero strong {
        font-size: 32px !important;
    }
}


/* ==========================================================================
   Business Reports ? How Customers Paid popup (theme + icons + fonts)
   Page-scoped via body.business-reports-body
   ========================================================================== */

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px);
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__dialog {
    width: min(460px, calc(100% - 24px)) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header {
    display: grid !important;
    grid-template-columns: 42px 1fr 36px !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #36C !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header h2 {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header p {
    margin: 4px 0 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__close {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__close svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #F8FAFC !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero {
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #3366cc 0%, #2554b0 100%) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero small {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero strong {
    display: block !important;
    margin-top: 6px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 24px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart > small {
    display: block !important;
    margin-bottom: 10px !important;
    color: #647084 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__bars {
    height: 100px !important;
    gap: 12px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__bars b {
    max-width: 26px !important;
    border-radius: 8px 8px 4px 4px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__bars span {
    color: #647084 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__legend {
    margin-top: 12px !important;
    gap: 12px !important;
    color: #647084 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__legend i {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method__icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: var(--pay-soft, #E8F0FE) !important;
    color: var(--pay-color, #3366cc) !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method > div > div {
    flex: 1 !important;
    min-width: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method small {
    display: block !important;
    margin-top: 2px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method b {
    flex-shrink: 0 !important;
    color: var(--pay-color, #3366cc) !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method > i {
    display: block !important;
    height: 8px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method > i em {
    display: block !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: var(--pay-color, #3366cc) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note.is-blue {
    background: #E8F0FE !important;
    border: 1px solid #BFDBFE !important;
    color: #1e40af !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note > span {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #DBEAFE !important;
    color: #2563eb !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note > span svg {
    display: block;
    width: 15px;
    height: 15px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note p {
    margin: 0 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__footer {
    padding: 12px 16px 16px !important;
    display: grid !important;
    gap: 10px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__primary {
    min-height: 50px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__primary:hover {
    background: #2554b0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__primary svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__secondary {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__secondary:hover {
    background: #F8FAFF !important;
    border-color: #BFDBFE !important;
}

/* Responsive fonts ? How Customers Paid popup */
@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header h2 {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart > small,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__bars span,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__legend,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method small,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method b,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__primary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero strong {
        font-size: 26px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header h2 {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart > small,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__bars span,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-chart__legend,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method small,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method b,
    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-report-modal__primary {
        font-size: 17px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-hero strong {
        font-size: 28px !important;
    }
}


/* ==========================================================================
   Business Reports ? Expense Categories popup (theme + icons + fonts)
   Page-scoped via body.business-reports-body
   ========================================================================== */

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px);
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__dialog {
    width: min(460px, calc(100% - 24px)) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header {
    display: grid !important;
    grid-template-columns: 42px 1fr 36px !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #36C !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header h2 {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header p {
    margin: 4px 0 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__close {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__close svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #F8FAFC !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero {
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #EF4444 0%, #DC2626 100%) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero small {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero strong {
    display: block !important;
    margin-top: 6px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 24px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div span {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div b {
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > i {
    display: block !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > i em {
    display: block !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: #F87171 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio small {
    display: block !important;
    margin-top: 8px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row__icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row > div > div {
    flex: 1 !important;
    min-width: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row small {
    display: block !important;
    margin-top: 2px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row b {
    flex-shrink: 0 !important;
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row > i {
    display: block !important;
    height: 8px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row > i em {
    display: block !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: #F87171 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-empty {
    margin: 0 !important;
    padding: 20px 12px !important;
    text-align: center !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note.is-pink {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #9F1239 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note > span {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note > span svg {
    display: block;
    width: 15px;
    height: 15px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note p {
    margin: 0 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note strong {
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__footer {
    padding: 12px 16px 16px !important;
    display: grid !important;
    gap: 10px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__primary {
    min-height: 50px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__primary:hover {
    background: #2554b0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__primary svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__secondary {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__secondary:hover {
    background: #F8FAFF !important;
    border-color: #BFDBFE !important;
}

/* Responsive fonts ? Expense Categories popup */
@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header h2 {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div span,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio small,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row small,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div b,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row b,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__primary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero strong {
        font-size: 26px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header h2 {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div span,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio small,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row small,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-ratio > div b,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-row b,
    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-report-modal__primary {
        font-size: 17px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="expenses"] .sbo-exp-hero strong {
        font-size: 28px !important;
    }
}

/* ==========================================================================
   Business Reports ??? Top Sellers / VAT / Commissions / Credit popups
   Shared chrome + modal-specific accents (page-scoped)
   ========================================================================== */

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__backdrop,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__backdrop,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__backdrop,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px);
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__dialog,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__dialog,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__dialog,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__dialog {
    width: min(500px, calc(100% - 24px)) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header {
    display: grid !important;
    grid-template-columns: 42px 1fr 36px !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #36C !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__icon,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__icon,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__icon,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__icon svg,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__icon svg,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__icon svg,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header h2,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header h2,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header h2,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header h2 {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header p,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header p,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header p,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header p {
    margin: 4px 0 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__close,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__close,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__close,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__close {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-size: 0 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__close svg,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__close svg,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__close svg,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__close svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__body,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__body,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__body,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #F8FAFC !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__footer,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__footer,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__footer,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__footer {
    padding: 12px 16px 16px !important;
    display: grid !important;
    gap: 10px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__primary,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__primary,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__primary,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary {
    min-height: 50px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__primary svg,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__primary svg,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__primary svg,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__secondary,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__secondary,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__secondary,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__secondary {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-empty,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-empty,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-empty,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-empty {
    margin: 0 !important;
    padding: 20px 12px !important;
    text-align: center !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    border: 1px dashed #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row {
    margin: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row > b {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366cc !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row small {
    display: block !important;
    margin-top: 2px !important;
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row em {
    font-style: normal !important;
    color: #3366cc !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero {
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #10B981 0%, #059669 100%) !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero small,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero small,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero small {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero strong,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero strong,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero strong {
    display: block !important;
    margin-top: 6px !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 24px !important;
    font-weight: normal !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #DCFCE7 !important;
    color: #059669 !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item em {
    display: inline-block !important;
    margin-top: 4px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #DCFCE7 !important;
    color: #059669 !important;
    font-style: normal !important;
    font-size: 12px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item b {
    color: #059669 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item small {
    display: block !important;
    margin-top: 8px !important;
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero {
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #3366cc 0%, #2554b0 100%) !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top > span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366cc !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top small,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__earned small {
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__earned b {
    color: #3366cc !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__math {
    margin-top: 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    border: 1px solid #E8EDF3 !important;
    font-size: 16px !important;
    color: #647084 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__math em {
    color: #3366cc !important;
    font-style: normal !important;
    font-family: var(--sb-font-semibold) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row > i {
    height: 8px !important;
    margin-top: 10px !important;
    background: #F1F5F9 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row > i em {
    background: #3366cc !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero {
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(90deg, #4568DC 0%, #5C7CFA 52%, #7B6CF0 100%) !important;
    color: #fff !important;
    overflow: hidden !important;
    position: relative !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets {
    margin: 0 !important;
    gap: 8px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets article {
    padding: 12px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #E0E8FF !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets small {
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets strong {
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    color: #1e293b !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets span {
    font-size: 13px !important;
    color: #8a94a6 !important;
}

/* Credit buckets ? tablet & desktop only: +2px (mobile stays same) */
@media (min-width: 768px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets small {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets strong {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets span {
        font-size: 15px !important;
    }
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-overdue { border-color: #FECACA !important; }
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-overdue small { color: #DC2626 !important; }
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-pending { border-color: #BFDBFE !important; }
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-pending small { color: #2563eb !important; }
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-partial { border-color: #FDE68A !important; }
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-partial small { color: #D97706 !important; }

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row > span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #FFEDD5 !important;
    color: #EA580C !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row small {
    color: #8a94a6 !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row__meta b {
    color: #EA580C !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note > span,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note > span,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note > span {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    font-size: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note > span svg,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note > span svg,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note > span svg {
    display: block;
    width: 15px;
    height: 15px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note.is-green {
    background: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #166534 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note.is-green > span {
    background: #DCFCE7 !important;
    color: #059669 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note.is-blue,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note.is-purple {
    background: #E8F0FE !important;
    border: 1px solid #BFDBFE !important;
    color: #1e40af !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note.is-blue > span,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note.is-purple > span {
    background: #DBEAFE !important;
    color: #2563eb !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note.is-danger {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #9F1239 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note.is-danger > span {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note p,
body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note strong,
body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note p,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header h2 {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row small,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item small,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top small,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__math,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row small,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row em,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item b,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__earned b,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row__meta b,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__primary,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__primary,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero strong {
        font-size: 26px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header h2 {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row small,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item small,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__top small,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__math,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero small,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row small,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note p,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-empty,
    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="sellers"] .sbo-seller-row em,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-item b,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-row__earned b,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row__meta b,
    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-report-modal__primary,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-report-modal__primary,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary {
        font-size: 17px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="vat"] .sbo-vat-hero strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="commissions"] .sbo-comm-hero strong,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero strong {
        font-size: 28px !important;
    }
}

/* Business Reports ? all popup former 14px text ? 16px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    body.business-reports-body .sbo-custom-range__header p,
    body.business-reports-body .sbo-custom-range__label,
    body.business-reports-body .sbo-custom-range__field > span,
    body.business-reports-body .sbo-custom-range__presets button,
    body.business-reports-body .sbo-custom-range__divider,
    body.business-reports-body .sbo-custom-range__summary > span,
    body.business-reports-body .sbo-custom-range__summary b,
    body.business-reports-body .sbo-custom-range__summary small,
    body.business-reports-body .sbo-custom-range__cancel,
    body.business-reports-body .sbo-report-modal .sbo-report-modal__header p,
    body.business-reports-body .sbo-report-modal .sbo-report-modal__section,
    body.business-reports-body .sbo-report-modal .sbo-report-modal__secondary,
    body.business-reports-body .sbo-report-modal .sbo-report-empty,
    body.business-reports-body .sbo-report-modal .sbo-report-note,
    body.business-reports-body .sbo-report-modal .sbo-report-note p,
    body.business-reports-body .sbo-report-modal .sbo-pnl-hero small,
    body.business-reports-body .sbo-report-modal .sbo-pnl-hero p,
    body.business-reports-body .sbo-report-modal .sbo-pnl-side strong,
    body.business-reports-body .sbo-report-modal .sbo-pnl-side small,
    body.business-reports-body .sbo-report-modal .sbo-pnl-calc span,
    body.business-reports-body .sbo-report-modal .sbo-expense-break strong,
    body.business-reports-body .sbo-report-modal .sbo-expense-break b,
    body.business-reports-body .sbo-report-modal .sbo-expense-break small,
    body.business-reports-body .sbo-report-modal .sbo-pay-hero small,
    body.business-reports-body .sbo-report-modal .sbo-pay-chart > small,
    body.business-reports-body .sbo-report-modal .sbo-pay-chart__bars span,
    body.business-reports-body .sbo-report-modal .sbo-pay-chart__legend,
    body.business-reports-body .sbo-report-modal .sbo-pay-method small,
    body.business-reports-body .sbo-report-modal .sbo-exp-hero small,
    body.business-reports-body .sbo-report-modal .sbo-exp-ratio > div span,
    body.business-reports-body .sbo-report-modal .sbo-exp-ratio small,
    body.business-reports-body .sbo-report-modal .sbo-exp-row strong,
    body.business-reports-body .sbo-report-modal .sbo-exp-row small,
    body.business-reports-body .sbo-report-modal .sbo-seller-row strong,
    body.business-reports-body .sbo-report-modal .sbo-seller-row small,
    body.business-reports-body .sbo-report-modal .sbo-seller-row > b,
    body.business-reports-body .sbo-report-modal .sbo-vat-hero small,
    body.business-reports-body .sbo-report-modal .sbo-vat-item strong,
    body.business-reports-body .sbo-report-modal .sbo-vat-item small,
    body.business-reports-body .sbo-report-modal .sbo-comm-hero small,
    body.business-reports-body .sbo-report-modal .sbo-comm-row__top strong,
    body.business-reports-body .sbo-report-modal .sbo-comm-row__top small,
    body.business-reports-body .sbo-report-modal .sbo-comm-row__earned small,
    body.business-reports-body .sbo-report-modal .sbo-comm-row__math,
    body.business-reports-body .sbo-report-modal .sbo-credit-hero small,
    body.business-reports-body .sbo-report-modal .sbo-credit-row strong,
    body.business-reports-body .sbo-report-modal .sbo-credit-row small,
    body.business-reports-body .sbo-report-modal .sbo-credit-buckets small {
        font-size: 16px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="payments"] .sbo-pay-method strong,
    body.business-reports-body .sbo-report-modal .sbo-pay-method strong {
        font-size: 18px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets small,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets span,
    body.business-reports-body .sbo-report-modal .sbo-credit-buckets small,
    body.business-reports-body .sbo-report-modal .sbo-credit-buckets span {
        font-size: 16px !important;
    }
}

/* Business Reports ? all popup text =16px on mobile */
@media (max-width: 767px) {
    body.business-reports-body .sbo-custom-range,
    body.business-reports-body .sbo-custom-range p,
    body.business-reports-body .sbo-custom-range span,
    body.business-reports-body .sbo-custom-range small,
    body.business-reports-body .sbo-custom-range label,
    body.business-reports-body .sbo-custom-range strong,
    body.business-reports-body .sbo-custom-range b,
    body.business-reports-body .sbo-custom-range em,
    body.business-reports-body .sbo-custom-range button,
    body.business-reports-body .sbo-custom-range a,
    body.business-reports-body .sbo-custom-range input,
    body.business-reports-body .sbo-report-modal,
    body.business-reports-body .sbo-report-modal p,
    body.business-reports-body .sbo-report-modal span,
    body.business-reports-body .sbo-report-modal small,
    body.business-reports-body .sbo-report-modal label,
    body.business-reports-body .sbo-report-modal strong,
    body.business-reports-body .sbo-report-modal b,
    body.business-reports-body .sbo-report-modal em,
    body.business-reports-body .sbo-report-modal button,
    body.business-reports-body .sbo-report-modal a,
    body.business-reports-body .sbo-report-modal article,
    body.business-reports-body .sbo-report-modal div {
        font-size: 16px !important;
    }

    /* Keep icons/close controls icon-sized */
    body.business-reports-body .sbo-custom-range__icon,
    body.business-reports-body .sbo-custom-range__close,
    body.business-reports-body .sbo-custom-range [aria-hidden="true"],
    body.business-reports-body .sbo-report-modal__icon,
    body.business-reports-body .sbo-report-modal__close,
    body.business-reports-body .sbo-report-modal [aria-hidden="true"],
    body.business-reports-body .sbo-report-modal .sbo-pay-method__icon,
    body.business-reports-body .sbo-report-modal .sbo-pay-method > i,
    body.business-reports-body .sbo-report-modal .sbo-expense-break > i,
    body.business-reports-body .sbo-report-modal .sbo-exp-row > i,
    body.business-reports-body .sbo-report-modal .sbo-exp-ratio > i,
    body.business-reports-body .sbo-report-modal .sbo-comm-row > i {
        font-size: 0 !important;
    }

    /* Keep titles & hero amounts larger than body text */
    body.business-reports-body .sbo-custom-range__header h2,
    body.business-reports-body .sbo-custom-range h2,
    body.business-reports-body .sbo-report-modal__header h2,
    body.business-reports-body .sbo-report-modal h2,
    body.business-reports-body .sbo-report-modal h3,
    body.business-reports-body .sbo-report-modal__section {
        font-size: 18px !important;
    }

    body.business-reports-body .sbo-report-modal .sbo-pnl-hero strong,
    body.business-reports-body .sbo-report-modal .sbo-pay-hero strong,
    body.business-reports-body .sbo-report-modal .sbo-exp-hero strong,
    body.business-reports-body .sbo-report-modal .sbo-vat-hero strong,
    body.business-reports-body .sbo-report-modal .sbo-comm-hero strong,
    body.business-reports-body .sbo-report-modal .sbo-credit-hero strong {
        font-size: 24px !important;
    }

    body.business-reports-body .sbo-report-modal .sbo-credit-buckets strong,
    body.business-reports-body .sbo-report-modal .sbo-pay-method strong {
        font-size: 18px !important;
    }

    /* Credit buckets: keep 3 cards inside the modal (no horizontal scroll) */
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__dialog,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets article {
        min-width: 0 !important;
        padding: 10px 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets small,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets span {
        font-size: 11px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets strong {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
}

/* Business Reports ? all popup headers: icon top-aligned with title text */
body.business-reports-body .sbo-report-modal .sbo-report-modal__header,
body.business-reports-body .sbo-report-modal[data-report-modal] .sbo-report-modal__header {
    align-items: start !important;
}

body.business-reports-body .sbo-report-modal .sbo-report-modal__icon,
body.business-reports-body .sbo-report-modal[data-report-modal] .sbo-report-modal__icon {
    align-self: start !important;
    margin-top: 0 !important;
}

body.business-reports-body .sbo-report-modal .sbo-report-modal__close,
body.business-reports-body .sbo-report-modal[data-report-modal] .sbo-report-modal__close {
    align-self: start !important;
}

body.business-reports-body .sbo-custom-range__header,
body.business-reports-body .sbo-custom-range__title {
    align-items: flex-start !important;
}

body.business-reports-body .sbo-custom-range__icon,
body.business-reports-body .sbo-custom-range__close {
    align-self: flex-start !important;
}


/* ==========================================================================
   More ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.more-body.sbo-dashboard-body h1,
body.more-body.sbo-dashboard-body h2,
body.more-body.sbo-dashboard-body h3,
body.more-body.sbo-dashboard-body h4,
body.more-body .more-ui .more-header__title,
body.more-body .more-ui .sbo-more-header h1,
body.more-body .more-header h1,
body.more-body .more-header__title,
body.sbo-dashboard-body.more-body .more-ui h1.more-header__title,
body.more-body .sbo-owner-pin-modal__dialog h2,
body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
body.more-body .more-pin-modal h2,
body.more-body .more-ui .sbo-menu-heading.more-menu-heading strong,
body.more-body .more-ui .more-menu-heading strong {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.more-body.sbo-dashboard-body h1,
    body.more-body.sbo-dashboard-body h2,
    body.more-body.sbo-dashboard-body h3,
    body.more-body.sbo-dashboard-body h4,
    body.more-body .more-ui .more-header__title,
    body.more-body .more-ui .sbo-more-header h1,
    body.more-body .more-header h1,
    body.more-body .more-header__title,
    body.sbo-dashboard-body.more-body .more-ui h1.more-header__title,
    body.more-body .sbo-owner-pin-modal__dialog h2,
    body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
    body.more-body .more-pin-modal h2,
    body.more-body .more-ui .sbo-menu-heading.more-menu-heading strong,
    body.more-body .more-ui .more-menu-heading strong {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.more-body.sbo-dashboard-body h1,
    body.more-body.sbo-dashboard-body h2,
    body.more-body.sbo-dashboard-body h3,
    body.more-body.sbo-dashboard-body h4,
    body.more-body .more-ui .more-header__title,
    body.more-body .more-ui .sbo-more-header h1,
    body.more-body .more-header h1,
    body.more-body .more-header__title,
    body.sbo-dashboard-body.more-body .more-ui h1.more-header__title,
    body.more-body .sbo-owner-pin-modal__dialog h2,
    body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
    body.more-body .more-pin-modal h2,
    body.more-body .more-ui .sbo-menu-heading.more-menu-heading strong,
    body.more-body .more-ui .more-menu-heading strong {
        font-size: 22px !important;
    }
}


/* ==========================================================================
   More ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the More heading block above.
   ========================================================================== */

body.more-body,
body.more-body .more-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.more-body .more-ui .more-header__subtitle,
body.more-body .more-ui .sbo-more-header p,
body.more-body .more-header p,
body.more-body .more-header__subtitle,
body.more-body .more-header__profile-copy small,
body.more-body .more-ui .sbo-more-profile small,
body.more-body .more-header__avatar.sbo-avatar,
body.more-body .more-ui .more-header__avatar,
body.more-body .more-ui .more-location,
body.more-body .more-ui .sbo-location-pill.more-location,
body.more-body .more-ui .more-location strong,
body.more-body .more-ui .more-location small,
body.more-body .more-plan-warning small,
body.more-body .more-ui .more-menu-heading small,
body.more-body .more-ui .sbo-menu-heading.more-menu-heading small,
body.more-body .more-ui .sbo-menu-copy small,
body.more-body .more-ui .sbo-menu-badge,
body.more-body .more-ui .sbo-menu-tag,
body.more-body .more-ui .more-footer p,
body.more-body .more-ui .more-footer p b,
body.more-body .more-ui .more-footer small,
body.more-body .more-ui .more-footer a,
body.more-body .more-ui .sbo-more-footer small,
body.more-body .more-ui .sbo-more-footer a,
body.more-body .more-ui .sbo-more-footer p,
body.more-body .more-ui .sbo-more-footer p b,
body.more-body .sbo-owner-pin-modal__dialog header p,
body.more-body .sbo-owner-pin-modal form > label,
body.more-body .sbo-owner-pin-input input,
body.more-body .sbo-owner-pin-modal form > small,
body.more-body .sbo-owner-pin-modal__errors,
body.more-body .sbo-owner-pin-modal__errors p,
body.more-body .sbo-owner-pin-modal small,
body.more-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Body / UI actions */
body.more-body .more-header__profile-copy strong,
body.more-body .more-ui .sbo-more-profile strong,
body.more-body .more-plan-warning strong,
body.more-body .sbo-owner-pin-submit {
    font-size: 14px !important;
}

/* Mid emphasis ? menu row titles + bottom nav labels */
body.more-body .more-ui .sbo-menu-copy strong,
body.more-body .sbo-bottom-nav a span,
body.more-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.more-body,
    body.more-body .more-ui {
        font-size: 15px !important;
    }

    body.more-body .more-ui .more-header__subtitle,
    body.more-body .more-ui .sbo-more-header p,
    body.more-body .more-header p,
    body.more-body .more-header__subtitle,
    body.more-body .more-header__profile-copy small,
    body.more-body .more-ui .sbo-more-profile small,
    body.more-body .more-header__avatar.sbo-avatar,
    body.more-body .more-ui .more-header__avatar,
    body.more-body .more-ui .more-location,
    body.more-body .more-ui .sbo-location-pill.more-location,
    body.more-body .more-ui .more-location strong,
    body.more-body .more-ui .more-location small,
    body.more-body .more-plan-warning small,
    body.more-body .more-ui .more-menu-heading small,
    body.more-body .more-ui .sbo-menu-heading.more-menu-heading small,
    body.more-body .more-ui .sbo-menu-copy small,
    body.more-body .more-ui .sbo-menu-badge,
    body.more-body .more-ui .sbo-menu-tag,
    body.more-body .more-ui .more-footer p,
    body.more-body .more-ui .more-footer p b,
    body.more-body .more-ui .more-footer small,
    body.more-body .more-ui .more-footer a,
    body.more-body .more-ui .sbo-more-footer small,
    body.more-body .more-ui .sbo-more-footer a,
    body.more-body .more-ui .sbo-more-footer p,
    body.more-body .more-ui .sbo-more-footer p b,
    body.more-body .sbo-owner-pin-modal__dialog header p,
    body.more-body .sbo-owner-pin-modal form > label,
    body.more-body .sbo-owner-pin-input input,
    body.more-body .sbo-owner-pin-modal form > small,
    body.more-body .sbo-owner-pin-modal__errors,
    body.more-body .sbo-owner-pin-modal__errors p,
    body.more-body .sbo-owner-pin-modal small,
    body.more-body .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.more-body .more-header__profile-copy strong,
    body.more-body .more-ui .sbo-more-profile strong,
    body.more-body .more-plan-warning strong,
    body.more-body .sbo-owner-pin-submit {
        font-size: 15px !important;
    }

    body.more-body .more-ui .sbo-menu-copy strong,
    body.more-body .sbo-bottom-nav a span,
    body.more-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }
}

@media (min-width: 1366px) {
    body.more-body,
    body.more-body .more-ui {
        font-size: 16px !important;
    }

    body.more-body .more-ui .more-header__subtitle,
    body.more-body .more-ui .sbo-more-header p,
    body.more-body .more-header p,
    body.more-body .more-header__subtitle,
    body.more-body .more-header__profile-copy small,
    body.more-body .more-ui .sbo-more-profile small,
    body.more-body .more-header__avatar.sbo-avatar,
    body.more-body .more-ui .more-header__avatar,
    body.more-body .more-ui .more-location,
    body.more-body .more-ui .sbo-location-pill.more-location,
    body.more-body .more-ui .more-location strong,
    body.more-body .more-ui .more-location small,
    body.more-body .more-plan-warning small,
    body.more-body .more-ui .more-menu-heading small,
    body.more-body .more-ui .sbo-menu-heading.more-menu-heading small,
    body.more-body .more-ui .sbo-menu-copy small,
    body.more-body .more-ui .sbo-menu-badge,
    body.more-body .more-ui .sbo-menu-tag,
    body.more-body .more-ui .more-footer p,
    body.more-body .more-ui .more-footer p b,
    body.more-body .more-ui .more-footer small,
    body.more-body .more-ui .more-footer a,
    body.more-body .more-ui .sbo-more-footer small,
    body.more-body .more-ui .sbo-more-footer a,
    body.more-body .more-ui .sbo-more-footer p,
    body.more-body .more-ui .sbo-more-footer p b,
    body.more-body .sbo-owner-pin-modal__dialog header p,
    body.more-body .sbo-owner-pin-modal form > label,
    body.more-body .sbo-owner-pin-input input,
    body.more-body .sbo-owner-pin-modal form > small,
    body.more-body .sbo-owner-pin-modal__errors,
    body.more-body .sbo-owner-pin-modal__errors p,
    body.more-body .sbo-owner-pin-modal small,
    body.more-body .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.more-body .more-header__profile-copy strong,
    body.more-body .more-ui .sbo-more-profile strong,
    body.more-body .more-plan-warning strong,
    body.more-body .sbo-owner-pin-submit {
        font-size: 16px !important;
    }

    body.more-body .more-ui .sbo-menu-copy strong,
    body.more-body .sbo-bottom-nav a span,
    body.more-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }
}

/* More ? menu row titles 18px on mobile + tablet (=1366px), page-scoped */
@media (max-width: 1366px) {
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-copy strong.more-menu-title {
        font-size: 16px !important;
    }

    body.more-body.more-fs-min-16 .more-ui .more-menu-heading small.more-menu-heading__sub,
    body.more-body.more-fs-min-16 .more-ui .sbo-menu-heading.more-menu-heading small.more-menu-heading__sub {
        font-size: 16px !important;
    }
}

/* More ? plan warning: icon top-aligned + text 16px (page-scoped) */
body.more-body.more-fs-min-16 .more-ui .more-plan-warning,
body.more-body.more-fs-min-16 .more-ui .sbo-plan-warning.more-plan-warning {
    align-items: flex-start !important;
}

body.more-body.more-fs-min-16 .more-ui .more-plan-warning__icon,
body.more-body.more-fs-min-16 .more-ui .more-plan-warning > span.more-plan-warning__icon {
    align-self: flex-start !important;
}

body.more-body.more-fs-min-16 .more-ui .more-plan-warning strong.more-plan-warning__title,
body.more-body.more-fs-min-16 .more-ui .more-plan-warning small.more-plan-warning__desc {
    font-size: 16px !important;
}

body.more-body.more-fs-min-16 .more-ui .more-plan-warning__chevron {
    align-self: center !important;
}


/* ==========================================================================
   More ? Change Owner PIN modal typography lock
   Keeps modal title / subtitle / hint matching other Sales Book popups
   after page-wide responsive text rules above.
   Mobile: 16px title | Tablet/Desktop: 18px title
   ========================================================================== */
body.more-body .sbo-owner-pin-modal__dialog h2,
body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
body.more-body .more-pin-modal h2,
body.more-body #owner-pin-modal-title {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: -0.01em !important;
}

body.more-body .sbo-owner-pin-modal__dialog header p,
body.more-body .sbo-owner-pin-modal__titles p,
body.more-body .sbo-owner-pin-modal.more-pin-modal .sbo-owner-pin-modal__titles p {
    color: #8A94A6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.more-body .sbo-owner-pin-modal form > small,
body.more-body .sbo-owner-pin-modal__hint,
body.more-body .sbo-owner-pin-modal small.sbo-owner-pin-modal__hint {
    font-family: var(--sb-font-regular) !important;
    font-size: 12px !important;
    font-weight: normal !important;
}

@media (min-width: 768px) {
    body.more-body .sbo-owner-pin-modal__dialog h2,
    body.more-body .sbo-owner-pin-modal.more-pin-modal h2,
    body.more-body .more-pin-modal h2,
    body.more-body #owner-pin-modal-title {
        font-size: 18px !important;
    }

    body.more-body .sbo-owner-pin-modal__dialog header p,
    body.more-body .sbo-owner-pin-modal__titles p {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   COMMISSIONS ? match expense-book / business-reports UI (commissions-ui)
   ========================================================================== */

body.commissions-body.sbo-dashboard-body,
body.sbo-dashboard-body.commissions-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.commissions-ui.sbo-dashboard,
.sbo-dashboard.commissions-ui {
    --cm-blue: #3366cc;
    --cm-blue-deep: #2554b0;
    --cm-blue-soft: #e8f0fe;
    --cm-green: #10b981;
    --cm-green-deep: #059669;
    --cm-green-soft: #e7f8f1;
    --cm-orange: #f59e0b;
    --cm-orange-soft: #fff7e8;
    --cm-coral: #ef626c;
    --cm-coral-soft: #fdecec;
    --cm-text: #1e293b;
    --cm-muted: #8a94a6;
    --cm-line: #e8edf3;
    --cm-card: #ffffff;
    --cm-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --cm-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --cm-radius: 15px;
    --cm-radius-sm: 12px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cm-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
}

body.commissions-body,
body.commissions-body .commissions-ui {
    font-size: 14px;
}

.commissions-ui h1,
.commissions-ui h2,
.commissions-ui h3,
.commissions-ui strong,
.commissions-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.commissions-ui em,
.commissions-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.commissions-ui small,
.commissions-ui p,
.commissions-ui label,
.commissions-ui input,
.commissions-ui span,
.commissions-ui select,
.commissions-ui button {
    font-family: var(--sb-font-regular);
}

.commissions-ui button,
.commissions-ui .sbo-bottom-nav a.is-active {
    font-family: var(--sb-font-semibold);
}

/* ---------- Header ---------- */
.commissions-ui .sbo-commissions-header.commissions-header,
.commissions-ui .commissions-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 0;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "back icon titles add";
    align-items: center;
    gap: 10px;
    border-bottom: 0;
    border-radius: 0 0 15px 15px;
    background: #36C;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible;
}

.commissions-ui .commissions-header__back,
.commissions-ui .sbo-commissions-header > a {
    grid-area: back;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    transition: background 180ms ease;
    justify-self: start;
}

.commissions-ui .commissions-header__back:hover {
    background: rgba(255, 255, 255, 0.14);
}

.commissions-ui .commissions-header__back svg {
    display: block;
}

.commissions-ui .sbo-commissions-header__icon,
.commissions-ui .commissions-header__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    flex-shrink: 0;
    justify-self: start;
}

.commissions-ui .commissions-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.commissions-ui .commissions-header__titles {
    grid-area: titles;
    min-width: 0;
    justify-self: stretch;
}

.commissions-ui .commissions-header__title,
.commissions-ui .sbo-commissions-header h1 {
    margin: 0 0 4px;
    color: #fff;
    font-family: var(--sb-font-bold);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commissions-ui .commissions-header__subtitle,
.commissions-ui .sbo-commissions-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.35;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commissions-ui .commissions-header__add,
.commissions-ui .sbo-commissions-add {
    grid-area: add;
    width: auto;
    max-width: max-content;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #3366CC;
    font: 14px var(--sb-font-bold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 40, 90, 0.12);
    justify-self: end;
    align-self: center;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.commissions-ui .commissions-header__add svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.commissions-ui .commissions-header__add:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 40, 90, 0.16);
    background: #F7F9FD;
}

.commissions-ui .commissions-header__add:disabled,
.commissions-ui .sbo-commissions-add:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.commissions-ui .commissions-header__add[hidden],
.commissions-ui .sbo-commissions-add[hidden] {
    display: none !important;
}

/* ---------- Content ---------- */
.commissions-ui .sbo-commissions-content.commissions-content,
.commissions-ui .commissions-content {
    padding: 14px 16px 120px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent;
}

.commissions-ui .sbo-alert {
    margin: 0;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    background: #FEF1F2;
    color: #D8232A;
    font-size: 14px;
    box-shadow: none;
}

.commissions-ui .sbo-alert--warning {
    border-color: #FDE68A;
    border-top-color: #F59E0B;
    background: #FFFBEB;
    color: #92400E;
}

/* ---------- Period chips ---------- */
.commissions-ui .sbo-commissions-period.commissions-period,
.commissions-ui .commissions-period {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.commissions-ui .commissions-period[hidden] {
    display: none !important;
}

.commissions-ui .commissions-period h2 {
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #647084;
    font: 14px var(--sb-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.commissions-ui .commissions-period h2 svg {
    display: block;
    color: #3366CC;
}

.commissions-ui .commissions-period__chips {
    margin: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    border-radius: 14px;
    background: #E9EDF2;
}

.commissions-ui .commissions-period__chips button {
    min-height: 68px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #667385;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.commissions-ui .commissions-period__chips button strong {
    font: 13px var(--sb-font-semibold);
    color: inherit;
}

.commissions-ui .commissions-period__chips button small {
    font: 11px var(--sb-font-regular);
    color: #8a94a6;
}

.commissions-ui .commissions-period__icon {
    display: grid;
    place-items: center;
    color: inherit;
}

.commissions-ui .commissions-period__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.commissions-ui .commissions-period__chips button.is-active {
    background: #fff;
    color: #2554b0;
    box-shadow: 0 2px 8px rgba(25, 42, 66, 0.08);
}

.commissions-ui .commissions-period__chips button.is-active strong {
    font-family: var(--sb-font-bold);
    color: #1e293b;
}

.commissions-ui .commissions-period__chips button.is-active small {
    color: #647084;
}

.commissions-ui .commissions-period__chips button.is-active .commissions-period__icon {
    color: #3366CC;
}

.commissions-ui .sbo-commissions-custom.commissions-custom,
.commissions-ui .commissions-custom {
    margin: 10px 0 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    border: 1px solid var(--cm-line);
    border-radius: var(--cm-radius);
    background: #fff;
    box-shadow: var(--cm-shadow-sm);
}

.commissions-ui .commissions-custom[hidden] {
    display: none !important;
}

.commissions-ui .commissions-custom label {
    display: grid;
    gap: 6px;
}

.commissions-ui .commissions-custom label > span {
    color: #647084;
    font: 12px var(--sb-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.commissions-ui .commissions-custom input {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d7dee6;
    border-radius: 12px;
    background: #fff;
    color: var(--cm-text);
    font: 14px var(--sb-font-regular);
}

.commissions-ui .commissions-custom input:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.commissions-ui .commissions-custom button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #3366CC;
    color: #fff;
    font: 14px var(--sb-font-bold);
    cursor: pointer;
}

.commissions-ui .commissions-custom button:hover {
    background: #2554b0;
}

/* ---------- Tabs ---------- */
.commissions-ui .sbo-commissions-tabs.commissions-tabs,
.commissions-ui .commissions-tabs {
    margin: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: 14px;
    background: #E9EDF2;
}

.commissions-ui .commissions-tabs button {
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #667385;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.commissions-ui .commissions-tabs button svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.commissions-ui .commissions-tabs button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 0 2px;
    border-radius: 999px;
    background: rgba(51, 102, 204, 0.12);
    color: #2554b0;
    font: 11px var(--sb-font-bold);
}

.commissions-ui .commissions-tabs button.is-active {
    background: #fff;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(25, 42, 66, 0.08);
    font-family: var(--sb-font-bold);
}

.commissions-ui .commissions-tabs button.is-active svg {
    color: #3366CC;
}

/* ---------- Loader / results ---------- */
.commissions-ui .sbo-commissions-results,
.commissions-ui .commissions-results {
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.commissions-body [data-commissions-panel] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.commissions-ui .sbo-commissions-results.is-loading [data-commissions-panel] {
    opacity: 0.4;
    pointer-events: none;
}

.commissions-ui .sbo-commissions-loader,
.commissions-ui .commissions-loader {
    position: absolute;
    inset: 28px 0 auto;
    z-index: 2;
    width: max-content;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e7ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(21, 53, 98, 0.12);
    color: #2554b0;
    font: 13px var(--sb-font-semibold);
}

.commissions-ui .sbo-commissions-loader[hidden],
.commissions-ui .commissions-loader[hidden] {
    display: none !important;
}

.commissions-ui .commissions-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(51, 102, 204, 0.18);
    border-top-color: #3366CC;
    border-radius: 50%;
    animation: sbo-approvals-spin 0.7s linear infinite;
}

/* ---------- Summary cards ---------- */
body.commissions-body .sbo-commission-totals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 720px) {
    body.commissions-body .sbo-commission-totals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.commissions-body .sbo-commission-total {
    position: relative;
    padding: 20px 18px;
    border: 1px solid var(--cm-line, #e8edf3);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
}

body.commissions-body .sbo-commission-total small {
    color: #647084;
    font: 12px var(--sb-font-semibold);
    letter-spacing: 0.06em;
}

body.commissions-body .sbo-commission-total strong {
    display: block;
    margin: 8px 0 6px;
    font: 28px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-total.is-due strong {
    color: #059669;
}

body.commissions-body .sbo-commission-total.is-approved strong {
    color: #0d8a6d;
}

body.commissions-body .sbo-commission-total.is-disputed strong {
    color: #DC2626;
}

body.commissions-body .sbo-commission-total p {
    margin: 0;
    color: #8a94a6;
    font-size: 13px;
}

body.commissions-body .sbo-commission-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
}

body.commissions-body .sbo-commission-badge.is-pending {
    background: #FFF7E8;
    color: #B45309;
}

body.commissions-body .sbo-commission-badge.is-approved {
    background: #E7F8F1;
    color: #059669;
}

body.commissions-body .sbo-commission-badge.is-disputed {
    background: #FDECEC;
    color: #DC2626;
}

body.commissions-body .sbo-commission-total .sbo-commission-badge {
    position: absolute;
    top: 18px;
    right: 18px;
}

body.commissions-body .sbo-commission-rules-note {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid #DCE7FF;
    border-radius: 15px;
    background: #F5F8FF;
    color: #2554b0;
    box-shadow: none;
}

body.commissions-body .sbo-commission-rules-note__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body.commissions-body .sbo-commission-rules-note__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #E8F0FE;
    color: #3366CC;
    flex-shrink: 0;
}

body.commissions-body .sbo-commission-rules-note__icon svg {
    display: block;
}

body.commissions-body .sbo-commission-rules-note__head strong {
    color: #1e293b;
    font: 14px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-rules-note ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

body.commissions-body .sbo-commission-rules-note li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #4b5b76;
}

body.commissions-body .sbo-commission-rules-note b {
    color: #3366CC;
    font-family: var(--sb-font-bold);
}

body.commissions-body .sbo-commission-rules-note em {
    display: block;
    margin-top: 10px;
    color: #7d8696;
    font: 12px var(--sb-font-regular);
}

body.commissions-body .sbo-commission-staff-list {
    margin-top: 0;
    display: grid;
    gap: 12px;
}

body.commissions-body .sbo-commission-staff-card {
    padding: 16px;
    border: 1px solid #e2e7ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.commissions-body .sbo-commission-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #3366CC;
    color: #fff;
    font: 12px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-staff-card__name h3 {
    margin: 0;
    font: 15px var(--sb-font-bold);
    color: #1e293b;
}

body.commissions-body .sbo-commission-staff-card__name em {
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef1f5;
    color: #667385;
    font: 10px var(--sb-font-semibold);
}

body.commissions-body .sbo-commission-staff-card__top p {
    margin: 4px 0 0;
    color: #8a94a6;
    font-size: 12px;
}

body.commissions-body .sbo-commission-staff-card__amount strong {
    display: block;
    color: #059669;
    font: 20px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-staff-card__actions button {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}

body.commissions-body .sbo-commission-staff-card__actions button svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.commissions-body .sbo-commission-staff-card__actions .is-approve {
    border: 0;
    background: #10b981;
    color: #fff;
}

body.commissions-body .sbo-commission-staff-card__actions .is-dispute {
    border: 1px solid #d5dbe3;
    background: #fff;
    color: #1e293b;
}

body.commissions-body .sbo-commission-chart {
    margin-top: 0;
    padding: 18px;
    border: 1px solid #e8edf3;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
}

body.commissions-body .sbo-commission-chart h2 {
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1e293b;
    font: 15px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-chart h2 svg {
    color: #3366CC;
}

body.commissions-body .sbo-commission-bars i {
    background: linear-gradient(180deg, #4d82e0 0%, #3366CC 100%);
}

body.commissions-body .sbo-commission-void {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid #F3E8C8;
    border-radius: 15px;
    background: #FFFDF8;
    color: #92400E;
}

body.commissions-body .sbo-commission-void__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

body.commissions-body .sbo-commission-void__head > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #FEF3C7;
    color: #D97706;
}

body.commissions-body .sbo-commission-void__head strong {
    color: #92400E;
    font: 14px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-past {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid #e8edf3;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.commissions-body .sbo-commission-past h2 {
    margin: 0 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 14px var(--sb-font-bold);
    color: #1e293b;
}

body.commissions-body .sbo-commission-past h2 svg {
    color: #3366CC;
}

body.commissions-body .sbo-commission-past em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #059669;
    font: 12px var(--sb-font-semibold);
}

body.commissions-body .sbo-commission-past em svg {
    display: block;
}

body.commissions-body .sbo-commission-approve-all button,
body.commissions-body .sbo-commission-share {
    min-height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 15px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-approve-all button {
    width: 100%;
    border: 0;
    background: #3366CC;
    color: #fff;
    cursor: pointer;
}

body.commissions-body .sbo-commission-approve-all button:hover {
    background: #2554b0;
}

body.commissions-body .sbo-commission-share {
    margin-top: 0;
    border: 1.5px solid #10b981;
    background: #fff;
    color: #059669;
}

body.commissions-body .sbo-commission-footnote {
    margin: 4px 0 0;
    text-align: center;
    color: #8a94a6;
    font-size: 12px;
}

body.commissions-body .sbo-commission-empty {
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed #d8dee6;
    border-radius: 15px;
    background: #fff;
}

body.commissions-body .sbo-commission-empty > span {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #E8F0FE;
    color: #3366CC;
}

body.commissions-body .sbo-commission-empty h2 {
    margin: 14px 0 6px;
    font: 17px var(--sb-font-bold);
    color: #1e293b;
}

body.commissions-body .sbo-commission-empty p {
    margin: 0;
    color: #8a94a6;
    font-size: 13px;
}

/* ---------- Rules tab ---------- */
body.commissions-body .sbo-commission-info,
body.commissions-body .sbo-commission-policy {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 15px;
    font-size: 13px;
    line-height: 1.5;
}

body.commissions-body .sbo-commission-info {
    margin: 0;
    border: 1px solid #DCE7FF;
    background: #F5F8FF;
    color: #2554b0;
}

body.commissions-body .sbo-commission-info > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #E8F0FE;
    color: #3366CC;
}

body.commissions-body .sbo-commission-info p {
    margin: 0;
    color: #4b5b76;
}

body.commissions-body .sbo-commission-info strong {
    color: #1e293b;
    font-family: var(--sb-font-bold);
}

body.commissions-body .sbo-commission-policy {
    margin: 0;
    border: 1px solid #E8EDF3;
    background: #F8FAFC;
    color: #4d5d73;
}

body.commissions-body .sbo-commission-policy > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #EEF2F7;
    color: #647084;
}

body.commissions-body .sbo-commission-policy p {
    margin: 0;
}

body.commissions-body .sbo-commission-rules-list {
    display: grid;
    gap: 12px;
}

body.commissions-body .sbo-commission-rule-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    border: 1px solid #e4e9ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.commissions-body .sbo-commission-rule-card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #E8F0FE;
    color: #3366CC;
}

body.commissions-body .sbo-commission-rule-card.is-inactive .sbo-commission-rule-card__icon {
    background: #eef1f4;
    color: #8d96a5;
}

body.commissions-body .sbo-commission-rule-card__title h3 {
    margin: 0;
    color: #1e293b;
    font: 16px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-rule-card__copy b {
    color: #3366CC;
    margin-right: 4px;
    font-family: var(--sb-font-bold);
}

body.commissions-body .sbo-commission-rule-card__copy small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a94a5;
    font-size: 12px;
}

body.commissions-body .sbo-commission-rule-card__copy small svg {
    display: block;
    color: #647084;
}

body.commissions-body .sbo-commission-icon-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    background: #f1f4f8;
    color: #5b6475;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

body.commissions-body .sbo-commission-icon-btn svg {
    display: block;
}

body.commissions-body .sbo-commission-icon-btn:hover {
    background: #e7ecf2;
    color: #3366CC;
}

body.commissions-body .sbo-commission-icon-btn.is-danger:hover {
    background: #FDECEC;
    color: #DC2626;
}

body.commissions-body .sbo-commission-switch input:checked + i,
body.commissions-body .sbo-commission-switch.is-on i {
    background: #3366CC;
}

body.commissions-body .sbo-commission-add-card {
    margin: 0;
    width: 100%;
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px dashed #B8C7E8;
    border-radius: 15px;
    background: #F8FAFF;
    color: #2554b0;
    font: 15px var(--sb-font-bold);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

body.commissions-body .sbo-commission-add-card:hover {
    border-color: #3366CC;
    background: #EEF4FF;
}

body.commissions-body .sbo-commission-add-card span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #E8F0FE;
    color: #3366CC;
}

body.commissions-body .sbo-commission-add-card span svg {
    display: block;
}

/* ---------- Modals ---------- */
body.commissions-body .sbo-commission-rule-modal__backdrop,
body.commissions-body .sbo-commission-delete-modal__backdrop {
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
}

body.commissions-body .sbo-commission-rule-modal__dialog {
    width: min(100%, 540px);
    max-height: 92vh;
    overflow: auto;
    padding: 0;
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(24, 42, 67, 0.22);
}

body.commissions-body .sbo-commission-rule-modal__dialog > header {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 16px;
    background: #36C;
    color: #fff;
}

body.commissions-body .commissions-rule-modal__icon,
body.commissions-body .sbo-commission-rule-modal__dialog > header > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

body.commissions-body .commissions-rule-modal__icon svg {
    display: block;
}

body.commissions-body .sbo-commission-rule-modal__dialog h2 {
    margin: 0;
    color: #fff;
    font: 18px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-rule-modal__dialog > header p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font: 13px var(--sb-font-regular);
}

body.commissions-body .sbo-commission-rule-modal__dialog > header button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

body.commissions-body .sbo-commission-rule-modal__dialog > header button:hover {
    background: rgba(255, 255, 255, 0.22);
}

body.commissions-body .sbo-commission-rule-modal__dialog > header button svg {
    display: block;
}

body.commissions-body .sbo-commission-rule-modal form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

body.commissions-body .sbo-commission-rule-modal label > span {
    color: #647084;
    font: 12px var(--sb-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.commissions-body .sbo-commission-rule-modal input,
body.commissions-body .sbo-commission-rule-modal select {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #d7dee6;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    font: 14px var(--sb-font-regular);
}

body.commissions-body .sbo-commission-rule-modal input:focus,
body.commissions-body .sbo-commission-rule-modal select:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

body.commissions-body .sbo-commission-rule-active {
    margin-top: 4px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 12px;
    background: #F5F8FF;
    border: 1px solid #E0E8FF;
}

body.commissions-body .sbo-commission-rule-modal__actions .is-cancel {
    border: 1px solid #d7dee6;
    background: #fff;
    color: #1e293b;
}

body.commissions-body .sbo-commission-rule-modal__actions .is-save {
    border: 0;
    background: #3366CC;
    color: #fff;
}

body.commissions-body .sbo-commission-rule-modal__actions .is-save:hover {
    background: #2554b0;
}

body.commissions-body .sbo-commission-delete-modal__dialog {
    width: min(100%, 420px);
    padding: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

body.commissions-body .sbo-commission-delete-modal__dialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px;
    background: #FEF1F2;
    border-bottom: 1px solid #FECACA;
}

body.commissions-body .sbo-commission-delete-modal__dialog > header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.commissions-body .commissions-delete-modal__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #FDECEC;
    color: #DC2626;
}

body.commissions-body .commissions-delete-modal__icon svg {
    display: block;
}

body.commissions-body .sbo-commission-delete-modal__dialog h2 {
    margin: 0;
    color: #DC2626;
    font: 18px var(--sb-font-bold);
}

body.commissions-body .sbo-commission-delete-modal__dialog > header button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #667385;
    display: grid;
    place-items: center;
    cursor: pointer;
}

body.commissions-body .sbo-commission-delete-modal__dialog > header button svg {
    display: block;
}

body.commissions-body .sbo-commission-delete-modal__dialog > p {
    margin: 0;
    padding: 16px;
    color: #5b6475;
    font-size: 15px;
    line-height: 1.5;
}

body.commissions-body .sbo-commission-delete-modal__actions {
    padding: 0 16px 16px;
}

body.commissions-body .sbo-commission-delete-modal__actions .is-cancel {
    border: 1.5px solid #3366CC;
    background: #fff;
    color: #3366CC;
}

body.commissions-body .sbo-commission-delete-modal__actions .is-delete {
    border: 0;
    background: #e14b55;
    color: #fff;
}

/* ---------- Bottom nav (match dashboard) ---------- */
.commissions-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.commissions-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.commissions-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.commissions-ui .sbo-bottom-nav a span,
.commissions-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.commissions-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.commissions-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.commissions-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.commissions-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.commissions-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.commissions-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.commissions-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.commissions-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.commissions-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.commissions-body .sbo-bottom-nav,
body.sbo-dashboard-body.commissions-body .commissions-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.commissions-body .sbo-bottom-nav a,
body.sbo-dashboard-body.commissions-body .commissions-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.commissions-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.commissions-body .commissions-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.commissions-body .sbo-bottom-nav a span,
body.commissions-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.commissions-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

body.commissions-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.commissions-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.commissions-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.commissions-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.commissions-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.commissions-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (min-width: 700px) {
    body.commissions-body .sbo-bottom-nav,
    body.sbo-dashboard-body.commissions-body .commissions-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .commissions-ui .commissions-header__title,
    .commissions-ui .sbo-commissions-header h1 {
        font-size: 18px;
    }

    .commissions-ui .commissions-header__subtitle,
    .commissions-ui .sbo-commissions-header p {
        font-size: 12px;
    }

    .commissions-ui .commissions-period__chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commissions-ui .commissions-custom {
        grid-template-columns: 1fr;
    }

    body.commissions-body .sbo-commission-staff-card__top {
        grid-template-columns: 40px 1fr;
    }

    body.commissions-body .sbo-commission-staff-card__amount {
        grid-column: 2;
        text-align: left;
    }

    body.commissions-body .sbo-commission-rule-card {
        grid-template-columns: 44px 1fr;
        gap: 12px;
    }

    body.commissions-body .sbo-commission-rule-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    body.commissions-body .sbo-commission-total strong {
        font-size: 28px;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .commissions-ui .commissions-header__title,
    .commissions-ui .sbo-commissions-header h1 {
        font-size: 20px;
    }
}

@media (min-width: 1366px) {
    .commissions-ui .commissions-header__title,
    .commissions-ui .sbo-commissions-header h1 {
        font-size: 22px;
    }

    body.commissions-body,
    body.commissions-body .commissions-ui {
        font-size: 15px;
    }
}


/* ==========================================================================
   Commissions ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.commissions-body.sbo-dashboard-body h1,
body.commissions-body.sbo-dashboard-body h2,
body.commissions-body.sbo-dashboard-body h3,
body.commissions-body.sbo-dashboard-body h4,
body.commissions-body .commissions-ui .commissions-header__title,
body.commissions-body .commissions-ui .sbo-commissions-header h1,
body.commissions-body .commissions-header h1,
body.commissions-body .commissions-header__title,
body.sbo-dashboard-body.commissions-body .commissions-ui h1.commissions-header__title,
body.commissions-body .sbo-commission-rule-modal__dialog h2,
body.commissions-body .sbo-commission-rule-modal h2,
body.commissions-body .commissions-rule-modal h2,
body.commissions-body #rule-modal-title,
body.commissions-body .sbo-commission-delete-modal__dialog h2,
body.commissions-body .sbo-commission-delete-modal h2,
body.commissions-body .commissions-delete-modal h2,
body.commissions-body #delete-rule-title,
body.commissions-body .sbo-commission-chart h2,
body.commissions-body .sbo-commission-past h2,
body.commissions-body .sbo-commission-empty h2,
body.commissions-body .sbo-commission-staff-card__name h3,
body.commissions-body .sbo-commission-rule-card__title h3,
body.commissions-body .commissions-period h2 {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.commissions-body.sbo-dashboard-body h1,
    body.commissions-body.sbo-dashboard-body h2,
    body.commissions-body.sbo-dashboard-body h3,
    body.commissions-body.sbo-dashboard-body h4,
    body.commissions-body .commissions-ui .commissions-header__title,
    body.commissions-body .commissions-ui .sbo-commissions-header h1,
    body.commissions-body .commissions-header h1,
    body.commissions-body .commissions-header__title,
    body.sbo-dashboard-body.commissions-body .commissions-ui h1.commissions-header__title,
    body.commissions-body .sbo-commission-rule-modal__dialog h2,
    body.commissions-body .sbo-commission-rule-modal h2,
    body.commissions-body .commissions-rule-modal h2,
    body.commissions-body #rule-modal-title,
    body.commissions-body .sbo-commission-delete-modal__dialog h2,
    body.commissions-body .sbo-commission-delete-modal h2,
    body.commissions-body .commissions-delete-modal h2,
    body.commissions-body #delete-rule-title,
    body.commissions-body .sbo-commission-chart h2,
    body.commissions-body .sbo-commission-past h2,
    body.commissions-body .sbo-commission-empty h2,
    body.commissions-body .sbo-commission-staff-card__name h3,
    body.commissions-body .sbo-commission-rule-card__title h3,
    body.commissions-body .commissions-period h2 {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.commissions-body.sbo-dashboard-body h1,
    body.commissions-body.sbo-dashboard-body h2,
    body.commissions-body.sbo-dashboard-body h3,
    body.commissions-body.sbo-dashboard-body h4,
    body.commissions-body .commissions-ui .commissions-header__title,
    body.commissions-body .commissions-ui .sbo-commissions-header h1,
    body.commissions-body .commissions-header h1,
    body.commissions-body .commissions-header__title,
    body.sbo-dashboard-body.commissions-body .commissions-ui h1.commissions-header__title,
    body.commissions-body .sbo-commission-rule-modal__dialog h2,
    body.commissions-body .sbo-commission-rule-modal h2,
    body.commissions-body .commissions-rule-modal h2,
    body.commissions-body #rule-modal-title,
    body.commissions-body .sbo-commission-delete-modal__dialog h2,
    body.commissions-body .sbo-commission-delete-modal h2,
    body.commissions-body .commissions-delete-modal h2,
    body.commissions-body #delete-rule-title,
    body.commissions-body .sbo-commission-chart h2,
    body.commissions-body .sbo-commission-past h2,
    body.commissions-body .sbo-commission-empty h2,
    body.commissions-body .sbo-commission-staff-card__name h3,
    body.commissions-body .sbo-commission-rule-card__title h3,
    body.commissions-body .commissions-period h2 {
        font-size: 22px !important;
    }
}


/* ==========================================================================
   Commissions ? heading color (black) + heading icon size match (page-scoped)
   Icon size follows heading scale: 18 / 20 / 22px
   Keeps blue header / modal header titles white; delete modal title stays red.
   ========================================================================== */

body.commissions-body .commissions-period h2,
body.commissions-body .sbo-commission-chart h2,
body.commissions-body .sbo-commission-past h2,
body.commissions-body .sbo-commission-empty h2,
body.commissions-body .sbo-commission-staff-card__name h3,
body.commissions-body .sbo-commission-rule-card__title h3,
body.commissions-body .sbo-commission-void__head strong,
body.commissions-body .sbo-commission-rules-note__head strong {
    color: #000000 !important;
    text-transform: none;
    letter-spacing: normal;
}

body.commissions-body .commissions-period h2,
body.commissions-body .sbo-commission-chart h2,
body.commissions-body .sbo-commission-past h2 {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

body.commissions-body .commissions-period h2 svg,
body.commissions-body .sbo-commission-chart h2 svg,
body.commissions-body .sbo-commission-past h2 svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    color: #000000 !important;
}

body.commissions-body .sbo-commission-empty > span {
    color: #000000;
}

body.commissions-body .sbo-commission-empty > span svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.commissions-body .commissions-period h2 svg,
    body.commissions-body .sbo-commission-chart h2 svg,
    body.commissions-body .sbo-commission-past h2 svg,
    body.commissions-body .sbo-commission-empty > span svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.commissions-body .commissions-period h2 svg,
    body.commissions-body .sbo-commission-chart h2 svg,
    body.commissions-body .sbo-commission-past h2 svg,
    body.commissions-body .sbo-commission-empty > span svg {
        width: 22px !important;
        height: 22px !important;
    }
}


/* ==========================================================================
   Commissions ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the Commissions heading block above.
   ========================================================================== */

body.commissions-body,
body.commissions-body .commissions-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.commissions-body .commissions-header__subtitle,
body.commissions-body .commissions-ui .sbo-commissions-header p,
body.commissions-body .commissions-ui .commissions-period__chips button small,
body.commissions-body .commissions-ui .commissions-custom label > span,
body.commissions-body .commissions-ui .sbo-alert,
body.commissions-body .commissions-ui .commissions-loader,
body.commissions-body .sbo-commission-total small,
body.commissions-body .sbo-commission-total p,
body.commissions-body .sbo-commission-badge,
body.commissions-body .sbo-commission-rules-note li,
body.commissions-body .sbo-commission-rules-note em,
body.commissions-body .sbo-commission-staff-card__top p,
body.commissions-body .sbo-commission-staff-card__amount small,
body.commissions-body .sbo-commission-staff-card__name em,
body.commissions-body .sbo-commission-bars span,
body.commissions-body .sbo-commission-void p,
body.commissions-body .sbo-commission-past article,
body.commissions-body .sbo-commission-past em,
body.commissions-body .sbo-commission-footnote,
body.commissions-body .sbo-commission-empty p,
body.commissions-body .sbo-commission-info p,
body.commissions-body .sbo-commission-policy p,
body.commissions-body .sbo-commission-rule-card__copy p,
body.commissions-body .sbo-commission-rule-card__copy small,
body.commissions-body .sbo-commission-rule-card__title em,
body.commissions-body .sbo-commission-rule-active small,
body.commissions-body .sbo-commission-rule-modal label > span,
body.commissions-body .sbo-commission-rule-modal__dialog > header p,
body.commissions-body .sbo-commission-delete-modal__dialog > p,
body.commissions-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Body / UI actions */
body.commissions-body .commissions-header__add,
body.commissions-body .sbo-commissions-add,
body.commissions-body .commissions-ui .commissions-period__chips button strong,
body.commissions-body .commissions-ui .commissions-custom input,
body.commissions-body .commissions-ui .commissions-custom button,
body.commissions-body .commissions-ui .commissions-tabs button,
body.commissions-body .sbo-commission-rules-note__head strong,
body.commissions-body .sbo-commission-rules-note b,
body.commissions-body .sbo-commission-void__head strong,
body.commissions-body .sbo-commission-void b,
body.commissions-body .sbo-commission-past article strong,
body.commissions-body .sbo-commission-staff-card__actions button,
body.commissions-body .sbo-commission-approve-all button,
body.commissions-body .sbo-commission-share,
body.commissions-body .sbo-commission-add-card,
body.commissions-body .sbo-commission-rule-active strong,
body.commissions-body .sbo-commission-rule-card__copy b,
body.commissions-body .sbo-commission-rule-modal input,
body.commissions-body .sbo-commission-rule-modal select,
body.commissions-body .sbo-commission-rule-modal__actions button,
body.commissions-body .sbo-commission-delete-modal__actions button {
    font-size: 14px !important;
}

/* Mid emphasis ? amounts / bottom nav labels */
body.commissions-body .sbo-commission-staff-card__amount strong,
body.commissions-body .sbo-bottom-nav a span,
body.commissions-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Hero amount */
body.commissions-body .sbo-commission-total strong {
    font-size: 28px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.commissions-body,
    body.commissions-body .commissions-ui {
        font-size: 15px !important;
    }

    body.commissions-body .commissions-header__subtitle,
    body.commissions-body .commissions-ui .sbo-commissions-header p,
    body.commissions-body .commissions-ui .commissions-period__chips button small,
    body.commissions-body .commissions-ui .commissions-custom label > span,
    body.commissions-body .commissions-ui .sbo-alert,
    body.commissions-body .commissions-ui .commissions-loader,
    body.commissions-body .sbo-commission-total small,
    body.commissions-body .sbo-commission-total p,
    body.commissions-body .sbo-commission-badge,
    body.commissions-body .sbo-commission-rules-note li,
    body.commissions-body .sbo-commission-rules-note em,
    body.commissions-body .sbo-commission-staff-card__top p,
    body.commissions-body .sbo-commission-staff-card__amount small,
    body.commissions-body .sbo-commission-staff-card__name em,
    body.commissions-body .sbo-commission-bars span,
    body.commissions-body .sbo-commission-void p,
    body.commissions-body .sbo-commission-past article,
    body.commissions-body .sbo-commission-past em,
    body.commissions-body .sbo-commission-footnote,
    body.commissions-body .sbo-commission-empty p,
    body.commissions-body .sbo-commission-info p,
    body.commissions-body .sbo-commission-policy p,
    body.commissions-body .sbo-commission-rule-card__copy p,
    body.commissions-body .sbo-commission-rule-card__copy small,
    body.commissions-body .sbo-commission-rule-card__title em,
    body.commissions-body .sbo-commission-rule-active small,
    body.commissions-body .sbo-commission-rule-modal label > span,
    body.commissions-body .sbo-commission-rule-modal__dialog > header p,
    body.commissions-body .sbo-commission-delete-modal__dialog > p,
    body.commissions-body .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.commissions-body .commissions-header__add,
    body.commissions-body .sbo-commissions-add,
    body.commissions-body .commissions-ui .commissions-period__chips button strong,
    body.commissions-body .commissions-ui .commissions-custom input,
    body.commissions-body .commissions-ui .commissions-custom button,
    body.commissions-body .commissions-ui .commissions-tabs button,
    body.commissions-body .sbo-commission-rules-note__head strong,
    body.commissions-body .sbo-commission-rules-note b,
    body.commissions-body .sbo-commission-void__head strong,
    body.commissions-body .sbo-commission-void b,
    body.commissions-body .sbo-commission-past article strong,
    body.commissions-body .sbo-commission-staff-card__actions button,
    body.commissions-body .sbo-commission-approve-all button,
    body.commissions-body .sbo-commission-share,
    body.commissions-body .sbo-commission-add-card,
    body.commissions-body .sbo-commission-rule-active strong,
    body.commissions-body .sbo-commission-rule-card__copy b,
    body.commissions-body .sbo-commission-rule-modal input,
    body.commissions-body .sbo-commission-rule-modal select,
    body.commissions-body .sbo-commission-rule-modal__actions button,
    body.commissions-body .sbo-commission-delete-modal__actions button {
        font-size: 15px !important;
    }

    body.commissions-body .sbo-commission-staff-card__amount strong,
    body.commissions-body .sbo-bottom-nav a span,
    body.commissions-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.commissions-body .sbo-commission-total strong {
        font-size: 30px !important;
    }
}

@media (min-width: 1366px) {
    body.commissions-body,
    body.commissions-body .commissions-ui {
        font-size: 16px !important;
    }

    body.commissions-body .commissions-header__subtitle,
    body.commissions-body .commissions-ui .sbo-commissions-header p,
    body.commissions-body .commissions-ui .commissions-period__chips button small,
    body.commissions-body .commissions-ui .commissions-custom label > span,
    body.commissions-body .commissions-ui .sbo-alert,
    body.commissions-body .commissions-ui .commissions-loader,
    body.commissions-body .sbo-commission-total small,
    body.commissions-body .sbo-commission-total p,
    body.commissions-body .sbo-commission-badge,
    body.commissions-body .sbo-commission-rules-note li,
    body.commissions-body .sbo-commission-rules-note em,
    body.commissions-body .sbo-commission-staff-card__top p,
    body.commissions-body .sbo-commission-staff-card__amount small,
    body.commissions-body .sbo-commission-staff-card__name em,
    body.commissions-body .sbo-commission-bars span,
    body.commissions-body .sbo-commission-void p,
    body.commissions-body .sbo-commission-past article,
    body.commissions-body .sbo-commission-past em,
    body.commissions-body .sbo-commission-footnote,
    body.commissions-body .sbo-commission-empty p,
    body.commissions-body .sbo-commission-info p,
    body.commissions-body .sbo-commission-policy p,
    body.commissions-body .sbo-commission-rule-card__copy p,
    body.commissions-body .sbo-commission-rule-card__copy small,
    body.commissions-body .sbo-commission-rule-card__title em,
    body.commissions-body .sbo-commission-rule-active small,
    body.commissions-body .sbo-commission-rule-modal label > span,
    body.commissions-body .sbo-commission-rule-modal__dialog > header p,
    body.commissions-body .sbo-commission-delete-modal__dialog > p,
    body.commissions-body .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.commissions-body .commissions-header__add,
    body.commissions-body .sbo-commissions-add,
    body.commissions-body .commissions-ui .commissions-period__chips button strong,
    body.commissions-body .commissions-ui .commissions-custom input,
    body.commissions-body .commissions-ui .commissions-custom button,
    body.commissions-body .commissions-ui .commissions-tabs button,
    body.commissions-body .sbo-commission-rules-note__head strong,
    body.commissions-body .sbo-commission-rules-note b,
    body.commissions-body .sbo-commission-void__head strong,
    body.commissions-body .sbo-commission-void b,
    body.commissions-body .sbo-commission-past article strong,
    body.commissions-body .sbo-commission-staff-card__actions button,
    body.commissions-body .sbo-commission-approve-all button,
    body.commissions-body .sbo-commission-share,
    body.commissions-body .sbo-commission-add-card,
    body.commissions-body .sbo-commission-rule-active strong,
    body.commissions-body .sbo-commission-rule-card__copy b,
    body.commissions-body .sbo-commission-rule-modal input,
    body.commissions-body .sbo-commission-rule-modal select,
    body.commissions-body .sbo-commission-rule-modal__actions button,
    body.commissions-body .sbo-commission-delete-modal__actions button {
        font-size: 16px !important;
    }

    body.commissions-body .sbo-commission-staff-card__amount strong,
    body.commissions-body .sbo-bottom-nav a span,
    body.commissions-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.commissions-body .sbo-commission-total strong {
        font-size: 32px !important;
    }
}

/* ==========================================================================
   Staff & PINs ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.staff-body.sbo-dashboard-body h1,
body.staff-body.sbo-dashboard-body h2,
body.staff-body.sbo-dashboard-body h3,
body.staff-body.sbo-dashboard-body h4,
body.staff-body .staff-ui .staff-header__title,
body.staff-body .staff-ui .sbo-staff-header h1,
body.staff-body .staff-header__title,
body.staff-body .staff-header h1,
body.sbo-dashboard-body.staff-body .staff-ui h1.staff-header__title,
body.staff-body .sbo-add-staff-modal__header h2,
body.staff-body .sbo-add-staff-modal__dialog h2,
body.staff-body #add-staff-modal-title,
body.staff-body .sbo-role-modal__header h2,
body.staff-body .sbo-role-modal__dialog h2,
body.staff-body #role-modal-title,
body.staff-body .sbo-pin-modal__header h2,
body.staff-body .sbo-pin-modal__dialog h2,
body.staff-body #pin-modal-title,
body.staff-body #resend-pin-modal-title,
body.staff-body .sbo-remove-staff-modal__header h2,
body.staff-body .sbo-remove-staff-modal__dialog h2,
body.staff-body #remove-staff-modal-title,
body.staff-body .sbo-staff-limit-modal__dialog h2,
body.staff-body #staff-limit-modal-title {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.staff-body.sbo-dashboard-body h1,
    body.staff-body.sbo-dashboard-body h2,
    body.staff-body.sbo-dashboard-body h3,
    body.staff-body.sbo-dashboard-body h4,
    body.staff-body .staff-ui .staff-header__title,
    body.staff-body .staff-ui .sbo-staff-header h1,
    body.staff-body .staff-header__title,
    body.staff-body .staff-header h1,
    body.sbo-dashboard-body.staff-body .staff-ui h1.staff-header__title,
    body.staff-body .sbo-add-staff-modal__header h2,
    body.staff-body .sbo-add-staff-modal__dialog h2,
    body.staff-body #add-staff-modal-title,
    body.staff-body .sbo-role-modal__header h2,
    body.staff-body .sbo-role-modal__dialog h2,
    body.staff-body #role-modal-title,
    body.staff-body .sbo-pin-modal__header h2,
    body.staff-body .sbo-pin-modal__dialog h2,
    body.staff-body #pin-modal-title,
    body.staff-body #resend-pin-modal-title,
    body.staff-body .sbo-remove-staff-modal__header h2,
    body.staff-body .sbo-remove-staff-modal__dialog h2,
    body.staff-body #remove-staff-modal-title,
    body.staff-body .sbo-staff-limit-modal__dialog h2,
    body.staff-body #staff-limit-modal-title {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body.sbo-dashboard-body h1,
    body.staff-body.sbo-dashboard-body h2,
    body.staff-body.sbo-dashboard-body h3,
    body.staff-body.sbo-dashboard-body h4,
    body.staff-body .staff-ui .staff-header__title,
    body.staff-body .staff-ui .sbo-staff-header h1,
    body.staff-body .staff-header__title,
    body.staff-body .staff-header h1,
    body.sbo-dashboard-body.staff-body .staff-ui h1.staff-header__title,
    body.staff-body .sbo-add-staff-modal__header h2,
    body.staff-body .sbo-add-staff-modal__dialog h2,
    body.staff-body #add-staff-modal-title,
    body.staff-body .sbo-role-modal__header h2,
    body.staff-body .sbo-role-modal__dialog h2,
    body.staff-body #role-modal-title,
    body.staff-body .sbo-pin-modal__header h2,
    body.staff-body .sbo-pin-modal__dialog h2,
    body.staff-body #pin-modal-title,
    body.staff-body #resend-pin-modal-title,
    body.staff-body .sbo-remove-staff-modal__header h2,
    body.staff-body .sbo-remove-staff-modal__dialog h2,
    body.staff-body #remove-staff-modal-title,
    body.staff-body .sbo-staff-limit-modal__dialog h2,
    body.staff-body #staff-limit-modal-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   Staff & PINs ? modern SVG icons (page-scoped)
   Reset nested icon spans so they do NOT inherit pill/button styles.
   ========================================================================== */

body.staff-body .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-security .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-access .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-access-pill .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-chips .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-phone .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-actions .sbo-inline-icon,
body.staff-body .staff-ui .sbo-pin-mask .sbo-inline-icon,
body.staff-body .staff-ui .sbo-regenerate-pin .sbo-inline-icon,
body.staff-body .staff-ui .sbo-pin-status .sbo-inline-icon,
body.staff-body .sbo-add-staff-section .sbo-inline-icon,
body.staff-body .sbo-sales-visibility .sbo-inline-icon,
body.staff-body .sbo-button-label .sbo-inline-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    color: inherit !important;
    overflow: visible !important;
}

body.staff-body .sbo-inline-icon svg,
body.staff-body .staff-ui .sbo-inline-icon svg,
body.staff-body .staff-ui .sbo-staff-security .sbo-inline-icon svg,
body.staff-body .staff-ui .sbo-staff-access .sbo-inline-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

body.staff-body .staff-ui .sbo-pin-mask__dots {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    letter-spacing: 0.14em !important;
    font-size: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* Kill legacy .sbo-staff-security span pill styles on nested icon/text spans */
body.staff-body .staff-ui .sbo-staff-security span.sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-security span.sbo-pin-mask__dots,
body.staff-body .staff-ui .sbo-staff-access span.sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-phone span.sbo-inline-icon {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.staff-body .sbo-modal-icon,
body.staff-body .sbo-staff-limit-modal header > span.sbo-modal-icon,
body.staff-body .sbo-add-staff-modal__header > span.sbo-modal-icon,
body.staff-body .sbo-remove-staff-modal__header > span.sbo-modal-icon,
body.staff-body .sbo-role-modal__shield.sbo-modal-icon,
body.staff-body .sbo-add-staff-pin-note > span.sbo-modal-icon,
body.staff-body .sbo-role-modal__notice > span.sbo-modal-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex: 0 0 auto !important;
}

body.staff-body .sbo-modal-icon svg,
body.staff-body .sbo-role-modal__shield.sbo-modal-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

body.staff-body .sbo-modal-icon--soft {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.staff-body .sbo-modal-icon--soft svg {
    width: 18px !important;
    height: 18px !important;
}

body.staff-body .sbo-modal-icon--danger {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.staff-body .sbo-staff-limit-modal header button,
body.staff-body .sbo-add-staff-modal__header button,
body.staff-body .sbo-remove-staff-modal__header button,
body.staff-body .sbo-role-modal__close {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
    color: #647084 !important;
}

body.staff-body .sbo-staff-limit-modal header button svg,
body.staff-body .sbo-add-staff-modal__header button svg,
body.staff-body .sbo-remove-staff-modal__header button svg,
body.staff-body .sbo-role-modal__close svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-phone,
body.staff-body .staff-ui .sbo-pin-mask,
body.staff-body .staff-ui .sbo-regenerate-pin,
body.staff-body .staff-ui .sbo-pin-status,
body.staff-body .staff-ui .sbo-staff-access > span,
body.staff-body .staff-ui .sbo-staff-access-pill,
body.staff-body .staff-ui .sbo-staff-permission-pill,
body.staff-body .staff-ui .sbo-staff-actions button,
body.staff-body .sbo-add-staff-section legend,
body.staff-body .sbo-add-staff-section__title,
body.staff-body .sbo-sales-visibility label > span,
body.staff-body .sbo-add-staff-pin-note small,
body.staff-body .sbo-button-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

body.staff-body .staff-ui .sbo-staff-phone {
    display: flex !important;
    margin: 0 !important;
    white-space: normal !important;
}

body.staff-body .staff-ui .sbo-staff-actions summary {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-actions summary .sbo-inline-icon,
body.staff-body .staff-ui .sbo-staff-actions summary .sbo-inline-icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.staff-body .staff-ui .sbo-staff-actions button {
    width: 100% !important;
    justify-content: flex-start !important;
}

body.staff-body .sbo-add-staff-phone > b.sbo-inline-icon {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
    color: #3366CC !important;
}

body.staff-body .staff-header__icon svg,
body.staff-body .staff-ui .sbo-staff-info__icon svg,
body.staff-body .staff-ui .sbo-staff-usage__icon svg,
body.staff-body .staff-ui .sbo-roles-info__icon svg,
body.staff-body .staff-ui .sbo-staff-footer-note__icon svg {
    width: 18px !important;
    height: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.staff-body .sbo-inline-icon,
    body.staff-body .staff-ui .sbo-inline-icon,
    body.staff-body .sbo-inline-icon svg,
    body.staff-body .staff-ui .sbo-inline-icon svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }

    body.staff-body .staff-header__icon svg,
    body.staff-body .staff-ui .sbo-staff-info__icon svg,
    body.staff-body .staff-ui .sbo-staff-usage__icon svg,
    body.staff-body .staff-ui .sbo-roles-info__icon svg,
    body.staff-body .staff-ui .sbo-staff-footer-note__icon svg,
    body.staff-body .sbo-modal-icon svg,
    body.staff-body .sbo-role-modal__shield.sbo-modal-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body .sbo-inline-icon,
    body.staff-body .staff-ui .sbo-inline-icon,
    body.staff-body .sbo-inline-icon svg,
    body.staff-body .staff-ui .sbo-inline-icon svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }

    body.staff-body .staff-header__icon svg,
    body.staff-body .staff-ui .sbo-staff-info__icon svg,
    body.staff-body .staff-ui .sbo-staff-usage__icon svg,
    body.staff-body .staff-ui .sbo-roles-info__icon svg,
    body.staff-body .staff-ui .sbo-staff-footer-note__icon svg,
    body.staff-body .sbo-modal-icon svg,
    body.staff-body .sbo-role-modal__shield.sbo-modal-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ==========================================================================
   Staff & PINs ? staff card UI polish (page-scoped)
   ========================================================================== */

body.staff-body .staff-ui .sbo-staff-list {
    gap: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-card {
    padding: 18px 16px !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

body.staff-body .staff-ui .sbo-staff-card__head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 28px !important;
}

body.staff-body .staff-ui .sbo-staff-avatar {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    margin-top: 2px !important;
}

body.staff-body .staff-ui .sbo-staff-card__main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-right: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-card__title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-card__title > strong {
    margin: 0 !important;
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

body.staff-body .staff-ui .sbo-role-pill,
body.staff-body .staff-ui .sbo-status-pill {
    min-height: 24px !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.staff-body .staff-ui .sbo-staff-meta-line {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-meta-line .sbo-staff-phone,
body.staff-body .staff-ui .sbo-staff-card__main > p.sbo-staff-phone {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.staff-body .staff-ui .sbo-staff-meta-line small,
body.staff-body .staff-ui .sbo-staff-card__main > small {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body.staff-body .staff-ui .sbo-staff-security {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.staff-body .staff-ui .sbo-staff-security__pin-row {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
body.staff-body .staff-ui .sbo-regenerate-pin,
body.staff-body .staff-ui .sbo-pin-status {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
}

body.staff-body .staff-ui .sbo-pin-mask__dots {
    letter-spacing: 0.12em !important;
    font-family: var(--sb-font-semibold) !important;
}

body.staff-body .staff-ui .sbo-regenerate-pin {
    padding: 0 4px !important;
    background: transparent !important;
}

/* Send PIN + shops/sales + permissions: full card width, left-aligned wrap */
body.staff-body .staff-ui .sbo-staff-chips {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

body.staff-body .staff-ui .sbo-staff-chips > .sbo-pin-status,
body.staff-body .staff-ui .sbo-staff-chips > .sbo-staff-access-pill,
body.staff-body .staff-ui .sbo-staff-chips > .sbo-staff-permission-pill {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

body.staff-body .staff-ui .sbo-staff-access,
body.staff-body .staff-ui .sbo-staff-permissions {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.staff-body .staff-ui .sbo-staff-access > span,
body.staff-body .staff-ui .sbo-staff-access-pill {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    white-space: nowrap !important;
}

body.staff-body .staff-ui .sbo-staff-permissions > span,
body.staff-body .staff-ui .sbo-staff-permission-pill {
    min-height: 28px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

body.staff-body .staff-ui .sbo-staff-actions {
    top: 14px !important;
    right: 12px !important;
}

body.staff-body .staff-ui .sbo-staff-actions summary {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    border: 1px solid #E8EDF3 !important;
}

body.staff-body .staff-ui .sbo-staff-actions summary:hover {
    background: #E8F0FE !important;
    border-color: #BFDBFE !important;
    color: #3366CC !important;
}

body.staff-body .staff-ui .sbo-staff-actions > div {
    width: 220px !important;
    padding: 6px !important;
    border-radius: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-actions button {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    gap: 8px !important;
    white-space: normal !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.staff-body .staff-ui .sbo-staff-card__title > strong {
        font-size: 20px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line .sbo-staff-phone,
    body.staff-body .staff-ui .sbo-staff-card__main > p.sbo-staff-phone {
        font-size: 15px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line small,
    body.staff-body .staff-ui .sbo-staff-card__main > small {
        font-size: 14px !important;
    }

    body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
    body.staff-body .staff-ui .sbo-regenerate-pin,
    body.staff-body .staff-ui .sbo-pin-status {
        font-size: 14px !important;
        min-height: 36px !important;
    }

    body.staff-body .staff-ui .sbo-role-pill,
    body.staff-body .staff-ui .sbo-status-pill,
body.staff-body .staff-ui .sbo-staff-access > span,
    body.staff-body .staff-ui .sbo-staff-permissions > span,
    body.staff-body .staff-ui .sbo-staff-access-pill,
    body.staff-body .staff-ui .sbo-staff-permission-pill {
        font-size: 13px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body .staff-ui .sbo-staff-card {
        padding: 20px 18px !important;
        gap: 16px !important;
    }

    body.staff-body .staff-ui .sbo-staff-avatar {
        width: 56px !important;
        height: 56px !important;
    }

    body.staff-body .staff-ui .sbo-staff-card__title > strong {
        font-size: 22px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line .sbo-staff-phone,
    body.staff-body .staff-ui .sbo-staff-card__main > p.sbo-staff-phone {
        font-size: 16px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line small,
    body.staff-body .staff-ui .sbo-staff-card__main > small {
        font-size: 15px !important;
    }

    body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
    body.staff-body .staff-ui .sbo-regenerate-pin,
    body.staff-body .staff-ui .sbo-pin-status {
        font-size: 15px !important;
        min-height: 38px !important;
    }

    body.staff-body .staff-ui .sbo-role-pill,
    body.staff-body .staff-ui .sbo-status-pill,
    body.staff-body .staff-ui .sbo-staff-access > span,
    body.staff-body .staff-ui .sbo-staff-permissions > span,
    body.staff-body .staff-ui .sbo-staff-access-pill,
    body.staff-body .staff-ui .sbo-staff-permission-pill {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   Staff & PINs ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the Staff heading block above.
   ========================================================================== */

body.staff-body,
body.staff-body .staff-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.staff-body .staff-header__subtitle,
body.staff-body .staff-ui .sbo-staff-header p,
body.staff-body .staff-ui p.staff-header__subtitle,
body.staff-body .staff-ui .sbo-staff-stats small,
body.staff-body .staff-ui .sbo-staff-info p,
body.staff-body .staff-ui .sbo-staff-usage small,
body.staff-body .staff-ui .sbo-staff-search__status,
body.staff-body .staff-ui .sbo-staff-card__main > p,
body.staff-body .staff-ui .sbo-staff-phone,
body.staff-body .staff-ui .sbo-staff-card__main > small,
body.staff-body .staff-ui .sbo-role-pill,
body.staff-body .staff-ui .sbo-status-pill,
body.staff-body .staff-ui .sbo-pin-mask,
body.staff-body .staff-ui .sbo-staff-access > span,
body.staff-body .staff-ui .sbo-staff-permissions > span,
body.staff-body .staff-ui .sbo-staff-access-pill,
body.staff-body .staff-ui .sbo-staff-permission-pill,
body.staff-body .staff-ui .sbo-empty,
body.staff-body .staff-ui .sbo-staff-footer-note p,
body.staff-body .staff-ui .sbo-roles-info p,
body.staff-body .staff-ui .sbo-role-staff-count,
body.staff-body .staff-ui .sbo-system-role,
body.staff-body .sbo-staff-limit-modal__body p,
body.staff-body .sbo-add-staff-field > span,
body.staff-body .sbo-add-staff-field > span small,
body.staff-body .sbo-add-staff-pin-note p,
body.staff-body .sbo-add-staff-pin-note small,
body.staff-body .sbo-add-staff-section p,
body.staff-body .sbo-field-error,
body.staff-body .sbo-alert,
body.staff-body .sbo-remove-staff-modal__dialog p,
body.staff-body .sbo-role-modal__notice p,
body.staff-body .sbo-role-field > span,
body.staff-body .sbo-role-permission-option small,
body.staff-body .sbo-role-permission-option em,
body.staff-body .sbo-pin-modal__titles p,
body.staff-body .sbo-pin-question,
body.staff-body .sbo-pin-privacy p,
body.staff-body .sbo-pin-details dt,
body.staff-body .sbo-pin-details dd,
body.staff-body .sbo-pin-details dd small,
body.staff-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Body / UI actions */
body.staff-body .staff-header__action,
body.staff-body .staff-ui .sbo-add-staff-button,
body.staff-body .staff-ui .sbo-staff-tabs a,
body.staff-body .staff-ui .sbo-staff-tabs button,
body.staff-body .staff-ui .sbo-staff-search input,
body.staff-body .staff-ui .sbo-regenerate-pin,
body.staff-body .staff-ui .sbo-pin-status,
body.staff-body .staff-ui .sbo-staff-actions button,
body.staff-body .staff-ui .sbo-create-role-button,
body.staff-body .staff-ui .sbo-role-name,
body.staff-body .sbo-staff-limit-modal__body strong,
body.staff-body .sbo-staff-limit-modal footer button,
body.staff-body .sbo-add-staff-field input,
body.staff-body .sbo-add-staff-field select,
body.staff-body .sbo-add-staff-phone,
body.staff-body .sbo-add-staff-phone span,
body.staff-body .sbo-add-staff-phone input,
body.staff-body .sbo-add-staff-section legend,
body.staff-body .sbo-add-staff-section__title,
body.staff-body .sbo-add-staff-branches label,
body.staff-body .sbo-sales-visibility label > span,
body.staff-body .sbo-add-staff-pin-note strong,
body.staff-body .sbo-add-staff-cancel,
body.staff-body .sbo-add-staff-only,
body.staff-body .sbo-add-staff-send,
body.staff-body .sbo-button-label,
body.staff-body .sbo-button-label__text,
body.staff-body .sbo-remove-staff-cancel,
body.staff-body .sbo-remove-staff-submit,
body.staff-body .sbo-role-field input,
body.staff-body .sbo-role-permission-option strong,
body.staff-body .sbo-role-cancel,
body.staff-body .sbo-role-submit,
body.staff-body .sbo-pin-cancel,
body.staff-body .sbo-pin-regenerate,
body.staff-body .sbo-pin-send,
body.staff-body .sbo-add-staff-permissions span {
    font-size: 14px !important;
}

/* Mid emphasis ? bottom nav labels (staff names use card heading scale) */
body.staff-body .sbo-bottom-nav a span,
body.staff-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Stats numbers */
body.staff-body .staff-ui .sbo-staff-stats strong {
    font-size: 22px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.staff-body,
    body.staff-body .staff-ui {
        font-size: 15px !important;
    }

    body.staff-body .staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-header p,
    body.staff-body .staff-ui p.staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-stats small,
    body.staff-body .staff-ui .sbo-staff-info p,
    body.staff-body .staff-ui .sbo-staff-usage small,
    body.staff-body .staff-ui .sbo-staff-search__status,
    body.staff-body .staff-ui .sbo-staff-card__main > p,
    body.staff-body .staff-ui .sbo-staff-phone,
    body.staff-body .staff-ui .sbo-staff-card__main > small,
    body.staff-body .staff-ui .sbo-role-pill,
    body.staff-body .staff-ui .sbo-status-pill,
    body.staff-body .staff-ui .sbo-pin-mask,
    body.staff-body .staff-ui .sbo-staff-access > span,
    body.staff-body .staff-ui .sbo-staff-permissions > span,
    body.staff-body .staff-ui .sbo-empty,
    body.staff-body .staff-ui .sbo-staff-footer-note p,
    body.staff-body .staff-ui .sbo-roles-info p,
    body.staff-body .staff-ui .sbo-role-staff-count,
    body.staff-body .staff-ui .sbo-system-role,
    body.staff-body .sbo-staff-limit-modal__body p,
    body.staff-body .sbo-add-staff-field > span,
    body.staff-body .sbo-add-staff-field > span small,
    body.staff-body .sbo-add-staff-pin-note p,
    body.staff-body .sbo-add-staff-pin-note small,
    body.staff-body .sbo-add-staff-section p,
    body.staff-body .sbo-field-error,
    body.staff-body .sbo-alert,
    body.staff-body .sbo-remove-staff-modal__dialog p,
    body.staff-body .sbo-role-modal__notice p,
    body.staff-body .sbo-role-field > span,
    body.staff-body .sbo-role-permission-option small,
    body.staff-body .sbo-role-permission-option em,
    body.staff-body .sbo-pin-modal__titles p,
    body.staff-body .sbo-pin-question,
    body.staff-body .sbo-pin-privacy p,
    body.staff-body .sbo-pin-details dt,
    body.staff-body .sbo-pin-details dd,
    body.staff-body .sbo-pin-details dd small,
    body.staff-body .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.staff-body .staff-header__action,
    body.staff-body .staff-ui .sbo-add-staff-button,
    body.staff-body .staff-ui .sbo-staff-tabs a,
    body.staff-body .staff-ui .sbo-staff-tabs button,
    body.staff-body .staff-ui .sbo-staff-search input,
    body.staff-body .staff-ui .sbo-regenerate-pin,
    body.staff-body .staff-ui .sbo-pin-status,
    body.staff-body .staff-ui .sbo-staff-actions button,
    body.staff-body .staff-ui .sbo-create-role-button,
    body.staff-body .staff-ui .sbo-role-name,
    body.staff-body .sbo-staff-limit-modal__body strong,
    body.staff-body .sbo-staff-limit-modal footer button,
    body.staff-body .sbo-add-staff-field input,
    body.staff-body .sbo-add-staff-field select,
    body.staff-body .sbo-add-staff-phone,
    body.staff-body .sbo-add-staff-phone span,
    body.staff-body .sbo-add-staff-phone input,
    body.staff-body .sbo-add-staff-section legend,
    body.staff-body .sbo-add-staff-section__title,
    body.staff-body .sbo-add-staff-branches label,
    body.staff-body .sbo-sales-visibility label > span,
    body.staff-body .sbo-add-staff-pin-note strong,
    body.staff-body .sbo-add-staff-cancel,
    body.staff-body .sbo-add-staff-only,
    body.staff-body .sbo-add-staff-send,
    body.staff-body .sbo-button-label,
    body.staff-body .sbo-button-label__text,
    body.staff-body .sbo-remove-staff-cancel,
    body.staff-body .sbo-remove-staff-submit,
    body.staff-body .sbo-role-field input,
    body.staff-body .sbo-role-permission-option strong,
    body.staff-body .sbo-role-cancel,
    body.staff-body .sbo-role-submit,
    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate,
    body.staff-body .sbo-pin-send,
    body.staff-body .sbo-add-staff-permissions span {
        font-size: 15px !important;
    }

    body.staff-body .sbo-bottom-nav a span,
    body.staff-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.staff-body .staff-ui .sbo-staff-stats strong {
        font-size: 24px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body,
    body.staff-body .staff-ui {
        font-size: 16px !important;
    }

    body.staff-body .staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-header p,
    body.staff-body .staff-ui p.staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-stats small,
    body.staff-body .staff-ui .sbo-staff-info p,
    body.staff-body .staff-ui .sbo-staff-usage small,
    body.staff-body .staff-ui .sbo-staff-search__status,
    body.staff-body .staff-ui .sbo-staff-card__main > p,
    body.staff-body .staff-ui .sbo-staff-phone,
    body.staff-body .staff-ui .sbo-staff-card__main > small,
    body.staff-body .staff-ui .sbo-role-pill,
    body.staff-body .staff-ui .sbo-status-pill,
    body.staff-body .staff-ui .sbo-pin-mask,
    body.staff-body .staff-ui .sbo-staff-access > span,
    body.staff-body .staff-ui .sbo-staff-permissions > span,
    body.staff-body .staff-ui .sbo-empty,
    body.staff-body .staff-ui .sbo-staff-footer-note p,
    body.staff-body .staff-ui .sbo-roles-info p,
    body.staff-body .staff-ui .sbo-role-staff-count,
    body.staff-body .staff-ui .sbo-system-role,
    body.staff-body .sbo-staff-limit-modal__body p,
    body.staff-body .sbo-add-staff-field > span,
    body.staff-body .sbo-add-staff-field > span small,
    body.staff-body .sbo-add-staff-pin-note p,
    body.staff-body .sbo-add-staff-pin-note small,
    body.staff-body .sbo-add-staff-section p,
    body.staff-body .sbo-field-error,
    body.staff-body .sbo-alert,
    body.staff-body .sbo-remove-staff-modal__dialog p,
    body.staff-body .sbo-role-modal__notice p,
    body.staff-body .sbo-role-field > span,
    body.staff-body .sbo-role-permission-option small,
    body.staff-body .sbo-role-permission-option em,
    body.staff-body .sbo-pin-modal__titles p,
    body.staff-body .sbo-pin-question,
    body.staff-body .sbo-pin-privacy p,
    body.staff-body .sbo-pin-details dt,
    body.staff-body .sbo-pin-details dd,
    body.staff-body .sbo-pin-details dd small,
    body.staff-body .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.staff-body .staff-header__action,
    body.staff-body .staff-ui .sbo-add-staff-button,
    body.staff-body .staff-ui .sbo-staff-tabs a,
    body.staff-body .staff-ui .sbo-staff-tabs button,
    body.staff-body .staff-ui .sbo-staff-search input,
    body.staff-body .staff-ui .sbo-regenerate-pin,
    body.staff-body .staff-ui .sbo-pin-status,
    body.staff-body .staff-ui .sbo-staff-actions button,
    body.staff-body .staff-ui .sbo-create-role-button,
    body.staff-body .staff-ui .sbo-role-name,
    body.staff-body .sbo-staff-limit-modal__body strong,
    body.staff-body .sbo-staff-limit-modal footer button,
    body.staff-body .sbo-add-staff-field input,
    body.staff-body .sbo-add-staff-field select,
    body.staff-body .sbo-add-staff-phone,
    body.staff-body .sbo-add-staff-phone span,
    body.staff-body .sbo-add-staff-phone input,
    body.staff-body .sbo-add-staff-section legend,
    body.staff-body .sbo-add-staff-section__title,
    body.staff-body .sbo-add-staff-branches label,
    body.staff-body .sbo-sales-visibility label > span,
    body.staff-body .sbo-add-staff-pin-note strong,
    body.staff-body .sbo-add-staff-cancel,
    body.staff-body .sbo-add-staff-only,
    body.staff-body .sbo-add-staff-send,
    body.staff-body .sbo-button-label,
    body.staff-body .sbo-button-label__text,
    body.staff-body .sbo-remove-staff-cancel,
    body.staff-body .sbo-remove-staff-submit,
    body.staff-body .sbo-role-field input,
    body.staff-body .sbo-role-permission-option strong,
    body.staff-body .sbo-role-cancel,
    body.staff-body .sbo-role-submit,
    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate,
    body.staff-body .sbo-pin-send,
    body.staff-body .sbo-add-staff-permissions span {
        font-size: 16px !important;
    }

    body.staff-body .sbo-bottom-nav a span,
    body.staff-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.staff-body .staff-ui .sbo-staff-stats strong {
        font-size: 26px !important;
    }
}

/* PIN footer note ? 16px on mobile, tablet, and desktop */
body.staff-body .staff-ui .sbo-staff-footer-note,
body.staff-body .staff-ui .sbo-staff-footer-note p,
body.staff-body .staff-ui .sbo-staff-footer-note p strong,
body.staff-body .staff-ui .sbo-staff-footer-note__plan,
body.staff-body .staff-ui .sbo-staff-footer-note__plan b {
    font-size: 16px !important;
}

/* Add Staff / New Role header button ? Mobile 16px | Tablet/Desktop 18px */
body.staff-body .staff-ui .sbo-add-staff-button.staff-header__action,
body.staff-body .staff-header__action,
body.staff-body .staff-ui .sbo-add-staff-button {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.staff-body .staff-ui .sbo-add-staff-button.staff-header__action,
    body.staff-body .staff-header__action,
    body.staff-body .staff-ui .sbo-add-staff-button {
        font-size: 18px !important;
    }
}

/* PIN modal footer buttons ? Mobile 16px | Tablet/Desktop 18px */
body.staff-body .sbo-pin-cancel,
body.staff-body .sbo-pin-regenerate,
body.staff-body .sbo-pin-send,
body.staff-body .sbo-pin-modal .sbo-button-label,
body.staff-body .sbo-pin-modal .sbo-button-label__text {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.staff-body .sbo-pin-cancel,
    body.staff-body .sbo-pin-regenerate,
    body.staff-body .sbo-pin-send,
    body.staff-body .sbo-pin-modal .sbo-button-label,
    body.staff-body .sbo-pin-modal .sbo-button-label__text {
        font-size: 18px !important;
    }
}

/* Staff info / usage titles ? =1366px (mobile + tablet): 18px | Desktop: 18px */
body.staff-body .staff-ui .sbo-staff-info strong,
body.staff-body .staff-ui .sbo-staff-usage strong,
body.staff-body .staff-ui .sbo-roles-info strong {
    font-size: 18px !important;
}

@media (max-width: 1366px) {
    body.staff-body .staff-ui .sbo-staff-info strong,
    body.staff-body .staff-ui .sbo-staff-usage strong,
    body.staff-body .staff-ui .sbo-roles-info strong,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-info strong,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-usage strong,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-roles-info strong {
        font-size: 18px !important;
    }
}

/* Staff info / usage supporting copy ? 16px on mobile, tablet, and desktop */
body.staff-body .staff-ui .sbo-staff-info p,
body.staff-body .staff-ui .sbo-roles-info p,
body.staff-body .staff-ui .sbo-staff-usage small {
    font-size: 16px !important;
}

/* Staff card hierarchy ? keep after body-text overrides */
body.staff-body .staff-ui .sbo-staff-card__title > strong {
    font-size: 18px !important;
}

body.staff-body .staff-ui .sbo-role-pill,
body.staff-body .staff-ui .sbo-status-pill,
body.staff-body .staff-ui .sbo-staff-access > span,
body.staff-body .staff-ui .sbo-staff-permissions > span,
body.staff-body .staff-ui .sbo-staff-access-pill,
body.staff-body .staff-ui .sbo-staff-permission-pill {
    font-size: 12px !important;
}

body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
body.staff-body .staff-ui .sbo-regenerate-pin,
body.staff-body .staff-ui .sbo-pin-status {
    font-size: 13px !important;
}

body.staff-body .staff-ui .sbo-staff-meta-line .sbo-staff-phone,
body.staff-body .staff-ui .sbo-staff-card__main > p.sbo-staff-phone {
    font-size: 14px !important;
}

body.staff-body .staff-ui .sbo-staff-meta-line small {
    font-size: 13px !important;
}

/* Last login ? =1366px (mobile + tablet): 14px | Class: staff-last-login */
@media (max-width: 1366px) {
    body.staff-body .staff-ui .sbo-staff-meta-line small.staff-last-login,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-meta-line small.staff-last-login,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-staff-card__main .sbo-staff-meta-line small.staff-last-login {
        font-size: 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.staff-body .staff-ui .sbo-staff-card__title > strong {
        font-size: 20px !important;
    }

    body.staff-body .staff-ui .sbo-role-pill,
    body.staff-body .staff-ui .sbo-status-pill,
    body.staff-body .staff-ui .sbo-staff-access > span,
    body.staff-body .staff-ui .sbo-staff-permissions > span,
    body.staff-body .staff-ui .sbo-staff-access-pill,
    body.staff-body .staff-ui .sbo-staff-permission-pill {
        font-size: 13px !important;
    }

    body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
    body.staff-body .staff-ui .sbo-regenerate-pin,
    body.staff-body .staff-ui .sbo-pin-status {
        font-size: 14px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line .sbo-staff-phone,
    body.staff-body .staff-ui .sbo-staff-card__main > p.sbo-staff-phone {
        font-size: 15px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line small {
        font-size: 14px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body .staff-ui .sbo-staff-card__title > strong {
        font-size: 22px !important;
    }

    body.staff-body .staff-ui .sbo-role-pill,
    body.staff-body .staff-ui .sbo-status-pill,
    body.staff-body .staff-ui .sbo-staff-access > span,
    body.staff-body .staff-ui .sbo-staff-permissions > span,
    body.staff-body .staff-ui .sbo-staff-access-pill,
    body.staff-body .staff-ui .sbo-staff-permission-pill {
        font-size: 14px !important;
    }

    body.staff-body .staff-ui .sbo-staff-security .sbo-pin-mask,
    body.staff-body .staff-ui .sbo-regenerate-pin,
    body.staff-body .staff-ui .sbo-pin-status {
        font-size: 15px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line .sbo-staff-phone,
    body.staff-body .staff-ui .sbo-staff-card__main > p.sbo-staff-phone {
        font-size: 16px !important;
    }

    body.staff-body .staff-ui .sbo-staff-meta-line small {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   Staff & PINs ? mobile header UI fix (<768px)
   Compact row: back + titles + action. Hide feature icon, keep subtitle 1 line.
   ========================================================================== */
@media (max-width: 767px) {
    body.staff-body .staff-ui .sbo-staff-header.staff-header,
    body.staff-body .staff-ui .staff-header {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 0 0 14px 14px !important;
    }

    body.staff-body .staff-header__icon {
        display: none !important;
    }

    body.staff-body .staff-header__back,
    body.staff-body .staff-ui .sbo-back-button.staff-header__back {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    body.staff-body .staff-header__titles {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.staff-body .staff-ui .staff-header__title,
    body.staff-body .staff-ui .sbo-staff-header h1,
    body.sbo-dashboard-body.staff-body .staff-ui h1.staff-header__title,
    body.staff-body .staff-header__title {
        margin: 0 0 2px !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #ffffff !important;
    }

    body.staff-body .staff-ui .staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-header p,
    body.sbo-dashboard-body.staff-body .staff-ui p.staff-header__subtitle,
    body.staff-body .staff-header__subtitle {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: block !important;
    }

    body.staff-body .staff-ui .sbo-add-staff-button.staff-header__action,
    body.staff-body .staff-header__action {
        min-height: 36px !important;
        padding: 0 12px !important;
        gap: 6px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    body.staff-body .staff-header__action svg {
        width: 13px !important;
        height: 13px !important;
    }
}

@media (max-width: 380px) {
    body.staff-body .staff-ui .sbo-staff-header.staff-header,
    body.staff-body .staff-ui .staff-header {
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    body.staff-body .staff-header__subtitle,
    body.staff-body .staff-ui .sbo-staff-header p,
    body.staff-body .staff-ui .staff-header__subtitle {
        display: none !important;
    }

    body.staff-body .staff-ui .sbo-add-staff-button.staff-header__action,
    body.staff-body .staff-header__action {
        padding: 0 10px !important;
        font-size: 16px !important;
        min-height: 34px !important;
    }
}

/* ==========================================================================
   Staff & PINs ? Add/Edit Staff modal UI polish (page-scoped)
   ========================================================================== */

body.staff-body .sbo-add-staff-modal {
    padding: 16px !important;
    place-items: center !important;
}

body.staff-body .sbo-add-staff-modal__dialog {
    width: min(100%, 540px) !important;
    height: min(860px, calc(100vh - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #E0E8FF !important;
    box-shadow: 0 22px 50px rgba(30, 50, 80, 0.18) !important;
}

body.staff-body .sbo-add-staff-modal form {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

body.staff-body .sbo-add-staff-modal__header {
    min-height: 64px !important;
    padding: 14px 18px !important;
    gap: 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #E8EDF3 !important;
    flex: 0 0 auto !important;
}

body.staff-body .sbo-add-staff-modal__header h2,
body.staff-body #add-staff-modal-title {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.staff-body .sbo-add-staff-modal__header > button {
    width: 36px !important;
    height: 36px !important;
    margin-left: 0 !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #647084 !important;
}

body.staff-body .sbo-add-staff-modal__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px 16px 18px !important;
    background: #F8FAFC !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body.staff-body .sbo-add-staff-field {
    margin-bottom: 12px !important;
    gap: 6px !important;
}

body.staff-body .sbo-add-staff-field > span,
body.staff-body .sbo-role-field > span {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.staff-body .sbo-add-staff-field > span small {
    color: #94a3b8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body.staff-body .sbo-add-staff-field > span,
    body.staff-body .sbo-role-field > span {
        font-size: 18px !important;
    }

    body.staff-body .sbo-add-staff-field > span small {
        font-size: 15px !important;
    }
}

body.staff-body .sbo-add-staff-field > input,
body.staff-body .sbo-add-staff-field > select,
body.staff-body .sbo-add-staff-phone {
    min-height: 48px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

body.staff-body .sbo-add-staff-field > input:focus,
body.staff-body .sbo-add-staff-field > select:focus,
body.staff-body .sbo-add-staff-phone:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.staff-body .sbo-add-staff-phone {
    padding: 0 12px !important;
    gap: 8px !important;
}

body.staff-body .sbo-add-staff-phone > b.sbo-inline-icon,
body.staff-body .sbo-add-staff-phone > b.sbo-inline-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: #3366CC !important;
}

body.staff-body .sbo-add-staff-phone > span {
    color: #647084 !important;
    font-size: 14px !important;
    font-family: var(--sb-font-semibold) !important;
    white-space: nowrap !important;
}

body.staff-body .sbo-add-staff-permissions {
    margin: -4px 0 14px !important;
    gap: 6px !important;
}

body.staff-body .sbo-add-staff-permissions > span {
    min-height: 26px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 999px !important;
    color: #475569 !important;
    background: #fff !important;
    font-size: 12px !important;
    font-family: var(--sb-font-semibold) !important;
}

/* PIN note ? mint theme, modern icon */
body.staff-body .sbo-add-staff-pin-note {
    margin: 2px 0 16px !important;
    padding: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 14px !important;
    color: #0f766e !important;
    background: #F0FDFA !important;
}

body.staff-body .sbo-add-staff-pin-note > .sbo-modal-icon,
body.staff-body .sbo-add-staff-pin-note > .sbo-modal-icon.sbo-modal-icon--soft {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: #CCFBF1 !important;
    color: #0d9488 !important;
}

body.staff-body .sbo-add-staff-pin-note > .sbo-modal-icon svg {
    width: 18px !important;
    height: 18px !important;
    color: #0d9488 !important;
}

body.staff-body .sbo-add-staff-pin-note > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.staff-body .sbo-add-staff-pin-note strong {
    display: block !important;
    color: #115e59 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.staff-body .sbo-add-staff-pin-note p {
    margin: 6px 0 10px !important;
    color: #0f766e !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.staff-body .sbo-add-staff-pin-note p b {
    color: #115e59 !important;
    font-family: var(--sb-font-bold) !important;
}

body.staff-body .sbo-add-staff-pin-note small {
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #0f766e !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    body.staff-body .sbo-add-staff-pin-note strong,
    body.staff-body .sbo-add-staff-pin-note p,
    body.staff-body .sbo-add-staff-pin-note p b,
    body.staff-body .sbo-add-staff-pin-note small {
        font-size: 16px !important;
    }
}

body.staff-body .sbo-add-staff-pin-note small .sbo-inline-icon,
body.staff-body .sbo-add-staff-pin-note small .sbo-inline-icon svg {
    width: 14px !important;
    height: 14px !important;
    color: #0d9488 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.staff-body .sbo-add-staff-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

body.staff-body .sbo-add-staff-section__title,
body.staff-body .sbo-add-staff-section legend,
body.staff-body.sbo-dashboard-body .sbo-add-staff-section__title,
body.staff-body.sbo-dashboard-body .sbo-add-staff-section h3.sbo-add-staff-section__title,
body.staff-body .sbo-add-staff-modal .sbo-add-staff-section__title,
body.staff-body .sbo-add-staff-modal h3.sbo-add-staff-section__title {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    position: static !important;
}

@media (min-width: 768px) {
    body.staff-body .sbo-add-staff-section__title,
    body.staff-body .sbo-add-staff-section legend,
    body.staff-body.sbo-dashboard-body .sbo-add-staff-section__title,
    body.staff-body.sbo-dashboard-body .sbo-add-staff-section h3.sbo-add-staff-section__title,
    body.staff-body .sbo-add-staff-modal .sbo-add-staff-section__title,
    body.staff-body .sbo-add-staff-modal h3.sbo-add-staff-section__title {
        font-size: 18px !important;
    }
}

body.staff-body .sbo-add-staff-section__title .sbo-inline-icon,
body.staff-body .sbo-add-staff-section__title .sbo-inline-icon svg,
body.staff-body .sbo-add-staff-section legend .sbo-inline-icon,
body.staff-body .sbo-add-staff-section legend .sbo-inline-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: #3366CC !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

body.staff-body .sbo-add-staff-section > p {
    margin: 6px 0 12px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

body.staff-body .sbo-add-staff-branches {
    display: grid !important;
    width: 100% !important;
    gap: 8px !important;
}

body.staff-body .sbo-add-staff-branches label {
    min-height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
}

body.staff-body .sbo-add-staff-branches span {
    font-size: 14px !important;
    color: #1e293b !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

body.staff-body .sbo-sales-visibility {
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

body.staff-body .sbo-sales-visibility label {
    display: block !important;
    margin: 0 !important;
}

body.staff-body .sbo-sales-visibility label > span {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

body.staff-body .sbo-sales-visibility label > span .sbo-inline-icon,
body.staff-body .sbo-sales-visibility label > span .sbo-inline-icon svg {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    min-height: 0 !important;
}

body.staff-body .sbo-sales-visibility input:checked + span {
    border-color: #3366CC !important;
    color: #3366CC !important;
    background: #E8F0FE !important;
    box-shadow: 0 0 0 1px #3366CC !important;
}

body.staff-body .sbo-add-staff-modal__footer {
    min-height: 0 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #ffffff !important;
    flex: 0 0 auto !important;
}

body.staff-body .sbo-add-staff-cancel,
body.staff-body .sbo-add-staff-only,
body.staff-body .sbo-add-staff-send {
    min-height: 46px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-family: var(--sb-font-bold) !important;
}

body.staff-body .sbo-add-staff-cancel {
    grid-column: 1 !important;
    border: 1px solid #E0E8FF !important;
    color: #475569 !important;
    background: #fff !important;
}

body.staff-body .sbo-add-staff-only {
    grid-column: 2 !important;
    border: 1px solid #E0E8FF !important;
    color: #334155 !important;
    background: #F8FAFC !important;
}

body.staff-body .sbo-add-staff-send {
    grid-column: 1 / -1 !important;
    background: #3366CC !important;
    border: 1px solid #3366CC !important;
    color: #fff !important;
}

body.staff-body .sbo-add-staff-only:disabled,
body.staff-body .sbo-add-staff-send:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body.staff-body .sbo-add-staff-send:disabled {
    background: #93B0E8 !important;
    border-color: #93B0E8 !important;
    color: #ffffff !important;
}

body.staff-body .sbo-add-staff-only:disabled {
    color: #94a3b8 !important;
    background: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

body.staff-body .sbo-add-staff-send .sbo-button-label,
body.staff-body .sbo-add-staff-only .sbo-button-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

body.staff-body .sbo-add-staff-send .sbo-inline-icon,
body.staff-body .sbo-add-staff-send .sbo-inline-icon svg {
    width: 15px !important;
    height: 15px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Compact PIN note + sections so popup fits better */
body.staff-body .sbo-add-staff-pin-note {
    margin: 0 0 12px !important;
    padding: 12px !important;
    gap: 10px !important;
}

body.staff-body .sbo-add-staff-pin-note strong {
    font-size: 14px !important;
}

body.staff-body .sbo-add-staff-pin-note p {
    margin: 4px 0 8px !important;
    font-size: 14px !important;
}

body.staff-body .sbo-add-staff-pin-note small {
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body.staff-body .sbo-add-staff-pin-note strong,
    body.staff-body .sbo-add-staff-pin-note p,
    body.staff-body .sbo-add-staff-pin-note small {
        font-size: 16px !important;
    }
}

body.staff-body .sbo-add-staff-section {
    margin: 0 0 12px !important;
    padding: 12px !important;
}

body.staff-body .sbo-add-staff-section:last-child {
    margin-bottom: 0 !important;
}

body.staff-body .sbo-add-staff-field > input,
body.staff-body .sbo-add-staff-field > select,
body.staff-body .sbo-add-staff-phone {
    min-height: 46px !important;
}

body.staff-body .sbo-add-staff-phone {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    min-height: 46px !important;
    height: 46px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.staff-body .sbo-add-staff-phone > b.sbo-inline-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
    font-size: 0 !important;
    color: #3366CC !important;
}

body.staff-body .sbo-add-staff-phone > b.sbo-inline-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    color: #3366CC !important;
}

body.staff-body .sbo-add-staff-phone > span {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
    border-right: 1px solid #E0E8FF !important;
    background: transparent !important;
    color: #3366CC !important;
    font-size: 15px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

body.staff-body .sbo-add-staff-phone input,
body.staff-body .sbo-add-staff-field .sbo-add-staff-phone input,
body.staff-body .sbo-add-staff-modal .sbo-add-staff-phone input {
    display: block !important;
    flex: 1 1 auto !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #1e293b !important;
    font-size: 15px !important;
    font-family: var(--sb-font-regular) !important;
    line-height: 46px !important;
    vertical-align: middle !important;
}

body.staff-body .sbo-add-staff-phone input:focus,
body.staff-body .sbo-add-staff-field .sbo-add-staff-phone input:focus,
body.staff-body .sbo-add-staff-modal .sbo-add-staff-phone input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.staff-body .sbo-add-staff-phone:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

@media (min-width: 768px) {
    body.staff-body .sbo-add-staff-modal__header h2,
    body.staff-body #add-staff-modal-title {
        font-size: 20px !important;
    }

    body.staff-body .sbo-add-staff-modal__body {
        padding: 18px 20px 20px !important;
    }

    body.staff-body .sbo-add-staff-modal__footer {
        grid-template-columns: .85fr 1fr 1.45fr !important;
        padding: 12px 16px !important;
        gap: 10px !important;
    }

    body.staff-body .sbo-add-staff-cancel,
    body.staff-body .sbo-add-staff-only,
    body.staff-body .sbo-add-staff-send {
        grid-column: auto !important;
        min-height: 46px !important;
        font-size: 14px !important;
    }

    body.staff-body .sbo-sales-visibility label > span {
        min-height: 48px !important;
        font-size: 14px !important;
    }
}

@media (min-width: 1366px) {
    body.staff-body .sbo-add-staff-modal__header h2,
    body.staff-body #add-staff-modal-title {
        font-size: 22px !important;
    }

    body.staff-body .sbo-add-staff-modal__dialog {
        width: min(100%, 560px) !important;
    }
}

@media (max-width: 767px) {
    body.staff-body .sbo-add-staff-modal {
        padding: 14px !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body.staff-body .sbo-add-staff-modal__dialog {
        width: min(100%, 540px) !important;
        height: min(92vh, 920px) !important;
        max-height: calc(100vh - 28px) !important;
        margin: auto !important;
        border-radius: 20px 20px 20px 20px !important;
    }

    body.staff-body .sbo-add-staff-modal__header {
        padding: 12px 14px !important;
        min-height: 56px !important;
    }

    body.staff-body .sbo-add-staff-modal__header h2,
    body.staff-body #add-staff-modal-title {
        font-size: 18px !important;
    }

    body.staff-body .sbo-add-staff-modal__body {
        padding: 12px 14px 14px !important;
    }

    body.staff-body .sbo-sales-visibility {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.staff-body .sbo-sales-visibility label > span {
        min-height: 44px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

    body.staff-body .sbo-add-staff-pin-note {
        padding: 12px !important;
    }

    body.staff-body .sbo-add-staff-pin-note small {
        white-space: normal !important;
    }

    body.staff-body .sbo-add-staff-modal__footer {
        grid-template-columns: 1fr 1fr !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.staff-body .sbo-add-staff-cancel {
        grid-column: 1 !important;
    }

    body.staff-body .sbo-add-staff-only {
        grid-column: 2 !important;
    }

    body.staff-body .sbo-add-staff-send {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 380px) {
    body.staff-body .sbo-sales-visibility {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   STAFF & PINs ? role permission rows UI fix (page-scoped)
   Class: staff-role-perm-ui
   Restore original row layout: check | title | badge (right)
   =1366px fonts: title 18px, portal badge 16px
   Stack badge under title only on small mobile (=520px) ? same as before
   ========================================================================== */
@media (max-width: 1366px) {
    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui {
        gap: 8px !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui > div,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui > div {
        grid-template-columns: 24px minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 10px !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui .sbo-permission-check,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui .sbo-permission-check {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        width: 22px !important;
        height: 22px !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui strong,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
        font-family: var(--sb-font-semibold) !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui small,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui small {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        min-height: 28px !important;
        padding: 4px 10px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 520px) {
    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui > div,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui > div {
        grid-template-columns: 22px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
        padding: 12px 10px !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui .sbo-permission-check,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui .sbo-permission-check {
        grid-row: 1 / span 2 !important;
        align-self: center !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui strong,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui strong {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui small,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-role-permissions.staff-role-perm-ui small {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: start !important;
    }
}

/* ==========================================================================
   STAFF & PINs ? role card header mobile UI fix (page-scoped)
   Classes: staff-role-card, staff-role-card-header
   Mobile: badges + edit on row 1, staff count under badges (no broken wrap)
   ========================================================================== */
body.staff-body .staff-ui .sbo-role-card.staff-role-card .staff-role-card-header,
body.staff-body .staff-ui .staff-role-card-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "badges edit"
        "count edit" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    flex-wrap: nowrap !important;
}

body.staff-body .staff-ui .staff-role-card-header__badges {
    grid-area: badges !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body.staff-body .staff-ui .staff-role-card-header .sbo-role-staff-count {
    grid-area: count !important;
    margin-left: 0 !important;
    width: auto !important;
    order: unset !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.staff-body .staff-ui .staff-role-card-header .sbo-role-edit {
    grid-area: edit !important;
    align-self: start !important;
    justify-self: end !important;
}

@media (min-width: 768px) {
    body.staff-body .staff-ui .sbo-role-card.staff-role-card .staff-role-card-header,
    body.staff-body .staff-ui .staff-role-card-header {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-areas: "badges count edit" !important;
        align-items: center !important;
    }

    body.staff-body .staff-ui .staff-role-card-header .sbo-role-staff-count {
        justify-self: end !important;
        margin-right: 4px !important;
    }

    body.staff-body .staff-ui .staff-role-card-header .sbo-role-edit {
        align-self: center !important;
    }
}

@media (max-width: 767px) {
    body.staff-body .staff-ui .sbo-role-card.staff-role-card {
        padding: 14px 12px !important;
    }

    body.staff-body .staff-ui .staff-role-card-header {
        padding-bottom: 12px !important;
        margin-bottom: 4px !important;
    }

    body.staff-body .staff-ui .staff-role-card-header .sbo-role-name,
    body.staff-body.staff-fs-min-16 .staff-ui .staff-role-card-header .sbo-role-name {
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 16px !important;
    }

    body.staff-body .staff-ui .staff-role-card-header .sbo-system-role,
    body.staff-body.staff-fs-min-16 .staff-ui .staff-role-card-header .sbo-system-role {
        min-height: 28px !important;
        padding: 4px 10px !important;
        font-size: 14px !important;
    }

    body.staff-body .staff-ui .staff-role-card-header .sbo-role-staff-count,
    body.staff-body.staff-fs-min-16 .staff-ui .staff-role-card-header .sbo-role-staff-count {
        font-size: 14px !important;
    }

    body.staff-body .staff-ui .staff-role-card-header .sbo-role-edit {
        width: 40px !important;
        height: 40px !important;
    }

    body.staff-body .staff-ui .sbo-role-permissions.staff-role-perm-ui {
        margin-top: 10px !important;
        gap: 8px !important;
    }

    body.staff-body .staff-ui .sbo-create-role-button,
    body.staff-body.staff-fs-min-16 .staff-ui .sbo-create-role-button {
        min-height: 48px !important;
        font-size: 16px !important;
    }
}


/* ==========================================================================
   STAFF & PINs ? popup/modal font-size 16px (page-scoped)
   Class: staff-popup-fs-16 ? overrides later 14px/13px/12px modal polish rules
   Does not change headings (18/20/22) or icon-only nodes (font-size: 0)
   ========================================================================== */
body.staff-body.staff-popup-fs-16 .sbo-add-staff-modal.staff-popup-fs-16,
body.staff-body.staff-popup-fs-16 .sbo-role-modal.staff-popup-fs-16,
body.staff-body.staff-popup-fs-16 .sbo-pin-modal.staff-popup-fs-16,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-modal.staff-popup-fs-16,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal.staff-popup-fs-16,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-modal,
body.staff-body.staff-popup-fs-16 .sbo-role-modal,
body.staff-body.staff-popup-fs-16 .sbo-pin-modal,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-modal,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal {
    font-size: 16px;
}

/* Explicit overrides for known =14px popup text ? 16px */
body.staff-body.staff-popup-fs-16 .sbo-add-staff-field > span small,
body.staff-body.staff-popup-fs-16 .sbo-role-field > span small,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-phone > span,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-permissions > span,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-pin-note strong,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-pin-note p,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-pin-note p b,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-pin-note small,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-section > p,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-branches span,
body.staff-body.staff-popup-fs-16 .sbo-sales-visibility label > span,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-cancel,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-only,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-send,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-field > input,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-field > select,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-phone,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-modal .sbo-add-staff-phone input,
body.staff-body.staff-popup-fs-16 .sbo-pin-modal__titles p,
body.staff-body.staff-popup-fs-16 .sbo-pin-question,
body.staff-body.staff-popup-fs-16 .sbo-pin-privacy p,
body.staff-body.staff-popup-fs-16 .sbo-pin-details dt,
body.staff-body.staff-popup-fs-16 .sbo-pin-details dd,
body.staff-body.staff-popup-fs-16 .sbo-pin-details dd small,
body.staff-body.staff-popup-fs-16 .sbo-role-permission-option strong,
body.staff-body.staff-popup-fs-16 .sbo-role-permission-option small,
body.staff-body.staff-popup-fs-16 .sbo-role-permission-option em,
body.staff-body.staff-popup-fs-16 .sbo-role-modal__notice p,
body.staff-body.staff-popup-fs-16 .sbo-role-modal__notice small,
body.staff-body.staff-popup-fs-16 .sbo-role-modal__notice strong,
body.staff-body.staff-popup-fs-16 .sbo-role-cancel,
body.staff-body.staff-popup-fs-16 .sbo-role-modal__footer button,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-modal p,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-modal strong,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-cancel,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-submit,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal__body strong,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal__body p,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal__dialog footer button,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal p,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal strong {
    font-size: 16px !important;
}

/* Keep icon-only / close controls at 0 inside popups */
body.staff-body.staff-popup-fs-16 .sbo-add-staff-modal [aria-hidden="true"],
body.staff-body.staff-popup-fs-16 .sbo-role-modal [aria-hidden="true"],
body.staff-body.staff-popup-fs-16 .sbo-pin-modal [aria-hidden="true"],
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-modal [aria-hidden="true"],
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal [aria-hidden="true"],
body.staff-body.staff-popup-fs-16 .sbo-modal-icon,
body.staff-body.staff-popup-fs-16 .sbo-pin-modal__header > button,
body.staff-body.staff-popup-fs-16 .sbo-pin-privacy__icon,
body.staff-body.staff-popup-fs-16 .sbo-pin-details__pin-icon,
body.staff-body.staff-popup-fs-16 .sbo-role-modal__close,
body.staff-body.staff-popup-fs-16 .sbo-add-staff-modal__header > button,
body.staff-body.staff-popup-fs-16 .sbo-remove-staff-modal__header > button,
body.staff-body.staff-popup-fs-16 .sbo-staff-limit-modal header > button,
body.staff-body.staff-popup-fs-16 .sbo-button-loader {
    font-size: 0 !important;
}


/* ==========================================================================
   Approvals ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.approvals-body.sbo-dashboard-body h1,
body.approvals-body.sbo-dashboard-body h2,
body.approvals-body.sbo-dashboard-body h3,
body.approvals-body.sbo-dashboard-body h4,
body.approvals-body .approvals-ui .approvals-header__title,
body.approvals-body .approvals-ui .sbo-approvals-header h1,
body.approvals-body .approvals-header__title,
body.approvals-body .approvals-header h1,
body.sbo-dashboard-body.approvals-body .approvals-ui h1.approvals-header__title,
body.approvals-body .approvals-ui .sbo-approval-card__copy h2,
body.approvals-body .approvals-ui .sbo-approvals-empty h2 {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.approvals-body.sbo-dashboard-body h1,
    body.approvals-body.sbo-dashboard-body h2,
    body.approvals-body.sbo-dashboard-body h3,
    body.approvals-body.sbo-dashboard-body h4,
    body.approvals-body .approvals-ui .approvals-header__title,
    body.approvals-body .approvals-ui .sbo-approvals-header h1,
    body.approvals-body .approvals-header__title,
    body.approvals-body .approvals-header h1,
    body.sbo-dashboard-body.approvals-body .approvals-ui h1.approvals-header__title,
    body.approvals-body .approvals-ui .sbo-approval-card__copy h2,
    body.approvals-body .approvals-ui .sbo-approvals-empty h2 {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.approvals-body.sbo-dashboard-body h1,
    body.approvals-body.sbo-dashboard-body h2,
    body.approvals-body.sbo-dashboard-body h3,
    body.approvals-body.sbo-dashboard-body h4,
    body.approvals-body .approvals-ui .approvals-header__title,
    body.approvals-body .approvals-ui .sbo-approvals-header h1,
    body.approvals-body .approvals-header__title,
    body.approvals-body .approvals-header h1,
    body.sbo-dashboard-body.approvals-body .approvals-ui h1.approvals-header__title,
    body.approvals-body .approvals-ui .sbo-approval-card__copy h2,
    body.approvals-body .approvals-ui .sbo-approvals-empty h2 {
        font-size: 22px !important;
    }
}


/* ==========================================================================
   Approvals ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the Approvals heading block above.
   ========================================================================== */

body.approvals-body,
body.approvals-body .approvals-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.approvals-body .approvals-ui .approvals-header__subtitle,
body.approvals-body .approvals-ui .sbo-approvals-header p,
body.approvals-body .approvals-ui p.approvals-header__subtitle,
body.approvals-body .approvals-ui .sbo-approvals-summary small,
body.approvals-body .approvals-ui .sbo-approvals-toolbar > small,
body.approvals-body .approvals-ui .sbo-approval-card__copy p,
body.approvals-body .approvals-ui .sbo-approval-card__meta,
body.approvals-body .approvals-ui .sbo-approval-card__reason p,
body.approvals-body .approvals-ui .sbo-approvals-empty p,
body.approvals-body .approvals-ui .sbo-alert,
body.approvals-body .approvals-ui .sbo-approvals-loader,
body.approvals-body .approvals-ui .sbo-approvals-loader span,
body.approvals-body .sbo-bottom-nav a,
body.approvals-body .approvals-ui .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Small chips / badges / counts */
body.approvals-body .approvals-ui .sbo-approvals-header__badge,
body.approvals-body .approvals-header__badge,
body.approvals-body .approvals-ui .sbo-approvals-tabs a span,
body.approvals-body .approvals-ui .sbo-approvals-tabs button span,
body.approvals-body .approvals-ui .sbo-approval-card__copy p span,
body.approvals-body .approvals-ui .sbo-approval-card__copy p em,
body.approvals-body .approvals-ui .sbo-approval-status {
    font-size: 12px !important;
}

/* Body / UI actions */
body.approvals-body .approvals-ui .sbo-approvals-select,
body.approvals-body .approvals-ui .sbo-approvals-select select,
body.approvals-body .approvals-ui .sbo-approvals-custom-range input[type="date"],
body.approvals-body .approvals-ui .sbo-approvals-custom-range button,
body.approvals-body .approvals-ui .sbo-approval-card__actions button,
body.approvals-body .approvals-ui .sbo-approval-card__meta strong,
body.approvals-body .approvals-ui p,
body.approvals-body .approvals-ui span,
body.approvals-body .approvals-ui small,
body.approvals-body .approvals-ui label,
body.approvals-body .approvals-ui a,
body.approvals-body .approvals-ui button,
body.approvals-body .approvals-ui input,
body.approvals-body .approvals-ui select,
body.approvals-body .approvals-ui strong,
body.approvals-body .approvals-ui b,
body.approvals-body .approvals-ui em {
    font-size: 14px !important;
}

/* Status tabs: 16px mobile, 18px tablet/desktop */
body.approvals-body .approvals-ui .sbo-approvals-tabs a,
body.approvals-body .approvals-ui .sbo-approvals-tabs button {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.approvals-body .approvals-ui .sbo-approvals-tabs a,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button {
        font-size: 18px !important;
    }
}

/* Mid emphasis ? bottom nav labels */
body.approvals-body .sbo-bottom-nav a span,
body.approvals-body .sbo-bottom-nav .sbo-bottom-nav__label,
body.approvals-body .approvals-ui .sbo-bottom-nav a span,
body.approvals-body .approvals-ui .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Summary counts */
body.approvals-body .approvals-ui .sbo-approvals-summary strong {
    font-size: 22px !important;
}

/* Keep icon containers from inheriting text sizes */
body.approvals-body .approvals-ui [aria-hidden="true"],
body.approvals-body .sbo-bottom-nav__icon,
body.approvals-body .approvals-header__icon,
body.approvals-body .approvals-header__back,
body.approvals-body .approvals-ui .sbo-approvals-loader i,
body.approvals-body .approvals-ui .sbo-approval-card__reason > span,
body.approvals-body .approvals-ui .sbo-approvals-empty > span {
    font-size: 0 !important;
}

/* Filter select icons must match the select text size */
body.approvals-body .approvals-ui .sbo-approvals-select__icon,
body.approvals-body .approvals-ui .sbo-approvals-select__icon[aria-hidden="true"] {
    font-size: inherit !important;
}

body.approvals-body .approvals-ui .sbo-approvals-select__icon svg {
    width: 1em !important;
    height: 1em !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.approvals-body,
    body.approvals-body .approvals-ui {
        font-size: 15px !important;
    }

    body.approvals-body .approvals-ui .approvals-header__subtitle,
    body.approvals-body .approvals-ui .sbo-approvals-header p,
    body.approvals-body .approvals-ui p.approvals-header__subtitle,
    body.approvals-body .approvals-ui .sbo-approvals-summary small,
    body.approvals-body .approvals-ui .sbo-approvals-toolbar > small,
    body.approvals-body .approvals-ui .sbo-approval-card__copy p,
    body.approvals-body .approvals-ui .sbo-approval-card__meta,
    body.approvals-body .approvals-ui .sbo-approval-card__reason p,
    body.approvals-body .approvals-ui .sbo-approvals-empty p,
    body.approvals-body .approvals-ui .sbo-alert,
    body.approvals-body .approvals-ui .sbo-approvals-loader,
    body.approvals-body .approvals-ui .sbo-approvals-loader span,
    body.approvals-body .sbo-bottom-nav a,
    body.approvals-body .approvals-ui .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-header__badge,
    body.approvals-body .approvals-header__badge,
    body.approvals-body .approvals-ui .sbo-approvals-tabs a span,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button span,
    body.approvals-body .approvals-ui .sbo-approval-card__copy p span,
    body.approvals-body .approvals-ui .sbo-approval-card__copy p em,
    body.approvals-body .approvals-ui .sbo-approval-status {
        font-size: 13px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-select,
    body.approvals-body .approvals-ui .sbo-approvals-select select,
    body.approvals-body .approvals-ui .sbo-approvals-custom-range input[type="date"],
    body.approvals-body .approvals-ui .sbo-approvals-custom-range button,
    body.approvals-body .approvals-ui .sbo-approval-card__actions button,
    body.approvals-body .approvals-ui .sbo-approval-card__meta strong,
    body.approvals-body .approvals-ui p,
    body.approvals-body .approvals-ui span,
    body.approvals-body .approvals-ui small,
    body.approvals-body .approvals-ui label,
    body.approvals-body .approvals-ui a,
    body.approvals-body .approvals-ui button,
    body.approvals-body .approvals-ui input,
    body.approvals-body .approvals-ui select,
    body.approvals-body .approvals-ui strong,
    body.approvals-body .approvals-ui b,
    body.approvals-body .approvals-ui em {
        font-size: 15px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs a,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button {
        font-size: 18px !important;
    }

    body.approvals-body .sbo-bottom-nav a span,
    body.approvals-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.approvals-body .approvals-ui .sbo-bottom-nav a span,
    body.approvals-body .approvals-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary strong {
        font-size: 24px !important;
    }

    body.approvals-body .approvals-ui [aria-hidden="true"],
    body.approvals-body .sbo-bottom-nav__icon,
    body.approvals-body .approvals-header__icon,
    body.approvals-body .approvals-header__back,
    body.approvals-body .approvals-ui .sbo-approvals-loader i,
    body.approvals-body .approvals-ui .sbo-approval-card__reason > span,
    body.approvals-body .approvals-ui .sbo-approvals-empty > span {
        font-size: 0 !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-select__icon,
    body.approvals-body .approvals-ui .sbo-approvals-select__icon[aria-hidden="true"] {
        font-size: inherit !important;
    }
}

@media (min-width: 1366px) {
    body.approvals-body,
    body.approvals-body .approvals-ui {
        font-size: 16px !important;
    }

    body.approvals-body .approvals-ui .approvals-header__subtitle,
    body.approvals-body .approvals-ui .sbo-approvals-header p,
    body.approvals-body .approvals-ui p.approvals-header__subtitle,
    body.approvals-body .approvals-ui .sbo-approvals-summary small,
    body.approvals-body .approvals-ui .sbo-approvals-toolbar > small,
    body.approvals-body .approvals-ui .sbo-approval-card__copy p,
    body.approvals-body .approvals-ui .sbo-approval-card__meta,
    body.approvals-body .approvals-ui .sbo-approval-card__reason p,
    body.approvals-body .approvals-ui .sbo-approvals-empty p,
    body.approvals-body .approvals-ui .sbo-alert,
    body.approvals-body .approvals-ui .sbo-approvals-loader,
    body.approvals-body .approvals-ui .sbo-approvals-loader span,
    body.approvals-body .sbo-bottom-nav a,
    body.approvals-body .approvals-ui .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-header__badge,
    body.approvals-body .approvals-header__badge,
    body.approvals-body .approvals-ui .sbo-approvals-tabs a span,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button span,
    body.approvals-body .approvals-ui .sbo-approval-card__copy p span,
    body.approvals-body .approvals-ui .sbo-approval-card__copy p em,
    body.approvals-body .approvals-ui .sbo-approval-status {
        font-size: 14px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-select,
    body.approvals-body .approvals-ui .sbo-approvals-select select,
    body.approvals-body .approvals-ui .sbo-approvals-custom-range input[type="date"],
    body.approvals-body .approvals-ui .sbo-approvals-custom-range button,
    body.approvals-body .approvals-ui .sbo-approval-card__actions button,
    body.approvals-body .approvals-ui .sbo-approval-card__meta strong,
    body.approvals-body .approvals-ui p,
    body.approvals-body .approvals-ui span,
    body.approvals-body .approvals-ui small,
    body.approvals-body .approvals-ui label,
    body.approvals-body .approvals-ui a,
    body.approvals-body .approvals-ui button,
    body.approvals-body .approvals-ui input,
    body.approvals-body .approvals-ui select,
    body.approvals-body .approvals-ui strong,
    body.approvals-body .approvals-ui b,
    body.approvals-body .approvals-ui em {
        font-size: 16px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-tabs a,
    body.approvals-body .approvals-ui .sbo-approvals-tabs button {
        font-size: 18px !important;
    }

    body.approvals-body .sbo-bottom-nav a span,
    body.approvals-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.approvals-body .approvals-ui .sbo-bottom-nav a span,
    body.approvals-body .approvals-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-summary strong {
        font-size: 26px !important;
    }

    body.approvals-body .approvals-ui [aria-hidden="true"],
    body.approvals-body .sbo-bottom-nav__icon,
    body.approvals-body .approvals-header__icon,
    body.approvals-body .approvals-header__back,
    body.approvals-body .approvals-ui .sbo-approvals-loader i,
    body.approvals-body .approvals-ui .sbo-approval-card__reason > span,
    body.approvals-body .approvals-ui .sbo-approvals-empty > span {
        font-size: 0 !important;
    }

    body.approvals-body .approvals-ui .sbo-approvals-select__icon,
    body.approvals-body .approvals-ui .sbo-approvals-select__icon[aria-hidden="true"] {
        font-size: inherit !important;
    }
}

/* ==========================================================================
   Services & Items ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.catalog-body.sbo-dashboard-body h1,
body.catalog-body.sbo-dashboard-body h2,
body.catalog-body.sbo-dashboard-body h3,
body.catalog-body.sbo-dashboard-body h4,
body.catalog-body .catalog-ui .catalog-header__title,
body.catalog-body .catalog-ui .sbo-catalog-header h1,
body.catalog-body .catalog-header__title,
body.catalog-body .catalog-header h1,
body.sbo-dashboard-body.catalog-body .catalog-ui h1.catalog-header__title,
body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
body.catalog-body .catalog-ui .sbo-category-card h3,
body.catalog-body .catalog-ui .sbo-catalog-empty h3,
body.catalog-body .sbo-catalog-modal h2,
body.catalog-body .sbo-catalog-modal__dialog h2,
body.catalog-body #category-modal-title,
body.catalog-body #item-modal-title {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.catalog-body.sbo-dashboard-body h1,
    body.catalog-body.sbo-dashboard-body h2,
    body.catalog-body.sbo-dashboard-body h3,
    body.catalog-body.sbo-dashboard-body h4,
    body.catalog-body .catalog-ui .catalog-header__title,
    body.catalog-body .catalog-ui .sbo-catalog-header h1,
    body.catalog-body .catalog-header__title,
    body.catalog-body .catalog-header h1,
    body.sbo-dashboard-body.catalog-body .catalog-ui h1.catalog-header__title,
    body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body .catalog-ui .sbo-category-card h3,
    body.catalog-body .catalog-ui .sbo-catalog-empty h3 {
        font-size: 20px !important;
    }

    body.catalog-body .sbo-catalog-modal h2,
    body.catalog-body .sbo-catalog-modal__dialog h2,
    body.catalog-body #category-modal-title,
    body.catalog-body #item-modal-title {
        font-size: 22px !important;
    }
}

@media (min-width: 1366px) {
    body.catalog-body.sbo-dashboard-body h1,
    body.catalog-body.sbo-dashboard-body h2,
    body.catalog-body.sbo-dashboard-body h3,
    body.catalog-body.sbo-dashboard-body h4,
    body.catalog-body .catalog-ui .catalog-header__title,
    body.catalog-body .catalog-ui .sbo-catalog-header h1,
    body.catalog-body .catalog-header__title,
    body.catalog-body .catalog-header h1,
    body.sbo-dashboard-body.catalog-body .catalog-ui h1.catalog-header__title,
    body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body .catalog-ui .sbo-category-card h3,
    body.catalog-body .catalog-ui .sbo-catalog-empty h3,
    body.catalog-body .sbo-catalog-modal h2,
    body.catalog-body .sbo-catalog-modal__dialog h2,
    body.catalog-body #category-modal-title,
    body.catalog-body #item-modal-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   Services & Items ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the Services & Items heading block above.
   ========================================================================== */

body.catalog-body,
body.catalog-body .catalog-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.catalog-body .catalog-ui .catalog-header__subtitle,
body.catalog-body .catalog-ui .sbo-catalog-header p,
body.catalog-body .catalog-ui p.catalog-header__subtitle,
body.catalog-body .catalog-ui .sbo-catalog-stats small,
body.catalog-body .catalog-ui .sbo-catalog-search__status,
body.catalog-body .catalog-ui .sbo-catalog-item__tags small,
body.catalog-body .catalog-ui .sbo-catalog-tip,
body.catalog-body .catalog-ui .sbo-catalog-tip p,
body.catalog-body .catalog-ui .sbo-catalog-tip span,
body.catalog-body .catalog-ui .sbo-category-card p,
body.catalog-body .catalog-ui .sbo-catalog-empty p,
body.catalog-body .sbo-catalog-modal label,
body.catalog-body .sbo-catalog-modal small,
body.catalog-body .sbo-catalog-modal p,
body.catalog-body .sbo-item-option small,
body.catalog-body .sbo-commission-rate,
body.catalog-body .sbo-commission-rate span,
body.catalog-body .sbo-emoji-selected span,
body.catalog-body .sbo-category-preview,
body.catalog-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Small chips / tags / pills */
body.catalog-body .catalog-ui .sbo-catalog-tag,
body.catalog-body .sbo-color-picker legend,
body.catalog-body .sbo-color-picker button {
    font-size: 12px !important;
}

/* Body / UI actions */
body.catalog-body .catalog-ui .catalog-header__action,
body.catalog-body .catalog-header__action,
body.catalog-body .catalog-header__action [data-catalog-primary-label],
body.catalog-body .catalog-ui .sbo-catalog-tabs button,
body.catalog-body .catalog-ui .sbo-catalog-search input,
body.catalog-body .catalog-ui .sbo-catalog-filters select,
body.catalog-body .catalog-ui .sbo-catalog-actions button,
body.catalog-body .catalog-ui .sbo-new-category-row,
body.catalog-body .catalog-ui .sbo-catalog-price,
body.catalog-body .catalog-ui p,
body.catalog-body .catalog-ui span,
body.catalog-body .catalog-ui small,
body.catalog-body .catalog-ui label,
body.catalog-body .catalog-ui a,
body.catalog-body .catalog-ui button,
body.catalog-body .catalog-ui input,
body.catalog-body .catalog-ui select,
body.catalog-body .catalog-ui strong,
body.catalog-body .catalog-ui b,
body.catalog-body .catalog-ui em,
body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
body.catalog-body .sbo-catalog-modal select,
body.catalog-body .sbo-catalog-modal__buttons button,
body.catalog-body .sbo-item-option strong,
body.catalog-body .sbo-emoji-selected,
body.catalog-body .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Mid emphasis ? bottom nav labels */
body.catalog-body .sbo-bottom-nav a span,
body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__label,
body.catalog-body .catalog-ui .sbo-bottom-nav a span,
body.catalog-body .catalog-ui .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Stats counts */
body.catalog-body .catalog-ui .sbo-catalog-stats strong {
    font-size: 22px !important;
}

/* Keep icon containers from inheriting text sizes */
body.catalog-body .catalog-ui [aria-hidden="true"],
body.catalog-body .sbo-bottom-nav__icon,
body.catalog-body .catalog-header__icon,
body.catalog-body .catalog-header__back,
body.catalog-body .catalog-ui .sbo-catalog-search__icon,
body.catalog-body .catalog-ui .sbo-catalog-search__loader,
body.catalog-body .catalog-ui .sbo-catalog-tip__icon,
body.catalog-body .sbo-inline-icon,
body.catalog-body .catalog-ui .sbo-inline-icon,
body.catalog-body .sbo-catalog-modal .sbo-inline-icon {
    font-size: 0 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.catalog-body,
    body.catalog-body .catalog-ui {
        font-size: 15px !important;
    }

    body.catalog-body .catalog-ui .catalog-header__subtitle,
    body.catalog-body .catalog-ui .sbo-catalog-header p,
    body.catalog-body .catalog-ui p.catalog-header__subtitle,
    body.catalog-body .catalog-ui .sbo-catalog-stats small,
    body.catalog-body .catalog-ui .sbo-catalog-search__status,
    body.catalog-body .catalog-ui .sbo-catalog-item__tags small,
    body.catalog-body .catalog-ui .sbo-catalog-tip,
    body.catalog-body .catalog-ui .sbo-catalog-tip p,
    body.catalog-body .catalog-ui .sbo-catalog-tip span,
    body.catalog-body .catalog-ui .sbo-category-card p,
    body.catalog-body .catalog-ui .sbo-catalog-empty p,
    body.catalog-body .sbo-catalog-modal label,
    body.catalog-body .sbo-catalog-modal small,
    body.catalog-body .sbo-catalog-modal p,
    body.catalog-body .sbo-item-option small,
    body.catalog-body .sbo-commission-rate,
    body.catalog-body .sbo-commission-rate span,
    body.catalog-body .sbo-emoji-selected span,
    body.catalog-body .sbo-category-preview,
    body.catalog-body .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.catalog-body .catalog-ui .sbo-catalog-tag,
    body.catalog-body .sbo-color-picker legend,
    body.catalog-body .sbo-color-picker button {
        font-size: 13px !important;
    }

    body.catalog-body .catalog-ui .catalog-header__action,
    body.catalog-body .catalog-header__action,
    body.catalog-body .catalog-header__action [data-catalog-primary-label],
    body.catalog-body .catalog-ui .sbo-catalog-tabs button,
    body.catalog-body .catalog-ui .sbo-catalog-search input,
    body.catalog-body .catalog-ui .sbo-catalog-filters select,
    body.catalog-body .catalog-ui .sbo-catalog-actions button,
    body.catalog-body .catalog-ui .sbo-new-category-row,
    body.catalog-body .catalog-ui .sbo-catalog-price,
    body.catalog-body .catalog-ui p,
    body.catalog-body .catalog-ui span,
    body.catalog-body .catalog-ui small,
    body.catalog-body .catalog-ui label,
    body.catalog-body .catalog-ui a,
    body.catalog-body .catalog-ui button,
    body.catalog-body .catalog-ui input,
    body.catalog-body .catalog-ui select,
    body.catalog-body .catalog-ui strong,
    body.catalog-body .catalog-ui b,
    body.catalog-body .catalog-ui em,
    body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
    body.catalog-body .sbo-catalog-modal select,
    body.catalog-body .sbo-catalog-modal__buttons button,
    body.catalog-body .sbo-item-option strong,
    body.catalog-body .sbo-emoji-selected,
    body.catalog-body .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.catalog-body .sbo-bottom-nav a span,
    body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.catalog-body .catalog-ui .sbo-bottom-nav a span,
    body.catalog-body .catalog-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.catalog-body .catalog-ui .sbo-catalog-stats strong {
        font-size: 24px !important;
    }

    body.catalog-body .catalog-ui [aria-hidden="true"],
    body.catalog-body .sbo-bottom-nav__icon,
    body.catalog-body .catalog-header__icon,
    body.catalog-body .catalog-header__back,
    body.catalog-body .catalog-ui .sbo-catalog-search__icon,
    body.catalog-body .catalog-ui .sbo-catalog-search__loader,
    body.catalog-body .catalog-ui .sbo-catalog-tip__icon,
    body.catalog-body .sbo-inline-icon,
    body.catalog-body .catalog-ui .sbo-inline-icon,
    body.catalog-body .sbo-catalog-modal .sbo-inline-icon {
        font-size: 0 !important;
    }
}

@media (min-width: 1366px) {
    body.catalog-body,
    body.catalog-body .catalog-ui {
        font-size: 16px !important;
    }

    body.catalog-body .catalog-ui .catalog-header__subtitle,
    body.catalog-body .catalog-ui .sbo-catalog-header p,
    body.catalog-body .catalog-ui p.catalog-header__subtitle,
    body.catalog-body .catalog-ui .sbo-catalog-stats small,
    body.catalog-body .catalog-ui .sbo-catalog-search__status,
    body.catalog-body .catalog-ui .sbo-catalog-item__tags small,
    body.catalog-body .catalog-ui .sbo-catalog-tip,
    body.catalog-body .catalog-ui .sbo-catalog-tip p,
    body.catalog-body .catalog-ui .sbo-catalog-tip span,
    body.catalog-body .catalog-ui .sbo-category-card p,
    body.catalog-body .catalog-ui .sbo-catalog-empty p,
    body.catalog-body .sbo-catalog-modal label,
    body.catalog-body .sbo-catalog-modal small,
    body.catalog-body .sbo-catalog-modal p,
    body.catalog-body .sbo-item-option small,
    body.catalog-body .sbo-commission-rate,
    body.catalog-body .sbo-commission-rate span,
    body.catalog-body .sbo-emoji-selected span,
    body.catalog-body .sbo-category-preview,
    body.catalog-body .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.catalog-body .catalog-ui .sbo-catalog-tag,
    body.catalog-body .sbo-color-picker legend,
    body.catalog-body .sbo-color-picker button {
        font-size: 14px !important;
    }

    body.catalog-body .catalog-ui .catalog-header__action,
    body.catalog-body .catalog-header__action,
    body.catalog-body .catalog-header__action [data-catalog-primary-label],
    body.catalog-body .catalog-ui .sbo-catalog-tabs button,
    body.catalog-body .catalog-ui .sbo-catalog-search input,
    body.catalog-body .catalog-ui .sbo-catalog-filters select,
    body.catalog-body .catalog-ui .sbo-catalog-actions button,
    body.catalog-body .catalog-ui .sbo-new-category-row,
    body.catalog-body .catalog-ui .sbo-catalog-price,
    body.catalog-body .catalog-ui p,
    body.catalog-body .catalog-ui span,
    body.catalog-body .catalog-ui small,
    body.catalog-body .catalog-ui label,
    body.catalog-body .catalog-ui a,
    body.catalog-body .catalog-ui button,
    body.catalog-body .catalog-ui input,
    body.catalog-body .catalog-ui select,
    body.catalog-body .catalog-ui strong,
    body.catalog-body .catalog-ui b,
    body.catalog-body .catalog-ui em,
    body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
    body.catalog-body .sbo-catalog-modal select,
    body.catalog-body .sbo-catalog-modal__buttons button,
    body.catalog-body .sbo-item-option strong,
    body.catalog-body .sbo-emoji-selected,
    body.catalog-body .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.catalog-body .sbo-bottom-nav a span,
    body.catalog-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.catalog-body .catalog-ui .sbo-bottom-nav a span,
    body.catalog-body .catalog-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.catalog-body .catalog-ui .sbo-catalog-stats strong {
        font-size: 26px !important;
    }

    body.catalog-body .catalog-ui [aria-hidden="true"],
    body.catalog-body .sbo-bottom-nav__icon,
    body.catalog-body .catalog-header__icon,
    body.catalog-body .catalog-header__back,
    body.catalog-body .catalog-ui .sbo-catalog-search__icon,
    body.catalog-body .catalog-ui .sbo-catalog-search__loader,
    body.catalog-body .catalog-ui .sbo-catalog-tip__icon,
    body.catalog-body .sbo-inline-icon,
    body.catalog-body .catalog-ui .sbo-inline-icon,
    body.catalog-body .sbo-catalog-modal .sbo-inline-icon {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   Services & Items ? modern SVG icons (page-scoped)
   ========================================================================== */

body.catalog-body .sbo-inline-icon,
body.catalog-body .catalog-ui .sbo-inline-icon,
body.catalog-body .sbo-catalog-modal .sbo-inline-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: inherit !important;
    vertical-align: middle;
}

body.catalog-body .sbo-inline-icon[hidden],
body.catalog-body .catalog-ui .sbo-inline-icon[hidden],
body.catalog-body .sbo-catalog-modal .sbo-inline-icon[hidden],
body.catalog-body .catalog-header__action .sbo-inline-icon[hidden] {
    display: none !important;
}

body.catalog-body .sbo-inline-icon svg,
body.catalog-body .catalog-ui .sbo-inline-icon svg,
body.catalog-body .sbo-catalog-modal .sbo-inline-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

body.catalog-body .sbo-inline-icon--lg,
body.catalog-body .catalog-ui .sbo-catalog-empty .sbo-inline-icon--lg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    color: #3366CC !important;
}

body.catalog-body .sbo-inline-icon--lg svg,
body.catalog-body .catalog-ui .sbo-catalog-empty .sbo-inline-icon--lg svg {
    width: 28px !important;
    height: 28px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag .sbo-inline-icon,
body.catalog-body .sbo-item-option strong .sbo-inline-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag .sbo-inline-icon svg,
body.catalog-body .sbo-item-option strong .sbo-inline-icon svg {
    width: 12px !important;
    height: 12px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-actions button,
body.catalog-body .catalog-ui .sbo-new-category-row,
body.catalog-body .catalog-header__action,
body.catalog-body .sbo-color-picker legend,
body.catalog-body .sbo-item-option strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.catalog-body .catalog-ui .sbo-new-category-row {
    width: 100% !important;
    justify-content: center !important;
}

body.catalog-body .catalog-ui .sbo-category-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

body.catalog-body .catalog-ui .sbo-category-open .sbo-inline-icon,
body.catalog-body .catalog-ui .sbo-category-open .sbo-inline-icon svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tip__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    font-size: 0 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tip__icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor;
}

body.catalog-body .catalog-ui .sbo-catalog-tip,
body.catalog-body .catalog-ui .sbo-catalog-tip p,
body.catalog-body .catalog-ui .sbo-catalog-tip b {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

@media (min-width: 768px) {
    body.catalog-body .catalog-ui .sbo-catalog-tip,
    body.catalog-body .catalog-ui .sbo-catalog-tip p,
    body.catalog-body .catalog-ui .sbo-catalog-tip b {
        font-size: 18px !important;
    }
}

body.catalog-body .sbo-catalog-modal__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

body.catalog-body .sbo-catalog-modal h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.catalog-body .sbo-catalog-modal h2:first-letter {
    color: inherit !important;
}

/* ==========================================================================
   Services & Items ? modal theme + modern icon surfaces (page-scoped)
   ========================================================================== */

body.catalog-body .sbo-catalog-modal {
    padding: 20px !important;
    place-items: center !important;
    background: transparent !important;
}

body.catalog-body .sbo-catalog-modal__backdrop {
    background: rgba(15, 23, 42, 0.55) !important;
}

body.catalog-body .sbo-catalog-modal__dialog,
body.catalog-body .sbo-item-modal__dialog {
    width: min(100%, 480px) !important;
    max-height: calc(100vh - 40px) !important;
    padding: 24px 24px 22px !important;
    border-radius: 16px !important;
    border: 1px solid #E0E8FF !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
}

body.catalog-body .sbo-catalog-modal__close {
    width: 36px !important;
    height: 36px !important;
    top: 16px !important;
    right: 16px !important;
    border-radius: 10px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
}

body.catalog-body .sbo-catalog-modal__close:hover {
    background: #E2E8F0 !important;
    color: #1e293b !important;
}

body.catalog-body .sbo-catalog-modal h2,
body.catalog-body .sbo-catalog-modal__dialog h2,
body.catalog-body #category-modal-title,
body.catalog-body #item-modal-title {
    margin: 0 44px 20px 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
}

body.catalog-body .sbo-catalog-modal h2 span:not(.sbo-inline-icon),
body.catalog-body .sbo-catalog-modal__dialog h2 span:not(.sbo-inline-icon),
body.catalog-body #category-modal-title span:not(.sbo-inline-icon),
body.catalog-body #item-modal-title span:not(.sbo-inline-icon),
body.catalog-body .sbo-catalog-modal [data-item-modal-title],
body.catalog-body .sbo-catalog-modal [data-category-modal-title] {
    font-size: 18px !important;
    font-family: var(--sb-font-bold) !important;
    color: inherit !important;
    line-height: inherit !important;
}

@media (min-width: 768px) {
    body.catalog-body .sbo-catalog-modal h2,
    body.catalog-body .sbo-catalog-modal__dialog h2,
    body.catalog-body #category-modal-title,
    body.catalog-body #item-modal-title,
    body.catalog-body .sbo-catalog-modal h2 span:not(.sbo-inline-icon),
    body.catalog-body .sbo-catalog-modal__dialog h2 span:not(.sbo-inline-icon),
    body.catalog-body #category-modal-title span:not(.sbo-inline-icon),
    body.catalog-body #item-modal-title span:not(.sbo-inline-icon),
    body.catalog-body .sbo-catalog-modal [data-item-modal-title],
    body.catalog-body .sbo-catalog-modal [data-category-modal-title] {
        font-size: 22px !important;
    }
}

body.catalog-body .sbo-catalog-modal h2 .sbo-inline-icon,
body.catalog-body .sbo-catalog-modal h2 .sbo-inline-icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    color: #3366CC !important;
}

body.catalog-body .sbo-catalog-modal form {
    gap: 14px !important;
}

body.catalog-body .sbo-catalog-field,
body.catalog-body .sbo-catalog-modal label.sbo-catalog-field {
    display: grid !important;
    gap: 6px !important;
}

body.catalog-body .sbo-catalog-modal .sbo-catalog-field__label,
body.catalog-body .sbo-catalog-modal span.sbo-catalog-field__label,
body.catalog-body .sbo-catalog-modal .sbo-commission-rate .sbo-catalog-field__label {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    body.catalog-body .sbo-catalog-modal .sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal span.sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal .sbo-commission-rate .sbo-catalog-field__label {
        font-size: 18px !important;
    }
}

body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
body.catalog-body .sbo-catalog-modal select {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.catalog-body .sbo-catalog-modal input:focus,
body.catalog-body .sbo-catalog-modal select:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    outline: 0 !important;
}

body.catalog-body .sbo-emoji-selected {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #64748B !important;
    font-size: 14px !important;
}

body.catalog-body .sbo-emoji-selected .sbo-catalog-icon-preview,
body.catalog-body .sbo-emoji-selected strong {
    width: 52px !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #3366CC !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.catalog-body .sbo-emoji-selected .sbo-catalog-icon-preview svg,
body.catalog-body .sbo-emoji-selected strong svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

body.catalog-body .sbo-emoji-grid {
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
}

body.catalog-body .sbo-emoji-grid button {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.catalog-body .sbo-emoji-grid button svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

body.catalog-body .sbo-emoji-grid button:hover {
    border-color: #BFDBFE !important;
    color: #3366CC !important;
    background: #fff !important;
}

body.catalog-body .sbo-emoji-grid button.is-selected {
    border-color: #3366CC !important;
    color: #3366CC !important;
    background: #E8F0FE !important;
    box-shadow: 0 0 0 1px #3366CC !important;
}

body.catalog-body .sbo-color-picker {
    gap: 8px !important;
}

body.catalog-body .sbo-color-picker legend {
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.catalog-body .sbo-color-picker button {
    min-height: 64px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #64748B !important;
    font-size: 12px !important;
}

body.catalog-body .sbo-color-picker button.is-selected {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 1px #3366CC !important;
}

body.catalog-body .sbo-category-preview {
    margin: 0 !important;
    color: #64748B !important;
    font-size: 14px !important;
}

body.catalog-body .sbo-category-preview span {
    margin-left: 6px !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 999px !important;
    background: #F0FDFA !important;
    color: #0F766E !important;
    vertical-align: middle;
}

body.catalog-body .sbo-category-preview b,
body.catalog-body .sbo-category-preview .sbo-catalog-mini-icon {
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    color: inherit !important;
}

body.catalog-body .sbo-category-preview b svg,
body.catalog-body .sbo-category-preview .sbo-catalog-mini-icon svg {
    width: 14px !important;
    height: 14px !important;
}

body.catalog-body .sbo-catalog-modal__buttons {
    margin-top: 6px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 12px !important;
}

body.catalog-body .sbo-catalog-modal__buttons button {
    min-height: 48px !important;
    padding: 0 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

body.catalog-body .sbo-catalog-modal__buttons button:last-child {
    background: #3366CC !important;
    border-color: #3366CC !important;
    color: #fff !important;
    font-size: 16px !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.catalog-body .sbo-catalog-modal__buttons button:last-child:hover {
    background: #2554b0 !important;
    border-color: #2554b0 !important;
}

@media (min-width: 768px) {
    body.catalog-body .sbo-catalog-modal__buttons button,
    body.catalog-body .sbo-catalog-modal__buttons button:last-child {
        font-size: 18px !important;
    }
}

@media (max-width: 520px) {
    body.catalog-body .sbo-catalog-modal__buttons {
        grid-template-columns: 1fr !important;
    }

    body.catalog-body .sbo-catalog-modal__buttons button,
    body.catalog-body .sbo-catalog-modal__buttons button:last-child {
        font-size: 16px !important;
        white-space: normal !important;
    }
}

/* Add New Item modal ? match design: header badge, icon fields, option cards */
body.catalog-body .sbo-item-modal__dialog {
    width: min(100%, 500px) !important;
    min-width: 500px !important;
    padding: 22px 20px 18px !important;
    border-radius: 20px !important;
}

body.catalog-body .sbo-item-modal__header {
    margin: 0 0 18px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 12px !important;
}

body.catalog-body .sbo-item-modal__badge {
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    flex-shrink: 0 !important;
}

body.catalog-body .sbo-item-modal__badge svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

body.catalog-body .sbo-item-modal__titles h2,
body.catalog-body .sbo-item-modal__dialog #item-modal-title,
body.catalog-body .sbo-item-modal__dialog [data-item-modal-title] {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.catalog-body .sbo-item-modal__titles p,
body.catalog-body .sbo-item-modal__dialog [data-item-modal-subtitle] {
    margin: 4px 0 0 !important;
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body.catalog-body .sbo-item-modal__close.sbo-catalog-modal__close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    flex-shrink: 0 !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__control {
    position: relative !important;
    display: block !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__icon,
body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__chevron {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__icon {
    left: 14px !important;
    color: #3366CC !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__chevron {
    right: 12px !important;
    color: #94A3B8 !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__icon svg,
body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__chevron svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__control input,
body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__control select {
    padding-left: 44px !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__control--select select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 38px !important;
}

body.catalog-body .sbo-item-modal__dialog .sbo-required {
    color: #EF4444 !important;
    font-style: normal !important;
}

body.catalog-body .sbo-item-option,
body.catalog-body .sbo-item-option-group {
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
}

body.catalog-body .sbo-item-option {
    min-height: 68px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
}

body.catalog-body .sbo-item-option-group {
    padding: 0 0 12px !important;
    overflow: hidden !important;
}

body.catalog-body .sbo-item-option-group .sbo-item-option {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.catalog-body .sbo-item-option__icon {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

body.catalog-body .sbo-item-option__icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

body.catalog-body .sbo-item-option__icon--tax {
    background: #DCFCE7 !important;
    color: #16A34A !important;
}

body.catalog-body .sbo-item-option__icon--commission {
    background: #F3E8FF !important;
    color: #9333EA !important;
}

body.catalog-body .sbo-item-option__icon--open {
    background: #FFEDD5 !important;
    color: #EA580C !important;
}

body.catalog-body .sbo-item-option__copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.catalog-body .sbo-item-option strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.catalog-body .sbo-item-option small {
    color: #64748B !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

@media (min-width: 768px) {
    body.catalog-body .sbo-item-option strong {
        font-size: 16px !important;
    }

    body.catalog-body .sbo-item-option small {
        font-size: 13px !important;
    }
}

body.catalog-body .sbo-item-option i {
    width: 42px !important;
    height: 24px !important;
    padding: 3px !important;
    border: 2px solid #CBD5E1 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

body.catalog-body .sbo-item-option i::after {
    width: 14px !important;
    height: 14px !important;
    background: #94A3B8 !important;
}

body.catalog-body .sbo-item-option input:checked + i {
    border-color: #3366CC !important;
    background: #E8F0FE !important;
}

body.catalog-body .sbo-item-option input:checked + i::after {
    background: #3366CC !important;
    transform: translateX(18px) !important;
}

body.catalog-body .sbo-commission-rate {
    padding: 0 14px 4px !important;
    display: grid !important;
    gap: 6px !important;
}

body.catalog-body .sbo-commission-rate.is-disabled {
    opacity: 0.55 !important;
}

body.catalog-body .sbo-commission-rate__row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #64748B !important;
    font-size: 13px !important;
}

body.catalog-body .sbo-commission-rate__row em {
    font-style: normal !important;
    white-space: nowrap !important;
}

body.catalog-body .sbo-commission-rate input {
    width: 88px !important;
    min-height: 42px !important;
    height: 42px !important;
}

body.catalog-body .sbo-item-modal__buttons.sbo-catalog-modal__buttons {
    margin-top: 8px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

body.catalog-body .sbo-item-modal__buttons button[data-close-item-modal] {
    border: 1.5px solid #3366CC !important;
    background: #fff !important;
    color: #3366CC !important;
    box-shadow: none !important;
}

body.catalog-body .sbo-item-modal__buttons button[data-close-item-modal]:hover {
    background: #F8FAFC !important;
}

body.catalog-body .sbo-item-modal__buttons button[data-item-submit],
body.catalog-body .sbo-item-modal__buttons button:last-child {
    background: #3366CC !important;
    border-color: #3366CC !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.catalog-body .sbo-item-modal__secure {
    margin: 6px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #94A3B8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body.catalog-body .sbo-item-modal__secure .sbo-inline-icon,
body.catalog-body .sbo-item-modal__secure .sbo-inline-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    color: #94A3B8 !important;
}

/* Add New Item ? narrow screens (=360px): keep option cards readable, no overflow */
@media (max-width: 360px) {
    body.catalog-body .sbo-item-modal__dialog {
        width: min(100%, 100%) !important;
        padding: 16px 12px 14px !important;
        border-radius: 16px !important;
    }

    body.catalog-body .sbo-item-modal__header {
        grid-template-columns: 40px minmax(0, 1fr) 32px !important;
        gap: 8px !important;
        margin: 0 0 14px !important;
    }

    body.catalog-body .sbo-item-modal__badge {
        width: 40px !important;
        height: 40px !important;
    }

    body.catalog-body .sbo-item-modal__badge svg {
        width: 18px !important;
        height: 18px !important;
    }

    body.catalog-body .sbo-item-modal__close.sbo-catalog-modal__close {
        width: 32px !important;
        height: 32px !important;
    }

    body.catalog-body .sbo-item-modal__titles h2,
    body.catalog-body .sbo-item-modal__dialog #item-modal-title,
    body.catalog-body .sbo-item-modal__dialog [data-item-modal-title] {
        font-size: 17px !important;
    }

    body.catalog-body .sbo-item-modal__titles p,
    body.catalog-body .sbo-item-modal__dialog [data-item-modal-subtitle] {
        font-size: 12px !important;
    }

    body.catalog-body .sbo-item-modal__dialog form {
        gap: 10px !important;
    }

    body.catalog-body .sbo-item-modal__dialog .sbo-item-form-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__label,
    body.catalog-body .sbo-item-modal__dialog span.sbo-catalog-field__label,
    body.catalog-body .sbo-item-modal__dialog .sbo-commission-rate .sbo-catalog-field__label {
        font-size: 14px !important;
    }

    body.catalog-body .sbo-item-modal__dialog input:not([type="checkbox"]),
    body.catalog-body .sbo-item-modal__dialog select {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__control input,
    body.catalog-body .sbo-item-modal__dialog .sbo-catalog-field__control select {
        padding-left: 40px !important;
    }

    body.catalog-body .sbo-item-option,
    body.catalog-body .sbo-item-option-group {
        border-radius: 12px !important;
    }

    body.catalog-body .sbo-item-option {
        min-height: 0 !important;
        padding: 10px !important;
        grid-template-columns: 36px minmax(0, 1fr) 40px !important;
        align-items: start !important;
        gap: 8px !important;
        column-gap: 8px !important;
    }

    body.catalog-body .sbo-item-option__icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        margin-top: 1px !important;
    }

    body.catalog-body .sbo-item-option__icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    body.catalog-body .sbo-item-option__copy {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body.catalog-body .sbo-item-option strong {
        display: block !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    body.catalog-body .sbo-item-option small {
        font-size: 11px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    body.catalog-body .sbo-item-option i {
        width: 40px !important;
        height: 22px !important;
        margin-top: 2px !important;
        justify-self: end !important;
        flex-shrink: 0 !important;
    }

    body.catalog-body .sbo-item-option i::after {
        width: 12px !important;
        height: 12px !important;
    }

    body.catalog-body .sbo-item-option input:checked + i::after {
        transform: translateX(18px) !important;
    }

    body.catalog-body .sbo-commission-rate {
        padding: 0 10px 2px !important;
        gap: 4px !important;
    }

    body.catalog-body .sbo-commission-rate__row {
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
        font-size: 12px !important;
    }

    body.catalog-body .sbo-commission-rate__row em {
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    body.catalog-body .sbo-commission-rate input {
        width: 72px !important;
        min-height: 40px !important;
        height: 40px !important;
        flex: 0 0 auto !important;
    }

    body.catalog-body .sbo-item-modal__buttons.sbo-catalog-modal__buttons {
        gap: 8px !important;
    }

    body.catalog-body .sbo-item-modal__buttons button {
        min-height: 44px !important;
        font-size: 15px !important;
    }

    body.catalog-body .sbo-item-modal__secure {
        font-size: 11px !important;
    }
}


body.catalog-body .sbo-catalog-delete-modal p {
    color: #64748B !important;
    font-size: 14px !important;
}

/* List / pill modern icons */
body.catalog-body .catalog-ui .sbo-catalog-emoji {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    color: inherit !important;
}

body.catalog-body .catalog-ui .sbo-catalog-emoji svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

body.catalog-body .catalog-ui .sbo-catalog-mini-icon,
body.catalog-body .catalog-ui .sbo-category-pills .sbo-catalog-mini-icon {
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    vertical-align: middle;
}

body.catalog-body .catalog-ui .sbo-catalog-mini-icon svg,
body.catalog-body .catalog-ui .sbo-category-pills .sbo-catalog-mini-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

body.catalog-body .catalog-ui .sbo-category-pills button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   Services & Items ? category pills font + UI fix (page-scoped)
   Match catalog tabs; Mobile 14px | Tablet 15px | Desktop 16px
   ========================================================================== */

body.catalog-body .catalog-ui .sbo-category-pills {
    margin: 0 !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1.5px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
}

body.catalog-body .catalog-ui .sbo-category-pills::-webkit-scrollbar {
    display: none;
}

body.catalog-body .catalog-ui .sbo-category-pills button,
body.catalog-body .catalog-ui .sbo-category-pills button span:not(.sbo-catalog-mini-icon) {
    font-size: 16px !important;
}

body.catalog-body .catalog-ui .sbo-category-pills button .sbo-catalog-mini-icon {
    font-size: 0 !important;
}

body.catalog-body .catalog-ui .sbo-category-pills button {
    position: relative;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #475569 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer;
}

body.catalog-body .catalog-ui .sbo-category-pills button:not(.is-active):hover {
    color: #1e293b !important;
    background: #F8FAFC !important;
}

body.catalog-body .catalog-ui .sbo-category-pills button.is-active {
    background: #3366CC !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    box-shadow: 0 2px 8px rgba(51, 102, 204, 0.22) !important;
}

body.catalog-body .catalog-ui .sbo-category-pills .sbo-catalog-mini-icon,
body.catalog-body .catalog-ui .sbo-category-pills button .sbo-catalog-mini-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    opacity: 0.9;
}

body.catalog-body .catalog-ui .sbo-category-pills .sbo-catalog-mini-icon svg,
body.catalog-body .catalog-ui .sbo-category-pills button .sbo-catalog-mini-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

body.catalog-body .catalog-ui .sbo-category-pills button.is-active .sbo-catalog-mini-icon {
    opacity: 1;
}

/* Items / Categories tabs ? 16px mobile | 18px tablet/desktop; active bold, rest normal */
body.catalog-body .catalog-ui .sbo-catalog-tabs button {
    font-size: 16px !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tabs button.is-active {
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

@media (min-width: 768px) {
    body.catalog-body .catalog-ui .sbo-catalog-tabs button {
        font-size: 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.catalog-body .catalog-ui .sbo-category-pills button,
    body.catalog-body .catalog-ui .sbo-category-pills button span:not(.sbo-catalog-mini-icon) {
        font-size: 18px !important;
    }

    body.catalog-body .catalog-ui .sbo-category-pills button {
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 16px !important;
    }
}

@media (min-width: 1366px) {
    body.catalog-body .catalog-ui .sbo-category-pills button,
    body.catalog-body .catalog-ui .sbo-category-pills button span:not(.sbo-catalog-mini-icon) {
        font-size: 18px !important;
    }

    body.catalog-body .catalog-ui .sbo-category-pills button {
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.catalog-body .sbo-catalog-modal h2,
    body.catalog-body .sbo-catalog-modal__dialog h2,
    body.catalog-body #category-modal-title,
    body.catalog-body #item-modal-title,
    body.catalog-body .sbo-catalog-modal h2 span:not(.sbo-inline-icon),
    body.catalog-body .sbo-catalog-modal [data-item-modal-title],
    body.catalog-body .sbo-catalog-modal [data-category-modal-title] {
        font-size: 22px !important;
    }

    body.catalog-body .sbo-catalog-modal .sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal span.sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal .sbo-commission-rate .sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal__buttons button,
    body.catalog-body .sbo-catalog-modal__buttons button:last-child,
    body.catalog-body .sbo-item-option strong {
        font-size: 18px !important;
    }

    body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
    body.catalog-body .sbo-catalog-modal select,
    body.catalog-body .sbo-emoji-selected,
    body.catalog-body .sbo-color-picker legend,
    body.catalog-body .sbo-category-preview,
    body.catalog-body .sbo-commission-rate span,
    body.catalog-body .sbo-catalog-delete-modal p,
    body.catalog-body .sbo-item-option small {
        font-size: 15px !important;
    }

    body.catalog-body .sbo-color-picker button {
        font-size: 13px !important;
    }
}

@media (min-width: 1366px) {
    body.catalog-body .sbo-catalog-modal h2,
    body.catalog-body .sbo-catalog-modal__dialog h2,
    body.catalog-body #category-modal-title,
    body.catalog-body #item-modal-title,
    body.catalog-body .sbo-catalog-modal h2 span:not(.sbo-inline-icon),
    body.catalog-body .sbo-catalog-modal [data-item-modal-title],
    body.catalog-body .sbo-catalog-modal [data-category-modal-title] {
        font-size: 22px !important;
    }

    body.catalog-body .sbo-catalog-modal .sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal span.sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal .sbo-commission-rate .sbo-catalog-field__label,
    body.catalog-body .sbo-catalog-modal__buttons button,
    body.catalog-body .sbo-catalog-modal__buttons button:last-child,
    body.catalog-body .sbo-item-option strong {
        font-size: 18px !important;
    }

    body.catalog-body .sbo-catalog-modal input:not([type="checkbox"]),
    body.catalog-body .sbo-catalog-modal select,
    body.catalog-body .sbo-emoji-selected,
    body.catalog-body .sbo-color-picker legend,
    body.catalog-body .sbo-category-preview,
    body.catalog-body .sbo-commission-rate span,
    body.catalog-body .sbo-catalog-delete-modal p,
    body.catalog-body .sbo-item-option small {
        font-size: 16px !important;
    }

    body.catalog-body .sbo-color-picker button {
        font-size: 14px !important;
    }
}

@media (max-width: 520px) {
    body.catalog-body .sbo-catalog-modal {
        padding: 16px !important;
        place-items: center !important;
    }

    body.catalog-body .sbo-catalog-modal__dialog,
    body.catalog-body .sbo-item-modal__dialog {
        width: min(100%, 480px) !important;
        max-height: calc(100vh - 32px) !important;
        padding: 20px 16px 18px !important;
        border-radius: 16px !important;
    }

    body.catalog-body .sbo-emoji-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   SERVICES & ITEMS ? popup/modal font-size 16px (page-scoped)
   Class: catalog-popup-fs-16 ? overrides later 14px/13px/12px/15px modal polish rules
   Does not change headings (18/22) or icon-only nodes (font-size: 0)
   ========================================================================== */
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal {
    font-size: 16px;
}

/* Explicit overrides for known =14px popup text ? 16px */
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 p,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 span,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 small,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 label,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 a,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 button,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 input,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 select,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 strong,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 b,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 em,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 legend,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 input:not([type="checkbox"]),
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 select,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__buttons button,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__buttons button:last-child,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-emoji-selected,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-emoji-selected span,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-color-picker legend,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-color-picker button,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-category-preview,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-category-preview em,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-item-option strong,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-item-option small,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-commission-rate,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-commission-rate span,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16.sbo-catalog-delete-modal p,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-delete-modal.catalog-popup-fs-16 p {
    font-size: 16px !important;
}

/* Field labels (Item / Service Name, Category, Price, Unit, etc.) ? 18px on mobile + tablet */
@media (max-width: 1366px) {
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 span.sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-commission-rate .sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 label.sbo-catalog-field > .sbo-catalog-field__label {
        font-size: 18px !important;
    }
}

/* Keep larger modal titles above the 16px floor */
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 h2,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__dialog h2,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 #category-modal-title,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 #item-modal-title,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 h2 span:not(.sbo-inline-icon),
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 [data-item-modal-title],
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 [data-category-modal-title] {
    font-size: 18px !important;
}

@media (min-width: 768px) {
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 h2,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__dialog h2,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 #category-modal-title,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 #item-modal-title,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 h2 span:not(.sbo-inline-icon),
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 [data-item-modal-title],
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 [data-category-modal-title] {
        font-size: 22px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 span.sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-commission-rate .sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__buttons button,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__buttons button:last-child,
    body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-item-option strong {
        font-size: 18px !important;
    }
}

/* Keep icon-only / close controls at 0 inside popups */
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 [aria-hidden="true"],
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-inline-icon,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-catalog-modal__close,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-emoji-selected .sbo-catalog-icon-preview,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-emoji-selected strong,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-emoji-grid button,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-category-preview b,
body.catalog-body.catalog-popup-fs-16 .sbo-catalog-modal.catalog-popup-fs-16 .sbo-category-preview .sbo-catalog-mini-icon {
    font-size: 0 !important;
}

/* Add New Item modal ? keep subtitle / secure note / option copy sized to design */
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__titles h2,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog #item-modal-title,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog [data-item-modal-title] {
    margin: 0 !important;
    font-size: 20px !important;
}

body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog [data-item-modal-subtitle],
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__titles p {
    font-size: 13px !important;
}

body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-option small {
    font-size: 12px !important;
}

body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__secure,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__secure span {
    font-size: 12px !important;
}

body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__secure .sbo-inline-icon,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-option__icon,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-catalog-field__icon,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-catalog-field__chevron,
body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__badge {
    font-size: 0 !important;
}

body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__buttons.sbo-catalog-modal__buttons {
    grid-template-columns: 1fr !important;
}

/* =360px: beat catalog-popup-fs-16 floor so option cards don't overflow */
@media (max-width: 360px) {
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__titles h2,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog #item-modal-title,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog [data-item-modal-title] {
        font-size: 17px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog [data-item-modal-subtitle],
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__titles p {
        font-size: 12px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog span.sbo-catalog-field__label,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate .sbo-catalog-field__label {
        font-size: 14px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-option strong {
        font-size: 14px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-option small,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate span,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate__row,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate__row em {
        font-size: 12px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog input:not([type="checkbox"]),
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog select,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-catalog-modal__buttons button,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-catalog-modal__buttons button:last-child {
        font-size: 14px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__secure,
    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-modal__secure span {
        font-size: 11px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-option {
        grid-template-columns: 36px minmax(0, 1fr) 40px !important;
        align-items: start !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-item-form-row {
        grid-template-columns: 1fr !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate__row {
        flex-wrap: wrap !important;
    }

    body.catalog-body.catalog-popup-fs-16 .sbo-item-modal__dialog .sbo-commission-rate__row em {
        white-space: normal !important;
    }
}

/* ==========================================================================
   Services & Items ? item/category cards match Shops & Devices cards
   Title/price: 16px mobile | 18px tablet/desktop
   Tags/meta: 14px mobile | 16px tablet/desktop
   ========================================================================== */

body.catalog-body .catalog-ui .sbo-catalog-item-list,
body.catalog-body .catalog-ui .sbo-category-list {
    display: grid !important;
    gap: 12px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item,
body.catalog-body .catalog-ui .sbo-category-card {
    min-height: 0 !important;
    padding: 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto auto !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

body.catalog-body .catalog-ui .sbo-category-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 28px 32px !important;
    align-items: center !important;
    gap: 14px !important;
}

body.catalog-body .catalog-ui .sbo-category-card p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item:hover,
body.catalog-body .catalog-ui .sbo-category-card:hover {
    border-color: #BFDBFE !important;
    box-shadow: 0 6px 18px rgba(30, 50, 80, 0.07) !important;
}

body.catalog-body .catalog-ui .sbo-catalog-emoji {
    width: 52px !important;
    height: 52px !important;
    margin-top: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-emoji svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__main,
body.catalog-body .catalog-ui .sbo-category-card > div {
    min-width: 0 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
body.catalog-body .catalog-ui .sbo-category-card h3,
body.catalog-body.sbo-dashboard-body .catalog-ui .sbo-catalog-item__main h3,
body.catalog-body.sbo-dashboard-body .catalog-ui .sbo-category-card h3 {
    margin: 0 0 8px !important;
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__tags {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.catalog-body .catalog-ui .sbo-catalog-tag,
body.catalog-body .catalog-ui .sbo-catalog-item__tags .sbo-catalog-tag,
body.catalog-body .catalog-ui .sbo-category-card .sbo-catalog-tag {
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-item__tags small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-price,
body.catalog-body .catalog-ui .sbo-catalog-item__main .sbo-catalog-price {
    margin-top: 10px !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-mini-icon,
body.catalog-body .catalog-ui .sbo-catalog-tag .sbo-catalog-mini-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    font-size: 0 !important;
}

body.catalog-body .catalog-ui .sbo-catalog-mini-icon svg,
body.catalog-body .catalog-ui .sbo-catalog-tag .sbo-catalog-mini-icon svg,
body.catalog-body .catalog-ui .sbo-catalog-tag .sbo-inline-icon,
body.catalog-body .catalog-ui .sbo-catalog-tag .sbo-inline-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
}

@media (min-width: 768px) {
    body.catalog-body .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body .catalog-ui .sbo-category-card h3,
    body.catalog-body.sbo-dashboard-body .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body.sbo-dashboard-body .catalog-ui .sbo-category-card h3,
    body.catalog-body .catalog-ui .sbo-catalog-price,
    body.catalog-body .catalog-ui .sbo-catalog-item__main .sbo-catalog-price {
        font-size: 18px !important;
    }

    body.catalog-body .catalog-ui .sbo-catalog-tag,
    body.catalog-body .catalog-ui .sbo-catalog-item__tags .sbo-catalog-tag,
    body.catalog-body .catalog-ui .sbo-category-card .sbo-catalog-tag,
    body.catalog-body .catalog-ui .sbo-catalog-item__tags small,
    body.catalog-body .catalog-ui .sbo-category-card p {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   SERVICES & ITEMS ? item/category card titles 18px (mobile + tablet)
   Class: catalog-fs-min-16 ? page-scoped; overrides 16px mobile title rule
   @media (max-width: 1366px): titles 18px including mobile
   ========================================================================== */
@media (max-width: 1366px) {
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body.catalog-fs-min-16 .catalog-ui.catalog-fs-min-16 .sbo-catalog-item__main h3,
    body.catalog-body.catalog-fs-min-16 .catalog-ui .sbo-category-card h3,
    body.catalog-body.catalog-fs-min-16 .catalog-ui.catalog-fs-min-16 .sbo-category-card h3,
    body.catalog-body.sbo-dashboard-body.catalog-fs-min-16 .catalog-ui .sbo-catalog-item__main h3,
    body.catalog-body.sbo-dashboard-body.catalog-fs-min-16 .catalog-ui .sbo-category-card h3 {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Shops & Devices ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.shops-body.sbo-dashboard-body h1,
body.shops-body.sbo-dashboard-body h2,
body.shops-body.sbo-dashboard-body h3,
body.shops-body.sbo-dashboard-body h4,
body.shops-body .shops-ui .shops-header__title,
body.shops-body .shops-ui .sbo-shops-header h1,
body.shops-body .shops-header__title,
body.sbo-dashboard-body.shops-body .shops-ui h1.shops-header__title,
body.shops-body .shops-ui .sbo-shop-card__head h2,
body.shops-body .shops-ui .sbo-devices-heading h3,
body.shops-body .shops-ui .sbo-all-shops h3,
body.shops-body .shops-ui .sbo-shops-empty h2,
body.shops-body .sbo-shop-modal h2,
body.shops-body .sbo-shop-modal__dialog h2,
body.shops-body .sbo-remove-device-modal h2,
body.shops-body #add-shop-title,
body.shops-body #edit-shop-title,
body.shops-body #delete-shop-title,
body.shops-body #add-device-title,
body.shops-body #edit-device-title,
body.shops-body #remove-device-title {
    font-size: 18px !important;
}

body.shops-body.sbo-dashboard-body h3,
body.shops-body.sbo-dashboard-body h4,
body.shops-body .shops-ui .sbo-devices-heading h3,
body.shops-body .shops-ui .sbo-all-shops h3,
body.shops-body .shops-ui .sbo-shops-empty h2,
body.shops-body .sbo-shop-modal h2,
body.shops-body .sbo-shop-modal__dialog h2,
body.shops-body .sbo-remove-device-modal h2,
body.shops-body #add-shop-title,
body.shops-body #edit-shop-title,
body.shops-body #delete-shop-title,
body.shops-body #add-device-title,
body.shops-body #edit-device-title,
body.shops-body #remove-device-title {
    color: #000 !important;
}

/* Keep dashboard-blue headings white (page header + shop card head) */
body.shops-body .shops-ui .shops-header__title,
body.shops-body .shops-ui .sbo-shops-header h1,
body.shops-body .shops-header__title,
body.sbo-dashboard-body.shops-body .shops-ui h1.shops-header__title,
body.shops-body .shops-ui .sbo-shop-card__head h2 {
    color: #ffffff !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.shops-body.sbo-dashboard-body h1,
    body.shops-body.sbo-dashboard-body h2,
    body.shops-body.sbo-dashboard-body h3,
    body.shops-body.sbo-dashboard-body h4,
    body.shops-body .shops-ui .shops-header__title,
    body.shops-body .shops-ui .sbo-shops-header h1,
    body.shops-body .shops-header__title,
    body.sbo-dashboard-body.shops-body .shops-ui h1.shops-header__title,
    body.shops-body .shops-ui .sbo-shop-card__head h2,
    body.shops-body .shops-ui .sbo-devices-heading h3,
    body.shops-body .shops-ui .sbo-all-shops h3,
    body.shops-body .shops-ui .sbo-shops-empty h2,
    body.shops-body .sbo-shop-modal h2,
    body.shops-body .sbo-shop-modal__dialog h2,
    body.shops-body .sbo-remove-device-modal h2,
    body.shops-body #add-shop-title,
    body.shops-body #edit-shop-title,
    body.shops-body #delete-shop-title,
    body.shops-body #add-device-title,
    body.shops-body #edit-device-title,
    body.shops-body #remove-device-title {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.shops-body.sbo-dashboard-body h1,
    body.shops-body.sbo-dashboard-body h2,
    body.shops-body.sbo-dashboard-body h3,
    body.shops-body.sbo-dashboard-body h4,
    body.shops-body .shops-ui .shops-header__title,
    body.shops-body .shops-ui .sbo-shops-header h1,
    body.shops-body .shops-header__title,
    body.sbo-dashboard-body.shops-body .shops-ui h1.shops-header__title,
    body.shops-body .shops-ui .sbo-shop-card__head h2,
    body.shops-body .shops-ui .sbo-devices-heading h3,
    body.shops-body .shops-ui .sbo-all-shops h3,
    body.shops-body .shops-ui .sbo-shops-empty h2,
    body.shops-body .sbo-shop-modal h2,
    body.shops-body .sbo-shop-modal__dialog h2,
    body.shops-body .sbo-remove-device-modal h2,
    body.shops-body #add-shop-title,
    body.shops-body #edit-shop-title,
    body.shops-body #delete-shop-title,
    body.shops-body #add-device-title,
    body.shops-body #edit-device-title,
    body.shops-body #remove-device-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   Shops & Devices ? responsive labels / body / UI text (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the Shops & Devices heading block above.
   ========================================================================== */

body.shops-body,
body.shops-body .shops-ui {
    font-size: 14px !important;
}

/* Labels / meta / supporting copy */
body.shops-body .shops-ui .shops-header__subtitle,
body.shops-body .shops-ui .sbo-shops-header p,
body.shops-body .shops-ui p.shops-header__subtitle,
body.shops-body .shops-ui .sbo-shop-tabs button,
body.shops-body .shops-ui .sbo-shop-status,
body.shops-body .shops-ui .sbo-shop-fact-copy small,
body.shops-body .shops-ui .sbo-devices-heading p,
body.shops-body .shops-ui .sbo-device-copy p,
body.shops-body .shops-ui .sbo-device-copy small,
body.shops-body .shops-ui .sbo-device-copy h4 span,
body.shops-body .shops-ui .sbo-device-empty p,
body.shops-body .shops-ui .sbo-shop-plan-note,
body.shops-body .shops-ui .sbo-all-shops small,
body.shops-body .shops-ui .sbo-shop-billing-note p,
body.shops-body .shops-ui .sbo-shop-device-note p,
body.shops-body .shops-ui .sbo-shops-empty p,
body.shops-body .shops-ui .sbo-shop-actions button,
body.shops-body .shops-ui .sbo-device-actions button,
body.shops-body .sbo-shop-modal label,
body.shops-body .sbo-shop-modal small,
body.shops-body .sbo-shop-modal p,
body.shops-body .sbo-shop-modal__info,
body.shops-body .sbo-shop-modal__buttons button,
body.shops-body .sbo-bottom-nav a,
body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 14px !important;
}

/* Body / UI actions */
body.shops-body .shops-ui .shops-header__action,
body.shops-body .shops-header__action,
body.shops-body .shops-ui .sbo-shop-add-button.shops-header__action,
body.shops-body .shops-ui .sbo-devices-heading button,
body.shops-body .shops-ui .sbo-shops-empty button,
body.shops-body .shops-ui .sbo-shop-fact-copy strong,
body.shops-body .shops-ui .sbo-device-empty strong,
body.shops-body .shops-ui .sbo-all-shops button,
body.shops-body .shops-ui .sbo-all-shops strong,
body.shops-body .shops-ui .sbo-shop-billing-note a,
body.shops-body .shops-ui .sbo-shop-billing-note strong,
body.shops-body .shops-ui .sbo-shop-billing-note b,
body.shops-body .sbo-shop-modal input,
body.shops-body .sbo-shop-modal select,
body.shops-body .sbo-shop-modal__info strong,
body.shops-body .sbo-shop-phone b,
body.shops-body .shops-ui p,
body.shops-body .shops-ui span,
body.shops-body .shops-ui small,
body.shops-body .shops-ui label,
body.shops-body .shops-ui a,
body.shops-body .shops-ui button,
body.shops-body .shops-ui input,
body.shops-body .shops-ui select,
body.shops-body .shops-ui strong,
body.shops-body .shops-ui b,
body.shops-body .shops-ui em {
    font-size: 14px !important;
}

/* Mid emphasis ? bottom nav labels */
body.shops-body .sbo-bottom-nav a span,
body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label,
body.shops-body .shops-ui .sbo-bottom-nav a span,
body.shops-body .shops-ui .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Keep SVG icon containers from inheriting text sizes */
body.shops-body .shops-ui [aria-hidden="true"],
body.shops-body .sbo-bottom-nav__icon,
body.shops-body .shops-header__icon,
body.shops-body .shops-header__back {
    font-size: 0 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.shops-body,
    body.shops-body .shops-ui {
        font-size: 15px !important;
    }

    body.shops-body .shops-ui .shops-header__subtitle,
    body.shops-body .shops-ui .sbo-shops-header p,
    body.shops-body .shops-ui p.shops-header__subtitle,
    body.shops-body .shops-ui .sbo-shop-tabs button,
    body.shops-body .shops-ui .sbo-shop-status,
    body.shops-body .shops-ui .sbo-shop-fact-copy small,
    body.shops-body .shops-ui .sbo-devices-heading p,
    body.shops-body .shops-ui .sbo-device-copy p,
    body.shops-body .shops-ui .sbo-device-copy small,
    body.shops-body .shops-ui .sbo-device-copy h4 span,
    body.shops-body .shops-ui .sbo-device-empty p,
    body.shops-body .shops-ui .sbo-shop-plan-note,
    body.shops-body .shops-ui .sbo-all-shops small,
    body.shops-body .shops-ui .sbo-shop-billing-note p,
    body.shops-body .shops-ui .sbo-shop-device-note p,
    body.shops-body .shops-ui .sbo-shops-empty p,
    body.shops-body .shops-ui .sbo-shop-actions button,
    body.shops-body .shops-ui .sbo-device-actions button,
    body.shops-body .sbo-shop-modal label,
    body.shops-body .sbo-shop-modal small,
    body.shops-body .sbo-shop-modal p,
    body.shops-body .sbo-shop-modal__info,
    body.shops-body .sbo-shop-modal__buttons button,
    body.shops-body .sbo-bottom-nav a,
    body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 15px !important;
    }

    body.shops-body .shops-ui .shops-header__action,
    body.shops-body .shops-header__action,
    body.shops-body .shops-ui .sbo-shop-add-button.shops-header__action,
    body.shops-body .shops-ui .sbo-devices-heading button,
    body.shops-body .shops-ui .sbo-shops-empty button,
    body.shops-body .shops-ui .sbo-shop-fact-copy strong,
    body.shops-body .shops-ui .sbo-device-empty strong,
    body.shops-body .shops-ui .sbo-all-shops button,
    body.shops-body .shops-ui .sbo-all-shops strong,
    body.shops-body .shops-ui .sbo-shop-billing-note a,
    body.shops-body .shops-ui .sbo-shop-billing-note strong,
    body.shops-body .shops-ui .sbo-shop-billing-note b,
    body.shops-body .sbo-shop-modal input,
    body.shops-body .sbo-shop-modal select,
    body.shops-body .sbo-shop-modal__info strong,
    body.shops-body .sbo-shop-phone b,
    body.shops-body .shops-ui p,
    body.shops-body .shops-ui span,
    body.shops-body .shops-ui small,
    body.shops-body .shops-ui label,
    body.shops-body .shops-ui a,
    body.shops-body .shops-ui button,
    body.shops-body .shops-ui input,
    body.shops-body .shops-ui select,
    body.shops-body .shops-ui strong,
    body.shops-body .shops-ui b,
    body.shops-body .shops-ui em {
        font-size: 15px !important;
    }

    body.shops-body .sbo-bottom-nav a span,
    body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.shops-body .shops-ui .sbo-bottom-nav a span,
    body.shops-body .shops-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.shops-body .shops-ui [aria-hidden="true"],
    body.shops-body .sbo-bottom-nav__icon,
    body.shops-body .shops-header__icon,
    body.shops-body .shops-header__back {
        font-size: 0 !important;
    }
}

@media (min-width: 1366px) {
    body.shops-body,
    body.shops-body .shops-ui {
        font-size: 16px !important;
    }

    body.shops-body .shops-ui .shops-header__subtitle,
    body.shops-body .shops-ui .sbo-shops-header p,
    body.shops-body .shops-ui p.shops-header__subtitle,
    body.shops-body .shops-ui .sbo-shop-tabs button,
    body.shops-body .shops-ui .sbo-shop-status,
    body.shops-body .shops-ui .sbo-shop-fact-copy small,
    body.shops-body .shops-ui .sbo-devices-heading p,
    body.shops-body .shops-ui .sbo-device-copy p,
    body.shops-body .shops-ui .sbo-device-copy small,
    body.shops-body .shops-ui .sbo-device-copy h4 span,
    body.shops-body .shops-ui .sbo-device-empty p,
    body.shops-body .shops-ui .sbo-shop-plan-note,
    body.shops-body .shops-ui .sbo-all-shops small,
    body.shops-body .shops-ui .sbo-shop-billing-note p,
    body.shops-body .shops-ui .sbo-shop-device-note p,
    body.shops-body .shops-ui .sbo-shops-empty p,
    body.shops-body .shops-ui .sbo-shop-actions button,
    body.shops-body .shops-ui .sbo-device-actions button,
    body.shops-body .sbo-shop-modal label,
    body.shops-body .sbo-shop-modal small,
    body.shops-body .sbo-shop-modal p,
    body.shops-body .sbo-shop-modal__info,
    body.shops-body .sbo-shop-modal__buttons button,
    body.shops-body .sbo-bottom-nav a,
    body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 16px !important;
    }

    body.shops-body .shops-ui .shops-header__action,
    body.shops-body .shops-header__action,
    body.shops-body .shops-ui .sbo-shop-add-button.shops-header__action,
    body.shops-body .shops-ui .sbo-devices-heading button,
    body.shops-body .shops-ui .sbo-shops-empty button,
    body.shops-body .shops-ui .sbo-shop-fact-copy strong,
    body.shops-body .shops-ui .sbo-device-empty strong,
    body.shops-body .shops-ui .sbo-all-shops button,
    body.shops-body .shops-ui .sbo-all-shops strong,
    body.shops-body .shops-ui .sbo-shop-billing-note a,
    body.shops-body .shops-ui .sbo-shop-billing-note strong,
    body.shops-body .shops-ui .sbo-shop-billing-note b,
    body.shops-body .sbo-shop-modal input,
    body.shops-body .sbo-shop-modal select,
    body.shops-body .sbo-shop-modal__info strong,
    body.shops-body .sbo-shop-phone b,
    body.shops-body .shops-ui p,
    body.shops-body .shops-ui span,
    body.shops-body .shops-ui small,
    body.shops-body .shops-ui label,
    body.shops-body .shops-ui a,
    body.shops-body .shops-ui button,
    body.shops-body .shops-ui input,
    body.shops-body .shops-ui select,
    body.shops-body .shops-ui strong,
    body.shops-body .shops-ui b,
    body.shops-body .shops-ui em {
        font-size: 16px !important;
    }

    body.shops-body .sbo-bottom-nav a span,
    body.shops-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.shops-body .shops-ui .sbo-bottom-nav a span,
    body.shops-body .shops-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.shops-body .shops-ui [aria-hidden="true"],
    body.shops-body .sbo-bottom-nav__icon,
    body.shops-body .shops-header__icon,
    body.shops-body .shops-header__back {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   Shops & Devices ? modal / popup theme match (page-scoped)
   Aligns Add/Edit/Delete shop & device dialogs with shops-ui blue theme.
   Does not alter existing class definitions; overrides theme tokens only.
   ========================================================================== */

body.shops-body .sbo-shop-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px) !important;
}

body.shops-body .sbo-shop-modal__dialog,
body.shops-body .sbo-shop-modal__dialog--device,
body.shops-body .sbo-remove-device-modal__dialog {
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(30, 50, 80, 0.22) !important;
    font-family: var(--sb-font-regular) !important;
    color: #1e293b !important;
}

body.shops-body .sbo-shop-modal__close {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    color: #64748B !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
}

body.shops-body .sbo-shop-modal__close:hover {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.shops-body .sbo-shop-modal h2,
body.shops-body .sbo-shop-modal__dialog h2,
body.shops-body #add-shop-title,
body.shops-body #edit-shop-title,
body.shops-body #add-device-title,
body.shops-body #edit-device-title {
    margin: 0 42px 18px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #000 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    letter-spacing: -0.01em !important;
}

body.shops-body .sbo-shop-modal h2 span,
body.shops-body #add-shop-title span,
body.shops-body #edit-shop-title span,
body.shops-body #add-device-title span,
body.shops-body #edit-device-title span {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

body.shops-body .sbo-shop-modal__info {
    margin-bottom: 18px !important;
    padding: 12px 14px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #2554b0 !important;
    font-family: var(--sb-font-regular) !important;
    line-height: 1.45 !important;
}

body.shops-body .sbo-shop-modal__info > span:not(.sbo-shop-modal__info-icon) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-self: flex-start !important;
}

body.shops-body .sbo-shop-modal__info strong,
body.shops-body .sbo-shop-modal__info b {
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.shops-body .sbo-shop-modal form {
    display: grid !important;
    gap: 16px !important;
}

body.shops-body .sbo-shop-modal label {
    display: grid !important;
    gap: 7px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.shops-body .sbo-shop-modal label[hidden],
body.shops-body .sbo-shop-modal [data-other-device-type-title-field][hidden],
body.shops-body .sbo-shop-modal [data-edit-other-device-type-title-field][hidden] {
    display: none !important;
}

body.shops-body .sbo-shop-modal span.sbo-shop-modal__label,
body.shops-body .sbo-shop-modal .sbo-shop-modal__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

/* Modal field labels ? 18px on mobile + tablet (=1366px), page-scoped */
@media (max-width: 1366px) {
    body.shops-body.shops-fs-min-16 .sbo-shop-modal span.sbo-shop-modal__label,
    body.shops-body.shops-fs-min-16 .sbo-shop-modal .sbo-shop-modal__label {
        font-size: 18px !important;
    }
}

body.shops-body .sbo-shop-modal label i,
body.shops-body .sbo-shop-modal span.sbo-shop-modal__label i,
body.shops-body .sbo-shop-modal .sbo-shop-modal__label i {
    color: #DC2626 !important;
    font-style: normal !important;
    font-family: var(--sb-font-bold) !important;
    line-height: 1 !important;
}

body.shops-body .sbo-shop-modal input,
body.shops-body .sbo-shop-modal select {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    box-shadow: none !important;
}

body.shops-body .sbo-shop-modal input::placeholder {
    color: #94A3B8 !important;
}

body.shops-body .sbo-shop-modal input:focus,
body.shops-body .sbo-shop-modal select:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.shops-body .sbo-shop-phone {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

body.shops-body .sbo-shop-phone:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.shops-body .sbo-shop-phone b {
    min-width: 58px !important;
    padding: 0 12px !important;
    border-right: 1px solid #E0E8FF !important;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    font-weight: normal !important;
    background: #F8FAFC !important;
    align-self: stretch !important;
    display: grid !important;
    place-items: center !important;
}

body.shops-body .sbo-shop-phone input {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.shops-body .sbo-shop-modal .sbo-shop-pay,
body.shops-body .sbo-shop-modal .sbo-staff-pack-pay {
    margin: 2px 0 0 !important;
    padding: 14px 14px 12px !important;
    display: grid !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
}

body.shops-body .sbo-shop-modal .sbo-shop-pay h3,
body.shops-body .sbo-shop-modal .sbo-staff-pack-pay h3,
body.shops-body.sbo-dashboard-body .sbo-shop-modal .sbo-shop-pay h3,
body.shops-body.sbo-dashboard-body .sbo-shop-modal .sbo-staff-pack-pay h3,
body.shops-body.sbo-dashboard-body .sbo-shop-modal h3 {
    margin: 0 !important;
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 11px !important;
    font-weight: normal !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    body.shops-body.sbo-dashboard-body .sbo-shop-modal .sbo-shop-pay h3,
    body.shops-body.sbo-dashboard-body .sbo-shop-modal .sbo-staff-pack-pay h3,
    body.shops-body.sbo-dashboard-body .sbo-shop-modal h3 {
        font-size: 11px !important;
        color: #64748B !important;
    }
}

body.shops-body .sbo-shop-modal .sbo-staff-pack-pay__hint,
body.shops-body .sbo-shop-modal .sbo-shop-pay .sbo-staff-pack-pay__hint {
    margin: 0 !important;
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.shops-body .sbo-shop-modal .sbo-staff-pack-pay__hint strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.shops-body .sbo-shop-modal .sbo-staff-pack-note {
    display: block !important;
    margin: -2px 0 0 !important;
    color: #94A3B8 !important;
    text-align: center !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

body.shops-body .sbo-shop-modal .sbo-staff-pack-modal__errors {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #FECACA !important;
    border-radius: 10px !important;
    background: #FEF2F2 !important;
    color: #B91C1C !important;
}

body.shops-body .sbo-shop-modal .sbo-staff-pack-modal__errors p {
    margin: 0 !important;
    color: #B91C1C !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body.shops-body .sbo-shop-modal__buttons {
    margin-top: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 12px !important;
}

body.shops-body .sbo-shop-modal__buttons button {
    min-height: 48px !important;
    padding: 0 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

body.shops-body .sbo-shop-modal__buttons button:hover {
    border-color: #3366CC !important;
    color: #3366CC !important;
}

body.shops-body .sbo-shop-modal__buttons button:last-child {
    background: #3366CC !important;
    border-color: #3366CC !important;
    color: #ffffff !important;
    font-size: 16px !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.shops-body .sbo-shop-modal__buttons button:last-child:hover {
    background: #2554b0 !important;
    border-color: #2554b0 !important;
    color: #ffffff !important;
}

@media (min-width: 768px) {
    body.shops-body .sbo-shop-modal__buttons button,
    body.shops-body .sbo-shop-modal__buttons button:last-child {
        font-size: 18px !important;
    }
}

body.shops-body .sbo-shop-modal__dialog {
    padding: 24px 24px 22px !important;
    max-height: min(92vh, 760px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

body.shops-body .sbo-shop-modal__info {
    font-size: 13px !important;
}

@media (max-width: 520px) {
    body.shops-body .sbo-shop-modal__buttons {
        grid-template-columns: 1fr !important;
    }

    body.shops-body .sbo-shop-modal__buttons button,
    body.shops-body .sbo-shop-modal__buttons button:last-child {
        font-size: 16px !important;
        white-space: normal !important;
    }
}

/* Delete / remove confirm dialogs stay danger-themed */
body.shops-body .sbo-remove-device-modal h2,
body.shops-body .sbo-remove-device-modal h2 span,
body.shops-body #delete-shop-title,
body.shops-body #delete-shop-title span,
body.shops-body #remove-device-title,
body.shops-body #remove-device-title span {
    color: #DC2626 !important;
}

body.shops-body .sbo-remove-device-modal h2 span,
body.shops-body #delete-shop-title span,
body.shops-body #remove-device-title span {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.shops-body .sbo-remove-device-modal p,
body.shops-body .sbo-remove-device-modal #delete-shop-description,
body.shops-body .sbo-remove-device-modal #remove-device-description {
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
}

body.shops-body .sbo-remove-device-modal p strong {
    color: #000 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.shops-body .sbo-remove-device-modal .sbo-remove-device-confirm,
body.shops-body .sbo-remove-device-modal .sbo-remove-device-confirm:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22) !important;
}

@media (max-width: 520px) {
    body.shops-body .sbo-shop-modal {
        padding: 16px !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body.shops-body .sbo-shop-modal__dialog,
    body.shops-body .sbo-shop-modal__dialog--device,
    body.shops-body .sbo-remove-device-modal__dialog {
        width: min(100%, 470px) !important;
        max-height: calc(100vh - 32px) !important;
        border-radius: 16px !important;
        border: 1px solid #E0E8FF !important;
        margin: auto !important;
    }
}

/* ==========================================================================
   Shops & Devices ? modern SVG icons (page-scoped)
   ========================================================================== */

body.shops-body .shops-ui .sbo-shop-tab-icon,
body.shops-body .shops-ui .sbo-shop-building,
body.shops-body .shops-ui .sbo-shop-fact-icon,
body.shops-body .shops-ui .sbo-device-icon,
body.shops-body .shops-ui .sbo-overview-icon,
body.shops-body .shops-ui .sbo-shop-note-icon,
body.shops-body .shops-ui .sbo-device-empty > span,
body.shops-body .shops-ui .sbo-shops-empty > span,
body.shops-body .sbo-shop-modal h2 > span,
body.shops-body .sbo-shop-modal__info-icon,
body.shops-body .sbo-shop-modal__close {
    display: inline-grid !important;
    place-items: center !important;
    line-height: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-tab-icon svg,
body.shops-body .shops-ui .sbo-shop-building svg,
body.shops-body .shops-ui .sbo-shop-fact-icon svg,
body.shops-body .shops-ui .sbo-device-icon svg,
body.shops-body .shops-ui .sbo-overview-icon svg,
body.shops-body .shops-ui .sbo-shop-note-icon svg,
body.shops-body .shops-ui .sbo-device-empty > span svg,
body.shops-body .shops-ui .sbo-shops-empty > span svg,
body.shops-body .shops-ui .sbo-shop-actions button > span svg,
body.shops-body .shops-ui .sbo-device-actions button > span svg,
body.shops-body .shops-ui .sbo-shop-actions summary svg,
body.shops-body .shops-ui .sbo-device-actions summary svg,
body.shops-body .shops-ui .sbo-devices-heading button > span svg,
body.shops-body .shops-ui .sbo-shops-empty button > span svg,
body.shops-body .shops-ui .sbo-overview-chevron svg,
body.shops-body .sbo-shop-modal h2 > span svg,
body.shops-body .sbo-shop-modal__info-icon svg,
body.shops-body .sbo-shop-modal__close svg {
    display: block !important;
    flex-shrink: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-tab-icon {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
}

body.shops-body .shops-ui .sbo-shop-tab-icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.shops-body .shops-ui .sbo-shop-building svg,
body.shops-body .shops-ui .sbo-overview-icon svg {
    width: 22px !important;
    height: 22px !important;
}

body.shops-body .shops-ui .sbo-device-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.shops-body .shops-ui .sbo-device-icon.is-online {
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

body.shops-body .shops-ui .sbo-device-icon svg {
    width: 24px !important;
    height: 24px !important;
}

body.shops-body .shops-ui .sbo-shop-fact-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-fact-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

body.shops-body .shops-ui .sbo-shop-note-icon {
    color: #3366CC !important;
    font-size: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-note-icon svg {
    width: 20px !important;
    height: 20px !important;
}

body.shops-body .shops-ui .sbo-device-empty > span,
body.shops-body .shops-ui .sbo-shops-empty > span {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.shops-body .shops-ui .sbo-device-empty > span svg,
body.shops-body .shops-ui .sbo-shops-empty > span svg {
    width: 28px !important;
    height: 28px !important;
}

body.shops-body .shops-ui .sbo-shop-actions summary,
body.shops-body .shops-ui .sbo-device-actions summary {
    font-size: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-actions summary svg,
body.shops-body .shops-ui .sbo-device-actions summary svg {
    width: 18px !important;
    height: 18px !important;
}

body.shops-body .shops-ui .sbo-shop-actions button,
body.shops-body .shops-ui .sbo-device-actions button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.shops-body .shops-ui .sbo-shop-actions button > span,
body.shops-body .shops-ui .sbo-device-actions button > span {
    width: 16px !important;
    height: 16px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: inherit !important;
    font-size: 0 !important;
}

body.shops-body .shops-ui .sbo-shop-actions button > span svg,
body.shops-body .shops-ui .sbo-device-actions button > span svg {
    width: 16px !important;
    height: 16px !important;
}

body.shops-body .shops-ui .sbo-devices-heading button,
body.shops-body .shops-ui .sbo-shops-empty button {
    gap: 8px !important;
}

body.shops-body .shops-ui .sbo-devices-heading button > span,
body.shops-body .shops-ui .sbo-shops-empty button > span {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
}

body.shops-body .shops-ui .sbo-overview-chevron {
    display: inline-grid !important;
    place-items: center !important;
    color: #94A3B8 !important;
    font-size: 0 !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .sbo-overview-chevron svg {
    width: 14px !important;
    height: 14px !important;
}

body.shops-body .shops-ui .sbo-status-dot {
    width: 7px !important;
    height: 7px !important;
    display: inline-block !important;
    margin-right: 4px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    vertical-align: middle !important;
    font-size: 0 !important;
}

body.shops-body .sbo-shop-modal h2 > span {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 0 !important;
}

body.shops-body .sbo-shop-modal h2 > span svg {
    width: 18px !important;
    height: 18px !important;
}

body.shops-body .sbo-remove-device-modal h2 > span {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.shops-body .sbo-shop-modal__info-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
    color: #3366CC !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    place-items: start !important;
    line-height: 1 !important;
}

body.shops-body .sbo-shop-modal__info-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 !important;
}

body.shops-body .sbo-shop-modal__close {
    font-size: 0 !important;
}

body.shops-body .sbo-shop-modal__close svg {
    width: 16px !important;
    height: 16px !important;
}

/* ==========================================================================
   SHOPS & DEVICES ? popup/modal font-size 16px (page-scoped)
   Class: shops-popup-fs-16 ? overrides later 14px/13px/12px/15px modal polish rules
   Does not change headings (18/22) or icon-only nodes (font-size: 0)
   Field labels stay 18px via shops-fs-min-16 rule under max-width 1366px
   ========================================================================== */
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal {
    font-size: 16px;
}

/* Explicit overrides for known =14px popup text ? 16px */
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 p,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 span,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 small,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 label,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 a,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 button,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 input,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 select,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 strong,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 b,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 em,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__info,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__info span:not(.sbo-shop-modal__info-icon),
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__info strong,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__info b,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__buttons button,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__buttons button:last-child,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-phone,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-phone b,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-phone input,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-pay,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-pay h3,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-pay p,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-pay strong,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-staff-pack-pay,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-staff-pack-pay h3,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-staff-pack-pay__hint,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-staff-pack-note,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16.sbo-remove-device-modal p,
body.shops-body.shops-popup-fs-16 .sbo-remove-device-modal.shops-popup-fs-16 p {
    font-size: 16px !important;
}

/* Field labels stay 18px on mobile + tablet */
@media (max-width: 1366px) {
    body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 span.sbo-shop-modal__label,
    body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__label {
        font-size: 18px !important;
    }
}

/* Keep larger modal titles above the 16px floor */
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 h2,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__dialog h2,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16.sbo-remove-device-modal h2,
body.shops-body.shops-popup-fs-16 .sbo-remove-device-modal.shops-popup-fs-16 h2 {
    font-size: 18px !important;
}

@media (min-width: 768px) {
    body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 h2,
    body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__dialog h2,
    body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16.sbo-remove-device-modal h2,
    body.shops-body.shops-popup-fs-16 .sbo-remove-device-modal.shops-popup-fs-16 h2 {
        font-size: 22px !important;
    }
}

/* Keep icon-only / close controls at 0 inside popups */
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 [aria-hidden="true"],
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__close,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 .sbo-shop-modal__info-icon,
body.shops-body.shops-popup-fs-16 .sbo-shop-modal.shops-popup-fs-16 h2 > span {
    font-size: 0 !important;
}

/* ==========================================================================
   Shops & Devices ? page heading match Dashboard / More blue header
   text color, font size, icons, bg color (page-scoped)
   ========================================================================== */

body.shops-body .shops-ui .sbo-shops-header.shops-header,
body.shops-body .shops-ui .shops-header {
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    border-radius: 0 0 15px 15px !important;
}

body.shops-body .shops-header__back,
body.shops-body .shops-ui .sbo-shops-back.shops-header__back,
body.shops-body .shops-header__icon {
    color: #ffffff !important;
}

body.shops-body .shops-header__icon {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.shops-body .shops-header__icon svg,
body.shops-body .shops-header__back svg {
    color: #ffffff !important;
    stroke: currentColor !important;
}

body.shops-body .shops-ui .shops-header__title,
body.shops-body .shops-ui .sbo-shops-header h1,
body.shops-body .shops-header__title,
body.sbo-dashboard-body.shops-body .shops-ui h1.shops-header__title {
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.shops-body .shops-ui .shops-header__subtitle,
body.shops-body .shops-ui .sbo-shops-header p,
body.shops-body .shops-header__subtitle,
body.sbo-dashboard-body.shops-body .shops-ui p.shops-header__subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.shops-body .shops-ui .shops-header__action,
body.shops-body .shops-header__action,
body.shops-body .shops-ui .sbo-shop-add-button.shops-header__action {
    background: #ffffff !important;
    color: #3366CC !important;
    border: 0 !important;
    font-family: var(--sb-font-bold) !important;
}

body.shops-body .shops-ui .shops-header__action svg,
body.shops-body .shops-header__action svg {
    color: #3366CC !important;
    stroke: currentColor !important;
}

/* Shop card blue heading strip ? same Dashboard blue tokens */
body.shops-body .shops-ui .sbo-shop-card__head {
    background: #36C !important;
    color: #ffffff !important;
}

body.shops-body .shops-ui .sbo-shop-building {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

body.shops-body .shops-ui .sbo-shop-building svg {
    color: #ffffff !important;
    stroke: currentColor !important;
}

body.shops-body .shops-ui .sbo-shop-card__head h2 {
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
}

body.shops-body .shops-ui .sbo-shop-actions summary {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body.shops-body .shops-ui .sbo-shop-actions summary svg {
    color: #ffffff !important;
}

/* Content section headings ? match Dashboard section heading tone */
body.shops-body .shops-ui .sbo-devices-heading h3,
body.shops-body .shops-ui .sbo-all-shops h3 {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body.shops-body .shops-ui .sbo-devices-heading p {
    margin: 2px 0 0 !important;
    color: #8a94a6 !important;
    line-height: 1.25 !important;
}

/* Shop fact values (Retail, location, phone, devices) */
body.shops-body .shops-ui .sbo-shop-fact-copy strong {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.shops-body .shops-ui .sbo-shop-fact-copy strong {
        font-size: 18px !important;
    }
}

/* Authorized devices ? device name */
body.shops-body .shops-ui .sbo-device-copy h4 {
    font-size: 16px !important;
}

@media (max-width: 1366px) {
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-device-copy h4 {
        font-size: 18px !important;
    }
}

/* All shops overview ? shop name + device count */
body.shops-body .shops-ui .sbo-all-shops button > span:nth-child(2) > strong,
body.shops-body .shops-ui .sbo-all-shops button > span:nth-child(3) > strong {
    font-size: 16px !important;
}

@media (max-width: 1366px) {
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-all-shops button > span:nth-child(2) > strong,
    body.shops-body.shops-fs-min-16 .shops-ui .sbo-all-shops button > span:nth-child(3) > strong {
        font-size: 18px !important;
    }
}

/* Billing note ? title + link */
body.shops-body .shops-ui .sbo-shop-billing-note strong,
body.shops-body .shops-ui .sbo-shop-billing-note a {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.shops-body .shops-ui .sbo-shop-billing-note strong,
    body.shops-body .shops-ui .sbo-shop-billing-note a {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   Credit Ledger ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.credit-ledger-body.sbo-dashboard-body h1,
body.credit-ledger-body.sbo-dashboard-body h2,
body.credit-ledger-body.sbo-dashboard-body h3,
body.credit-ledger-body.sbo-dashboard-body h4,
body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__title,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-header h1,
body.credit-ledger-body .credit-ledger-header__title,
body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui h1.credit-ledger-header__title,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty h2,
body.credit-ledger-body .sbo-credit-modal__header h2,
body.credit-ledger-body .sbo-credit-limit-modal__header h2,
body.credit-ledger-body .sbo-credit-customer-modal h2,
body.credit-ledger-body .sbo-credit-limit-modal h2,
body.credit-ledger-body #credit-customer-modal-title,
body.credit-ledger-body #credit-limit-modal-title {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.credit-ledger-body.sbo-dashboard-body h1,
    body.credit-ledger-body.sbo-dashboard-body h2,
    body.credit-ledger-body.sbo-dashboard-body h3,
    body.credit-ledger-body.sbo-dashboard-body h4,
    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__title,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header h1,
    body.credit-ledger-body .credit-ledger-header__title,
    body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui h1.credit-ledger-header__title,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty h2,
    body.credit-ledger-body .sbo-credit-modal__header h2,
    body.credit-ledger-body .sbo-credit-limit-modal__header h2,
    body.credit-ledger-body .sbo-credit-customer-modal h2,
    body.credit-ledger-body .sbo-credit-limit-modal h2,
    body.credit-ledger-body #credit-customer-modal-title,
    body.credit-ledger-body #credit-limit-modal-title {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.credit-ledger-body.sbo-dashboard-body h1,
    body.credit-ledger-body.sbo-dashboard-body h2,
    body.credit-ledger-body.sbo-dashboard-body h3,
    body.credit-ledger-body.sbo-dashboard-body h4,
    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__title,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header h1,
    body.credit-ledger-body .credit-ledger-header__title,
    body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui h1.credit-ledger-header__title,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty h2,
    body.credit-ledger-body .sbo-credit-modal__header h2,
    body.credit-ledger-body .sbo-credit-limit-modal__header h2,
    body.credit-ledger-body .sbo-credit-customer-modal h2,
    body.credit-ledger-body .sbo-credit-limit-modal h2,
    body.credit-ledger-body #credit-customer-modal-title,
    body.credit-ledger-body #credit-limit-modal-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   Credit Ledger ? responsive labels / body / UI text (page-scoped)
   Mobile (<768px): 16px | Tablet & Desktop (768px+): 18px
   Does not alter existing class definitions; overrides font-size only.
   Headings remain controlled by the Credit Ledger heading block above.
   ========================================================================== */

body.credit-ledger-body,
body.credit-ledger-body .credit-ledger-ui {
    font-size: 16px !important;
}

/* Labels / meta / supporting copy */
body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__subtitle,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-header p,
body.credit-ledger-body .credit-ledger-ui p.credit-ledger-header__subtitle,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity p,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-status,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__limit,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage-label,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer small,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__last,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty p,
body.credit-ledger-body .sbo-credit-customer-form label,
body.credit-ledger-body .sbo-credit-customer-form label > span,
body.credit-ledger-body .sbo-credit-limit-field,
body.credit-ledger-body .sbo-credit-limit-field > span,
body.credit-ledger-body .sbo-credit-limit-customer,
body.credit-ledger-body .sbo-credit-limit-warning,
body.credit-ledger-body .sbo-credit-customer-form__errors,
body.credit-ledger-body .sbo-credit-customer-form__errors p,
body.credit-ledger-body .sbo-bottom-nav a,
body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav a {
    font-size: 16px !important;
}

/* Body / UI actions + modal footer buttons */
body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__action,
body.credit-ledger-body .credit-ledger-ui .sbo-add-staff-button.credit-ledger-header__action,
body.credit-ledger-body .credit-ledger-header__action,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__avatar,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup,
body.credit-ledger-body .sbo-credit-customer-form input,
body.credit-ledger-body .sbo-credit-limit-field input,
body.credit-ledger-body .sbo-credit-limit-customer strong,
body.credit-ledger-body .sbo-credit-customer-form__footer button,
body.credit-ledger-body .sbo-credit-limit-form__footer button,
body.credit-ledger-body .sbo-credit-customer-modal button,
body.credit-ledger-body .sbo-credit-limit-modal button,
body.credit-ledger-body .credit-ledger-ui p,
body.credit-ledger-body .credit-ledger-ui span,
body.credit-ledger-body .credit-ledger-ui small,
body.credit-ledger-body .credit-ledger-ui label,
body.credit-ledger-body .credit-ledger-ui a,
body.credit-ledger-body .credit-ledger-ui button,
body.credit-ledger-body .credit-ledger-ui input,
body.credit-ledger-body .credit-ledger-ui strong,
body.credit-ledger-body .credit-ledger-ui b,
body.credit-ledger-body .credit-ledger-ui em {
    font-size: 16px !important;
}

/* Mid emphasis ? card titles, metric values, bottom nav labels */
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity strong,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics strong,
body.credit-ledger-body .sbo-bottom-nav a span,
body.credit-ledger-body .sbo-bottom-nav .sbo-bottom-nav__label,
body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav a span,
body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Summary counts */
body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
    font-size: 18px !important;
}

/* Decorative glyphs / SVG icon containers */
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__arrow,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty > span,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty__icon,
body.credit-ledger-body .credit-ledger-ui [aria-hidden="true"],
body.credit-ledger-body .sbo-bottom-nav__icon,
body.credit-ledger-body .credit-ledger-header__icon,
body.credit-ledger-body .credit-ledger-header__back,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon,
body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__loader,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-status__icon,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup-icon,
body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit,
body.credit-ledger-body .sbo-credit-limit-modal__icon {
    font-size: 0 !important;
}

@media (min-width: 768px) {
    body.credit-ledger-body,
    body.credit-ledger-body .credit-ledger-ui {
        font-size: 18px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__subtitle,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header p,
    body.credit-ledger-body .credit-ledger-ui p.credit-ledger-header__subtitle,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity p,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-status,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics small,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__limit,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__usage-label,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__footer small,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__last,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty p,
    body.credit-ledger-body .sbo-credit-customer-form label,
    body.credit-ledger-body .sbo-credit-customer-form label > span,
    body.credit-ledger-body .sbo-credit-limit-field,
    body.credit-ledger-body .sbo-credit-limit-field > span,
    body.credit-ledger-body .sbo-credit-limit-customer,
    body.credit-ledger-body .sbo-credit-limit-warning,
    body.credit-ledger-body .sbo-credit-customer-form__errors,
    body.credit-ledger-body .sbo-credit-customer-form__errors p,
    body.credit-ledger-body .sbo-bottom-nav a,
    body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav a {
        font-size: 18px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__action,
    body.credit-ledger-body .credit-ledger-ui .sbo-add-staff-button.credit-ledger-header__action,
    body.credit-ledger-body .credit-ledger-header__action,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__avatar,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup,
    body.credit-ledger-body .sbo-credit-customer-form input,
    body.credit-ledger-body .sbo-credit-limit-field input,
    body.credit-ledger-body .sbo-credit-limit-customer strong,
    body.credit-ledger-body .sbo-credit-customer-form__footer button,
    body.credit-ledger-body .sbo-credit-limit-form__footer button,
    body.credit-ledger-body .sbo-credit-customer-modal button,
    body.credit-ledger-body .sbo-credit-limit-modal button,
    body.credit-ledger-body .credit-ledger-ui p,
    body.credit-ledger-body .credit-ledger-ui span,
    body.credit-ledger-body .credit-ledger-ui small,
    body.credit-ledger-body .credit-ledger-ui label,
    body.credit-ledger-body .credit-ledger-ui a,
    body.credit-ledger-body .credit-ledger-ui button,
    body.credit-ledger-body .credit-ledger-ui input,
    body.credit-ledger-body .credit-ledger-ui strong,
    body.credit-ledger-body .credit-ledger-ui b,
    body.credit-ledger-body .credit-ledger-ui em {
        font-size: 18px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__identity strong,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__metrics strong,
    body.credit-ledger-body .sbo-bottom-nav a span,
    body.credit-ledger-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav a span,
    body.credit-ledger-body .credit-ledger-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
        font-size: 20px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__arrow,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty > span,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-empty__icon,
    body.credit-ledger-body .credit-ledger-ui [aria-hidden="true"],
    body.credit-ledger-body .sbo-bottom-nav__icon,
    body.credit-ledger-body .credit-ledger-header__icon,
    body.credit-ledger-body .credit-ledger-header__back,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__loader,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-status__icon,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__followup-icon,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-card__edit-limit,
    body.credit-ledger-body .sbo-credit-limit-modal__icon {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   Credit Ledger ? mobile toolbar / search / filters UI fix (page-scoped)
   Stacks search + filters, prevents placeholder truncation and tab overflow.
   ========================================================================== */
@media (max-width: 767px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search.sbo-staff-search,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search.sbo-credit-search {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 12px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search.sbo-credit-search input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input::placeholder,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search.sbo-credit-search input::placeholder {
        font-size: 13px !important;
        opacity: 1 !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon {
        flex: 0 0 auto !important;
        width: 16px !important;
        height: 16px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 6px !important;
        font-size: 16px !important;
        font-family: var(--sb-font-regular) !important;
        font-weight: normal !important;
        line-height: 1.2 !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a.is-active {
        font-family: var(--sb-font-bold) !important;
        font-weight: normal !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status {
        font-size: 12px !important;
        margin: 0 !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search__status:not(:empty),
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search__status:not(:empty) {
        margin: 0 2px !important;
    }
}

@media (max-width: 380px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search.sbo-credit-search input,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-search input::placeholder,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-search.sbo-credit-search input::placeholder {
        font-size: 12px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a {
        padding: 0 4px !important;
        font-size: 16px !important;
        font-family: var(--sb-font-regular) !important;
        font-weight: normal !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-filters a.is-active {
        font-family: var(--sb-font-bold) !important;
        font-weight: normal !important;
    }
}

/* ==========================================================================
   Credit Ledger ? modal / popup theme match (page-scoped)
   Aligns Add Credit Customer + Edit Credit Limit dialogs with credit-ledger-ui
   blue theme (#3366CC / #E0E8FF / #E8F0FE). Overrides theme tokens only.
   ========================================================================== */

body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__backdrop,
body.credit-ledger-body .sbo-credit-limit-modal .sbo-add-staff-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(2px) !important;
}

body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__dialog,
body.credit-ledger-body .sbo-credit-limit-modal .sbo-add-staff-modal__dialog {
    width: min(100%, 480px) !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(30, 50, 80, 0.22) !important;
    font-family: var(--sb-font-regular) !important;
    color: #1e293b !important;
    overflow: hidden !important;
}

body.credit-ledger-body .sbo-credit-modal__header,
body.credit-ledger-body .sbo-credit-limit-modal__header,
body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__header {
    min-height: 64px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #E0E8FF !important;
    background: linear-gradient(180deg, #F8FBFF 0%, #ffffff 100%) !important;
    gap: 10px !important;
}

body.credit-ledger-body .sbo-credit-modal__header h2,
body.credit-ledger-body .sbo-credit-limit-modal__header h2,
body.credit-ledger-body .sbo-credit-customer-modal #credit-customer-modal-title,
body.credit-ledger-body .sbo-credit-limit-modal #credit-limit-modal-title {
    margin: 0 !important;
    color: #000 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    letter-spacing: -0.01em !important;
}

body.credit-ledger-body .sbo-credit-limit-modal__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    border: 1px solid #BFDBFE !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

body.credit-ledger-body .sbo-credit-modal__header button,
body.credit-ledger-body .sbo-credit-limit-modal__header button,
body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__header button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    color: #64748B !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    transition: background-color 160ms ease, color 160ms ease !important;
}

body.credit-ledger-body .sbo-credit-modal__header button:hover,
body.credit-ledger-body .sbo-credit-limit-modal__header button:hover,
body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__header button:hover {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.credit-ledger-body .sbo-credit-customer-form,
body.credit-ledger-body .sbo-credit-limit-form {
    padding: 18px 18px 20px !important;
    display: grid !important;
    gap: 14px !important;
    background: #ffffff !important;
}

body.credit-ledger-body .sbo-credit-customer-form label,
body.credit-ledger-body .sbo-credit-limit-field {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.credit-ledger-body .sbo-credit-customer-form label > span,
body.credit-ledger-body .sbo-credit-limit-field > span {
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.credit-ledger-body .sbo-credit-customer-form input,
body.credit-ledger-body .sbo-credit-limit-field input {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.credit-ledger-body .sbo-credit-customer-form input::placeholder,
body.credit-ledger-body .sbo-credit-limit-field input::placeholder {
    color: #94A3B8 !important;
}

body.credit-ledger-body .sbo-credit-customer-form input:focus,
body.credit-ledger-body .sbo-credit-limit-field input:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    background: #ffffff !important;
    outline: none !important;
}

body.credit-ledger-body .sbo-credit-limit-field input.is-warning,
body.credit-ledger-body .sbo-credit-limit-field input.is-warning:focus {
    border-color: #F59E0B !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16) !important;
}

body.credit-ledger-body .sbo-credit-limit-customer {
    min-height: 48px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #2554b0 !important;
    font-family: var(--sb-font-regular) !important;
    box-sizing: border-box !important;
}

body.credit-ledger-body .sbo-credit-limit-customer strong {
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.credit-ledger-body .sbo-credit-limit-warning {
    color: #B45309 !important;
    font-family: var(--sb-font-regular) !important;
}

body.credit-ledger-body .sbo-credit-customer-form__errors {
    padding: 10px 12px !important;
    border: 1px solid #FECACA !important;
    border-radius: 12px !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer,
body.credit-ledger-body .sbo-credit-limit-form__footer {
    margin-top: 6px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button,
body.credit-ledger-body .sbo-credit-limit-form__footer button {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button[type="button"],
body.credit-ledger-body .sbo-credit-limit-form__footer button[type="button"] {
    border: 1px solid #E0E8FF !important;
    background: #ffffff !important;
    color: #000 !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button[type="button"]:hover,
body.credit-ledger-body .sbo-credit-limit-form__footer button[type="button"]:hover {
    border-color: #3366CC !important;
    color: #3366CC !important;
    background: #F8FBFF !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button[type="submit"],
body.credit-ledger-body .sbo-credit-limit-form__footer button[type="submit"] {
    border: 1px solid #3366CC !important;
    background: #3366CC !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.credit-ledger-body .sbo-credit-customer-form__footer button[type="submit"]:hover,
body.credit-ledger-body .sbo-credit-limit-form__footer button[type="submit"]:hover {
    background: #2554b0 !important;
    border-color: #2554b0 !important;
    filter: none !important;
}

@media (max-width: 767px) {
    body.credit-ledger-body .sbo-credit-customer-modal,
    body.credit-ledger-body .sbo-credit-limit-modal {
        padding: 16px !important;
        place-items: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body.credit-ledger-body .sbo-credit-customer-modal.is-open,
    body.credit-ledger-body .sbo-credit-limit-modal.is-open {
        display: grid !important;
    }

    body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__dialog,
    body.credit-ledger-body .sbo-credit-limit-modal .sbo-add-staff-modal__dialog {
        width: min(100%, 480px) !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        height: auto !important;
        border-radius: 15px !important;
        border: 1px solid #E0E8FF !important;
        margin: auto !important;
    }

    body.credit-ledger-body .sbo-credit-modal__header,
    body.credit-ledger-body .sbo-credit-limit-modal__header,
    body.credit-ledger-body .sbo-credit-customer-modal .sbo-add-staff-modal__header {
        padding: 14px 16px !important;
    }

    body.credit-ledger-body .sbo-credit-customer-form,
    body.credit-ledger-body .sbo-credit-limit-form {
        padding: 16px 16px 20px !important;
    }
}

/* ==========================================================================
   CLOSE DAY ? match dashboard / credit-ledger / shops UI (close-day-ui)
   ========================================================================== */

body.close-day-body.sbo-dashboard-body,
body.sbo-dashboard-body.close-day-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.close-day-ui.sbo-dashboard,
.sbo-dashboard.close-day-ui {
    --cd-blue: #3366cc;
    --cd-blue-deep: #2554b0;
    --cd-blue-soft: #e8f0fe;
    --cd-mint: #0d9488;
    --cd-mint-soft: #e6f7f5;
    --cd-green: #10b981;
    --cd-green-soft: #e7f8f1;
    --cd-orange: #f59e0b;
    --cd-orange-soft: #fff7e8;
    --cd-text: #1e293b;
    --cd-muted: #8a94a6;
    --cd-line: #e8edf3;
    --cd-border: #E0E8FF;
    --cd-card: #ffffff;
    --cd-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --cd-shadow-sm: 0 4px 14px rgba(30, 50, 80, 0.05);
    --cd-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cd-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.close-day-body,
body.close-day-body .close-day-ui {
    font-size: 14px;
    color: #1e293b;
}

body.close-day-body,
body.close-day-body .close-day-ui,
body.close-day-body .close-day-ui p,
body.close-day-body .close-day-ui span,
body.close-day-body .close-day-ui small,
body.close-day-body .close-day-ui label,
body.close-day-body .close-day-ui a,
body.close-day-body .close-day-ui button,
body.close-day-body .close-day-ui input,
body.close-day-body .close-day-ui strong,
body.close-day-body .close-day-ui b,
body.close-day-body .close-day-ui em,
body.close-day-body .close-day-ui i,
body.close-day-body .close-day-ui dt,
body.close-day-body .close-day-ui dd,
body.close-day-body .close-day-modal,
body.close-day-body .close-day-modal p,
body.close-day-body .close-day-modal span,
body.close-day-body .close-day-modal small,
body.close-day-body .close-day-modal label,
body.close-day-body .close-day-modal a,
body.close-day-body .close-day-modal button,
body.close-day-body .close-day-modal strong {
    font-size: 14px !important;
}

body.close-day-body .close-day-ui small,
body.close-day-body .close-day-ui .close-day-metrics small,
body.close-day-body .close-day-ui .close-day-checks small,
body.close-day-body .close-day-ui .close-day-progress small,
body.close-day-body .close-day-ui .close-day-commissions small,
body.close-day-body .close-day-ui .close-day-badge,
body.close-day-body .close-day-ui .close-day-pill,
body.close-day-body .close-day-ui .close-day-final,
body.close-day-body .close-day-ui .close-day-pending-note,
body.close-day-body .close-day-ui .close-day-draft {
    font-size: 14px !important;
}

body.close-day-body .close-day-ui [aria-hidden="true"],
body.close-day-body .close-day-header__icon,
body.close-day-body .close-day-header__back,
body.close-day-body .close-day-card__icon,
body.close-day-body .close-day-checks li > span,
body.close-day-body .close-day-modal__close,
body.close-day-body .sbo-close-day-modal__icon,
body.close-day-body .sbo-close-day-success__check {
    font-size: 0 !important;
}

.close-day-ui h1,
.close-day-ui h2,
.close-day-ui h3,
.close-day-ui strong,
.close-day-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.close-day-ui em,
.close-day-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.close-day-ui small,
.close-day-ui p,
.close-day-ui label,
.close-day-ui span,
.close-day-ui button,
.close-day-ui a,
.close-day-ui input,
.close-day-ui dt,
.close-day-ui dd {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.close-day-body .close-day-ui .sbo-close-day-header.close-day-header,
body.close-day-body .close-day-ui .close-day-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.close-day-body .close-day-header__back,
body.close-day-body .close-day-ui .sbo-back-button.close-day-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.close-day-body .close-day-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.close-day-body .close-day-header__back svg {
    display: block;
}

body.close-day-body .close-day-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.close-day-body .close-day-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.close-day-body .close-day-header__titles {
    min-width: 0;
}

body.close-day-body .close-day-ui .close-day-header__title,
body.close-day-body .close-day-ui .sbo-close-day-header h1,
body.sbo-dashboard-body.close-day-body .close-day-ui h1.close-day-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.close-day-body .close-day-ui .close-day-header__subtitle,
body.close-day-body .close-day-ui .sbo-close-day-header p,
body.sbo-dashboard-body.close-day-body .close-day-ui p.close-day-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.close-day-body .close-day-ui .sbo-close-day-header__back {
    display: none !important;
}

/* ---------- Content shell ---------- */
body.close-day-body .close-day-ui .sbo-close-day-content.close-day-content,
body.close-day-body .close-day-ui .close-day-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

body.close-day-body .close-day-ui form[data-close-day-form] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Cards ---------- */
body.close-day-body .close-day-ui .sbo-close-day-card.close-day-card,
body.close-day-body .close-day-ui .close-day-card {
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

body.close-day-body .close-day-ui .close-day-card__head,
body.close-day-body .close-day-ui .sbo-close-day-card__head {
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

body.close-day-body .close-day-ui .close-day-card__head h2,
body.close-day-body .close-day-ui .sbo-close-day-card__head h2 {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.close-day-body .close-day-ui .close-day-card__icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    flex-shrink: 0;
    font-size: 0 !important;
}

body.close-day-body .close-day-ui .close-day-card__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* ---------- Badge / pills ---------- */
body.close-day-body .close-day-ui .close-day-badge,
body.close-day-body .close-day-ui .sbo-close-day-badge {
    min-height: 28px;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    white-space: nowrap;
}

body.close-day-body .close-day-ui .close-day-badge.is-open,
body.close-day-body .close-day-ui .sbo-close-day-badge.is-open {
    background: #FFF7E8 !important;
    color: #B88412 !important;
}

body.close-day-body .close-day-ui .close-day-badge.is-closed,
body.close-day-body .close-day-ui .sbo-close-day-badge.is-closed {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.close-day-body .close-day-ui .close-day-pill,
body.close-day-body .close-day-ui .sbo-close-day-pill {
    min-height: 26px;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    white-space: nowrap;
}

body.close-day-body .close-day-ui .close-day-pill.is-ok,
body.close-day-body .close-day-ui .sbo-close-day-pill.is-ok {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.close-day-body .close-day-ui .close-day-pill.is-pending,
body.close-day-body .close-day-ui .sbo-close-day-pill.is-pending {
    background: #FFF7E8 !important;
    color: #B88412 !important;
}

body.close-day-body .close-day-ui .close-day-pill > span[aria-hidden="true"] {
    display: inline-grid;
    place-items: center;
    width: 12px;
    height: 12px;
    font-size: 0 !important;
}

body.close-day-body .close-day-ui .close-day-pill > span[aria-hidden="true"] svg {
    width: 12px;
    height: 12px;
}

/* ---------- Metrics ---------- */
body.close-day-body .close-day-ui .close-day-metrics,
body.close-day-body .close-day-ui .sbo-close-day-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.close-day-body .close-day-ui .close-day-metrics article,
body.close-day-body .close-day-ui .sbo-close-day-metrics article {
    padding: 14px 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFF !important;
    box-shadow: none !important;
}

body.close-day-body .close-day-ui .close-day-metrics small,
body.close-day-body .close-day-ui .sbo-close-day-metrics small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.close-day-body .close-day-ui .close-day-metrics strong,
body.close-day-body .close-day-ui .sbo-close-day-metrics strong {
    display: block !important;
    margin-top: 6px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* ---------- Checks ---------- */
body.close-day-body .close-day-ui .close-day-checks,
body.close-day-body .close-day-ui .sbo-close-day-checks {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 10px !important;
}

body.close-day-body .close-day-ui .close-day-checks li,
body.close-day-body .close-day-ui .sbo-close-day-checks li {
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 32px 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.close-day-body .close-day-ui .close-day-checks li > span,
body.close-day-body .close-day-ui .sbo-close-day-checks li > span {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    font-size: 0 !important;
}

body.close-day-body .close-day-ui .close-day-checks li > span svg {
    width: 14px;
    height: 14px;
}

body.close-day-body .close-day-ui .close-day-checks .is-pass > span,
body.close-day-body .close-day-ui .sbo-close-day-checks .is-pass > span {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.close-day-body .close-day-ui .close-day-checks .is-warn > span,
body.close-day-body .close-day-ui .sbo-close-day-checks .is-warn > span {
    background: #FFF7E8 !important;
    color: #D29A1D !important;
}

body.close-day-body .close-day-ui .close-day-checks strong,
body.close-day-body .close-day-ui .sbo-close-day-checks strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.close-day-body .close-day-ui .close-day-checks small,
body.close-day-body .close-day-ui .sbo-close-day-checks small {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.close-day-body .close-day-ui .close-day-checks a,
body.close-day-body .close-day-ui .sbo-close-day-checks a {
    color: #3366CC !important;
    text-decoration: none !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.close-day-body .close-day-ui .close-day-progress,
body.close-day-body .close-day-ui .sbo-close-day-progress {
    margin-top: 14px !important;
    display: grid !important;
    gap: 8px !important;
}

body.close-day-body .close-day-ui .close-day-progress i,
body.close-day-body .close-day-ui .sbo-close-day-progress i {
    height: 8px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #E8EDF3 !important;
}

body.close-day-body .close-day-ui .close-day-progress i span,
body.close-day-body .close-day-ui .sbo-close-day-progress i span {
    display: block !important;
    width: var(--progress);
    height: 100% !important;
    background: linear-gradient(90deg, #10b981, #41cdb6) !important;
}

body.close-day-body .close-day-ui .close-day-progress small,
body.close-day-body .close-day-ui .sbo-close-day-progress small {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

/* ---------- Fields / amounts ---------- */
body.close-day-body .close-day-ui .close-day-field,
body.close-day-body .close-day-ui .sbo-close-day-field {
    display: grid !important;
    gap: 8px !important;
}

body.close-day-body .close-day-ui .close-day-field > span,
body.close-day-body .close-day-ui .sbo-close-day-field > span {
    color: #46536a !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-ui .close-day-field input,
body.close-day-body .close-day-ui .sbo-close-day-field input {
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #1e293b !important;
    background: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    outline: none;
}

body.close-day-body .close-day-ui .close-day-field input:focus,
body.close-day-body .close-day-ui .sbo-close-day-field input:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.close-day-body .close-day-ui .close-day-hint,
body.close-day-body .close-day-ui .sbo-close-day-hint {
    margin: 10px 0 0 !important;
    color: #059669 !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-ui .close-day-amount,
body.close-day-body .close-day-ui .sbo-close-day-amount {
    margin: 0 !important;
    color: #059669 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
}

/* ---------- Commissions ---------- */
body.close-day-body .close-day-ui .close-day-approve,
body.close-day-body .close-day-ui .sbo-close-day-approve {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #0d9488 !important;
    color: #fff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    cursor: pointer;
}

body.close-day-body .close-day-ui .close-day-approve.is-inline,
body.close-day-body .close-day-ui .sbo-close-day-approve.is-inline {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
}

body.close-day-body .close-day-ui .close-day-commissions,
body.close-day-body .close-day-ui .sbo-close-day-commissions {
    display: grid !important;
    gap: 10px !important;
}

body.close-day-body .close-day-ui .close-day-commissions article,
body.close-day-body .close-day-ui .sbo-close-day-commissions article {
    padding: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    align-items: center !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFF !important;
}

body.close-day-body .close-day-ui .close-day-commissions strong,
body.close-day-body .close-day-ui .sbo-close-day-commissions strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-ui .close-day-commissions small,
body.close-day-body .close-day-ui .sbo-close-day-commissions small {
    color: #6b778a !important;
    font-size: 13px !important;
}

body.close-day-body .close-day-ui .close-day-empty,
body.close-day-body .close-day-ui .sbo-close-day-empty {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

/* ---------- Summary ---------- */
body.close-day-body .close-day-ui .close-day-summary,
body.close-day-body .close-day-ui .sbo-close-day-summary {
    margin: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

body.close-day-body .close-day-ui .close-day-summary > div,
body.close-day-body .close-day-ui .sbo-close-day-summary > div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #F1F5F9;
}

body.close-day-body .close-day-ui .close-day-summary > div:last-child,
body.close-day-body .close-day-ui .sbo-close-day-summary > div:last-child {
    border-bottom: 0;
}

body.close-day-body .close-day-ui .close-day-summary dt,
body.close-day-body .close-day-ui .sbo-close-day-summary dt {
    color: #6b778a !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-ui .close-day-summary dd,
body.close-day-body .close-day-ui .sbo-close-day-summary dd {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-ui .close-day-summary .is-ok,
body.close-day-body .close-day-ui .sbo-close-day-summary .is-ok {
    color: #059669 !important;
}

body.close-day-body .close-day-ui .close-day-summary .is-variance dt,
body.close-day-body .close-day-ui .close-day-summary .is-variance dd,
body.close-day-body .close-day-ui .sbo-close-day-summary .is-variance dt,
body.close-day-body .close-day-ui .sbo-close-day-summary .is-variance dd {
    color: #D29A1D !important;
}

body.close-day-body .close-day-ui .close-day-final,
body.close-day-body .close-day-ui .sbo-close-day-final {
    margin: 12px 0 0 !important;
    color: #8a94a6 !important;
    font-size: 13px !important;
}

/* ---------- Actions ---------- */
body.close-day-body .close-day-ui .close-day-submit,
body.close-day-body .close-day-ui .sbo-close-day-submit {
    width: 100% !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #3366CC !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22) !important;
    cursor: pointer;
}

body.close-day-body .close-day-ui .close-day-submit > span[aria-hidden="true"],
body.close-day-body .close-day-ui .sbo-close-day-submit > span[aria-hidden="true"] {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 0 !important;
}

body.close-day-body .close-day-ui .close-day-submit svg,
body.close-day-body .close-day-ui .sbo-close-day-submit svg {
    width: 18px;
    height: 18px;
}

body.close-day-body .close-day-ui .close-day-pending-note,
body.close-day-body .close-day-ui .sbo-close-day-pending-note {
    margin: 8px 0 0 !important;
    color: #D29A1D !important;
    text-align: center !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.close-day-body .close-day-ui .close-day-draft,
body.close-day-body .close-day-ui .sbo-close-day-draft {
    width: 100% !important;
    margin-top: 4px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #46536a !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    cursor: pointer;
}

body.close-day-body .close-day-ui .close-day-draft > span[aria-hidden="true"] {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    font-size: 0 !important;
}

body.close-day-body .close-day-ui .close-day-draft svg {
    width: 16px;
    height: 16px;
}

body.close-day-body .close-day-ui form.is-locked .close-day-field input,
body.close-day-body .close-day-ui form.is-locked .sbo-close-day-field input {
    background: #F5F7FA !important;
}

/* ---------- Alerts ---------- */
body.close-day-body .close-day-ui .sbo-alert {
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
}

/* ---------- Modals (match dashboard / blue theme) ---------- */
body.close-day-body .close-day-modal.sbo-close-day-modal {
    padding: 20px !important;
    z-index: 1600 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__backdrop {
    background: rgba(15, 30, 55, 0.48) !important;
    backdrop-filter: blur(4px) !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__dialog {
    width: min(420px, 100%) !important;
    border-radius: 20px !important;
    border: 1px solid #E0E8FF !important;
    background: #fff !important;
    box-shadow: 0 22px 56px rgba(30, 50, 80, 0.22) !important;
    overflow: hidden !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__dialog > header {
    padding: 18px 18px 10px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 34px !important;
    gap: 12px !important;
    align-items: center !important;
}

body.close-day-body .close-day-modal.sbo-approve-commissions-modal .sbo-close-day-modal__dialog > header {
    grid-template-columns: 44px minmax(0, 1fr) 34px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__icon {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
}

body.close-day-body .close-day-modal.sbo-approve-commissions-modal .sbo-close-day-modal__icon {
    display: grid !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__icon svg {
    width: 20px !important;
    height: 20px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__icon.is-approve {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__icon.is-lock {
    background: #E8F0FE !important;
    color: #3366CC !important;
}

body.close-day-body .close-day-modal__close,
body.close-day-body .close-day-modal .sbo-close-day-modal__dialog > header > button,
body.close-day-body .sbo-close-day-success__x.close-day-modal__close {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
}

body.close-day-body .close-day-modal__close:hover,
body.close-day-body .close-day-modal .sbo-close-day-modal__dialog > header > button:hover {
    background: #E8EDF3 !important;
    color: #334155 !important;
}

body.close-day-body .close-day-modal__close svg,
body.close-day-body .close-day-modal .sbo-close-day-modal__dialog > header > button svg {
    width: 16px !important;
    height: 16px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__dialog h2,
body.close-day-body .close-day-modal #approve-commissions-title,
body.close-day-body .close-day-modal #confirm-close-title,
body.close-day-body .close-day-modal #close-success-title {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__dialog header p {
    margin: 4px 0 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__copy {
    margin: 0 18px 14px !important;
    color: #475569 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__copy strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__copy em {
    color: #EF4444 !important;
    font-style: normal !important;
    font-family: var(--sb-font-bold) !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__summary,
body.close-day-body .close-day-modal .sbo-approve-commissions-modal__list {
    margin: 0 18px !important;
    padding: 14px 16px !important;
    display: grid !important;
    gap: 12px !important;
    border: 1px solid #E8EDF3 !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__summary > div,
body.close-day-body .close-day-modal .sbo-approve-commissions-modal__list > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__summary span {
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

@media (min-width: 768px) {
    body.close-day-body .close-day-modal .sbo-close-day-modal__summary span {
        font-size: 16px !important;
    }
}

body.close-day-body .close-day-modal .sbo-close-day-modal__summary strong,
body.close-day-body .close-day-modal .sbo-approve-commissions-modal__list strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    text-align: right !important;
}

@media (min-width: 768px) {
    body.close-day-body .close-day-modal .sbo-close-day-modal__summary strong,
    body.close-day-body .close-day-modal .sbo-approve-commissions-modal__list strong {
        font-size: 16px !important;
    }
}

body.close-day-body .close-day-modal .sbo-approve-commissions-modal__list span {
    color: #0d9488 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__summary .is-variance span,
body.close-day-body .close-day-modal .sbo-close-day-modal__summary.is-compact .is-variance span {
    color: #F59E0B !important;
    font-family: var(--sb-font-semibold) !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__summary .is-variance strong,
body.close-day-body .close-day-modal .sbo-close-day-modal__summary.is-compact .is-variance strong {
    color: #EF4444 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions {
    margin-top: 18px !important;
    padding: 0 18px 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 10px !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-cancel,
body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-continue {
    min-height: 48px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-cancel,
    body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-continue {
        font-size: 18px !important;
    }
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-cancel {
    border: 1.5px solid #E0E8FF !important;
    background: #fff !important;
    color: #475569 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-cancel:hover {
    border-color: #C7D2FE !important;
    background: #F8FAFF !important;
    color: #3366CC !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-continue {
    border: 0 !important;
    background: #3366CC !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24) !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-continue:hover {
    background: #2554B0 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-continue.is-teal {
    background: #0d9488 !important;
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.24) !important;
}

body.close-day-body .close-day-modal .sbo-close-day-modal__actions .is-continue:disabled {
    background: #94A3B8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Success modal */
body.close-day-body .close-day-modal.sbo-close-day-success .sbo-close-day-modal__dialog.is-success {
    padding: 28px 22px 24px !important;
    text-align: center !important;
}

body.close-day-body .close-day-modal .sbo-close-day-success__check {
    width: 84px !important;
    height: 84px !important;
    margin: 8px auto 14px !important;
    border: 3px solid #10B981 !important;
    border-radius: 50% !important;
    color: #10B981 !important;
    background: #E7F8F1 !important;
}

body.close-day-body .close-day-modal.sbo-close-day-success h2 {
    margin: 0 0 8px !important;
    color: #1e293b !important;
}

body.close-day-body .close-day-modal.sbo-close-day-success p {
    margin: 0 auto 18px !important;
    max-width: 320px !important;
    color: #64748B !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.close-day-body .close-day-modal .sbo-close-day-success__btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24) !important;
}

@media (min-width: 768px) {
    body.close-day-body .close-day-modal .sbo-close-day-modal__dialog h2,
    body.close-day-body .close-day-modal #approve-commissions-title,
    body.close-day-body .close-day-modal #confirm-close-title,
    body.close-day-body .close-day-modal #close-success-title {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.close-day-body .close-day-modal .sbo-close-day-modal__dialog h2,
    body.close-day-body .close-day-modal #approve-commissions-title,
    body.close-day-body .close-day-modal #confirm-close-title,
    body.close-day-body .close-day-modal #close-success-title {
        font-size: 22px !important;
    }
}

/* ---------- Responsive layout ---------- */
@media (min-width: 768px) {
    body.close-day-body .close-day-ui .close-day-content,
    body.close-day-body .close-day-ui .sbo-close-day-content.close-day-content {
        padding: 18px 22px 120px !important;
        gap: 16px !important;
    }

    body.close-day-body .close-day-ui .close-day-metrics,
    body.close-day-body .close-day-ui .sbo-close-day-metrics {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    body.close-day-body .close-day-ui .close-day-amount,
    body.close-day-body .close-day-ui .sbo-close-day-amount {
        font-size: 32px !important;
    }
}

@media (min-width: 1366px) {
    body.close-day-body .close-day-ui .close-day-content,
    body.close-day-body .close-day-ui .sbo-close-day-content.close-day-content {
        padding: 22px 28px 120px !important;
    }

    body.close-day-body .close-day-ui .close-day-metrics strong,
    body.close-day-body .close-day-ui .sbo-close-day-metrics strong {
        font-size: 20px !important;
    }
}

/* ---------- Bottom nav (match dashboard) ---------- */
.close-day-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.close-day-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.close-day-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.close-day-ui .sbo-bottom-nav a span,
.close-day-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.close-day-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 0 !important;
}

.close-day-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.close-day-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.close-day-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.close-day-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.close-day-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.close-day-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.close-day-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.close-day-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.close-day-body .sbo-bottom-nav,
body.sbo-dashboard-body.close-day-body .close-day-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
}

body.close-day-body .sbo-bottom-nav a,
body.sbo-dashboard-body.close-day-body .close-day-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.close-day-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.close-day-body .close-day-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.close-day-body .sbo-bottom-nav a span,
body.close-day-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.close-day-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.close-day-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.close-day-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.close-day-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.close-day-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.close-day-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.close-day-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

@media (min-width: 700px) {
    body.close-day-body .sbo-bottom-nav,
    body.sbo-dashboard-body.close-day-body .close-day-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

/* ==========================================================================
   Close Day ? heading font-sizes only (page-scoped)
   Mobile (<768px): 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Does not alter existing class definitions; overrides font-size only.
   ========================================================================== */

body.close-day-body.sbo-dashboard-body h1,
body.close-day-body.sbo-dashboard-body h2,
body.close-day-body.sbo-dashboard-body h3,
body.close-day-body.sbo-dashboard-body h4,
body.close-day-body .close-day-ui .close-day-header__title,
body.close-day-body .close-day-ui .sbo-close-day-header h1,
body.close-day-body .close-day-header__title,
body.sbo-dashboard-body.close-day-body .close-day-ui h1.close-day-header__title,
body.close-day-body .close-day-ui .close-day-card__head h2,
body.close-day-body .close-day-ui .sbo-close-day-card__head h2,
body.close-day-body .close-day-modal h2,
body.close-day-body .close-day-modal #approve-commissions-title,
body.close-day-body .close-day-modal #confirm-close-title,
body.close-day-body .close-day-modal #close-success-title {
    font-size: 18px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.close-day-body.sbo-dashboard-body h1,
    body.close-day-body.sbo-dashboard-body h2,
    body.close-day-body.sbo-dashboard-body h3,
    body.close-day-body.sbo-dashboard-body h4,
    body.close-day-body .close-day-ui .close-day-header__title,
    body.close-day-body .close-day-ui .sbo-close-day-header h1,
    body.close-day-body .close-day-header__title,
    body.sbo-dashboard-body.close-day-body .close-day-ui h1.close-day-header__title,
    body.close-day-body .close-day-ui .close-day-card__head h2,
    body.close-day-body .close-day-ui .sbo-close-day-card__head h2,
    body.close-day-body .close-day-modal h2,
    body.close-day-body .close-day-modal #approve-commissions-title,
    body.close-day-body .close-day-modal #confirm-close-title,
    body.close-day-body .close-day-modal #close-success-title {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.close-day-body.sbo-dashboard-body h1,
    body.close-day-body.sbo-dashboard-body h2,
    body.close-day-body.sbo-dashboard-body h3,
    body.close-day-body.sbo-dashboard-body h4,
    body.close-day-body .close-day-ui .close-day-header__title,
    body.close-day-body .close-day-ui .sbo-close-day-header h1,
    body.close-day-body .close-day-header__title,
    body.sbo-dashboard-body.close-day-body .close-day-ui h1.close-day-header__title,
    body.close-day-body .close-day-ui .close-day-card__head h2,
    body.close-day-body .close-day-ui .sbo-close-day-card__head h2,
    body.close-day-body .close-day-modal h2,
    body.close-day-body .close-day-modal #approve-commissions-title,
    body.close-day-body .close-day-modal #confirm-close-title,
    body.close-day-body .close-day-modal #close-success-title {
        font-size: 22px !important;
    }
}



/* ==========================================================================
   ALERTS ? match dashboard / credit-ledger / close-day UI (alerts-ui)
   Mobile (<768px): headings 18px | Tablet (768?1365px): 20px | Desktop (1366px+): 22px
   Body copy stays 14px across breakpoints.
   ========================================================================== */

body.alerts-body.sbo-dashboard-body,
body.sbo-dashboard-body.alerts-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.alerts-ui.sbo-dashboard,
.sbo-dashboard.alerts-ui {
    --al-blue: #3366cc;
    --al-blue-deep: #2554b0;
    --al-blue-soft: #e8f0fe;
    --al-mint: #0d9488;
    --al-text: #1e293b;
    --al-muted: #8a94a6;
    --al-line: #e8edf3;
    --al-border: #E0E8FF;
    --al-card: #ffffff;
    --al-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --al-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--al-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.alerts-body,
body.alerts-body .alerts-ui {
    font-size: 14px;
    color: #1e293b;
}

body.alerts-body,
body.alerts-body .alerts-ui,
body.alerts-body .alerts-ui p,
body.alerts-body .alerts-ui span,
body.alerts-body .alerts-ui small,
body.alerts-body .alerts-ui label,
body.alerts-body .alerts-ui a,
body.alerts-body .alerts-ui button,
body.alerts-body .alerts-ui input,
body.alerts-body .alerts-ui strong,
body.alerts-body .alerts-ui b {
    font-size: 14px !important;
}

body.alerts-body .alerts-ui [aria-hidden="true"],
body.alerts-body .sbo-bottom-nav__icon,
body.alerts-body .alerts-header__icon,
body.alerts-body .alerts-header__back,
body.alerts-body .alerts-card__icon,
body.alerts-body .alerts-option__icon,
body.alerts-body .alerts-channel__icon {
    font-size: 0 !important;
}

.alerts-ui h1,
.alerts-ui h2,
.alerts-ui h3,
.alerts-ui strong,
.alerts-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.alerts-ui em,
.alerts-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.alerts-ui small,
.alerts-ui p,
.alerts-ui label,
.alerts-ui span,
.alerts-ui button,
.alerts-ui a,
.alerts-ui input {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.alerts-body .alerts-ui .sbo-alerts-header.alerts-header,
body.alerts-body .alerts-ui .alerts-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.alerts-body .alerts-header__back,
body.alerts-body .alerts-ui .sbo-back-button.alerts-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.alerts-body .alerts-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.alerts-body .alerts-header__back svg {
    display: block;
}

body.alerts-body .alerts-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.alerts-body .alerts-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.alerts-body .alerts-header__titles {
    min-width: 0;
}

body.alerts-body .alerts-ui .alerts-header__title,
body.alerts-body .alerts-ui .sbo-alerts-header h1,
body.sbo-dashboard-body.alerts-body .alerts-ui h1.alerts-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.alerts-body .alerts-ui .alerts-header__subtitle,
body.alerts-body .alerts-ui .sbo-alerts-header p,
body.sbo-dashboard-body.alerts-body .alerts-ui p.alerts-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
}

body.alerts-body .alerts-ui .alerts-header__subtitle b,
body.alerts-body .alerts-ui .alerts-header__subtitle strong {
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

/* ---------- Content ---------- */
body.alerts-body .alerts-ui .alerts-content,
body.alerts-body .alerts-ui .sbo-alerts-content.alerts-content {
    padding: 16px 16px 120px !important;
    display: grid !important;
    gap: 14px !important;
    box-sizing: border-box !important;
}

body.alerts-body .alerts-ui form[data-alerts-form] {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: none;
}

body.alerts-body .alerts-banner.sbo-alert,
body.alerts-body .alerts-errors {
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #FECACA !important;
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body.alerts-body .alerts-errors p {
    margin: 0 !important;
    font-size: 14px !important;
}

body.alerts-body .alerts-errors p + p {
    margin-top: 4px !important;
}

/* ---------- Cards ---------- */
body.alerts-body .alerts-ui .alerts-card,
body.alerts-body .alerts-ui .sbo-alerts-card.alerts-card {
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--al-radius) !important;
    background: var(--al-card) !important;
    box-shadow: var(--al-shadow) !important;
    display: grid !important;
    gap: 14px !important;
}

body.alerts-body .alerts-card__head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}

body.alerts-body .alerts-card__head--split {
    justify-content: space-between !important;
    gap: 12px !important;
}

body.alerts-body .alerts-card__title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}

body.alerts-body .alerts-card__icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    background: var(--al-blue-soft) !important;
    color: var(--al-blue) !important;
    flex-shrink: 0;
}

body.alerts-body .alerts-card__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

body.alerts-body .alerts-ui .alerts-card h2,
body.alerts-body .alerts-ui .sbo-alerts-card h2,
body.alerts-body .sbo-alerts-card h2 {
    margin: 0 !important;
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

body.alerts-body .alerts-card__hint {
    margin: 2px 0 0 !important;
    color: var(--al-muted) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.alerts-body .alerts-enable-all {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1.5px solid var(--al-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--al-blue) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
    cursor: pointer;
    box-shadow: none !important;
    flex-shrink: 0;
}

body.alerts-body .alerts-enable-all:hover {
    border-color: #C7D2FE !important;
    background: #F8FAFF !important;
}

/* ---------- Channels ---------- */
body.alerts-body .alerts-channels,
body.alerts-body .sbo-alert-channel-options,
body.alerts-body .sbo-alert-channel-options.alerts-channels {
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.alerts-body .alerts-channel,
body.alerts-body .sbo-alert-channel-options label.alerts-channel,
body.alerts-body .sbo-alert-channel-options label {
    position: relative !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    border: 1.5px solid var(--al-line) !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    box-sizing: border-box !important;
}

body.alerts-body .alerts-channel input,
body.alerts-body .sbo-alert-channel-options input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Kill legacy min-height:76px on label > span from sales-book-owner.css */
body.alerts-body .sbo-alert-channel-options label > span,
body.alerts-body .alerts-channel > span,
body.alerts-body .alerts-channel__icon {
    min-height: 0 !important;
    height: 36px !important;
    width: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #64748B !important;
    border: 1px solid var(--al-line) !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.alerts-body .sbo-alert-channel-options input:checked + span,
body.alerts-body .alerts-channel.is-selected .alerts-channel__icon,
body.alerts-body .alerts-channel:has(input:checked) .alerts-channel__icon {
    background: var(--al-blue-soft) !important;
    border-color: transparent !important;
    color: var(--al-blue) !important;
    box-shadow: none !important;
}

body.alerts-body .alerts-channel__icon svg,
body.alerts-body .sbo-alert-channel-options label > span svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.alerts-body .alerts-channel strong,
body.alerts-body .sbo-alert-channel-options label strong {
    color: #222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

body.alerts-body .alerts-channel.is-selected,
body.alerts-body .alerts-channel:has(input:checked),
body.alerts-body .sbo-alert-channel-options label:has(input:checked) {
    border-color: var(--al-blue) !important;
    background: #F5F8FF !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.alerts-body .alerts-channel.is-selected strong,
body.alerts-body .alerts-channel:has(input:checked) strong,
body.alerts-body .sbo-alert-channel-options label:has(input:checked) strong {
    color: var(--al-blue) !important;
    font-family: var(--sb-font-bold) !important;
}

/* ---------- Phone field ---------- */
body.alerts-body .alerts-phone,
body.alerts-body .sbo-alert-phone.alerts-phone {
    display: grid !important;
    gap: 6px !important;
    margin: 2px 0 0 !important;
}

body.alerts-body .alerts-phone[hidden] {
    display: none !important;
}

body.alerts-body .alerts-phone > span {
    color: #475569 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

body.alerts-body .alerts-phone input,
body.alerts-body .alerts-quiet-fields input {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1.5px solid var(--al-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--al-text) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
}

body.alerts-body .alerts-phone input:focus,
body.alerts-body .alerts-quiet-fields input:focus {
    border-color: var(--al-blue) !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.alerts-body .alerts-phone small {
    color: var(--al-muted) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* ---------- Alert options / toggles ---------- */
body.alerts-body .alerts-options {
    display: grid !important;
    gap: 10px !important;
}

body.alerts-body .alerts-option,
body.alerts-body .sbo-alert-option,
body.alerts-body .sbo-alert-option.alerts-option {
    position: relative;
    margin: 0 !important;
    padding: 12px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1.5px solid var(--al-line) !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body.alerts-body .alerts-option.is-enabled,
body.alerts-body .sbo-alert-option.is-enabled {
    border-color: #BFE8E1 !important;
    background: #F3FBFA !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.08) !important;
    opacity: 1 !important;
}

body.alerts-body .alerts-option__icon,
body.alerts-body .sbo-alert-option__icon,
body.alerts-body .sbo-alert-option__icon.alerts-option__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.alerts-body .alerts-option__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.alerts-body .alerts-option__icon.is-navy {
    background: #E8EEF8 !important;
    color: #334155 !important;
}

body.alerts-body .alerts-option__icon.is-amber {
    background: #FFF7E8 !important;
    color: #D97706 !important;
}

body.alerts-body .alerts-option__icon.is-teal {
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

body.alerts-body .alerts-option__icon.is-rose {
    background: #FEECEC !important;
    color: #E11D48 !important;
}

body.alerts-body .alerts-option__icon.is-violet {
    background: #F1ECFE !important;
    color: #7C3AED !important;
}

body.alerts-body .alerts-option__icon.is-orange {
    background: #FFF1E8 !important;
    color: #EA580C !important;
}

body.alerts-body .alerts-option__icon.is-green {
    background: #E7F8F1 !important;
    color: #059669 !important;
}

body.alerts-body .alerts-option__copy,
body.alerts-body .sbo-alert-option > span:nth-child(2),
body.alerts-body .alerts-option > span.alerts-option__copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

body.alerts-body .alerts-option__copy strong,
body.alerts-body .sbo-alert-option > span:nth-child(2) strong {
    color: #222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.alerts-body .alerts-option__copy small,
body.alerts-body .sbo-alert-option > span:nth-child(2) small {
    color: var(--al-muted) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

body.alerts-body .alerts-option input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.alerts-body .alerts-option__switch,
body.alerts-body .alerts-option > i,
body.alerts-body .sbo-alert-option > i {
    width: 44px !important;
    height: 26px !important;
    padding: 3px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 999px !important;
    background: #E8EDF3 !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    transition: background 160ms ease, border-color 160ms ease;
    justify-self: end;
    box-shadow: none !important;
}

body.alerts-body .alerts-option__switch::after,
body.alerts-body .alerts-option > i::after,
body.alerts-body .sbo-alert-option > i::after {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(20, 35, 55, 0.18) !important;
    display: block !important;
    transition: transform 160ms ease, background 160ms ease;
    transform: translateX(0) !important;
}

body.alerts-body .alerts-option.is-enabled .alerts-option__switch,
body.alerts-body .alerts-option.is-enabled > i,
body.alerts-body .sbo-alert-option.is-enabled > i,
body.alerts-body .sbo-alert-option input[type="checkbox"]:checked + i {
    border-color: #0d9488 !important;
    background: #0d9488 !important;
}

body.alerts-body .alerts-option.is-enabled .alerts-option__switch::after,
body.alerts-body .alerts-option.is-enabled > i::after,
body.alerts-body .sbo-alert-option.is-enabled > i::after,
body.alerts-body .sbo-alert-option input[type="checkbox"]:checked + i::after {
    background: #fff !important;
    transform: translateX(18px) !important;
}

/* ---------- Quiet hours ---------- */
body.alerts-body .alerts-quiet-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

body.alerts-body .alerts-quiet-fields label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
}

body.alerts-body .alerts-quiet-fields label > span {
    color: #475569 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

/* ---------- Save button ---------- */
body.alerts-body .alerts-save,
body.alerts-body .sbo-alerts-save.alerts-save {
    min-height: 52px !important;
    width: 100% !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(51, 102, 204, 0.24) !important;
}

body.alerts-body .alerts-save svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.alerts-body .alerts-save:hover:not(:disabled) {
    background: #2554B0 !important;
}

body.alerts-body .alerts-save:disabled {
    background: #94A3B8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ---------- Bottom nav ---------- */
.alerts-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.alerts-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

body.alerts-body .sbo-bottom-nav__icon {
    font-size: 0 !important;
}

body.alerts-body .sbo-bottom-nav a.is-active,
body.alerts-body .sbo-bottom-nav a[aria-current="page"] {
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
}

@media (min-width: 700px) {
    body.alerts-body .sbo-bottom-nav,
    body.sbo-dashboard-body.alerts-body .alerts-ui .sbo-bottom-nav {
        width: min(100%, 1366px) !important;
        max-width: 1366px !important;
        bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

/* ---------- Responsive layout + fonts ---------- */
@media (min-width: 768px) {
    body.alerts-body .alerts-ui .alerts-content,
    body.alerts-body .alerts-ui .sbo-alerts-content.alerts-content {
        padding: 18px 22px 120px !important;
        gap: 16px !important;
    }

    body.alerts-body .alerts-ui .alerts-header,
    body.alerts-body .alerts-ui .sbo-alerts-header.alerts-header {
        padding: 20px 22px 18px !important;
        gap: 12px !important;
    }

    body.alerts-body .alerts-ui .alerts-header__title,
    body.alerts-body .alerts-ui .sbo-alerts-header h1,
    body.sbo-dashboard-body.alerts-body .alerts-ui h1.alerts-header__title,
    body.alerts-body .alerts-ui .alerts-card h2,
    body.alerts-body .alerts-ui .sbo-alerts-card h2,
    body.alerts-body .sbo-alerts-card h2 {
        font-size: 20px !important;
    }

    body.alerts-body .alerts-ui form[data-alerts-form] {
        max-width: none;
        width: 100%;
    }

    body.alerts-body .alerts-channels,
    body.alerts-body .sbo-alert-channel-options {
        max-width: 520px;
    }
}

@media (min-width: 1366px) {
    body.alerts-body .alerts-ui .alerts-content,
    body.alerts-body .alerts-ui .sbo-alerts-content.alerts-content {
        padding: 22px 28px 120px !important;
    }

    body.alerts-body .alerts-ui .alerts-header__title,
    body.alerts-body .alerts-ui .sbo-alerts-header h1,
    body.sbo-dashboard-body.alerts-body .alerts-ui h1.alerts-header__title,
    body.alerts-body .alerts-ui .alerts-card h2,
    body.alerts-body .alerts-ui .sbo-alerts-card h2 {
        font-size: 22px !important;
    }
}

@media (max-width: 420px) {
    body.alerts-body .alerts-channels,
    body.alerts-body .sbo-alert-channel-options.alerts-channels {
        gap: 8px !important;
    }

    body.alerts-body .alerts-channel {
        padding: 12px 6px !important;
    }

    body.alerts-body .alerts-option,
    body.alerts-body .sbo-alert-option.alerts-option {
        grid-template-columns: 40px minmax(0, 1fr) 42px !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    body.alerts-body .alerts-option__icon,
    body.alerts-body .sbo-alert-option__icon.alerts-option__icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---------- alerts-ui-lg: same readable type on mobile, tablet & desktop ---------- */
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg p,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg span,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg small,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg label,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg a,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg button,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg input,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg strong,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg b {
    font-size: 16px !important;
}

body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg [aria-hidden="true"],
body.alerts-ui-lg-body.alerts-body .sbo-bottom-nav__icon,
body.alerts-ui-lg-body.alerts-body .alerts-header__icon,
body.alerts-ui-lg-body.alerts-body .alerts-header__back,
body.alerts-ui-lg-body.alerts-body .alerts-card__icon,
body.alerts-ui-lg-body.alerts-body .alerts-option__icon,
body.alerts-ui-lg-body.alerts-body .alerts-channel__icon {
    font-size: 0 !important;
}

body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-header__title,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .sbo-alerts-header h1,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg h1.alerts-header__title,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-card h2,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .sbo-alerts-card h2 {
    font-size: 20px !important;
}

body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-header__subtitle,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-header__subtitle b,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-header__subtitle strong,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-card__hint,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-enable-all,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-channel strong,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-phone > span,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-phone input,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-phone small,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-quiet-fields input,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-quiet-fields label > span,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-option__copy strong,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-option__copy small,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-banner,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-errors,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-errors p {
    font-size: 16px !important;
}

body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .alerts-save,
body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .sbo-alerts-save.alerts-save {
    font-size: 17px !important;
}

body.alerts-ui-lg-body.alerts-body .alerts-ui.alerts-ui-lg .sbo-bottom-nav a {
    font-size: 12px !important;
}

/* ==========================================================================
   ALERTS ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: alerts-fs-min-16 ? overrides existing 14px rules without global clash
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.alerts-body.alerts-fs-min-16,
    body.alerts-body.alerts-fs-min-16 .alerts-ui.alerts-fs-min-16,
    body.alerts-body.alerts-fs-min-16 .alerts-ui {
        font-size: 16px !important;
        --al-fs-min: 16px;
    }

    body.alerts-body.alerts-fs-min-16,
    body.alerts-body.alerts-fs-min-16 .alerts-ui,
    body.alerts-body.alerts-fs-min-16 .alerts-ui p,
    body.alerts-body.alerts-fs-min-16 .alerts-ui span,
    body.alerts-body.alerts-fs-min-16 .alerts-ui small,
    body.alerts-body.alerts-fs-min-16 .alerts-ui label,
    body.alerts-body.alerts-fs-min-16 .alerts-ui a,
    body.alerts-body.alerts-fs-min-16 .alerts-ui button,
    body.alerts-body.alerts-fs-min-16 .alerts-ui input,
    body.alerts-body.alerts-fs-min-16 .alerts-ui strong,
    body.alerts-body.alerts-fs-min-16 .alerts-ui b,
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav,
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav a,
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em) !important;
    }

    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-header__subtitle,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-header__subtitle b,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-header__subtitle strong,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .sbo-alerts-header p,
    body.alerts-body.alerts-fs-min-16 .alerts-ui p.alerts-header__subtitle,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-card__hint,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-enable-all,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-channel strong,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-phone > span,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-phone input,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-phone small,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-quiet-fields input,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-quiet-fields label > span,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-option__copy strong,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-option__copy small,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-banner,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-errors,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-errors p,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .alerts-save,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .sbo-alerts-save.alerts-save,
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav a,
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav a span,
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label,
    body.alerts-body.alerts-fs-min-16 .alerts-ui .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.alerts-body.alerts-fs-min-16 .alerts-ui [aria-hidden="true"],
    body.alerts-body.alerts-fs-min-16 .sbo-bottom-nav__icon,
    body.alerts-body.alerts-fs-min-16 .alerts-header__icon,
    body.alerts-body.alerts-fs-min-16 .alerts-header__back,
    body.alerts-body.alerts-fs-min-16 .alerts-card__icon,
    body.alerts-body.alerts-fs-min-16 .alerts-option__icon,
    body.alerts-body.alerts-fs-min-16 .alerts-channel__icon {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   CREDIT LEDGER CUSTOMER ? match credit-ledger / dashboard UI
   (credit-ledger-customer-ui)
   ========================================================================== */

body.credit-ledger-customer-body.sbo-dashboard-body,
body.sbo-dashboard-body.credit-ledger-customer-body {
    background: linear-gradient(180deg, #ffffff 0%, #ecf0f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

.credit-ledger-customer-ui.sbo-dashboard,
.sbo-dashboard.credit-ledger-customer-ui {
    --clc-blue: #3366cc;
    --clc-blue-deep: #2554b0;
    --clc-blue-soft: #e8f0fe;
    --clc-mint: #0d9488;
    --clc-mint-soft: #e6f7f5;
    --clc-text: #1e293b;
    --clc-muted: #8a94a6;
    --clc-line: #e8edf3;
    --clc-border: #E0E8FF;
    --clc-card: #ffffff;
    --clc-shadow: 0 10px 28px rgba(30, 50, 80, 0.07);
    --clc-radius: 15px;
    width: 100% !important;
    max-width: 1366px !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--clc-text);
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: visible !important;
    padding-bottom: 0;
}

body.credit-ledger-customer-body,
body.credit-ledger-customer-body .credit-ledger-customer-ui {
    font-size: 14px;
    color: #1e293b;
}

body.credit-ledger-customer-body,
body.credit-ledger-customer-body .credit-ledger-customer-ui,
body.credit-ledger-customer-body .credit-ledger-customer-ui p,
body.credit-ledger-customer-body .credit-ledger-customer-ui span,
body.credit-ledger-customer-body .credit-ledger-customer-ui small,
body.credit-ledger-customer-body .credit-ledger-customer-ui label,
body.credit-ledger-customer-body .credit-ledger-customer-ui a,
body.credit-ledger-customer-body .credit-ledger-customer-ui button,
body.credit-ledger-customer-body .credit-ledger-customer-ui input,
body.credit-ledger-customer-body .credit-ledger-customer-ui select,
body.credit-ledger-customer-body .credit-ledger-customer-ui textarea,
body.credit-ledger-customer-body .credit-ledger-customer-ui strong,
body.credit-ledger-customer-body .credit-ledger-customer-ui b,
body.credit-ledger-customer-body .credit-ledger-customer-ui em,
body.credit-ledger-customer-body .credit-ledger-customer-ui i,
body.credit-ledger-customer-body .sbo-credit-reminder-modal,
body.credit-ledger-customer-body .sbo-credit-payment-modal,
body.credit-ledger-customer-body .sbo-credit-reminder-modal p,
body.credit-ledger-customer-body .sbo-credit-reminder-modal span,
body.credit-ledger-customer-body .sbo-credit-reminder-modal small,
body.credit-ledger-customer-body .sbo-credit-reminder-modal label,
body.credit-ledger-customer-body .sbo-credit-reminder-modal button,
body.credit-ledger-customer-body .sbo-credit-reminder-modal textarea,
body.credit-ledger-customer-body .sbo-credit-payment-modal p,
body.credit-ledger-customer-body .sbo-credit-payment-modal span,
body.credit-ledger-customer-body .sbo-credit-payment-modal small,
body.credit-ledger-customer-body .sbo-credit-payment-modal label,
body.credit-ledger-customer-body .sbo-credit-payment-modal button,
body.credit-ledger-customer-body .sbo-credit-payment-modal input,
body.credit-ledger-customer-body .sbo-credit-payment-modal select {
    font-size: 14px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui [aria-hidden="true"],
body.credit-ledger-customer-body .sbo-bottom-nav__icon,
body.credit-ledger-customer-body .credit-ledger-customer-header__icon,
body.credit-ledger-customer-body .credit-ledger-customer-header__back,
body.credit-ledger-customer-body .credit-ledger-customer-ledger__icon {
    font-size: 0 !important;
}

.credit-ledger-customer-ui h1,
.credit-ledger-customer-ui h2,
.credit-ledger-customer-ui h3,
.credit-ledger-customer-ui strong,
.credit-ledger-customer-ui b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.credit-ledger-customer-ui em,
.credit-ledger-customer-ui i {
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.credit-ledger-customer-ui small,
.credit-ledger-customer-ui p,
.credit-ledger-customer-ui label,
.credit-ledger-customer-ui span,
.credit-ledger-customer-ui button,
.credit-ledger-customer-ui a,
.credit-ledger-customer-ui input,
.credit-ledger-customer-ui select,
.credit-ledger-customer-ui textarea {
    font-family: var(--sb-font-regular);
    font-weight: normal;
}

/* ---------- Header ---------- */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-header.credit-ledger-customer-header,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 0 !important;
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #36C !important;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__back,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-back-button.credit-ledger-customer-header__back {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__back:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__back svg {
    display: block;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 0 !important;
    flex-shrink: 0;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__titles {
    min-width: 0;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__title,
body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui h1.credit-ledger-customer-header__title {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__subtitle,
body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui p.credit-ledger-customer-header__subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__status.sbo-credit-status,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-status {
    min-height: 30px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-header__status svg {
    display: block;
    flex-shrink: 0;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-status.is-active {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-status.is-suspended {
    border: 1px solid #FECACA !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

/* ---------- Content shell ---------- */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-staff-content.credit-ledger-customer-content,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-content {
    position: relative !important;
    padding: 14px 16px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    min-height: 240px !important;
    box-shadow: none !important;
}

/* ---------- Detail card ---------- */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-card,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-card {
    padding: 18px !important;
    display: grid !important;
    gap: 16px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-avatar {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #BFDBFE !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 17px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile p {
    margin: 4px 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile small {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra {
    min-height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    color: #64748B !important;
    font-size: 14px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button:hover,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button:focus,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:hover,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:focus {
    background: #EEF2FF !important;
    color: #3366CC !important;
    cursor: pointer !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button:disabled {
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button svg,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button svg * {
    display: block;
    pointer-events: none;
    cursor: pointer !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats article {
    min-height: 0 !important;
    padding: 14px 12px !important;
    display: grid !important;
    place-content: center !important;
    gap: 6px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats article.is-muted {
    background: #F8FAFC !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats article.is-available {
    border-color: #99F6E4 !important;
    background: #E6F7F5 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats strong {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats article.is-available strong {
    color: #0d9488 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage > div:first-child {
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    color: #64748B !important;
    font-size: 14px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage b {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-card__bar {
    height: 8px !important;
    border-radius: 999px !important;
    background: #E8EDF3 !important;
    overflow: hidden !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-card__bar > i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #0d9488 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-card__bar > i.is-near {
    background: #F59E0B !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-card__bar > i.is-over {
    background: #DC2626 !important;
}

/* ---------- Primary actions ---------- */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-reminder,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-payment {
    min-height: 48px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    cursor: pointer;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-reminder {
    background: #0d9488 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-reminder:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    filter: none !important;
    transform: none !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-payment {
    background: #3366CC !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary svg {
    display: block;
    flex-shrink: 0;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend {
    margin: 0 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend button {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #FECACA !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #DC2626 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    cursor: pointer;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend.is-active button {
    border-color: #99F6E4 !important;
    color: #0d9488 !important;
    background: #E6F7F5 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend button svg {
    display: block;
    flex-shrink: 0;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-followup {
    min-height: 48px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    text-decoration: none !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-followup svg {
    display: block;
    flex-shrink: 0;
}

/* ---------- Transaction ledger ---------- */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-section,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger {
    margin-top: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger__head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger__icon {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    border: 1px solid #BFDBFE !important;
    font-size: 0 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger__icon svg {
    display: block;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-section h2,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table {
    overflow: hidden !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px 88px !important;
    gap: 12px !important;
    align-items: center !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #E8EDF3 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    background: #F8FAFC !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head .is-amount,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head .is-balance {
    text-align: right !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row {
    min-height: 68px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #EEF2F7 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row:last-child {
    border-bottom: 0 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row strong {
    display: block !important;
    overflow: hidden !important;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row small {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-amount {
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-amount.is-debit {
    color: #DC2626 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-amount.is-credit {
    color: #0d9488 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-balance {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-style: normal !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-empty {
    padding: 28px 16px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    text-align: center !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-empty p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend {
    margin-top: 2px !important;
    display: grid !important;
    gap: 6px !important;
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend i {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    font-style: normal !important;
    font-size: 11px !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend i.is-debit {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend i.is-credit {
    background: #E6F7F5 !important;
    color: #0d9488 !important;
}

/* ---------- Modals ---------- */
body.credit-ledger-customer-body .sbo-credit-reminder-modal .sbo-add-staff-modal__dialog,
body.credit-ledger-customer-body .sbo-credit-payment-modal .sbo-add-staff-modal__dialog {
    width: min(100%, 440px) !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    background: #fff !important;
    overflow: hidden !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-modal__header,
body.credit-ledger-customer-body .sbo-credit-payment-modal__header {
    min-height: 64px !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid #E8EDF3 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-modal__header h2,
body.credit-ledger-customer-body .sbo-credit-payment-modal__header h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-modal__header button,
body.credit-ledger-customer-body .sbo-credit-payment-modal__header button {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-modal__icon,
body.credit-ledger-customer-body .sbo-credit-payment-modal__icon {
    width: 40px !important;
    height: 40px !important;
    background: #E8F0FE !important;
    color: #3366CC !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-modal__icon svg,
body.credit-ledger-customer-body .sbo-credit-payment-modal__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

body.credit-ledger-customer-body .sbo-credit-payment-form {
    padding: 18px 18px 20px !important;
    display: grid !important;
    gap: 16px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-body {
    padding: 16px 18px 20px !important;
    display: grid !important;
    gap: 14px !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-copy {
    margin: 0 !important;
    color: #64748B !important;
    line-height: 1.45 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-field {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-field > span {
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-message textarea,
body.credit-ledger-customer-body .sbo-credit-payment-field input,
body.credit-ledger-customer-body .sbo-credit-payment-staff select {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-message textarea {
    height: auto !important;
    min-height: 120px !important;
    padding: 12px 14px !important;
    resize: vertical !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-field input::placeholder {
    color: #94A3B8 !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-message textarea:focus,
body.credit-ledger-customer-body .sbo-credit-payment-field input:focus,
body.credit-ledger-customer-body .sbo-credit-payment-staff select:focus {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    background-color: #fff !important;
    outline: none !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-outstanding {
    min-height: 48px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #2554b0 !important;
    font-family: var(--sb-font-regular) !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-outstanding strong {
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-methods {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-methods legend {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-methods__options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-methods__options button {
    min-height: 44px !important;
    padding: 0 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #475569 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

body.credit-ledger-customer-body .sbo-credit-payment-methods__options button:hover:not(.is-active) {
    border-color: #3366CC !important;
    background: #F8FBFF !important;
    color: #3366CC !important;
    filter: none !important;
    transform: none !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-methods__options button.is-active {
    border-color: #3366CC !important;
    background: #3366CC !important;
    color: #fff !important;
    filter: none !important;
    transform: none !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff {
    position: relative !important;
    display: block !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff > i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: #3366CC !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
    font-size: 0 !important;
    z-index: 1 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff > i svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff select {
    padding-left: 40px !important;
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a95a5' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    cursor: pointer !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff-hint {
    margin: 2px 0 0 !important;
    color: #B45309 !important;
    font-family: var(--sb-font-regular) !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff-hint[hidden] {
    display: none !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer {
    margin-top: 4px !important;
    padding-top: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-whatsapp {
    border: 1px solid #99F6E4 !important;
    border-radius: 12px !important;
    background: #E6F7F5 !important;
    color: #0d9488 !important;
    font-family: var(--sb-font-semibold) !important;
    text-decoration: none !important;
}

body.credit-ledger-customer-body .sbo-credit-reminder-actions form button,
body.credit-ledger-customer-body .sbo-credit-payment-form__footer button[type="submit"] {
    border: 1px solid #3366CC !important;
    border-radius: 12px !important;
    background: #3366CC !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    box-shadow: 0 4px 12px rgba(51, 102, 204, 0.22) !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer button[type="submit"]:hover:not(:disabled) {
    background: #2554b0 !important;
    border-color: #2554b0 !important;
    filter: none !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer button[type="button"] {
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    color: #000 !important;
    background: #fff !important;
    font-family: var(--sb-font-semibold) !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer button[type="button"]:hover {
    border-color: #3366CC !important;
    color: #3366CC !important;
    background: #F8FBFF !important;
    filter: none !important;
    transform: none !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer button[type="submit"]:disabled {
    border-color: #CBD5E1 !important;
    background: #CBD5E1 !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    filter: none !important;
    transform: none !important;
}

body.credit-ledger-customer-body .sbo-credit-customer-form__errors {
    padding: 10px 12px !important;
    border: 1px solid #FECACA !important;
    border-radius: 12px !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
}

/* ---------- Bottom nav ---------- */
.credit-ledger-customer-ui .sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 50;
    height: 72px;
    padding: 10px 6px 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    background: #FFF;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08);
    backdrop-filter: none;
    width: min(100%, 1366px);
    max-width: 1366px;
}

.credit-ledger-customer-ui .sbo-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 11px;
    font-family: var(--sb-font-regular);
    font-weight: normal;
    text-decoration: none;
    transition: color 160ms ease;
}

.credit-ledger-customer-ui .sbo-bottom-nav a:hover {
    color: #3366CC;
    background: transparent;
}

.credit-ledger-customer-ui .sbo-bottom-nav a span,
.credit-ledger-customer-ui .sbo-bottom-nav a .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2;
    font-family: inherit;
    font-weight: inherit;
}

.credit-ledger-customer-ui .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.credit-ledger-customer-ui .sbo-bottom-nav__icon svg {
    display: block;
}

.credit-ledger-customer-ui .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.credit-ledger-customer-ui .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

.credit-ledger-customer-ui .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
.credit-ledger-customer-ui .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

.credit-ledger-customer-ui .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

.credit-ledger-customer-ui .sbo-bottom-nav a.is-active {
    color: #3366CC;
    background: transparent;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}

.credit-ledger-customer-ui .sbo-bottom-nav a.is-active .sbo-bottom-nav__label {
    color: #3366CC;
    font-family: var(--sb-font-semibold);
}

body.credit-ledger-customer-body .sbo-bottom-nav,
body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav {
    width: min(100%, 1366px) !important;
    max-width: 1366px !important;
    height: 72px !important;
    padding: 10px 6px 12px !important;
    border-top: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #FFF !important;
    box-shadow: 0 -4px 24px rgba(22, 39, 62, 0.08) !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
}

body.credit-ledger-customer-body .sbo-bottom-nav a,
body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a {
    color: #333333 !important;
    background: transparent !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-family: var(--sb-font-regular) !important;
}

body.credit-ledger-customer-body .sbo-bottom-nav a.is-active,
body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a.is-active {
    color: #3366CC !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
}

body.credit-ledger-customer-body .sbo-bottom-nav a span,
body.credit-ledger-customer-body .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.credit-ledger-customer-body .sbo-bottom-nav .sbo-bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
}

body.credit-ledger-customer-body .sbo-bottom-nav .sbo-bottom-nav__icon svg {
    display: block;
}

body.credit-ledger-customer-body .sbo-bottom-nav a:nth-child(1) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.credit-ledger-customer-body .sbo-bottom-nav a:nth-child(2) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 15px;
}

body.credit-ledger-customer-body .sbo-bottom-nav a:nth-child(3) .sbo-bottom-nav__icon svg,
body.credit-ledger-customer-body .sbo-bottom-nav a:nth-child(4) .sbo-bottom-nav__icon svg {
    width: 16px;
    height: 16px;
}

body.credit-ledger-customer-body .sbo-bottom-nav a:nth-child(5) .sbo-bottom-nav__icon svg {
    width: 18px;
    height: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 14px 12px 14px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-header__icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-header__status {
        min-height: 26px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__title {
        font-size: 17px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__subtitle {
        font-size: 12px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats {
        grid-template-columns: 1fr !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary {
        grid-template-columns: 1fr !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row {
        grid-template-columns: minmax(0, 1fr) 78px 72px !important;
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.credit-ledger-customer-body .sbo-credit-reminder-modal,
    body.credit-ledger-customer-body .sbo-credit-payment-modal {
        padding: 0 !important;
        place-items: end center !important;
        align-items: end !important;
    }

    body.credit-ledger-customer-body .sbo-credit-reminder-modal .sbo-add-staff-modal__dialog,
    body.credit-ledger-customer-body .sbo-credit-payment-modal .sbo-add-staff-modal__dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    body.credit-ledger-customer-body .sbo-credit-reminder-modal__header,
    body.credit-ledger-customer-body .sbo-credit-payment-modal__header {
        padding: 14px 16px !important;
    }

    body.credit-ledger-customer-body .sbo-credit-payment-form,
    body.credit-ledger-customer-body .sbo-credit-reminder-body {
        padding: 16px 16px 20px !important;
    }

    body.credit-ledger-customer-body .sbo-credit-payment-methods__options {
        gap: 6px !important;
    }

    body.credit-ledger-customer-body .sbo-credit-payment-form__footer {
        gap: 10px !important;
    }
}

@media (min-width: 768px) {
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-content,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-staff-content.credit-ledger-customer-content {
        padding: 18px 22px 120px !important;
        gap: 16px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header {
        padding: 20px 22px 18px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__title {
        font-size: 22px !important;
    }
}

@media (min-width: 1366px) {
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-content,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-staff-content.credit-ledger-customer-content {
        padding: 22px 28px 120px !important;
    }
}

/* ==========================================================================
   Credit Ledger Customer ? responsive fonts (page-scoped)
   Mobile: 14px base | Tablet: 15px | Desktop: 16px
   Headings: 18 / 20 / 22
   ========================================================================== */

body.credit-ledger-customer-body,
body.credit-ledger-customer-body .credit-ledger-customer-ui {
    font-size: 14px !important;
}

/* Headings ? mobile */
body.credit-ledger-customer-body.sbo-dashboard-body h1,
body.credit-ledger-customer-body.sbo-dashboard-body h2,
body.credit-ledger-customer-body.sbo-dashboard-body h3,
body.credit-ledger-customer-body.sbo-dashboard-body h4,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__title,
body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui h1.credit-ledger-customer-header__title,
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger h2,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-section h2,
body.credit-ledger-customer-body .sbo-credit-reminder-modal__header h2,
body.credit-ledger-customer-body .sbo-credit-payment-modal__header h2,
body.credit-ledger-customer-body #credit-reminder-modal-title,
body.credit-ledger-customer-body #credit-payment-modal-title {
    font-size: 18px !important;
}

/* Labels / meta / supporting copy ? mobile */
body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__subtitle,
body.credit-ledger-customer-body .credit-ledger-customer-ui p.credit-ledger-customer-header__subtitle,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-status,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile p,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile small,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats small,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage > div:first-child,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row strong,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row small,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-amount,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-balance,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-empty p,
body.credit-ledger-customer-body .sbo-credit-reminder-copy,
body.credit-ledger-customer-body .sbo-credit-payment-outstanding,
body.credit-ledger-customer-body .sbo-credit-payment-outstanding strong,
body.credit-ledger-customer-body .sbo-credit-payment-field,
body.credit-ledger-customer-body .sbo-credit-payment-field > span,
body.credit-ledger-customer-body .sbo-credit-payment-methods legend,
body.credit-ledger-customer-body .sbo-credit-payment-field input,
body.credit-ledger-customer-body .sbo-credit-payment-staff select,
body.credit-ledger-customer-body .sbo-credit-payment-methods__options button,
body.credit-ledger-customer-body .sbo-credit-payment-form__footer button,
body.credit-ledger-customer-body .sbo-credit-reminder-message textarea,
body.credit-ledger-customer-body .sbo-credit-reminder-whatsapp,
body.credit-ledger-customer-body .sbo-credit-reminder-actions form button,
body.credit-ledger-customer-body .sbo-credit-customer-form__errors,
body.credit-ledger-customer-body .sbo-credit-customer-form__errors p,
body.credit-ledger-customer-body .sbo-bottom-nav a,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a {
    font-size: 14px !important;
}

/* Body / UI actions ? mobile */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-avatar,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-reminder,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-payment,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend button,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-followup,
body.credit-ledger-customer-body .credit-ledger-customer-ui p,
body.credit-ledger-customer-body .credit-ledger-customer-ui span,
body.credit-ledger-customer-body .credit-ledger-customer-ui small,
body.credit-ledger-customer-body .credit-ledger-customer-ui label,
body.credit-ledger-customer-body .credit-ledger-customer-ui a,
body.credit-ledger-customer-body .credit-ledger-customer-ui button,
body.credit-ledger-customer-body .credit-ledger-customer-ui input,
body.credit-ledger-customer-body .credit-ledger-customer-ui select,
body.credit-ledger-customer-body .credit-ledger-customer-ui textarea,
body.credit-ledger-customer-body .credit-ledger-customer-ui strong,
body.credit-ledger-customer-body .credit-ledger-customer-ui b,
body.credit-ledger-customer-body .credit-ledger-customer-ui em {
    font-size: 14px !important;
}

/* Mid emphasis ? mobile */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile strong,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats strong,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage b,
body.credit-ledger-customer-body .sbo-bottom-nav a span,
body.credit-ledger-customer-body .sbo-bottom-nav .sbo-bottom-nav__label,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a span,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav .sbo-bottom-nav__label {
    font-size: 16px !important;
}

/* Keep SVG / icon containers from inheriting text sizes */
body.credit-ledger-customer-body .credit-ledger-customer-ui [aria-hidden="true"],
body.credit-ledger-customer-body .sbo-bottom-nav__icon,
body.credit-ledger-customer-body .credit-ledger-customer-header__icon,
body.credit-ledger-customer-body .credit-ledger-customer-header__back,
body.credit-ledger-customer-body .credit-ledger-customer-ledger__icon {
    font-size: 0 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.credit-ledger-customer-body,
    body.credit-ledger-customer-body .credit-ledger-customer-ui {
        font-size: 15px !important;
    }

    body.credit-ledger-customer-body.sbo-dashboard-body h1,
    body.credit-ledger-customer-body.sbo-dashboard-body h2,
    body.credit-ledger-customer-body.sbo-dashboard-body h3,
    body.credit-ledger-customer-body.sbo-dashboard-body h4,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__title,
    body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui h1.credit-ledger-customer-header__title,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger h2,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-section h2,
    body.credit-ledger-customer-body .sbo-credit-reminder-modal__header h2,
    body.credit-ledger-customer-body .sbo-credit-payment-modal__header h2,
    body.credit-ledger-customer-body #credit-reminder-modal-title,
    body.credit-ledger-customer-body #credit-payment-modal-title {
        font-size: 20px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__subtitle,
    body.credit-ledger-customer-body .credit-ledger-customer-ui p.credit-ledger-customer-header__subtitle,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-status,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile p,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage > div:first-child,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-amount,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-balance,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-empty p,
    body.credit-ledger-customer-body .sbo-credit-reminder-copy,
    body.credit-ledger-customer-body .sbo-credit-payment-outstanding,
    body.credit-ledger-customer-body .sbo-credit-payment-outstanding strong,
    body.credit-ledger-customer-body .sbo-credit-payment-field,
    body.credit-ledger-customer-body .sbo-credit-payment-field > span,
    body.credit-ledger-customer-body .sbo-credit-payment-methods legend,
    body.credit-ledger-customer-body .sbo-credit-payment-field input,
    body.credit-ledger-customer-body .sbo-credit-payment-staff select,
    body.credit-ledger-customer-body .sbo-credit-payment-methods__options button,
    body.credit-ledger-customer-body .sbo-credit-payment-form__footer button,
    body.credit-ledger-customer-body .sbo-credit-reminder-message textarea,
    body.credit-ledger-customer-body .sbo-credit-reminder-whatsapp,
    body.credit-ledger-customer-body .sbo-credit-reminder-actions form button,
    body.credit-ledger-customer-body .sbo-credit-customer-form__errors,
    body.credit-ledger-customer-body .sbo-credit-customer-form__errors p,
    body.credit-ledger-customer-body .sbo-bottom-nav a,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a {
        font-size: 15px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-avatar,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-reminder,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-payment,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend button,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-followup,
    body.credit-ledger-customer-body .credit-ledger-customer-ui p,
    body.credit-ledger-customer-body .credit-ledger-customer-ui span,
    body.credit-ledger-customer-body .credit-ledger-customer-ui small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui label,
    body.credit-ledger-customer-body .credit-ledger-customer-ui a,
    body.credit-ledger-customer-body .credit-ledger-customer-ui button,
    body.credit-ledger-customer-body .credit-ledger-customer-ui input,
    body.credit-ledger-customer-body .credit-ledger-customer-ui select,
    body.credit-ledger-customer-body .credit-ledger-customer-ui textarea,
    body.credit-ledger-customer-body .credit-ledger-customer-ui strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui b,
    body.credit-ledger-customer-body .credit-ledger-customer-ui em {
        font-size: 15px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage b,
    body.credit-ledger-customer-body .sbo-bottom-nav a span,
    body.credit-ledger-customer-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a span,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui [aria-hidden="true"],
    body.credit-ledger-customer-body .sbo-bottom-nav__icon,
    body.credit-ledger-customer-body .credit-ledger-customer-header__icon,
    body.credit-ledger-customer-body .credit-ledger-customer-header__back,
    body.credit-ledger-customer-body .credit-ledger-customer-ledger__icon {
        font-size: 0 !important;
    }
}

@media (min-width: 1366px) {
    body.credit-ledger-customer-body,
    body.credit-ledger-customer-body .credit-ledger-customer-ui {
        font-size: 16px !important;
    }

    body.credit-ledger-customer-body.sbo-dashboard-body h1,
    body.credit-ledger-customer-body.sbo-dashboard-body h2,
    body.credit-ledger-customer-body.sbo-dashboard-body h3,
    body.credit-ledger-customer-body.sbo-dashboard-body h4,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__title,
    body.sbo-dashboard-body.credit-ledger-customer-body .credit-ledger-customer-ui h1.credit-ledger-customer-header__title,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-ledger h2,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-section h2,
    body.credit-ledger-customer-body .sbo-credit-reminder-modal__header h2,
    body.credit-ledger-customer-body .sbo-credit-payment-modal__header h2,
    body.credit-ledger-customer-body #credit-reminder-modal-title,
    body.credit-ledger-customer-body #credit-payment-modal-title {
        font-size: 22px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .credit-ledger-customer-header__subtitle,
    body.credit-ledger-customer-body .credit-ledger-customer-ui p.credit-ledger-customer-header__subtitle,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-status,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile p,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage > div:first-child,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-table__head,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-amount,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-row .is-balance,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-ledger-legend,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-empty p,
    body.credit-ledger-customer-body .sbo-credit-reminder-copy,
    body.credit-ledger-customer-body .sbo-credit-payment-outstanding,
    body.credit-ledger-customer-body .sbo-credit-payment-outstanding strong,
    body.credit-ledger-customer-body .sbo-credit-payment-field,
    body.credit-ledger-customer-body .sbo-credit-payment-field > span,
    body.credit-ledger-customer-body .sbo-credit-payment-methods legend,
    body.credit-ledger-customer-body .sbo-credit-payment-field input,
    body.credit-ledger-customer-body .sbo-credit-payment-staff select,
    body.credit-ledger-customer-body .sbo-credit-payment-methods__options button,
    body.credit-ledger-customer-body .sbo-credit-payment-form__footer button,
    body.credit-ledger-customer-body .sbo-credit-reminder-message textarea,
    body.credit-ledger-customer-body .sbo-credit-reminder-whatsapp,
    body.credit-ledger-customer-body .sbo-credit-reminder-actions form button,
    body.credit-ledger-customer-body .sbo-credit-customer-form__errors,
    body.credit-ledger-customer-body .sbo-credit-customer-form__errors p,
    body.credit-ledger-customer-body .sbo-bottom-nav a,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-avatar,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-reminder,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-primary .is-payment,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-suspend button,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-followup,
    body.credit-ledger-customer-body .credit-ledger-customer-ui p,
    body.credit-ledger-customer-body .credit-ledger-customer-ui span,
    body.credit-ledger-customer-body .credit-ledger-customer-ui small,
    body.credit-ledger-customer-body .credit-ledger-customer-ui label,
    body.credit-ledger-customer-body .credit-ledger-customer-ui a,
    body.credit-ledger-customer-body .credit-ledger-customer-ui button,
    body.credit-ledger-customer-body .credit-ledger-customer-ui input,
    body.credit-ledger-customer-body .credit-ledger-customer-ui select,
    body.credit-ledger-customer-body .credit-ledger-customer-ui textarea,
    body.credit-ledger-customer-body .credit-ledger-customer-ui strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui b,
    body.credit-ledger-customer-body .credit-ledger-customer-ui em {
        font-size: 16px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-profile strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-stats strong,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-usage b,
    body.credit-ledger-customer-body .sbo-bottom-nav a span,
    body.credit-ledger-customer-body .sbo-bottom-nav .sbo-bottom-nav__label,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav a span,
    body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.credit-ledger-customer-body .credit-ledger-customer-ui [aria-hidden="true"],
    body.credit-ledger-customer-body .sbo-bottom-nav__icon,
    body.credit-ledger-customer-body .credit-ledger-customer-header__icon,
    body.credit-ledger-customer-body .credit-ledger-customer-header__back,
    body.credit-ledger-customer-body .credit-ledger-customer-ledger__icon {
        font-size: 0 !important;
    }
}

/* Final payment modal overrides (win over responsive font cascades) */
body.credit-ledger-customer-body .sbo-credit-reminder-modal__header button,
body.credit-ledger-customer-body .sbo-credit-payment-modal__header button {
    font-size: 22px !important;
    line-height: 1 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff-hint {
    font-size: 12px !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-staff > i,
body.credit-ledger-customer-body .sbo-credit-payment-modal__icon,
body.credit-ledger-customer-body .sbo-credit-reminder-modal__icon {
    font-size: 0 !important;
}

body.credit-ledger-customer-body .sbo-credit-payment-form__footer button[type="submit"]:disabled {
    border-color: #CBD5E1 !important;
    background: #CBD5E1 !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* KRA PIN edit — force pointer cursor over legacy disabled styles */
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button.sbo-credit-detail-kra-edit,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:hover,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:focus,
body.credit-ledger-customer-body .credit-ledger-customer-ui .sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:active {
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Plans & Payments ? readable fonts (plans-readable, page-scoped)
   Mobile (<768px): 16px base
   Tablet & Desktop (768px+): 17px base (same scale)
   ========================================================================== */

@media (max-width: 1365px) {
    body.plans-body.plans-readable,
    body.plans-body.plans-readable .plans-ui.plans-readable,
    body.plans-body.plans-readable .plans-ui {
        font-size: 16px !important;
    }

    body.plans-body.plans-readable .plans-ui,
    body.plans-body.plans-readable .plans-ui p,
    body.plans-body.plans-readable .plans-ui span,
    body.plans-body.plans-readable .plans-ui small,
    body.plans-body.plans-readable .plans-ui label,
    body.plans-body.plans-readable .plans-ui a,
    body.plans-body.plans-readable .plans-ui button,
    body.plans-body.plans-readable .plans-ui input,
    body.plans-body.plans-readable .plans-ui select,
    body.plans-body.plans-readable .plans-ui textarea,
    body.plans-body.plans-readable .plans-ui strong,
    body.plans-body.plans-readable .plans-ui b,
    body.plans-body.plans-readable .plans-ui em,
    body.plans-body.plans-readable .plans-ui i,
    body.plans-body.plans-readable .plans-ui summary,
    body.plans-body.plans-readable .plans-ui details,
    body.plans-body.plans-readable .plans-ui .sbo-plans-status,
    body.plans-body.plans-readable .plans-ui .sbo-plans-shop-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-addon-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-invoice-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-upgrade-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-credit small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-perks small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-shops__footer,
    body.plans-body.plans-readable .plans-ui .sbo-plans-add,
    body.plans-body.plans-readable .plans-ui .sbo-plans-empty,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue p,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue__cta,
    body.plans-body.plans-readable .plans-ui .sbo-plans-btn,
    body.plans-body.plans-readable .plans-ui .sbo-plans-current__meta,
    body.plans-body.plans-readable .plans-ui .sbo-plans-current__price small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-pay-panel p,
    body.plans-body.plans-readable .plans-ui .sbo-plans-help p,
    body.plans-body.plans-readable .plans-ui .sbo-plans-pay-tabs button,
    body.plans-body.plans-readable .sbo-bottom-nav a {
        font-size: 16px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-section__head h2 {
        color: #222 !important;
        font-size: 18px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    body.plans-body.plans-readable .plans-ui .plans-header__subtitle,
    body.plans-body.plans-readable .plans-ui p.plans-header__subtitle,
    body.plans-body.plans-readable .plans-header__subtitle,
    body.plans-body.plans-readable .sbo-plans-header p {
        font-size: 15px !important;
    }

    body.plans-body.plans-readable .plans-ui .plans-header__title,
    body.plans-body.plans-readable .plans-ui h1.plans-header__title,
    body.plans-body.plans-readable .plans-header__title,
    body.plans-body.plans-readable .sbo-plans-header h1,
    body.sbo-dashboard-body.plans-body.plans-readable .plans-ui h1.plans-header__title {
        font-size: 22px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-current h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-current__price {
        font-size: 18px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-shop-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-addon-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-invoice-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-upgrade-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-credit strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-feature strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-staff-pack strong,
    body.plans-body.plans-readable .sbo-bottom-nav a span,
    body.plans-body.plans-readable .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 17px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-shop-row__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-staff-pack__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-credit__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-feature__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-help__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-perks__icon {
        font-size: 0 !important;
    }

    /* Keep SVG icon shells from inheriting text sizes (not emoji glyph icons) */
    body.plans-body.plans-readable .sbo-bottom-nav__icon,
    body.plans-body.plans-readable .plans-header__icon,
    body.plans-body.plans-readable .plans-header__back,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue__icon {
        font-size: 0 !important;
    }
}

@media (min-width: 768px) {
    body.plans-body.plans-readable,
    body.plans-body.plans-readable .plans-ui.plans-readable,
    body.plans-body.plans-readable .plans-ui {
        font-size: 17px !important;
    }

    body.plans-body.plans-readable .plans-ui,
    body.plans-body.plans-readable .plans-ui p,
    body.plans-body.plans-readable .plans-ui span,
    body.plans-body.plans-readable .plans-ui small,
    body.plans-body.plans-readable .plans-ui label,
    body.plans-body.plans-readable .plans-ui a,
    body.plans-body.plans-readable .plans-ui button,
    body.plans-body.plans-readable .plans-ui input,
    body.plans-body.plans-readable .plans-ui select,
    body.plans-body.plans-readable .plans-ui textarea,
    body.plans-body.plans-readable .plans-ui strong,
    body.plans-body.plans-readable .plans-ui b,
    body.plans-body.plans-readable .plans-ui em,
    body.plans-body.plans-readable .plans-ui i,
    body.plans-body.plans-readable .plans-ui summary,
    body.plans-body.plans-readable .plans-ui details,
    body.plans-body.plans-readable .plans-ui .sbo-plans-status,
    body.plans-body.plans-readable .plans-ui .sbo-plans-shop-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-addon-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-invoice-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-upgrade-row small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-credit small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-perks small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-shops__footer,
    body.plans-body.plans-readable .plans-ui .sbo-plans-add,
    body.plans-body.plans-readable .plans-ui .sbo-plans-empty,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue p,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue__cta,
    body.plans-body.plans-readable .plans-ui .sbo-plans-btn,
    body.plans-body.plans-readable .plans-ui .sbo-plans-current__meta,
    body.plans-body.plans-readable .plans-ui .sbo-plans-current__price small,
    body.plans-body.plans-readable .plans-ui .sbo-plans-pay-panel p,
    body.plans-body.plans-readable .plans-ui .sbo-plans-help p,
    body.plans-body.plans-readable .plans-ui .sbo-plans-pay-tabs button,
    body.plans-body.plans-readable .sbo-bottom-nav a {
        font-size: 17px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-section__head h2 {
        color: #222 !important;
        font-size: 22px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    body.plans-body.plans-readable .plans-ui .plans-header__subtitle,
    body.plans-body.plans-readable .plans-ui p.plans-header__subtitle,
    body.plans-body.plans-readable .plans-header__subtitle,
    body.plans-body.plans-readable .sbo-plans-header p {
        font-size: 16px !important;
    }

    body.plans-body.plans-readable .plans-ui .plans-header__title,
    body.plans-body.plans-readable .plans-ui h1.plans-header__title,
    body.plans-body.plans-readable .plans-header__title,
    body.plans-body.plans-readable .sbo-plans-header h1,
    body.sbo-dashboard-body.plans-body.plans-readable .plans-ui h1.plans-header__title {
        font-size: 24px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-current h3 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-current__price {
        font-size: 20px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-shop-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-addon-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-invoice-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-upgrade-row strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-credit strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-feature strong,
    body.plans-body.plans-readable .plans-ui .sbo-plans-staff-pack strong,
    body.plans-body.plans-readable .sbo-bottom-nav a span,
    body.plans-body.plans-readable .sbo-bottom-nav .sbo-bottom-nav__label {
        font-size: 18px !important;
    }

    body.plans-body.plans-readable .plans-ui .sbo-plans-shop-row__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-staff-pack__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-credit__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-feature__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-help__icon,
    body.plans-body.plans-readable .plans-ui .sbo-plans-perks__icon {
        font-size: 0 !important;
    }

    body.plans-body.plans-readable .sbo-bottom-nav__icon,
    body.plans-body.plans-readable .plans-header__icon,
    body.plans-body.plans-readable .plans-header__back,
    body.plans-body.plans-readable .plans-ui .sbo-plans-overdue__icon {
        font-size: 0 !important;
    }
}

/* ==========================================================================
   PLANS & PAYMENTS ? min font-size 16px (mobile + tablet only, page-scoped)
   Class: plans-fs-min-16 ? overrides existing 14px/13px/12px rules without clash
   Mobile/Tablet =1365px: min 16px | Desktop =1366px: unchanged
   ========================================================================== */
@media (max-width: 1365px) {
    body.plans-body.plans-fs-min-16,
    body.plans-body.plans-fs-min-16 .plans-ui.plans-fs-min-16,
    body.plans-body.plans-fs-min-16 .plans-ui {
        font-size: 16px !important;
        --plans-fs-min: 16px;
    }

    body.plans-body.plans-fs-min-16,
    body.plans-body.plans-fs-min-16 .plans-ui,
    body.plans-body.plans-fs-min-16 .plans-ui p,
    body.plans-body.plans-fs-min-16 .plans-ui span,
    body.plans-body.plans-fs-min-16 .plans-ui small,
    body.plans-body.plans-fs-min-16 .plans-ui label,
    body.plans-body.plans-fs-min-16 .plans-ui a,
    body.plans-body.plans-fs-min-16 .plans-ui button,
    body.plans-body.plans-fs-min-16 .plans-ui input,
    body.plans-body.plans-fs-min-16 .plans-ui select,
    body.plans-body.plans-fs-min-16 .plans-ui textarea,
    body.plans-body.plans-fs-min-16 .plans-ui strong,
    body.plans-body.plans-fs-min-16 .plans-ui b,
    body.plans-body.plans-fs-min-16 .plans-ui em,
    body.plans-body.plans-fs-min-16 .plans-ui i,
    body.plans-body.plans-fs-min-16 .plans-ui summary,
    body.plans-body.plans-fs-min-16 .plans-ui details,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal p,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal span,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal small,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal label,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal a,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal button,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal input,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal select,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal textarea,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal strong,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-success,
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav,
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav a,
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav span {
        font-size: max(16px, 1em) !important;
    }

    /* Explicit under-16 overrides (existing !important 10?15px rules) */
    body.plans-body.plans-fs-min-16 .plans-ui small,
    body.plans-body.plans-fs-min-16 .plans-ui .plans-header__subtitle,
    body.plans-body.plans-fs-min-16 .plans-ui p.plans-header__subtitle,
    body.plans-body.plans-fs-min-16 .plans-header__subtitle,
    body.plans-body.plans-fs-min-16 .sbo-plans-header p,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-status,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-shop-row small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-addon-row small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-invoice-row small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-upgrade-row small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-credit small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-perks small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-shops__footer,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-shops__footer a,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-add,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-empty,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-overdue strong,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-overdue p,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-overdue__cta,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-btn,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-current__meta,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-current__price small,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-pay-panel p,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-help p,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-pay-tabs button,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-feature > span,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-feature p,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-staff-pack p,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-invoice-row__meta strong,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-bottom-nav a,
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav a,
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav a span,
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav .sbo-bottom-nav__label,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal small,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal header p,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal p,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal label,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal .sbo-staff-pack-included__grid strong,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal .sbo-staff-pack-branch strong,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal .sbo-staff-pack-branch small,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal .sbo-staff-pack-pay__hint,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal .sbo-staff-pack-pay__hint strong,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal header p,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-success header p,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__body,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__body p,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__body label,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__body input,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__body textarea,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__body select,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-submit,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal small,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal header p,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal p,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal label,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__body,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__body p,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__body small,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__body label,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__body button,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__body strong {
        font-size: 16px !important;
    }

    /* Keep icon-only nodes at 0 so SVG sizing is unaffected */
    body.plans-body.plans-fs-min-16 .plans-ui [aria-hidden="true"],
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal [aria-hidden="true"],
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal [aria-hidden="true"],
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal [aria-hidden="true"],
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-success [aria-hidden="true"],
    body.plans-body.plans-fs-min-16 .sbo-bottom-nav__icon,
    body.plans-body.plans-fs-min-16 .plans-header__icon,
    body.plans-body.plans-fs-min-16 .plans-header__back,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-overdue__icon,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-shop-row__icon,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-staff-pack__icon,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-credit__icon,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-feature__icon,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-help__icon,
    body.plans-body.plans-fs-min-16 .plans-ui .sbo-plans-perks__icon,
    body.plans-body.plans-fs-min-16 .sbo-staff-pack-modal__icon,
    body.plans-body.plans-fs-min-16 .sbo-delytt-help-modal__icon,
    body.plans-body.plans-fs-min-16 .sbo-sms-credit-modal__icon {
        font-size: 0 !important;
    }
}

/* Expense Book ? summary cards + Apply button 18px up to 1366px (incl. mobile) */
@media (max-width: 1366px) {
    .expense-book-ui .expense-book-summary__label,
    .expense-book-ui .expense-book-summary__value,
    .expense-book-ui .expense-book-summary__meta,
    body.expense-book-body .expense-book-ui .expense-book-summary__label,
    body.expense-book-body .expense-book-ui .expense-book-summary__value,
    body.expense-book-body .expense-book-ui .expense-book-summary__meta,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .expense-book-summary__label,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .expense-book-summary__value,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .expense-book-summary__meta {
        font-size: 18px !important;
    }

    .expense-book-ui .sbo-expense-custom-range button,
    body.expense-book-body .expense-book-ui .sbo-expense-custom-range button,
    body.sbo-dashboard-body.expense-book-body .expense-book-ui .sbo-expense-custom-range button {
        font-size: 18px !important;
    }
}

/* Credit Ledger ? summary cards: 14px labels / 16px values up to 1366px; mobile no-wrap UI */
@media (max-width: 1366px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small {
        font-size: 14px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
        font-size: 16px !important;
    }
}

@media (max-width: 720px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-content.credit-ledger-content,
    body.credit-ledger-body .credit-ledger-ui .credit-ledger-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary {
        gap: 6px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary article {
        padding: 10px 4px !important;
        min-width: 0 !important;
        gap: 4px !important;
        align-content: center !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small,
    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary small {
        font-size: 14px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-credit-summary strong {
        font-size: 16px !important;
    }
}

/* Credit Ledger ? mobile header UI fix (<768px)
   Compact row: back + titles + action. Hide feature icon, keep title/subtitle 1 line. */
@media (max-width: 767px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header.credit-ledger-header,
    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 0 0 14px 14px !important;
    }

    body.credit-ledger-body .credit-ledger-header__icon {
        display: none !important;
    }

    body.credit-ledger-body .credit-ledger-header__back,
    body.credit-ledger-body .credit-ledger-ui .sbo-back-button.credit-ledger-header__back {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    body.credit-ledger-body .credit-ledger-header__titles {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__title,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header h1,
    body.credit-ledger-body .credit-ledger-header__title,
    body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui h1.credit-ledger-header__title {
        margin: 0 0 2px !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header__subtitle,
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header p,
    body.credit-ledger-body .credit-ledger-ui p.credit-ledger-header__subtitle,
    body.sbo-dashboard-body.credit-ledger-body .credit-ledger-ui p.credit-ledger-header__subtitle {
        font-size: 16px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-add-staff-button.credit-ledger-header__action,
    body.credit-ledger-body .credit-ledger-header__action {
        min-height: 36px !important;
        padding: 0 12px !important;
        gap: 6px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    body.credit-ledger-body .credit-ledger-header__action svg {
        width: 13px !important;
        height: 13px !important;
    }
}

@media (max-width: 380px) {
    body.credit-ledger-body .credit-ledger-ui .sbo-staff-header.credit-ledger-header,
    body.credit-ledger-body .credit-ledger-ui .credit-ledger-header {
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    body.credit-ledger-body .credit-ledger-ui .sbo-add-staff-button.credit-ledger-header__action,
    body.credit-ledger-body .credit-ledger-header__action {
        padding: 0 10px !important;
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Business Reports ? Credit Ledger popup (white header / blue gradient)
   ========================================================================== */

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__backdrop {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(3px);
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__dialog {
    width: min(500px, calc(100% - 24px)) !important;
    max-height: min(92vh, 760px) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 36px !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 18px 18px 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    border-bottom: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__icon {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: #EAF1FF !important;
    color: #1D4ED8 !important;
    font-size: 0 !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-modal__titles {
    min-width: 0;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header h2 {
    margin: 0 !important;
    color: #0F172A !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header p {
    margin: 3px 0 0 !important;
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-period {
    margin-top: 8px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: #2563EB !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-period span {
    color: #2563EB !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-period svg {
    display: block;
    flex-shrink: 0;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__close {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #EAF1FF !important;
    color: #1E3A8A !important;
    font-size: 0 !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__close:hover {
    background: #DBE7FF !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__close svg {
    display: block;
    width: 14px;
    height: 14px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__body {
    padding: 8px 18px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #fff !important;
    overflow: auto !important;
    flex: 1 1 auto !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero {
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(90deg, #4568DC 0%, #5C7CFA 52%, #7B6CF0 100%) !important;
    color: #fff !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 120px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__cell {
    position: relative !important;
    padding: 18px 12px 20px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__cell + .sbo-credit-hero__cell::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.4) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__cell + .sbo-credit-hero__cell {
    border-left: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero small {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 0.95 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero strong {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: 6px !important;
    color: #ffffff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 24px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    opacity: 1 !important;
}

/* Watermark icons ? same as design: outline wallet/users, clipped into corners */
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__deco {
    position: absolute !important;
    color: #ffffff !important;
    pointer-events: none !important;
    line-height: 0 !important;
    opacity: 0.18 !important;
    z-index: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__deco svg {
    display: block !important;
    width: 45px !important;
    height: 78px !important;
    fill: none !important;
    stroke: currentColor !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__deco--wallet {
    left: -14px !important;
    bottom: -18px !important;
    right: auto !important;
    top: auto !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__deco--users {
    right: 12px !important;
    bottom: -16px !important;
    left: auto !important;
    top: auto !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero__cell:first-child .sbo-credit-hero__deco {
    left: 12px !important;
    right: auto !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets article {
    position: relative !important;
    padding: 12px 8px 10px !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    border: 0 !important;
    border-top: 3px solid transparent !important;
    text-align: center !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets__icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 auto 7px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets small {
    display: block !important;
    margin: 0 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets strong {
    display: block !important;
    margin: 4px 0 2px !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    color: #0F172A !important;
    line-height: 1.1 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets span:not(.sbo-credit-buckets__icon) {
    display: block !important;
    font-size: 16px !important;
    color: #94A3B8 !important;
    line-height: 1.2 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-overdue {
    border-top-color: #EF4444 !important;
    background: #FFF5F5 !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-overdue .sbo-credit-buckets__icon {
    background: transparent !important;
    color: #EF4444 !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-overdue small { color: #EF4444 !important; }

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-pending {
    border-top-color: #3B82F6 !important;
    background: #F3F7FF !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-pending .sbo-credit-buckets__icon {
    background: transparent !important;
    color: #3B82F6 !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-pending small { color: #3B82F6 !important; }

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-partial {
    border-top-color: #F59E0B !important;
    background: #FFF9EF !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-partial .sbo-credit-buckets__icon {
    background: transparent !important;
    color: #F59E0B !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets .is-partial small { color: #F59E0B !important; }

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state {
    margin: 0 !important;
    padding: 28px 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    border-radius: 18px !important;
    background: #F8FAFC !important;
    border: 1px solid #EEF2F7 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__art {
    position: relative !important;
    width: 88px !important;
    height: 88px !important;
    margin-bottom: 8px !important;
    display: grid !important;
    place-items: center !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__art::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.04) 55%, transparent 70%) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__badge {
    position: relative !important;
    z-index: 1 !important;
    width: 64px !important;
    height: 64px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #3B82F6 !important;
    box-shadow: none !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__badge > svg {
    display: block;
    width: 40px;
    height: 40px;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__spark {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #FBBF24 !important;
    opacity: 0.9 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__spark--1 {
    top: 12px;
    left: 16px;
    background: #F59E0B !important;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0 !important;
    width: 8px !important;
    height: 8px !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__spark--2 {
    top: 16px;
    right: 14px;
    width: 4px !important;
    height: 4px !important;
    background: #93C5FD !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__spark--3 {
    bottom: 16px;
    left: 18px;
    width: 3px !important;
    height: 3px !important;
    background: #CBD5E1 !important;
}
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state__spark--4 {
    bottom: 20px;
    right: 16px;
    background: #FBBF24 !important;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0 !important;
    width: 7px !important;
    height: 7px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state strong {
    margin: 0 !important;
    color: #0F172A !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state p {
    margin: 0 !important;
    color: #94A3B8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row {
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #EEF2F7 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row > span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #E8F0FE !important;
    color: #2563EB !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 13px !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row strong {
    color: #0F172A !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row small {
    color: #94A3B8 !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-row__meta b {
    color: #2563EB !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__footer {
    padding: 10px 18px 16px !important;
    display: grid !important;
    gap: 10px !important;
    border-top: 0 !important;
    background: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary.is-orange {
    min-height: 48px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #2563EB !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary-icon svg,
body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    color: #fff !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__secondary {
    min-height: 46px !important;
    padding: 12px 16px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0F172A !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    cursor: pointer !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-secure {
    margin: 2px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #94A3B8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-secure svg {
    display: block;
    flex-shrink: 0;
    color: #94A3B8;
}

body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-note.is-danger {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #9F1239 !important;
    border-radius: 14px !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header h2 {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero strong {
        font-size: 26px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets strong {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__header h2 {
        font-size: 22px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-hero strong {
        font-size: 28px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets strong {
        font-size: 20px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary {
        font-size: 17px !important;
    }
}

@media (max-width: 380px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-buckets article {
        padding: 10px 6px 8px !important;
    }
}

/* Empty-state / secure text ? keep design sizes (override mobile 16px blanket) */
@media (max-width: 767px) {
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state strong {
        font-size: 14px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-empty-state p {
        font-size: 12px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-credit-secure {
        font-size: 14px !important;
    }

    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__primary,
    body.business-reports-body .sbo-report-modal[data-report-modal="credit"] .sbo-report-modal__secondary {
        font-size: 16px !important;
    }
}

/* =========================================================
   Money Agent Dashboard ??? match owner dashboard.blade.php font sizes
   Scale from sales-dashboard-ui: 14 body / 16 label-title / 18 heading / 22 hero / 26 amount / 16 btn
   ========================================================= */
body.agent-dashboard-body.sales-dashboard-body,
body.agent-layout-body.sales-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

.agent-dashboard-ui.sales-dashboard-ui,
.sales-dashboard-ui.agent-dashboard-ui {
    --ad-danger: #DC2626;
    --ad-danger-soft: #FEF1F2;
    --ad-success: #10b981;
    --ad-success-deep: #059669;
    --ad-warn: #f59e0b;
    --ad-warn-soft: #fff7e8;
    --ad-info: #3366CC;
    --sbo-navy: #3366CC;
    --sbo-text: #1e293b;
    --sbo-muted: #8a94a6;
    --sbo-line: #e8edf3;
    --sd-fs-min: 14px;
    --sd-fs-body: 14px;
    --sd-fs-label: 14px;
    --sd-fs-meta: 14px;
    --sd-fs-title: 16px;
    --sd-fs-heading: 18px;
    --sd-fs-hero: 22px;
    --sd-fs-display: 28px;
    --sd-fs-btn: 14px;
    color: #1e293b;
    font-family: var(--sb-font-regular);
    font-size: 14px;
    line-height: 1.45;
}

/* Same min-14px blanket as owner dashboard */
.agent-dashboard-ui.sales-dashboard-ui,
.agent-dashboard-ui.sales-dashboard-ui p,
.agent-dashboard-ui.sales-dashboard-ui span,
.agent-dashboard-ui.sales-dashboard-ui small,
.agent-dashboard-ui.sales-dashboard-ui label,
.agent-dashboard-ui.sales-dashboard-ui a,
.agent-dashboard-ui.sales-dashboard-ui button,
.agent-dashboard-ui.sales-dashboard-ui input,
.agent-dashboard-ui.sales-dashboard-ui select,
.agent-dashboard-ui.sales-dashboard-ui textarea,
.agent-dashboard-ui.sales-dashboard-ui em,
.agent-dashboard-ui.sales-dashboard-ui i,
.agent-dashboard-ui.sales-dashboard-ui b,
.agent-dashboard-ui.sales-dashboard-ui strong,
.agent-dashboard-ui.sales-dashboard-ui li,
.agent-dashboard-ui.sales-dashboard-ui time,
.agent-dashboard-ui.sales-dashboard-ui summary {
    font-size: max(14px, 1em);
}

.agent-dashboard-ui .agent-dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-dashboard-hero {
    padding: 2px 2px 0;
    align-items: center;
}

/* Hero title = sales-dashboard-hero__title (22px) */
.agent-dashboard-ui .agent-dashboard-hero h1 {
    margin: 0;
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-weight: normal;
    font-size: 22px !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-dashboard-hero p {
    margin: 6px 0 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

/* Link / outline control = credit Top Up size */
.agent-dashboard-ui .agent-dashboard-hero__link {
    margin-top: 0;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid #E0E8FF;
    background: #fff;
    color: #3366CC;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

.agent-dashboard-ui .agent-card {
    padding: 16px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

/* Section titles = owner dashboard h2 headings */
.agent-dashboard-ui .agent-card__eyebrow,
.agent-dashboard-ui small.agent-card__eyebrow,
body.agent-dashboard-body .agent-card__eyebrow {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    .agent-dashboard-ui .agent-card__eyebrow,
    .agent-dashboard-ui small.agent-card__eyebrow,
    body.agent-dashboard-body .agent-card__eyebrow {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    .agent-dashboard-ui .agent-card__eyebrow,
    .agent-dashboard-ui small.agent-card__eyebrow,
    body.agent-dashboard-body .agent-card__eyebrow {
        font-size: 22px !important;
    }
}

.agent-dashboard-ui .agent-dashboard-hero h1 {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

.agent-dashboard-ui .agent-alert-card {
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    background: #FEF1F2;
    color: #DC2626;
    box-shadow: none;
}

.agent-dashboard-ui .agent-alert-card__head {
    margin-bottom: 10px;
    gap: 8px;
}

/* Alert title = sales-dashboard-alert__copy strong / credit title (16px) */
.agent-dashboard-ui .agent-alert-card__head strong {
    color: #DC2626;
    font-family: var(--sb-font-bold);
    font-size: 16px !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-alert-card ul {
    margin: 0 0 14px;
    color: #DC2626;
    font-size: 14px !important;
    line-height: 1.45;
    opacity: 0.9;
}

/* CTA = sales-dashboard-alert__cta (16px) */
.agent-dashboard-ui .agent-alert-card__cta {
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    color: #fff;
    background: #DC2626;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    line-height: 1;
    box-shadow: none;
}

/* Outlet name = branch switcher summary strong (20px) */
.agent-dashboard-ui .agent-outlet-card__name {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 20px !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-outlet-card__meta {
    color: #8a94a6;
    font-size: 14px !important;
}

/* Status pill = hero pill (14px) */
.agent-dashboard-ui .agent-outlet-card__meta em {
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
    line-height: 1;
    font-style: normal;
}

.agent-dashboard-ui .agent-outlet-card__meta em.is-open {
    color: #15803d;
    background: #ecfdf3;
}

.agent-dashboard-ui .agent-outlet-card__meta em.is-closed {
    color: #6b7280;
    background: #f3f4f6;
}

.agent-dashboard-ui .agent-float-grid {
    gap: 12px;
}

.agent-dashboard-ui .agent-float-grid article {
    padding: 14px 16px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    box-shadow: none;
}

/* Metric labels = sales-dashboard-sales-summary__stat small (16px) */
.agent-dashboard-ui .agent-float-grid span {
    margin-bottom: 6px;
    color: #000;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    letter-spacing: 0;
    text-transform: none;
}

/* Metric amounts = sales-dashboard-sales-summary__stat strong (26px) */
.agent-dashboard-ui .agent-float-grid strong {
    color: #000;
    font-family: var(--sb-font-bold);
    font-size: clamp(16px, 4.8vw, 26px) !important;
    line-height: 1.15;
    word-break: break-word;
}

/* Variance / meta = sales-dashboard-sales-summary__stat span (15px) */
.agent-dashboard-ui .agent-float-grid em {
    margin-top: 4px;
    font-family: var(--sb-font-semibold);
    font-size: 15px !important;
    line-height: 1.35;
    font-style: normal;
}

.agent-dashboard-ui .agent-shortage-card {
    background: #FEF1F2;
    border-color: #FECACA;
}

.agent-dashboard-ui .agent-shortage-card__head em {
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #DC2626;
    background: #fff;
    border: 1px solid #FECACA;
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
    line-height: 1;
    font-style: normal;
}

.agent-dashboard-ui .agent-shortage-card > strong {
    color: #DC2626;
    font-family: var(--sb-font-bold);
    font-size: clamp(18px, 5.2vw, 26px) !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-split-card strong,
.agent-dashboard-ui .agent-expense-card__head strong,
.agent-dashboard-ui .agent-expense-card__copy strong {
    color: #000;
    font-family: var(--sb-font-bold);
    font-size: clamp(18px, 5.2vw, 26px) !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-float-grid span {
    font-size: clamp(16px, 3.4vw, 16px) !important;
}

.agent-dashboard-ui .agent-stats-grid strong {
    font-size: clamp(16px, 4vw, 18px) !important;
}

@media (max-width: 380px) {
    .agent-dashboard-ui .agent-float-grid {
        gap: 8px;
    }

    .agent-dashboard-ui .agent-float-grid article {
        padding: 12px 10px;
    }

    .agent-dashboard-ui .agent-float-grid strong,
    .agent-dashboard-ui .agent-split-card strong,
    .agent-dashboard-ui .agent-expense-card__head strong,
    .agent-dashboard-ui .agent-expense-card__copy strong,
    .agent-dashboard-ui .agent-shortage-card > strong {
        font-size: clamp(16px, 5vw, 20px) !important;
    }
}

.agent-dashboard-ui .agent-split-card p,
.agent-dashboard-ui .agent-expense-card__head p {
    color: #333333;
    font-size: 15px !important;
}

.agent-dashboard-ui .agent-split-card .is-ok,
.agent-dashboard-ui .agent-expense-card .is-ok {
    color: #059669;
    font-family: var(--sb-font-semibold);
    font-size: 15px !important;
}

.agent-dashboard-ui .agent-split-card .is-warn,
.agent-dashboard-ui .agent-expense-card .is-warn {
    color: #B45309;
    font-family: var(--sb-font-semibold);
    font-size: 15px !important;
}

.agent-dashboard-ui .agent-expense-list li {
    border-top-color: #e8edf3;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-expense-list__icon {
    color: #3366CC;
}

/* List titles = todo row / list strong (16px) */
.agent-dashboard-ui .agent-expense-list__copy strong {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 16px !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-expense-list__copy small {
    color: #8a94a6;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-expense-list em {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 16px !important;
    font-style: normal;
}

.agent-dashboard-ui .agent-staff-watch__avatar {
    background: #3366CC;
    font-family: var(--sb-font-bold);
    font-size: 14px !important;
    box-shadow: 0 4px 14px rgba(51, 102, 204, 0.18);
}

.agent-dashboard-ui .agent-staff-watch__copy strong {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 16px !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-staff-watch__copy small {
    color: #8a94a6;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-staff-watch__status {
    color: #B42318;
    background: #FEF3F2;
    border: 1px solid #FECDCA;
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
    font-style: normal;
}

.agent-dashboard-ui .agent-timeline li {
    border-left-color: #e8edf3;
}

.agent-dashboard-ui .agent-timeline strong {
    color: #1e293b;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-timeline time {
    color: #8a94a6;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-stats-grid {
    gap: 10px;
}

.agent-dashboard-ui .agent-stats-grid article {
    padding: 14px 12px;
    border-radius: 15px;
    border: 1px solid transparent;
}

/* Stats amounts = metric card strong (18px) */
.agent-dashboard-ui .agent-stats-grid strong {
    font-family: var(--sb-font-bold);
    font-size: 18px !important;
    line-height: 1.2;
}

.agent-dashboard-ui .agent-stats-grid span {
    color: #000;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-stats-grid .is-deposits {
    background: #EFF7FF;
    border-color: #B1D2FF;
}

.agent-dashboard-ui .agent-stats-grid .is-deposits strong {
    color: #005097;
}

.agent-dashboard-ui .agent-stats-grid .is-withdrawals {
    background: #FEF1F2;
    border-color: #FECACA;
}

.agent-dashboard-ui .agent-stats-grid .is-withdrawals strong {
    color: #DC2626;
}

.agent-dashboard-ui .agent-stats-grid .is-commission {
    background: #F8F4FF;
    border-color: #E1DAFE;
}

.agent-dashboard-ui .agent-stats-grid .is-commission strong {
    color: #7B39ED;
}

/* Buttons = live-sales.blade.php CTAs (Pay Now / Replenish / Apply) */
.agent-dashboard-ui .agent-btn,
body.agent-dashboard-body .agent-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 92px;
    width: fit-content;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

@media (min-width: 768px) {
    .agent-dashboard-ui .agent-btn,
    body.agent-dashboard-body .agent-btn {
        font-size: 18px !important;
    }
}

.agent-dashboard-ui .agent-btn:hover:not(.is-disabled):not(:disabled),
body.agent-dashboard-body .agent-btn:hover:not(.is-disabled):not(:disabled) {
    transform: translateY(-1px);
}

.agent-dashboard-ui .agent-btn--navy,
body.agent-dashboard-body .agent-btn--navy {
    color: #fff !important;
    background: #36C !important;
    border: 0 !important;
}

.agent-dashboard-ui .agent-btn--navy:hover:not(.is-disabled):not(:disabled),
body.agent-dashboard-body .agent-btn--navy:hover:not(.is-disabled):not(:disabled) {
    background: #2a56ad !important;
}

.agent-dashboard-ui .agent-btn--success,
body.agent-dashboard-body .agent-btn--success {
    color: #fff !important;
    background: #16A34A !important;
    border: 0 !important;
}

.agent-dashboard-ui .agent-btn--success:hover:not(.is-disabled):not(:disabled),
body.agent-dashboard-body .agent-btn--success:hover:not(.is-disabled):not(:disabled) {
    background: #15803d !important;
}

.agent-dashboard-ui .agent-btn--danger,
body.agent-dashboard-body .agent-btn--danger {
    color: #fff !important;
    background: #DC2626 !important;
    border: 0 !important;
}

.agent-dashboard-ui .agent-btn--danger:hover:not(.is-disabled):not(:disabled),
body.agent-dashboard-body .agent-btn--danger:hover:not(.is-disabled):not(:disabled) {
    background: #b91c1c !important;
}

.agent-dashboard-ui .agent-btn--warn,
body.agent-dashboard-body .agent-btn--warn {
    color: #fff !important;
    background: #FF831D !important;
    border: 0 !important;
}

.agent-dashboard-ui .agent-btn--warn:hover:not(.is-disabled):not(:disabled),
body.agent-dashboard-body .agent-btn--warn:hover:not(.is-disabled):not(:disabled) {
    background: #ea580c !important;
}

.agent-dashboard-ui .agent-btn--outline,
body.agent-dashboard-body .agent-btn--outline {
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    color: #3366CC !important;
    border: 1.5px solid #3366CC !important;
    background: #ffffff !important;
}

.agent-dashboard-ui .agent-btn--outline:hover:not(.is-disabled):not(:disabled),
body.agent-dashboard-body .agent-btn--outline:hover:not(.is-disabled):not(:disabled) {
    background: #EFF7FF !important;
    color: #2952A3 !important;
    border-color: #3366CC !important;
}

.agent-dashboard-ui .agent-btn--ghost,
.agent-dashboard-ui .agent-btn.is-disabled,
body.agent-dashboard-body .agent-btn--ghost,
body.agent-dashboard-body .agent-btn.is-disabled {
    color: #94a3b8 !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    opacity: 0.7;
    pointer-events: none;
    transform: none !important;
}

.agent-dashboard-ui .agent-alert-card__cta {
    box-sizing: border-box;
    min-width: 92px;
    width: fit-content;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    color: #fff !important;
    background: #DC2626;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: transform 180ms ease, background 180ms ease;
}

.agent-dashboard-ui .agent-alert-card__cta:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.agent-dashboard-ui .agent-dashboard-hero__link {
    box-sizing: border-box;
    min-width: 92px;
    width: fit-content;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid #2563EB;
    background: #ffffff;
    color: #2563EB;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
}

@media (min-width: 768px) {
    .agent-dashboard-ui .agent-alert-card__cta,
    .agent-dashboard-ui .agent-dashboard-hero__link {
        font-size: 18px !important;
    }
}

.agent-dashboard-ui .agent-expense-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.agent-dashboard-ui .agent-expense-card__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.agent-dashboard-ui .agent-expense-card__copy .agent-card__eyebrow {
    margin-bottom: 8px;
}

.agent-dashboard-ui .agent-expense-card__copy strong {
    display: block;
    margin: 0 0 6px;
}

.agent-dashboard-ui .agent-expense-card__copy p {
    margin: 0;
}

.agent-dashboard-ui .agent-expense-card__add,
.agent-dashboard-ui .agent-expense-card__head .agent-btn--navy {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    align-self: flex-start;
    margin-top: 2px;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-expense-list {
    margin: 0 0 14px;
}

.agent-dashboard-ui .agent-expense-card__actions,
.agent-dashboard-ui .agent-stats-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-dashboard-ui .agent-expense-card__actions .agent-btn,
.agent-dashboard-ui .agent-stats-actions .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
}

.agent-dashboard-ui .agent-staff-watch__ask,
.agent-dashboard-ui .agent-staff-watch__profile {
    min-width: 0;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
}

.agent-dashboard-ui .agent-btn--danger {
    width: 100% !important;
}

.agent-dashboard-ui .agent-empty {
    color: #8a94a6;
    font-size: 14px !important;
}

/* Expenses sheet + Add Expense / Ask modals */
body.agent-dashboard-body .agent-expenses-sheet__dialog {
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16);
}

body.agent-dashboard-body .agent-expenses-sheet__header h2 {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 22px !important;
    line-height: 1.25;
}

body.agent-dashboard-body .agent-add-expense-modal__header,
body.agent-dashboard-body .agent-ask-staff-modal__header {
    background: #3366CC;
}

body.agent-dashboard-body .agent-add-expense-modal__header h2,
body.agent-dashboard-body .agent-ask-staff-modal__header-copy h2 {
    color: #fff;
    font-family: var(--sb-font-bold);
    font-size: 22px !important;
    line-height: 1.25;
}

body.agent-dashboard-body .agent-add-expense-modal__header p,
body.agent-dashboard-body .agent-ask-staff-modal__header-copy p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__header p {
    color: #8a94a6;
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-add-expense-chip.is-selected {
    border-color: #3366CC;
    background: #3366CC;
    color: #fff;
}

body.agent-dashboard-body .agent-expenses-sheet__chips span {
    border-radius: 999px;
    background: #EFF7FF;
    color: #3366CC;
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__chips .is-warn {
    background: #fff7ed;
    color: #B45309;
}

body.agent-dashboard-body .agent-expenses-sheet__list li {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04);
}

body.agent-dashboard-body .agent-expenses-sheet__copy strong,
body.agent-dashboard-body .agent-expenses-sheet__right > strong {
    color: #1e293b;
    font-family: var(--sb-font-bold);
    font-size: 16px !important;
    line-height: 1.25;
}

body.agent-dashboard-body .agent-expenses-sheet__copy small {
    color: #8a94a6;
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__badge {
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
    border-radius: 999px;
}

body.agent-dashboard-body .agent-add-expense-modal__dialog,
body.agent-dashboard-body .agent-ask-staff-modal__dialog {
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 50, 80, 0.14);
}

body.agent-dashboard-body .agent-ask-staff-modal__label {
    color: #8a94a6;
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
    letter-spacing: 0;
    text-transform: none;
}

body.agent-dashboard-body .agent-add-expense-field__label {
    color: #334155;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    letter-spacing: 0;
    text-transform: none;
}

body.agent-dashboard-body .agent-add-expense-chip,
body.agent-dashboard-body .agent-ask-staff-prompt {
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #475569;
    font-family: var(--sb-font-semibold);
    font-size: 14px !important;
    line-height: 1.3;
}

body.agent-dashboard-body .agent-add-expense-chip.is-selected,
body.agent-dashboard-body .agent-ask-staff-prompt.is-selected,
body.agent-dashboard-body .agent-ask-staff-prompt:hover {
    border-color: #3366CC;
    color: #3366CC;
    background: #EFF7FF;
}

body.agent-dashboard-body .agent-add-expense-chip.is-selected {
    color: #fff;
    background: #3366CC;
}

body.agent-dashboard-body .agent-add-expense-amount,
body.agent-dashboard-body .agent-add-expense-field input,
body.agent-dashboard-body .agent-add-expense-field textarea,
body.agent-dashboard-body .agent-ask-staff-modal__textarea {
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    font-size: 14px !important;
    color: #1e293b;
}

body.agent-dashboard-body .agent-add-expense-field input:focus,
body.agent-dashboard-body .agent-add-expense-field textarea:focus,
body.agent-dashboard-body .agent-ask-staff-modal__textarea:focus,
body.agent-dashboard-body .agent-add-expense-amount:focus-within {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

body.agent-dashboard-body .agent-add-expense-upload {
    border: 1px dashed #B1D2FF;
    border-radius: 15px;
    background: #F8FAFC;
}

body.agent-dashboard-body .agent-add-expense-upload__copy strong {
    font-size: 16px !important;
}

body.agent-dashboard-body .agent-add-expense-upload__copy small {
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-add-expense-modal__cancel,
body.agent-dashboard-body .agent-ask-staff-modal__cancel {
    box-sizing: border-box;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border: 1.5px solid #2563EB;
    border-radius: 10px;
    background: #fff;
    color: #2563EB;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    font-weight: normal;
    line-height: 1;
    box-shadow: none;
}

body.agent-dashboard-body .agent-add-expense-modal__submit,
body.agent-dashboard-body .agent-ask-staff-modal__submit,
body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn--navy,
body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn--navy {
    box-sizing: border-box;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #36C;
    color: #fff;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    font-weight: normal;
    line-height: 1;
    box-shadow: none;
}

body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn--navy {
    width: 100% !important;
}

@media (min-width: 768px) {
    body.agent-dashboard-body .agent-ask-staff-modal__cancel,
    body.agent-dashboard-body .agent-ask-staff-modal__submit {
        font-size: 18px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__cancel,
    body.agent-dashboard-body .agent-add-expense-modal__submit,
    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn--navy,
    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn--navy {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    .agent-dashboard-ui .agent-dashboard-content {
        padding: 16px 16px 110px !important;
        gap: 16px;
    }
}

.agent-dashboard-ui .agent-btn svg,
.agent-dashboard-ui .agent-alert-card__cta svg,
.agent-dashboard-ui .agent-dashboard-hero__link svg,
.agent-dashboard-ui .agent-expenses-sheet__badge svg {
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

.agent-dashboard-ui .agent-alert-card__icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #DC2626;
    flex-shrink: 0;
}

.agent-dashboard-ui .agent-alert-card__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.agent-dashboard-ui .agent-inline-warn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.agent-dashboard-ui .agent-inline-warn svg {
    display: block;
    flex-shrink: 0;
}

body.agent-dashboard-body .agent-ask-staff-modal__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.agent-dashboard-body .agent-ask-staff-modal__label svg {
    display: block;
    flex-shrink: 0;
}

body.agent-dashboard-body .agent-expenses-sheet__close,
body.agent-dashboard-body .agent-add-expense-modal__close,
body.agent-dashboard-body .agent-ask-staff-modal__close {
    display: inline-grid;
    place-items: center;
    line-height: 0;
    font-size: 0;
}

body.agent-dashboard-body .agent-expenses-sheet__close svg,
body.agent-dashboard-body .agent-add-expense-modal__close svg,
body.agent-dashboard-body .agent-ask-staff-modal__close svg {
    display: block;
}

body.agent-dashboard-body .agent-expenses-sheet__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.agent-dashboard-body .agent-expenses-sheet__chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 350px) {
    .agent-dashboard-ui .agent-dashboard-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .agent-dashboard-ui .agent-card {
        padding: 14px 12px !important;
        border-radius: 16px !important;
    }

    .agent-dashboard-ui .agent-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .agent-dashboard-ui .agent-stats-grid article {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        text-align: left !important;
        border-radius: 12px !important;
    }

    .agent-dashboard-ui .agent-stats-grid strong {
        display: block !important;
        margin: 0 !important;
        font-size: 16px !important;
        order: 2;
        text-align: right;
        white-space: nowrap;
    }

    .agent-dashboard-ui .agent-stats-grid span {
        font-size: 14px !important;
        order: 1;
        color: #475569 !important;
    }

    .agent-dashboard-ui .agent-stats-actions,
    .agent-dashboard-ui .agent-expense-card__actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .agent-dashboard-ui .agent-stats-actions .agent-btn,
    .agent-dashboard-ui .agent-expense-card__actions .agent-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
        padding: 0 12px !important;
    }

    .agent-dashboard-ui .agent-float-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .agent-dashboard-ui .agent-expense-card__head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .agent-dashboard-ui .agent-expense-card__add,
    .agent-dashboard-ui .agent-expense-card__head .agent-btn--navy {
        width: 100% !important;
        justify-content: center !important;
    }

    .agent-dashboard-ui .agent-split-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .agent-dashboard-ui .agent-split-card .agent-btn {
        width: 100% !important;
    }
}

/* Add Expense modal ? match sales-book-owner portal modal fonts/UI */
body.agent-dashboard-body .agent-add-expense-modal__dialog {
    width: min(100%, 440px) !important;
    max-height: calc(100vh - 24px) !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    overflow: hidden !important;
}

body.agent-dashboard-body .agent-add-expense-modal__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    background: #36C !important;
    box-sizing: border-box !important;
}

body.agent-dashboard-body .agent-add-expense-modal__header > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.agent-dashboard-body .agent-add-expense-modal__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
}

body.agent-dashboard-body .agent-add-expense-modal__header h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.agent-dashboard-body .agent-add-expense-modal__header p {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

body.agent-dashboard-body .agent-add-expense-modal__close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    flex: 0 0 36px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
}

body.agent-dashboard-body .agent-add-expense-modal__body {
    gap: 14px !important;
    padding: 16px !important;
    background: #F8FAFC !important;
}

body.agent-dashboard-body .agent-add-expense-field {
    gap: 6px !important;
}

body.agent-dashboard-body .agent-add-expense-field__label {
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

body.agent-dashboard-body .agent-add-expense-chips {
    gap: 8px !important;
}

body.agent-dashboard-body .agent-add-expense-chip {
    min-height: 40px !important;
    padding: 8px 14px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

body.agent-dashboard-body .agent-add-expense-chip.is-selected {
    border-color: #36C !important;
    background: #36C !important;
    color: #fff !important;
    font-family: var(--sb-font-semibold) !important;
}

body.agent-dashboard-body .agent-add-expense-amount,
body.agent-dashboard-body .agent-add-expense-field input[type="text"],
body.agent-dashboard-body .agent-add-expense-field textarea,
body.agent-dashboard-body .agent-add-expense-amount input {
    min-height: 48px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

body.agent-dashboard-body .agent-add-expense-amount {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
}

body.agent-dashboard-body .agent-add-expense-amount em {
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-style: normal !important;
}

body.agent-dashboard-body .agent-add-expense-amount input {
    min-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.agent-dashboard-body .agent-add-expense-field input[type="text"],
body.agent-dashboard-body .agent-add-expense-field textarea {
    padding: 12px 14px !important;
}

body.agent-dashboard-body .agent-add-expense-field textarea {
    min-height: 96px !important;
}

body.agent-dashboard-body .agent-add-expense-field input:focus,
body.agent-dashboard-body .agent-add-expense-field textarea:focus,
body.agent-dashboard-body .agent-add-expense-amount:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
    outline: none !important;
}

body.agent-dashboard-body .agent-add-expense-upload {
    min-height: 76px !important;
    padding: 14px !important;
    border: 1.5px dashed #B1D2FF !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.agent-dashboard-body .agent-add-expense-upload__icon {
    width: 40px !important;
    height: 40px !important;
    color: #3366CC !important;
}

body.agent-dashboard-body .agent-add-expense-upload__copy strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
}

body.agent-dashboard-body .agent-add-expense-upload__copy small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-add-expense-error {
    color: #DC2626 !important;
    font-size: 14px !important;
}

body.agent-dashboard-body .agent-add-expense-modal__footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 12px 16px 16px !important;
    background: #fff !important;
    border-top: 1px solid #E8EDF3 !important;
}

body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__cancel,
body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__submit,
body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-add-expense-modal__submit,
body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-btn--navy.agent-add-expense-modal__submit {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font: normal 16px/1 var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__cancel {
    border: 1.5px solid #2563EB !important;
    background: #fff !important;
    color: #2563EB !important;
}

body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__submit,
body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-add-expense-modal__submit,
body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-btn--navy.agent-add-expense-modal__submit {
    border: 1.5px solid #36C !important;
    background: #36C !important;
    color: #fff !important;
}

body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__submit:disabled,
body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-add-expense-modal__submit:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

@media (min-width: 768px) {
    body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__cancel,
    body.agent-dashboard-body .agent-add-expense-modal__footer .agent-add-expense-modal__submit,
    body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-add-expense-modal__submit,
    body.agent-dashboard-body .agent-add-expense-modal__footer .agent-btn.agent-btn--navy.agent-add-expense-modal__submit {
        font-size: 16px !important;
        font: normal 16px/1 var(--sb-font-semibold) !important;
    }
}

@media (min-width: 768px) {
    body.agent-dashboard-body .agent-add-expense-modal__header h2 {
        font-size: 20px !important;
    }

    body.agent-dashboard-body .agent-add-expense-field__label,
    body.agent-dashboard-body .agent-add-expense-chip,
    body.agent-dashboard-body .agent-add-expense-amount,
    body.agent-dashboard-body .agent-add-expense-amount em,
    body.agent-dashboard-body .agent-add-expense-amount input,
    body.agent-dashboard-body .agent-add-expense-field input[type="text"],
    body.agent-dashboard-body .agent-add-expense-field textarea,
    body.agent-dashboard-body .agent-add-expense-upload__copy strong,
    body.agent-dashboard-body .agent-add-expense-modal__cancel,
    body.agent-dashboard-body .agent-add-expense-modal__submit {
        font-size: 16px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__header p,
    body.agent-dashboard-body .agent-add-expense-upload__copy small {
        font-size: 15px !important;
    }
}

@media (max-width: 350px) {
    body.agent-dashboard-body .agent-add-expense-modal {
        padding: 8px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__dialog {
        width: 100% !important;
        border-radius: 16px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__header {
        padding: 16px 12px !important;
        gap: 10px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__header h2 {
        font-size: 16px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__header p,
    body.agent-dashboard-body .agent-add-expense-chip {
        font-size: 14px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__body {
        padding: 12px !important;
        gap: 12px !important;
    }

    body.agent-dashboard-body .agent-add-expense-modal__footer {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    body.agent-dashboard-body .agent-add-expense-chip {
        min-height: 36px !important;
        padding: 6px 12px !important;
    }
}

/* Add Expense labels ? force identical font size */
body.agent-dashboard-body .agent-add-expense-modal .agent-add-expense-field__label,
body.agent-dashboard-body .agent-add-expense-modal span.agent-add-expense-field__label,
body.agent-dashboard-body .agent-add-expense-modal .agent-add-expense-field > span.agent-add-expense-field__label,
body.agent-dashboard-body .agent-add-expense-modal label.agent-add-expense-field > span.agent-add-expense-field__label,
body.agent-dashboard-body .agent-add-expense-modal div.agent-add-expense-field > span.agent-add-expense-field__label {
    display: block !important;
    margin: 0 !important;
    color: #334155 !important;
    font: normal 16px/1.3 var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (max-width: 350px) {
    body.agent-dashboard-body .agent-add-expense-modal .agent-add-expense-field__label,
    body.agent-dashboard-body .agent-add-expense-modal span.agent-add-expense-field__label {
        font-size: 16px !important;
        font: normal 16px/1.3 var(--sb-font-semibold) !important;
    }
}

/* Expenses Today sheet ? portal UI match */
body.agent-dashboard-body .agent-expenses-sheet__dialog {
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    border: 1px solid #E0E8FF !important;
}

body.agent-dashboard-body .agent-expenses-sheet__handle {
    width: 40px !important;
    height: 4px !important;
    margin: 10px auto 0 !important;
    background: #D5DCE6 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px 10px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__header h2 {
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__header p {
    margin: 4px 0 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn,
body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn.agent-btn--navy {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1.5px solid #36C !important;
    border-radius: 10px !important;
    background: #36C !important;
    color: #fff !important;
    font: normal 14px/1 var(--sb-font-semibold) !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.agent-dashboard-body .agent-expenses-sheet__close {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
}

body.agent-dashboard-body .agent-expenses-sheet__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 16px 12px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__chips span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid #D6E4FF !important;
    border-radius: 999px !important;
    background: #EFF7FF !important;
    color: #3366CC !important;
    font: normal 13px/1.2 var(--sb-font-semibold) !important;
    font-size: 13px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__chips .is-warn {
    border-color: #FDE2B5 !important;
    background: #FFF7ED !important;
    color: #B45309 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__body {
    padding: 4px 16px 12px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__list {
    gap: 10px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__list li {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border: 1px solid #E8EDF3 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04) !important;
}

body.agent-dashboard-body .agent-expenses-sheet__list li.is-missing {
    border-color: #FDE2B5 !important;
    background: #FFF8EE !important;
}

body.agent-dashboard-body .agent-expenses-sheet__icon {
    color: #36C !important;
}

body.agent-dashboard-body .agent-expenses-sheet__copy strong,
body.agent-dashboard-body .agent-expenses-sheet__right > strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__copy small {
    margin-top: 3px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 13px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font: normal 12px/1 var(--sb-font-semibold) !important;
    font-size: 12px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__badge.is-ok {
    color: #047857 !important;
    background: #E7F8F1 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__badge.is-warn {
    color: #B45309 !important;
    background: #FFF1D6 !important;
}

body.agent-dashboard-body .agent-expenses-sheet__footer {
    padding: 12px 16px 16px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff !important;
}

body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn,
body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn.agent-btn--navy,
body.agent-dashboard-body .agent-expenses-sheet__footer a.agent-btn,
body.agent-dashboard-body .agent-expenses-sheet__footer span.agent-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border: 1.5px solid #36C !important;
    border-radius: 12px !important;
    background: #36C !important;
    color: #fff !important;
    font: normal 16px/1 var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn.is-disabled,
body.agent-dashboard-body .agent-expenses-sheet__footer span.agent-btn.is-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

@media (min-width: 641px) {
    body.agent-dashboard-body .agent-expenses-sheet__dialog {
        border-radius: 20px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__handle {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    body.agent-dashboard-body .agent-expenses-sheet {
        padding: 24px !important;
        place-items: center !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__dialog {
        width: min(100%, 480px) !important;
        max-width: 480px !important;
        border-radius: 20px !important;
        border: 1px solid #E0E8FF !important;
        box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__add,
    body.agent-dashboard-body .agent-expenses-sheet__add.agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn.agent-btn--navy {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }
}

@media (min-width: 768px) {
    body.agent-dashboard-body .agent-expenses-sheet__header h2 {
        font-size: 22px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn.agent-btn--navy {
        font-size: 14px !important;
        font: normal 14px/1 var(--sb-font-semibold) !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn.agent-btn--navy {
        font-size: 16px !important;
        font: normal 16px/1 var(--sb-font-semibold) !important;
    }
}

@media (max-width: 350px) {
    body.agent-dashboard-body .agent-expenses-sheet__header {
        padding: 12px !important;
        gap: 8px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header h2 {
        font-size: 18px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn.agent-btn--navy {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__chips,
    body.agent-dashboard-body .agent-expenses-sheet__body,
    body.agent-dashboard-body .agent-expenses-sheet__footer {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn.agent-btn--navy {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 15px !important;
    }
}

/* Expenses Today popup ? center like Add Expense modal */
body.agent-dashboard-body .agent-expenses-sheet,
body.agent-dashboard-body .agent-expenses-sheet.is-open {
    place-items: center !important;
    padding: 16px !important;
}

body.agent-dashboard-body .agent-expenses-sheet__dialog {
    width: min(100%, 420px) !important;
    max-height: min(88vh, 720px) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 28px rgba(30, 50, 80, 0.16) !important;
}

body.agent-dashboard-body .agent-expenses-sheet__handle {
    display: none !important;
}

/* Expenses Today ? narrow screens =370px */
@media (max-width: 370px) {
    body.agent-dashboard-body .agent-expenses-sheet,
    body.agent-dashboard-body .agent-expenses-sheet.is-open {
        padding: 10px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__dialog {
        width: 100% !important;
        max-height: min(90vh, 720px) !important;
        border-radius: 18px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 44px 10px 12px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header > div:first-child {
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header h2 {
        font-size: 18px !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header p {
        font-size: 12px !important;
        margin-top: 2px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__header-actions .agent-btn.agent-btn--navy {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font: normal 14px/1 var(--sb-font-semibold) !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 30px !important;
        height: 30px !important;
        z-index: 2 !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__chips {
        padding: 0 12px 10px !important;
        gap: 6px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__chips span {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__body {
        padding: 4px 12px 10px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__list li {
        grid-template-columns: 24px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__copy strong,
    body.agent-dashboard-body .agent-expenses-sheet__right > strong {
        font-size: 14px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__copy small {
        font-size: 12px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__footer {
        padding: 10px 12px 12px !important;
    }

    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn,
    body.agent-dashboard-body .agent-expenses-sheet__footer .agent-btn.agent-btn--navy {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 14px !important;
        font: normal 14px/1 var(--sb-font-semibold) !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
        padding: 8px 12px !important;
    }
}

/* =========================================================
   Money Agent ??? My Outlets (match agent dashboard theme)
   ========================================================= */
body.agent-outlets-body.sales-dashboard-body,
body.agent-outlets-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

.agent-dashboard-ui .agent-outlets-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-outlets-hero {
    padding: 2px 2px 0;
    align-items: center;
}

.agent-dashboard-ui .agent-outlets-hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-outlets-hero p {
    margin: 6px 0 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlets-hero__add,
.agent-dashboard-ui .agent-outlets-hero .agent-btn--navy {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    align-self: flex-start;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-outlets-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-dashboard-ui .agent-outlets-chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-outlets-chips span svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.agent-dashboard-ui .agent-outlets-chips .is-total,
.agent-dashboard-ui .agent-outlets-chips .is-closed {
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-outlets-chips .is-open {
    color: #3366CC;
    background: #EFF7FF;
}

.agent-dashboard-ui .agent-outlets-chips .is-short {
    color: #DC2626;
    background: #FEF1F2;
}

.agent-dashboard-ui .agent-outlets-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.agent-dashboard-ui .agent-outlets-filters button {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.agent-dashboard-ui .agent-outlets-filters button svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.agent-dashboard-ui .agent-outlets-filters button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
}

.agent-dashboard-ui .agent-outlets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-dashboard-ui .agent-outlet-item.agent-card,
.agent-dashboard-ui .agent-outlet-item {
    padding: 16px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-left-width: 4px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

.agent-dashboard-ui .agent-outlet-item.is-danger { border-left-color: #DC2626; }
.agent-dashboard-ui .agent-outlet-item.is-warn { border-left-color: #FF831D; }
.agent-dashboard-ui .agent-outlet-item.is-success { border-left-color: #16A34A; }

.agent-dashboard-ui .agent-outlet-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.agent-dashboard-ui .agent-outlet-item__head strong {
    display: block;
    color: #1e293b;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-outlet-item__head small {
    display: block;
    margin-top: 4px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-item__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-outlet-item.is-danger .agent-outlet-item__badge {
    color: #DC2626;
    background: #FEF1F2;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-outlet-item.is-warn .agent-outlet-item__badge {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-outlet-item.is-success .agent-outlet-item__badge {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-outlet-item__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.agent-dashboard-ui .agent-outlet-item__metrics > div {
    padding: 14px 16px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    box-shadow: none;
}

.agent-dashboard-ui .agent-outlet-item__metrics span {
    display: block;
    margin-bottom: 6px;
    color: #000;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    letter-spacing: 0;
    text-transform: none;
}

.agent-dashboard-ui .agent-outlet-item__metrics strong {
    display: block;
    color: #000;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-outlet-item__metrics i {
    display: block;
    margin-top: 4px;
    font-family: var(--sb-font-semibold);
    font-size: 16px !important;
    font-style: normal;
    color: #DC2626;
}

.agent-dashboard-ui .agent-outlet-item__metrics .is-low {
    background: #fff7ed;
    border-color: #FDE68A;
}

.agent-dashboard-ui .agent-outlet-item__metrics .is-low strong {
    color: #B45309;
}

.agent-dashboard-ui .agent-outlet-item__metrics .is-low i {
    color: #B45309;
}

.agent-dashboard-ui .agent-outlet-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-dashboard-ui .agent-outlet-item__foot p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-item__foot .agent-btn,
.agent-dashboard-ui .agent-outlet-item__foot .agent-btn--danger,
.agent-dashboard-ui .agent-outlet-item__foot .agent-btn--warn,
.agent-dashboard-ui .agent-outlet-item__foot .agent-btn--navy {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
}

.agent-dashboard-ui .agent-outlets-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.agent-dashboard-ui .agent-outlets-empty .agent-empty {
    margin: 0;
    color: #8a94a6;
    font-size: 16px !important;
}

@media (max-width: 420px) {
    .agent-dashboard-ui .agent-outlet-item__metrics {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .agent-dashboard-ui .agent-outlet-item__metrics > div {
        padding: 12px;
    }

    .agent-dashboard-ui .agent-outlet-item__metrics strong {
        font-size: clamp(16px, 5vw, 20px) !important;
    }

    .agent-dashboard-ui .agent-outlet-item__head strong {
        font-size: 18px !important;
    }

    .agent-dashboard-ui .agent-outlet-item__foot {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

    .agent-dashboard-ui .agent-outlet-item__foot p {
        flex: 0 0 auto;
        margin: 0;
    }

    .agent-dashboard-ui .agent-outlet-item__foot .agent-btn {
        width: 100% !important;
        margin: 0;
    }
}

/* =========================================================
   Money Agent ? Outlet Details (match My Outlets / dashboard theme)
   ========================================================= */
body.agent-outlet-details-body.sales-dashboard-body,
body.agent-outlet-details-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

/* Enforce 16px minimum on Outlet Details (labels/meta only; amounts keep larger sizes) */
body.agent-outlet-details-body .agent-outlet-details,
body.agent-outlet-details-body .agent-outlet-details p,
body.agent-outlet-details-body .agent-outlet-details span,
body.agent-outlet-details-body .agent-outlet-details small,
body.agent-outlet-details-body .agent-outlet-details label,
body.agent-outlet-details-body .agent-outlet-details a,
body.agent-outlet-details-body .agent-outlet-details button,
body.agent-outlet-details-body .agent-outlet-details em,
body.agent-outlet-details-body .agent-outlet-details i,
body.agent-outlet-details-body .agent-outlet-details li,
body.agent-outlet-details-body .agent-outlet-details time {
    font-size: max(16px, 1em);
}

.agent-dashboard-ui .agent-outlet-details {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
    font-size: 16px;
}

.agent-dashboard-ui .agent-outlet-details__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #3366CC !important;
    text-decoration: none;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2;
}

.agent-dashboard-ui .agent-outlet-details__back:hover {
    color: #2a56ad !important;
}

.agent-dashboard-ui .agent-outlet-details__hero {
    padding: 2px 2px 0;
    align-items: flex-start;
}

.agent-dashboard-ui .agent-outlet-details__hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-outlet-details__hero p {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-details__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-details__meta em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
}

.agent-dashboard-ui .agent-outlet-details__meta em.is-open {
    color: #3366CC;
    background: #EFF7FF;
}

.agent-dashboard-ui .agent-outlet-details__meta em.is-closed {
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-outlet-details__banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    color: #DC2626;
    background: #FEF1F2;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-outlet-details__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}

.agent-dashboard-ui .agent-outlet-details__actions .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
}

.agent-dashboard-ui .agent-outlet-details__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.agent-dashboard-ui .agent-outlet-details__pills span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-outlet-details__pills .is-total,
.agent-dashboard-ui .agent-outlet-details__pills .is-closed {
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-outlet-details__pills .is-open {
    color: #3366CC;
    background: #EFF7FF;
}

.agent-dashboard-ui .agent-outlet-shortage.agent-card,
.agent-dashboard-ui .agent-outlet-shortage {
    border-color: #FECACA;
    border-top: 4px solid #DC2626;
    background: #FEF1F2;
    box-shadow: none;
}

.agent-dashboard-ui .agent-outlet-shortage__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.agent-dashboard-ui .agent-outlet-shortage__head strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-outlet-shortage__head em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #DC2626;
    background: #fff;
    border: 1px solid #FECACA;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
}

.agent-dashboard-ui .agent-outlet-shortage ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.agent-dashboard-ui .agent-outlet-shortage li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #FECACA;
    color: #DC2626;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-shortage li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-dashboard-ui .agent-outlet-shortage li.is-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #FCA5A5;
    font-family: var(--sb-font-semibold);
}

.agent-dashboard-ui .agent-outlet-shortage .is-down {
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-outlet-shortage__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-dashboard-ui .agent-outlet-shortage__actions .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
}

.agent-dashboard-ui .agent-outlet-movement__rows {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.agent-dashboard-ui .agent-outlet-movement__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 15px;
    background: #F8FAFC;
    border: 1px solid #E0E8FF;
}

.agent-dashboard-ui .agent-outlet-movement__rows span {
    color: #000;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-movement__rows strong {
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-outlet-details .agent-float-grid span {
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-movement__rows .is-up { color: #059669 !important; }
.agent-dashboard-ui .agent-outlet-movement__rows .is-down { color: #DC2626 !important; }
.agent-dashboard-ui .agent-outlet-movement__rows .is-net { color: #2563EB !important; }

.agent-dashboard-ui .agent-outlet-movement > .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
}

.agent-dashboard-ui .agent-outlet-staff {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px 12px;
    align-items: start;
    padding: 4px 0 8px;
}

.agent-dashboard-ui .agent-outlet-staff + .agent-outlet-staff {
    border-top: 1px solid #e8edf3;
    padding-top: 14px;
    margin-top: 6px;
}

.agent-dashboard-ui .agent-outlet-staff__copy strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #1e293b;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-outlet-staff__copy small {
    display: block;
    margin-top: 4px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-staff__copy em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
}

.agent-dashboard-ui .agent-outlet-staff__copy em.is-danger {
    color: #DC2626;
    background: #FEF1F2;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-outlet-staff__copy em.is-warn {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-outlet-staff__copy em.is-success {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-outlet-staff__copy em.is-muted {
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-outlet-staff__actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.agent-dashboard-ui .agent-outlet-staff__actions .agent-btn--call,
.agent-dashboard-ui .agent-outlet-staff__actions .agent-btn--whatsapp {
    min-width: 0 !important;
    width: auto !important;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-staff__actions .agent-btn--call {
    color: #2563EB !important;
    border: 1.5px solid #2563EB !important;
    background: #fff !important;
}

.agent-dashboard-ui .agent-outlet-staff__actions .agent-btn--whatsapp {
    color: #fff !important;
    border: 0 !important;
    background: #16A34A !important;
}

.agent-dashboard-ui .agent-outlet-staff__link {
    color: #3366CC !important;
    text-decoration: none;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-outlet-details .agent-timeline small {
    display: block;
    margin-top: 4px;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-outlet-details .agent-empty {
    margin: 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

@media (min-width: 640px) {
    .agent-dashboard-ui .agent-outlet-staff {
        grid-template-columns: 42px 1fr auto;
        align-items: center;
    }

    .agent-dashboard-ui .agent-outlet-staff__actions {
        grid-column: auto;
        justify-content: flex-end;
    }
}

@media (max-width: 380px) {
    .agent-dashboard-ui .agent-outlet-details__actions,
    .agent-dashboard-ui .agent-outlet-shortage__actions {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-outlet-movement__rows > div {
        padding: 12px 10px;
    }

    .agent-dashboard-ui .agent-outlet-movement__rows strong {
        font-size: clamp(16px, 5vw, 18px) !important;
    }

    .agent-dashboard-ui .agent-outlet-details__hero h1 {
        font-size: 22px !important;
    }
}

/* =========================================================
   Money Agent ? Cash Movement (match Outlet Details theme)
   ========================================================= */
body.agent-cash-body.sales-dashboard-body,
body.agent-cash-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

body.agent-cash-body .agent-cash-page,
body.agent-cash-body .agent-cash-page p,
body.agent-cash-body .agent-cash-page span,
body.agent-cash-body .agent-cash-page small,
body.agent-cash-body .agent-cash-page label,
body.agent-cash-body .agent-cash-page a,
body.agent-cash-body .agent-cash-page button,
body.agent-cash-body .agent-cash-page em,
body.agent-cash-body .agent-cash-page i,
body.agent-cash-body .agent-cash-page li,
body.agent-cash-body .agent-cash-page time {
    font-size: max(14px, 1em);
}

.agent-dashboard-ui .agent-cash-page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

.agent-dashboard-ui .agent-cash-hero {
    padding: 2px 2px 0;
    align-items: flex-start;
}

.agent-dashboard-ui .agent-cash-hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-cash-hero p {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-cash-date-btn.agent-btn,
.agent-dashboard-ui .agent-cash-date-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 14px !important;
    gap: 8px;
    white-space: nowrap;
    align-self: flex-start;
}

.agent-dashboard-ui .agent-cash-panel {
    gap: 15px;
}

.agent-dashboard-ui .agent-cash-loader {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.08);
    color: #222222;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-cash-loader i {
    border-color: rgba(51, 102, 204, 0.2);
    border-top-color: #3366CC;
}

.agent-dashboard-ui .agent-cash-kpis.agent-card,
.agent-dashboard-ui .agent-cash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 16px !important;
}

.agent-dashboard-ui .agent-cash-kpis article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    text-align: left;
    box-shadow: none;
}

.agent-dashboard-ui .agent-cash-kpis span {
    margin: 0;
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 3.4vw, 16px) !important;
    letter-spacing: 0;
    text-transform: none;
}

.agent-dashboard-ui .agent-cash-kpis strong {
    display: block;
    color: #000;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(14px, 3.8vw, 20px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-cash-kpis .is-up,
.agent-dashboard-ui .agent-cash-list .is-up,
.agent-dashboard-ui .agent-cash-day-summary .is-up {
    color: #059669 !important;
}

.agent-dashboard-ui .agent-cash-kpis .is-down,
.agent-dashboard-ui .agent-cash-list .is-down,
.agent-dashboard-ui .agent-cash-day-summary .is-down {
    color: #DC2626 !important;
}

.agent-dashboard-ui .agent-cash-kpis .is-net,
.agent-dashboard-ui .agent-cash-day-summary .is-net {
    color: #2563EB !important;
}

.agent-dashboard-ui .agent-cash-day-summary .is-handover {
    color: #FF831D !important;
}

.agent-dashboard-ui .agent-cash-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 2px;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.agent-dashboard-ui .agent-cash-tabs button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    box-shadow: none;
}

.agent-dashboard-ui .agent-cash-tabs button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-cash-chart {
    min-height: 170px;
    padding-top: 4px;
    gap: 12px;
}

.agent-dashboard-ui .agent-cash-chart__col strong {
    color: #64748b;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-cash-chart__col i {
    width: 44px;
    border-radius: 12px 12px 6px 6px;
}

.agent-dashboard-ui .agent-cash-chart__col i.is-deposit { background: #16A34A; }
.agent-dashboard-ui .agent-cash-chart__col i.is-withdrawal { background: #DC2626; }
.agent-dashboard-ui .agent-cash-chart__col i.is-handover { background: #FF831D; }

.agent-dashboard-ui .agent-cash-chart__col span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-cash-list li {
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid #e8edf3;
}

.agent-dashboard-ui .agent-cash-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-dashboard-ui .agent-cash-list li.is-empty {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    padding: 18px 0;
}

.agent-dashboard-ui .agent-cash-list time {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-cash-badge {
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-cash-badge.is-deposit {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-cash-badge.is-withdrawal {
    color: #DC2626;
    background: #FEF1F2;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-cash-badge.is-handover,
.agent-dashboard-ui .agent-cash-badge.is-transfer {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-cash-list__copy strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-cash-list em {
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal;
}

.agent-dashboard-ui .agent-cash-tracker__flow {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.agent-dashboard-ui .agent-cash-tracker__flow > div {
    flex: 1 1 0;
    min-width: 96px;
    min-height: 78px;
    padding: 12px 10px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-cash-tracker__flow strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-cash-tracker__flow span {
    margin-top: 4px;
    min-height: 2.4em;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.agent-dashboard-ui .agent-cash-tracker__flow > i {
    flex: 0 0 auto;
    align-self: center;
    color: #c5cede;
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-cash-filters {
    gap: 12px;
}

.agent-dashboard-ui .agent-cash-filters__periods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-dashboard-ui .agent-cash-filters__periods button {
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.agent-dashboard-ui .agent-cash-filters__periods button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
}

.agent-dashboard-ui .agent-cash-export.agent-btn,
.agent-dashboard-ui .agent-cash-export {
    border-radius: 10px !important;
    gap: 7px;
}

.agent-dashboard-ui .agent-cash-export.is-disabled,
.agent-dashboard-ui .agent-cash-export[aria-disabled="true"] {
    opacity: 0.55;
}

.agent-dashboard-ui .agent-cash-day-summary__grid {
    gap: 10px;
}

.agent-dashboard-ui .agent-cash-day-summary__grid > div {
    padding: 14px 16px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
}

.agent-dashboard-ui .agent-cash-day-summary__grid span {
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 3.4vw, 16px) !important;
}

.agent-dashboard-ui .agent-cash-day-summary__grid strong {
    margin-top: 6px;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-cash-range,
body.agent-cash-body .agent-cash-range {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.4);
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-cash-range.is-open,
body.agent-cash-body .agent-cash-range.is-open {
    display: grid;
}

.agent-dashboard-ui .agent-cash-range__backdrop,
body.agent-cash-body .agent-cash-range__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.agent-dashboard-ui .agent-cash-range__card,
body.agent-cash-body .agent-cash-range__card {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    max-width: 400px;
    margin: 0;
    padding: 0;
    border: 1px solid #E0E8FF;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.agent-dashboard-ui .agent-cash-range__header,
body.agent-cash-body .agent-cash-range__header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    background: #3366CC;
}

.agent-dashboard-ui .agent-cash-range__icon,
body.agent-cash-body .agent-cash-range__icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.agent-dashboard-ui .agent-cash-range__header h2,
body.agent-cash-body .agent-cash-range__header h2 {
    margin: 0;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

.agent-dashboard-ui .agent-cash-range__header p,
body.agent-cash-body .agent-cash-range__header p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-cash-range__close,
body.agent-cash-body .agent-cash-range__close {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.agent-dashboard-ui .agent-cash-range__body,
body.agent-cash-body .agent-cash-range__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #F8FAFC;
}

.agent-dashboard-ui .agent-cash-range__field,
body.agent-cash-body .agent-cash-range__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.agent-dashboard-ui .agent-cash-range__field > span,
body.agent-cash-body .agent-cash-range__field > span,
body.agent-efloat-body .agent-cash-range__field > span {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    .agent-dashboard-ui .agent-cash-range__field > span,
    body.agent-cash-body .agent-cash-range__field > span,
    body.agent-efloat-body .agent-cash-range__field > span {
        font-size: 18px !important;
    }
}

.agent-dashboard-ui .agent-cash-range__input,
body.agent-cash-body .agent-cash-range__input {
    position: relative;
    width: 100%;
}

.agent-dashboard-ui .agent-cash-range__input input,
body.agent-cash-body .agent-cash-range__input input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #222222;
    font-family: var(--sb-font-regular) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 1.2;
}

.agent-dashboard-ui .agent-cash-range__input input:focus,
body.agent-cash-body .agent-cash-range__input input:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.agent-dashboard-ui .agent-cash-range__footer,
body.agent-cash-body .agent-cash-range__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #E8EDF3;
}

.agent-dashboard-ui .agent-cash-range__footer .agent-btn,
body.agent-cash-body .agent-cash-range__footer .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
}

@media (max-width: 420px) {
    .agent-dashboard-ui .agent-cash-kpis.agent-card,
    .agent-dashboard-ui .agent-cash-kpis {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-cash-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .agent-dashboard-ui .agent-cash-date-btn.agent-btn,
    .agent-dashboard-ui .agent-cash-date-btn {
        width: 100% !important;
    }

    .agent-dashboard-ui .agent-cash-hero h1 {
        font-size: 20px !important;
    }

    .agent-dashboard-ui .agent-cash-list li {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "time amount"
            "badge badge"
            "copy copy";
    }

    .agent-dashboard-ui .agent-cash-list time { grid-area: time; }
    .agent-dashboard-ui .agent-cash-badge { grid-area: badge; justify-self: start; }
    .agent-dashboard-ui .agent-cash-list__copy { grid-area: copy; }
    .agent-dashboard-ui .agent-cash-list em { grid-area: amount; justify-self: end; }
}

@media (max-width: 400px) {
    .agent-dashboard-ui .agent-cash-filters {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .agent-dashboard-ui .agent-cash-filters__periods {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .agent-dashboard-ui .agent-cash-filters__periods button {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: 0 10px;
        white-space: nowrap;
    }

    .agent-dashboard-ui .agent-cash-export.agent-btn,
    .agent-dashboard-ui .agent-cash-export {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .agent-dashboard-ui .agent-cash-day-summary__grid {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-cash-tracker__flow > div {
        min-width: 84px;
        min-height: 72px;
        padding: 10px 8px;
    }

    .agent-dashboard-ui .agent-cash-range,
    body.agent-cash-body .agent-cash-range {
        padding: 12px;
        align-items: center;
    }

    .agent-dashboard-ui .agent-cash-range__card,
    body.agent-cash-body .agent-cash-range__card {
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
    }

    .agent-dashboard-ui .agent-cash-range__header,
    body.agent-cash-body .agent-cash-range__header {
        padding: 12px;
        gap: 10px;
    }

    .agent-dashboard-ui .agent-cash-range__header h2,
    body.agent-cash-body .agent-cash-range__header h2 {
        font-size: 16px !important;
    }

    .agent-dashboard-ui .agent-cash-range__header p,
    body.agent-cash-body .agent-cash-range__header p {
        font-size: 13px !important;
    }

    .agent-dashboard-ui .agent-cash-range__body,
    body.agent-cash-body .agent-cash-range__body {
        padding: 12px;
        gap: 12px;
    }

    .agent-dashboard-ui .agent-cash-range__footer,
    body.agent-cash-body .agent-cash-range__footer {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

/* =========================================================
   Money Agent ? E-Float Movement (match Cash Movement theme)
   ========================================================= */

body.agent-efloat-body.sales-dashboard-body,
body.agent-efloat-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

/* Min font size 16px across page + popups (:where keeps heading overrides intact) */
body.agent-efloat-body,
body.agent-efloat-body .agent-efloat-page,
body.agent-efloat-body .agent-efloat-modal,
body.agent-efloat-body .agent-cash-range,
body.agent-efloat-body .agent-efloat-download-overlay {
    font-size: 16px;
}

body.agent-efloat-body .agent-efloat-page :where(p, span, small, label, a, button, em, i, li, time, dt, dd, strong, b, input, select, textarea, legend, h1, h2, h3, h4),
body.agent-efloat-body .agent-efloat-modal :where(p, span, small, label, a, button, em, i, li, time, dt, dd, strong, b, input, select, textarea, legend, h1, h2, h3, h4),
body.agent-efloat-body .agent-cash-range :where(p, span, small, label, a, button, em, i, li, time, dt, dd, strong, b, input, select, textarea, legend, h1, h2, h3, h4),
body.agent-efloat-body .agent-efloat-download-overlay :where(p, span, small, label, a, button, em, i, li, time, dt, dd, strong, b, input, select, textarea, legend, h1, h2, h3, h4),
body.agent-efloat-body .sbo-bottom-nav :where(a, span, small, button),
body.agent-efloat-body .agent-bottom-nav :where(a, span, small, button) {
    font-size: max(16px, 1em) !important;
}

/* Keep primary buttons at cash theme size (16px / 18px desktop) */
body.agent-efloat-body .agent-btn,
body.agent-efloat-body .agent-efloat-actions .agent-btn,
body.agent-efloat-body .agent-efloat-modal__footer .agent-btn,
body.agent-efloat-body .agent-cash-range__footer .agent-btn,
body.agent-efloat-body .agent-efloat-compliance__cta {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.agent-efloat-body .agent-btn,
    body.agent-efloat-body .agent-efloat-actions .agent-btn,
    body.agent-efloat-body .agent-efloat-modal__footer .agent-btn,
    body.agent-efloat-body .agent-cash-range__footer .agent-btn,
    body.agent-efloat-body .agent-efloat-compliance__cta {
        font-size: 18px !important;
    }
}

.agent-dashboard-ui .agent-efloat-page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
    font-size: 16px;
}

.agent-dashboard-ui .agent-efloat-hero {
    padding: 2px 2px 0;
    align-items: flex-start;
}

.agent-dashboard-ui .agent-efloat-hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-efloat-hero p {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-panel {
    gap: 15px;
}

.agent-dashboard-ui .agent-efloat-loader {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.08);
    color: #222222;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-loader i {
    border-color: rgba(51, 102, 204, 0.2);
    border-top-color: #3366CC;
}

/* Compliance card ? match other agent page section titles + 14px body min */
body.agent-efloat-body .agent-efloat-compliance,
.agent-dashboard-ui .agent-efloat-compliance {
    padding: 16px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 22px;
    background: #fff !important;
    color: #222222;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

body.agent-efloat-body .agent-efloat-compliance__head,
.agent-dashboard-ui .agent-efloat-compliance__head {
    margin-bottom: 14px;
}

/* Same scale as .agent-card__eyebrow (Transactions / Daily Summary) */
body.agent-efloat-body .agent-efloat-compliance__head strong,
body.agent-efloat-body .agent-efloat-checklist > strong,
.agent-dashboard-ui .agent-efloat-compliance__head strong,
.agent-dashboard-ui .agent-efloat-checklist > strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    body.agent-efloat-body .agent-efloat-compliance__head strong,
    body.agent-efloat-body .agent-efloat-checklist > strong,
    .agent-dashboard-ui .agent-efloat-compliance__head strong,
    .agent-dashboard-ui .agent-efloat-checklist > strong {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    body.agent-efloat-body .agent-efloat-compliance__head strong,
    body.agent-efloat-body .agent-efloat-checklist > strong,
    .agent-dashboard-ui .agent-efloat-compliance__head strong,
    .agent-dashboard-ui .agent-efloat-checklist > strong {
        font-size: 22px !important;
    }
}

body.agent-efloat-body .agent-efloat-compliance__head span,
body.agent-efloat-body .agent-efloat-compliance__badge,
body.agent-efloat-body .agent-efloat-metrics span,
body.agent-efloat-body .agent-efloat-metrics small,
body.agent-efloat-body .agent-efloat-checklist__progress > span,
body.agent-efloat-body .agent-efloat-compliance__foot > span,
.agent-dashboard-ui .agent-efloat-compliance__head span,
.agent-dashboard-ui .agent-efloat-compliance__badge,
.agent-dashboard-ui .agent-efloat-metrics span,
.agent-dashboard-ui .agent-efloat-metrics small,
.agent-dashboard-ui .agent-efloat-checklist__progress > span,
.agent-dashboard-ui .agent-efloat-compliance__foot > span {
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.agent-efloat-body .agent-efloat-checklist li,
body.agent-efloat-body .agent-efloat-checklist li span,
.agent-dashboard-ui .agent-efloat-checklist li,
.agent-dashboard-ui .agent-efloat-checklist li span {
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.agent-efloat-body .agent-efloat-compliance__head span,
.agent-dashboard-ui .agent-efloat-compliance__head span {
    margin-top: 4px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
}

body.agent-efloat-body .agent-efloat-compliance__badge,
.agent-dashboard-ui .agent-efloat-compliance__badge {
    padding: 6px 12px;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    background: #fff7ed;
    color: #B45309 !important;
    font-family: var(--sb-font-semibold) !important;
    letter-spacing: 0;
}

body.agent-efloat-body .agent-efloat-metrics,
.agent-dashboard-ui .agent-efloat-metrics {
    gap: 10px;
    margin-bottom: 14px;
}

body.agent-efloat-body .agent-efloat-metrics article,
.agent-dashboard-ui .agent-efloat-metrics article {
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    text-align: left;
}

body.agent-efloat-body .agent-efloat-metrics i,
.agent-dashboard-ui .agent-efloat-metrics i {
    width: 32px;
    height: 32px;
    margin: 0 0 8px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #3366CC;
    font-size: 14px !important;
}

body.agent-efloat-body .agent-efloat-metrics strong,
.agent-dashboard-ui .agent-efloat-metrics strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 3.8vw, 20px) !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
}

body.agent-efloat-body .agent-efloat-metrics span,
.agent-dashboard-ui .agent-efloat-metrics span {
    margin-top: 4px;
    color: #000 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
}

body.agent-efloat-body .agent-efloat-metrics small,
.agent-dashboard-ui .agent-efloat-metrics small {
    margin-top: 4px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
}

body.agent-efloat-body .agent-efloat-checklist,
.agent-dashboard-ui .agent-efloat-checklist {
    padding: 14px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
}

body.agent-efloat-body .agent-efloat-checklist > strong,
.agent-dashboard-ui .agent-efloat-checklist > strong {
    display: block;
    margin-bottom: 10px;
}

body.agent-efloat-body .agent-efloat-checklist li,
.agent-dashboard-ui .agent-efloat-checklist li {
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
}

body.agent-efloat-body .agent-efloat-checklist li i,
.agent-dashboard-ui .agent-efloat-checklist li i {
    border-color: #E0E8FF;
    background: #fff;
    font-size: 14px !important;
    color: transparent;
}

body.agent-efloat-body .agent-efloat-checklist li.is-done i,
.agent-dashboard-ui .agent-efloat-checklist li.is-done i {
    border-color: #16A34A;
    background: #16A34A;
    color: #fff !important;
}

body.agent-efloat-body .agent-efloat-checklist__progress > span,
.agent-dashboard-ui .agent-efloat-checklist__progress > span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
}

body.agent-efloat-body .agent-efloat-checklist__bar,
.agent-dashboard-ui .agent-efloat-checklist__bar {
    background: #E0E8FF;
}

body.agent-efloat-body .agent-efloat-checklist__bar i,
.agent-dashboard-ui .agent-efloat-checklist__bar i {
    background: #3366CC;
}

body.agent-efloat-body .agent-efloat-compliance__foot > span,
.agent-dashboard-ui .agent-efloat-compliance__foot > span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
}

body.agent-efloat-body .agent-efloat-compliance__cta,
.agent-dashboard-ui .agent-efloat-compliance__cta {
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid #2563EB;
    border-radius: 10px;
    background: #fff;
    color: #2563EB !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* KPIs */
.agent-dashboard-ui .agent-efloat-kpis.agent-card,
.agent-dashboard-ui .agent-efloat-kpis {
    padding: 16px !important;
}

.agent-dashboard-ui .agent-efloat-kpis__grid {
    gap: 10px;
}

.agent-dashboard-ui .agent-efloat-kpis__grid article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    text-align: left;
    box-shadow: none;
}

.agent-dashboard-ui .agent-efloat-kpis__grid article.is-in,
.agent-dashboard-ui .agent-efloat-kpis__grid article.is-out {
    background: #F8FAFC;
}

.agent-dashboard-ui .agent-efloat-kpis__grid strong {
    color: #000;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 3.8vw, 20px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-efloat-kpis__grid .is-in strong { color: #059669 !important; }
.agent-dashboard-ui .agent-efloat-kpis__grid .is-out strong { color: #DC2626 !important; }

.agent-dashboard-ui .agent-efloat-kpis__grid span {
    margin: 0;
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-balances {
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e8edf3;
}

.agent-dashboard-ui .agent-efloat-balances > div {
    padding: 14px 16px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
}

.agent-dashboard-ui .agent-efloat-balances span {
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    text-transform: none;
    letter-spacing: 0;
}

.agent-dashboard-ui .agent-efloat-balances strong {
    margin-top: 6px;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-balances .is-current {
    color: #2563EB !important;
}

/* Alert */
.agent-dashboard-ui .agent-efloat-alert {
    padding: 14px 16px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    border-radius: 15px;
    background: #FEF1F2;
    box-shadow: none;
}

.agent-dashboard-ui .agent-efloat-alert strong {
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-alert p {
    color: #991B1B !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

/* Actions */
.agent-dashboard-ui .agent-efloat-actions {
    gap: 10px;
}

.agent-dashboard-ui .agent-efloat-actions .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    gap: 7px;
}

.agent-dashboard-ui .agent-efloat-actions__record,
.agent-dashboard-ui .agent-efloat-actions__export {
    border-color: #2563EB !important;
    color: #2563EB !important;
}

/* Tabs ? pill style like cash */
.agent-dashboard-ui .agent-efloat-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0;
    padding: 0 0 2px;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.agent-dashboard-ui .agent-efloat-tabs button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid #E0E8FF;
    border-bottom: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    box-shadow: none;
}

.agent-dashboard-ui .agent-efloat-tabs button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
    box-shadow: none;
}

/* Chart */
.agent-dashboard-ui .agent-efloat-chart-card {
    padding: 16px !important;
    border-radius: 22px !important;
}

.agent-dashboard-ui .agent-efloat-chart-card__head {
    margin-bottom: 8px;
}

.agent-dashboard-ui .agent-efloat-chart-card__head .agent-card__eyebrow,
.agent-dashboard-ui .agent-efloat-list-card > .agent-card__eyebrow,
.agent-dashboard-ui .agent-efloat-trail-card > .agent-card__eyebrow,
.agent-dashboard-ui .agent-efloat-summary__head .agent-card__eyebrow {
    margin: 0 0 12px;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
    .agent-dashboard-ui .agent-efloat-chart-card__head .agent-card__eyebrow,
    .agent-dashboard-ui .agent-efloat-list-card > .agent-card__eyebrow,
    .agent-dashboard-ui .agent-efloat-trail-card > .agent-card__eyebrow,
    .agent-dashboard-ui .agent-efloat-summary__head .agent-card__eyebrow {
        font-size: 20px !important;
    }
}

@media (min-width: 1366px) {
    .agent-dashboard-ui .agent-efloat-chart-card__head .agent-card__eyebrow,
    .agent-dashboard-ui .agent-efloat-list-card > .agent-card__eyebrow,
    .agent-dashboard-ui .agent-efloat-trail-card > .agent-card__eyebrow,
    .agent-dashboard-ui .agent-efloat-summary__head .agent-card__eyebrow {
        font-size: 22px !important;
    }
}

.agent-dashboard-ui .agent-efloat-chart__line {
    stroke: #3366CC;
}

.agent-dashboard-ui .agent-efloat-chart__dot {
    background: #3366CC;
    box-shadow: 0 1px 4px rgba(51, 102, 204, 0.25);
}

.agent-dashboard-ui .agent-efloat-chart__labels span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-chart__threshold-tag {
    color: #B45309;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* List */
.agent-dashboard-ui .agent-efloat-list-card {
    padding: 16px !important;
}

.agent-dashboard-ui .agent-efloat-list li {
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid #e8edf3;
    border-radius: 0;
}

.agent-dashboard-ui .agent-efloat-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-dashboard-ui .agent-efloat-list li:not(.is-empty):hover {
    background: transparent;
}

.agent-dashboard-ui .agent-efloat-list li.is-empty {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    padding: 18px 0;
    text-align: left;
}

.agent-dashboard-ui .agent-efloat-list time {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-badge {
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-efloat-badge.is-topup {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-efloat-badge.is-withdrawal {
    color: #DC2626;
    background: #FEF1F2;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-efloat-badge.is-transfer {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-efloat-list__copy strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-efloat-list__copy small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-list em {
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
}

.agent-dashboard-ui .agent-efloat-list .is-up,
.agent-dashboard-ui .agent-efloat-summary .is-up {
    color: #059669 !important;
}

.agent-dashboard-ui .agent-efloat-list .is-down,
.agent-dashboard-ui .agent-efloat-summary .is-down {
    color: #DC2626 !important;
}

/* Trail */
.agent-dashboard-ui .agent-efloat-trail-card {
    padding: 16px !important;
}

.agent-dashboard-ui .agent-efloat-trail__node {
    min-width: 96px;
    min-height: 78px;
    padding: 12px 10px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    opacity: 1;
    transform: none;
    animation: none;
}

.agent-dashboard-ui .agent-efloat-trail__dot {
    margin: 0 auto 8px;
    box-shadow: none;
    background: #3366CC;
}

.agent-dashboard-ui .agent-efloat-trail__node.is-open .agent-efloat-trail__dot,
.agent-dashboard-ui .agent-efloat-trail__node.is-open strong {
    color: #222222 !important;
}

.agent-dashboard-ui .agent-efloat-trail__node.is-open .agent-efloat-trail__dot {
    background: #3366CC;
}

.agent-dashboard-ui .agent-efloat-trail__node strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-trail__node span {
    min-height: 2.4em;
    margin-top: 4px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent-dashboard-ui .agent-efloat-trail__arrow {
    color: #c5cede;
    font-size: 16px !important;
    opacity: 1;
    animation: none;
    margin-top: 0;
}

/* Summary */
.agent-dashboard-ui .agent-efloat-summary {
    padding: 16px !important;
    border: 1px solid rgba(232, 237, 243, 0.9) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05) !important;
}

.agent-dashboard-ui .agent-efloat-summary__head .agent-card__eyebrow {
    margin: 0;
}

.agent-dashboard-ui .agent-efloat-summary__date {
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #E0E8FF;
    border-radius: 999px;
    background: #F8FAFC;
    color: #64748b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-summary dl > div {
    padding: 12px 0;
    border-top: 1px solid #e8edf3;
}

.agent-dashboard-ui .agent-efloat-summary dl > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-dashboard-ui .agent-efloat-summary dl > div.is-divider {
    padding: 0;
    border-top: 1px solid #e8edf3;
}

.agent-dashboard-ui .agent-efloat-summary dt {
    color: #000 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-summary .is-closing dt {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-summary dd {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-summary dd.is-current,
.agent-dashboard-ui .agent-efloat-summary .is-current {
    color: #2563EB !important;
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-summary__note {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    gap: 12px;
}

.agent-dashboard-ui .agent-efloat-summary__note p {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-summary__note strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-summary__export.agent-btn,
.agent-dashboard-ui .agent-efloat-summary__export {
    flex-shrink: 0;
    min-width: 0 !important;
    border-radius: 10px !important;
    gap: 7px;
}

/* E-Float modals — match dashboard Add Expense popup */
body.agent-efloat-body .agent-efloat-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    display: none !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 16px !important;
    background: rgba(15, 23, 42, 0.4) !important;
    box-sizing: border-box !important;
}

body.agent-efloat-body .agent-efloat-modal.is-open {
    display: grid !important;
}

body.agent-efloat-body .agent-efloat-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

body.agent-efloat-body .agent-efloat-modal__dialog {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    max-height: min(88vh, 780px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.agent-efloat-body .agent-efloat-modal__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #3366CC !important;
    box-sizing: border-box !important;
}

body.agent-efloat-body .agent-efloat-modal__header > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.agent-efloat-body .agent-efloat-modal__icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
}

body.agent-efloat-body .agent-efloat-modal__header h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

body.agent-efloat-body .agent-efloat-modal__header p {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}

body.agent-efloat-body .agent-efloat-modal__header em {
    color: #fff !important;
    font-style: normal !important;
    font-family: var(--sb-font-semibold) !important;
}

body.agent-efloat-body .agent-efloat-modal__close {
    width: 36px !important;
    height: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    padding: 0 !important;
    font-size: 0 !important;
    flex: 0 0 36px !important;
    margin: 0 0 0 auto !important;
}

body.agent-efloat-body .agent-efloat-modal__form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
}

body.agent-efloat-body .agent-efloat-modal__fields,
body.agent-efloat-body .agent-efloat-modal__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
    background: #F8FAFC !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

body.agent-efloat-body .agent-efloat-modal__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.agent-efloat-body .agent-efloat-modal__field > span,
body.agent-efloat-body .agent-efloat-modal__label {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.agent-efloat-body .agent-efloat-modal__form input[type="number"],
body.agent-efloat-body .agent-efloat-modal__form input[type="text"],
body.agent-efloat-body .agent-efloat-modal__form textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

body.agent-efloat-body .agent-efloat-modal__form input::placeholder,
body.agent-efloat-body .agent-efloat-modal__form textarea::placeholder {
    color: #94a3b8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}

body.agent-efloat-body .agent-efloat-modal__form textarea {
    min-height: 96px !important;
    height: auto !important;
    padding: 12px 14px !important;
    resize: vertical !important;
}

body.agent-efloat-body .agent-efloat-modal__form input:focus,
body.agent-efloat-body .agent-efloat-modal__form textarea:focus {
    outline: none !important;
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.agent-efloat-body .agent-efloat-modal__info {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.agent-efloat-body .agent-efloat-modal__info p {
    margin: 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

body.agent-efloat-body .agent-efloat-modal__info strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.agent-efloat-body .agent-efloat-modal__footer,
body.agent-efloat-body .agent-efloat-modal__footer-static {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
    margin: 0 !important;
    background: #fff !important;
    border-top: 1px solid #E8EDF3 !important;
}

body.agent-efloat-body .agent-efloat-modal__footer .agent-btn,
body.agent-efloat-body .agent-efloat-modal__footer-static .agent-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
}

body.agent-efloat-body .agent-efloat-modal__footer .agent-btn--outline,
body.agent-efloat-body .agent-efloat-modal__footer-static .agent-btn--outline,
body.agent-efloat-body .agent-efloat-modal__cancel {
    color: #2563EB !important;
    border: 1.5px solid #2563EB !important;
    background: #fff !important;
}

body.agent-efloat-body .agent-efloat-modal__footer .agent-btn--navy,
body.agent-efloat-body .agent-efloat-modal__footer-static .agent-btn--navy,
body.agent-efloat-body .agent-efloat-modal__submit {
    color: #fff !important;
    background: #3366CC !important;
    border: 1.5px solid #3366CC !important;
}

/* Amount field — same pattern as dashboard Add Expense */
body.agent-efloat-body .agent-efloat-amount {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

body.agent-efloat-body .agent-efloat-amount em {
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-style: normal !important;
    flex: 0 0 auto !important;
}

body.agent-efloat-body .agent-efloat-amount input,
body.agent-efloat-body .agent-efloat-modal__form .agent-efloat-amount input[type="number"] {
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    color: #1e293b !important;
}

body.agent-efloat-body .agent-efloat-amount:focus-within {
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.agent-efloat-body .agent-efloat-modal__cancel,
body.agent-efloat-body .agent-efloat-modal__submit {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
}

/* Top-up modal — exact dashboard Add Expense header rhythm */
body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__header {
    padding: 16px !important;
    gap: 12px !important;
}

body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
}

body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__close {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
}

body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__header h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__header p {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Type chips — match dashboard expense chip rhythm */
body.agent-efloat-body .agent-efloat-type-toggle {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
}

body.agent-efloat-body .agent-efloat-type-toggle label {
    box-sizing: border-box !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    margin: 0 !important;
}

body.agent-efloat-body .agent-efloat-type-toggle label input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.agent-efloat-body .agent-efloat-type-toggle label.is-active.is-withdrawal {
    border-color: #FECACA !important;
    background: #FEF1F2 !important;
    color: #DC2626 !important;
    font-family: var(--sb-font-semibold) !important;
}

body.agent-efloat-body .agent-efloat-type-toggle label.is-active.is-topup {
    border-color: #BBF7D0 !important;
    background: #ecfdf3 !important;
    color: #15803d !important;
    font-family: var(--sb-font-semibold) !important;
}

/* Record modal — same header rhythm as dashboard Add Expense */
body.agent-efloat-body #agent-efloat-record-modal .agent-efloat-modal__header {
    padding: 16px !important;
    gap: 12px !important;
}

body.agent-efloat-body #agent-efloat-record-modal .agent-efloat-modal__icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
}

body.agent-efloat-body #agent-efloat-record-modal .agent-efloat-modal__close {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
}

body.agent-efloat-body #agent-efloat-record-modal .agent-efloat-modal__header h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.agent-efloat-body #agent-efloat-record-modal .agent-efloat-modal__header p {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.agent-efloat-body .agent-efloat-modal__footer .agent-btn {
    font-size: 16px !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    body.agent-efloat-body .agent-efloat-modal__footer .agent-btn {
        font-size: 18px !important;
    }
}

/* Export format chips — match dashboard expense chips */
body.agent-efloat-body .agent-efloat-format {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

.agent-dashboard-ui .agent-efloat-format button,
body.agent-efloat-body .agent-efloat-format button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.agent-dashboard-ui .agent-efloat-format button.is-active,
body.agent-efloat-body .agent-efloat-format button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
}

.agent-dashboard-ui .agent-efloat-includes,
body.agent-efloat-body .agent-efloat-includes {
    padding: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.agent-dashboard-ui .agent-efloat-includes > strong,
body.agent-efloat-body .agent-efloat-includes > strong,
body.agent-efloat-body .agent-efloat-modal__label,
body.agent-efloat-body .agent-efloat-modal__field > .agent-efloat-modal__label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

.agent-dashboard-ui .agent-efloat-includes ul,
body.agent-efloat-body .agent-efloat-includes ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.agent-dashboard-ui .agent-efloat-includes li,
body.agent-efloat-body .agent-efloat-includes li {
    position: relative !important;
    padding: 6px 0 6px 26px !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

body.agent-efloat-body .agent-efloat-includes li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #16A34A !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
}

/* Export modal — same header rhythm as dashboard Add Expense */
body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-modal__header {
    padding: 16px !important;
    gap: 12px !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-modal__icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-modal__close {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-modal__header h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-modal__header p {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-modal__submit,
body.agent-efloat-body #agent-efloat-export-modal a.agent-efloat-modal__submit {
    text-decoration: none !important;
    gap: 8px !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-download__idle,
body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-download__busy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-download__idle em,
body.agent-efloat-body #agent-efloat-export-modal .agent-efloat-download__busy em {
    font-style: normal !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    color: inherit !important;
}

.agent-dashboard-ui .agent-efloat-download-overlay__card,
body.agent-efloat-body .agent-efloat-download-overlay__card {
    border: 1px solid #E0E8FF;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16);
}

.agent-dashboard-ui .agent-efloat-download-overlay__card strong,
body.agent-efloat-body .agent-efloat-download-overlay__card strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-efloat-download-overlay__card p,
body.agent-efloat-body .agent-efloat-download-overlay__card p {
    color: #8a94a6 !important;
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-efloat-download__spinner.is-lg,
body.agent-efloat-body .agent-efloat-download__spinner.is-lg {
    border-color: rgba(51, 102, 204, 0.2);
    border-top-color: #3366CC;
}

/* Date modal on efloat body ? full override vs base .agent-cash-range */
body.agent-efloat-body .agent-cash-range {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    display: none !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 16px !important;
    background: rgba(15, 23, 42, 0.4) !important;
    box-sizing: border-box !important;
}

body.agent-efloat-body .agent-cash-range.is-open {
    display: grid !important;
}

body.agent-efloat-body .agent-cash-range__backdrop {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

/* Select Date popup — match dashboard Add Expense modal */
body.agent-efloat-body .agent-cash-range__card {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
}

body.agent-efloat-body .agent-cash-range__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    background: #3366CC !important;
    box-sizing: border-box !important;
}

body.agent-efloat-body .agent-cash-range__header > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.agent-efloat-body .agent-cash-range__icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
}

body.agent-efloat-body .agent-cash-range__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.agent-efloat-body .agent-cash-range__header h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.agent-efloat-body .agent-cash-range__header p {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.agent-efloat-body .agent-cash-range__close {
    width: 36px !important;
    height: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    cursor: pointer;
    padding: 0 !important;
    flex: 0 0 36px !important;
    margin: 0 0 0 auto !important;
}

body.agent-efloat-body .agent-cash-range__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
    background: #F8FAFC !important;
}

body.agent-efloat-body .agent-cash-range__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.agent-efloat-body .agent-cash-range__field > span {
    display: block !important;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.agent-efloat-body .agent-cash-range__input {
    position: relative !important;
    width: 100% !important;
}

body.agent-efloat-body .agent-cash-range__input input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

body.agent-efloat-body .agent-cash-range__input input:focus {
    outline: none !important;
    border-color: #3366CC !important;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12) !important;
}

body.agent-efloat-body .agent-cash-range__footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
    background: #fff !important;
    border-top: 1px solid #E8EDF3 !important;
}

body.agent-efloat-body .agent-cash-range__footer .agent-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
}

body.agent-efloat-body .agent-cash-range__footer .agent-btn--outline {
    color: #2563EB !important;
    border: 1.5px solid #2563EB !important;
    background: #fff !important;
}

body.agent-efloat-body .agent-cash-range__footer .agent-btn--navy {
    color: #fff !important;
    background: #3366CC !important;
    border: 1.5px solid #3366CC !important;
}

@media (max-width: 420px) {
    body.agent-efloat-body .agent-cash-range {
        padding: 10px !important;
    }

    body.agent-efloat-body .agent-cash-range__card {
        width: min(100%, 420px) !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    body.agent-efloat-body .agent-cash-range__header {
        padding: 16px 14px !important;
        gap: 10px !important;
    }

    body.agent-efloat-body .agent-cash-range__header h2 {
        font-size: 20px !important;
    }

    body.agent-efloat-body .agent-cash-range__header p {
        font-size: 16px !important;
    }

    body.agent-efloat-body .agent-cash-range__body {
        padding: 14px !important;
        gap: 14px !important;
    }

    body.agent-efloat-body .agent-cash-range__footer {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }
}

@media (max-width: 420px) {
    .agent-dashboard-ui .agent-efloat-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .agent-dashboard-ui .agent-efloat-hero .agent-cash-date-btn.agent-btn,
    .agent-dashboard-ui .agent-efloat-hero .agent-cash-date-btn {
        width: 100% !important;
    }

    .agent-dashboard-ui .agent-efloat-hero h1 {
        font-size: 20px !important;
    }

    .agent-dashboard-ui .agent-efloat-kpis__grid {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-efloat-actions {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-efloat-list li {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "time amount"
            "badge badge"
            "copy copy";
    }

    .agent-dashboard-ui .agent-efloat-list time { grid-area: time; }
    .agent-dashboard-ui .agent-efloat-badge { grid-area: badge; justify-self: start; }
    .agent-dashboard-ui .agent-efloat-list__copy { grid-area: copy; }
    .agent-dashboard-ui .agent-efloat-list em { grid-area: amount; justify-self: end; }

    body.agent-efloat-body .agent-efloat-modal {
        padding: 10px !important;
        place-items: center !important;
    }

    body.agent-efloat-body .agent-efloat-modal__dialog {
        width: min(100%, 420px) !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__header {
        display: flex !important;
        align-items: center !important;
        padding: 16px 14px !important;
        gap: 10px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body.agent-efloat-body .agent-efloat-modal__icon {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__close {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__header > div {
        gap: 4px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__header h2 {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body.agent-efloat-body .agent-efloat-modal__header p {
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__icon {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    body.agent-efloat-body #agent-efloat-topup-modal .agent-efloat-modal__close {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__cancel,
    body.agent-efloat-body .agent-efloat-modal__submit {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 16px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__fields,
    body.agent-efloat-body .agent-efloat-modal__body {
        padding: 14px !important;
        gap: 14px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__field > span,
    body.agent-efloat-body .agent-efloat-modal__label,
    body.agent-efloat-body .agent-efloat-modal__form input[type="number"],
    body.agent-efloat-body .agent-efloat-modal__form input[type="text"],
    body.agent-efloat-body .agent-efloat-modal__form textarea,
    body.agent-efloat-body .agent-efloat-modal__form input::placeholder,
    body.agent-efloat-body .agent-efloat-modal__form textarea::placeholder,
    body.agent-efloat-body .agent-efloat-type-toggle label,
    body.agent-efloat-body .agent-efloat-modal__info p,
    body.agent-efloat-body .agent-efloat-modal__footer .agent-btn {
        font-size: 16px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__footer {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    body.agent-efloat-body .agent-efloat-modal__footer .agent-btn {
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        padding: 0 14px !important;
    }
}


/* =========================================================
   Money Agent ? Outlet Expenses (match Outlet Details / Cash theme)
   ========================================================= */
body.agent-expenses-body.sales-dashboard-body,
body.agent-expenses-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

body.agent-expenses-body .agent-expenses-page,
body.agent-expenses-body .agent-expenses-page p,
body.agent-expenses-body .agent-expenses-page span,
body.agent-expenses-body .agent-expenses-page small,
body.agent-expenses-body .agent-expenses-page label,
body.agent-expenses-body .agent-expenses-page a,
body.agent-expenses-body .agent-expenses-page button,
body.agent-expenses-body .agent-expenses-page em,
body.agent-expenses-body .agent-expenses-page i,
body.agent-expenses-body .agent-expenses-page li,
body.agent-expenses-body .agent-expenses-page time {
    font-size: max(16px, 1em);
}

.agent-dashboard-ui .agent-expenses-page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
    font-size: 16px;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #3366CC !important;
    text-decoration: none;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__back:hover {
    color: #2a56ad !important;
}

.agent-dashboard-ui .agent-expenses-hero {
    padding: 2px 2px 0;
    align-items: flex-start;
}

.agent-dashboard-ui .agent-expenses-hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-expenses-hero p {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__pills span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__pills .is-total {
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__pills .is-open {
    color: #3366CC;
    background: #EFF7FF;
}

.agent-dashboard-ui .agent-expenses-page .agent-outlet-details__pills .is-short {
    color: #DC2626;
    background: #FEF1F2;
}

.agent-dashboard-ui .agent-expenses-kpis.agent-card,
.agent-dashboard-ui .agent-expenses-kpis {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 16px !important;
}

.agent-dashboard-ui .agent-expenses-kpis article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    text-align: left;
    box-shadow: none;
}

.agent-dashboard-ui .agent-expenses-kpis span {
    margin: 0;
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: clamp(16px, 3.4vw, 16px) !important;
    letter-spacing: 0;
    text-transform: none;
}

.agent-dashboard-ui .agent-expenses-kpis strong {
    display: block;
    color: #000;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 3.8vw, 20px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-expenses-kpis .is-total strong {
    color: #2563EB !important;
}

.agent-dashboard-ui .agent-expenses-kpis .is-up {
    color: #059669 !important;
}

.agent-dashboard-ui .agent-expenses-kpis .is-warn {
    color: #B45309 !important;
}

.agent-dashboard-ui .agent-expenses-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid #FDE68A;
    border-top: 4px solid #F59E0B;
    color: #B45309;
    background: #FFFBEB;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-expenses-filters-slider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.agent-dashboard-ui .agent-expenses-filters-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #3366CC;
    cursor: pointer;
    box-shadow: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
    -webkit-tap-highlight-color: transparent;
}

.agent-dashboard-ui .agent-expenses-filters-nav:hover:not(:disabled) {
    background: #EFF7FF;
    border-color: #3366CC;
}

.agent-dashboard-ui .agent-expenses-filters-nav:disabled,
.agent-dashboard-ui .agent-expenses-filters-nav.is-disabled {
    opacity: 0.35;
    cursor: default;
    color: #94a3b8;
    border-color: #E8EDF3;
    background: #F8FAFC;
}

.agent-dashboard-ui .agent-expenses-filters-nav svg {
    display: block;
    width: 18px;
    height: 18px;
}

.agent-dashboard-ui .agent-expenses-filters {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 2px 0;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}

.agent-dashboard-ui .agent-expenses-filters::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.agent-dashboard-ui .agent-expenses-filters button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    box-shadow: none;
}

.agent-dashboard-ui .agent-expenses-filters button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-expenses-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-dashboard-ui .agent-expense-item {
    padding: 14px 16px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    box-shadow: none;
}

.agent-dashboard-ui .agent-expense-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.agent-dashboard-ui .agent-expense-item__head > div:first-child strong {
    display: block;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-expense-item__head p,
.agent-dashboard-ui .agent-expense-item__head small {
    margin: 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-expense-item__head p {
    margin-top: 4px;
}

.agent-dashboard-ui .agent-expense-item__head small {
    display: block;
    margin-top: 4px;
}

.agent-dashboard-ui .agent-expense-item__right {
    text-align: right;
    flex-shrink: 0;
}

.agent-dashboard-ui .agent-expense-item__right em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-expense-item.is-success .agent-expense-item__right em {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-expense-item.is-warn .agent-expense-item__right em {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-expense-item__right strong {
    display: block;
    margin-top: 8px;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4.8vw, 20px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-expense-item__actions {
    margin-top: 12px;
}

.agent-dashboard-ui .agent-expense-item__actions .agent-btn,
.agent-dashboard-ui .agent-expense-item__actions form {
    width: auto !important;
    min-width: 0 !important;
}

.agent-dashboard-ui .agent-expense-item__actions form {
    display: inline-flex;
}

.agent-dashboard-ui .agent-expenses-page .agent-empty {
    margin: 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-expenses-error {
    color: #DC2626 !important;
}

.agent-dashboard-ui .agent-expense-proof.agent-card,
.agent-dashboard-ui .agent-expense-proof {
    border-color: #FDE68A;
    border-top: 4px solid #F59E0B;
    background: #FFFBEB;
    box-shadow: none;
}

.agent-dashboard-ui .agent-expense-proof__head strong {
    color: #B45309 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-expense-proof > p {
    margin: 8px 0 14px;
    color: #92400e !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-expense-proof__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-dashboard-ui .agent-expense-proof__upload {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 16px;
    border: 1.5px dashed #F59E0B;
    border-radius: 15px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    color: #B45309;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-expense-proof__upload input {
    display: none;
}

.agent-dashboard-ui .agent-expense-proof__upload small {
    display: block;
    margin-top: 4px;
    color: #C27803 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-expense-proof__form textarea,
.agent-dashboard-ui .agent-expense-add-form input,
.agent-dashboard-ui .agent-expense-add-form select,
.agent-dashboard-ui .agent-expense-add-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #222222;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-expense-proof__form textarea:focus,
.agent-dashboard-ui .agent-expense-add-form input:focus,
.agent-dashboard-ui .agent-expense-add-form select:focus,
.agent-dashboard-ui .agent-expense-add-form textarea:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.agent-dashboard-ui .agent-expense-add-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.agent-dashboard-ui .agent-expense-add-form label span {
    display: block !important;
    margin-bottom: 6px;
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

@media (min-width: 768px) {
    .agent-dashboard-ui .agent-expense-add-form label span {
        font-size: 18px !important;
    }
}

.agent-dashboard-ui .agent-expenses-full-btn.agent-btn,
.agent-dashboard-ui .agent-expenses-full-btn {
    width: 100% !important;
    min-width: 0 !important;
}

.agent-dashboard-ui .agent-expenses-by-category {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-dashboard-ui .agent-expenses-by-category li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #E8EDF3;
    color: #222222;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-expenses-by-category li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-dashboard-ui .agent-expenses-by-category li.is-highlight {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #E0E8FF;
    font-family: var(--sb-font-semibold);
}

.agent-dashboard-ui .agent-expenses-by-category li.is-highlight > span {
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    color: #222222 !important;
    line-height: 1.15;
}

.agent-dashboard-ui .agent-expenses-by-category strong {
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-expenses-by-category .is-net {
    color: #2563EB !important;
}

@media (max-width: 520px) {
    .agent-dashboard-ui .agent-expenses-kpis.agent-card,
    .agent-dashboard-ui .agent-expenses-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .agent-dashboard-ui .agent-expenses-kpis .is-total {
        grid-column: 1 / -1;
    }
}

@media (max-width: 380px) {
    .agent-dashboard-ui .agent-expenses-hero h1 {
        font-size: 20px !important;
    }

    .agent-dashboard-ui .agent-expenses-kpis.agent-card,
    .agent-dashboard-ui .agent-expenses-kpis {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-expenses-kpis .is-total {
        grid-column: auto;
    }
}

/* =========================================================
   Money Agent ? My Staff (match Outlets / Expenses theme)
   ========================================================= */
body.agent-staff-body.sales-dashboard-body,
body.agent-staff-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

body.agent-staff-body .agent-staff-content,
body.agent-staff-body .agent-staff-content p,
body.agent-staff-body .agent-staff-content span,
body.agent-staff-body .agent-staff-content small,
body.agent-staff-body .agent-staff-content label,
body.agent-staff-body .agent-staff-content a,
body.agent-staff-body .agent-staff-content button,
body.agent-staff-body .agent-staff-content em,
body.agent-staff-body .agent-staff-content i,
body.agent-staff-body .agent-staff-content li,
body.agent-staff-body .agent-staff-content time {
    font-size: max(16px, 1em);
}

/* Match global agent-btn sizes used on Outlets / Expenses / Dashboard */
body.agent-staff-body .agent-btn,
body.agent-staff-body .agent-staff-content .agent-btn,
body.agent-staff-body .agent-staff-add-block {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    body.agent-staff-body .agent-btn,
    body.agent-staff-body .agent-staff-content .agent-btn,
    body.agent-staff-body .agent-staff-add-block {
        font-size: 18px !important;
    }
}

.agent-dashboard-ui .agent-staff-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 10px;
    box-sizing: border-box;
    font-size: 16px;
}

.agent-dashboard-ui .agent-staff-hero {
    padding: 2px 2px 0;
    align-items: flex-start;
}

.agent-dashboard-ui .agent-staff-hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-staff-hero p {
    margin: 6px 0 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-hero__add,
.agent-dashboard-ui .agent-staff-hero .agent-btn--navy,
body.agent-staff-body .agent-staff-hero__add,
body.agent-staff-body .agent-staff-hero .agent-btn--navy {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.agent-dashboard-ui .agent-staff-hero__add svg,
.agent-dashboard-ui .agent-staff-hero .agent-btn--navy svg,
body.agent-staff-body .agent-staff-hero__add svg,
body.agent-staff-body .agent-staff-hero .agent-btn--navy svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
}

.agent-dashboard-ui .agent-staff-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04);
}

.agent-dashboard-ui .agent-staff-search__icon {
    color: #94a3b8;
}

.agent-dashboard-ui .agent-staff-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1e293b;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-search input::placeholder {
    color: #94a3b8;
}

.agent-dashboard-ui .agent-staff-search__status {
    min-height: 0;
    margin: 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-search__status:empty {
    display: none;
}

.agent-dashboard-ui .agent-staff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-dashboard-ui .agent-staff-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-staff-chips span svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.agent-dashboard-ui .agent-staff-chips .is-total,
.agent-dashboard-ui .agent-staff-chips .is-off-duty {
    color: #64748b;
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-staff-chips .is-on-duty {
    color: #15803d;
    background: #ecfdf3;
}

.agent-dashboard-ui .agent-staff-chips .is-alerts {
    color: #DC2626;
    background: #FEF1F2;
}

.agent-dashboard-ui .agent-staff-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0;
    padding: 0 0 2px;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.agent-dashboard-ui .agent-staff-filters button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1;
    box-shadow: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.agent-dashboard-ui .agent-staff-filters button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-staff-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-dashboard-ui .agent-staff-card.agent-card,
.agent-dashboard-ui .agent-staff-card {
    padding: 16px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-left-width: 4px;
    border-left-color: #3366CC;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

.agent-dashboard-ui .agent-staff-card.is-danger { border-left-color: #DC2626; }
.agent-dashboard-ui .agent-staff-card.is-warn { border-left-color: #FF831D; }
.agent-dashboard-ui .agent-staff-card.is-success { border-left-color: #16A34A; }
.agent-dashboard-ui .agent-staff-card.is-muted { border-left-color: #94a3b8; }

.agent-dashboard-ui .agent-staff-card__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.agent-dashboard-ui .agent-staff-card__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF7FF;
    color: #3366CC;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-staff-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.agent-dashboard-ui .agent-staff-card__title strong {
    display: block;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-staff-card__copy > small {
    display: block;
    margin-top: 4px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-card__copy > p {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-card__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-staff-card.is-danger .agent-staff-card__badge {
    color: #DC2626;
    background: #FEF1F2;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-staff-card.is-warn .agent-staff-card__badge {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-staff-card.is-success .agent-staff-card__badge {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-staff-card.is-muted .agent-staff-card__badge {
    color: #64748b;
    background: #EFF2F6;
    border: 1px solid #E2E8F0;
}

.agent-dashboard-ui .agent-staff-card__alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-staff-card__alert.is-danger { color: #DC2626; }
.agent-dashboard-ui .agent-staff-card__alert.is-warn { color: #B45309; }

.agent-dashboard-ui .agent-staff-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #E8EDF3;
}

.agent-dashboard-ui .agent-staff-card__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-dashboard-ui .agent-btn--call,
body.agent-staff-body .agent-btn--call {
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    color: #fff !important;
    background: #16A34A !important;
    border: 0 !important;
    border-radius: 10px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-btn--whatsapp,
body.agent-staff-body .agent-btn--whatsapp {
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    color: #15803d !important;
    background: #fff !important;
    border: 1.5px solid #16A34A !important;
    border-radius: 10px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-btn--whatsapp-solid,
body.agent-staff-body .agent-btn--whatsapp-solid {
    min-height: 40px;
    height: 40px;
    color: #fff !important;
    background: #16A34A !important;
    border: 0 !important;
    border-radius: 10px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-btn--broadcast,
body.agent-staff-body .agent-btn--broadcast {
    min-height: 40px;
    height: 40px;
    color: #2563EB !important;
    background: #fff !important;
    border: 1.5px solid #2563EB !important;
    border-radius: 10px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-staff-card__profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3366CC !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-decoration: none;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-staff-card__profile svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.agent-dashboard-ui .agent-staff-card__profile:hover {
    color: #2a56ad !important;
}

.agent-dashboard-ui .agent-staff-card__contacts .agent-btn,
.agent-dashboard-ui .agent-staff-attention .agent-btn,
.agent-dashboard-ui .agent-staff-broadcast .agent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.agent-dashboard-ui .agent-staff-card__contacts .agent-btn svg,
.agent-dashboard-ui .agent-staff-attention .agent-btn svg,
.agent-dashboard-ui .agent-staff-broadcast .agent-btn svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.agent-dashboard-ui .agent-staff-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.agent-dashboard-ui .agent-staff-empty .agent-empty,
.agent-dashboard-ui .agent-staff-content .agent-empty {
    margin: 0;
    color: #8a94a6;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-attention.agent-card,
.agent-dashboard-ui .agent-staff-attention {
    padding: 16px;
    border: 1px solid #FECACA;
    border-left: 4px solid #DC2626;
    border-radius: 22px;
    background: #FEF1F2;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04);
}

.agent-dashboard-ui .agent-staff-attention > header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #DC2626;
}

.agent-dashboard-ui .agent-staff-attention__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #DC2626;
}

.agent-dashboard-ui .agent-staff-attention__icon svg {
    width: 18px;
    height: 18px;
}

.agent-dashboard-ui .agent-staff-attention > header strong {
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-staff-attention > header em {
    font-style: normal;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #DC2626;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-staff-attention ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-dashboard-ui .agent-staff-attention li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-staff-attention li strong {
    display: block;
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-staff-attention li small {
    color: #DC2626 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-attention .agent-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
}

.agent-dashboard-ui .agent-staff-broadcast.agent-card,
.agent-dashboard-ui .agent-staff-broadcast {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
    min-width: 0;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-staff-broadcast > p,
.agent-dashboard-ui .agent-staff-broadcast__label {
    margin: 0;
    color: #64748b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.35;
}

.agent-dashboard-ui .agent-staff-broadcast > div,
.agent-dashboard-ui .agent-staff-broadcast__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 0;
}

.agent-dashboard-ui .agent-staff-broadcast .agent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    white-space: normal !important;
    text-align: center;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-staff-broadcast .agent-btn span {
    min-width: 0;
    font-size: 16px !important;
    line-height: 1.2;
    word-break: break-word;
}

.agent-dashboard-ui .agent-staff-broadcast .agent-btn svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.agent-dashboard-ui .agent-staff-add-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    color: #3366CC !important;
    background: #F8FAFC;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    cursor: pointer;
}

.agent-dashboard-ui .agent-staff-add-block:hover {
    background: #EFF7FF;
    border-color: #3366CC;
}

.agent-dashboard-ui .agent-staff-add-block svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* Add Staff modal — match dashboard Add Expense popup */
body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__dialog {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    overflow: hidden !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #3366CC !important;
    border-bottom: 0 !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__heading h2 {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__heading p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    margin-left: auto !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__body {
    background: #F8FAFC !important;
    padding: 16px !important;
    gap: 14px !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-field > span {
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-modal__footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
    background: #fff !important;
    border-top: 1px solid #E8EDF3 !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-submit,
body.agent-staff-body #agent-add-staff-modal .agent-add-staff-cancel {
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-submit {
    color: #fff !important;
    background: #3366CC !important;
    border: 1.5px solid #3366CC !important;
}

body.agent-staff-body #agent-add-staff-modal .agent-add-staff-cancel {
    color: #2563EB !important;
    background: #fff !important;
    border: 1.5px solid #2563EB !important;
}

@media (max-width: 767px) {
    .agent-dashboard-ui .agent-staff-broadcast > div,
    .agent-dashboard-ui .agent-staff-broadcast__actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .agent-dashboard-ui .agent-staff-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .agent-dashboard-ui .agent-staff-card__profile {
        text-align: right;
    }

    .agent-dashboard-ui .agent-staff-broadcast > div,
    .agent-dashboard-ui .agent-staff-broadcast__actions {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-staff-attention li {
        flex-wrap: wrap;
    }

    .agent-dashboard-ui .agent-staff-attention .agent-btn {
        width: 100% !important;
    }
}

@media (max-width: 380px) {
    .agent-dashboard-ui .agent-staff-hero h1 {
        font-size: 20px !important;
    }

    .agent-dashboard-ui .agent-staff-card__title strong {
        font-size: 18px !important;
    }
}

@media (min-width: 768px) {
    .agent-dashboard-ui .agent-btn--call,
    body.agent-staff-body .agent-btn--call,
    .agent-dashboard-ui .agent-btn--whatsapp,
    body.agent-staff-body .agent-btn--whatsapp,
    .agent-dashboard-ui .agent-btn--whatsapp-solid,
    body.agent-staff-body .agent-btn--whatsapp-solid,
    .agent-dashboard-ui .agent-btn--broadcast,
    body.agent-staff-body .agent-btn--broadcast {
        font-size: 18px !important;
    }
}

/* =========================================================
   Money Agent - Staff Profile (16px min, mobile/tablet friendly)
   ========================================================= */
body.agent-staff-profile-body.sales-dashboard-body,
body.agent-staff-profile-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

body.agent-staff-profile-body .agent-staff-profile,
body.agent-staff-profile-body .agent-staff-profile p,
body.agent-staff-profile-body .agent-staff-profile span,
body.agent-staff-profile-body .agent-staff-profile small,
body.agent-staff-profile-body .agent-staff-profile label,
body.agent-staff-profile-body .agent-staff-profile a,
body.agent-staff-profile-body .agent-staff-profile button,
body.agent-staff-profile-body .agent-staff-profile em,
body.agent-staff-profile-body .agent-staff-profile i,
body.agent-staff-profile-body .agent-staff-profile li,
body.agent-staff-profile-body .agent-staff-profile strong,
body.agent-staff-profile-body .agent-staff-profile time {
    font-size: max(16px, 1em);
}

body.agent-staff-profile-body .agent-btn,
body.agent-staff-profile-body .agent-staff-profile .agent-btn {
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-profile {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 12px;
    box-sizing: border-box;
    font-size: 16px;
}

.agent-dashboard-ui .agent-staff-profile__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #3366CC !important;
    text-decoration: none;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2;
}

.agent-dashboard-ui .agent-staff-profile__back:hover {
    color: #2a56ad !important;
}

.agent-dashboard-ui .agent-staff-profile__hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #E8EDF3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04);
}

.agent-dashboard-ui .agent-staff-profile__avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF7FF;
    color: #3366CC;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1;
}

.agent-dashboard-ui .agent-staff-profile__identity {
    flex: 1;
    min-width: 0;
}

.agent-dashboard-ui .agent-staff-profile__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.agent-dashboard-ui .agent-staff-profile__title h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.agent-dashboard-ui .agent-staff-profile__hero .agent-staff-card__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-staff-profile__hero.is-danger .agent-staff-card__badge {
    color: #DC2626;
    background: #FEF1F2;
    border: 1px solid #FECACA;
}

.agent-dashboard-ui .agent-staff-profile__hero.is-warn .agent-staff-card__badge {
    color: #B45309;
    background: #fff7ed;
    border: 1px solid #FDE68A;
}

.agent-dashboard-ui .agent-staff-profile__hero.is-success .agent-staff-card__badge {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #BBF7D0;
}

.agent-dashboard-ui .agent-staff-profile__hero.is-muted .agent-staff-card__badge {
    color: #64748b;
    background: #EFF2F6;
    border: 1px solid #E2E8F0;
}

.agent-dashboard-ui .agent-staff-profile__role {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.35;
}

.agent-dashboard-ui .agent-staff-profile__meta {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.35;
}

.agent-dashboard-ui .agent-staff-profile__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid #FECACA;
    border-top: 4px solid #DC2626;
    background: #FEF1F2;
    color: #DC2626;
    box-shadow: none;
}

.agent-dashboard-ui .agent-staff-profile__alert.is-warn {
    border-color: #FDE68A;
    border-top-color: #F59E0B;
    background: #FFFBEB;
    color: #B45309;
}

.agent-dashboard-ui .agent-staff-profile__alert strong {
    display: block;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-staff-profile__alert p {
    margin: 4px 0 0;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.4;
}

.agent-dashboard-ui .agent-staff-profile .agent-card {
    padding: 16px;
    border: 1px solid #E8EDF3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.04);
}

.agent-dashboard-ui .agent-staff-profile__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.agent-dashboard-ui .agent-staff-profile__contact > div > span {
    display: block;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-staff-profile__contact > div > strong {
    display: block;
    margin-top: 4px;
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3;
    word-break: break-word;
}

.agent-dashboard-ui .agent-staff-profile__contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--call,
.agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--whatsapp {
    min-width: 0 !important;
    width: auto !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 10px;
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--call {
    color: #2563EB !important;
    border: 1.5px solid #2563EB !important;
    background: #fff !important;
}

.agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--whatsapp {
    color: #fff !important;
    border: 0 !important;
    background: #16A34A !important;
}

.agent-dashboard-ui .agent-staff-profile__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.agent-dashboard-ui .agent-staff-profile__stats article {
    padding: 12px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #EEF2F6;
    min-width: 0;
}

.agent-dashboard-ui .agent-staff-profile__stats span {
    display: block;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-staff-profile__stats strong {
    display: block;
    margin-top: 6px;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25;
    word-break: break-word;
}

.agent-dashboard-ui .agent-staff-profile__stats .is-up { color: #15803d !important; }
.agent-dashboard-ui .agent-staff-profile__stats .is-down { color: #DC2626 !important; }

.agent-dashboard-ui .agent-staff-profile__list,
.agent-dashboard-ui .agent-staff-profile__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-dashboard-ui .agent-staff-profile__list li,
.agent-dashboard-ui .agent-staff-profile__facts li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #EEF2F6;
    min-width: 0;
}

.agent-dashboard-ui .agent-staff-profile__list strong,
.agent-dashboard-ui .agent-staff-profile__facts strong {
    color: #222222 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3;
    word-break: break-word;
}

.agent-dashboard-ui .agent-staff-profile__list small,
.agent-dashboard-ui .agent-staff-profile__facts span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.35;
}

.agent-dashboard-ui .agent-staff-profile__facts li {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-dashboard-ui .agent-staff-profile__pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.agent-dashboard-ui .agent-staff-profile__pin-value {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0.12em;
    min-width: 3.5ch;
    text-align: right;
}

.agent-dashboard-ui .agent-staff-profile__pin-toggle {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #64748b;
}

.agent-dashboard-ui .agent-staff-profile__pin-toggle:hover,
.agent-dashboard-ui .agent-staff-profile__pin-toggle:focus-visible {
    color: #3366CC;
    background: #EFF7FF;
    outline: none;
}

.agent-dashboard-ui .agent-staff-profile .agent-empty {
    margin: 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.4;
}

@media (min-width: 344px) and (max-width: 1024px) {
    .agent-dashboard-ui .agent-staff-profile {
        padding: 12px 12px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px;
    }

    .agent-dashboard-ui .agent-staff-profile__hero {
        padding: 14px;
        gap: 12px;
    }

    .agent-dashboard-ui .agent-staff-profile__title h1 {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }

    .agent-dashboard-ui .agent-staff-profile__back,
    .agent-dashboard-ui .agent-staff-profile__role,
    .agent-dashboard-ui .agent-staff-profile__meta,
    .agent-dashboard-ui .agent-staff-profile__alert strong,
    .agent-dashboard-ui .agent-staff-profile__alert p,
    .agent-dashboard-ui .agent-staff-profile__contact > div > span,
    .agent-dashboard-ui .agent-staff-profile__contact > div > strong,
    .agent-dashboard-ui .agent-staff-profile__stats span,
    .agent-dashboard-ui .agent-staff-profile__stats strong,
    .agent-dashboard-ui .agent-staff-profile__list strong,
    .agent-dashboard-ui .agent-staff-profile__list small,
    .agent-dashboard-ui .agent-staff-profile__facts span,
    .agent-dashboard-ui .agent-staff-profile__facts strong,
    .agent-dashboard-ui .agent-staff-profile__pin-value,
    .agent-dashboard-ui .agent-staff-profile .agent-empty,
    .agent-dashboard-ui .agent-staff-profile__hero .agent-staff-card__badge,
    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn {
        font-size: 16px !important;
    }

    .agent-dashboard-ui .agent-staff-profile__contact-actions {
        width: 100%;
    }

    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--call,
    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--whatsapp {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-height: 44px !important;
        height: 44px !important;
    }

    .agent-dashboard-ui .agent-staff-profile__facts li {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

@media (min-width: 344px) and (max-width: 560px) {
    .agent-dashboard-ui .agent-staff-profile__stats {
        grid-template-columns: 1fr;
    }

    .agent-dashboard-ui .agent-staff-profile__title {
        flex-direction: column;
        align-items: flex-start;
    }

    .agent-dashboard-ui .agent-staff-profile__contact {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--call,
    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--whatsapp {
        flex: 1 1 100%;
    }

    .agent-dashboard-ui .agent-staff-profile__avatar {
        width: 52px;
        height: 52px;
        font-size: 16px !important;
    }
}

@media (min-width: 561px) and (max-width: 1024px) {
    .agent-dashboard-ui .agent-staff-profile {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .agent-dashboard-ui .agent-staff-profile__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .agent-dashboard-ui .agent-staff-profile__contact-actions {
        width: auto;
    }

    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--call,
    .agent-dashboard-ui .agent-staff-profile__contact-actions .agent-btn--whatsapp {
        flex: 0 0 auto;
    }
}

@media (min-width: 768px) {
    body.agent-staff-profile-body .agent-btn,
    body.agent-staff-profile-body .agent-staff-profile .agent-btn {
        font-size: 18px !important;
    }

    .agent-dashboard-ui .agent-staff-profile__title h1 {
        font-size: 24px !important;
    }
}

/* =========================================================
   Money Agent - Reports (match Staff / Cash / Expenses theme)
   ========================================================= */
body.agent-reports-body.sales-dashboard-body,
body.agent-reports-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

body.agent-reports-body .agent-reports-content,
body.agent-reports-body .agent-reports-content p,
body.agent-reports-body .agent-reports-content span,
body.agent-reports-body .agent-reports-content small,
body.agent-reports-body .agent-reports-content label,
body.agent-reports-body .agent-reports-content a,
body.agent-reports-body .agent-reports-content button,
body.agent-reports-body .agent-reports-content em,
body.agent-reports-body .agent-reports-content i,
body.agent-reports-body .agent-reports-content li,
body.agent-reports-body .agent-reports-content time,
body.agent-reports-body .agent-report-modal,
body.agent-reports-body .agent-report-modal p,
body.agent-reports-body .agent-report-modal span,
body.agent-reports-body .agent-report-modal small,
body.agent-reports-body .agent-report-modal label,
body.agent-reports-body .agent-report-modal a,
body.agent-reports-body .agent-report-modal button,
body.agent-reports-body .agent-report-modal em,
body.agent-reports-body .agent-report-modal i,
body.agent-reports-body .agent-report-modal li,
body.agent-reports-body .agent-report-modal time {
    font-size: max(14px, 1em);
}

/* Reset old pill .agent-btn styles on Reports */
body.agent-reports-body .agent-btn,
body.agent-reports-body .agent-reports-content .agent-btn,
body.agent-reports-body .agent-report-modal .agent-btn,
body.agent-reports-body a.agent-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: fit-content;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 0 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer;
}

@media (min-width: 768px) {
    body.agent-reports-body .agent-btn,
    body.agent-reports-body .agent-reports-content .agent-btn,
    body.agent-reports-body .agent-report-modal .agent-btn,
    body.agent-reports-body a.agent-btn {
        font-size: 18px !important;
    }
}

body.agent-reports-body .agent-btn--navy,
body.agent-reports-body .agent-reports-content .agent-btn--navy,
body.agent-reports-body .agent-report-modal .agent-btn--navy {
    color: #fff !important;
    background: #36C !important;
    border: 0 !important;
}

body.agent-reports-body .agent-btn--navy:hover:not(.is-disabled):not(:disabled),
body.agent-reports-body .agent-reports-content .agent-btn--navy:hover:not(.is-disabled):not(:disabled) {
    background: #2a56ad !important;
}

body.agent-reports-body .agent-btn--success,
body.agent-reports-body .agent-reports-content .agent-btn--success {
    color: #fff !important;
    background: #16A34A !important;
    border: 0 !important;
}

body.agent-reports-body .agent-btn--success:hover:not(.is-disabled):not(:disabled) {
    background: #15803d !important;
}

body.agent-reports-body .agent-btn--danger,
body.agent-reports-body .agent-reports-content .agent-btn--danger,
body.agent-reports-body .agent-report-modal .agent-btn--danger {
    color: #fff !important;
    background: #DC2626 !important;
    border: 0 !important;
}

body.agent-reports-body .agent-btn--danger:hover:not(.is-disabled):not(:disabled) {
    background: #b91c1c !important;
}

body.agent-reports-body .agent-btn--outline,
body.agent-reports-body .agent-report-modal .agent-btn--outline {
    color: #2563EB !important;
    border: 1.5px solid #2563EB !important;
    background: #fff !important;
}

body.agent-reports-body .agent-btn--outline:hover:not(.is-disabled):not(:disabled) {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
}

body.agent-reports-body .agent-btn--outline-danger,
body.agent-reports-body .agent-report-modal .agent-btn--outline-danger {
    color: #DC2626 !important;
    border: 1.5px solid #FCA5A5 !important;
    background: #fff !important;
}

body.agent-reports-body .agent-btn--outline-danger:hover:not(.is-disabled):not(:disabled) {
    background: #FEF1F2 !important;
}

body.agent-reports-body .agent-btn.is-disabled,
body.agent-reports-body .agent-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

body.agent-reports-body .agent-btn svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.agent-dashboard-ui .agent-reports-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

.agent-dashboard-ui .agent-reports-hero {
    padding: 2px 2px 0;
    align-items: center;
}

.agent-dashboard-ui .agent-reports-hero h1 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.agent-dashboard-ui .agent-reports-hero p {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-period-menu {
    flex: 0 0 auto;
    align-self: flex-start;
}

.agent-dashboard-ui .agent-reports-period-menu summary {
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    gap: 8px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #3366CC;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1;
    box-shadow: none;
    white-space: nowrap;
}

.agent-dashboard-ui .agent-reports-period-menu summary svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.agent-dashboard-ui .agent-reports-period-menu > div {
    min-width: 168px;
    padding: 8px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(30, 50, 80, 0.12);
    gap: 4px;
}

.agent-dashboard-ui .agent-reports-period-menu a,
.agent-dashboard-ui .agent-reports-period-menu button {
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    color: #334155;
    background: transparent;
    text-align: left;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer;
}

.agent-dashboard-ui .agent-reports-period-menu a:hover,
.agent-dashboard-ui .agent-reports-period-menu button:hover {
    background: #EFF7FF;
    color: #3366CC;
}

.agent-dashboard-ui .agent-reports-promo {
    gap: 14px;
    padding: 18px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1e3a5f 0%, #3366CC 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.18);
}

.agent-dashboard-ui .agent-reports-promo strong {
    margin-bottom: 8px;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-promo ul {
    gap: 8px;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    opacity: 0.95;
}

.agent-dashboard-ui .agent-reports-promo ul li::before {
    content: "\2713  ";
    color: #86efac;
}

.agent-dashboard-ui .agent-reports-promo__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-dashboard-ui .agent-reports-promo__actions .agent-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
}

.agent-dashboard-ui .agent-reports-promo__actions .agent-btn--outline-light,
body.agent-reports-body .agent-btn--outline-light,
body.agent-reports-body .agent-reports-promo .agent-btn--outline-light {
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.agent-dashboard-ui .agent-reports-promo__actions .agent-btn--outline-light:hover:not(.is-disabled):not(:disabled),
body.agent-reports-body .agent-btn--outline-light:hover:not(.is-disabled):not(:disabled) {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.agent-dashboard-ui .agent-reports-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0;
    padding: 0 0 2px;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.agent-dashboard-ui .agent-reports-tabs a,
.agent-dashboard-ui .agent-reports-tabs button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1;
    box-shadow: none;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.agent-dashboard-ui .agent-reports-tabs a.is-active,
.agent-dashboard-ui .agent-reports-tabs button.is-active {
    color: #fff !important;
    border-color: #3366CC !important;
    background: #3366CC !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-reports-custom {
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.agent-dashboard-ui .agent-reports-custom span,
.agent-dashboard-ui .agent-reports-custom__field > span:first-child {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-transform: none;
    letter-spacing: 0;
}

.agent-dashboard-ui .agent-reports-custom input,
.agent-dashboard-ui .agent-reports-custom__control input {
    min-height: 44px;
    padding: 0 12px;
    border: 1.5px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    box-shadow: none;
}

.agent-dashboard-ui .agent-reports-custom__control input:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.agent-dashboard-ui .agent-reports-custom__apply,
body.agent-reports-body .agent-reports-custom__apply.agent-btn {
    width: auto !important;
    min-width: 96px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
}

.agent-dashboard-ui .agent-reports-panel {
    gap: 15px;
}

.agent-dashboard-ui .agent-reports-panel [data-reports-panel-body] {
    gap: 15px;
}

.agent-dashboard-ui .agent-reports-loader {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.08);
    color: #222222;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-loader i {
    border-color: rgba(51, 102, 204, 0.2);
    border-top-color: #3366CC;
}

.agent-dashboard-ui .agent-reports-commission {
    padding: 18px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #3366CC 0%, #4B7BE5 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
}

.agent-dashboard-ui .agent-reports-commission p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
}

.agent-dashboard-ui .agent-reports-commission strong {
    display: block;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    line-height: 1.15;
}

.agent-dashboard-ui .agent-reports-commission small {
    display: block;
    margin-top: 6px;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    opacity: 0.95;
}

.agent-dashboard-ui .agent-reports-commission small.is-up,
.agent-dashboard-ui .agent-reports-commission .is-up {
    color: #d1fae5 !important;
}

.agent-dashboard-ui .agent-reports-commission small.is-down,
.agent-dashboard-ui .agent-reports-commission .is-down {
    color: #fee2e2 !important;
}

.agent-dashboard-ui .agent-reports-commission a,
.agent-dashboard-ui .agent-reports-commission__link {
    display: inline-block;
    margin-top: 14px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.agent-dashboard-ui .agent-reports-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-dashboard-ui .agent-reports-kpis article {
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    box-shadow: none;
}

.agent-dashboard-ui .agent-reports-kpis span {
    display: block;
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: clamp(14px, 3.4vw, 16px) !important;
    letter-spacing: 0;
    text-transform: none;
}

.agent-dashboard-ui .agent-reports-kpis strong {
    display: block;
    margin-top: 8px;
    color: #000;
    font-family: var(--sb-font-bold) !important;
    font-size: clamp(16px, 4vw, 22px) !important;
    font-weight: normal !important;
    line-height: 1.15;
    word-break: break-word;
}

.agent-dashboard-ui .agent-reports-kpis small {
    display: block;
    margin-top: 6px;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-kpis .is-up,
.agent-dashboard-ui .agent-reports-cash-kpis .is-up {
    color: #059669 !important;
}

.agent-dashboard-ui .agent-reports-kpis .is-down,
.agent-dashboard-ui .agent-reports-cash-kpis .is-down {
    color: #DC2626 !important;
}

.agent-dashboard-ui .agent-reports-card {
    padding: 16px !important;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
    gap: 14px;
}

.agent-dashboard-ui .agent-reports-card > header h2,
.agent-dashboard-ui .agent-reports-expenses-card__header h2 {
    margin: 0;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25;
}

.agent-dashboard-ui .agent-reports-card > .agent-btn,
.agent-dashboard-ui .agent-reports-card > .agent-btn--navy,
.agent-dashboard-ui .agent-reports-card > .agent-btn--danger,
body.agent-reports-body .agent-reports-card > .agent-btn,
body.agent-reports-body .agent-reports-card > .agent-btn--danger {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
}

.agent-dashboard-ui .agent-reports-table__head {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    text-transform: none;
    letter-spacing: 0;
}

.agent-dashboard-ui .agent-reports-table__row {
    padding: 12px 0;
    border-top: 1px solid #E8EDF3;
    color: #1e293b;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-table__row em,
.agent-dashboard-ui .agent-reports-list em,
.agent-dashboard-ui .agent-reports-shortage-list em,
.agent-dashboard-ui .agent-reports-table__row b.is-success,
.agent-dashboard-ui .agent-reports-table__row b.is-danger {
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-style: normal;
}

.agent-dashboard-ui .agent-reports-list {
    gap: 12px;
}

.agent-dashboard-ui .agent-reports-list strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-list small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-list__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF7FF;
    color: #3366CC;
}

.agent-dashboard-ui .agent-reports-list__icon.is-success { background: #ecfdf3; color: #15803d; }
.agent-dashboard-ui .agent-reports-list__icon.is-warn { background: #FFF7ED; color: #C27803; }
.agent-dashboard-ui .agent-reports-list__icon.is-info { background: #EFF7FF; color: #3366CC; }

.agent-dashboard-ui .agent-reports-content .agent-staff-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #EFF7FF;
    color: #3366CC;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-shortage-kpis > div,
.agent-dashboard-ui .agent-reports-cash-kpis > div {
    padding: 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
}

.agent-dashboard-ui .agent-reports-shortage-kpis span,
.agent-dashboard-ui .agent-reports-cash-kpis span,
.agent-dashboard-ui .agent-reports-expenses-kpis span {
    color: #000 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
    letter-spacing: 0;
    text-transform: none;
}

.agent-dashboard-ui .agent-reports-shortage-kpis strong,
.agent-dashboard-ui .agent-reports-cash-kpis strong,
.agent-dashboard-ui .agent-reports-expenses-kpis strong {
    margin-top: 6px;
    color: #000;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-expenses-kpis strong.is-flagged {
    color: #FF831D !important;
}

.agent-dashboard-ui .agent-reports-shortage-list li {
    padding-top: 12px;
    border-top: 1px solid #E8EDF3;
}

.agent-dashboard-ui .agent-reports-shortage-list strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-shortage-list small {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-chart__col > span,
.agent-dashboard-ui .agent-reports-chart__legend {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-expense-bars strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-expense-bars b {
    color: #64748b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-expense-bars i {
    background: #EFF2F6;
}

.agent-dashboard-ui .agent-reports-expenses-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #3366CC;
    color: #fff;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-footnote {
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #cfe9e0;
    background: #ecfdf3;
}

.agent-dashboard-ui .agent-reports-footnote__copy strong {
    color: #0f172a !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.agent-dashboard-ui .agent-reports-footnote__copy small {
    color: #64748b !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

.agent-dashboard-ui .agent-reports-content .agent-empty {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

/* Report modals - match Add Expense / Staff modal chrome */
body.agent-reports-body .agent-report-modal__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
}

body.agent-reports-body .agent-report-modal__dialog {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 440px) !important;
    max-height: calc(100vh - 24px) !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16) !important;
    overflow: hidden !important;
}

body.agent-reports-body .agent-report-modal__header {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 64px !important;
    padding: 14px 16px !important;
    border-bottom: 0 !important;
    background: #36C !important;
}

body.agent-reports-body .agent-report-modal__icon,
body.agent-reports-body .agent-report-modal__icon.is-green,
body.agent-reports-body .agent-report-modal__icon.is-danger,
body.agent-reports-body .agent-report-modal__icon.is-navy,
body.agent-reports-body .agent-report-modal__icon.is-blue {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

body.agent-reports-body .agent-report-modal__header h2 {
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-reports-body .agent-report-modal__header p {
    margin: 3px 0 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.agent-reports-body .agent-report-modal__close {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

body.agent-reports-body .agent-report-modal__close:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    color: #fff !important;
}

body.agent-reports-body .agent-report-modal__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    gap: 14px !important;
    padding: 16px !important;
    background: #F8FAFC !important;
    -webkit-overflow-scrolling: touch;
}

body.agent-reports-body .agent-report-modal__section-title {
    margin: 0 !important;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-reports-body .agent-report-modal__body .agent-empty {
    margin: 0 !important;
    padding: 18px 14px !important;
    border: 1px dashed #D7E0EF !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

body.agent-reports-body .agent-report-stat-row,
body.agent-reports-body .agent-report-highlight-row,
body.agent-reports-body .agent-report-cash-stats,
body.agent-reports-body .agent-report-expense-stats {
    gap: 8px !important;
}

body.agent-reports-body .agent-report-stat-row article,
body.agent-reports-body .agent-report-highlight-row article,
body.agent-reports-body .agent-report-cash-stats article,
body.agent-reports-body .agent-report-expense-stats article {
    min-width: 0 !important;
    padding: 12px 10px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.agent-reports-body .agent-report-stat-row article strong,
body.agent-reports-body .agent-report-highlight-row article strong,
body.agent-reports-body .agent-report-cash-stats article strong,
body.agent-reports-body .agent-report-expense-stats article strong {
    word-break: break-word !important;
    line-height: 1.2 !important;
}

body.agent-reports-body .agent-report-stat-row.is-danger article {
    border-color: #FECACA !important;
    background: #FEF1F2 !important;
}

body.agent-reports-body .agent-report-cash-stats article.is-up {
    border-color: #BBF7D0 !important;
    background: #ecfdf3 !important;
}

body.agent-reports-body .agent-report-cash-stats article.is-down {
    border-color: #FECACA !important;
    background: #FEF1F2 !important;
}

body.agent-reports-body .agent-report-stat-row span,
body.agent-reports-body .agent-report-highlight-row span,
body.agent-reports-body .agent-report-cash-stats span,
body.agent-reports-body .agent-report-expense-stats span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 13px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.agent-reports-body .agent-report-stat-row strong,
body.agent-reports-body .agent-report-highlight-row strong,
body.agent-reports-body .agent-report-cash-stats strong,
body.agent-reports-body .agent-report-expense-stats strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-highlight-row small {
    color: #8a94a6 !important;
    font-size: 13px !important;
}

body.agent-reports-body .agent-report-data-table__head {
    color: #8a94a6 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    border-bottom-color: #E8EDF3 !important;
}

body.agent-reports-body .agent-report-data-table__row {
    color: #64748b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    border-bottom-color: #E8EDF3 !important;
}

body.agent-reports-body .agent-report-data-table__row strong,
body.agent-reports-body .agent-report-data-table__row b {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-outlet-cards li,
body.agent-reports-body .agent-report-staff-cards li,
body.agent-reports-body .agent-report-shortage-cards li {
    padding: 14px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.agent-reports-body .agent-report-outlet-cards__icon {
    background: #EFF7FF !important;
    color: #3366CC !important;
}

body.agent-reports-body .agent-report-outlet-cards__top strong,
body.agent-reports-body .agent-report-staff-cards__top strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-staff-cards__top small {
    color: #8a94a6 !important;
    font-size: 14px !important;
}

body.agent-reports-body .agent-report-outlet-cards__top em,
body.agent-reports-body .agent-report-staff-cards__top em {
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-style: normal !important;
}

body.agent-reports-body .agent-report-staff-cards__top em.is-success {
    color: #15803d !important;
    background: #ecfdf3 !important;
}

body.agent-reports-body .agent-report-staff-cards__top em.is-warn {
    color: #B45309 !important;
    background: #FFF7ED !important;
}

body.agent-reports-body .agent-report-staff-cards__top em.is-muted {
    color: #64748b !important;
    background: #EFF2F6 !important;
}

body.agent-reports-body .agent-report-staff-cards__top .agent-staff-card__avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #EFF7FF !important;
    color: #3366CC !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-metric-grid {
    gap: 8px !important;
}

body.agent-reports-body .agent-report-metric-grid > div {
    min-width: 0 !important;
    padding: 10px 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
}

body.agent-reports-body .agent-report-metric-grid span {
    margin-bottom: 4px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.agent-reports-body .agent-report-metric-grid strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    word-break: break-word !important;
}

body.agent-reports-body .agent-report-metric-grid strong.is-danger { color: #DC2626 !important; }
body.agent-reports-body .agent-report-metric-grid strong.is-success { color: #059669 !important; }

body.agent-reports-body .agent-report-top-performer {
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: 15px !important;
    background: #ecfdf3 !important;
    color: #15803d !important;
}

body.agent-reports-body .agent-report-top-performer strong {
    color: #166534 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-top-performer p {
    margin: 4px 0 0 !important;
    color: #059669 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.agent-reports-body .agent-report-shortage-cards strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-shortage-cards small {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.agent-reports-body .agent-report-shortage-cards b {
    color: #DC2626 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-shortage-cards em {
    font-family: var(--sb-font-semibold) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-style: normal !important;
}

body.agent-reports-body .agent-report-shortage-cards em.is-warn {
    color: #B45309 !important;
    background: #FFF7ED !important;
}

body.agent-reports-body .agent-report-shortage-cards em.is-success {
    color: #15803d !important;
    background: #ecfdf3 !important;
}

body.agent-reports-body .agent-report-shortage-cards em.is-info {
    color: #3366CC !important;
    background: #EFF7FF !important;
}

body.agent-reports-body .agent-report-modal-chart,
body.agent-reports-body .agent-reports-chart.agent-report-modal-chart {
    min-height: 150px !important;
    padding: 12px 8px 4px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
}

body.agent-reports-body .agent-report-week-list li {
    padding: 12px 0 !important;
    border-bottom: 1px solid #E8EDF3 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
}

body.agent-reports-body .agent-report-week-list span {
    color: #8a94a6 !important;
}

body.agent-reports-body .agent-report-week-list b.is-up {
    color: #059669 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-week-list b.is-down {
    color: #DC2626 !important;
    font-family: var(--sb-font-semibold) !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-week-list strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-donut {
    margin: 8px auto !important;
}

body.agent-reports-body .agent-report-donut__track {
    stroke: #E8EDF3 !important;
}

body.agent-reports-body .agent-report-expense-legend {
    gap: 10px !important;
}

body.agent-reports-body .agent-report-expense-legend li {
    padding: 10px 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body.agent-reports-body .agent-report-expense-legend strong {
    color: #1e293b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-expense-legend i {
    background: #EFF2F6 !important;
}

body.agent-reports-body .agent-report-expense-legend b {
    color: #64748b !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 13px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-report-data-table {
    padding: 4px 12px 8px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 15px !important;
    background: #fff !important;
}

body.agent-reports-body .agent-report-data-table__row em.is-success { color: #059669 !important; }
body.agent-reports-body .agent-report-data-table__row em.is-danger { color: #DC2626 !important; }

body.agent-reports-body .agent-report-modal__footer,
body.agent-reports-body .agent-report-modal__footer.is-single {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 10px !important;
    padding: 16px !important;
    border-top: 1px solid #E8EDF3 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.agent-reports-body .agent-report-modal__footer .agent-btn,
body.agent-reports-body .agent-report-modal__footer a.agent-btn,
body.agent-reports-body .agent-report-modal__footer button.agent-btn,
body.agent-reports-body .agent-report-modal__primary,
body.agent-reports-body .agent-report-modal__footer .agent-btn--navy,
body.agent-reports-body .agent-report-modal__footer .agent-btn--outline,
body.agent-reports-body .agent-report-modal__footer .agent-btn--danger,
body.agent-reports-body .agent-report-modal__footer .agent-btn--outline-danger {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

body.agent-reports-body .agent-report-modal__footer .agent-btn.is-disabled,
body.agent-reports-body .agent-report-modal__footer .agent-btn:disabled {
    opacity: 0.55 !important;
    color: #2563EB !important;
    border: 1.5px solid #93C5FD !important;
    background: #fff !important;
}

@media (max-width: 420px) {
    body.agent-reports-body .agent-report-modal__header h2 {
        font-size: 16px !important;
    }

    body.agent-reports-body .agent-report-stat-row {
        grid-template-columns: 1fr 1fr !important;
    }

    body.agent-reports-body .agent-report-stat-row article:last-child {
        grid-column: 1 / -1 !important;
    }

    body.agent-reports-body .agent-report-modal__footer,
    body.agent-reports-body .agent-report-modal__footer.is-single {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 14px 14px 16px !important;
        flex: 0 0 auto !important;
    }

    body.agent-reports-body .agent-report-modal__footer .agent-btn,
    body.agent-reports-body .agent-report-modal__footer a.agent-btn,
    body.agent-reports-body .agent-report-modal__primary {
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
        height: 48px !important;
    }

    body.agent-reports-body .agent-btn,
    body.agent-reports-body .agent-reports-content .agent-btn,
    body.agent-reports-body .agent-report-modal .agent-btn {
        font-size: 16px !important;
    }
}

body.agent-reports-body .agent-efloat-download-overlay__card {
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(30, 50, 80, 0.14);
}

body.agent-reports-body .agent-efloat-download-overlay__card strong {
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

body.agent-reports-body .agent-efloat-download-overlay__card p {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 14px !important;
}

@media (max-width: 520px) {
    .agent-dashboard-ui .agent-reports-custom {
        grid-template-columns: 1fr 1fr;
    }

    .agent-dashboard-ui .agent-reports-custom__apply {
        grid-column: 1 / -1;
        width: 100% !important;
    }

    .agent-dashboard-ui .agent-reports-promo__actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .agent-dashboard-ui .agent-reports-hero h1 {
        font-size: 20px !important;
    }

    .agent-dashboard-ui .agent-reports-commission strong {
        font-size: 24px !important;
    }
}

/* =========================================================
   Commission Detail modal ? dedicated chrome (beats generic report modal)
   ========================================================= */
body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    cursor: pointer !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__dialog {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 440px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: hidden !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__header {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 20px 20px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid #EEF2F7 !important;
    min-height: 0 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #E8F8EF !important;
    color: #059669 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__heading h2 {
    margin: 0 !important;
    color: #0F172A !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__period {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__period svg {
    width: 14px !important;
    height: 14px !important;
    color: #8a94a6 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__period span {
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #8a94a6 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__desc {
    margin: 4px 0 0 !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__close {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 18px 20px !important;
    overflow-y: auto !important;
    background: #fff !important;
    -webkit-overflow-scrolling: touch;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 16px !important;
    background: var(--sbo-navy, #153562) !important;
    color: #fff !important;
    overflow: hidden !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy {
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > span {
    display: block !important;
    margin-bottom: 8px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > strong {
    display: block !important;
    color: #fff !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 28px !important;
    font-weight: normal !important;
    line-height: 1.15 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 8px !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small em {
    font-style: normal !important;
    font-size: 14px !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small.is-up {
    color: #86EFAC !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small.is-down {
    color: #FCA5A5 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small.is-flat {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__deco {
    flex: 0 0 auto !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.28) !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__deco svg {
    width: 34px !important;
    height: 34px !important;
}

@media (max-width: 400px) {
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__body {
        padding: 14px 14px !important;
        gap: 14px !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero {
        gap: 8px !important;
        padding: 14px 14px !important;
        border-radius: 14px !important;
        align-items: center !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 60px) !important;
        padding-right: 4px !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > span {
        margin-bottom: 6px !important;
        font-size: 12px !important;
        letter-spacing: 0.03em !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > strong {
        font-size: 24px !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small em {
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__deco {
        width: 52px !important;
        height: 52px !important;
        margin-right: 0 !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__deco svg {
        width: 24px !important;
        height: 24px !important;
    }
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-block {
    display: grid !important;
    gap: 10px !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-block__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-block h3 {
    margin: 0 !important;
    color: #222222 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-trend-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F1F5F9 !important;
    color: #94A3B8 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-empty {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 8px !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types li {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto 14px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid #E8EDF3 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types__icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types__icon.is-deposit {
    background: #E8F8EF !important;
    color: #059669 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types__icon.is-withdrawal {
    background: #FFF1E8 !important;
    color: #EA580C !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types__icon.is-float {
    background: #F3E8FF !important;
    color: #9333EA !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types__icon.is-bills {
    background: #E8F1FE !important;
    color: #2563EB !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types strong {
    display: block !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types small {
    display: block !important;
    margin-top: 2px !important;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types b {
    color: #059669 !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #CBD5E1 !important;
    font-style: normal !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-report-trend {
    height: 110px !important;
    border: 1px solid #E8EDF3 !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    padding: 8px 6px 0 !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__footer {
    display: block !important;
    padding: 0 20px 20px !important;
    border-top: 0 !important;
    background: #fff !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__download {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--sbo-navy, #153562) !important;
    color: #fff !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
}

body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__download svg {
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
}

@media (min-width: 768px) {
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__heading h2 {
        font-size: 20px !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__period,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__period span,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__desc,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-empty,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types small,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > span,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-hero__copy > small em {
        font-size: 14px !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-block h3,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types strong,
    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-types b {
        font-size: 16px !important;
    }

    body.agent-reports-body #agent-report-modal-commission.agent-commission-modal .agent-commission-modal__download {
        font-size: 18px !important;
    }
}

/* =========================================================
   Add Outlet modal ? white card UI matching design
   ========================================================= */
body.agent-outlets-body #agent-add-outlet-modal.agent-add-outlet-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;
    display: none !important;
    place-items: center !important;
    padding: 16px !important;
}

body.agent-outlets-body #agent-add-outlet-modal.agent-add-outlet-modal.is-open {
    display: grid !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    cursor: pointer !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__dialog {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 480px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: hidden !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__header {
    display: grid !important;
    grid-template-columns: 48px 1fr auto !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 20px 20px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid #EEF2F7 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #E8F1FE !important;
    color: #2563EB !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__heading h2 {
    margin: 0 !important;
    color: #0F172A !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__heading p {
    margin: 4px 0 0 !important;
    color: #94A3B8 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__heading strong {
    display: block !important;
    margin-top: 4px !important;
    color: #2563EB !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__close {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background: #fff !important;
    -webkit-overflow-scrolling: touch;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field > span {
    color: #334155 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field > span i {
    color: #EF4444 !important;
    font-style: normal !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field > input[type="text"],
body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field > input[type="tel"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field > input[type="text"]:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-phone {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 10px !important;
    background: #fff !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-phone:focus-within {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-phone em {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 78px !important;
    height: 100% !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-right: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    background: #F8FAFC !important;
    color: #64748B !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-phone em svg {
    width: 10px !important;
    height: 6px !important;
    color: #94A3B8 !important;
    flex: 0 0 auto !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field .agent-add-outlet-phone input[type="tel"],
body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-phone input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #1e293b !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-field .agent-add-outlet-phone input[type="tel"]:focus,
body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-phone input:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-tip {
 display: flex !important;
 align-items: flex-start !important;
 gap: 10px !important;
 margin: 0 !important;
 padding: 12px 14px !important;
 border: 1px solid #DBEAFE !important;
 border-radius: 12px !important;
 background: #EFF6FF !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-tip__icon {
 flex: 0 0 auto !important;
 width: 22px !important;
 height: 22px !important;
 margin-top: 1px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 color: #2563EB !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-tip__icon svg {
 width: 18px !important;
 height: 18px !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-tip p {
 margin: 0 !important;
 color: #475569 !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 13px !important;
 line-height: 1.45 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-tip strong {
 color: #2563EB !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 13px !important;
 font-weight: normal !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-error {
 margin: 0 !important;
 color: #DC2626 !important;
 font-family: var(--sb-font-regular) !important;
 font-size: 12px !important;
 line-height: 1.4 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__footer {
 display: grid !important;
 grid-template-columns: minmax(96px, 120px) 1fr !important;
 gap: 12px !important;
 padding: 0 20px 20px !important;
 background: #fff !important;
 border-top: 0 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-cancel,
body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-submit {
 box-sizing: border-box !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 8px !important;
 width: 100% !important;
 min-height: 48px !important;
 height: 48px !important;
 padding: 0 14px !important;
 border-radius: 12px !important;
 font-family: var(--sb-font-semibold) !important;
 font-size: 16px !important;
 font-weight: normal !important;
 line-height: 1 !important;
 white-space: nowrap !important;
 box-shadow: none !important;
 transform: none !important;
 cursor: pointer !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-cancel {
 border: 1px solid #D1D5DB !important;
 background: #fff !important;
 color: #334155 !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-submit {
 border: 0 !important;
 background: #2563EB !important;
 color: #fff !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-submit:disabled {
 opacity: 0.55 !important;
 cursor: not-allowed !important;
}

body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-submit span {
 font-size: 16px !important;
 line-height: 1 !important;
}

@media (max-width: 400px) {
 body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__header {
 padding: 16px 14px 14px !important;
 gap: 10px !important;
 }

 body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__body {
 padding: 14px !important;
 gap: 14px !important;
 }

 body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-modal__footer {
 grid-template-columns: 1fr !important;
 padding: 0 14px 14px !important;
 }

 body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-cancel {
 order: 2 !important;
 }

 body.agent-outlets-body #agent-add-outlet-modal .agent-add-outlet-submit {
 order: 1 !important;
 white-space: normal !important;
 height: auto !important;
 min-height: 48px !important;
 padding: 12px 14px !important;
 text-align: center !important;
 }
}

/* =========================================================
   Money Agent — Outlet switcher bottom sheet
   Mobile/tablet 344–1024px, min readable font 16px
   ========================================================= */
@keyframes agentBranchSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes agentBranchSheetUpCenter {
    from { transform: translateX(-50%) translateY(100%); }
    to { transform: translateX(-50%) translateY(0); }
}

body.agent-layout-body .agent-branch-switcher {
    position: relative !important;
    z-index: 60 !important;
}

body.agent-layout-body .agent-branch-sheet__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body.agent-layout-body .agent-branch-switcher[open] .agent-branch-sheet__backdrop {
    display: block;
}

body.agent-layout-body .agent-branch-sheet,
body.agent-layout-body .agent-branch-switcher .sbo-branch-switcher__panel.agent-branch-sheet,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet,
body.agent-layout-body.sbo-dashboard-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 121 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(78vh, 640px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22) !important;
    animation: agentBranchSheetUp 0.28s ease-out;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

/* Beat shared sales-dashboard branch panel / small / strong font rules */
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet p,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet span,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet small,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet strong,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet a,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet button,
body.agent-layout-body .agent-branch-sheet,
body.agent-layout-body .agent-branch-sheet p,
body.agent-layout-body .agent-branch-sheet span:not(.sbo-branch-option__state),
body.agent-layout-body .agent-branch-sheet small,
body.agent-layout-body .agent-branch-sheet strong,
body.agent-layout-body .agent-branch-sheet button {
    font-size: max(16px, 1em) !important;
}

body.agent-layout-body .agent-branch-sheet__handle {
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d5dce6;
    flex: 0 0 auto;
}

body.agent-layout-body .agent-branch-sheet__header,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet > header.agent-branch-sheet__header,
body.agent-layout-body .sbo-branch-switcher__panel.agent-branch-sheet > header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 18px 14px !important;
    border-bottom: 1px solid #E0E8FF !important;
    background: #fff !important;
    flex: 0 0 auto;
}

body.agent-layout-body .agent-branch-sheet__header > div {
    min-width: 0;
    flex: 1 1 auto;
}

body.agent-layout-body .agent-branch-sheet__header strong,
body.agent-layout-body .agent-branch-sheet__header #agent-branch-sheet-title,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet__header strong,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet > header strong {
    display: block !important;
    margin: 0 !important;
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 22px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

body.agent-layout-body .agent-branch-sheet__header small,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet__header small,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet > header small {
    display: block !important;
    margin: 6px 0 0 !important;
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.agent-layout-body .agent-branch-sheet__close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #F1F5F9;
    color: #64748B;
    cursor: pointer;
}

body.agent-layout-body .agent-branch-sheet__close:hover {
    background: #E2E8F0;
    color: #334155;
}

body.agent-layout-body .agent-branch-sheet__list {
    flex: 0 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #F8FAFC;
}

body.agent-layout-body .agent-branch-sheet__list form {
    margin: 0 0 8px;
}

body.agent-layout-body .agent-branch-sheet__list form:last-child {
    margin-bottom: 0;
}

body.agent-layout-body .agent-branch-sheet__option.sbo-branch-option,
body.agent-layout-body .agent-branch-sheet .sbo-branch-option.sales-dashboard-branch__option,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 76px !important;
    padding: 14px 14px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #E0E8FF !important;
    border-radius: 14px !important;
    background: #fff !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(30, 50, 80, 0.04) !important;
}

body.agent-layout-body .agent-branch-sheet__option.is-selected,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option.is-selected {
    background: #F3F7FF !important;
    border-color: #B1D2FF !important;
}

body.agent-layout-body .agent-branch-sheet__option:not(:disabled):active {
    background: #EFF6FF !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__icon,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    color: #3366CC !important;
    background: #E8F0FE !important;
}

body.agent-layout-body .agent-branch-sheet__option.is-selected .sbo-branch-option__icon {
    color: #fff !important;
    background: #3366CC !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy strong,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option__copy strong {
    color: #1e293b !important;
    font-family: var(--sb-font-bold) !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy small,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option__copy small {
    margin-top: 0 !important;
    color: #64748B !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__state.is-check {
    font-size: 0 !important;
    line-height: 0 !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__state.is-check svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

body.agent-layout-body .agent-branch-sheet .sbo-branch-option__state.is-off,
body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option__state.is-off {
    padding: 6px 12px !important;
    border-radius: 999px !important;
    color: #64748B !important;
    background: #EEF2F7 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

body.agent-layout-body.agent-branch-sheet-open {
    overflow: hidden !important;
}

@media (min-width: 344px) and (max-width: 1024px) {
    body.agent-layout-body .agent-branch-sheet,
    body.agent-layout-body .agent-branch-switcher .sbo-branch-switcher__panel.agent-branch-sheet,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(82vh, 680px) !important;
        border-radius: 20px 20px 0 0 !important;
    }

    body.agent-layout-body .agent-branch-sheet__header,
    body.agent-layout-body .sbo-branch-switcher__panel.agent-branch-sheet > header {
        padding: 14px 16px !important;
    }

    body.agent-layout-body .agent-branch-sheet__header strong,
    body.agent-layout-body .agent-branch-sheet__header #agent-branch-sheet-title,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet__header strong {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }

    body.agent-layout-body .agent-branch-sheet__header small,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet__header small,
    body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy small,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option__copy small,
    body.agent-layout-body .agent-branch-sheet .sbo-branch-option__state.is-off {
        font-size: 16px !important;
    }

    body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy strong,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option__copy strong {
        font-size: clamp(16px, 4.6vw, 18px) !important;
    }

    body.agent-layout-body .agent-branch-sheet__list {
        padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.agent-layout-body .agent-branch-sheet__option.sbo-branch-option,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .agent-branch-sheet .sbo-branch-option {
        min-height: 80px !important;
        padding: 14px !important;
    }
}

@media (min-width: 344px) and (max-width: 420px) {
    body.agent-layout-body .agent-branch-sheet__header,
    body.agent-layout-body .sbo-branch-switcher__panel.agent-branch-sheet > header {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    body.agent-layout-body .agent-branch-sheet__list {
        padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.agent-layout-body .agent-branch-sheet__option.sbo-branch-option {
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    body.agent-layout-body .agent-branch-sheet .sbo-branch-option__icon {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.agent-layout-body .agent-branch-sheet,
    body.agent-layout-body .agent-branch-switcher .sbo-branch-switcher__panel.agent-branch-sheet,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet {
        left: 50% !important;
        right: auto !important;
        width: min(100% - 32px, 480px) !important;
        max-width: 480px !important;
        animation: agentBranchSheetUpCenter 0.28s ease-out forwards;
    }

    body.agent-layout-body .agent-branch-sheet__header strong,
    body.agent-layout-body .agent-branch-sheet__header #agent-branch-sheet-title {
        font-size: 24px !important;
    }

    body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy strong {
        font-size: 18px !important;
    }

    body.agent-layout-body .agent-branch-sheet__header small,
    body.agent-layout-body .agent-branch-sheet .sbo-branch-option__copy small {
        font-size: 16px !important;
    }
}

@media (min-width: 1025px) {
    body.agent-layout-body .agent-branch-sheet,
    body.agent-layout-body .agent-branch-switcher .sbo-branch-switcher__panel.agent-branch-sheet,
    body.agent-layout-body.sales-dashboard-body .sales-dashboard-ui .sbo-branch-switcher__panel.agent-branch-sheet {
        left: 50% !important;
        right: auto !important;
        width: min(100%, 440px) !important;
        max-width: 440px !important;
        animation: agentBranchSheetUpCenter 0.28s ease-out forwards;
    }
}

/* =========================================================
   Money Agent ? More (mobile / tablet readable UI)
   ========================================================= */
body.agent-more-body.sales-dashboard-body,
body.agent-more-body.agent-dashboard-body {
    background: linear-gradient(180deg, #FFF 0%, #ECF0F7 100%);
    background-attachment: fixed;
}

body.agent-more-body .agent-more-content,
body.agent-more-body .agent-more-content p,
body.agent-more-body .agent-more-content span,
body.agent-more-body .agent-more-content small,
body.agent-more-body .agent-more-content label,
body.agent-more-body .agent-more-content a,
body.agent-more-body .agent-more-content button,
body.agent-more-body .agent-more-content strong,
body.agent-more-body .agent-more-content h1 {
    font-size: max(16px, 1em);
}

body.agent-more-body .agent-btn,
body.agent-more-body .agent-more-content .agent-btn {
    font-size: 16px !important;
}

.agent-dashboard-ui .agent-more-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 100px !important;
    gap: 12px;
    box-sizing: border-box;
    font-size: 16px;
}

.agent-dashboard-ui .agent-more-hero {
    padding: 2px 2px 0;
}

.agent-dashboard-ui .agent-more-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.agent-dashboard-ui .agent-more-profile > div {
    min-width: 0;
    flex: 1 1 auto;
}

.agent-dashboard-ui .agent-more-profile .agent-staff-card__avatar {
    width: 52px;
    height: 52px;
    font-size: 16px !important;
    flex: 0 0 auto;
}

.agent-dashboard-ui .agent-more-profile h1 {
    margin: 0;
    color: #000 !important;
    font-family: var(--sb-font-bold) !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.agent-dashboard-ui .agent-more-profile p {
    margin: 6px 0 0;
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular);
    font-size: 16px !important;
    line-height: 1.4;
    word-break: break-word;
}

.agent-dashboard-ui .agent-more-card {
    padding: 14px;
    border: 1px solid #E0E8FF;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 50, 80, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.agent-dashboard-ui .agent-more-card__label {
    margin: 0 0 4px;
    padding: 0 10px;
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.agent-dashboard-ui .agent-more-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    box-sizing: border-box;
    text-align: left;
}

.agent-dashboard-ui .agent-more-row:hover,
.agent-dashboard-ui .agent-more-row:focus-visible {
    background: #f8fafc;
    outline: none;
}

.agent-dashboard-ui .agent-more-row strong,
.agent-dashboard-ui .agent-more-row span {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    text-indent: 0;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-more-row strong {
    color: #000 !important;
    font-family: var(--sb-font-semibold) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.35;
    word-break: break-word;
    /* Optical align with regular face (semibold side-bearing sits ~1px left) */
    margin-left: 1px;
}

.agent-dashboard-ui .agent-more-row span {
    color: #8a94a6 !important;
    font-family: var(--sb-font-regular) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.4;
    word-break: break-word;
}

.agent-dashboard-ui .agent-more-logout {
    margin: 0;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
}

.agent-dashboard-ui .agent-more-logout .agent-btn,
.agent-dashboard-ui .agent-more-logout .agent-btn--danger {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-family: var(--sb-font-semibold) !important;
    line-height: 1.2 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

@media (min-width: 344px) and (max-width: 1024px) {
    .agent-dashboard-ui .agent-more-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 12px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px;
    }

    .agent-dashboard-ui .agent-more-profile h1 {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }

    .agent-dashboard-ui .agent-more-profile p,
    .agent-dashboard-ui .agent-more-card__label,
    .agent-dashboard-ui .agent-more-row strong,
    .agent-dashboard-ui .agent-more-row span,
    .agent-dashboard-ui .agent-more-profile .agent-staff-card__avatar,
    .agent-dashboard-ui .agent-more-logout .agent-btn,
    .agent-dashboard-ui .agent-more-logout .agent-btn--danger,
    body.agent-more-body .agent-btn,
    body.agent-more-body .agent-more-content .agent-btn {
        font-size: 16px !important;
    }

    .agent-dashboard-ui .agent-more-card {
        padding: 14px;
        border-radius: 16px;
    }

    .agent-dashboard-ui .agent-more-row {
        padding: 14px 12px;
        min-height: 56px;
        justify-content: center;
    }

    .agent-dashboard-ui .agent-more-logout .agent-btn,
    .agent-dashboard-ui .agent-more-logout .agent-btn--danger {
        min-height: 48px !important;
    }
}

@media (min-width: 344px) and (max-width: 560px) {
    .agent-dashboard-ui .agent-more-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .agent-dashboard-ui .agent-more-profile {
        gap: 12px;
    }

    .agent-dashboard-ui .agent-more-profile .agent-staff-card__avatar {
        width: 48px;
        height: 48px;
    }

    .agent-dashboard-ui .agent-more-card {
        padding: 12px;
    }

    .agent-dashboard-ui .agent-more-row {
        padding: 12px 10px;
    }
}

@media (min-width: 561px) and (max-width: 1024px) {
    .agent-dashboard-ui .agent-more-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 720px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .agent-dashboard-ui .agent-more-profile .agent-staff-card__avatar {
        width: 56px;
        height: 56px;
        font-size: 16px !important;
    }

    .agent-dashboard-ui .agent-more-profile h1 {
        font-size: 24px !important;
    }

    .agent-dashboard-ui .agent-more-card {
        padding: 16px;
    }

    .agent-dashboard-ui .agent-more-row {
        padding: 16px 14px;
    }
}

@media (min-width: 768px) {
    body.agent-more-body .agent-btn,
    body.agent-more-body .agent-more-content .agent-btn,
    .agent-dashboard-ui .agent-more-logout .agent-btn,
    .agent-dashboard-ui .agent-more-logout .agent-btn--danger {
        font-size: 18px !important;
    }

    .agent-dashboard-ui .agent-more-profile h1 {
        font-size: 26px !important;
    }

    .agent-dashboard-ui .agent-more-row strong {
        font-size: 18px !important;
    }
}

@media (min-width: 1025px) {
    .agent-dashboard-ui .agent-more-content {
        max-width: 720px !important;
        margin-left: auto;
        margin-right: auto;
        padding: 20px 24px 120px !important;
    }
}