:root {
    --cb-bg: #f7f7fb;
    --cb-surface: #ffffff;
    --cb-surface-soft: #fbfbfe;
    --cb-line: #e8e7f2;
    --cb-line-strong: #dcd9ec;
    --cb-text: #141b34;
    --cb-text-soft: #8f98b2;
    --cb-text-muted: #b1b8cd;
    --cb-purple: #6a4df5;
    --cb-purple-strong: #5e3ff0;
    --cb-purple-soft: #f1edff;
    --cb-red-soft: #fff0f1;
    --cb-red: #ff5a65;
    --cb-green-soft: #ecfff5;
    --cb-green: #15b86f;
    --cb-amber-soft: #fff6df;
    --cb-amber: #e89b18;
    --cb-blue-soft: #eef5ff;
    --cb-blue: #4c83ff;
    --cb-shadow: 0 20px 60px rgba(29, 34, 68, 0.08);
    --cb-radius-xl: 28px;
    --cb-radius-lg: 22px;
    --cb-radius-md: 16px;
    --cb-radius-sm: 12px;
}

/* Auto-schedule labour planning and fairness controls */
.cb-page-body-rota .cb-rota-v3-auto-budget[hidden],
.cb-page-body-rota .cb-rota-v3-auto-budget [hidden] {
    display: none !important;
}

.cb-page-body-rota .cb-rota-v3-budget-fields {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
}

.cb-page-body-rota .cb-rota-v3-budget-fields .cb-rota-v2-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.cb-page-body-rota .cb-rota-v3-budget-fields .cb-rota-v2-field > span:first-child,
.cb-page-body-rota .cb-rota-v3-budget-mode legend {
    min-height: 16px;
    padding: 0;
    color: #4d5878;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v3-budget-mode {
    min-width: 0;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.cb-page-body-rota .cb-rota-v3-budget-mode > div {
    height: 40px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid #dfe5f0;
    border-radius: 8px;
    background: #f6f7fb;
}

.cb-page-body-rota .cb-rota-v3-budget-mode label {
    min-width: 0;
    position: relative;
    cursor: pointer;
}

.cb-page-body-rota .cb-rota-v3-budget-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cb-page-body-rota .cb-rota-v3-budget-mode span {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #727d98;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v3-budget-mode input:checked + span {
    border-color: #ded8ff;
    background: #ffffff;
    color: #654df0;
    box-shadow: 0 2px 7px rgba(46, 55, 91, 0.08);
}

.cb-page-body-rota .cb-rota-v3-budget-mode input:focus-visible + span {
    outline: 3px solid rgba(106, 85, 246, 0.14);
    outline-offset: 1px;
}

.cb-page-body-rota .cb-rota-v3-money-input,
.cb-page-body-rota .cb-rota-v3-suffix-input {
    min-width: 0;
    height: 40px;
    display: grid;
    align-items: center;
    border: 1px solid #dfe5f0;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v3-money-input {
    grid-template-columns: auto minmax(0, 1fr);
}

.cb-page-body-rota .cb-rota-v3-suffix-input {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cb-page-body-rota .cb-rota-v3-money-input i,
.cb-page-body-rota .cb-rota-v3-suffix-input i {
    padding: 0 10px;
    color: #7f89a2;
    font-size: 11px;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v3-money-input input,
.cb-page-body-rota .cb-rota-v3-suffix-input input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 9px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #17204d;
    font: inherit;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v3-money-input:focus-within,
.cb-page-body-rota .cb-rota-v3-suffix-input:focus-within {
    border-color: #a99afa;
    outline: 3px solid rgba(106, 85, 246, 0.1);
}

.cb-page-body-rota .cb-rota-v3-budget-summary {
    min-height: 62px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, 1.7fr);
    align-items: stretch;
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    background: #f8f9fc;
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v3-budget-summary > p {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 3px;
    margin: 0;
    padding: 10px 13px;
}

.cb-page-body-rota .cb-rota-v3-budget-summary > p + p {
    border-left: 1px solid #e5e9f2;
}

.cb-page-body-rota .cb-rota-v3-budget-summary small {
    color: #8b95ad;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v3-budget-summary strong {
    overflow: hidden;
    color: #18214b;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v3-budget-status {
    color: #67728e;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v3-budget-status.is-ready {
    background: #eefaf5;
    color: #13815c;
}

.cb-page-body-rota .cb-rota-v3-budget-status.is-warning {
    background: #fff8e8;
    color: #9b6700;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .cb-page-body-rota .cb-rota-v3-budget-fields,
    .cb-page-body-rota .cb-rota-v3-budget-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-page-body-rota .cb-rota-v3-budget-summary > p:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e5e9f2;
    }

    .cb-page-body-rota .cb-rota-v3-budget-summary > p:nth-child(4) {
        border-top: 1px solid #e5e9f2;
    }
}

@media (max-width: 520px) {
    .cb-page-body-rota .cb-rota-v3-budget-fields,
    .cb-page-body-rota .cb-rota-v3-budget-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-page-body-rota .cb-rota-v3-budget-summary > p + p {
        border-left: 0;
        border-top: 1px solid #e5e9f2;
    }

    .cb-page-body-rota .cb-rota-v2-auto-loader-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Rota planner v3 */
.cb-page-body-rota .cb-page-shell {
    padding: 22px 24px 36px;
    background: #f6f7fb;
}

.cb-page-body-rota .cb-rota-v3 {
    display: grid;
    gap: 12px;
    color: #111a3f;
}

.cb-page-body-rota .cb-rota-v3,
.cb-page-body-rota .cb-rota-v3 * {
    letter-spacing: 0;
}

.cb-page-body-rota .cb-rota-v3-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 2px 8px;
}

.cb-page-body-rota .cb-rota-v3-heading {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.cb-page-body-rota .cb-rota-v3-kicker {
    color: #6d55f5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v3-heading h1 {
    margin: 0;
    color: #111a3f;
    font-size: 31px;
    line-height: 1.08;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v3-heading p {
    margin: 0;
    color: #737d9b;
    font-size: 13px;
    line-height: 1.45;
}

.cb-page-body-rota .cb-rota-v3-publish {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.cb-page-body-rota .cb-rota-v3-publish > form {
    display: inline-flex;
}

.cb-page-body-rota .cb-rota-v3-publish-state {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 145px;
}

.cb-page-body-rota .cb-rota-v3-publish-state > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a8b0c4;
    box-shadow: 0 0 0 4px #edf0f6;
}

.cb-page-body-rota .cb-rota-v3-publish-state.has-drafts > span {
    background: #e99a00;
    box-shadow: 0 0 0 4px #fff3d7;
}

.cb-page-body-rota .cb-rota-v3-publish-state.is-published > span {
    background: #00a978;
    box-shadow: 0 0 0 4px #ddf8ef;
}

.cb-page-body-rota .cb-rota-v3-publish-state > div {
    display: grid;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v3-publish-state strong {
    color: #182148;
    font-size: 12px;
    line-height: 1.2;
}

.cb-page-body-rota .cb-rota-v3-publish-state small {
    color: #8c95ac;
    font-size: 10px;
    line-height: 1.2;
}

.cb-page-body-rota .cb-rota-v3-primary,
.cb-page-body-rota .cb-rota-v3-auto,
.cb-page-body-rota .cb-rota-v3-action,
.cb-page-body-rota .cb-rota-v3-icon-btn,
.cb-page-body-rota .cb-rota-v3-text-btn {
    min-height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dfe4ef;
    background: #ffffff;
    color: #35405f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.cb-page-body-rota .cb-rota-v3-primary,
.cb-page-body-rota .cb-rota-v3-auto {
    padding: 0 14px;
    border-color: #6b52f2;
    background: #6b52f2;
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(85, 67, 209, 0.18);
}

.cb-page-body-rota .cb-rota-v3-primary:hover,
.cb-page-body-rota .cb-rota-v3-auto:hover {
    border-color: #5941dc;
    background: #5941dc;
}

.cb-page-body-rota .cb-rota-v3-primary.is-disabled,
.cb-page-body-rota .cb-rota-v3-primary:disabled {
    border-color: #e0e4ed;
    background: #e9ecf2;
    color: #929bb0;
    box-shadow: none;
    cursor: not-allowed;
}

.cb-page-body-rota .cb-rota-v3-primary svg,
.cb-page-body-rota .cb-rota-v3-auto svg,
.cb-page-body-rota .cb-rota-v3-action svg,
.cb-page-body-rota .cb-rota-v3-icon-btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.cb-page-body-rota .cb-rota-v3-commandbar {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e3e7f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(40, 52, 96, 0.04);
}

.cb-page-body-rota .cb-rota-v3-weeknav {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v3-icon-btn {
    width: 34px;
    min-height: 34px;
    padding: 0;
    color: #68728f;
}

.cb-page-body-rota .cb-rota-v3-icon-btn:hover,
.cb-page-body-rota .cb-rota-v3-action:hover,
.cb-page-body-rota .cb-rota-v3-text-btn:hover {
    border-color: #c9c1fb;
    background: #f6f3ff;
    color: #5e48e8;
}

.cb-page-body-rota .cb-rota-v3-weekcopy {
    display: grid;
    gap: 2px;
    min-width: 146px;
    padding: 0 3px;
}

.cb-page-body-rota .cb-rota-v3-weekcopy span {
    color: #949db3;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v3-weekcopy strong {
    margin: 0;
    color: #151e46;
    font-size: 13px;
    line-height: 1.2;
}

.cb-page-body-rota .cb-rota-v3-text-btn {
    min-height: 32px;
    padding: 0 10px;
}

.cb-page-body-rota .cb-rota-v3-location {
    min-height: 32px;
    padding: 0 10px;
    border-left: 1px solid #e7eaf1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6d7691;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v3-location svg {
    width: 13px;
    height: 13px;
    color: #6b52f2;
}

.cb-page-body-rota .cb-rota-v3-search {
    width: min(100%, 280px);
    min-height: 34px;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #e2e6ef;
    border-radius: 6px;
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3-search svg {
    width: 14px;
    height: 14px;
    color: #919ab0;
    flex: 0 0 auto;
}

.cb-page-body-rota .cb-rota-v3-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1d264d;
    font: 600 11px/1.2 inherit;
}

.cb-page-body-rota .cb-rota-v3-search input::placeholder {
    color: #9ca5b8;
}

.cb-page-body-rota .cb-rota-v3-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    max-width: none;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v3-actions > .cb-rota-v2-badge,
.cb-page-body-rota .cb-rota-v3-actions > form {
    display: none !important;
}

.cb-page-body-rota .cb-rota-v3-action {
    min-height: 34px;
    padding: 0 10px;
}

.cb-page-body-rota .cb-rota-v3-action.is-active {
    border-color: #6b52f2;
    background: #eeeafe;
    color: #5e48e8;
}

.cb-page-body-rota .cb-rota-v3-action-danger {
    border-color: #f2d5dc;
    color: #c83d5c;
}

.cb-page-body-rota .cb-rota-v3-action-danger:hover {
    border-color: #e9aabb;
    background: #fff2f5;
    color: #b32245;
}

.cb-page-body-rota .cb-rota-v3-auto {
    min-height: 34px;
    padding: 0 12px;
}

.cb-page-body-rota .cb-rota-v3-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e3e7f0;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v3-summary > div {
    min-width: 0;
    min-height: 76px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-right: 1px solid #e8ebf2;
}

.cb-page-body-rota .cb-rota-v3-summary > div:last-child {
    border-right: 0;
}

.cb-page-body-rota .cb-rota-v3-summary-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cb-page-body-rota .cb-rota-v3-summary-icon svg {
    width: 16px;
    height: 16px;
}

.cb-page-body-rota .cb-rota-v3-summary-icon.is-purple { color: #684df0; background: #eeeafd; }
.cb-page-body-rota .cb-rota-v3-summary-icon.is-blue { color: #2877dd; background: #e9f2ff; }
.cb-page-body-rota .cb-rota-v3-summary-icon.is-green { color: #008d67; background: #e0f7ef; }
.cb-page-body-rota .cb-rota-v3-summary-icon.is-amber { color: #b46b00; background: #fff1d8; }

.cb-page-body-rota .cb-rota-v3-summary p {
    margin: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 9px;
    align-items: baseline;
}

.cb-page-body-rota .cb-rota-v3-summary small {
    grid-column: 1 / -1;
    color: #8790a8;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v3-summary strong {
    color: #121b42;
    font-size: 20px;
    line-height: 1.1;
}

.cb-page-body-rota .cb-rota-v3-summary em {
    color: #8992a8;
    font-size: 9px;
    font-style: normal;
    line-height: 1.3;
}

.cb-page-body-rota .cb-rota-v3-boardbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 2px 0;
}

.cb-page-body-rota .cb-rota-v3-boardbar > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.cb-page-body-rota .cb-rota-v3-boardbar strong {
    color: #182047;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v3-boardbar > div:first-child span {
    color: #8b94aa;
    font-size: 10px;
}

.cb-page-body-rota .cb-rota-v3-legend {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
}

.cb-page-body-rota .cb-rota-v3-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #727b93;
    font-size: 9px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v3-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid transparent;
}

.cb-page-body-rota .cb-rota-v3-legend i.is-published { background: #ddd8fb; border-color: #8a77e7; }
.cb-page-body-rota .cb-rota-v3-legend i.is-draft { background: #ffffff; border: 1px dashed #7f6be2; }
.cb-page-body-rota .cb-rota-v3-legend i.is-restricted { background: #fff0cf; border-color: #dfae49; }
.cb-page-body-rota .cb-rota-v3-legend i.is-unavailable { background: #e5e8ee; border-color: #b4bac7; }

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-boardwrap {
    max-height: calc(100vh - 365px);
    min-height: 365px;
    overflow: auto;
    padding: 0;
    border: 1px solid #dfe4ed;
    border-radius: 8px;
    background: #ffffff;
    scrollbar-color: #c8cede #f4f6fa;
    scrollbar-width: thin;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-board {
    min-width: 1420px;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid {
    grid-template-columns: 210px repeat(7, minmax(145px, 1fr)) 84px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-head {
    min-height: 72px;
    position: sticky;
    top: 0;
    z-index: 8;
    border-bottom: 1px solid #dfe4ed;
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-head > div,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-foot > div {
    border-right: 1px solid #e6e9f0;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-col-staff {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #ffffff;
    box-shadow: 1px 0 0 #dfe4ed;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-head .cb-rota-v2-col-staff {
    z-index: 10;
    background: #f8f9fc;
    display: grid;
    align-content: center;
    gap: 3px;
    padding-left: 16px !important;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-head .cb-rota-v2-col-staff span {
    color: #555f7a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-head .cb-rota-v2-col-staff small {
    color: #9aa2b5;
    font-size: 9px;
    font-weight: 600;
    text-transform: none;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-col-hours {
    position: sticky;
    right: 0;
    z-index: 5;
    background: #ffffff;
    box-shadow: -1px 0 0 #dfe4ed;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-head .cb-rota-v2-col-hours {
    z-index: 10;
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead {
    min-width: 0;
    padding: 9px 8px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 2px;
    border-right: 1px solid #e6e9f0;
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead.is-weekend {
    background: #f3f5f9;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead.is-today {
    box-shadow: inset 0 3px 0 #6b52f2;
    background: #f5f2ff;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead > span {
    color: #7f899f;
    font-size: 9px;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead > strong {
    color: #151d44;
    font-size: 17px;
    line-height: 1.1;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead > strong small {
    color: #8c95a9;
    font-size: 10px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-dayhead > em {
    color: #969eb1;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-row {
    min-height: 80px;
    border-bottom: 1px solid #e6e9f0;
    background: #ffffff;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-row:last-of-type {
    border-bottom: 0;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-row > div {
    border-right: 1px solid #e8ebf2;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-staffcell {
    gap: 10px;
    min-height: 80px;
    padding: 10px 14px !important;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 7px;
    font-size: 10px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-staffcopy {
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-staffcopy strong {
    max-width: 145px;
    color: #182047;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-staffcopy span,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-staffcopy small {
    color: #8b94aa;
    font-size: 9px;
    line-height: 1.2;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-staffcopy small {
    color: #a2a9ba;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell {
    min-height: 80px;
    padding: 5px;
    background: #ffffff;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell.is-weekend:not(.is-unavailable) {
    background: #fbfcfe;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell.is-restricted {
    background: #fffaf0;
    box-shadow: inset 0 2px 0 #eab44d;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell.is-unavailable {
    background: #f0f2f5;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell.has-availability-conflict {
    background: #fff1f4;
    box-shadow: inset 0 2px 0 #df4b6b;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell.is-drop-target {
    background: #eeebff;
    box-shadow: inset 0 0 0 2px #765ff0;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-cell.is-drop-blocked {
    background: #ffe8ed;
    box-shadow: inset 0 0 0 2px #d94062;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift,
.cb-page-body-rota .cb-rota-v3-unavailable {
    min-height: 68px;
    height: 100%;
    border-radius: 6px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #9ba4b6;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot > span {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f7;
    color: #7c869d;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 140ms ease, transform 140ms ease;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot > span svg {
    width: 13px;
    height: 13px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot > small {
    color: #ad7b1e;
    font-size: 8px;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot:hover,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot:focus-visible {
    border-color: #cfc7fa;
    background: #f8f6ff;
    color: #654de9;
    box-shadow: none;
    transform: none;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot:hover > span,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-slot:focus-visible > span,
.cb-page-body-rota .cb-rota-v3 .is-restricted .cb-rota-v2-slot > span {
    opacity: 1;
    transform: scale(1);
}

.cb-page-body-rota .cb-rota-v3-unavailable {
    padding: 8px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
    border: 1px solid #dde1e8;
    color: #929aab;
    cursor: not-allowed;
}

.cb-page-body-rota .cb-rota-v3-unavailable svg {
    width: 13px;
    height: 13px;
}

.cb-page-body-rota .cb-rota-v3-unavailable strong {
    font-size: 8px;
    line-height: 1.1;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift {
    min-width: 0;
    padding: 7px 8px;
    align-content: start;
    gap: 3px;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift:hover {
    transform: none;
    border-color: currentColor;
    box-shadow: 0 5px 12px rgba(41, 52, 91, 0.1);
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift.is-draft {
    border-style: dashed;
}

.cb-page-body-rota .cb-rota-v3.is-hiding-drafts .cb-rota-v2-shift.is-draft {
    display: none;
}

.cb-page-body-rota .cb-rota-v3-shift-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift .cb-rota-v3-shift-top strong {
    min-width: 0;
    color: inherit;
    font-size: 10px;
    line-height: 1.2;
}

.cb-page-body-rota .cb-rota-v3-shift-top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift .cb-rota-v3-shift-role {
    width: 100%;
    color: #303a58;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift > small {
    color: #778099;
    font-size: 8px;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift > em {
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #bd284a;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift > em svg {
    width: 9px;
    height: 9px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shift.has-availability-conflict {
    border-color: #dd5874;
    background: #fff7f9;
    color: #b42e4b;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell {
    min-height: 80px;
    padding: 10px 10px 10px 8px;
    align-content: center;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell strong {
    color: #1d254b;
    font-size: 12px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell span {
    color: #9aa2b4;
    font-size: 8px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell > i {
    width: 58px;
    height: 3px;
    border-radius: 2px;
    display: block;
    overflow: hidden;
    background: #e9ecf2;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell > i b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #6b52f2;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell.is-over strong {
    color: #c56e00;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-hourscell.is-over > i b {
    background: #d9860b;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-foot {
    min-height: 48px;
    position: sticky;
    bottom: 0;
    z-index: 7;
    border-top: 1px solid #dfe4ed;
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-foot .cb-rota-v2-col-staff,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-grid-foot .cb-rota-v2-col-hours {
    z-index: 9;
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-daytotal {
    background: #f8f9fc;
}

.cb-page-body-rota .cb-rota-v3-grid-foot .cb-rota-v2-daytotal > strong:not(.cb-rota-v3-daytotal-value) {
    display: none;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-daytotal .cb-rota-v3-daytotal-value {
    color: #222a4f;
    font-size: 10px;
}

.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-daytotal span {
    color: #9aa2b4;
    font-size: 7px;
}

.cb-page-body-rota .cb-rota-v3-availability-note {
    margin: -4px 0 14px;
    padding: 10px 11px;
    border: 1px solid #eed190;
    border-radius: 6px;
    display: grid;
    gap: 3px;
    background: #fff8e8;
}

.cb-page-body-rota .cb-rota-v3-availability-note[hidden] {
    display: none;
}

.cb-page-body-rota .cb-rota-v3-availability-note.is-blocked {
    border-color: #efb3c0;
    background: #fff1f4;
}

.cb-page-body-rota .cb-rota-v3-availability-note strong {
    color: #7c570c;
    font-size: 11px;
}

.cb-page-body-rota .cb-rota-v3-availability-note.is-blocked strong {
    color: #ae2847;
}

.cb-page-body-rota .cb-rota-v3-availability-note span {
    color: #8c754b;
    font-size: 9px;
    line-height: 1.4;
}

.cb-page-body-rota .cb-rota-v3-availability-note.is-blocked span {
    color: #956171;
}

.cb-page-body-rota .cb-rota-v3-copy-modal {
    width: min(440px, calc(100vw - 28px));
    padding: 24px;
    border: 1px solid #e1e5ee;
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(28, 37, 72, 0.2);
}

.cb-page-body-rota .cb-rota-v3-copy-modal .cb-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 6px;
}

.cb-page-body-rota .cb-rota-v3-copy-modal .cb-modal-close svg {
    width: 16px;
    height: 16px;
}

.cb-page-body-rota .cb-rota-v3-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6349ed;
    background: #eeeafd;
}

.cb-page-body-rota .cb-rota-v3-modal-icon svg {
    width: 18px;
    height: 18px;
}

.cb-page-body-rota .cb-rota-v3-modal-heading {
    margin-top: 14px;
    display: grid;
    gap: 6px;
}

.cb-page-body-rota .cb-rota-v3-modal-heading > span {
    color: #6c53f2;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v3-modal-heading h3 {
    margin: 0;
    color: #151d43;
    font-size: 20px;
    line-height: 1.2;
}

.cb-page-body-rota .cb-rota-v3-modal-heading p {
    margin: 0;
    color: #7e879f;
    font-size: 11px;
    line-height: 1.55;
}

.cb-page-body-rota .cb-rota-v3-copy-form {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

.cb-page-body-rota .cb-rota-v3-checkbox {
    padding: 11px;
    border: 1px solid #e4e7ef;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #f9fafc;
}

.cb-page-body-rota .cb-rota-v3-checkbox input {
    margin-top: 2px;
    accent-color: #6b52f2;
}

.cb-page-body-rota .cb-rota-v3-checkbox span {
    display: grid;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v3-checkbox strong {
    color: #253052;
    font-size: 10px;
}

.cb-page-body-rota .cb-rota-v3-checkbox small {
    color: #8a93aa;
    font-size: 9px;
}

.cb-page-body-rota .cb-rota-v3-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.cb-page-body-rota .cb-rota-v2-confirm-modal,
.cb-page-body-rota .cb-rota-v2-autoschedule {
    border-radius: 8px;
}

@media (max-width: 1540px) {
    .cb-page-body-rota .cb-rota-v3-commandbar {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
    }

    .cb-page-body-rota .cb-rota-v3-search {
        justify-self: end;
    }

    .cb-page-body-rota .cb-rota-v3-actions {
        grid-column: 1 / -1;
    }

    .cb-page-body-rota .cb-rota-v3 .cb-rota-v2-boardwrap {
        max-height: calc(100vh - 405px);
    }
}

@media (max-width: 1100px) {
    .cb-page-body-rota .cb-page-shell {
        padding: 18px 16px 30px;
    }

    .cb-page-body-rota .cb-rota-v3-pagehead {
        align-items: flex-start;
    }

    .cb-page-body-rota .cb-rota-v3-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-page-body-rota .cb-rota-v3-summary > div:nth-child(2) {
        border-right: 0;
    }

    .cb-page-body-rota .cb-rota-v3-summary > div:nth-child(-n + 2) {
        border-bottom: 1px solid #e8ebf2;
    }

    .cb-page-body-rota .cb-rota-v3-boardbar {
        align-items: flex-start;
    }

    .cb-page-body-rota .cb-rota-v3-boardbar > div:first-child {
        display: grid;
        gap: 3px;
    }

    .cb-page-body-rota .cb-rota-v3 .cb-rota-v2-boardwrap {
        max-height: calc(100vh - 460px);
    }
}

@media (max-width: 760px) {
    .cb-page-body-rota .cb-page-shell {
        padding: 14px 10px 24px;
    }

    .cb-page-body-rota .cb-rota-v3-pagehead {
        display: grid;
        gap: 14px;
    }

    .cb-page-body-rota .cb-rota-v3-heading h1 {
        font-size: 26px;
    }

    .cb-page-body-rota .cb-rota-v3-publish {
        justify-content: space-between;
        width: 100%;
    }

    .cb-page-body-rota .cb-rota-v3-commandbar {
        grid-template-columns: minmax(0, 1fr);
        padding: 9px;
    }

    .cb-page-body-rota .cb-rota-v3-weeknav {
        width: 100%;
    }

    .cb-page-body-rota .cb-rota-v3-location {
        display: none;
    }

    .cb-page-body-rota .cb-rota-v3-search {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .cb-page-body-rota .cb-rota-v3-actions {
        grid-column: auto;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .cb-page-body-rota .cb-rota-v3-summary > div {
        min-height: 70px;
        padding: 10px;
    }

    .cb-page-body-rota .cb-rota-v3-summary-icon {
        display: none;
    }

    .cb-page-body-rota .cb-rota-v3-summary p {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .cb-page-body-rota .cb-rota-v3-summary strong,
    .cb-page-body-rota .cb-rota-v3-summary em {
        grid-column: 1;
    }

    .cb-page-body-rota .cb-rota-v3-boardbar {
        display: grid;
        gap: 8px;
    }

    .cb-page-body-rota .cb-rota-v3-legend {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .cb-page-body-rota .cb-rota-v3 .cb-rota-v2-boardwrap {
        max-height: calc(100vh - 510px);
        min-height: 330px;
    }

    .cb-page-body-rota .cb-rota-v3-copy-modal {
        padding: 20px;
    }
}

/* Rota shift editor v4 */
body.cb-page-body-rota.cb-rota-v2-drawer-open {
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v2-drawer.cb-rota-v4-editor {
    width: min(520px, calc(100vw - 24px));
    height: 100dvh;
    border-left: 1px solid #dfe4ee;
    background: #ffffff;
    box-shadow: -18px 0 42px rgba(24, 32, 67, 0.16);
    color: #111a42;
}

.cb-page-body-rota.cb-rota-v2-drawer-open .cb-rota-v2-drawer-backdrop {
    background: rgba(18, 24, 48, 0.34);
}

.cb-page-body-rota .cb-rota-v4-editor-topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid #e8ebf2;
    background: #ffffff;
}

.cb-page-body-rota .cb-rota-v4-editor-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.cb-page-body-rota .cb-rota-v4-editor-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f0edff;
    color: #684cf5;
}

.cb-page-body-rota .cb-rota-v4-editor-icon svg,
.cb-page-body-rota .cb-rota-v4-section-head > span svg,
.cb-page-body-rota .cb-rota-v4-break-icon svg {
    width: 17px;
    height: 17px;
}

.cb-page-body-rota .cb-rota-v4-editor-brand > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v4-editor-brand span:not(.cb-rota-v4-editor-icon) {
    color: #8c95aa;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v4-editor-brand strong {
    color: #111a42;
    font-size: 14px;
}

.cb-page-body-rota .cb-rota-v2-drawer-close.cb-rota-v4-editor-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #e3e7f0;
    border-radius: 6px;
    background: #ffffff;
    color: #7f899f;
}

.cb-page-body-rota .cb-rota-v2-drawer-close.cb-rota-v4-editor-close:hover {
    border-color: #cfd5e2;
    background: #f7f8fb;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs.cb-rota-v4-editor-tabs {
    min-height: 48px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    padding: 0 20px;
    border-bottom: 1px solid #e8ebf2;
    background: #ffffff;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs.cb-rota-v4-editor-tabs > button {
    width: auto;
    min-width: 0;
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
    border-bottom: 2px solid transparent;
    color: #7d879e;
    font-size: 13px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs.cb-rota-v4-editor-tabs > button svg {
    width: 16px;
    height: 16px;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs.cb-rota-v4-editor-tabs > button.is-active {
    border-bottom-color: #684cf5;
    color: #573de2;
}

.cb-page-body-rota .cb-rota-v2-drawer-body.cb-rota-v4-editor-panel {
    height: calc(100dvh - 112px);
    padding: 0;
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v2-drawer-body.cb-rota-v4-editor-panel.is-active {
    display: block;
}

.cb-page-body-rota .cb-rota-v2-drawer-form.cb-rota-v4-editor-form {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
}

.cb-page-body-rota .cb-rota-v4-editor-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.cb-page-body-rota .cb-rota-v2-drawer-head.cb-rota-v4-shift-head {
    min-height: 102px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 20px 22px 18px;
    border: 0;
}

.cb-page-body-rota .cb-rota-v4-shift-head > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.cb-page-body-rota .cb-rota-v4-mode {
    color: #684cf5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v2-drawer-head.cb-rota-v4-shift-head h3 {
    color: #111a42;
    font-size: 24px;
    line-height: 1.15;
}

.cb-page-body-rota .cb-rota-v2-drawer-head.cb-rota-v4-shift-head p {
    overflow: hidden;
    color: #7e889f;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v4-draft-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin-top: 5px;
    padding: 0 9px;
    border: 1px solid #e1dafa;
    border-radius: 999px;
    background: #f5f2ff;
    color: #654bea;
    font-size: 11px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v4-draft-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cb-page-body-rota .cb-rota-v4-draft-state.is-published {
    border-color: #bce8d9;
    background: #ecfbf5;
    color: #087c5b;
}

.cb-page-body-rota .cb-rota-v4-editor-section {
    display: grid;
    gap: 16px;
    padding: 20px 22px 22px;
    border-top: 1px solid #eceef4;
}

.cb-page-body-rota .cb-rota-v4-section-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v4-section-head > span,
.cb-page-body-rota .cb-rota-v4-break-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f1f3f7;
    color: #59657d;
}

.cb-page-body-rota .cb-rota-v4-section-head > div,
.cb-page-body-rota .cb-rota-v4-break-copy > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v4-section-head h4,
.cb-page-body-rota .cb-rota-v4-break-copy h4 {
    margin: 0;
    color: #17204d;
    font-size: 14px;
}

.cb-page-body-rota .cb-rota-v4-section-head p,
.cb-page-body-rota .cb-rota-v4-break-copy p {
    margin: 0;
    color: #919aaf;
    font-size: 11px;
    line-height: 1.35;
}

.cb-page-body-rota .cb-rota-v4-assignment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, 0.75fr);
    gap: 14px;
}

.cb-page-body-rota .cb-rota-v4-field-full {
    grid-column: 1 / -1;
}

.cb-page-body-rota .cb-rota-v4-field,
.cb-page-body-rota .cb-rota-v4-timegrid label {
    gap: 6px;
}

.cb-page-body-rota .cb-rota-v4-field > span,
.cb-page-body-rota .cb-rota-v4-timegrid label > span {
    color: #59637a;
    font-size: 11px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v4-field input,
.cb-page-body-rota .cb-rota-v4-field select,
.cb-page-body-rota .cb-rota-v4-timegrid input {
    min-height: 44px;
    border: 1px solid #dfe4ee;
    border-radius: 6px;
    background: #fbfcfe;
    padding: 0 12px;
    color: #182149;
    font-size: 13px;
    outline: none;
}

.cb-page-body-rota .cb-rota-v4-field input:focus,
.cb-page-body-rota .cb-rota-v4-field select:focus,
.cb-page-body-rota .cb-rota-v4-timegrid input:focus {
    border-color: #725af1;
    box-shadow: 0 0 0 3px rgba(104, 76, 245, 0.1);
}

.cb-page-body-rota .cb-rota-v2-timegrid.cb-rota-v4-timegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(118px, 0.76fr);
    gap: 12px;
    align-items: end;
}

.cb-page-body-rota .cb-rota-v2-hourspill.cb-rota-v4-duration {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #ead59c;
    border-radius: 6px;
    background: #fffaf0;
    color: #7f5d09;
}

.cb-page-body-rota .cb-rota-v4-duration > span {
    color: #9c7b29;
    font-size: 10px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v4-duration > strong {
    color: #7d5700;
    font-size: 16px;
}

.cb-page-body-rota .cb-rota-v3-availability-note.cb-rota-v4-availability-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
}

.cb-page-body-rota .cb-rota-v4-break-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cb-page-body-rota .cb-rota-v4-break-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-mini.cb-rota-v4-link-button {
    min-height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dfe4ee;
    border-radius: 6px;
    background: #ffffff;
    color: #4f3fd1;
    font-size: 11px;
}

.cb-page-body-rota .cb-rota-v4-link-button svg,
.cb-page-body-rota .cb-rota-v4-view-all svg,
.cb-page-body-rota .cb-rota-v4-delete svg {
    width: 14px;
    height: 14px;
}

.cb-page-body-rota .cb-rota-v2-drawer-footer.cb-rota-v4-editor-footer {
    min-height: 70px;
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e5e8f0;
    background: #ffffff;
}

.cb-page-body-rota .cb-rota-v4-footer-spacer {
    flex: 1 1 auto;
}

.cb-page-body-rota .cb-rota-v4-editor-footer button {
    min-height: 40px;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.cb-page-body-rota .cb-rota-v2-danger.cb-rota-v4-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: #f0cbd3;
    background: #fff8f9;
    color: #c63c58;
}

.cb-page-body-rota .cb-rota-v2-danger.cb-rota-v4-delete[hidden] {
    display: none;
}

.cb-page-body-rota .cb-rota-v2-secondary.cb-rota-v4-cancel {
    border-color: #dfe4ee;
    background: #ffffff;
    color: #5c667d;
}

.cb-page-body-rota .cb-rota-v2-secondary.cb-rota-v4-save-draft {
    border-color: #ddd6ff;
    background: #f4f1ff;
    color: #5c43df;
}

.cb-page-body-rota .cb-rota-v2-submit.cb-rota-v4-submit {
    border: 1px solid #684cf5;
    background: #684cf5;
    color: #ffffff;
}

.cb-page-body-rota .cb-rota-v2-submit.cb-rota-v4-submit:hover {
    border-color: #5538df;
    background: #5538df;
}

.cb-page-body-rota .cb-rota-v4-editor-footer button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.cb-page-body-rota .cb-rota-v4-timeclock-panel.is-active {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 18px;
}

.cb-page-body-rota .cb-rota-v4-view-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 34px;
    margin-top: 4px;
    padding: 0 10px;
    border: 1px solid #dfe4ee;
    border-radius: 6px;
    color: #5741d7;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.cb-page-body-rota .cb-rota-v4-timeclock-list {
    padding: 0 22px;
}

.cb-page-body-rota .cb-rota-v4-timeclock-foot {
    margin: auto 22px 0;
    border: 1px solid #e4e8f0;
    border-radius: 6px;
    overflow: hidden;
}

@media (max-width: 760px) {
    .cb-page-body-rota .cb-rota-v2-drawer.cb-rota-v4-editor {
        top: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        border-left: 0;
        transform: translateX(100%);
    }

    .cb-page-body-rota .cb-rota-v2-drawer.cb-rota-v4-editor.is-open {
        transform: translateX(0);
    }
}

@media (max-width: 560px) {
    .cb-page-body-rota .cb-rota-v4-editor-topbar,
    .cb-page-body-rota .cb-rota-v2-drawer-tabs.cb-rota-v4-editor-tabs {
        padding-right: 16px;
        padding-left: 16px;
    }

    .cb-page-body-rota .cb-rota-v2-drawer-head.cb-rota-v4-shift-head,
    .cb-page-body-rota .cb-rota-v4-editor-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .cb-page-body-rota .cb-rota-v4-assignment-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-page-body-rota .cb-rota-v4-field-full {
        grid-column: auto;
    }

    .cb-page-body-rota .cb-rota-v2-timegrid.cb-rota-v4-timegrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-page-body-rota .cb-rota-v2-hourspill.cb-rota-v4-duration {
        grid-column: 1 / -1;
    }

    .cb-page-body-rota .cb-rota-v4-break-section {
        align-items: flex-start;
        flex-direction: column;
    }

    .cb-page-body-rota .cb-rota-v2-drawer-footer.cb-rota-v4-editor-footer {
        min-height: 68px;
        padding: 12px 14px;
    }

    .cb-page-body-rota .cb-rota-v4-editor-footer button {
        padding: 0 11px;
    }

    .cb-page-body-rota .cb-rota-v4-editor-footer .cb-rota-v4-cancel {
        display: none;
    }

    .cb-page-body-rota .cb-rota-v4-timeclock-list {
        padding: 0 16px;
    }

    .cb-page-body-rota .cb-rota-v4-timeclock-foot {
        margin-right: 16px;
        margin-left: 16px;
    }
}

/* Availability weekly roster */
.cb-page-body-availability .cb-page-shell {
    width: min(1500px, 100%);
}

.cb-availability-v2 {
    --availability-ink: #11183f;
    --availability-muted: #7f88a6;
    --availability-line: #e3e7f0;
    --availability-purple: #6849f5;
    display: grid;
    width: 100%;
    gap: 18px;
    color: var(--availability-ink);
}

.cb-availability-v2 [hidden] {
    display: none !important;
}

.cb-availability-v2-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 2px 2px;
}

.cb-availability-v2-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--availability-purple);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cb-availability-v2-page-head h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0;
}

.cb-availability-v2-page-head > div:first-child p {
    margin: 7px 0 0;
    color: var(--availability-muted);
    font-size: 14px;
}

.cb-availability-v2-health {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 250px;
    padding: 10px 12px;
    border: 1px solid #cfeadd;
    border-radius: 8px;
    background: #f6fcf9;
}

.cb-availability-v2-health > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #087c59;
    background: #e3f7ed;
}

.cb-availability-v2-health svg {
    width: 17px;
    height: 17px;
}

.cb-availability-v2-health p {
    display: grid;
    gap: 2px;
    margin: 0;
}

.cb-availability-v2-health strong {
    font-size: 12px;
}

.cb-availability-v2-health small {
    color: #65907f;
    font-size: 10px;
}

.cb-availability-v2-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--availability-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(27, 35, 70, 0.035);
}

.cb-availability-v2-summary > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 16px 18px;
}

.cb-availability-v2-summary > div + div {
    border-left: 1px solid var(--availability-line);
}

.cb-availability-v2-summary-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: #3474dc;
    background: #edf4ff;
}

.cb-availability-v2-summary-icon.is-green {
    color: #087c59;
    background: #e8f8f1;
}

.cb-availability-v2-summary-icon.is-purple {
    color: #6849f5;
    background: #f0edff;
}

.cb-availability-v2-summary-icon.is-red {
    color: #c4455d;
    background: #fff0f3;
}

.cb-availability-v2-summary-icon svg {
    width: 18px;
    height: 18px;
}

.cb-availability-v2-summary p {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
    margin: 0;
}

.cb-availability-v2-summary small {
    color: var(--availability-muted);
    font-size: 11px;
    font-weight: 700;
}

.cb-availability-v2-summary strong {
    grid-row: 1 / 3;
    grid-column: 2;
    font-size: 24px;
    line-height: 1;
}

.cb-availability-v2-summary em {
    color: #a0a7ba;
    font-size: 11px;
    font-style: normal;
}

.cb-availability-v2-directory {
    overflow: hidden;
    border: 1px solid var(--availability-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(27, 35, 70, 0.04);
}

.cb-availability-v2-directory-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 78px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--availability-line);
}

.cb-availability-v2-directory-head h2 {
    margin: 0;
    font-size: 16px;
    letter-spacing: 0;
}

.cb-availability-v2-directory-head p {
    margin: 4px 0 0;
    color: var(--availability-muted);
    font-size: 11px;
}

.cb-availability-v2-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) 38px;
    justify-self: end;
    width: min(650px, 100%);
    gap: 8px;
}

.cb-availability-v2-search {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 38px;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    color: #949cb2;
    background: #fff;
}

.cb-availability-v2-search > span {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
}

.cb-availability-v2-search svg,
.cb-availability-v2-reset svg,
.cb-availability-v2-edit svg {
    width: 16px;
    height: 16px;
}

.cb-availability-v2-search input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    color: var(--availability-ink);
    background: transparent;
    font: inherit;
    font-size: 12px;
}

.cb-availability-v2-controls select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 28px 0 10px;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    outline: 0;
    color: #4a5574;
    background-color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
}

.cb-availability-v2-search:focus-within,
.cb-availability-v2-controls select:focus {
    border-color: #9f8cff;
    box-shadow: 0 0 0 3px rgba(104, 73, 245, 0.09);
}

.cb-availability-v2-reset,
.cb-availability-v2-edit {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    color: #75809c;
    background: #fff;
    cursor: pointer;
}

.cb-availability-v2-reset:hover,
.cb-availability-v2-edit:hover {
    border-color: #c8bfff;
    color: var(--availability-purple);
    background: #f8f6ff;
}

.cb-availability-v2-matrix-scroll {
    width: 100%;
    overflow-x: auto;
}

.cb-availability-v2-matrix-head,
.cb-availability-v2-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) repeat(7, minmax(88px, 0.72fr)) 62px 38px;
    align-items: center;
    gap: 8px;
    min-width: 1080px;
}

.cb-availability-v2-matrix-head {
    min-height: 40px;
    padding: 0 16px;
    color: #9199af;
    background: #fafbfe;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-availability-v2-matrix-head span:not(:first-child) {
    text-align: center;
}

.cb-availability-v2-row {
    min-height: 78px;
    padding: 11px 16px;
    border-top: 1px solid #edf0f5;
}

.cb-availability-v2-list .cb-availability-v2-row:first-child {
    border-top: 0;
}

.cb-availability-v2-row:hover {
    background: #fbfbfe;
}

.cb-availability-v2-person {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.cb-availability-v2-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #6849f5;
    font-size: 12px;
    font-weight: 800;
}

.cb-availability-v2-avatar.tone-blue { background: #3f82ea; }
.cb-availability-v2-avatar.tone-teal { background: #14a894; }
.cb-availability-v2-avatar.tone-amber { background: #e99114; }
.cb-availability-v2-avatar.tone-pink { background: #e95188; }
.cb-availability-v2-avatar.tone-lime { background: #75b906; }
.cb-availability-v2-avatar.tone-indigo { background: #5263d8; }
.cb-availability-v2-avatar.tone-mint { background: #0b9f71; }

.cb-availability-v2-person p {
    display: grid;
    min-width: 0;
    gap: 4px;
    margin: 0;
}

.cb-availability-v2-person strong,
.cb-availability-v2-day strong {
    overflow: hidden;
    color: var(--availability-ink);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-availability-v2-person p > span {
    overflow: hidden;
    color: var(--availability-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-availability-v2-day {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 46px;
    padding: 6px 7px;
    border: 1px solid #d9eee4;
    border-radius: 7px;
    color: #087c59;
    background: #f4fbf8;
}

.cb-availability-v2-day > span {
    display: grid;
    place-items: center;
}

.cb-availability-v2-day svg {
    width: 13px;
    height: 13px;
}

.cb-availability-v2-day p {
    display: grid;
    min-width: 0;
    gap: 2px;
    margin: 0;
}

.cb-availability-v2-day small {
    overflow: hidden;
    color: #7b9b8d;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-availability-v2-day.is-restricted {
    border-color: #ddd5ff;
    color: #6849f5;
    background: #f7f5ff;
}

.cb-availability-v2-day.is-restricted small {
    color: #8d82bd;
}

.cb-availability-v2-day.is-unavailable {
    border-color: #f0d8de;
    color: #bd4359;
    background: #fff7f8;
}

.cb-availability-v2-day.is-unavailable small {
    color: #ae8992;
}

.cb-availability-v2-open-count {
    display: grid;
    justify-items: center;
    gap: 1px;
}

.cb-availability-v2-open-count strong {
    font-size: 12px;
}

.cb-availability-v2-open-count span {
    color: var(--availability-muted);
    font-size: 9px;
}

.cb-availability-v2-empty {
    min-height: 240px;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 30px;
    border-top: 1px solid var(--availability-line);
    text-align: center;
}

.cb-availability-v2-empty:not([hidden]) {
    display: grid;
}

.cb-availability-v2-empty > span {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    place-items: center;
    border-radius: 8px;
    color: var(--availability-purple);
    background: #f0edff;
}

.cb-availability-v2-empty svg {
    width: 19px;
    height: 19px;
}

.cb-availability-v2-empty strong {
    font-size: 14px;
}

.cb-availability-v2-empty p {
    margin: 0 0 6px;
    color: var(--availability-muted);
    font-size: 12px;
}

.cb-availability-v2-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-height: 42px;
    padding: 8px 16px;
    border-top: 1px solid var(--availability-line);
    color: var(--availability-muted);
    font-size: 10px;
}

.cb-availability-v2-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cb-availability-v2-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ba878;
}

.cb-availability-v2-legend i.is-restricted { background: #6849f5; }
.cb-availability-v2-legend i.is-unavailable { background: #c4455d; }

.cb-modal.cb-availability-v2-modal {
    --availability-ink: #11183f;
    --availability-muted: #7f88a6;
    --availability-line: #e3e7f0;
    --availability-purple: #6849f5;
}

.cb-modal.cb-availability-v2-modal .cb-modal-dialog {
    width: min(920px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: 16px auto;
    overflow: hidden;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(17, 24, 63, 0.22);
}

.cb-modal.cb-availability-v2-modal .cb-modal-head {
    flex: 0 0 auto;
    min-height: 62px;
    padding: 12px 18px;
    border-bottom: 1px solid #e5e8ef;
}

.cb-modal.cb-availability-v2-modal .cb-modal-head h2 {
    font-size: 17px;
    letter-spacing: 0;
}

.cb-modal.cb-availability-v2-modal .cb-modal-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 7px;
}

.cb-modal.cb-availability-v2-modal .cb-modal-body {
    min-height: 0;
    padding: 0;
    overflow-y: auto;
}

.cb-availability-v2-form {
    display: grid;
    color: var(--availability-ink);
}

.cb-availability-v2-form-person {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: #f8f7ff;
}

.cb-availability-v2-form-person > p {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

.cb-availability-v2-form-person > p strong {
    font-size: 13px;
}

.cb-availability-v2-form-person > p span {
    overflow: hidden;
    color: var(--availability-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-availability-v2-form-person > div {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.cb-availability-v2-form-person > div span {
    font-size: 20px;
    font-weight: 800;
}

.cb-availability-v2-form-person > div small {
    color: var(--availability-muted);
    font-size: 9px;
}

.cb-availability-v2-presets {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px;
    border-top: 1px solid #e8eaf0;
    border-bottom: 1px solid #e8eaf0;
}

.cb-availability-v2-presets > span {
    color: #56617e;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.cb-availability-v2-presets > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.cb-availability-v2-presets button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dfe4ee;
    border-radius: 7px;
    color: #53607e;
    background: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.cb-availability-v2-presets button:hover {
    border-color: #c8bfff;
    color: var(--availability-purple);
    background: #f8f6ff;
}

.cb-availability-v2-presets svg {
    width: 13px;
    height: 13px;
}

.cb-availability-v2-week-editor {
    display: grid;
    padding: 0 20px;
}

.cb-availability-v2-week-head,
.cb-availability-v2-day-editor {
    display: grid;
    grid-template-columns: 150px minmax(330px, 1fr) 250px;
    align-items: center;
    gap: 14px;
}

.cb-availability-v2-week-head {
    min-height: 36px;
    color: #929aaf;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-availability-v2-day-editor {
    min-height: 66px;
    border-top: 1px solid #edf0f5;
}

.cb-availability-v2-day-name {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.cb-availability-v2-day-name > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 7px;
    color: #087c59;
    background: #e8f8f1;
    font-size: 10px;
    font-weight: 800;
}

.cb-availability-v2-day-editor.is-restricted .cb-availability-v2-day-name > span {
    color: #6849f5;
    background: #f0edff;
}

.cb-availability-v2-day-editor.is-unavailable .cb-availability-v2-day-name > span {
    color: #c4455d;
    background: #fff0f3;
}

.cb-availability-v2-day-name p {
    display: grid;
    gap: 2px;
    margin: 0;
}

.cb-availability-v2-day-name strong {
    font-size: 11px;
}

.cb-availability-v2-day-name small {
    color: var(--availability-muted);
    font-size: 9px;
}

.cb-availability-v2-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    margin: 0;
    padding: 3px;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    background: #f5f6f9;
}

.cb-availability-v2-segmented label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.cb-availability-v2-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cb-availability-v2-segmented span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 32px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #7a839d;
    font-size: 9px;
}

.cb-availability-v2-segmented b {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-availability-v2-segmented svg {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}

.cb-availability-v2-segmented input:focus-visible + span {
    outline: 2px solid #9f8cff;
    outline-offset: 1px;
}

.cb-availability-v2-segmented input:checked + span {
    border-color: #d6dbe5;
    color: #293553;
    background: #fff;
    box-shadow: 0 2px 5px rgba(29, 39, 76, 0.07);
}

.cb-availability-v2-segmented label:nth-child(1) input:checked + span { color: #087c59; }
.cb-availability-v2-segmented label:nth-child(2) input:checked + span { color: #6849f5; }
.cb-availability-v2-segmented label:nth-child(3) input:checked + span { color: #bd4359; }

.cb-availability-v2-time-window {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: end;
    gap: 6px;
    min-width: 0;
}

.cb-availability-v2-time-window label {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cb-availability-v2-time-window label > span {
    color: #929aaf;
    font-size: 8px;
    font-weight: 700;
}

.cb-availability-v2-time-window input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 7px;
    border: 1px solid #dfe4ee;
    border-radius: 7px;
    outline: 0;
    color: var(--availability-ink);
    background: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
}

.cb-availability-v2-time-window input:focus {
    border-color: #9f8cff;
    box-shadow: 0 0 0 3px rgba(104, 73, 245, 0.09);
}

.cb-availability-v2-time-window input:disabled {
    color: transparent;
    background: #f4f5f8;
    cursor: not-allowed;
}

.cb-availability-v2-time-window > i {
    display: grid;
    height: 34px;
    place-items: center;
    color: #a3aabd;
}

.cb-availability-v2-time-window > i svg {
    width: 12px;
    height: 12px;
}

.cb-availability-v2-form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 12px 20px;
    border-top: 1px solid #e5e8ef;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(17, 24, 63, 0.035);
}

.cb-availability-v2-form-actions > p {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cb-availability-v2-form-actions > p > svg {
    width: 16px;
    height: 16px;
    padding: 7px;
    border-radius: 7px;
    color: var(--availability-purple);
    background: #f0edff;
    box-sizing: content-box;
}

.cb-availability-v2-form-actions > p span {
    display: grid;
    gap: 2px;
}

.cb-availability-v2-form-actions > p strong {
    font-size: 10px;
}

.cb-availability-v2-form-actions > p small {
    color: var(--availability-muted);
    font-size: 9px;
}

.cb-availability-v2-form-actions > div {
    display: flex;
    gap: 8px;
}

.cb-availability-v2-form-actions .cb-btn {
    min-height: 40px;
    border-radius: 7px;
    box-shadow: none;
}

.cb-availability-v2-form-actions .cb-btn-primary {
    background: var(--availability-purple);
}

.cb-availability-v2-form-actions .cb-btn svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 1050px) {
    .cb-availability-v2-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-availability-v2-summary > div:nth-child(3) {
        border-top: 1px solid var(--availability-line);
        border-left: 0;
    }

    .cb-availability-v2-summary > div:nth-child(4) {
        border-top: 1px solid var(--availability-line);
    }

    .cb-availability-v2-directory-head {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cb-availability-v2-controls {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .cb-page-body-availability .cb-page-shell {
        padding: 18px 14px 30px;
    }

    .cb-availability-v2-page-head {
        align-items: flex-start;
    }

    .cb-availability-v2-page-head h1 {
        font-size: 28px;
    }

    .cb-availability-v2-health {
        min-width: 210px;
    }

    .cb-modal.cb-availability-v2-modal .cb-modal-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        margin: 8px auto;
    }

    .cb-availability-v2-week-head {
        display: none;
    }

    .cb-availability-v2-day-editor {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 0;
    }

    .cb-availability-v2-time-window {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .cb-availability-v2 {
        gap: 14px;
    }

    .cb-availability-v2-page-head {
        display: grid;
        gap: 14px;
    }

    .cb-availability-v2-page-head > div:first-child p {
        font-size: 12px;
    }

    .cb-availability-v2-health {
        width: 100%;
        min-width: 0;
    }

    .cb-availability-v2-summary > div {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        min-height: 78px;
        padding: 12px;
    }

    .cb-availability-v2-summary-icon {
        width: 32px;
        height: 32px;
    }

    .cb-availability-v2-summary strong {
        font-size: 20px;
    }

    .cb-availability-v2-summary em {
        display: none;
    }

    .cb-availability-v2-summary p {
        grid-template-columns: 1fr auto;
    }

    .cb-availability-v2-directory-head {
        padding: 14px;
    }

    .cb-availability-v2-controls {
        grid-template-columns: 1fr 38px;
    }

    .cb-availability-v2-search {
        grid-column: 1 / -1;
    }

    .cb-availability-v2-controls select {
        grid-column: 1;
    }

    .cb-availability-v2-reset {
        grid-row: 2;
        grid-column: 2;
    }

    .cb-availability-v2-legend {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .cb-availability-v2-form-person,
    .cb-availability-v2-presets,
    .cb-availability-v2-week-editor,
    .cb-availability-v2-form-actions {
        padding-right: 14px;
        padding-left: 14px;
    }

    .cb-availability-v2-form-person {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .cb-availability-v2-form-person > div {
        grid-column: 2;
        justify-items: start;
    }

    .cb-availability-v2-presets {
        display: grid;
    }

    .cb-availability-v2-presets > div {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cb-availability-v2-presets button {
        justify-content: flex-start;
    }

    .cb-availability-v2-day-editor {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 12px 0;
    }

    .cb-availability-v2-day-name {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .cb-availability-v2-time-window {
        grid-column: auto;
    }

    .cb-availability-v2-form-actions {
        align-items: stretch;
    }

    .cb-availability-v2-form-actions > p {
        display: none;
    }

    .cb-availability-v2-form-actions > div {
        width: 100%;
    }

    .cb-availability-v2-form-actions .cb-btn {
        flex: 1 1 auto;
        padding: 0 10px;
    }
}

/* The Hub Figma build */
.cb-hub-shell-body {
    --hub-purple: #6f4df6;
    --hub-purple-soft: #eee9ff;
    --hub-bg: #f5f3ff;
    --hub-line: #ece9f8;
    --hub-muted: #9298b2;
    --hub-text: #071229;
    background: var(--hub-bg);
    color: var(--hub-text);
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

.cb-hub-v2-shell {
    display: grid;
    grid-template-columns: 231px minmax(0, 1fr);
    min-height: 100vh;
}

.cb-hub-v2-sidebar {
    position: sticky;
    top: 0;
    width: 231px;
    height: 100vh;
    background: #fff;
    border-right: 1px solid var(--hub-line);
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0;
}

.cb-hub-v2-brand {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--hub-line);
    color: var(--hub-text);
    text-decoration: none;
}

.cb-hub-v2-brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hub-purple);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.cb-hub-v2-brand-mark::after {
    content: "✓";
    font-size: 14px;
}

.cb-hub-v2-brand-mark img,
.cb-hub-v2-brand-mark.is-image img {
    display: none;
}

.cb-hub-v2-brand-copy strong {
    display: block;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: 0;
}

.cb-hub-v2-brand-copy small {
    color: var(--hub-muted);
    font-size: 10px;
}

.cb-hub-v2-nav {
    padding: 17px 8px 10px;
    flex: 1;
}

.cb-hub-v2-nav-group {
    margin-bottom: 20px;
}

.cb-hub-v2-nav-label {
    display: block;
    padding: 0 8px 8px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9aa0b6;
}

.cb-hub-v2-nav-link {
    height: 35px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: #536079;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.cb-hub-v2-nav-link svg {
    width: 16px;
    height: 16px;
}

.cb-hub-v2-nav-link.is-active,
.cb-hub-v2-nav-link:hover {
    background: var(--hub-purple-soft);
    color: var(--hub-purple);
}

.cb-hub-v2-sidebar-footer {
    border-top: 1px solid var(--hub-line);
    padding: 15px 16px;
}

.cb-hub-v2-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-hub-v2-account-avatar,
.cb-hub-v2-topbar-avatar,
.cb-hub-person > span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ede8ff;
    color: var(--hub-purple);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    flex: none;
}

.cb-hub-v2-account-copy strong {
    display: block;
    font-size: 13px;
    color: var(--hub-text);
}

.cb-hub-v2-account-copy small,
.cb-hub-v2-collapse {
    color: var(--hub-muted);
    font-size: 11px;
}

.cb-hub-v2-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    text-decoration: none;
}

.cb-hub-v2-collapse svg {
    width: 14px;
}

.cb-hub-v2-main {
    min-width: 0;
}

.cb-hub-v2-topbar {
    height: 52px;
    background: #fff;
    border-bottom: 1px solid var(--hub-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 20px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.cb-hub-v2-breadcrumb {
    color: var(--hub-muted);
    font-size: 14px;
}

.cb-hub-v2-breadcrumb span {
    margin: 0 8px;
    color: #c9cede;
}

.cb-hub-v2-breadcrumb strong {
    color: var(--hub-text);
    font-weight: 700;
}

.cb-hub-v2-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-hub-v2-search {
    position: relative;
    width: 220px;
    height: 39px;
    border: 1px solid #ddd8f3;
    background: #f8f7ff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: #98a0b7;
}

.cb-hub-v2-search svg {
    width: 15px;
    height: 15px;
}

.cb-hub-v2-search input {
    border: 0;
    background: transparent;
    outline: 0;
    width: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--hub-text);
}

.cb-hub-v2-search kbd {
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    color: #9aa0b6;
}

.cb-hub-v2-search-popover {
    position: absolute;
    top: 47px;
    left: -80px;
    width: 300px;
    padding: 13px;
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(31, 27, 71, .14);
}

.cb-hub-v2-search-popover label {
    height: 30px;
    border-bottom: 1px solid var(--hub-line);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cb-hub-v2-search-popover strong {
    display: block;
    margin: 14px 0 8px;
    font-size: 10px;
    color: #9aa0b6;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cb-hub-v2-search-popover a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    color: var(--hub-text);
    text-decoration: none;
    font-size: 13px;
}

.cb-hub-v2-search-popover small {
    background: #f5f6fa;
    border-radius: 10px;
    padding: 3px 8px;
    color: #737b95;
}

.cb-hub-v2-icon-button,
.cb-hub-v2-notifications summary {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #69728c;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    list-style: none;
}

.cb-hub-v2-icon-button svg {
    width: 17px;
    height: 17px;
}

.cb-hub-v2-icon-button b {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hub-purple);
    color: transparent;
}

.cb-hub-v2-notification-menu {
    position: absolute;
    right: 150px;
    top: 48px;
    width: 260px;
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(31, 27, 71, .14);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.cb-hub-v2-notification-menu strong {
    font-size: 13px;
}

.cb-hub-v2-notification-menu a {
    color: #536079;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.4;
}

.cb-hub-v2-quick-action,
.cb-hub-primary {
    min-height: 38px;
    border-radius: 18px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--hub-purple);
    color: #fff;
    border: 0;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

.cb-hub-v2-quick-action svg,
.cb-hub-primary svg,
.cb-hub-ghost svg {
    width: 15px;
    height: 15px;
}

.cb-hub-v2-operational {
    border-left: 1px solid var(--hub-line);
    padding-left: 14px;
    color: #008f69;
    font-size: 12px;
    text-decoration: none;
    font-weight: 700;
}

.cb-hub-v2-operational i,
.cb-hub-status i,
.cb-hub-activity-feed span i,
.cb-hub-service-card small i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #05c98b;
    margin-right: 6px;
}

.cb-hub-v2-content {
    padding: 28px;
}

.cb-hub-figma-page {
    max-width: 1348px;
}

.cb-hub-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
}

.cb-hub-page-title h1 {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: 0;
}

.cb-hub-page-title p {
    margin: 7px 0 0;
    color: var(--hub-muted);
    font-size: 14px;
}

.cb-hub-title-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cb-hub-kpi-grid,
.cb-hub-billing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 27px;
}

.cb-hub-billing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-hub-kpi-card,
.cb-hub-panel,
.cb-hub-table-shell,
.cb-hub-lead-card,
.cb-hub-service-card,
.cb-hub-flag-row {
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(63, 50, 124, .04);
}

.cb-hub-kpi-card {
    min-height: 136px;
    padding: 22px 20px;
    display: flex;
    justify-content: space-between;
}

.cb-hub-kpi-card span,
.cb-hub-card-head p {
    color: var(--hub-muted);
    font-size: 13px;
}

.cb-hub-kpi-card strong {
    display: block;
    margin: 16px 0 5px;
    font-size: 29px;
    letter-spacing: 0;
}

.cb-hub-kpi-card small {
    color: #00a878;
    font-weight: 800;
}

.cb-hub-kpi-card small.is-red {
    color: #ff244f;
}

.cb-hub-kpi-card em {
    color: var(--hub-muted);
    font-weight: 500;
    font-style: normal;
}

.cb-hub-kpi-card i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f2edff;
    color: var(--hub-purple);
    font-style: normal;
}

.cb-hub-kpi-card i svg {
    width: 16px;
    height: 16px;
}

.cb-hub-dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 27px;
}

.cb-hub-panel {
    padding: 24px;
}

.cb-hub-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cb-hub-card-head h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.cb-hub-card-head p {
    margin: 0;
}

.cb-hub-card-head select {
    border: 1px solid var(--hub-line);
    border-radius: 16px;
    height: 32px;
    padding: 0 12px;
    background: #fff;
    color: #6b7286;
}

.cb-hub-line-chart {
    width: 100%;
    min-height: 230px;
}

.cb-hub-line-chart line {
    stroke: #f0eef8;
    stroke-dasharray: 2 4;
}

.cb-hub-line-chart text {
    fill: #99a0b8;
    font-size: 12px;
}

.cb-hub-funnel-row {
    margin-top: 22px;
}

.cb-hub-funnel-row span {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.cb-hub-funnel-row i {
    display: block;
    height: 7px;
    background: #f0f0f4;
    border-radius: 999px;
    margin: 8px 0 4px;
}

.cb-hub-funnel-row b {
    display: block;
    height: 100%;
    background: #8868f4;
    border-radius: inherit;
}

.cb-hub-funnel-row small {
    display: block;
    text-align: right;
    color: var(--hub-muted);
    font-size: 11px;
}

.cb-hub-health-list {
    display: grid;
}

.cb-hub-health-list a {
    display: grid;
    grid-template-columns: 28px 1fr auto 10px;
    align-items: center;
    gap: 12px;
    min-height: 41px;
    color: var(--hub-text);
    text-decoration: none;
    font-size: 13px;
}

.cb-hub-health-list span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eafff7;
    color: #05b980;
    display: grid;
    place-items: center;
}

.cb-hub-health-list svg {
    width: 14px;
    height: 14px;
}

.cb-hub-health-list small {
    color: var(--hub-muted);
}

.cb-hub-health-list i {
    width: 7px;
    height: 7px;
    background: #05c98b;
    border-radius: 50%;
}

.cb-hub-activity-feed a {
    min-height: 53px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    color: var(--hub-text);
    text-decoration: none;
    border-top: 1px solid #f0eef8;
}

.cb-hub-activity-feed a > span {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #f3edff;
    color: var(--hub-purple);
    display: grid;
    place-items: center;
}

.cb-hub-activity-feed time {
    color: var(--hub-muted);
    font-size: 12px;
}

.cb-hub-table-shell {
    overflow: hidden;
}

.cb-hub-table-toolbar {
    height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--hub-line);
}

.cb-hub-local-search {
    width: 360px;
    height: 36px;
    border-radius: 18px;
    background: #f7f5ff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: var(--hub-muted);
}

.cb-hub-local-search svg {
    width: 15px;
    height: 15px;
}

.cb-hub-local-search input {
    border: 0;
    background: transparent;
    outline: 0;
    width: 100%;
    font: inherit;
}

.cb-hub-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.cb-hub-tabs button {
    height: 34px;
    border: 0;
    background: transparent;
    border-radius: 16px;
    padding: 0 14px;
    color: #4e5871;
    cursor: pointer;
}

.cb-hub-tabs button.is-active {
    background: var(--hub-purple);
    color: #fff;
}

.cb-hub-ghost {
    min-height: 36px;
    border-radius: 18px;
    border: 1px solid #e1def1;
    background: #fff;
    color: #526078;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.cb-hub-data-table {
    width: 100%;
    border-collapse: collapse;
}

.cb-hub-data-table th {
    height: 39px;
    text-align: left;
    padding: 0 16px;
    color: #9ba1b9;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-bottom: 1px solid var(--hub-line);
}

.cb-hub-data-table td {
    height: 57px;
    padding: 0 16px;
    border-bottom: 1px solid #f2f0f8;
    font-size: 13px;
    color: #23304a;
}

.cb-hub-data-table tr:hover td {
    background: #f8f6ff;
}

.cb-hub-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-hub-person strong {
    display: block;
    color: var(--hub-text);
}

.cb-hub-person small {
    display: block;
    margin-top: 3px;
    color: var(--hub-muted);
    font-weight: 500;
}

.cb-hub-person.is-small > span {
    width: 26px;
    height: 26px;
}

.cb-hub-pill,
.cb-hub-status {
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    padding: 3px 8px;
    background: #f5f6fa;
    color: #516078;
    font-size: 12px;
    font-weight: 700;
}

.cb-hub-pill.is-purple {
    background: #f0eaff;
    color: #6b35ff;
}

.cb-hub-pill.is-blue {
    background: #ebf3ff;
    color: #1267ff;
}

.cb-hub-status.is-green {
    background: #eafff7;
    color: #008f69;
}

.cb-hub-status.is-blue {
    background: #edf5ff;
    color: #1267ff;
}

.cb-hub-status.is-red {
    background: #fff0f0;
    color: #fa2d43;
}

.cb-hub-actions {
    white-space: nowrap;
}

.cb-hub-actions a {
    margin-right: 16px;
    color: var(--hub-purple);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.cb-hub-actions svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}

.cb-hub-table-footer {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: var(--hub-muted);
    font-size: 13px;
}

.cb-hub-table-footer button {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 1px solid var(--hub-line);
    background: #fff;
    color: #6b7286;
}

.cb-hub-table-footer button.is-active {
    background: var(--hub-purple);
    color: #fff;
}

.cb-hub-lead-list,
.cb-hub-flag-list {
    display: grid;
    gap: 12px;
}

.cb-hub-lead-card {
    min-height: 112px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
}

.cb-hub-lead-card p {
    grid-column: 1;
    margin: -8px 0 0 72px;
    color: var(--hub-muted);
    font-size: 13px;
}

.cb-hub-lead-score {
    text-align: right;
    display: grid;
    gap: 6px;
    color: var(--hub-muted);
    font-size: 12px;
}

.cb-hub-lead-score em {
    border-radius: 12px;
    padding: 4px 8px;
    font-style: normal;
}

.cb-hub-lead-score .is-high {
    color: #ff0028;
    background: #fff0f2;
}

.cb-hub-lead-score .is-medium {
    color: #c96f00;
    background: #fff6df;
}

.cb-hub-lead-score .is-low {
    color: #536079;
    background: #f5f6fa;
}

.cb-hub-lead-score strong {
    color: #00a878;
    font-size: 17px;
}

.cb-hub-lead-actions {
    display: flex;
    gap: 8px;
}

.cb-hub-bars {
    margin-bottom: 24px;
}

.cb-hub-bar-chart {
    height: 220px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
    align-items: end;
    padding: 20px 60px 0;
    border-top: 1px dashed #f0eef8;
}

.cb-hub-bar-chart span {
    background: #7b5ff1;
    border-radius: 6px 6px 0 0;
    position: relative;
}

.cb-hub-bar-chart b {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--hub-muted);
    font-size: 12px;
}

.cb-hub-support-grid {
    display: grid;
    grid-template-columns: 530px minmax(0, 1fr);
    gap: 16px;
}

.cb-hub-ticket-list {
    display: grid;
    gap: 9px;
}

.cb-hub-ticket-list a {
    min-height: 118px;
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 13px;
    padding: 16px;
    color: var(--hub-text);
    text-decoration: none;
    position: relative;
}

.cb-hub-ticket-list a.is-selected {
    border-color: var(--hub-purple);
    box-shadow: inset 0 0 0 1px var(--hub-purple);
}

.cb-hub-ticket-list span {
    color: var(--hub-muted);
    font-size: 12px;
}

.cb-hub-ticket-list em {
    float: right;
    margin-left: 7px;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 12px;
    font-style: normal;
    background: #f5f6fa;
}

.cb-hub-ticket-list em.is-red {
    color: #ff244f;
    background: #fff0f2;
}

.cb-hub-ticket-list em.is-orange {
    color: #d37000;
    background: #fff6df;
}

.cb-hub-ticket-list em.is-blue {
    color: #006dff;
    background: #edf5ff;
}

.cb-hub-ticket-list strong,
.cb-hub-ticket-list p,
.cb-hub-ticket-list small {
    display: block;
    clear: both;
}

.cb-hub-ticket-list strong {
    margin-top: 14px;
}

.cb-hub-ticket-list p {
    color: var(--hub-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 9px 0 12px;
}

.cb-hub-ticket-list small {
    color: var(--hub-muted);
}

.cb-hub-ticket-list time {
    float: right;
}

.cb-hub-ticket-detail {
    min-height: 300px;
}

.cb-hub-ticket-head {
    display: flex;
    justify-content: space-between;
}

.cb-hub-ticket-head h2 {
    margin: 8px 0 0;
    font-size: 17px;
}

.cb-hub-ticket-head span,
.cb-hub-ticket-head em {
    color: var(--hub-muted);
    font-size: 12px;
    font-style: normal;
}

.cb-hub-ticket-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.cb-hub-ticket-metrics div,
.cb-hub-ticket-note,
.cb-hub-ticket-reply textarea {
    background: #f6f4ff;
    border-radius: 14px;
    padding: 14px;
}

.cb-hub-ticket-metrics span {
    display: block;
    margin-bottom: 7px;
    color: var(--hub-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cb-hub-ticket-note {
    color: #34405c;
    font-size: 13px;
    line-height: 1.6;
}

.cb-hub-ticket-reply label,
.cb-hub-form-grid label {
    display: grid;
    gap: 8px;
    color: #8f96ad;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.cb-hub-ticket-reply textarea,
.cb-hub-form-grid input,
.cb-hub-form-grid select,
.cb-hub-form-grid textarea {
    border: 1px solid #ddd8f3;
    outline: 0;
    font: inherit;
    color: var(--hub-text);
}

.cb-hub-ticket-reply textarea {
    width: 100%;
    margin: 20px 0 14px;
    resize: vertical;
}

.cb-hub-empty-state {
    min-height: 250px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--hub-muted);
}

.cb-hub-empty-state svg {
    width: 26px;
    height: 26px;
    color: var(--hub-purple);
}

.cb-hub-status-banner {
    min-height: 86px;
    border: 1px solid #91eacb;
    border-radius: 14px;
    background: #fcfffe;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 22px;
}

.cb-hub-status-banner > span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #d9fff0;
    color: #008f69;
}

.cb-hub-status-banner p {
    margin: 4px 0 0;
    color: #008f69;
    font-size: 13px;
}

.cb-hub-status-banner aside {
    margin-left: auto;
    text-align: right;
    color: #008f69;
}

.cb-hub-status-banner aside strong {
    display: block;
    font-size: 23px;
}

.cb-hub-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-hub-service-card {
    min-height: 132px;
    padding: 20px;
}

.cb-hub-service-card > div {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: start;
}

.cb-hub-service-card > div > span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f2edff;
    color: var(--hub-purple);
}

.cb-hub-service-card strong small {
    display: block;
    margin-top: 7px;
    color: #009b70;
}

.cb-hub-service-card aside {
    text-align: right;
    color: var(--hub-muted);
    text-transform: uppercase;
    font-size: 11px;
}

.cb-hub-service-card aside b {
    display: block;
    margin-top: 5px;
    color: #008f69;
    font-size: 17px;
    text-transform: none;
}

.cb-hub-service-card p {
    margin: 18px 0 8px;
}

.cb-hub-service-card p small {
    display: block;
    color: var(--hub-muted);
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 5px;
}

.cb-hub-uptime-bars {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.cb-hub-uptime-bars i {
    width: 5px;
    height: 22px;
    border-radius: 3px;
    background: #2de0a3;
}

.cb-hub-uptime-bars i.is-warn {
    background: #ffd94d;
}

.cb-hub-flag-row {
    min-height: 108px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.cb-hub-flag-row strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cb-hub-flag-row p {
    color: var(--hub-muted);
    margin: 9px 0 14px;
}

.cb-hub-flag-row small {
    color: var(--hub-muted);
}

.cb-hub-flag-row small i {
    display: inline-block;
    width: 90px;
    height: 5px;
    background: #f0f0f4;
    border-radius: 999px;
    margin: 0 8px;
    vertical-align: middle;
}

.cb-hub-flag-row small b {
    display: block;
    height: 100%;
    background: var(--hub-purple);
    border-radius: inherit;
}

.cb-hub-switch {
    width: 42px;
    height: 23px;
    border-radius: 999px;
    border: 0;
    background: #d8dde6;
    padding: 3px;
    cursor: pointer;
}

.cb-hub-switch i {
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
}

.cb-hub-switch.is-on {
    background: var(--hub-purple);
}

.cb-hub-switch.is-on i {
    margin-left: 19px;
}

.cb-hub-form-modal {
    padding: 24px;
}

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

.cb-hub-form-grid .is-wide {
    grid-column: 1 / -1;
}

.cb-hub-form-grid input,
.cb-hub-form-grid select,
.cb-hub-form-grid textarea {
    min-height: 42px;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
}

.cb-hub-settings-list {
    display: grid;
    gap: 12px;
}

.cb-hub-settings-list span {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--hub-line);
}

.cb-hub-density-compact .cb-hub-data-table td {
    height: 42px;
}

@media (max-width: 1000px) {
    .cb-hub-v2-shell {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .cb-hub-kpi-grid,
    .cb-hub-billing-grid,
    .cb-hub-dashboard-main,
    .cb-hub-status-grid,
    .cb-hub-support-grid {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-topbar {
        position: relative;
        height: auto;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px;
    }

    .cb-hub-v2-search {
        width: 100%;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--cb-bg);
    color: var(--cb-text);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
}

[hidden] {
    display: none !important;
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

svg {
    display: block;
}

.cb-shell-body {
    background: var(--cb-bg);
}

.cb-shell {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 100vh;
}

.cb-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 14px 10px 14px;
    background: var(--cb-surface);
    border-right: 1px solid var(--cb-line);
}

.cb-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 14px;
    margin-bottom: 4px;
}

.cb-sidebar-brand-mark {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #5d36ec, #744ef4);
    box-shadow: 0 12px 22px rgba(106, 77, 245, 0.28);
}

.cb-sidebar-brand-mark svg {
    width: 18px;
    height: 18px;
}

.cb-sidebar-brand-wordmark {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cb-sidebar-scroll {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.cb-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.cb-sidebar-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d7d4ea;
}

.cb-sidebar-nav {
    display: grid;
    gap: 14px;
}

.cb-nav-group {
    display: grid;
    gap: 5px;
}

.cb-nav-group h2 {
    margin: 0;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a0a9c1;
}

.cb-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 0 11px;
    border-radius: 14px;
    color: #495474;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.cb-nav-link:hover {
    background: #f7f4ff;
    color: var(--cb-text);
}

.cb-nav-link.is-active {
    background: #ece6ff;
    color: var(--cb-purple-strong);
}

.cb-nav-icon {
    width: 17px;
    height: 17px;
    color: currentColor;
    opacity: 0.92;
}

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

.cb-sidebar-footer {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cb-line);
}

.cb-shell-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cb-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 38px minmax(260px, 420px) 1fr;
    align-items: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 18px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cb-line);
}

.cb-topbar-close,
.cb-topbar-icon-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
    color: #737d98;
}

.cb-topbar-close svg,
.cb-topbar-icon-button svg,
.cb-topbar-chip-icon svg,
.cb-topbar-chip-chevron svg,
.cb-topbar-user-chevron svg {
    width: 16px;
    height: 16px;
}

.cb-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-topbar-search input {
    width: 100%;
    height: 34px;
    padding: 0 14px 0 36px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fbfbfe;
    color: var(--cb-text);
    font-size: 13px;
}

.cb-topbar-search input::placeholder {
    color: #a3abc3;
}

.cb-topbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ba5be;
}

.cb-topbar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.cb-topbar-chip,
.cb-topbar-user {
    min-height: 34px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
}

.cb-topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    color: #52607e;
    font-size: 13px;
    font-weight: 500;
}

.cb-topbar-chip-icon,
.cb-topbar-chip-chevron,
.cb-topbar-user-chevron {
    color: #9aa4be;
}

.cb-topbar-alert-dot {
    position: absolute;
    margin-top: -10px;
    margin-left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff4d61;
    border: 2px solid #fff;
}

.cb-topbar-icon-button {
    position: relative;
}

.cb-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 9px;
}

.cb-topbar-user-avatar {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cb-purple);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.cb-topbar-user-copy {
    display: grid;
    gap: 1px;
    text-align: left;
}

.cb-topbar-user-copy strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
}

.cb-topbar-user-copy small {
    font-size: 12px;
    color: #98a2bd;
    line-height: 1.1;
}

.cb-page-shell {
    padding: 24px 34px 42px;
}

.cb-page {
    width: min(100%, 980px);
    margin: 0 auto;
}

.cb-page-header {
    margin: 8px 0 24px;
}

.cb-page-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-page-header p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--cb-text-soft);
}

.cb-flash {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--cb-line);
}

.cb-flash-success {
    background: var(--cb-green-soft);
    color: #107b53;
}

.cb-flash-error {
    background: var(--cb-red-soft);
    color: #c44756;
}

.cb-auth-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 36px 18px;
    background: #f7f7fb;
}

.cb-auth-panel {
    width: min(100%, 400px);
    display: grid;
    justify-items: center;
    gap: 18px;
}

.cb-auth-badge {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #683ff4, #865bf6);
    color: #fff;
    box-shadow: 0 16px 30px rgba(106, 77, 245, 0.22);
}

.cb-auth-badge svg {
    width: 24px;
    height: 24px;
}

.cb-auth-copy {
    text-align: center;
}

.cb-auth-copy h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-auth-copy p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--cb-text-soft);
}

.cb-auth-card {
    width: 100%;
    display: grid;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--cb-shadow);
}

.cb-auth-inline-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5f2ff;
    color: var(--cb-purple);
    font-size: 13px;
    font-weight: 700;
}

.cb-auth-inline-note strong {
    color: var(--cb-text);
}

.cb-auth-provider,
.cb-auth-submit {
    width: 100%;
    height: 46px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
}

.cb-auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cb-auth-provider-icon {
    width: 18px;
    height: 18px;
}

.cb-auth-provider-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cb-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #a0a8c1;
    font-size: 12px;
    font-weight: 600;
}

.cb-auth-divider span {
    height: 1px;
    background: var(--cb-line);
}

.cb-auth-field {
    display: grid;
    gap: 8px;
}

.cb-auth-field > span:first-child,
.cb-inline-between > span:first-child {
    font-size: 14px;
    font-weight: 600;
}

.cb-inline-between {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.cb-inline-between a,
.cb-auth-footer a,
.cb-link {
    color: var(--cb-purple);
    font-weight: 600;
}

.cb-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-input-wrap i,
.cb-input-wrap b {
    position: absolute;
    color: #a0a8c0;
}

.cb-input-wrap i {
    left: 14px;
}

.cb-input-wrap b {
    right: 14px;
    font-weight: 500;
}

.cb-input-wrap input {
    width: 100%;
    height: 44px;
    padding: 0 42px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 12px;
    background: #fbfbfe;
}

.cb-auth-submit,
.cb-btn-primary,
.cb-pill-cta,
.cb-modal-submit {
    border: 0;
    color: #fff;
    background: linear-gradient(90deg, #6747f2 0%, #8858f4 100%);
    box-shadow: 0 16px 28px rgba(106, 77, 245, 0.18);
}

.cb-auth-footer {
    margin: 6px 0 0;
    color: #717b97;
    font-size: 14px;
}

.cb-app-stack,
.cb-page-stack {
    display: grid;
    gap: 22px;
}

.cb-card,
.cb-panel,
.cb-stat-card,
.cb-table-shell,
.cb-list-shell,
.cb-surface {
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: var(--cb-surface);
    box-shadow: 0 10px 30px rgba(30, 34, 72, 0.04);
}

.cb-hero-card {
    padding: 28px 30px;
}

.cb-hero-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9da7c0;
}

.cb-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.cb-hero-copy h2,
.cb-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-hero-copy p,
.cb-section-copy {
    margin: 8px 0 0;
    color: var(--cb-text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.cb-hero-actions,
.cb-head-actions,
.cb-toolbar-actions,
.cb-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cb-btn,
.cb-action-button,
.cb-button {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fff;
    color: var(--cb-text);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cb-btn-block {
    width: 100%;
}

.cb-btn-primary svg,
.cb-btn-success svg,
.cb-btn-danger svg {
    color: inherit;
}

.cb-btn-success {
    background: #08a968;
    border-color: #08a968;
    color: #fff;
}

.cb-btn-danger {
    background: #fff1f2;
    border-color: #ffd6da;
    color: #f05362;
}

.cb-btn-muted {
    background: #f6f6fb;
}

.cb-btn-icon {
    width: 38px;
    padding: 0;
}

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

.cb-stat-card {
    padding: 22px 22px 18px;
    min-height: 118px;
}

.cb-stat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ba4bf;
}

.cb-stat-value {
    margin: 16px 0 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-stat-caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: #7f89a7;
    line-height: 1.5;
}

.cb-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 22px;
}

.cb-dashboard-main,
.cb-dashboard-side {
    display: grid;
    gap: 22px;
}

.cb-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

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

.cb-list-shell,
.cb-table-shell {
    overflow: hidden;
}

.cb-list-shell-head,
.cb-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-list-shell-head h3,
.cb-table-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.cb-list-shell-head p,
.cb-table-head p {
    margin: 6px 0 0;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--cb-line);
}

.cb-list-row:first-child {
    border-top: 0;
}

.cb-list-row strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.cb-list-row span,
.cb-list-row small {
    display: block;
    margin-top: 4px;
    color: var(--cb-text-soft);
    font-size: 13px;
}

.cb-inline-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.cb-chip-purple {
    background: #f0eaff;
    color: var(--cb-purple);
}

.cb-chip-green {
    background: #dffff0;
    color: #149560;
}

.cb-chip-red {
    background: #ffe7ea;
    color: #ef5565;
}

.cb-chip-amber {
    background: #fff3d6;
    color: #d99216;
}

.cb-chip-blue {
    background: #edf4ff;
    color: #4d7ef6;
}

.cb-chip-neutral {
    background: #f4f5f9;
    color: #8e97b0;
}

.cb-empty-state {
    padding: 26px 24px;
    color: var(--cb-text-soft);
}

.cb-empty-state strong {
    display: block;
    margin-bottom: 6px;
    color: var(--cb-text);
    font-size: 15px;
}

.cb-form-stack {
    display: grid;
    gap: 14px;
}

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

.cb-form-stack label,
.cb-form-panel label {
    display: grid;
    gap: 7px;
}

.cb-form-stack label span,
.cb-form-panel label span,
.cb-modal-subhead {
    font-size: 13px;
    font-weight: 600;
    color: #4a5679;
}

.cb-form-stack input,
.cb-form-stack select,
.cb-form-stack textarea,
.cb-form-panel input,
.cb-form-panel select,
.cb-form-panel textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fbfbfe;
    color: var(--cb-text);
}

.cb-form-stack textarea,
.cb-form-panel textarea {
    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.cb-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 60;
    overflow-y: auto;
}

.cb-modal.is-open {
    display: block;
}

.cb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 22, 36, 0.44);
    backdrop-filter: blur(4px);
}

.cb-modal-dialog {
    position: relative;
    width: min(100% - 28px, 560px);
    margin: 8vh auto 0;
    border-radius: 24px;
    border: 1px solid var(--cb-line);
    background: #fff;
    box-shadow: 0 28px 80px rgba(16, 19, 35, 0.22);
    overflow: hidden;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
}

.cb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.cb-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #8d96b0;
}

.cb-modal-body {
    padding: 22px;
    overflow-y: auto;
}

.cb-kpi-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 22px;
    min-height: 128px;
}

.cb-kpi-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #f3efff;
    color: var(--cb-purple);
}

.cb-kpi-value {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-kpi-note {
    margin-top: 4px;
    font-size: 14px;
    color: var(--cb-text-soft);
}

.cb-staff-grid,
.cb-location-grid,
.cb-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-staff-card,
.cb-location-card,
.cb-department-card {
    padding: 18px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(26, 30, 66, 0.04);
}

.cb-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    flex: 0 0 auto;
}

.cb-person-copy strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.cb-person-copy span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--cb-text-soft);
}

.cb-card-meta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--cb-text-soft);
    font-size: 13px;
}

.cb-card-divider {
    margin: 14px 0;
    border-top: 1px solid var(--cb-line);
}

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

.cb-member-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fbfbfe;
    color: #52607d;
    font-size: 12px;
}

.cb-member-pill .cb-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.cb-rota-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 6px;
}

.cb-rota-toolbar-left,
.cb-rota-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-filter-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
    color: #495676;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cb-rota-table {
    overflow: hidden;
}

.cb-rota-grid {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(120px, 1fr)) 76px;
    min-width: 1120px;
}

.cb-rota-cell,
.cb-rota-head,
.cb-rota-name {
    min-height: 72px;
    padding: 14px 12px;
    border-right: 1px solid var(--cb-line);
    border-top: 1px solid var(--cb-line);
    background: #fff;
}

.cb-rota-head {
    min-height: 60px;
    font-size: 12px;
    font-weight: 700;
    color: #9aa2bc;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-rota-head strong {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--cb-text);
}

.cb-rota-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-rota-hours {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px;
    font-weight: 700;
}

.cb-shift-card,
.cb-availability-pill {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.25;
}

.cb-shift-card strong {
    display: block;
    font-size: 13px;
}

.cb-shift-blue {
    background: #edf4ff;
    border-color: #bfd0ff;
    color: #5e63ef;
}

.cb-shift-purple {
    background: #f1ecff;
    border-color: #cfc5ff;
    color: #7e63ef;
}

.cb-shift-green {
    background: #eafcf4;
    border-color: #abefcf;
    color: #15a96f;
}

.cb-shift-red {
    background: #fff0f1;
    border-color: #ffcbcf;
    color: #f05463;
}

.cb-shift-amber {
    background: #fff8ea;
    border-color: #ffd980;
    color: #ff8d00;
    border-style: dashed;
}

.cb-availability-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    font-weight: 600;
}

.cb-available {
    background: #ecfcf4;
    border-color: #9eeec7;
    color: #0f9b67;
}

.cb-unavailable {
    background: #fff0f1;
    border-color: #ffc9cd;
    color: #f04f5f;
}

.cb-custom-availability {
    background: #f1edff;
    border-color: #cac0ff;
    color: var(--cb-purple);
}

.cb-request-shell,
.cb-feed-shell {
    display: grid;
    gap: 18px;
}

.cb-request-card,
.cb-announcement-card,
.cb-document-row,
.cb-payrun-row,
.cb-compliance-row {
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

.cb-request-head,
.cb-announcement-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 0;
}

.cb-request-body,
.cb-announcement-body {
    padding: 12px 20px 18px;
}

.cb-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-top: 1px solid var(--cb-line);
}

.cb-request-row:first-child {
    border-top: 0;
}

.cb-action-pair {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-timeclock-hero {
    padding: 38px 30px;
    text-align: center;
}

.cb-timeclock-hero-time {
    font-size: 66px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.cb-timeclock-hero-date {
    margin-top: 8px;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-timeclock-hero .cb-btn {
    margin-top: 24px;
}

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

.cb-timeclock-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
}

.cb-timeclock-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
}

.cb-timeclock-stat span {
    display: block;
    margin-top: 4px;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cb-settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--cb-line);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}

.cb-settings-nav {
    padding: 18px 14px;
    border-right: 1px solid var(--cb-line);
    background: #fff;
}

.cb-settings-nav h3 {
    margin: 0 0 14px;
    padding: 0 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a0a9c1;
}

.cb-settings-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 14px;
    color: #556280;
    font-size: 14px;
    font-weight: 500;
}

.cb-settings-nav a.is-active {
    background: #ece6ff;
    color: var(--cb-purple);
}

.cb-settings-content {
    padding: 28px 32px;
}

.cb-settings-content h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.cb-settings-content > p {
    margin: 8px 0 22px;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-settings-section {
    display: grid;
    gap: 18px;
    max-width: 600px;
}

.cb-settings-box {
    padding: 20px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
}

.cb-settings-box h3 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 800;
}

.cb-settings-box.danger {
    background: #fff4f5;
    border-color: #ffd2d7;
}

.cb-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--cb-line);
}

.cb-toggle-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.cb-switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex: 0 0 auto;
}

.cb-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cb-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #e3e4eb;
    transition: background-color 160ms ease;
}

.cb-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 20, 40, 0.12);
    transition: transform 160ms ease;
}

.cb-switch input:checked + span {
    background: var(--cb-purple);
}

.cb-switch input:checked + span::after {
    transform: translateX(18px);
}

.cb-chart-shell {
    padding: 20px;
}

.cb-fake-line-chart {
    position: relative;
    height: 248px;
    border: 1px dashed #ecebf6;
    border-radius: 18px;
    background:
        linear-gradient(to top, rgba(108, 77, 245, 0.12), rgba(108, 77, 245, 0.02)),
        #fff;
}

.cb-fake-line-chart::before {
    content: "";
    position: absolute;
    inset: 18px 18px 26px;
    border-radius: 16px;
    background:
        linear-gradient(to top, transparent 0, transparent calc(100% - 1px), rgba(211, 216, 235, 0.7) 100%);
    mask: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 54px);
}

.cb-fake-line-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cb-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: end;
    height: 210px;
    padding: 12px 18px 0;
}

.cb-bar {
    display: grid;
    gap: 8px;
}

.cb-bar-shape {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #7a55f7, #5d3fee);
}

.cb-bar-label {
    text-align: center;
    color: #7c87a4;
    font-size: 13px;
}

.cb-donut {
    width: 184px;
    height: 184px;
    margin: 8px auto 0;
    border-radius: 50%;
    background: conic-gradient(#6c4df5 0 68%, #4e85f8 68% 82%, #17b783 82% 100%);
    position: relative;
}

.cb-donut::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cb-line);
}

.cb-donut-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    font-weight: 700;
}

.cb-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.cb-footer-space {
    height: 12px;
}

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

    .cb-staff-grid,
    .cb-location-grid,
    .cb-card-grid,
    .cb-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .cb-shell {
        grid-template-columns: 1fr;
    }

    .cb-sidebar {
        display: none;
    }

    .cb-topbar {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .cb-topbar-right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: 10px;
    }

    .cb-page-shell {
        padding: 20px 16px 32px;
    }

    .cb-page {
        width: 100%;
    }

    .cb-staff-grid,
    .cb-location-grid,
    .cb-card-grid,
    .cb-stats-grid,
    .cb-grid-two,
    .cb-grid-three,
    .cb-timeclock-stat-grid,
    .cb-form-row,
    .cb-settings-layout,
    .cb-two-col {
        grid-template-columns: 1fr;
    }

    .cb-settings-nav {
        border-right: 0;
        border-bottom: 1px solid var(--cb-line);
    }

    .cb-modal-dialog {
        width: min(100% - 18px, 560px);
        margin-top: 4vh;
    }
}

/* Workspace global search */
.cb-topbar-search-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.cb-topbar-search-wrap .cb-topbar-search {
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cb-topbar-search-wrap .cb-topbar-search input {
    padding-right: 72px;
}

.cb-topbar-search-wrap .cb-topbar-search input:focus {
    border-color: #b9adff;
    background: #fff;
    outline: 3px solid rgba(111, 77, 246, 0.1);
}

.cb-topbar-search-shortcut {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #929bb2;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.cb-app-search-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 80;
    width: min(540px, calc(100vw - 64px));
    overflow: hidden;
    border: 1px solid #e5e7f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(20, 27, 52, 0.16);
}

.cb-app-search-panel[hidden],
.cb-app-search-shortcuts[hidden],
.cb-app-search-results[hidden],
.cb-app-search-state[hidden] {
    display: none !important;
}

.cb-app-search-head,
.cb-app-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-app-search-head {
    min-height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid #eff1f6;
}

.cb-app-search-head > span {
    color: #111a44;
    font-size: 12px;
    font-weight: 900;
}

.cb-app-search-head small {
    color: #939cb3;
    font-size: 11px;
    font-weight: 700;
}

.cb-app-search-shortcuts,
.cb-app-search-results {
    max-height: min(440px, calc(100vh - 180px));
    overflow-y: auto;
    padding: 7px;
}

.cb-app-search-group + .cb-app-search-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f2f7;
}

.cb-app-search-group h3 {
    margin: 0;
    padding: 5px 8px 4px;
    color: #9aa3b8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cb-app-search-option {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #46516f;
    text-decoration: none;
}

.cb-app-search-option:hover,
.cb-app-search-option.is-active {
    background: #f7f5ff;
}

.cb-app-search-option.is-active {
    box-shadow: inset 0 0 0 1px #ded7ff;
}

.cb-app-search-option-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #6e4df6;
    background: #f0edff;
}

.cb-app-search-option-icon svg {
    width: 18px;
    height: 18px;
}

.cb-app-search-option-icon.is-initials {
    font-size: 11px;
    font-weight: 900;
}

.cb-app-search-option-icon.tone-shift {
    color: #3478f6;
    background: #edf4ff;
}

.cb-app-search-option-icon.tone-location {
    color: #00a977;
    background: #eafaf5;
}

.cb-app-search-option-icon.tone-page {
    color: #6c7691;
    background: #f2f4f8;
}

.cb-app-search-option-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-app-search-option-copy strong,
.cb-app-search-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-app-search-option-copy strong {
    color: #111a44;
    font-size: 13px;
    font-weight: 800;
}

.cb-app-search-option-copy small {
    color: #8c96ad;
    font-size: 11px;
    font-weight: 600;
}

.cb-app-search-option-type {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f3f4f8;
    color: #8992a8;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.cb-app-search-option-arrow {
    display: inline-flex;
    color: #a1a9bb;
}

.cb-app-search-option-arrow svg {
    width: 16px;
    height: 16px;
}

.cb-app-search-state {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: #8b95ad;
    text-align: left;
}

.cb-app-search-state > span:not(.cb-app-search-spinner) {
    display: grid;
    gap: 4px;
}

.cb-app-search-state strong {
    color: #273252;
    font-size: 13px;
}

.cb-app-search-state small {
    max-width: 330px;
    color: #9099ae;
    font-size: 11px;
    line-height: 1.5;
}

.cb-app-search-spinner {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 2px solid #e8e4ff;
    border-top-color: #6e4df6;
    border-radius: 999px;
    animation: cb-app-search-spin 0.75s linear infinite;
}

.cb-app-search-footer {
    min-height: 38px;
    justify-content: flex-start;
    padding: 0 14px;
    border-top: 1px solid #eff1f6;
    background: #fafafe;
    color: #9aa3b8;
    font-size: 10px;
    font-weight: 700;
}

.cb-app-search-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cb-app-search-footer kbd {
    min-width: 19px;
    padding: 3px 5px;
    border: 1px solid #e2e5ee;
    border-radius: 5px;
    background: #fff;
    color: #747e98;
    font-family: inherit;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    box-shadow: 0 1px 0 #e2e5ee;
}

.cb-search-target {
    scroll-margin-top: 82px;
}

.cb-search-target:target {
    outline: 2px solid #7c5cff;
    outline-offset: 3px;
    animation: cb-search-target-pulse 1.4s ease-out;
}

@keyframes cb-app-search-spin {
    to { transform: rotate(360deg); }
}

@keyframes cb-search-target-pulse {
    0%, 35% { box-shadow: 0 0 0 7px rgba(124, 92, 255, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
}

@media (max-width: 900px) {
    .cb-app-search-panel {
        left: -34px;
        width: calc(100vw - 36px);
    }
}

@media (max-width: 560px) {
    .cb-topbar-search-shortcut,
    .cb-app-search-option-type,
    .cb-app-search-footer {
        display: none;
    }

    .cb-topbar-search-wrap .cb-topbar-search input {
        padding-right: 14px;
    }

    .cb-app-search-option {
        grid-template-columns: 38px minmax(0, 1fr) 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-app-search-spinner,
    .cb-search-target:target {
        animation: none;
    }
}

/* Screenshot-aligned rebuild */
:root {
    --cb-bg: #f6f7fb;
    --cb-surface: #ffffff;
    --cb-surface-soft: #f7f5ff;
    --cb-line: #e6e9f2;
    --cb-line-strong: #d8def0;
    --cb-text: #111a44;
    --cb-text-soft: #8f98b3;
    --cb-purple: #6a4df7;
    --cb-purple-strong: #5b3ff1;
    --cb-purple-soft: #efeaff;
    --cb-green-soft: #def9eb;
    --cb-green-text: #0d9f68;
    --cb-amber-soft: #fff1cb;
    --cb-amber-text: #c78200;
    --cb-red-soft: #ffe1e2;
    --cb-red-text: #ef4444;
    --cb-blue-soft: #e7f0ff;
    --cb-blue-text: #4a67ff;
    --cb-shadow: 0 20px 60px rgba(17, 26, 68, 0.06);
}

body {
    background: var(--cb-bg);
    color: var(--cb-text);
}

.cb-shell {
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--cb-bg);
}

.cb-sidebar {
    background: #fff;
    border-right: 1px solid var(--cb-line);
    padding: 18px 12px 12px;
    gap: 18px;
}

.cb-sidebar-brand {
    padding: 0 12px 10px;
}

.cb-sidebar-brand .cb-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(180deg, #785cff, #5a3ef0);
    color: #fff;
}

.cb-sidebar-brand .cb-logo-label {
    font-size: 15px;
    font-weight: 700;
    color: #0f1639;
}

.cb-sidebar-section-title {
    padding: 0 10px;
    color: #9aa2bc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-sidebar-links {
    display: grid;
    gap: 4px;
}

.cb-sidebar-link {
    min-height: 42px;
    border-radius: 14px;
    padding: 0 12px;
    color: #394566;
    font-size: 14px;
    font-weight: 500;
}

.cb-sidebar-link:hover {
    background: #f6f7fc;
    color: #121c45;
}

.cb-sidebar-link.active {
    background: #ede8ff;
    color: var(--cb-purple);
    box-shadow: inset 0 0 0 1px rgba(106, 77, 247, 0.08);
}

.cb-sidebar-link svg {
    width: 17px;
    height: 17px;
}

.cb-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cb-line);
}

.cb-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--cb-line);
    backdrop-filter: blur(10px);
}

.cb-topbar-left {
    display: grid;
    place-items: center;
}

.cb-topbar-close {
    width: 18px;
    height: 18px;
    color: #8d94ad;
}

.cb-topbar-search {
    max-width: 448px;
    height: 36px;
    border-radius: 12px;
    background: #f4f5f9;
    border: 1px solid transparent;
    padding: 0 14px;
    gap: 10px;
}

.cb-topbar-search input {
    font-size: 13px;
    color: #4c5678;
}

.cb-topbar-search svg,
.cb-topbar-location svg,
.cb-topbar-notify svg {
    width: 16px;
    height: 16px;
    color: #939ab3;
}

.cb-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-topbar-location,
.cb-topbar-notify,
.cb-topbar-user {
    border: 1px solid var(--cb-line);
    background: #fff;
}

.cb-topbar-location {
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #3f4863;
}

.cb-topbar-notify {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.cb-topbar-notify-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
}

.cb-topbar-user {
    height: 40px;
    border-radius: 999px;
    padding: 0 12px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cb-topbar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6a4df7;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.cb-topbar-user-meta {
    display: grid;
    gap: 1px;
    line-height: 1.05;
}

.cb-topbar-user-meta strong {
    font-size: 13px;
    font-weight: 600;
    color: #111a44;
}

.cb-topbar-user-meta span {
    font-size: 12px;
    color: #98a0b7;
}

.cb-page-shell {
    padding: 24px 36px 40px;
}

.cb-page {
    width: min(1320px, 100%);
    margin: 0 auto;
}

.cb-app-page {
    display: grid;
    gap: 22px;
}

.cb-page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cb-page-copy {
    display: grid;
    gap: 8px;
}

.cb-page-kicker {
    color: #a0a7c2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-page-title {
    margin: 0;
    color: #111a44;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
}

.cb-page-subtitle {
    margin: 0;
    color: #9aa1b7;
    font-size: 14px;
}

.cb-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-btn,
.cb-btn-secondary,
.cb-btn-ghost,
.cb-btn-soft,
.cb-status-button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid var(--cb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.cb-btn {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--cb-purple-strong), #7f59f5);
    box-shadow: 0 12px 24px rgba(106, 77, 247, 0.18);
}

.cb-btn-secondary {
    color: #18214b;
    background: #fff;
}

.cb-btn-soft {
    color: var(--cb-purple);
    background: var(--cb-purple-soft);
    border-color: transparent;
}

.cb-btn-ghost,
.cb-status-button {
    background: #f6f7fb;
    color: #394566;
}

.cb-btn:hover,
.cb-btn-secondary:hover,
.cb-btn-soft:hover,
.cb-btn-ghost:hover {
    transform: translateY(-1px);
}

.cb-panel,
.cb-card,
.cb-stat-card,
.cb-list-surface,
.cb-modal-dialog,
.cb-auth-card {
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    box-shadow: var(--cb-shadow);
}

.cb-panel {
    padding: 24px;
}

.cb-panel-tight {
    padding: 18px 20px;
}

.cb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.cb-panel-head h2,
.cb-panel-head h3,
.cb-block-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111a44;
}

.cb-block-subtitle {
    margin: 6px 0 0;
    color: #97a0ba;
    font-size: 14px;
}

.cb-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cb-stat-tile {
    min-height: 108px;
    padding: 22px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    display: grid;
    gap: 10px;
}

.cb-stat-tile-label {
    color: #9ba2ba;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cb-stat-tile-value {
    color: #101944;
    font-size: 22px;
    font-weight: 700;
}

.cb-stat-tile-note {
    color: #7e88a4;
    font-size: 14px;
}

.cb-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) 420px;
    gap: 24px;
}

.cb-stack {
    display: grid;
    gap: 20px;
}

.cb-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.cb-kpi-card {
    min-height: 146px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    display: grid;
    align-content: space-between;
    gap: 14px;
}

.cb-kpi-card small {
    color: #7983a1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cb-kpi-card strong {
    font-size: 20px;
    color: #101944;
}

.cb-kpi-card span {
    color: #7c86a2;
    font-size: 14px;
}

.cb-mini-callout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-mini-callout {
    min-height: 180px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--cb-line);
    display: grid;
    align-content: space-between;
    gap: 18px;
}

.cb-mini-callout.green {
    background: linear-gradient(180deg, #effcf5, #f9fffc);
}

.cb-mini-callout.blue {
    background: linear-gradient(180deg, #f1f5ff, #fbfcff);
}

.cb-mini-callout.pink {
    background: linear-gradient(180deg, #fff4fb, #fffdfd);
}

.cb-mini-callout-title {
    color: #7f88a4;
    font-size: 14px;
}

.cb-mini-callout-value {
    color: #101944;
    font-size: 24px;
    font-weight: 700;
}

.cb-mini-callout h3 {
    margin: 0;
    color: #111a44;
    font-size: 18px;
}

.cb-mini-callout a {
    color: var(--cb-purple);
    font-weight: 600;
    text-decoration: none;
}

.cb-list-surface {
    overflow: hidden;
}

.cb-list-header {
    padding: 22px 24px;
    border-bottom: 1px solid var(--cb-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-list-header h2,
.cb-list-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.cb-list-header p {
    margin: 6px 0 0;
    color: #9aa2bb;
    font-size: 14px;
}

.cb-list-table {
    display: grid;
}

.cb-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--cb-line);
}

.cb-list-row:first-child {
    border-top: 0;
}

.cb-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-person-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.cb-person-copy {
    display: grid;
    gap: 4px;
}

.cb-person-copy strong {
    font-size: 15px;
    font-weight: 600;
    color: #101944;
}

.cb-person-copy span,
.cb-muted {
    color: #98a0b7;
    font-size: 14px;
}

.cb-meta-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8a94ae;
    font-size: 13px;
    flex-wrap: wrap;
}

.cb-status-pill,
.cb-soft-chip,
.cb-tone-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
}

.cb-soft-chip {
    background: #f5f6fb;
    color: #6c7694;
}

.cb-status-pill.active,
.cb-tone-pill.green {
    background: #dff9ea;
    color: #0f9d67;
}

.cb-status-pill.pending,
.cb-tone-pill.amber {
    background: #fff0c9;
    color: #b97a00;
}

.cb-status-pill.declined,
.cb-status-pill.expired,
.cb-tone-pill.red {
    background: #ffe3e3;
    color: #ef4444;
}

.cb-tone-pill.blue {
    background: #e8f0ff;
    color: #4a67ff;
}

.cb-tone-pill.purple,
.cb-status-pill.pinned {
    background: #efeaff;
    color: #6a4df7;
}

.cb-note-card {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--cb-line);
    background: #fff;
}

.cb-note-card.warning {
    background: #fff6f5;
    border-color: #ffc8c3;
}

.cb-grid-2,
.cb-grid-3,
.cb-grid-4 {
    display: grid;
    gap: 20px;
}

.cb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cb-staff-grid,
.cb-location-grid,
.cb-department-grid,
.cb-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-staff-card,
.cb-location-card,
.cb-department-card,
.cb-doc-row,
.cb-swap-card,
.cb-run-card {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
}

.cb-staff-card {
    display: grid;
    gap: 18px;
}

.cb-staff-card-head,
.cb-location-card-head,
.cb-doc-row,
.cb-run-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.cb-staff-card-meta {
    display: grid;
    gap: 8px;
}

.cb-staff-card-meta h3,
.cb-location-card h3,
.cb-doc-title,
.cb-department-title,
.cb-swap-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111a44;
}

.cb-card-divider {
    height: 1px;
    background: var(--cb-line);
}

.cb-member-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-member-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fff;
    font-size: 13px;
    color: #76809d;
}

.cb-member-pill .cb-member-pill-name {
    color: #111a44;
    font-weight: 600;
}

.cb-table-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 22px;
}

.cb-table-head,
.cb-table-row {
    display: grid;
    align-items: center;
}

.cb-table-head {
    min-height: 44px;
    color: #9aa3bc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cb-line);
    background: #fff;
}

.cb-table-row {
    min-height: 56px;
    border-top: 1px solid var(--cb-line);
    background: #fff;
}

.cb-table-row:first-child {
    border-top: 0;
}

.cb-availability-table .cb-table-head,
.cb-availability-table .cb-table-row {
    grid-template-columns: 180px repeat(7, minmax(0, 1fr));
}

.cb-rota-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cb-rota-toolbar-left,
.cb-rota-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-rota-toolbar-chip {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fff;
    color: #3c4765;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.cb-rota-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 22px;
}

.cb-rota-grid {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(0, 1fr)) 76px;
}

.cb-rota-head {
    min-height: 58px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-rota-head-cell,
.cb-rota-staff-cell,
.cb-rota-slot,
.cb-rota-hours {
    padding: 12px 14px;
    border-left: 1px solid var(--cb-line);
}

.cb-rota-grid > *:nth-child(9n + 1) {
    border-left: 0;
}

.cb-rota-head-cell {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #111a44;
}

.cb-rota-head-cell small {
    color: #99a1b8;
    font-size: 12px;
    font-weight: 500;
}

.cb-rota-row {
    min-height: 72px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-rota-staff-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-rota-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-shift-pill {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid;
    padding: 8px 10px;
    display: grid;
    gap: 2px;
    color: #5c49f7;
    background: #f1efff;
    border-color: #c5bcff;
    font-size: 12px;
    line-height: 1.15;
}

.cb-shift-pill strong {
    font-size: 13px;
    font-weight: 700;
}

.cb-shift-pill small {
    color: inherit;
    opacity: 0.88;
}

.cb-shift-pill.orange {
    background: #fff4e7;
    border-color: #ffc86b;
    color: #ef7a00;
}

.cb-shift-pill.green {
    background: #eafcf4;
    border-color: #98ebca;
    color: #0b9f67;
}

.cb-shift-pill.red {
    background: #fff0f0;
    border-color: #ffb8b8;
    color: #ef4444;
}

.cb-shift-pill.draft {
    border-style: dashed;
}

.cb-availability-chip {
    min-height: 32px;
    border-radius: 12px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid;
}

.cb-availability-chip.available {
    background: #eafcf4;
    border-color: #98ebca;
    color: #0b9f67;
}

.cb-availability-chip.unavailable {
    background: #fff0f0;
    border-color: #ffcdcd;
    color: #ef4444;
}

.cb-availability-chip.custom {
    background: #efeaff;
    border-color: #cbbfff;
    color: #6a4df7;
}

.cb-swap-card {
    display: grid;
    gap: 14px;
}

.cb-swap-shifts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.cb-swap-leg {
    min-height: 62px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid;
    display: grid;
    gap: 6px;
}

.cb-swap-leg.give {
    background: #fff0f1;
    border-color: #ffc6cc;
    color: #ef4444;
}

.cb-swap-leg.pick {
    background: #eafcf4;
    border-color: #9de6cb;
    color: #0a9b63;
}

.cb-doc-list,
.cb-run-list,
.cb-compliance-list {
    display: grid;
    gap: 14px;
}

.cb-doc-row,
.cb-run-card {
    align-items: center;
}

.cb-chart-card {
    padding: 18px 20px 24px;
    border-radius: 22px;
    border: 1px solid var(--cb-line);
    background: #fff;
}

.cb-line-chart {
    position: relative;
    height: 290px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(to bottom, rgba(106, 77, 247, 0.10), rgba(106, 77, 247, 0.02)),
        #fff;
}

.cb-line-chart::before {
    content: "";
    position: absolute;
    inset: 18px 22px;
    background-image: linear-gradient(to bottom, rgba(213, 218, 235, 0.75) 1px, transparent 1px);
    background-size: 100% 54px;
    border-radius: 12px;
}

.cb-line-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cb-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background: #f7f8fb;
}

.cb-auth-panel {
    width: min(100%, 420px);
    display: grid;
    justify-items: center;
    gap: 22px;
}

.cb-auth-badge {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, #7356f8, #5d3fef);
    box-shadow: 0 14px 30px rgba(106, 77, 247, 0.22);
}

.cb-auth-badge svg {
    width: 24px;
    height: 24px;
}

.cb-auth-copy {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
}

.cb-auth-copy h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

.cb-auth-copy p,
.cb-auth-footer {
    margin: 0;
    color: #9aa1b8;
    font-size: 14px;
}

.cb-auth-card {
    width: 100%;
    padding: 28px;
    display: grid;
    gap: 18px;
}

.cb-auth-provider,
.cb-auth-submit {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--cb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
}

.cb-auth-submit {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--cb-purple-strong), #855bf6);
}

.cb-auth-provider-icon {
    width: 18px;
    height: 18px;
}

.cb-auth-provider-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cb-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #b3bad0;
    font-size: 12px;
    font-weight: 700;
}

.cb-auth-divider span {
    height: 1px;
    background: var(--cb-line);
}

.cb-auth-field {
    display: grid;
    gap: 8px;
    color: #121c45;
    font-size: 14px;
    font-weight: 600;
}

.cb-inline-between {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.cb-inline-between a,
.cb-auth-footer a {
    color: var(--cb-purple);
    text-decoration: none;
    font-weight: 600;
}

.cb-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-input-wrap i,
.cb-input-wrap b {
    position: absolute;
    width: 18px;
    height: 18px;
    color: #a1a8c0;
}

.cb-input-wrap i { left: 14px; }
.cb-input-wrap b { right: 14px; }

.cb-auth-field input,
.cb-auth-field select,
.cb-auth-field textarea,
.cb-form-control,
.cb-select,
.cb-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dfe4f1;
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: #111a44;
}

.cb-input-wrap input {
    padding-left: 42px;
    padding-right: 42px;
}

.cb-auth-field textarea,
.cb-form-control textarea {
    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cb-form-grid {
    display: grid;
    gap: 16px;
}

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

.cb-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 100;
    overflow-y: auto;
}

.cb-modal.is-open {
    display: block;
}

.cb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 24, 41, 0.44);
    backdrop-filter: blur(2px);
}

.cb-modal-dialog {
    position: relative;
    width: min(100% - 24px, 520px);
    margin: 10vh auto 0;
    padding: 0;
    overflow: hidden;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
}

.cb-modal-head {
    min-height: 74px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cb-line);
}

.cb-modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.cb-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fff;
    color: #848ca7;
}

.cb-modal-body {
    padding: 22px;
    overflow-y: auto;
}

.cb-flash {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
}

.cb-flash-success {
    color: #0f9d67;
    background: #e8faf1;
    border: 1px solid #bfeccf;
}

.cb-flash-error {
    color: #ef4444;
    background: #fff0f0;
    border: 1px solid #ffc8c8;
}

@media (max-width: 1400px) {
    .cb-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .cb-kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cb-staff-grid,
    .cb-location-grid,
    .cb-department-grid,
    .cb-doc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .cb-stat-strip,
    .cb-mini-callout-grid,
    .cb-grid-2,
    .cb-grid-3,
    .cb-grid-4,
    .cb-form-row {
        grid-template-columns: 1fr;
    }

    .cb-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-staff-grid,
    .cb-location-grid,
    .cb-department-grid,
    .cb-doc-grid {
        grid-template-columns: 1fr;
    }

    .cb-rota-grid {
        grid-template-columns: 180px repeat(7, minmax(120px, 1fr)) 76px;
        min-width: 1180px;
    }

    .cb-rota-shell {
        overflow-x: auto;
    }
}

/* Screenshot-aligned rebuild */
.cb-page-shell {
    padding: 36px 34px 48px;
    background: #f7f8fc;
}

.cb-page-header {
    max-width: 940px;
    margin: 0 auto 28px;
}

.cb-page-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #121a44;
}

.cb-page-header p {
    margin: 8px 0 0;
    color: #98a1bd;
    font-size: 14px;
    line-height: 1.45;
}

.cb-page-stack,
.cb-app-grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

.cb-app-grid.has-sidebar {
    max-width: 1260px;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
}

.cb-card,
.cb-surface,
.cb-list-panel,
.cb-hero-panel,
.cb-table-panel,
.cb-summary-panel,
.cb-modal-dialog {
    background: #fff;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    box-shadow: 0 10px 32px rgba(91, 109, 248, 0.06);
}

.cb-card,
.cb-surface,
.cb-list-panel,
.cb-summary-panel,
.cb-table-panel {
    padding: 22px 24px;
}

.cb-card-head,
.cb-page-actions,
.cb-head-actions,
.cb-inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cb-card-head {
    margin-bottom: 18px;
}

.cb-card-head h2,
.cb-surface h2,
.cb-panel-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #111a44;
}

.cb-section-copy,
.cb-panel-copy {
    margin: 6px 0 0;
    color: #98a1bd;
    font-size: 13px;
    line-height: 1.5;
}

.cb-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid #e2e6f3;
    background: #fff;
    color: #111a44;
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.cb-btn:hover {
    border-color: #cfd6eb;
    background: #fcfcff;
}

.cb-btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #5a60f8 0%, #7d54ea 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(93, 91, 248, 0.18);
}

.cb-btn-primary:hover {
    background: linear-gradient(135deg, #555cf3 0%, #7348e6 100%);
}

.cb-btn-success {
    border-color: transparent;
    background: #0fad74;
    color: #fff;
}

.cb-btn-ghost {
    background: #fff4f4;
    color: #ff4b4b;
    border-color: #ffd6d6;
}

.cb-btn-block {
    width: 100%;
}

.cb-empty-state {
    min-height: 168px;
    border: 1px dashed #dfe4f1;
    border-radius: 18px;
    padding: 22px;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    background: #fbfcff;
}

.cb-empty-state.compact {
    min-height: 96px;
}

.cb-empty-state strong {
    color: #121a44;
    font-size: 15px;
}

.cb-empty-state p {
    margin: 0;
    color: #98a1bd;
    font-size: 13px;
    line-height: 1.5;
}

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

.cb-kpi-grid.compact-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-kpi-card {
    min-height: 90px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #e7eaf4;
    background: #fff;
    box-shadow: 0 8px 24px rgba(91, 109, 248, 0.05);
    display: grid;
    gap: 8px;
}

.cb-kpi-card span {
    color: #9ba3be;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-kpi-card strong {
    color: #111a44;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cb-kpi-card small {
    color: #98a1bd;
    font-size: 13px;
}

.cb-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.cb-sidebar-stack,
.cb-stack-list {
    display: grid;
    gap: 16px;
}

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

.cb-list-row,
.cb-feed-item,
.cb-announcement-card,
.cb-staff-card,
.cb-location-card,
.cb-record-item,
.cb-timeoff-row,
.cb-document-row,
.cb-payroll-row,
.cb-compliance-row,
.cb-setting-row {
    border: 1px solid #ebedf6;
    border-radius: 18px;
    background: #fff;
}

.cb-list-row {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.cb-list-row strong,
.cb-entity-card strong,
.cb-feed-item strong,
.cb-announcement-card strong,
.cb-staff-card strong,
.cb-location-card strong,
.cb-timeoff-row strong,
.cb-document-row strong,
.cb-payroll-row strong,
.cb-compliance-row strong {
    display: block;
    color: #111a44;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.cb-list-row span,
.cb-entity-card span,
.cb-feed-item span,
.cb-announcement-card span,
.cb-staff-card span,
.cb-location-card span,
.cb-timeoff-row span,
.cb-document-row span,
.cb-payroll-row span,
.cb-compliance-row span,
.cb-meta-text {
    color: #98a1bd;
    font-size: 13px;
    line-height: 1.45;
}

.cb-list-row b,
.cb-pay-value {
    color: #111a44;
    font-size: 14px;
    font-weight: 700;
}

.cb-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cb-pill,
.cb-count-pill,
.cb-status-badge,
.cb-chip {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cb-pill,
.cb-count-pill,
.cb-chip {
    background: #f2f4fb;
    color: #6e7797;
}

.cb-status-badge.is-green { background: #dcfce9; color: #0c9f69; }
.cb-status-badge.is-amber { background: #fff1cb; color: #d98700; }
.cb-status-badge.is-red { background: #ffe1e1; color: #ea4c4c; }
.cb-status-badge.is-purple { background: #ece9ff; color: #6c52e9; }
.cb-status-badge.is-blue { background: #e8f1ff; color: #4d86f5; }

.cb-feed-list {
    display: grid;
    gap: 16px;
}

.cb-announcement-card,
.cb-feed-item {
    padding: 18px 20px;
}

.cb-announcement-card header,
.cb-feed-item header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.cb-announcement-card p,
.cb-feed-item p {
    margin: 12px 0 0;
    color: #3e486a;
    font-size: 14px;
    line-height: 1.7;
}

.cb-announcement-card footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef0f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-entity-grid,
.cb-staff-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-entity-card,
.cb-staff-card {
    padding: 18px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(91, 109, 248, 0.04);
    display: grid;
    gap: 12px;
}

.cb-avatar-row {
    display: flex;
    gap: 14px;
    align-items: center;
}

.cb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex: none;
}

.cb-card-divider {
    height: 1px;
    background: #edf0f7;
}

.cb-rota-board {
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(91, 109, 248, 0.05);
    overflow: hidden;
}

.cb-rota-toolbar {
    max-width: 1420px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-rota-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-rota-grid {
    display: grid;
    grid-template-columns: 220px repeat(7, minmax(110px, 1fr)) 90px;
    min-width: 1180px;
}

.cb-rota-cell,
.cb-rota-head,
.cb-rota-staff {
    min-height: 72px;
    padding: 16px;
    border-right: 1px solid #edf0f7;
    border-bottom: 1px solid #edf0f7;
    background: #fff;
}

.cb-rota-head {
    min-height: 88px;
    font-weight: 700;
    color: #111a44;
    display: grid;
    gap: 4px;
}

.cb-rota-head small {
    color: #98a1bd;
    font-size: 12px;
}

.cb-rota-staff {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cb-shift-pill {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid #cfd7ff;
    background: #eef1ff;
    padding: 8px 10px;
    display: grid;
    align-content: center;
    gap: 2px;
    color: #4c5de2;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.cb-shift-pill small {
    color: #7e88b2;
    font-size: 11px;
    font-weight: 500;
}

.cb-shift-pill.is-green { background: #edfff8; border-color: #a2f0d1; color: #0d9a65; }
.cb-shift-pill.is-amber { background: #fff7e8; border-color: #ffd48a; color: #f08a00; }
.cb-shift-pill.is-red { background: #fff0f0; border-color: #ffb6b6; color: #ef4d4d; }
.cb-shift-pill.is-purple { background: #f2ecff; border-color: #cfbeff; color: #7c4ee5; }
.cb-shift-pill.is-draft { border-style: dashed; }

.cb-table-shell {
    overflow-x: auto;
}

.cb-availability-table,
.cb-availability-matrix {
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
}

.cb-availability-table .cb-table-head,
.cb-availability-table .cb-table-row {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(100px, 1fr));
}

.cb-table-head > div,
.cb-table-row > div {
    min-height: 62px;
    padding: 14px 16px;
    border-right: 1px solid #edf0f7;
    border-bottom: 1px solid #edf0f7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cb-table-head > div:first-child,
.cb-table-row > div:first-child {
    justify-content: flex-start;
}

.cb-table-head > div {
    font-size: 13px;
    font-weight: 700;
    color: #111a44;
}

.cb-availability-badge {
    width: 100%;
    min-height: 34px;
    border-radius: 12px;
    border: 1px solid #9fe9c8;
    background: #ebfff5;
    color: #0a9f69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.cb-availability-badge.is-off {
    background: #fff1f1;
    border-color: #ffc8c8;
    color: #ff4a67;
}

.cb-availability-badge.is-time {
    background: #f1edff;
    border-color: #cfc2ff;
    color: #6f53eb;
}

.cb-swap-list,
.cb-document-list,
.cb-location-grid,
.cb-department-list,
.cb-timeoff-list,
.cb-payroll-list,
.cb-compliance-list,
.cb-settings-stack {
    display: grid;
    gap: 16px;
}

.cb-swap-card {
    padding: 18px 20px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
}

.cb-swap-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 14px;
}

.cb-swap-box {
    min-height: 62px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #ffd2d2;
    background: #fff3f3;
}

.cb-swap-box.is-pick {
    border-color: #a5efd2;
    background: #edfff8;
}

.cb-timeclock-hero {
    min-height: 246px;
    padding: 34px 24px;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
}

.cb-timeclock-time {
    font-size: clamp(48px, 8vw, 72px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #111a44;
}

.cb-timeclock-date {
    color: #98a1bd;
    font-size: 14px;
}

.cb-record-group {
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
}

.cb-record-group-title {
    min-height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf0f7;
    font-weight: 700;
    color: #111a44;
}

.cb-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d1d5e5;
}

.cb-dot.is-green { background: #10b981; }
.cb-dot.is-amber { background: #f59e0b; }

.cb-record-item {
    min-height: 72px;
    padding: 16px 18px;
    border: 0;
    border-top: 1px solid #edf0f7;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-location-card,
.cb-department-card {
    padding: 20px 22px;
}

.cb-location-card footer,
.cb-document-row,
.cb-payroll-row,
.cb-compliance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-document-row,
.cb-payroll-row,
.cb-compliance-row {
    padding: 14px 18px;
}

.cb-settings-shell {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.cb-settings-nav {
    padding: 18px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    display: grid;
    gap: 6px;
}

.cb-settings-nav h3 {
    margin: 0 0 8px;
    color: #9aa2bb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cb-settings-link {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5d6788;
    text-decoration: none;
    font-weight: 500;
}

.cb-settings-link.is-active {
    background: #f0ecff;
    color: #5f52ec;
    font-weight: 600;
}

.cb-settings-pane {
    display: grid;
    gap: 22px;
}

.cb-setting-block {
    padding: 22px 24px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(91, 109, 248, 0.04);
}

.cb-form-stack {
    display: grid;
    gap: 14px;
}

.cb-form-stack label,
.cb-field {
    display: grid;
    gap: 8px;
    color: #111a44;
    font-size: 14px;
    font-weight: 600;
}

.cb-form-stack input,
.cb-form-stack select,
.cb-form-stack textarea {
    min-height: 46px;
    border: 1px solid #dde2ef;
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: #111a44;
}

.cb-form-stack textarea {
    min-height: 118px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cb-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5f6887;
    font-size: 14px;
}

.cb-check-row input {
    min-height: auto;
    width: 16px;
    height: 16px;
}

.cb-modal-dialog {
    width: min(100% - 24px, 560px);
    margin-top: 9vh;
    max-height: 84vh;
}

.cb-modal-head {
    min-height: 72px;
    padding: 0 22px;
}

.cb-modal-head h2 {
    font-size: 16px;
    font-weight: 700;
}

.cb-modal-body {
    padding: 20px 22px 24px;
    overflow-y: auto;
}

.cb-page-header {
    display: grid;
    gap: 8px;
}

.cb-page-header.is-centered {
    width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
}

.cb-page-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1ecff;
    color: #7b68f8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-module-shell {
    width: min(100%, 980px);
    margin: 0 auto;
}

.cb-module-actionbar {
    margin-top: -4px;
}

.cb-section-heading-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-request-panel,
.cb-record-section {
    padding: 0;
    overflow: hidden;
}

.cb-request-panel .cb-section-heading,
.cb-record-section .cb-record-head {
    padding: 18px 22px;
    border-bottom: 1px solid #edf0f7;
}

.cb-request-row-strong,
.cb-record-item {
    padding: 18px 22px;
}

.cb-request-row-strong + .cb-request-row-strong,
.cb-record-item + .cb-record-item,
.cb-compliance-row + .cb-compliance-row {
    border-top: 1px solid #edf0f7;
}

.cb-inline-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f3f0ff;
    color: #7558f6;
    font-size: 11px;
    font-weight: 600;
}

.cb-clock-hero {
    padding: 42px 32px;
    text-align: center;
}

.cb-clock-hero strong {
    font-size: clamp(48px, 7vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.cb-clock-hero span {
    display: block;
    margin-top: 8px;
    margin-bottom: 26px;
    color: #98a2bd;
    font-size: 14px;
}

.cb-link-button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: left;
}

.cb-clock-name-button {
    display: block;
    font-weight: 800;
    color: #071139;
}

.cb-clock-name-button:hover,
.cb-clock-name-button:focus-visible {
    color: #6e4df6;
    outline: none;
}

.cb-clock-edit-form .cb-form-grid,
.cb-clock-break-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-clock-break-editor {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    background: #fbfbfe;
}

.cb-clock-break-editor .cb-record-head {
    padding: 0;
    border-bottom: 0;
}

.cb-clock-break-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 0.9fr);
}

.cb-clock-edit-note {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5f2ff;
    color: #6f56f6;
    font-size: 13px;
    font-weight: 700;
}

.cb-tight-kpi-grid .cb-kpi-card {
    min-height: 128px;
}

.cb-two-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-location-card {
    padding: 22px 22px 18px;
    min-height: 186px;
}

.cb-location-card strong {
    display: block;
    margin: 10px 0 8px;
    font-size: 18px;
    line-height: 1.15;
}

.cb-location-card p {
    margin: 0 0 22px;
    color: #8a94b0;
    line-height: 1.55;
}

.cb-location-card footer {
    padding-top: 16px;
    border-top: 1px solid #edf0f7;
}

.cb-location-staff {
    color: #8a94b0;
    font-weight: 600;
}

.cb-settings-shell-modern .cb-settings-nav,
.cb-settings-shell-modern .cb-setting-block {
    border-radius: 24px;
}

.cb-settings-shell-revamp {
    max-width: 1220px;
    gap: 26px;
}

.cb-settings-nav-revamp {
    position: sticky;
    top: 24px;
    gap: 18px;
    padding: 22px;
    border-color: rgba(124, 92, 255, 0.12);
    box-shadow: 0 24px 48px rgba(34, 46, 106, 0.06);
}

.cb-settings-nav-copy {
    display: grid;
    gap: 10px;
}

.cb-settings-nav-copy h3 {
    margin: 0;
    color: #182353;
    font-size: 24px;
    letter-spacing: -0.03em;
    text-transform: none;
}

.cb-settings-nav-copy p {
    margin: 0;
    color: #7f8aad;
    font-size: 14px;
    line-height: 1.6;
}

.cb-settings-tab-list {
    display: grid;
    gap: 10px;
}

.cb-settings-shell-revamp .cb-settings-link {
    min-height: 60px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background: #f8f9ff;
    transition: 0.18s ease;
}

.cb-settings-shell-revamp .cb-settings-link span {
    color: #1a2555;
    font-size: 15px;
    font-weight: 700;
}

.cb-settings-shell-revamp .cb-settings-link small {
    color: #8a95b7;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.cb-settings-shell-revamp .cb-settings-link:hover {
    border-color: rgba(124, 92, 255, 0.18);
    background: #f3f1ff;
}

.cb-settings-shell-revamp .cb-settings-link.is-active {
    border-color: rgba(124, 92, 255, 0.18);
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.14), rgba(124, 92, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.06);
}

.cb-settings-sidecard {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #151d47, #0d1332);
    color: #fff;
}

.cb-settings-sidecard strong {
    font-size: 16px;
}

.cb-settings-sidecard p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.6;
}

.cb-settings-sidecard .cb-inline-actions {
    margin-top: 2px;
}

.cb-settings-sidecard .cb-status-badge {
    border-color: rgba(255, 255, 255, 0.12);
}

.cb-settings-pane-revamp {
    gap: 24px;
}

.cb-setting-hero {
    padding: 26px 28px;
    border-color: rgba(124, 92, 255, 0.12);
    box-shadow: 0 24px 52px rgba(34, 46, 106, 0.06);
}

.cb-settings-form-grid {
    gap: 18px;
}

.cb-settings-form-grid label {
    display: grid;
    gap: 8px;
}

.cb-settings-form-grid label > span {
    color: #24315f;
    font-size: 13px;
    font-weight: 700;
}

.cb-settings-form-grid input,
.cb-settings-form-grid select,
.cb-settings-form-grid textarea {
    min-height: 52px;
    border: 1px solid #d9e1f2;
    border-radius: 16px;
    background: #fdfdff;
    padding: 0 16px;
    font: inherit;
    color: #182353;
}

.cb-settings-form-grid textarea {
    min-height: 130px;
    padding-top: 14px;
    padding-bottom: 14px;
    resize: vertical;
}

.cb-settings-form-grid input:focus,
.cb-settings-form-grid select:focus,
.cb-settings-form-grid textarea:focus {
    outline: none;
    border-color: rgba(124, 92, 255, 0.38);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.1);
}

.cb-settings-helpbox {
    padding: 14px 16px;
    border: 1px solid rgba(124, 92, 255, 0.14);
    border-radius: 16px;
    background: rgba(124, 92, 255, 0.06);
    color: #5d6788;
    font-size: 14px;
    line-height: 1.6;
}

.cb-settings-brand-preview {
    display: grid;
    gap: 10px;
}

.cb-settings-brand-preview img {
    width: 140px;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    padding: 10px 12px;
    border: 1px solid #e4e9f5;
    border-radius: 18px;
    background: #fff;
}

.cb-settings-footer-actions {
    display: flex;
    justify-content: flex-end;
}

.cb-settings-billing-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.cb-settings-billing-kpi {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px solid #e7eaf4;
    border-radius: 18px;
    background: #f8faff;
}

.cb-settings-billing-kpi span {
    color: #8a95b7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cb-settings-billing-kpi strong {
    color: #182353;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.cb-settings-billing-actions {
    margin-bottom: 20px;
}

.cb-settings-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cb-settings-plan-card {
    padding: 22px 24px;
}

.cb-settings-plan-card .cb-inline-actions {
    margin-top: 14px;
}

@media (max-width: 1180px) {
    .cb-settings-billing-overview,
    .cb-settings-plan-grid {
        grid-template-columns: 1fr;
    }
}

.cb-staff-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-staff-toolbar-copy {
    display: grid;
    gap: 4px;
}

.cb-staff-toolbar-copy span {
    color: #97a0bb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cb-staff-toolbar-copy strong {
    color: #18224a;
    font-size: 16px;
}

.cb-staff-profile-card {
    min-height: 232px;
    padding: 22px;
}

.cb-staff-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cb-staff-profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(91, 109, 248, 0.18);
}

.cb-staff-profile-avatar.tone-violet,
.cb-staff-profile-avatar.tone-indigo { background: linear-gradient(135deg, #6c57f6, #835df0); }
.cb-staff-profile-avatar.tone-blue { background: linear-gradient(135deg, #4d86f5, #69a3ff); }
.cb-staff-profile-avatar.tone-teal,
.cb-staff-profile-avatar.tone-mint { background: linear-gradient(135deg, #0ea99a, #1cc28c); }
.cb-staff-profile-avatar.tone-amber { background: linear-gradient(135deg, #f0a118, #ffbe3d); }
.cb-staff-profile-avatar.tone-pink { background: linear-gradient(135deg, #ef4e8d, #ff77ac); }
.cb-staff-profile-avatar.tone-lime { background: linear-gradient(135deg, #74b900, #93d417); }

.cb-staff-profile-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
    flex: 1 1 auto;
}

.cb-staff-profile-copy strong {
    color: #17214a;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.cb-staff-profile-copy span {
    color: #8f99b5;
    font-size: 14px;
}

.cb-staff-profile-meta {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
}

.cb-staff-profile-meta div {
    display: grid;
    gap: 5px;
}

.cb-staff-profile-meta span {
    color: #96a0bb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cb-staff-profile-meta strong {
    color: #1a234f;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.cb-staff-profile-actions {
    margin-top: 18px;
}

.cb-form-note {
    margin: 0;
    color: #8f99b5;
    font-size: 13px;
    line-height: 1.55;
}

.cb-auth-note {
    margin: 0 0 14px;
    color: #8f99b5;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.cb-feed-stream {
    width: min(100%, 720px);
    margin: 0 auto;
}

.cb-announce-shell {
    gap: 22px;
}

.cb-announce-toolbar {
    width: min(1180px, 100%);
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.cb-announce-toolbar-copy {
    display: grid;
    gap: 4px;
}

.cb-announce-toolbar-copy span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7f8baa;
}

.cb-announce-toolbar-copy strong {
    font-size: 16px;
    color: #15255a;
}

.cb-announce-layout {
    width: min(100%, 720px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.cb-announce-schema-note {
    width: min(100%, 720px);
    margin: 0 auto;
    border: 1px solid #f4d9a6;
    background: #fff7e8;
    color: #7b5400;
    border-radius: 18px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
}

.cb-announce-stream {
    display: grid;
    gap: 20px;
}

.cb-announce-composer,
.cb-announce-feed-card {
    background: #fff;
    border: 1px solid #e4e8f3;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(27, 39, 94, 0.05);
}

.cb-announce-feed-card {
    padding: 20px;
}

.cb-announce-feed-card.is-pinned,
.cb-announce-composer[open] {
    border-color: #6c63ff;
    box-shadow: 0 12px 32px rgba(108, 99, 255, 0.10);
}

.cb-announce-composer summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    font-weight: 700;
    color: #13235a;
    cursor: pointer;
}

.cb-announce-composer summary::-webkit-details-marker {
    display: none;
}

.cb-announce-composer-form {
    display: grid;
    gap: 12px;
    padding: 0 20px 20px;
}

.cb-announce-composer-form input,
.cb-announce-composer-form textarea {
    width: 100%;
    border: 1px solid #dbe1ee;
    border-radius: 16px;
    background: #fbfcff;
    padding: 14px 16px;
    font: inherit;
    color: #22305d;
}

.cb-announce-composer-form textarea {
    resize: vertical;
    min-height: 118px;
}

.cb-announce-composer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cb-announce-composer-meta,
.cb-announce-composer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-announce-card-hero,
.cb-announce-card-foot,
.cb-announce-comment-head,
.cb-announce-comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-announce-card-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-announce-card-date {
    color: #9aa5c2;
    font-size: 14px;
    white-space: nowrap;
}

.cb-announce-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4c5dff, #7a48ff);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(90, 81, 255, 0.22);
}

.cb-announce-avatar.is-small {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 12px;
}

.cb-announce-avatar.tone-alt {
    background: linear-gradient(135deg, #0ea5a0, #3bc58d);
}

.cb-announce-card-author-copy {
    display: grid;
    gap: 4px;
}

.cb-announce-card-author-copy strong,
.cb-announce-comment-head strong {
    color: #13235a;
    font-size: 15px;
}

.cb-announce-card-author-copy span,
.cb-announce-comment-head span,
.cb-announce-card-stats span,
.cb-announce-comment-actions span {
    color: #7c88a7;
    font-size: 13px;
}

.cb-announce-card-tags,
.cb-announce-reactions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-announce-chip {
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
}

.cb-announce-chip.tone-purple {
    background: #efe9ff;
    color: #6842ff;
}

.cb-announce-chip.tone-amber {
    background: #fff1dd;
    color: #d57a00;
}

.cb-announce-chip.tone-slate {
    background: #eef2f8;
    color: #667493;
}

.cb-announce-card-body {
    padding: 10px 0 18px;
}

.cb-announce-card-body h2 {
    margin: 0;
    color: #0e1f59;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.cb-announce-richtext {
    margin-top: 12px;
    color: #304066;
    font-size: 14px;
    line-height: 1.75;
}

.cb-announce-card-foot {
    padding-top: 14px;
    border-top: 1px solid #eef2fb;
}

.cb-announce-posted {
    color: #99a3bf;
    font-size: 14px;
}

.cb-announce-card-subfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    color: #8a94af;
    font-size: 13px;
}

.cb-announce-reaction {
    min-width: 64px;
    border: 1px solid #dde4f4;
    background: #fff;
    color: #23315f;
    border-radius: 999px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    cursor: pointer;
}

.cb-announce-reaction.is-active {
    background: #f1edff;
    border-color: #c6b9ff;
    color: #613eff;
}

.cb-announce-reaction small {
    color: inherit;
    font-weight: 700;
}

.cb-announce-thread {
    margin-top: 24px;
    display: grid;
    gap: 18px;
}

.cb-announce-comments,
.cb-announce-replies {
    display: grid;
    gap: 14px;
}

.cb-announce-comment,
.cb-announce-reply {
    background: #f7f9fe;
    border: 1px solid #e8edf8;
    border-radius: 20px;
    padding: 16px 18px;
}

.cb-announce-comment p,
.cb-announce-reply p {
    margin: 12px 0 0;
    color: #304066;
    line-height: 1.7;
}

.cb-announce-replies {
    margin-top: 14px;
    padding-left: 20px;
}

.cb-announce-replybox summary {
    margin-top: 14px;
    list-style: none;
    color: #5a46e8;
    font-weight: 700;
    cursor: pointer;
}

.cb-announce-replybox summary::-webkit-details-marker {
    display: none;
}

.cb-announce-inline-form,
.cb-announce-comment-form {
    display: grid;
    gap: 12px;
}

.cb-announce-inline-form {
    margin-top: 12px;
}

.cb-announce-inline-form textarea,
.cb-announce-comment-form textarea {
    width: 100%;
    min-height: 92px;
    border-radius: 18px;
    border: 1px solid #dbe3f4;
    background: #fff;
    padding: 14px 16px;
    resize: vertical;
    font: inherit;
    color: #22305d;
}

.cb-announce-comment-form {
    border: 1px solid #e8edf8;
    border-radius: 18px;
    padding: 16px;
    background: #fbfcff;
}

@media (max-width: 1120px) {
    .cb-announce-layout {
        width: min(100%, 720px);
    }
}

@media (max-width: 720px) {
    .cb-announce-toolbar,
    .cb-announce-composer-row,
    .cb-announce-card-hero,
    .cb-announce-card-foot,
    .cb-announce-comment-head,
    .cb-announce-comment-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-announce-feed-card,
    .cb-announce-composer {
        padding: 20px;
        border-radius: 22px;
    }

    .cb-announce-composer summary,
    .cb-announce-composer-form {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 1280px) {
    .cb-app-grid.has-sidebar,
    .cb-dashboard-grid {
        grid-template-columns: 1fr;
        max-width: 980px;
    }
}

@media (max-width: 1120px) {
    .cb-entity-grid,
    .cb-staff-grid,
    .cb-kpi-grid,
    .cb-location-grid,
    .cb-settings-shell {
        grid-template-columns: 1fr;
    }

    .cb-two-grid,
    .cb-staff-grid-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cb-page-shell {
        padding: 20px 16px 36px;
    }

    .cb-dashboard-grid,
    .cb-app-grid.has-sidebar,
    .cb-settings-shell {
        grid-template-columns: 1fr;
    }

    .cb-list-row,
    .cb-record-item,
    .cb-document-row,
    .cb-payroll-row,
    .cb-compliance-row,
    .cb-card-head,
    .cb-page-actions,
    .cb-head-actions,
    .cb-inline-actions,
    .cb-location-card footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-swap-flow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cb-shell {
        grid-template-columns: 1fr;
    }

    .cb-sidebar {
        display: none;
    }

    .cb-topbar {
        grid-template-columns: 28px minmax(0, 1fr);
        height: auto;
        padding: 12px 16px;
    }

    .cb-topbar-right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cb-page-shell {
        padding: 18px 16px 32px;
    }

    .cb-page-intro,
    .cb-rota-toolbar {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-kpi-row {
        grid-template-columns: 1fr;
    }

    .cb-availability-table .cb-table-head,
    .cb-availability-table .cb-table-row {
        grid-template-columns: 160px repeat(7, minmax(96px, 1fr));
        min-width: 920px;
    }

    .cb-table-shell {
        overflow-x: auto;
    }
}

/* Final shell overrides for the simplified app system */
.cb-shell {
    grid-template-columns: 224px minmax(0, 1fr);
    background: #f6f7fb;
}

.cb-sidebar {
    padding: 18px 12px 14px;
    background: #ffffff;
    border-right: 1px solid #eceaf5;
}

.cb-sidebar-brand {
    gap: 10px;
    padding: 0 10px 16px;
    margin-bottom: 8px;
}

.cb-sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: none;
}

.cb-sidebar-brand-mark.is-image,
.cb-onboarding-brand-mark.is-image,
.cb-hub-v2-brand-mark.is-image,
.cb-hub-v2-login-logo.is-image {
    background: transparent;
    box-shadow: none;
    color: inherit;
    overflow: visible;
}

.cb-sidebar-brand-wordmark {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cb-brand-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.cb-brand-image-icon {
    max-width: 100%;
    max-height: 100%;
}

.cb-sidebar-brand-mark.is-image .cb-brand-image-icon {
    transform: scale(1.28);
    transform-origin: center;
}

.cb-onboarding-brand-mark.is-image .cb-brand-image-icon,
.cb-hub-v2-brand-mark.is-image .cb-brand-image-icon,
.cb-hub-v2-login-logo.is-image .cb-brand-image-icon {
    transform: scale(1.65);
    transform-origin: center;
}

.cb-onboarding-brand-wordmark-image,
.cb-hub-v2-brand-wordmark-image,
.cb-hub-v2-login-wordmark-image {
    display: block;
    width: auto;
    height: 34px;
    object-fit: contain;
    object-position: left center;
}

.cb-onboarding-brand-wordmark-image,
.cb-hub-v2-brand-wordmark-image,
.cb-hub-v2-login-wordmark-image {
    height: 42px;
}

.cb-sidebar-nav {
    gap: 22px;
}

.cb-nav-group {
    gap: 8px;
}

.cb-nav-group h2 {
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #a3abc1;
}

.cb-nav-link {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    color: #4f5874;
    font-size: 14px;
    font-weight: 500;
}

.cb-nav-link.is-active {
    background: #efe9ff;
    color: #6a4df5;
}

.cb-sidebar-footer {
    gap: 8px;
    padding-top: 12px;
}

.cb-topbar {
    grid-template-columns: 28px minmax(320px, 448px) 1fr;
    gap: 18px;
    min-height: 56px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #eceaf5;
    backdrop-filter: blur(12px);
}

.cb-topbar-close {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8e97b0;
}

.cb-topbar-search input {
    height: 36px;
    border-radius: 12px;
    background: #f8f8fc;
}

.cb-topbar-right {
    gap: 12px;
    justify-self: end;
}

.cb-topbar-chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    background: #f8f8fc;
}

.cb-topbar-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.cb-topbar-notification-menu {
    position: relative;
}

.cb-topbar-notification-menu summary {
    list-style: none;
}

.cb-topbar-notification-menu summary::-webkit-details-marker {
    display: none;
}

.cb-topbar-notification-menu[open] .cb-topbar-icon-button {
    background: #f8f8fc;
}

.cb-topbar-notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 35;
    width: min(360px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid #e7ebf5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(20, 27, 52, 0.14);
}

.cb-topbar-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eef1f8;
}

.cb-topbar-notification-head strong {
    color: #111a44;
    font-size: 15px;
}

.cb-topbar-notification-head span {
    color: #6e4df6;
    font-size: 12px;
    font-weight: 800;
}

.cb-topbar-notification-list {
    max-height: 360px;
    overflow-y: auto;
}

.cb-topbar-notification-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    color: #44506f;
    border-bottom: 1px solid #f0f2f8;
}

.cb-topbar-notification-item:hover {
    background: #fbfaff;
}

.cb-topbar-notification-item > span:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.cb-topbar-notification-item strong {
    color: #111a44;
    font-size: 14px;
}

.cb-topbar-notification-item small {
    max-height: 42px;
    overflow: hidden;
    color: #7f89a8;
    font-size: 12px;
    line-height: 1.45;
}

.cb-topbar-notification-item em {
    color: #a1abc3;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.cb-topbar-notification-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: #d7dceb;
}

.cb-topbar-notification-item.is-unread .cb-topbar-notification-dot {
    background: #6e4df6;
}

.cb-topbar-notification-item.is-unread strong {
    color: #071139;
}

.cb-topbar-notification-empty {
    padding: 18px 16px;
    color: #8f98b2;
    font-size: 13px;
}

.cb-topbar-notification-actions {
    padding: 10px;
    background: #fbfbfe;
}

.cb-topbar-notification-actions button {
    width: 100%;
    min-height: 38px;
    border: 1px solid #e7ebf5;
    border-radius: 12px;
    background: #fff;
    color: #6e4df6;
    font-weight: 800;
}

.cb-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 6px 0 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    list-style: none;
}

.cb-topbar-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.cb-topbar-user-copy strong {
    font-size: 14px;
}

.cb-topbar-user-copy small {
    font-size: 12px;
}

.cb-topbar-user-menu {
    position: relative;
}

.cb-topbar-user-menu summary::-webkit-details-marker {
    display: none;
}

.cb-topbar-user-menu[open] .cb-topbar-user {
    background: #f8f8fc;
}

.cb-topbar-user-menu[open] .cb-topbar-user-chevron {
    transform: rotate(180deg);
}

.cb-topbar-user-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #97a0b8;
    transition: transform 0.18s ease;
}

.cb-topbar-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    min-width: 190px;
    padding: 8px;
    border: 1px solid #e7ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(20, 27, 52, 0.12);
}

.cb-topbar-user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    color: #44506f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.cb-topbar-user-dropdown-link:hover {
    background: #f7f7fd;
    color: #6a4df5;
}

.cb-topbar-user-dropdown-link.is-danger:hover {
    color: #d14b76;
}

.cb-topbar-user-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
}

.cb-page-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 26px 22px 38px;
}

.cb-page-header {
    gap: 6px;
}

.cb-page-header.is-centered {
    width: min(980px, 100%);
    margin: 0 auto;
}

.cb-page-header h1 {
    font-size: clamp(36px, 4.4vw, 58px);
    letter-spacing: -0.06em;
    line-height: 0.98;
}

.cb-page-header p {
    max-width: 760px;
    font-size: 15px;
    line-height: 1.55;
    color: #77819d;
}

.cb-page-actions {
    gap: 12px;
}

.cb-module-shell {
    gap: 24px;
}

.cb-dashboard-shell {
    gap: 26px;
}

.cb-dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.cb-dashboard-stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 18px;
    border: 1px solid #e9e7f2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(24, 29, 58, 0.04);
}

.cb-dashboard-stat-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-dashboard-stat-icon.tone-purple {
    background: #efeaff;
    color: #6a4df5;
}

.cb-dashboard-stat-icon.tone-amber {
    background: #fff3dc;
    color: #e09a16;
}

.cb-dashboard-stat-icon.tone-blue {
    background: #ebf2ff;
    color: #4e82ff;
}

.cb-dashboard-stat-icon.tone-rose {
    background: #ffecef;
    color: #ff5d68;
}

.cb-dashboard-stat-icon.tone-green {
    background: #e9faf1;
    color: #16b86e;
}

.cb-dashboard-stat-copy {
    display: grid;
    gap: 8px;
}

.cb-dashboard-stat-copy strong {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.cb-dashboard-stat-copy span {
    color: #717b98;
    font-size: 14px;
    line-height: 1.45;
}

.cb-dashboard-stat-arrow {
    margin-left: auto;
    color: #c1c7da;
    font-size: 18px;
}

.cb-dashboard-layout-refined {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 24px;
    align-items: start;
}

.cb-dashboard-primary,
.cb-dashboard-secondary {
    display: grid;
    gap: 24px;
}

.cb-dashboard-schedule-card,
.cb-dashboard-side-card {
    overflow: hidden;
}

.cb-dashboard-shift-list {
    display: grid;
}

.cb-dashboard-shift-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-top: 1px solid #efedf6;
}

.cb-dashboard-person-badge {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #efeaff;
    color: #6a4df5;
    font-size: 13px;
    font-weight: 800;
}

.cb-dashboard-shift-copy {
    display: grid;
    gap: 4px;
}

.cb-dashboard-shift-copy strong {
    font-size: 15px;
    font-weight: 700;
}

.cb-dashboard-shift-copy span,
.cb-dashboard-shift-meta span {
    color: #7d86a1;
    font-size: 14px;
}

.cb-dashboard-kpi-strips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.cb-dashboard-mini-stat {
    padding: 18px 20px;
    display: grid;
    gap: 10px;
}

.cb-dashboard-mini-stat span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f98b4;
}

.cb-dashboard-mini-stat strong {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.cb-dashboard-mini-stat strong.is-amber {
    color: #f08f1d;
}

.cb-dashboard-mini-stat strong.is-rose {
    color: #ff5d68;
}

.cb-dashboard-mini-stat small {
    color: #7f89a7;
    font-size: 14px;
}

.cb-dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 24px 24px;
}

.cb-dashboard-quick-action {
    display: grid;
    gap: 8px;
    min-height: 104px;
    padding: 18px;
    border-radius: 18px;
    background: #f8f8fd;
    border: 1px solid #efedf6;
}

.cb-dashboard-quick-action strong {
    font-size: 16px;
    font-weight: 700;
}

.cb-dashboard-quick-action span {
    color: #6a4df5;
    font-size: 13px;
    font-weight: 600;
}

.cb-dashboard-action-list {
    display: grid;
}

.cb-dashboard-action-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 24px;
    border-top: 1px solid #efedf6;
}

.cb-dashboard-action-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 6px;
    background: #6a4df5;
}

.cb-dashboard-action-item.tone-blue .cb-dashboard-action-dot {
    background: #4e82ff;
}

.cb-dashboard-action-item.tone-amber .cb-dashboard-action-dot {
    background: #f08f1d;
}

.cb-dashboard-action-item.tone-rose .cb-dashboard-action-dot {
    background: #ff5d68;
}

.cb-dashboard-action-copy {
    display: grid;
    gap: 5px;
}

.cb-dashboard-action-copy strong {
    font-size: 15px;
    font-weight: 700;
}

.cb-dashboard-action-copy span {
    color: #77819d;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 1240px) {
    .cb-dashboard-stat-row,
    .cb-dashboard-kpi-strips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-dashboard-layout-refined {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cb-shell {
        grid-template-columns: 1fr;
    }

    .cb-sidebar {
        position: relative;
        height: auto;
    }

    .cb-page-shell {
        padding: 24px 18px 36px;
    }

    .cb-topbar {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 14px;
        padding: 0 18px;
    }

    .cb-topbar-right {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: flex-end;
    }

    .cb-dashboard-stat-row,
    .cb-dashboard-kpi-strips,
    .cb-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .cb-page-body-rota .cb-rota-v2-auto-grid,
    .cb-page-body-rota .cb-rota-v2-auto-toggles,
    .cb-availability-card-grid,
    .cb-availability-day-grid,
    .cb-availability-time-row,
    .cb-availability-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Final dashboard repair pass */
.cb-dashboard-hero {
    display: grid;
    gap: 8px;
    width: min(960px, 100%);
    margin: 0 auto 24px;
    text-align: left;
}

.cb-dashboard-hero h1 {
    margin: 0;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.07em;
    color: #17204d;
}

.cb-dashboard-hero p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #7b84a0;
}

.cb-dashboard-shell {
    gap: 20px;
}

.cb-dashboard-stat-row {
    gap: 14px;
}

.cb-dashboard-stat {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
}

.cb-dashboard-stat-top {
    display: grid;
    grid-template-columns: 40px 1fr 16px;
    align-items: center;
    gap: 12px;
}

.cb-dashboard-stat-icon {
    width: 40px;
    height: 40px;
    padding: 9px;
    font-size: 0;
}

.cb-dashboard-stat-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.9;
}

.cb-dashboard-stat strong {
    display: block;
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.07em;
    color: #17204d;
}

.cb-dashboard-stat-arrow {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c4cbe0;
    transform: rotate(180deg);
}

.cb-dashboard-stat-arrow svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

.cb-dashboard-stat-label {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: #7a84a1;
}

.cb-dashboard-layout-refined {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

.cb-dashboard-primary,
.cb-dashboard-secondary {
    gap: 20px;
}

.cb-dashboard-schedule-card .cb-card-head,
.cb-dashboard-side-card .cb-card-head {
    padding-bottom: 18px;
}

.cb-dashboard-empty-state {
    min-height: 168px;
}

.cb-dashboard-kpi-strips {
    gap: 14px;
}

.cb-dashboard-mini-stat {
    min-height: 152px;
    padding: 18px;
}

.cb-dashboard-mini-stat strong {
    font-size: 30px;
}

.cb-dashboard-mini-stat small {
    font-size: 13px;
    line-height: 1.45;
}

.cb-dashboard-quick-grid {
    gap: 10px;
    padding: 0 24px 24px;
}

.cb-dashboard-quick-action {
    min-height: 92px;
    padding: 16px;
    border-radius: 16px;
}

.cb-dashboard-quick-action strong {
    font-size: 15px;
    line-height: 1.3;
    color: #17204d;
}

.cb-dashboard-action-item {
    gap: 12px;
    padding: 14px 24px;
}

.cb-dashboard-action-copy strong {
    font-size: 14px;
    line-height: 1.35;
}

.cb-dashboard-action-copy span {
    font-size: 13px;
}

@media (max-width: 1240px) {
    .cb-dashboard-hero {
        width: 100%;
    }

    .cb-dashboard-layout-refined {
        grid-template-columns: 1fr;
    }
}

/* Rota Builder v2 */
body.cb-page-body-rota {
    background: #f5f7fd;
}

.cb-page-body-rota .cb-page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 8px 16px 8px !important;
}

.cb-page-body-rota .cb-page-stack {
    gap: 8px;
}

.cb-page-body-rota .cb-shell-main,
.cb-page-body-rota .cb-page-stack,
.cb-page-body-rota .cb-rota-v2,
.cb-page-body-rota .cb-rota-v2-shell,
.cb-page-body-rota .cb-rota-v2-boardwrap {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cb-page-body-rota .cb-page-header,
.cb-page-body-rota .cb-page-hero,
.cb-page-body-rota .cb-page-summary {
    display: none;
}

.cb-page-body-rota .cb-rota-v2 {
    display: grid;
    gap: 8px;
}

.cb-page-body-rota .cb-rota-v2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 1px 0 6px;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v2-weeknav,
.cb-page-body-rota .cb-rota-v2-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-page-body-rota .cb-rota-v2-weeknav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v2-location-chip {
    width: fit-content;
    margin-left: 4px;
}

.cb-page-body-rota .cb-rota-v2-actions {
    justify-content: flex-end;
    align-self: center;
    max-width: none;
    gap: 8px;
    flex-wrap: nowrap;
    justify-self: end;
    flex: 1 1 auto;
    min-width: 0;
}

.cb-page-body-rota .cb-rota-v2-actions > * {
    order: 0;
}

.cb-page-body-rota .cb-rota-v2-arrow,
.cb-page-body-rota .cb-rota-v2-chip,
.cb-page-body-rota .cb-rota-v2-btn,
.cb-page-body-rota .cb-rota-v2-badge {
    height: 31px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid #e7ebf5;
    background: #ffffff;
    color: #1a234f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v2-arrow {
    width: 31px;
    padding: 0;
    color: #6b7696;
}

.cb-page-body-rota .cb-rota-v2-arrow-next {
    transform: rotate(180deg);
}

.cb-page-body-rota .cb-rota-v2-weeknav strong {
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #17204d;
    margin: 0;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v2-chip {
    box-shadow: 0 6px 14px rgba(97, 107, 148, 0.03);
}

.cb-page-body-rota .cb-rota-v2-chip-danger {
    border-color: #ffd6de;
    background: #fff5f7;
    color: #e11d48;
}

.cb-page-body-rota .cb-rota-v2-chip-danger:hover {
    border-color: #fda4b7;
    background: #ffe9ee;
}

.cb-page-body-rota .cb-rota-v2-confirm-modal {
    width: min(440px, calc(100vw - 32px));
    padding: 26px;
    border-radius: 24px;
    border: 1px solid #ffe0e7;
    box-shadow: 0 28px 70px rgba(107, 30, 54, 0.2);
}

.cb-page-body-rota .cb-rota-v2-confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff0f3;
    color: #e11d48;
    margin-bottom: 18px;
}

.cb-page-body-rota .cb-rota-v2-confirm-icon svg {
    width: 24px;
    height: 24px;
}

.cb-page-body-rota .cb-rota-v2-confirm-copy {
    display: grid;
    gap: 8px;
}

.cb-page-body-rota .cb-rota-v2-confirm-copy span {
    width: fit-content;
    border-radius: 999px;
    padding: 5px 10px;
    background: #fff0f3;
    color: #be123c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-page-body-rota .cb-rota-v2-confirm-copy h3 {
    margin: 0;
    color: #111a44;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.cb-page-body-rota .cb-rota-v2-confirm-copy p {
    margin: 0;
    color: #76809f;
    font-size: 14px;
    line-height: 1.6;
}

.cb-page-body-rota .cb-rota-v2-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.cb-page-body-rota .cb-rota-v2-danger-submit {
    height: 40px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    background: #e11d48;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(225, 29, 72, 0.22);
}

.cb-page-body-rota .cb-rota-v2-chip svg,
.cb-page-body-rota .cb-rota-v2-arrow svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.9;
}

.cb-page-body-rota .cb-rota-v2-badge {
    background: #fff3cf;
    border-color: #ffe1a1;
    color: #d48600;
}

.cb-page-body-rota .cb-rota-v2-badge-cost {
    background: #efeaff;
    border-color: #e1d7ff;
    color: #6d54f6;
}

.cb-page-body-rota .cb-rota-v2-badge-draft {
    background: #fff4d7;
    border-color: #ffe1a8;
    color: #d38900;
}

.cb-page-body-rota .cb-rota-v2-btn {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 28px rgba(95, 78, 241, 0.18);
}

.cb-page-body-rota .cb-rota-v2-btn-purple {
    background: linear-gradient(135deg, #6a55f6 0%, #835df0 100%);
}

.cb-page-body-rota .cb-rota-v2-btn-amber {
    background: linear-gradient(135deg, #f4ab1a 0%, #e68e00 100%);
    box-shadow: none;
}

.cb-page-body-rota .cb-rota-v2-btn:disabled,
.cb-page-body-rota .cb-rota-v2-btn.is-disabled {
    background: #eef1f7;
    border-color: #e1e6f0;
    color: #9aa4bd;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.cb-page-body-rota .cb-rota-v2-shell {
    position: relative;
    display: block;
}

.cb-page-body-rota .cb-rota-v2-boardwrap {
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    padding-left: 0;
}

.cb-page-body-rota .cb-rota-v2-board {
    background: #fff;
    border: 1px solid #e8edf8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(51, 70, 122, 0.07);
    min-width: 1240px;
    width: 100%;
}

.cb-page-body-rota .cb-rota-v2-grid {
    display: grid;
    grid-template-columns: 160px repeat(7, minmax(110px, 1fr)) 66px;
}

.cb-page-body-rota .cb-rota-v2-grid-head {
    min-height: 66px;
    background: #fff;
    border-bottom: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-grid-head > div,
.cb-page-body-rota .cb-rota-v2-grid-foot > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px;
}

.cb-page-body-rota .cb-rota-v2-col-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9aa3bc;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-col-staff {
    justify-content: flex-start !important;
    padding-left: 12px !important;
}

.cb-page-body-rota .cb-rota-v2-col-hours {
    justify-content: flex-end !important;
    padding-right: 10px !important;
}

.cb-page-body-rota .cb-rota-v2-dayhead {
    flex-direction: column;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v2-dayhead span {
    font-size: 9px;
    color: #8089a7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-page-body-rota .cb-rota-v2-dayhead strong {
    font-size: 17px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #131c46;
}

.cb-page-body-rota .cb-rota-v2-grid-row {
    min-height: 63px;
    border-bottom: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-grid-row:last-of-type {
    border-bottom: 0;
}

.cb-page-body-rota .cb-rota-v2-grid-row > div {
    border-right: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-grid-row > div:last-child,
.cb-page-body-rota .cb-rota-v2-grid-head > div:last-child,
.cb-page-body-rota .cb-rota-v2-grid-foot > div:last-child {
    border-right: 0;
}

.cb-page-body-rota .cb-rota-v2-staffcell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 12px;
}

.cb-page-body-rota .cb-rota-v2-avatar {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-violet,
.cb-page-body-rota .cb-rota-v2-avatar.tone-indigo {
    background: #6e57f5;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-blue {
    background: #4180ff;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-teal {
    background: #16b3c6;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-amber {
    background: #ff7f19;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-pink {
    background: #eb3d8d;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-lime {
    background: #86ca0a;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-mint {
    background: #16b97f;
}

.cb-page-body-rota .cb-rota-v2-staffcopy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.cb-page-body-rota .cb-rota-v2-staffcopy strong {
    font-size: 11px;
    line-height: 1.1;
    color: #19224f;
}

.cb-page-body-rota .cb-rota-v2-staffcopy span {
    font-size: 10px;
    line-height: 1.2;
    color: #8b94b0;
}

.cb-page-body-rota .cb-rota-v2-cell {
    position: relative;
    min-height: 63px;
    padding: 5px;
    background: #fff;
}

.cb-page-body-rota .cb-rota-v2-cell.is-drop-target {
    background: #f5f1ff;
}

.cb-page-body-rota .cb-rota-v2-shift,
.cb-page-body-rota .cb-rota-v2-slot {
    width: 100%;
    height: 100%;
    min-height: 52px;
    border-radius: 13px;
    border: 1px solid #d7def7;
    background: #f5f7ff;
    padding: 6px 8px;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 0;
    text-align: left;
    position: relative;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.cb-page-body-rota .cb-rota-v2-shift:hover,
.cb-page-body-rota .cb-rota-v2-slot:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(58, 74, 126, 0.06);
}

.cb-page-body-rota .cb-rota-v2-shift.is-dragging {
    opacity: 0.5;
}

.cb-page-body-rota .cb-rota-v2-slot {
    border-style: dashed;
    background: transparent;
    border-color: #d9e0f7;
    color: #b4bccc;
    font-size: 28px;
    place-content: center;
    justify-items: center;
}

.cb-page-body-rota .cb-rota-v2-shift strong {
    font-size: 10px;
    line-height: 1.05;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-shift span,
.cb-page-body-rota .cb-rota-v2-shift small {
    font-size: 9px;
    line-height: 1.1;
    color: inherit;
}

.cb-page-body-rota .cb-rota-v2-shift small {
    opacity: 0.74;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-blue {
    color: #5b6cf6;
    background: #eef2ff;
    border-color: #b8c8ff;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-violet {
    color: #7a5bf4;
    background: #f0edff;
    border-color: #cabfff;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-amber,
.cb-page-body-rota .cb-rota-v2-shift.tone-brown {
    color: #f08a00;
    background: #fff7e9;
    border-color: #f6cc74;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-mint,
.cb-page-body-rota .cb-rota-v2-shift.tone-teal {
    color: #18a57f;
    background: #ecfff7;
    border-color: #9ce7cd;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-rose,
.cb-page-body-rota .cb-rota-v2-shift.tone-pink {
    color: #ff5d73;
    background: #fff1f4;
    border-color: #ffb5c1;
}

.cb-page-body-rota .cb-rota-v2-shift.is-draft {
    border-style: dashed;
}

.cb-page-body-rota.is-hiding-drafts .cb-rota-v2-shift.is-draft {
    display: none;
}

.cb-page-body-rota .cb-rota-v2-shift-tools {
    display: none !important;
}

.cb-page-body-rota .cb-rota-v2-shift-tools {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 6px rgba(67, 70, 98, 0.06);
    position: relative;
    overflow: hidden;
    text-indent: -999px;
    font-size: 0;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(1)::before {
    content: "✎";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(2)::before {
    content: "×";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(3)::before {
    content: "+";
}

.cb-page-body-rota .cb-rota-v2-hourscell {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 2px;
    padding: 12px 12px 12px 0;
}

.cb-page-body-rota .cb-rota-v2-hourscell strong {
    font-size: 13px;
    color: #1b234e;
}

.cb-page-body-rota .cb-rota-v2-hourscell span {
    font-size: 11px;
    color: #9aa2ba;
}

.cb-page-body-rota .cb-rota-v2-hourscell.is-over strong {
    color: #f09100;
}

.cb-page-body-rota .cb-rota-v2-grid-foot {
    min-height: 58px;
    border-top: 1px solid #edf1f8;
    background: #fff;
}

.cb-page-body-rota .cb-rota-v2-daytotal {
    display: grid !important;
    align-content: center;
    justify-items: center;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v2-daytotal strong {
    font-size: 14px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-daytotal span {
    font-size: 11px;
    color: #96a0b9;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(1)::before {
    content: "\270E";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(2)::before {
    content: "\00D7";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(3)::before {
    color: #7b60f2;
}

.cb-page-body-rota .cb-rota-v2-hourscell {
    gap: 1px;
    padding: 8px 8px 8px 0;
}

.cb-page-body-rota .cb-rota-v2-hourscell strong {
    font-size: 11px;
}

.cb-page-body-rota .cb-rota-v2-hourscell span {
    font-size: 9px;
}

.cb-page-body-rota .cb-rota-v2-grid-foot {
    min-height: 48px;
}

.cb-page-body-rota .cb-rota-v2-daytotal strong {
    font-size: 11px;
}

.cb-page-body-rota .cb-rota-v2-daytotal span {
    font-size: 9px;
}

.cb-page-body-rota .cb-rota-v2-actions form {
    display: inline-flex;
}

.cb-page-body-rota .cb-rota-v2-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, calc(100vw - 18px));
    height: 100vh;
    background: #fff;
    border: 0;
    border-left: 1px solid #e8edf8;
    border-radius: 0;
    box-shadow: -16px 0 30px rgba(39, 54, 96, 0.08);
    overflow: hidden;
    z-index: 80;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
}

.cb-page-body-rota .cb-rota-v2-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.cb-page-body-rota .cb-rota-v2-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 49, 0.18);
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 72;
}

.cb-page-body-rota.cb-rota-v2-drawer-open .cb-rota-v2-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 42px;
    align-items: center;
    border-bottom: 1px solid #edf1f8;
    padding: 0 18px;
    gap: 12px;
    min-height: 48px;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs > button {
    height: 48px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #8a93ad;
    font-size: 14px;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs > button.is-active {
    color: #6a55f6;
    border-bottom-color: #6a55f6;
}

.cb-page-body-rota .cb-rota-v2-drawer-close {
    width: 42px;
    justify-self: end;
    font-size: 0 !important;
    position: relative;
}

.cb-page-body-rota .cb-rota-v2-drawer-close::before {
    content: "×";
    font-size: 24px;
    line-height: 1;
    color: #9ea7bd;
}

.cb-page-body-rota .cb-rota-v2-drawer-body {
    display: none;
    height: calc(100% - 49px);
    overflow-y: auto;
    padding: 18px;
}

.cb-page-body-rota .cb-rota-v2-drawer-close::before {
    content: "\00D7";
}

.cb-page-body-rota .cb-rota-v2-drawer-close {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ea7bd;
}

.cb-page-body-rota .cb-rota-v2-drawer-close::before {
    content: none;
}

.cb-page-body-rota .cb-rota-v2-drawer-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.cb-page-body-rota .cb-rota-v2-drawer-body.is-active {
    display: block;
}

.cb-page-body-rota .cb-rota-v2-drawer-head {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.cb-page-body-rota .cb-rota-v2-drawer-head h3 {
    margin: 0;
    font-size: 18px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-drawer-head p {
    margin: 0;
    font-size: 13px;
    color: #8d96b2;
}

.cb-page-body-rota .cb-rota-v2-drawer-form,
.cb-page-body-rota .cb-rota-v2-timeclock-list {
    display: grid;
    gap: 14px;
}

.cb-page-body-rota .cb-rota-v2-field,
.cb-page-body-rota .cb-rota-v2-field-inline > div,
.cb-page-body-rota .cb-rota-v2-timegrid label {
    display: grid;
    gap: 7px;
}

.cb-page-body-rota .cb-rota-v2-field > span,
.cb-page-body-rota .cb-rota-v2-field-inline span,
.cb-page-body-rota .cb-rota-v2-timegrid span,
.cb-page-body-rota .cb-rota-v2-drawer-block h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-field input,
.cb-page-body-rota .cb-rota-v2-field select,
.cb-page-body-rota .cb-rota-v2-field textarea,
.cb-page-body-rota .cb-rota-v2-timegrid input {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid #e4eaf5;
    background: #fff;
    padding: 0 14px;
    color: #1c2551;
    font-size: 14px;
}

.cb-page-body-rota .cb-rota-v2-field textarea {
    min-height: 104px;
    padding-top: 12px;
    resize: vertical;
}

.cb-page-body-rota .cb-rota-v2-drawer-block {
    display: grid;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-timegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-hourspill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #ffd78c;
    background: #fff8e8;
    color: #ea9400;
    font-size: 14px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-rolegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-role {
    min-height: 34px;
    border-radius: 12px;
    border: 1px solid #e2e8f5;
    background: #fff;
    color: #1d2753;
    font-size: 13px;
    padding: 0 10px;
    justify-content: flex-start;
}

.cb-page-body-rota .cb-rota-v2-role.is-active {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.cb-page-body-rota .cb-rota-v2-role.tone-blue { color: #5b6cf6; }
.cb-page-body-rota .cb-rota-v2-role.tone-violet { color: #7a5bf4; }
.cb-page-body-rota .cb-rota-v2-role.tone-amber,
.cb-page-body-rota .cb-rota-v2-role.tone-brown { color: #f08a00; }
.cb-page-body-rota .cb-rota-v2-role.tone-mint,
.cb-page-body-rota .cb-rota-v2-role.tone-teal { color: #17a380; }
.cb-page-body-rota .cb-rota-v2-role.tone-rose,
.cb-page-body-rota .cb-rota-v2-role.tone-pink { color: #ff5d73; }

.cb-page-body-rota .cb-rota-v2-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-mini,
.cb-page-body-rota .cb-rota-v2-secondary {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #e6ebf5;
    background: #f5f2ff;
    color: #6f58f6;
    font-size: 13px;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v2-breakempty {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px dashed #e2e8f5;
    border-radius: 12px;
    background: #fbfcff;
    color: #a0a8bf;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v2-drawer-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 24%);
}

.cb-page-body-rota .cb-rota-v2-submit {
    min-height: 40px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #6a55f6 0%, #845ef0 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 18px 32px rgba(96, 76, 240, 0.24);
}

.cb-page-body-rota .cb-rota-v2-danger {
    min-height: 40px;
    border: 1px solid #ffd5db;
    border-radius: 13px;
    background: #fff1f4;
    color: #e24a65;
    font-size: 14px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-danger[hidden] {
    display: none;
}

.cb-page-body-rota .cb-rota-v2-timeclock-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-timeclock-copy,
.cb-page-body-rota .cb-rota-v2-timeclock-meta {
    display: grid;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v2-timeclock-copy strong,
.cb-page-body-rota .cb-rota-v2-timeclock-meta strong {
    font-size: 14px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-timeclock-copy span,
.cb-page-body-rota .cb-rota-v2-timeclock-meta span {
    font-size: 12px;
    color: #8e97b2;
}

.cb-page-body-rota .cb-rota-v2-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: lowercase;
}

.cb-page-body-rota .cb-rota-v2-status.completed {
    color: #17674c;
    background: #dff8ea;
}

.cb-page-body-rota .cb-rota-v2-status.open,
.cb-page-body-rota .cb-rota-v2-status.active {
    color: #17674c;
    background: #dff8ea;
}

.cb-page-body-rota .cb-rota-v2-status.flagged,
.cb-page-body-rota .cb-rota-v2-status.edited {
    color: #d18600;
    background: #fff1c8;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot > div {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 14px 8px 8px;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot strong {
    font-size: 32px;
    letter-spacing: -0.06em;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot span {
    font-size: 12px;
    color: #8d96b1;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot .is-highlight strong {
    color: #6a55f6;
}

.cb-page-body-rota .cb-rota-v2-autoschedule {
    width: min(560px, calc(100vw - 32px));
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #e7ebf5;
    box-shadow: 0 32px 80px rgba(28, 32, 54, 0.18);
    position: relative;
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #ebeff8;
    background: #fff;
    color: #a2aac0;
    font-size: 0;
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close::before {
    content: "×";
    font-size: 22px;
}

.cb-page-body-rota .cb-rota-v2-auto-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a55f6 0%, #845ef0 100%);
    color: #fff;
    font-size: 0;
    margin: 0 auto 16px;
}

.cb-page-body-rota .cb-rota-v2-auto-icon::before {
    content: "✣";
    font-size: 24px;
    line-height: 1;
}

.cb-page-body-rota .cb-rota-v2-autoschedule h3 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #16204c;
}

.cb-page-body-rota .cb-rota-v2-autoschedule > p {
    margin: 0 auto 18px;
    max-width: 420px;
    text-align: center;
    color: #7e88a7;
    font-size: 16px;
    line-height: 1.65;
}

.cb-page-body-rota .cb-rota-v2-auto-panel {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid #eceff8;
    border-radius: 18px;
    background: #fbfcff;
}

.cb-page-body-rota .cb-rota-v2-auto-panel strong {
    font-size: 16px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-auto-panel ul {
    margin: 0;
    padding: 0 0 0 18px;
    color: #78819e;
    display: grid;
    gap: 8px;
}

.cb-page-body-rota .cb-rota-v2-auto-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

.cb-page-body-rota .cb-rota-v2-auto-form {
    display: grid;
    gap: 16px;
}

.cb-page-body-rota #auto-schedule-modal.is-generating .cb-rota-v2-auto-form,
.cb-page-body-rota #auto-schedule-modal.is-generating .cb-rota-v2-autoschedule > h3,
.cb-page-body-rota #auto-schedule-modal.is-generating .cb-rota-v2-autoschedule > p,
.cb-page-body-rota #auto-schedule-modal.is-generating .cb-rota-v2-auto-icon,
.cb-page-body-rota #auto-schedule-modal.is-generating .cb-modal-close {
    opacity: 0.08;
    pointer-events: none;
    filter: blur(2px);
}

.cb-page-body-rota .cb-rota-v2-auto-loader {
    position: absolute;
    inset: 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 255, 0.98) 100%);
    border: 1px solid rgba(228, 232, 245, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 24px;
    z-index: 4;
}

.cb-page-body-rota .cb-rota-v2-auto-loader[hidden] {
    display: none;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-orb {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 30%, #ffffff 0 8%, transparent 9%),
        conic-gradient(from 180deg, #6a55f6, #8a60ff, #f4ab1a, #6a55f6);
    box-shadow: 0 18px 32px rgba(106, 85, 246, 0.24);
    animation: cb-rota-auto-spin 1.2s linear infinite;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-copy {
    display: grid;
    gap: 6px;
    text-align: center;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-copy strong {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-copy p {
    margin: 0;
    color: #7380a2;
    font-size: 14px;
    line-height: 1.5;
}

.cb-page-body-rota .cb-rota-v2-auto-progress {
    height: 12px;
    border-radius: 999px;
    background: #ecefff;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(61, 72, 116, 0.08);
}

.cb-page-body-rota .cb-rota-v2-auto-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6a55f6 0%, #8b60ff 55%, #f4ab1a 100%);
    box-shadow: 0 8px 18px rgba(106, 85, 246, 0.25);
    transition: width 140ms linear;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps > div {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid #e8ebf6;
    background: #ffffff;
    color: #8a93ad;
    font-size: 13px;
    font-weight: 700;
    transition: all 160ms ease;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps > div.is-active {
    border-color: #daccff;
    background: #f3efff;
    color: #6a55f6;
    transform: translateY(-1px);
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps > div.is-complete {
    border-color: #c9f1de;
    background: #ecfff5;
    color: #18a06d;
}

@keyframes cb-rota-auto-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cb-page-body-rota .cb-rota-v2-auto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-page-body-rota .cb-rota-v2-auto-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    color: #627090;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v2-auto-toggles label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-auto-toggles input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Compact auto-schedule workspace */
.cb-page-body-rota #auto-schedule-modal.is-open {
    display: grid;
    place-items: center;
    padding: 16px;
    overflow: hidden;
}

.cb-page-body-rota .cb-rota-v2-autoschedule {
    position: relative;
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e5e9f3;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(24, 31, 58, 0.2);
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close {
    top: 22px;
    right: 22px;
    z-index: 6;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e7ebf3;
    border-radius: 10px;
    background: #fff;
    color: #8b95ad;
    font-size: inherit;
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close::before {
    content: none;
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close svg {
    width: 17px;
    height: 17px;
}

.cb-page-body-rota .cb-rota-v2-auto-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 22px 72px 20px 26px;
    border-bottom: 1px solid #edf0f6;
    background: #fff;
}

.cb-page-body-rota .cb-rota-v2-auto-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 12px;
    background: #6a55f6;
    color: #fff;
    font-size: inherit;
}

.cb-page-body-rota .cb-rota-v2-auto-icon::before {
    content: none;
}

.cb-page-body-rota .cb-rota-v2-auto-icon svg {
    width: 22px;
    height: 22px;
}

.cb-page-body-rota .cb-rota-v2-auto-heading {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v2-auto-heading > span {
    color: #765cf6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cb-page-body-rota .cb-rota-v2-auto-heading h3 {
    margin: 0;
    color: #151e49;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: left;
}

.cb-page-body-rota .cb-rota-v2-auto-heading p {
    margin: 0;
    color: #8791aa;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.cb-page-body-rota .cb-rota-v2-auto-form {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cb-page-body-rota .cb-rota-v2-auto-scroll {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 18px;
    padding: 20px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cb-page-body-rota .cb-rota-v2-auto-section {
    display: grid;
    gap: 12px;
}

.cb-page-body-rota .cb-rota-v2-auto-section + .cb-rota-v2-auto-section {
    padding-top: 18px;
    border-top: 1px solid #edf0f6;
}

.cb-page-body-rota .cb-rota-v2-auto-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-auto-section-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0edff;
    color: #6a55f6;
}

.cb-page-body-rota .cb-rota-v2-auto-section-icon svg {
    width: 15px;
    height: 15px;
}

.cb-page-body-rota .cb-rota-v2-auto-section-head h4,
.cb-page-body-rota .cb-rota-v2-auto-section-head p {
    margin: 0;
}

.cb-page-body-rota .cb-rota-v2-auto-section-head h4 {
    color: #17204d;
    font-size: 14px;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v2-auto-section-head p {
    margin-top: 1px;
    color: #929bb1;
    font-size: 11px;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v2-auto-fields {
    display: grid;
    gap: 12px;
}

.cb-page-body-rota .cb-rota-v2-auto-fields-coverage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cb-page-body-rota .cb-rota-v2-auto-fields-shifts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cb-page-body-rota .cb-rota-v2-auto-field-location {
    grid-column: span 2;
}

.cb-page-body-rota .cb-rota-v2-auto-fields .cb-rota-v2-field {
    min-width: 0;
    gap: 6px;
}

.cb-page-body-rota .cb-rota-v2-auto-fields .cb-rota-v2-field > span {
    min-height: 16px;
    overflow: hidden;
    color: #4d5878;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v2-auto-fields .cb-rota-v2-field input,
.cb-page-body-rota .cb-rota-v2-auto-fields .cb-rota-v2-field select {
    min-height: 40px;
    height: 40px;
    padding: 0 11px;
    border-color: #dfe5f0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v2-auto-fields .cb-rota-v2-field input:focus,
.cb-page-body-rota .cb-rota-v2-auto-fields .cb-rota-v2-field select:focus {
    border-color: #a99afa;
    outline: 3px solid rgba(106, 85, 246, 0.1);
}

.cb-page-body-rota .cb-rota-v2-auto-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 18px;
}

.cb-page-body-rota .cb-rota-v2-auto-rule {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf0f6;
    color: #596581;
    cursor: pointer;
}

.cb-page-body-rota .cb-rota-v2-auto-rule > span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v2-auto-rule input[type="checkbox"] {
    position: relative;
    width: 34px;
    height: 20px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #dce1eb;
    cursor: pointer;
    transition: background 160ms ease;
}

.cb-page-body-rota .cb-rota-v2-auto-rule input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(35, 43, 71, 0.24);
    transition: transform 160ms ease;
}

.cb-page-body-rota .cb-rota-v2-auto-rule input[type="checkbox"]:checked {
    background: #6a55f6;
}

.cb-page-body-rota .cb-rota-v2-auto-rule input[type="checkbox"]:checked::before {
    transform: translateX(14px);
}

.cb-page-body-rota .cb-rota-v2-auto-rule input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(106, 85, 246, 0.18);
    outline-offset: 2px;
}

.cb-page-body-rota .cb-rota-v2-auto-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    margin: 0;
    padding: 13px 26px;
    border-top: 1px solid #e8ecf4;
    background: #fff;
    box-shadow: 0 -10px 24px rgba(26, 33, 60, 0.04);
}

.cb-page-body-rota .cb-rota-v2-auto-actions .cb-rota-v2-secondary,
.cb-page-body-rota .cb-rota-v2-auto-actions .cb-rota-v2-submit {
    min-height: 42px;
    padding: 0 17px;
    border-radius: 10px;
}

.cb-page-body-rota .cb-rota-v2-auto-actions .cb-rota-v2-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cb-page-body-rota .cb-rota-v2-auto-actions .cb-rota-v2-submit svg {
    width: 16px;
    height: 16px;
}

.cb-page-body-rota .cb-rota-v2-auto-draft-note {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7f89a2;
    font-size: 11px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-auto-draft-note svg {
    width: 15px;
    height: 15px;
    color: #6a55f6;
}

.cb-page-body-rota #auto-schedule-modal.is-generating .cb-rota-v2-auto-header,
.cb-page-body-rota #auto-schedule-modal.is-generating .cb-rota-v2-auto-form,
.cb-page-body-rota #auto-schedule-modal.is-generating .cb-modal-close {
    opacity: 0.08;
    pointer-events: none;
    filter: blur(2px);
}

.cb-page-body-rota .cb-rota-v2-auto-loader {
    inset: 0;
    z-index: 8;
    align-content: center;
    gap: 20px;
    padding: 44px 64px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: none;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 12px;
    background: #6a55f6;
    color: #fff;
    animation: cb-rota-auto-pulse 1.25s ease-in-out infinite;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-icon svg {
    width: 22px;
    height: 22px;
}

.cb-page-body-rota .cb-rota-v2-auto-progress {
    height: 8px;
    border-radius: 999px;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps > div {
    min-height: 34px;
    justify-content: flex-start;
    padding: 9px 0 0;
    border: 0;
    border-top: 3px solid #e5e9f2;
    border-radius: 0;
    background: transparent;
    color: #8a93ad;
    font-size: 11px;
    font-weight: 800;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps > div.is-active {
    border-color: #6a55f6;
    background: transparent;
    color: #6a55f6;
    transform: none;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps > div.is-complete {
    border-color: #18a06d;
    background: transparent;
    color: #18a06d;
}

@keyframes cb-rota-auto-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.94); opacity: 0.78; }
}

@media (max-width: 720px) {
    .cb-page-body-rota .cb-rota-v2-auto-fields-coverage,
    .cb-page-body-rota .cb-rota-v2-auto-fields-shifts,
    .cb-page-body-rota .cb-rota-v2-auto-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-page-body-rota .cb-rota-v2-auto-actions {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .cb-page-body-rota .cb-rota-v2-auto-loader {
        padding: 36px 28px;
    }
}

@media (max-width: 520px) {
    .cb-page-body-rota #auto-schedule-modal.is-open {
        padding: 10px;
    }

    .cb-page-body-rota .cb-rota-v2-autoschedule {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 16px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-header {
        padding: 17px 58px 16px 18px;
    }

    .cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close {
        top: 17px;
        right: 16px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-scroll {
        padding: 16px 18px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-fields-shifts,
    .cb-page-body-rota .cb-rota-v2-auto-rules {
        grid-template-columns: 1fr;
    }

    .cb-page-body-rota .cb-rota-v2-auto-actions {
        grid-template-columns: 1fr 1.4fr;
        padding: 12px 18px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-draft-note {
        grid-column: 1 / -1;
    }

    .cb-page-body-rota .cb-rota-v2-auto-loader-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 700px) {
    .cb-page-body-rota .cb-rota-v2-auto-header {
        padding-top: 16px;
        padding-bottom: 15px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-scroll {
        gap: 14px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-section + .cb-rota-v2-auto-section {
        padding-top: 14px;
    }

    .cb-page-body-rota .cb-rota-v2-auto-actions {
        min-height: 62px;
        padding-top: 9px;
        padding-bottom: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-page-body-rota .cb-rota-v2-auto-loader-icon {
        animation: none;
    }
}

.cb-availability-editor {
    gap: 18px;
}

.cb-availability-intro {
    padding: 20px 22px;
    display: grid;
    gap: 16px;
}

.cb-availability-intro strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.cb-availability-intro p {
    margin: 6px 0 0;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-availability-intro ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: #627090;
    font-size: 14px;
}

.cb-availability-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cb-availability-card {
    padding: 18px;
    display: grid;
    gap: 16px;
}

.cb-availability-card-summary {
    padding: 0;
    overflow: hidden;
}

.cb-availability-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 18px;
    display: grid;
    gap: 16px;
    text-align: left;
    cursor: pointer;
}

.cb-availability-trigger:hover {
    background: #fbfcff;
}

.cb-availability-trigger:focus-visible {
    outline: 2px solid #6a4df7;
    outline-offset: -2px;
}

.cb-availability-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.cb-availability-summary-day {
    display: grid;
    gap: 6px;
}

.cb-availability-summary-day small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #98a1bd;
}

.cb-availability-modal-person {
    padding-bottom: 6px;
}

.cb-availability-form {
    gap: 16px;
}

.cb-availability-day-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-availability-day-card {
    padding: 14px;
    border: 1px solid var(--cb-line);
    border-radius: 16px;
    background: #fbfbfe;
    display: grid;
    gap: 10px;
}

.cb-availability-day-card strong {
    font-size: 14px;
}

.cb-availability-time-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1480px) {
    .cb-page-body-rota .cb-rota-v2-grid {
        grid-template-columns: 154px repeat(7, minmax(86px, 1fr)) 66px;
    }
}

@media (max-width: 1280px) {
    .cb-page-body-rota .cb-rota-v2-drawer {
        top: 0;
        right: 0;
        width: min(310px, calc(100vw - 12px));
        height: 100vh;
    }
}

@media (max-width: 900px) {
    .cb-page-body-rota .cb-page-shell {
        padding: 14px 12px 28px;
    }

    .cb-page-body-rota .cb-rota-v2-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-page-body-rota .cb-rota-v2-grid {
        min-width: 980px;
    }

    .cb-page-body-rota .cb-rota-v2-drawer {
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        border-left: 0;
        border-top: 0;
        border-radius: 0;
        transform: translateY(calc(100% + 24px));
    }

    .cb-page-body-rota .cb-rota-v2-drawer.is-open {
        transform: translateY(0);
    }
}

.cb-dashboard-ref-body .cb-page-shell {
    max-width: 1320px;
}

.cb-dashboard-ref {
    display: grid;
    gap: 18px;
}

.cb-dash-ref-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.cb-dash-ref-title span {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #8d96b2;
}

.cb-dash-ref-title h1 {
    margin: 0;
    max-width: 780px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.02;
    letter-spacing: -0.06em;
    color: #16204c;
}

.cb-dash-ref-live {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-dash-ref-live-clock {
    min-width: 108px;
    padding: 9px 14px;
    border: 1px solid #e8edf7;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 14px 32px rgba(38, 45, 72, 0.06);
}

.cb-dash-ref-live-clock strong {
    display: block;
    font-size: 16px;
    letter-spacing: -0.05em;
    color: #16204c;
}

.cb-dash-ref-live-clock span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #a0a8bf;
}

.cb-dash-ref-clock-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6c56f7 0%, #8a5cf3 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    box-shadow: 0 18px 38px rgba(106, 85, 246, 0.24);
}

.cb-dash-ref-clock-btn:hover {
    color: #fff;
}

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

.cb-dash-ref-summary-card,
.cb-dash-ref-card {
    background: #fff;
    border: 1px solid #e8edf7;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(36, 42, 66, 0.06);
}

.cb-dash-ref-summary-card {
    padding: 14px 16px 16px;
}

.cb-dash-ref-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cb-dash-ref-summary-icon,
.cb-dash-ref-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cb-dash-ref-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: #6b55f6;
    background: #f1edff;
}

.cb-dash-ref-summary-icon svg,
.cb-dash-ref-icon-inline svg {
    width: 19px;
    height: 19px;
}

.cb-dash-ref-trend {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cb-dash-ref-trend.tone-positive {
    background: #e4faef;
    color: #13a05d;
}

.cb-dash-ref-trend.tone-negative {
    background: #ffe8e8;
    color: #ef5350;
}

.cb-dash-ref-trend.tone-neutral {
    background: #f2f5fb;
    color: #8d96b2;
}

.cb-dash-ref-summary-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
    letter-spacing: -0.05em;
    color: #16204c;
}

.cb-dash-ref-summary-card > span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #8d96b2;
}

.cb-dash-ref-summary-card small {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.cb-dash-ref-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
}

.cb-dash-ref-main,
.cb-dash-ref-side {
    display: grid;
    gap: 16px;
}

.cb-dash-ref-card {
    overflow: hidden;
}

.cb-dash-ref-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f8;
}

.cb-dash-ref-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #16204c;
}

.cb-dash-ref-card-title strong {
    font-size: 15px;
    letter-spacing: -0.03em;
}

.cb-dash-ref-card-title em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #efeaff;
    color: #7a5ff5;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.cb-dash-ref-icon-inline {
    width: 18px;
    height: 18px;
    color: #705bf7;
}

.cb-dash-ref-icon-inline.is-amber {
    color: #f0a11b;
}

.cb-dash-ref-scale {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 260px;
    color: #a0a8bf;
    font-size: 12px;
}

.cb-dash-ref-scale::before {
    content: "";
    flex: 1;
    height: 1px;
    background: #e7ebf5;
}

.cb-dash-ref-schedule-list,
.cb-dash-ref-clock-list,
.cb-dash-ref-attention-list {
    display: grid;
}

.cb-dash-ref-schedule-row,
.cb-dash-ref-clock-row,
.cb-dash-ref-attention-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f3f9;
}

.cb-dash-ref-schedule-row:last-child,
.cb-dash-ref-clock-row:last-child,
.cb-dash-ref-attention-row:last-child {
    border-bottom: 0;
}

.cb-dash-ref-schedule-row {
    grid-template-columns: 200px max-content minmax(0, 1fr) auto auto;
}

.cb-dash-ref-person {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
}

.cb-dash-ref-person strong {
    display: block;
    font-size: 15px;
    line-height: 1.08;
    color: #16204c;
}

.cb-dash-ref-person span,
.cb-dash-ref-person small {
    display: block;
    font-size: 13px;
    color: #98a1bb;
}

.cb-dash-ref-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    flex-shrink: 0;
}

.cb-dash-ref-person > .cb-dash-ref-avatar,
.cb-dash-ref-attention-row .cb-dash-ref-avatar,
.cb-dash-ref-clock-row .cb-dash-ref-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.cb-dash-ref-avatar.tone-purple,
.cb-dash-ref-role.tone-purple,
.cb-dash-ref-location-dot.tone-purple {
    background: #6757f5;
}

.cb-dash-ref-avatar.tone-green,
.cb-dash-ref-role.tone-green,
.cb-dash-ref-location-dot.tone-green {
    background: #17b577;
}

.cb-dash-ref-avatar.tone-amber,
.cb-dash-ref-role.tone-amber,
.cb-dash-ref-location-dot.tone-amber {
    background: #ff8a1f;
}

.cb-dash-ref-avatar.tone-blue,
.cb-dash-ref-role.tone-blue,
.cb-dash-ref-location-dot.tone-blue {
    background: #4e78e1;
}

.cb-dash-ref-avatar.tone-rose,
.cb-dash-ref-role.tone-rose,
.cb-dash-ref-location-dot.tone-rose {
    background: #ef476f;
}

.cb-dash-ref-avatar.tone-emerald,
.cb-dash-ref-role.tone-emerald,
.cb-dash-ref-location-dot.tone-emerald {
    background: #3bb368;
}

.cb-dash-ref-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 20px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2fb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.cb-dash-ref-track {
    position: relative;
    height: 26px;
    border-radius: 999px;
    background: #edf1f8;
    overflow: hidden;
}

.cb-dash-ref-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
}

.cb-dash-ref-bar.tone-purple { background: #6858f5; }
.cb-dash-ref-bar.tone-green { background: #34a97d; }
.cb-dash-ref-bar.tone-amber { background: #e58b26; }
.cb-dash-ref-bar.tone-blue { background: #4d76df; }
.cb-dash-ref-bar.tone-rose { background: #e53a66; }
.cb-dash-ref-bar.tone-emerald { background: #3cb45d; }

.cb-dash-ref-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f3f5fb;
    color: #6a7593;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cb-dash-ref-chip.status-completed,
.cb-dash-ref-chip.status-published {
    background: #eef2f7;
    color: #6f7b99;
}

.cb-dash-ref-chip.status-active {
    background: #dff8ea;
    color: #1a9d62;
}

.cb-dash-ref-chip.status-flagged,
.cb-dash-ref-chip.status-draft,
.cb-dash-ref-chip.status-pending {
    background: #fff1c8;
    color: #c37a00;
}

.cb-dash-ref-clock-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cb-dash-ref-clock-row.is-flagged {
    background: #fff9e5;
}

.cb-dash-ref-clock-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cb-dash-ref-clock-meta strong {
    font-size: 16px;
    color: #16204c;
}

.cb-dash-ref-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.cb-dash-ref-action-pill.is-rose {
    background: #ffe8e8;
    color: #ef5350;
}

.cb-dash-ref-chart-card {
    padding-bottom: 18px;
}

.cb-dash-ref-range {
    font-size: 13px;
    color: #9aa2bc;
}

.cb-dash-ref-chart {
    padding: 10px 20px 0;
}

.cb-dash-ref-chart svg {
    display: block;
    width: 100%;
    height: 170px;
}

.cb-dash-ref-chart-line {
    fill: none;
    stroke: #6757f5;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
}

.cb-dash-ref-chart-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 8px;
    color: #9aa2bc;
    font-size: 12px;
}

.cb-dash-ref-quick-card {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #684ff7 0%, #8b57f1 100%);
    color: #fff;
    box-shadow: 0 20px 42px rgba(106, 85, 246, 0.26);
}

.cb-dash-ref-quick-card h2 {
    margin: 0 0 12px;
    font-size: 15px;
    letter-spacing: -0.03em;
}

.cb-dash-ref-quick-list {
    display: grid;
    gap: 10px;
}

.cb-dash-ref-quick-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 13px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.cb-dash-ref-quick-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.cb-dash-ref-chevron svg {
    width: 12px;
    height: 12px;
    transform: rotate(-90deg);
}

.cb-dash-ref-attention .cb-dash-ref-card-head em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff1c8;
    color: #c37a00;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.cb-dash-ref-attention-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cb-dash-ref-attention-row.is-flagged {
    background: #fff9e5;
}

.cb-dash-ref-decision {
    display: inline-flex;
    gap: 10px;
}

.cb-dash-ref-decision-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
}

.cb-dash-ref-decision-btn.is-rose {
    background: #ffe5e7;
    color: #ef5350;
}

.cb-dash-ref-decision-btn.is-green {
    background: #dff8ea;
    color: #19a464;
}

.cb-dash-ref-mini-person,
.cb-dash-ref-location-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.cb-dash-ref-location-row {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cb-dash-ref-location-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.cb-dash-ref-announcement-card {
    padding: 18px 20px 20px;
}

.cb-dash-ref-announcement-meta {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 12px;
}

.cb-dash-ref-announcement-title {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    color: #16204c;
}

.cb-dash-ref-announcement-card p {
    margin: 0 0 14px;
    color: #607090;
    line-height: 1.7;
}

.cb-dash-ref-announcement-card small {
    color: #9aa2bc;
    font-size: 13px;
}

.cb-dash-ref-empty {
    padding: 26px 20px;
    color: #98a1bb;
    font-size: 14px;
}

@media (max-width: 1280px) {
    .cb-dash-ref-grid {
        grid-template-columns: 1fr;
    }

    .cb-dash-ref-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .cb-dash-ref-head {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-dash-ref-live {
        justify-content: space-between;
    }

    .cb-dash-ref-summary {
        grid-template-columns: 1fr;
    }

    .cb-dash-ref-schedule-row {
        grid-template-columns: 1fr;
    }

    .cb-dash-ref-scale {
        display: none;
    }
}

.cb-topbar-switcher {
    margin: 0;
}

.cb-topbar-select-chip {
    padding: 0 0 0 14px;
    gap: 10px;
}

.cb-topbar-select-chip select {
    border: 0;
    background: transparent;
    color: var(--cb-text);
    min-width: 210px;
    padding: 13px 14px 13px 0;
    appearance: none;
    outline: none;
}

.cb-role-builder,
.cb-role-editor,
.cb-hub-form-card form {
    display: grid;
    gap: 18px;
}

.cb-role-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-role-permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.cb-role-permission {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cb-line);
    border-radius: 16px;
    background: var(--cb-surface-soft);
}

.cb-role-permission input {
    margin-top: 3px;
}

.cb-role-permission span {
    display: grid;
    gap: 4px;
}

.cb-role-permission small {
    color: var(--cb-text-soft);
}

.cb-hub-shell-body {
    background:
        radial-gradient(circle at top left, rgba(106, 77, 245, 0.18), transparent 26%),
        radial-gradient(circle at bottom right, rgba(53, 101, 255, 0.1), transparent 26%),
        linear-gradient(180deg, #f5f7ff 0%, #f7f8fc 100%);
}

.cb-hub-shell {
    grid-template-columns: 220px minmax(0, 1fr);
}

.cb-hub-sidebar {
    background: linear-gradient(180deg, #151b37 0%, #1f2750 100%);
    color: #eef2ff;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-hub-sidebar .cb-sidebar-brand-copy {
    display: grid;
    gap: 2px;
}

.cb-hub-sidebar .cb-sidebar-brand-copy small {
    color: rgba(238, 242, 255, 0.72);
    font-size: 12px;
}

.cb-hub-sidebar .cb-nav-link,
.cb-hub-sidebar .cb-sidebar-footer .cb-nav-link {
    color: rgba(238, 242, 255, 0.8);
}

.cb-hub-sidebar .cb-nav-link.is-active,
.cb-hub-sidebar .cb-nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cb-hub-topbar {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cb-hub-titleblock {
    display: grid;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
}

.cb-hub-titleblock strong {
    font-size: 18px;
    line-height: 1.15;
}

.cb-hub-titleblock small,
.cb-hub-kicker {
    color: var(--cb-text-soft);
}

.cb-hub-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 10px;
    font-weight: 700;
}

.cb-hub-topbar .cb-topbar-right {
    margin-left: auto;
    flex: 0 0 auto;
    gap: 12px;
}

.cb-hub-topbar .cb-topbar-chip {
    min-height: 44px;
    padding-inline: 16px;
}

.cb-hub-topbar .cb-topbar-user {
    min-width: 0;
}

.cb-hub-topbar .cb-topbar-user-copy {
    min-width: 0;
}

.cb-hub-topbar .cb-topbar-user-copy strong,
.cb-hub-topbar .cb-topbar-user-copy small {
    white-space: nowrap;
}

.cb-hub-page-shell {
    gap: 28px;
    padding: 28px;
}

.cb-hub-stack {
    gap: 22px;
}

.cb-hub-page-head,
.cb-hub-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.cb-hub-page-intro {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.cb-hub-page-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 800;
    color: #8a93b7;
}

.cb-hub-page-intro h1 {
    margin: 0;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #17214a;
}

.cb-hub-page-intro p {
    margin: 0;
    max-width: 680px;
    color: #7f89aa;
    font-size: 17px;
    line-height: 1.7;
}

.cb-hub-hero-note {
    min-width: 280px;
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid rgba(108, 82, 233, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 40px rgba(42, 53, 102, 0.08);
}

.cb-hub-hero-note strong {
    color: #17214a;
}

.cb-hub-hero-note small {
    color: #7f89aa;
    line-height: 1.55;
}

.cb-hub-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.cb-hub-dot.is-green {
    background: #18c57b;
}

.cb-hub-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-hub-stat-card {
    padding: 24px;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(108, 82, 233, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 249, 255, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(42, 53, 102, 0.08);
}

.cb-hub-stat-card span {
    color: #8a93b7;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.cb-hub-stat-card strong {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.cb-hub-stat-card small {
    color: #7f89aa;
    line-height: 1.5;
}

.cb-hub-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cb-hub-grid-top {
    align-items: start;
}

.cb-hub-table-card,
.cb-hub-form-card,
.cb-hub-record-card {
    padding: 24px;
    border: 1px solid rgba(108, 82, 233, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 48px rgba(36, 45, 87, 0.08);
}

.cb-hub-record-card {
    display: grid;
    gap: 18px;
}

.cb-hub-stacked-cards {
    display: grid;
    gap: 18px;
}

.cb-hub-record-head,
.cb-hub-section-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.cb-hub-record-head h3,
.cb-hub-section-head h3 {
    margin: 0 0 6px;
    font-size: 30px;
    letter-spacing: -0.04em;
    color: #17214a;
}

.cb-hub-record-head p,
.cb-hub-section-head p {
    margin: 0;
    color: #7f89aa;
    line-height: 1.6;
}

.cb-hub-table {
    display: grid;
    gap: 10px;
}

.cb-hub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(108, 82, 233, 0.1);
}

.cb-hub-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.cb-hub-row-stack {
    flex-direction: column;
    align-items: stretch;
}

.cb-hub-row strong {
    display: block;
    font-size: 17px;
    color: #17214a;
}

.cb-hub-row span {
    color: #7f89aa;
    line-height: 1.55;
}

.cb-hub-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-hub-empty {
    padding: 18px 0 6px;
    color: #8d96b6;
}

.cb-hub-audit-meta {
    display: grid;
    gap: 10px;
}

.cb-hub-audit-meta pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid rgba(108, 82, 233, 0.12);
    border-radius: 16px;
    background: #f7f9ff;
    color: #5b678f;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.cb-hub-form-shell {
    display: grid;
    gap: 18px;
}

.cb-hub-field-grid {
    display: grid;
    gap: 14px;
}

.cb-hub-field-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-hub-field-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-hub-field-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cb-hub-field {
    display: grid;
    gap: 8px;
}

.cb-hub-field > span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #5b678f;
}

.cb-hub-field input,
.cb-hub-field select,
.cb-hub-field textarea {
    width: 100%;
    border: 1px solid #dbe1f2;
    border-radius: 15px;
    background: #f8faff;
    color: #17214a;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cb-hub-field input:focus,
.cb-hub-field select:focus,
.cb-hub-field textarea:focus {
    border-color: rgba(106, 77, 245, 0.45);
    box-shadow: 0 0 0 4px rgba(106, 77, 245, 0.12);
    background: #fff;
}

.cb-hub-field textarea {
    min-height: 120px;
    resize: vertical;
}

.cb-hub-field input[type="file"] {
    padding: 12px 14px;
    background: #fff;
}

.cb-hub-form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 4px;
}

.cb-hub-login-body {
    background:
        radial-gradient(circle at top left, rgba(106, 77, 245, 0.22), transparent 36%),
        linear-gradient(180deg, #11162f 0%, #1d2650 100%);
}

.cb-hub-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
    align-items: center;
    gap: clamp(32px, 4vw, 56px);
    padding: 48px clamp(32px, 6vw, 96px);
}

.cb-hub-login-panel {
    color: #f7f8ff;
    display: grid;
    gap: 18px;
}

.cb-hub-login-panel h1 {
    margin: 0;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 0.96;
}

.cb-hub-login-panel p,
.cb-hub-login-panel li {
    color: rgba(247, 248, 255, 0.78);
}

.cb-hub-login-badge {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cb-hub-login-badge svg {
    width: 26px;
    height: 26px;
}

.cb-hub-login-card {
    width: 100%;
    max-width: 520px;
    justify-self: center;
}

.cb-support-shell {
    gap: 20px;
}

.cb-support-composer,
.cb-support-ticket {
    padding: 24px;
}

.cb-support-composer-head h2,
.cb-support-ticket-head h2 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #17214a;
}

.cb-support-composer-head p,
.cb-support-ticket-head p {
    margin: 0;
    color: #7f89aa;
    line-height: 1.6;
}

.cb-support-form,
.cb-support-reply-form {
    display: grid;
    gap: 16px;
}

.cb-support-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
    gap: 14px;
}

.cb-support-form label,
.cb-support-reply-form {
    display: grid;
    gap: 8px;
}

.cb-support-form label span {
    font-size: 13px;
    font-weight: 700;
    color: #556286;
}

.cb-support-form input,
.cb-support-form select,
.cb-support-form textarea,
.cb-support-reply-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fbfbfe;
    color: var(--cb-text);
}

.cb-support-form textarea,
.cb-support-reply-form textarea {
    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.cb-support-form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.cb-support-list {
    display: grid;
    gap: 18px;
}

.cb-support-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cb-support-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.cb-support-highlight {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid #dfe8ff;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7f9ff 0%, #eef4ff 100%);
}

.cb-support-highlight strong {
    display: block;
    margin-bottom: 8px;
    color: #17214a;
}

.cb-support-highlight p {
    margin: 0;
    color: #5d6a8f;
    line-height: 1.7;
}

.cb-support-thread {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.cb-support-message {
    max-width: 86%;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--cb-line);
    background: #f8faff;
}

.cb-support-message.is-company {
    justify-self: end;
    background: linear-gradient(135deg, #6b4df5 0%, #8458f2 100%);
    color: #fff;
    border-color: transparent;
}

.cb-support-message.is-company .cb-support-message-head span,
.cb-support-message.is-company p {
    color: rgba(255, 255, 255, 0.84);
}

.cb-support-message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cb-support-message-head strong {
    font-size: 14px;
}

.cb-support-message-head span {
    color: #92a0c2;
    font-size: 12px;
}

.cb-support-message p {
    margin: 0;
    line-height: 1.7;
}

.cb-support-empty-thread {
    padding: 16px 0 4px;
    color: #8d96b6;
}

@media (max-width: 900px) {
    .cb-support-form-row {
        grid-template-columns: 1fr;
    }

    .cb-support-ticket-head {
        flex-direction: column;
    }

    .cb-support-message {
        max-width: 100%;
    }
}

@media (max-width: 1180px) {
    .cb-hub-stats-grid,
    .cb-hub-grid-2,
    .cb-hub-login-shell {
        grid-template-columns: 1fr;
    }

    .cb-hub-login-card {
        justify-self: stretch;
        max-width: none;
    }

    .cb-hub-page-head,
    .cb-hub-hero,
    .cb-hub-record-head,
    .cb-hub-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-hub-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-hub-topbar .cb-topbar-right {
        margin-left: 0;
        justify-content: space-between;
    }

    .cb-hub-field-grid-2,
    .cb-hub-field-grid-3,
    .cb-hub-field-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .cb-hub-shell {
        grid-template-columns: 1fr;
    }

    .cb-hub-page-shell {
        padding: 20px;
    }

    .cb-hub-stat-card strong {
        font-size: 36px;
    }
}

@media (max-width: 1320px) {
    .cb-hub-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .cb-hub-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Hub V2 */
.cb-hub-shell-body {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 18%),
        linear-gradient(180deg, #f5f7fd 0%, #edf2fb 100%);
    color: #0f172a;
}

.cb-hub-v2-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
}

.cb-hub-v2-main {
    min-width: 0;
}

.cb-hub-v2-content {
    padding: 18px 24px 34px;
}

.cb-hub-v2-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 22px 14px 18px;
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 22%),
        radial-gradient(circle at 20% 120%, rgba(56, 189, 248, 0.08), transparent 22%),
        linear-gradient(180deg, #0b0a14 0%, #12101f 52%, #0b0a14 100%);
    color: #d9e1ff;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.cb-hub-v2-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: 0.32;
    pointer-events: none;
}

.cb-hub-v2-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 8px 22px;
    color: inherit;
    text-decoration: none;
}

.cb-hub-v2-brand-mark,
.cb-hub-v2-login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9 65%, #5b21b6);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow:
        0 18px 34px rgba(124, 58, 237, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cb-hub-v2-brand-copy,
.cb-hub-v2-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 700;
}

.cb-hub-v2-brand-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.cb-hub-v2-brand-copy strong {
    color: #f8f8ff;
    font-size: 1.18rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.cb-hub-v2-brand-copy small {
    color: #7f88ae;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.cb-hub-v2-nav {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 22px;
    margin-top: 8px;
}

.cb-hub-v2-nav-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cb-hub-v2-nav-label {
    padding: 0 10px;
    color: #6a7398;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.cb-hub-v2-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #aab3d5;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cb-hub-v2-nav-link:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    color: #eef2ff;
}

.cb-hub-v2-nav-link.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(91, 33, 182, 0.18));
    color: #fff;
    border-color: rgba(167, 139, 250, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 28px rgba(17, 12, 36, 0.32);
}

.cb-hub-v2-nav-icon {
    width: 16px;
    height: 16px;
    color: currentColor;
}

.cb-hub-v2-nav-icon svg {
    width: 100%;
    height: 100%;
}

.cb-hub-v2-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff2d72;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.cb-hub-v2-dot {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 999px;
    background: #ffcc00;
}

.cb-hub-v2-sidebar-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
}

.cb-hub-v2-online {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(10px);
}

.cb-hub-v2-online-stack {
    display: flex;
    align-items: center;
}

.cb-hub-v2-online-stack span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border: 2px solid #0b0913;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b82f6, #7c3aed);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

.cb-hub-v2-online-stack span:first-child {
    margin-left: 0;
}

.cb-hub-v2-online small,
.cb-hub-v2-account-copy small {
    color: #6f7aa3;
}

.cb-hub-v2-account {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(10px);
}

.cb-hub-v2-account-avatar,
.cb-hub-v2-topbar-avatar,
.cb-hub-v2-avatar,
.cb-hub-v2-team-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 800;
}

.cb-hub-v2-account-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cb-hub-v2-account-exit,
.cb-hub-v2-account-exit svg {
    width: 16px;
    height: 16px;
    color: #8790b5;
}

.cb-hub-v2-topbar {
    display: grid;
    grid-template-columns: auto minmax(320px, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 18px 24px 0;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(220, 228, 244, 0.95);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(28, 39, 74, 0.08);
    backdrop-filter: blur(18px);
}

.cb-hub-v2-breadcrumb {
    color: #96a2c7;
    font-size: 0.95rem;
    font-weight: 600;
}

.cb-hub-v2-breadcrumb span {
    margin: 0 8px;
}

.cb-hub-v2-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 400px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #d6e0f1;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff, #f2f7ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cb-hub-v2-search span,
.cb-hub-v2-search svg {
    width: 14px;
    height: 14px;
    color: #a7b0cf;
}

.cb-hub-v2-search input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #50618e;
    font: inherit;
    outline: none;
}

.cb-hub-v2-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-hub-v2-date {
    color: #95a2c7;
    font-size: 0.9rem;
    font-weight: 600;
}

.cb-hub-v2-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dde6f5;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    color: #8798c4;
    cursor: pointer;
    text-decoration: none;
}

.cb-hub-v2-icon-button svg {
    width: 16px;
    height: 16px;
}

.cb-hub-v2-icon-button.is-alert b {
    position: absolute;
    top: 4px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff2d72;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
}

.cb-hub-v2-topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 6px 8px;
    border: 1px solid #dde6f5;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(27, 41, 79, 0.06);
    cursor: pointer;
}

.cb-hub-v2-topbar-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cb-hub-v2-topbar-copy strong {
    color: #0f172a;
}

.cb-hub-v2-topbar-copy small {
    color: #94a3c7;
}

.cb-hub-v2-page,
.cb-hub-v2-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cb-hub-v2-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cb-hub-v2-page-head h1 {
    margin: 0;
    color: #091735;
    font-size: clamp(2.2rem, 3vw, 3.15rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.cb-hub-v2-page-head p {
    margin: 6px 0 0;
    color: #5c74a1;
    font-size: 1rem;
}

.cb-hub-v2-primary-button,
.cb-hub-v2-ghost-button,
.cb-hub-v2-danger-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
}

.cb-hub-v2-primary-button {
    border: 0;
    background: linear-gradient(90deg, #7c3aed, #9333ea);
    color: #fff;
    box-shadow: 0 18px 28px rgba(124, 58, 237, 0.22);
}

.cb-hub-v2-primary-button svg,
.cb-hub-v2-ghost-button svg,
.cb-hub-v2-danger-button svg {
    width: 14px;
    height: 14px;
}

.cb-hub-v2-ghost-button {
    border: 1px solid #dfe7f4;
    background: #fff;
    color: #091735;
}

.cb-hub-v2-danger-button {
    border: 1px solid rgba(239, 68, 68, 0.18);
    background: #fff1f2;
    color: #b91c1c;
}

.cb-hub-v2-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cb-hub-v2-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid #dbe4f1;
    border-radius: 14px;
    background: #fff;
    color: #5f6f99;
    font-weight: 600;
}

.cb-hub-v2-filter.is-active {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
}

.cb-hub-v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.cb-hub-v2-stat-grid.is-billing {
    margin-bottom: -4px;
}

.cb-hub-v2-stat-card,
.cb-hub-v2-chart-card,
.cb-hub-v2-activity-card,
.cb-hub-v2-table-card,
.cb-hub-v2-form-card,
.cb-hub-v2-status-card,
.cb-hub-v2-team-card,
.cb-hub-v2-activity-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98));
    border: 1px solid rgba(222, 231, 245, 0.96);
    border-radius: 28px;
    box-shadow:
        0 18px 44px rgba(20, 31, 58, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.cb-hub-v2-stat-card {
    position: relative;
    min-height: 142px;
    padding: 22px 24px 20px;
    overflow: hidden;
}

.cb-hub-v2-stat-card::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 999px;
    background: #7c3aed;
}

.cb-hub-v2-stat-card.is-blue::before {
    background: #2f6df6;
}

.cb-hub-v2-stat-card.is-green::before {
    background: #10b981;
}

.cb-hub-v2-stat-card.is-orange::before {
    background: #f4b000;
}

.cb-hub-v2-stat-card p {
    margin: 18px 0 12px;
    color: #8a98bd;
    font-size: 0.79rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
}

.cb-hub-v2-stat-card strong {
    display: block;
    color: #091735;
    font-size: 1rem;
}

.cb-hub-v2-stat-card > strong {
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.cb-hub-v2-stat-card small,
.cb-hub-v2-card-head p,
.cb-hub-v2-table small,
.cb-hub-v2-business small,
.cb-hub-v2-person small,
.cb-hub-v2-activity-item small,
.cb-hub-v2-audit-copy p,
.cb-hub-v2-audit-copy small,
.cb-hub-v2-status-metrics small,
.cb-hub-v2-team-card p,
.cb-hub-v2-team-meta span,
.cb-hub-v2-incidents p,
.cb-hub-v2-incidents small {
    color: #8a9abd;
}

.cb-hub-v2-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
    gap: 20px;
}

.cb-hub-v2-split {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.95fr);
    gap: 18px;
}

.cb-hub-v2-chart-card,
.cb-hub-v2-activity-card,
.cb-hub-v2-table-card,
.cb-hub-v2-form-card,
.cb-hub-v2-activity-panel {
    padding: 24px 24px 22px;
}

.cb-hub-v2-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.cb-hub-v2-card-head h3 {
    margin: 0;
    color: #091735;
    font-size: 1.22rem;
    letter-spacing: -0.03em;
}

.cb-hub-v2-chart-metric,
.cb-hub-v2-growth {
    color: #10b981;
    text-align: right;
}

.cb-hub-v2-chart-metric strong {
    display: block;
    color: #091735;
    font-size: 1.12rem;
}

.cb-hub-v2-chart {
    width: 100%;
    height: auto;
}

.cb-hub-v2-chart-grid line {
    stroke: #edf1f7;
    stroke-dasharray: 3 5;
}

.cb-hub-v2-chart text {
    fill: #a5b0cb;
    font-size: 13px;
}

.cb-hub-v2-activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-hub-v2-activity-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 14px;
    border: 1px solid #edf1f7;
    border-radius: 18px;
    background: linear-gradient(180deg, #fcfdff, #f7faff);
}

.cb-hub-v2-activity-item:first-child {
    padding-top: 14px;
}

.cb-hub-v2-activity-icon,
.cb-hub-v2-audit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eef4ff;
    color: #3b82f6;
    font-size: 0.72rem;
    font-weight: 800;
}

.cb-hub-v2-inline-link {
    display: inline-block;
    margin-top: 12px;
    color: #7c3aed;
    font-weight: 700;
    text-decoration: none;
}

.cb-hub-v2-table-card {
    overflow: hidden;
}

.cb-hub-v2-table {
    width: 100%;
    border-collapse: collapse;
}

.cb-hub-v2-table thead th {
    padding: 14px 0;
    border-bottom: 1px solid #edf1f7;
    color: #6f83af;
    font-size: 0.92rem;
    text-align: left;
    text-transform: uppercase;
}

.cb-hub-v2-table tbody td {
    padding: 18px 0;
    border-bottom: 1px solid #f1f4fa;
    color: #304568;
    vertical-align: middle;
}

.cb-hub-v2-table tbody tr:last-child td {
    border-bottom: 0;
}

.cb-hub-v2-row-link {
    cursor: pointer;
}

.cb-hub-v2-row-link:hover td,
.cb-hub-v2-row-link.is-selected td {
    background: #fafbff;
}

.cb-hub-v2-row-anchor {
    color: #091735;
    text-decoration: none;
}

.cb-hub-v2-row-anchor:hover {
    color: #7c3aed;
}

.cb-hub-v2-business,
.cb-hub-v2-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-hub-v2-avatar.is-business {
    border-radius: 14px;
}

.cb-hub-v2-person strong,
.cb-hub-v2-business strong {
    display: block;
    color: #091735;
}

.cb-hub-v2-pill,
.cb-hub-v2-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.cb-hub-v2-pill.is-plan {
    background: #efe9ff;
    color: #7c3aed;
}

.cb-hub-v2-status {
    border: 1px solid transparent;
}

.cb-hub-v2-status.is-active {
    border-color: #9be3c0;
    background: #ecfdf5;
    color: #00a86b;
}

.cb-hub-v2-status.is-trial {
    border-color: #ffd180;
    background: #fff7e6;
    color: #ef8b00;
}

.cb-hub-v2-status.is-suspended {
    border-color: #ffb8cf;
    background: #fff1f5;
    color: #ff2d72;
}

.cb-hub-v2-status.is-info {
    border-color: #99d4ff;
    background: #eef8ff;
    color: #0a7be0;
}

.cb-hub-v2-health {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cb-hub-v2-health span {
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #22c55e);
}

.cb-hub-v2-health small {
    color: #6f83af;
}

.cb-hub-v2-table-menu,
.cb-hub-v2-team-menu {
    color: #aab5d2;
    letter-spacing: 0.2em;
    text-decoration: none;
}

.cb-hub-v2-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-hub-v2-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-hub-v2-form-grid label.is-wide {
    grid-column: 1 / -1;
}

.cb-hub-v2-form-grid span {
    color: #52688f;
    font-size: 0.92rem;
    font-weight: 600;
}

.cb-hub-v2-form-grid input,
.cb-hub-v2-form-grid select,
.cb-hub-v2-form-grid textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #dbe4f1;
    border-radius: 14px;
    background: #fbfdff;
    color: #091735;
    font: inherit;
    outline: none;
}

.cb-hub-v2-form-grid textarea {
    min-height: 120px;
    padding: 14px;
    resize: vertical;
}

.cb-hub-v2-form-grid button {
    border: 0;
    cursor: pointer;
}

.cb-hub-v2-thread {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf1f7;
}

.cb-hub-v2-thread-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.cb-hub-v2-thread-item {
    padding: 14px 16px;
    border: 1px solid #e8eef8;
    border-radius: 18px;
    background: #fbfdff;
}

.cb-hub-v2-thread-item strong {
    display: block;
    margin-bottom: 4px;
    color: #091735;
}

.cb-hub-v2-thread-item p {
    margin: 8px 0 0;
    color: #4b5f86;
    line-height: 1.6;
}

.cb-hub-v2-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.cb-hub-v2-form-actions.is-spread {
    justify-content: space-between;
    align-items: center;
}

.cb-hub-v2-support-list-card {
    padding-top: 18px;
}

.cb-hub-v2-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.cb-hub-v2-modal:target {
    display: flex;
}

.cb-hub-v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 23, 53, 0.58);
    backdrop-filter: blur(8px);
}

.cb-hub-v2-modal-card {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 48px));
    max-height: calc(100vh - 56px);
    overflow: auto;
}

.cb-hub-v2-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #dfe7f4;
    border-radius: 14px;
    color: #5f6f99;
    text-decoration: none;
    background: #fff;
}

.cb-hub-v2-modal-close svg,
.cb-hub-v2-back-link svg {
    width: 16px;
    height: 16px;
}

.cb-hub-v2-ticket-focus {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cb-hub-v2-ticket-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
    gap: 18px;
    align-items: start;
}

.cb-hub-v2-ticket-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cb-hub-v2-ticket-focus-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-hub-v2-ticket-focus-copy h1 {
    margin: 0;
    color: #091735;
    font-size: 2rem;
    line-height: 1.04;
}

.cb-hub-v2-ticket-focus-copy p {
    margin: 0;
    color: #5c74a1;
}

.cb-hub-v2-ticket-focus-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.cb-hub-v2-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5f6f99;
    font-weight: 700;
    text-decoration: none;
}

.cb-hub-v2-back-link:hover {
    color: #7c3aed;
}

.cb-hub-v2-ticket-details-card,
.cb-hub-v2-thread-card {
    padding: 18px 20px;
}

.cb-hub-v2-form-grid.is-compact {
    gap: 14px 14px;
}

.cb-hub-v2-form-grid.is-compact label span {
    margin-bottom: 7px;
}

.cb-hub-v2-form-grid.is-compact input,
.cb-hub-v2-form-grid.is-compact select {
    height: 46px;
}

.cb-hub-v2-form-grid.is-compact textarea {
    min-height: 88px;
}

.cb-hub-v2-thread-card {
    display: flex;
    flex-direction: column;
}

.cb-hub-v2-thread-list.is-scrollable {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -6px;
}

.cb-hub-v2-thread-reply {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid #edf1f7;
}

.cb-hub-v2-thread-list.is-scrollable::-webkit-scrollbar {
    width: 10px;
}

.cb-hub-v2-thread-list.is-scrollable::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #cfd9ee;
    background-clip: padding-box;
}

.cb-hub-v2-thread-list.is-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.cb-hub-v2-audit-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid #edf1f7;
}

.cb-hub-v2-audit-row:first-child {
    border-top: 0;
    padding-top: 4px;
}

.cb-hub-v2-audit-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #091735;
}

.cb-hub-v2-audit-row time {
    color: #93a3c8;
    white-space: nowrap;
}

.cb-hub-v2-incident-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid #ffd269;
    border-radius: 20px;
    background: #fff9e8;
    color: #b45309;
}

.cb-hub-v2-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cb-hub-v2-status-card {
    padding: 18px;
}

.cb-hub-v2-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cb-hub-v2-status-head strong {
    font-size: 0.82rem;
    text-transform: uppercase;
}

.cb-hub-v2-status-head strong.is-ok {
    color: #10b981;
}

.cb-hub-v2-status-head strong.is-warn {
    color: #f59e0b;
}

.cb-hub-v2-status-icon,
.cb-hub-v2-status-icon svg {
    width: 18px;
    height: 18px;
    color: #8fa3c8;
}

.cb-hub-v2-status-card h3 {
    margin: 0 0 14px;
    color: #091735;
    font-size: 1.05rem;
}

.cb-hub-v2-status-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-hub-v2-status-metrics span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-hub-v2-status-metrics strong {
    color: #091735;
}

.cb-hub-v2-incidents {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cb-hub-v2-incident-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.cb-hub-v2-incident-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff2d8;
    color: #f59e0b;
    font-weight: 800;
}

.cb-hub-v2-toggle {
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    padding: 2px;
    border-radius: 999px;
    background: #dce4f1;
}

.cb-hub-v2-toggle i {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}

.cb-hub-v2-toggle.is-on {
    justify-content: flex-end;
    background: #7c3aed;
}

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

.cb-hub-v2-team-card {
    position: relative;
    padding: 22px;
}

.cb-hub-v2-team-menu {
    position: absolute;
    top: 18px;
    right: 18px;
    border: 0;
    background: transparent;
}

.cb-hub-v2-team-top {
    position: relative;
    display: inline-flex;
    margin-bottom: 14px;
}

.cb-hub-v2-presence {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #d8e1f0;
}

.cb-hub-v2-presence.is-online {
    background: #10b981;
}

.cb-hub-v2-team-card h3 {
    margin: 0;
    color: #091735;
    font-size: 1.1rem;
}

.cb-hub-v2-team-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.cb-hub-v2-team-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.cb-hub-v2-team-meta i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #10b981;
}

.cb-hub-v2-kicker {
    display: block;
    margin-bottom: 4px;
    color: #8c9bc0;
    font-size: 0.78rem;
}

.cb-hub-v2-login-body {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at 46% 30%, rgba(124, 58, 237, 0.18), transparent 22%),
        radial-gradient(circle at center, rgba(17, 13, 32, 0.92), #090811 72%);
    background-color: #090811;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
    background-size: 28px 28px;
}

.cb-hub-v2-login {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    gap: 40px;
    padding: 8px 32px 20px;
}

.cb-hub-v2-login-grid {
    display: grid;
    grid-template-columns: minmax(360px, 460px) minmax(420px, 500px);
    align-items: center;
    justify-content: center;
    gap: 88px;
    flex: 1;
}

.cb-hub-v2-login-panel {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 460px;
    min-height: 640px;
    color: #fff;
}

.cb-hub-v2-login-panel-top {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cb-hub-v2-login-chip,
.cb-hub-v2-login-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(20, 18, 29, 0.82);
    color: #d4cdfc;
    font-size: 0.86rem;
    font-weight: 600;
}

.cb-hub-v2-login-chip i,
.cb-hub-v2-login-chip svg {
    width: 14px;
    height: 14px;
}

.cb-hub-v2-login-copy h1 {
    margin: 0;
    font-size: clamp(4rem, 6vw, 5.8rem);
    line-height: 0.94;
    letter-spacing: -0.06em;
    white-space: nowrap;
}

.cb-hub-v2-login-copy p {
    margin: 0;
    color: #8f97b7;
    font-size: 1.05rem;
}

.cb-hub-v2-login-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 280px;
}

.cb-hub-v2-login-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(25, 23, 34, 0.85);
    color: #fff;
}

.cb-hub-v2-login-metric > i,
.cb-hub-v2-login-metric svg {
    width: 16px;
    height: 16px;
    color: #b694ff;
}

.cb-hub-v2-login-metric > i.is-green {
    border-radius: 999px;
    background: #10b981;
}

.cb-hub-v2-login-metric strong,
.cb-hub-v2-login-card h2 {
    color: #fff;
}

.cb-hub-v2-login-metric small,
.cb-hub-v2-login-footnote,
.cb-hub-v2-login-card p,
.cb-hub-v2-login-card small {
    color: #64748b;
}

.cb-hub-v2-login-metric span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cb-hub-v2-login-avatars {
    display: flex;
    align-items: center;
    min-width: 58px;
}

.cb-hub-v2-login-avatars span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -5px;
    border: 2px solid rgba(18, 16, 26, 0.9);
    border-radius: 999px;
    background: linear-gradient(180deg, #3b82f6, #7c3aed);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

.cb-hub-v2-login-avatars span:first-child {
    margin-left: 0;
}

.cb-hub-v2-login-footnote {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.9rem;
}

.cb-hub-v2-login-card {
    width: 100%;
    max-width: 480px;
    margin-left: -18px;
    padding: 4px 0;
    color: #fff;
}

.cb-hub-v2-login-alerts {
    min-height: 0;
    margin-bottom: 14px;
}

.cb-hub-v2-login-alerts .cb-flash {
    margin: 0;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
}

.cb-hub-v2-login-card-inner {
    display: flex;
    flex-direction: column;
}

.cb-hub-v2-login-card h2 {
    margin: 18px 0 8px;
    font-size: 2.1rem;
}

.cb-hub-v2-login-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.cb-hub-v2-login-field > span {
    color: #a9b6d2;
    font-size: 0.92rem;
    font-weight: 600;
}

.cb-hub-v2-login-field input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(110, 138, 184, 0.22);
    border-radius: 16px;
    background: #1e293b;
    color: #fff;
    font: inherit;
    outline: none;
}

.cb-hub-v2-login-field-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cb-hub-v2-login-field-row a {
    color: #9f67ff;
    text-decoration: none;
    font-size: 0.9rem;
}

.cb-hub-v2-login-password {
    position: relative;
}

.cb-hub-v2-login-password i,
.cb-hub-v2-login-password svg {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    color: #7f8ca8;
    transform: translateY(-50%);
}

.cb-hub-v2-login-submit {
    width: 100%;
    height: 48px;
    margin-top: 26px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, #7c3aed, #a21caf);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 16px 28px rgba(124, 58, 237, 0.34);
}

.cb-hub-v2-login-card small {
    display: block;
    margin-top: 22px;
    text-align: center;
    line-height: 1.5;
    font-size: 0.92rem;
}

.cb-flash {
    border-radius: 18px;
}

@media (max-width: 1280px) {
    .cb-hub-v2-stat-grid,
    .cb-hub-v2-status-grid,
    .cb-hub-v2-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-hub-v2-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cb-hub-v2-shell,
    .cb-hub-v2-login-grid {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-sidebar {
        min-height: auto;
    }

    .cb-hub-v2-topbar {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-search {
        max-width: none;
    }

    .cb-hub-v2-login {
        padding: 0;
    }

    .cb-hub-v2-login-card {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .cb-hub-v2-content,
    .cb-hub-v2-login-body {
        padding: 18px;
    }

    .cb-hub-v2-stat-grid,
    .cb-hub-v2-status-grid,
    .cb-hub-v2-team-grid,
    .cb-hub-v2-form-grid {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-page-head,
    .cb-hub-v2-card-head {
        flex-direction: column;
    }

    .cb-hub-v2-ticket-focus-head,
    .cb-hub-v2-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-hub-v2-ticket-layout {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-thread-list.is-scrollable {
        max-height: 360px;
    }

    .cb-hub-v2-table-card {
        overflow-x: auto;
    }

    .cb-hub-v2-modal {
        padding: 16px;
    }

    .cb-hub-v2-modal-card {
        width: min(100vw - 24px, 760px);
        max-height: calc(100vh - 24px);
    }
}

.cb-onboarding-shell {
    max-width: 1040px;
    margin: 0 auto;
}

.cb-page-shell-standalone {
    min-height: 100vh;
}

.cb-onboarding-body {
    background:
        radial-gradient(circle at top right, rgba(124, 92, 255, 0.12), transparent 32%),
        linear-gradient(180deg, #f7f8ff 0%, #f4f6fd 100%);
}

.cb-onboarding-body .cb-page-shell-standalone {
    padding-top: 24px;
    padding-bottom: 32px;
}

.cb-onboarding-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.cb-onboarding-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111a44;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cb-onboarding-brand-mark {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #7c5cff, #5a38f5);
    box-shadow: 0 18px 28px rgba(90, 56, 245, 0.24);
}

.cb-onboarding-brand-mark svg {
    width: 20px;
    height: 20px;
}

.cb-onboarding-brand-wordmark {
    font-size: 24px;
    line-height: 1;
}

.cb-onboarding-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-onboarding-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.1);
    color: #6d53f6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-onboarding-user {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(124, 92, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 32px rgba(22, 27, 64, 0.06);
}

.cb-onboarding-user-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #7c5cff, #5a38f5);
    font-size: 14px;
    font-weight: 800;
}

.cb-onboarding-user-copy {
    display: grid;
    gap: 2px;
}

.cb-onboarding-user-copy strong {
    color: #111a44;
    font-size: 14px;
    font-weight: 700;
}

.cb-onboarding-user-copy small {
    color: #8a94b2;
    font-size: 12px;
    font-weight: 600;
}

.cb-onboarding-hero {
    display: grid;
    gap: 8px;
    width: min(100%, 620px);
    margin: 0 0 18px;
}

.cb-onboarding-hero h1 {
    margin: 0;
    color: #121a3f;
    font-size: clamp(34px, 5.2vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.08em;
}

.cb-onboarding-hero p {
    margin: 0;
    color: #7580a2;
    font-size: 16px;
}

.cb-onboarding-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.cb-onboarding-progress {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 28px;
}

.cb-onboarding-progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cb-border, #dde3ff);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cb-onboarding-progress-item span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #5a38f5);
    color: #fff;
    font-weight: 700;
}

.cb-onboarding-progress-item strong {
    display: block;
    color: #121a3f;
    font-size: 16px;
    font-weight: 700;
}

.cb-onboarding-progress-item small {
    display: block;
    color: #8791ae;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.cb-onboarding-progress-item.is-active {
    border-color: rgba(124, 92, 255, 0.24);
    box-shadow: 0 18px 34px rgba(24, 31, 72, 0.08);
    transform: translateY(-1px);
}

.cb-onboarding-progress-item.is-complete span {
    background: linear-gradient(135deg, #1dc98a, #0fad73);
}

.cb-onboarding-panels {
    display: grid;
    gap: 18px;
}

.cb-onboarding-form {
    display: grid;
    gap: 20px;
}

.cb-onboarding-panel {
    display: none;
}

.cb-onboarding-panel.is-active {
    display: block;
}

.cb-onboarding-form .cb-setting-block {
    padding: 22px 22px;
    border: 1px solid rgba(124, 92, 255, 0.12);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 22px 42px rgba(24, 31, 72, 0.07);
    backdrop-filter: blur(18px);
}

.cb-onboarding-form .cb-card-head h3 {
    margin: 0;
    color: #121a3f;
    font-size: 24px;
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.cb-onboarding-form .cb-section-copy {
    color: #7a84a4;
    font-size: 14px;
    line-height: 1.5;
}

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

.cb-onboarding-form .cb-form-grid label,
.cb-onboarding-form .cb-field-span {
    display: grid;
    gap: 8px;
    color: #111a44;
    font-size: 14px;
    font-weight: 700;
}

.cb-onboarding-form .cb-form-grid input,
.cb-onboarding-form .cb-form-grid select,
.cb-onboarding-form .cb-form-grid textarea,
.cb-onboarding-form > .cb-setting-block > textarea,
.cb-onboarding-form > .cb-setting-block .cb-field-span textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid #dbe2f1;
    border-radius: 16px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: #111a44;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cb-onboarding-form .cb-form-grid textarea,
.cb-onboarding-form > .cb-setting-block .cb-field-span textarea {
    min-height: 132px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.cb-onboarding-form .cb-form-grid input:focus,
.cb-onboarding-form .cb-form-grid select:focus,
.cb-onboarding-form .cb-form-grid textarea:focus,
.cb-onboarding-form > .cb-setting-block .cb-field-span textarea:focus {
    outline: none;
    border-color: rgba(124, 92, 255, 0.5);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12);
}

.cb-onboarding-form .cb-field-span {
    grid-column: 1 / -1;
}

.cb-location-picker {
    min-height: calc(100vh - 48px);
    padding: 22px 32px 28px;
    background:
        radial-gradient(circle at bottom right, rgba(13, 201, 160, 0.1), transparent 28%),
        linear-gradient(180deg, #f7f6ff 0%, #f8fbff 54%, #f4fff9 100%);
}

.cb-location-picker-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cb-location-picker-brand,
.cb-location-picker-account,
.cb-location-picker-main,
.cb-location-picker-copy span,
.cb-location-picker-metrics,
.cb-location-picker-colors {
    display: flex;
    align-items: center;
}

.cb-location-picker-brand {
    gap: 10px;
    font-weight: 900;
    color: #071139;
}

.cb-location-picker-brand-mark,
.cb-location-picker-avatar,
.cb-location-picker-icon,
.cb-location-picker-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cb-location-picker-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 15px;
    background: linear-gradient(135deg, #7c5cff, #6a4df5);
    color: #fff;
}

.cb-location-picker-brand-mark.is-image {
    background: transparent;
}

.cb-location-picker-brand-mark img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.cb-location-picker-account {
    gap: 10px;
}

.cb-location-picker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: #6e4df6;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.cb-location-picker-account > span:not(.cb-location-picker-avatar) {
    display: grid;
    gap: 2px;
    min-height: 40px;
    padding: 5px 12px 5px 0;
}

.cb-location-picker-account strong {
    color: #10183d;
    font-size: 14px;
}

.cb-location-picker-account small,
.cb-location-picker-signout {
    color: #8a94b0;
    font-size: 12px;
}

.cb-location-picker-signout {
    font-weight: 700;
}

.cb-location-picker-main {
    width: min(640px, 100%);
    margin: 58px auto 0;
    flex-direction: column;
    text-align: center;
}

.cb-location-picker-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7657ff, #6a4df5);
    color: #fff;
    box-shadow: 0 20px 42px rgba(106, 77, 245, 0.28);
}

.cb-location-picker-icon svg {
    width: 27px;
    height: 27px;
}

.cb-location-picker-main h1 {
    margin: 0;
    color: #071139;
    font-size: clamp(25px, 3vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.cb-location-picker-main > p {
    margin: 12px 0 32px;
    color: #64708f;
    font-size: 14px;
}

.cb-location-picker-main > p strong {
    color: #071139;
}

.cb-location-picker-search {
    width: 100%;
    margin-bottom: 18px;
}

.cb-location-picker-search input {
    width: 100%;
    height: 46px;
    padding: 0 40px;
    border: 1px solid #e2e5ef;
    border-radius: 15px;
    background: #fff;
    color: #111a44;
    box-shadow: 0 12px 30px rgba(24, 32, 72, 0.08);
}

.cb-location-picker-search input::placeholder {
    color: #99a2b8;
}

.cb-location-picker-list {
    width: 100%;
    display: grid;
    gap: 13px;
}

.cb-location-picker-form {
    margin: 0;
}

.cb-location-picker-row {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 16px 16px;
    border: 1px solid #e5e8f0;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    color: #10183d;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 11px 26px rgba(23, 30, 70, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cb-location-picker-row::before {
    content: "";
    position: absolute;
    inset: 6px auto 6px 0;
    width: 3px;
    border-radius: 999px;
    background: #14c79b;
}

.cb-location-picker-row:hover,
.cb-location-picker-row:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(106, 77, 245, 0.26);
    box-shadow: 0 16px 34px rgba(23, 30, 70, 0.12);
    outline: none;
}

.cb-location-picker-pin {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #f1eeff;
    color: #6e4df6;
    border: 2px solid #d9d0ff;
}

.cb-location-picker-pin svg {
    width: 20px;
    height: 20px;
}

.cb-location-picker-row.tone-green .cb-location-picker-pin {
    background: #eafff8;
    border-color: #b8f3df;
    color: #0fb987;
}

.cb-location-picker-row.tone-amber .cb-location-picker-pin {
    background: #fff6e5;
    border-color: #ffd99b;
    color: #f59e0b;
}

.cb-location-picker-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cb-location-picker-copy span {
    gap: 10px;
}

.cb-location-picker-copy strong {
    color: #10183d;
    font-size: 15px;
    line-height: 1.15;
}

.cb-location-picker-copy em {
    min-height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f0edff;
    color: #6e4df6;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.cb-location-picker-row.tone-green .cb-location-picker-copy em {
    background: #e8fbf3;
    color: #0fb987;
}

.cb-location-picker-row.tone-amber .cb-location-picker-copy em {
    background: #fff3dd;
    color: #ee9909;
}

.cb-location-picker-copy small {
    overflow: hidden;
    color: #8a94ad;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-location-picker-metrics {
    gap: 26px;
}

.cb-location-picker-metrics span {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 42px;
}

.cb-location-picker-metrics strong {
    color: #071139;
    font-size: 16px;
    line-height: 1;
}

.cb-location-picker-metrics small {
    color: #909ab0;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.cb-location-picker-metrics span:nth-child(2) strong {
    color: #0fb987;
}

.cb-location-picker-arrow {
    color: #c1c7d4;
    font-size: 28px;
    line-height: 1;
}

.cb-location-picker-all {
    border-style: dashed;
    border-width: 2px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: none;
}

.cb-location-picker-all::before {
    display: none;
}

.cb-location-picker-all .cb-location-picker-pin {
    background: #f0f2f7;
    border-color: transparent;
    color: #6f788d;
}

.cb-location-picker-colors {
    gap: 6px;
    padding-right: 10px;
}

.cb-location-picker-colors i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #6e4df6;
}

.cb-location-picker-colors i:nth-child(2) {
    background: #0fb987;
}

.cb-location-picker-colors i:nth-child(3) {
    background: #f59e0b;
}

.cb-location-picker-colors i:nth-child(4) {
    background: #7657ff;
}

.cb-location-picker-footnote {
    margin: 26px 0 0;
    color: #9aa4bb;
    font-size: 12px;
}

@media (max-width: 760px) {
    .cb-location-picker {
        padding: 18px;
    }

    .cb-location-picker-topbar,
    .cb-location-picker-account {
        align-items: flex-start;
    }

    .cb-location-picker-account > span:not(.cb-location-picker-avatar) {
        display: none;
    }

    .cb-location-picker-main {
        margin-top: 36px;
    }

    .cb-location-picker-row {
        grid-template-columns: 46px minmax(0, 1fr) 18px;
    }

    .cb-location-picker-metrics,
    .cb-location-picker-colors {
        grid-column: 2 / -1;
        justify-content: flex-start;
        padding: 6px 0 0;
    }
}

.cb-onboarding-actions,
.cb-inline-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.cb-onboarding-actions {
    justify-content: space-between;
    padding-top: 6px;
}

.cb-onboarding-actions-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cb-checkbox-field {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cb-checkbox-field-block {
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #dbe2f1;
    border-radius: 16px;
    background: #fff;
}

.cb-checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.cb-onboarding-review {
    margin-top: 16px;
    padding: 16px 16px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.08), rgba(124, 92, 255, 0.03));
    border: 1px solid rgba(124, 92, 255, 0.12);
}

.cb-onboarding-review strong {
    display: block;
    margin-bottom: 8px;
    color: #121a3f;
    font-size: 16px;
}

.cb-onboarding-review p {
    margin: 0;
    color: #6e7898;
    line-height: 1.6;
}

.cb-onboarding-inline-note {
    margin: 12px 0 0;
    color: #7b86a7;
    font-size: 13px;
    line-height: 1.5;
}

.cb-settings-brand-preview {
    display: grid;
    gap: 10px;
}

.cb-settings-brand-preview img {
    max-width: 180px;
    max-height: 72px;
    object-fit: contain;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(124, 92, 255, 0.16);
}

.cb-btn-ghost-danger {
    border: 1px solid rgba(255, 82, 109, 0.24);
    background: rgba(255, 82, 109, 0.08);
    color: #d92d48;
}

.cb-tutorial-stack {
    gap: 18px;
}

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

.cb-tutorial-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(124, 92, 255, 0.14);
    background: linear-gradient(180deg, rgba(248, 249, 255, 0.96), rgba(255, 255, 255, 0.9));
}

.cb-tutorial-card strong {
    display: block;
    margin-bottom: 8px;
    color: #121a3f;
}

@media (max-width: 1160px) {
    .cb-onboarding-grid {
        grid-template-columns: 1fr;
    }

    .cb-onboarding-progress {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-onboarding-form .cb-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cb-onboarding-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-onboarding-topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .cb-onboarding-progress {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .cb-onboarding-body .cb-page-shell-standalone {
        padding-top: 20px;
    }

    .cb-onboarding-brand-wordmark {
        font-size: 24px;
    }

    .cb-onboarding-topbar-right {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-onboarding-progress-item strong {
        font-size: 16px;
    }

    .cb-onboarding-user {
        width: 100%;
    }

    .cb-onboarding-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-onboarding-actions-right {
        width: 100%;
        flex-direction: column;
    }

    .cb-tutorial-grid {
        grid-template-columns: 1fr;
    }
}

/* Hub visual refresh */
.cb-hub-shell-body {
    background:
        radial-gradient(circle at top left, rgba(122, 82, 255, 0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(13, 201, 160, 0.06), transparent 22%),
        linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%);
}

.cb-hub-v2-shell {
    grid-template-columns: 232px minmax(0, 1fr);
    background:
        radial-gradient(circle at 78% 0%, rgba(115, 83, 255, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

.cb-hub-v2-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 18px 14px 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(127, 86, 255, 0.26), transparent 18%),
        linear-gradient(180deg, #0e0b1b 0%, #121028 56%, #0f1120 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.cb-hub-v2-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 0.7px, transparent 0.7px);
    background-size: 22px 22px;
    opacity: 0.28;
    pointer-events: none;
}

.cb-hub-v2-sidebar > * {
    position: relative;
    z-index: 1;
}

.cb-hub-v2-brand {
    align-items: center;
    gap: 14px;
    padding: 6px 8px 18px;
    margin-bottom: 10px;
}

.cb-hub-v2-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7d40ff, #5f6bff);
    box-shadow: 0 18px 34px rgba(114, 78, 255, 0.32);
    font-size: 16px;
}

.cb-hub-v2-brand-copy strong {
    color: #fff;
    font-size: 16px;
    letter-spacing: -0.03em;
}

.cb-hub-v2-brand-copy small {
    color: rgba(185, 194, 233, 0.76);
    font-size: 12px;
}

.cb-hub-v2-nav {
    gap: 16px;
}

.cb-hub-v2-nav-group {
    gap: 8px;
}

.cb-hub-v2-nav-label {
    padding: 0 12px;
    color: rgba(151, 162, 204, 0.56);
    font-size: 11px;
    letter-spacing: 0.16em;
}

.cb-hub-v2-nav-link {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 16px;
    color: #c6d0f5;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.cb-hub-v2-nav-link:hover {
    color: #fff;
    border-color: rgba(140, 116, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}

.cb-hub-v2-nav-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(116, 56, 255, 0.34), rgba(70, 34, 141, 0.52));
    border-color: rgba(139, 115, 255, 0.35);
    box-shadow: 0 18px 32px rgba(69, 34, 138, 0.32);
}

.cb-hub-v2-nav-icon {
    color: currentColor;
    opacity: 0.96;
}

.cb-hub-v2-badge,
.cb-hub-v2-dot {
    margin-left: auto;
}

.cb-hub-v2-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff3f7c;
    color: #fff;
    font-size: 11px;
    box-shadow: 0 10px 18px rgba(255, 63, 124, 0.28);
}

.cb-hub-v2-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffca28;
    box-shadow: 0 0 0 6px rgba(255, 202, 40, 0.08);
}

.cb-hub-v2-sidebar-footer {
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-hub-v2-online,
.cb-hub-v2-account {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
}

.cb-hub-v2-online {
    border-radius: 18px;
    padding: 14px 12px;
}

.cb-hub-v2-online small,
.cb-hub-v2-account-copy small {
    color: rgba(178, 188, 225, 0.72);
}

.cb-hub-v2-online-stack span,
.cb-hub-v2-account-avatar {
    box-shadow: 0 12px 24px rgba(116, 82, 255, 0.3);
}

.cb-hub-v2-account {
    border-radius: 20px;
    padding: 12px;
}

.cb-hub-v2-account-copy strong {
    color: #fff;
}

.cb-hub-v2-account-exit {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: #c8d2f6;
}

.cb-hub-v2-main {
    min-width: 0;
    padding: 18px 18px 22px 0;
}

.cb-hub-v2-topbar {
    position: sticky;
    top: 18px;
    z-index: 30;
    grid-template-columns: max-content minmax(320px, 1fr) max-content;
    gap: 18px;
    min-height: 72px;
    margin: 0 8px 18px 8px;
    padding: 0 24px;
    border: 1px solid rgba(224, 230, 250, 0.85);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(29, 40, 92, 0.08);
}

.cb-hub-v2-breadcrumb {
    color: #8995bb;
    font-size: 15px;
    font-weight: 600;
}

.cb-hub-v2-breadcrumb span {
    margin: 0 10px;
    color: #c0c8e4;
}

.cb-hub-v2-search {
    height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid #dce4fa;
    background: linear-gradient(180deg, #fdfdff, #f7f9ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cb-hub-v2-search span {
    color: #9ca8cc;
}

.cb-hub-v2-search input {
    color: #24325c;
    font-size: 15px;
}

.cb-hub-v2-topbar-right {
    gap: 12px;
}

.cb-hub-v2-date {
    color: #9ba6c8;
    font-size: 14px;
    font-weight: 600;
}

.cb-hub-v2-icon-button,
.cb-hub-v2-topbar-user {
    border: 1px solid #dde5f7;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 24px rgba(59, 83, 160, 0.08);
}

.cb-hub-v2-icon-button {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #7f8db7;
}

.cb-hub-v2-icon-button.is-alert b {
    top: -5px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #ff3f72;
    box-shadow: 0 10px 18px rgba(255, 63, 114, 0.25);
}

.cb-hub-v2-topbar-user {
    min-height: 48px;
    padding: 0 14px 0 8px;
    border-radius: 18px;
}

.cb-hub-v2-topbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7846ff, #586dff);
    box-shadow: 0 14px 26px rgba(97, 72, 255, 0.24);
}

.cb-hub-v2-topbar-copy strong {
    font-size: 15px;
}

.cb-hub-v2-topbar-copy small {
    color: #98a4c8;
}

.cb-hub-v2-content {
    padding: 0 8px 24px 8px;
}

.cb-hub-v2-page,
.cb-hub-v2-dashboard,
.cb-page-stack.cb-hub-stack {
    display: grid;
    gap: 22px;
}

.cb-hub-v2-page-head,
.cb-hub-page-head {
    align-items: end;
    gap: 18px;
}

.cb-hub-v2-page-head.is-spread {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cb-hub-v2-page-head h1,
.cb-hub-page-intro h1 {
    margin: 0;
    color: #15245c;
    font-size: clamp(40px, 4.8vw, 58px);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.cb-hub-v2-page-head p,
.cb-hub-page-intro p {
    max-width: 760px;
    color: #7f8db4;
    font-size: 18px;
    line-height: 1.5;
}

.cb-hub-v2-kicker,
.cb-hub-page-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    width: fit-content;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(117, 87, 255, 0.1);
    color: #7658ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cb-hub-v2-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-hub-v2-stat-grid {
    gap: 18px;
}

.cb-hub-v2-stat-card,
.cb-hub-v2-table-card,
.cb-hub-v2-form-card,
.cb-card.cb-hub-stat-card,
.cb-card.cb-hub-record-card,
.cb-card.cb-hub-table-card {
    border: 1px solid rgba(220, 229, 248, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.98));
    box-shadow: 0 22px 48px rgba(22, 37, 92, 0.08);
}

.cb-hub-v2-stat-card,
.cb-card.cb-hub-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    padding: 22px 24px;
    border-radius: 26px;
}

.cb-hub-v2-stat-card::after,
.cb-card.cb-hub-stat-card::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    opacity: 0.9;
}

.cb-hub-v2-stat-card p,
.cb-card.cb-hub-stat-card span {
    color: #8a96bd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-hub-v2-stat-card strong,
.cb-card.cb-hub-stat-card strong {
    color: #122255;
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.cb-hub-v2-stat-card small,
.cb-card.cb-hub-stat-card small {
    color: #90a0c5;
    font-size: 14px;
}

.cb-hub-v2-chart-card,
.cb-hub-v2-activity-card,
.cb-hub-v2-table-card,
.cb-hub-v2-form-card,
.cb-card.cb-hub-record-card,
.cb-card.cb-hub-table-card {
    border-radius: 30px;
}

.cb-hub-v2-dashboard-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(360px, 0.9fr);
    align-items: start;
}

.cb-hub-v2-dashboard-grid.is-business-detail {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.75fr);
}

.cb-hub-v2-split.is-business-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-hub-v2-card-head,
.cb-hub-record-head,
.cb-hub-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 26px 0;
}

.cb-hub-v2-card-head h3,
.cb-hub-record-head h3,
.cb-hub-section-head h3 {
    margin: 0;
    color: #13245b;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.cb-hub-v2-card-head p,
.cb-hub-record-head p,
.cb-hub-section-head p {
    margin: 6px 0 0;
    color: #8b98bc;
    font-size: 14px;
    line-height: 1.6;
}

.cb-hub-v2-chart-card .cb-hub-v2-card-head,
.cb-hub-v2-activity-card .cb-hub-v2-card-head,
.cb-hub-v2-table-card .cb-hub-v2-card-head,
.cb-hub-v2-form-card .cb-hub-v2-card-head {
    padding-bottom: 18px;
}

.cb-hub-v2-chart-card {
    overflow: hidden;
    min-height: 430px;
}

.cb-hub-v2-chart {
    padding: 0 18px 14px;
}

.cb-hub-v2-chart text {
    fill: #a1afcf;
    font-size: 14px;
    font-family: inherit;
}

.cb-hub-v2-chart-grid line {
    stroke: #ebf0fb;
    stroke-dasharray: 3 8;
}

.cb-hub-v2-chart-metric strong {
    display: block;
    color: #12245b;
    font-size: 22px;
    letter-spacing: -0.04em;
}

.cb-hub-v2-chart-metric small,
.cb-hub-v2-growth {
    color: #12b66f;
    font-weight: 700;
}

.cb-hub-v2-activity-card,
.cb-hub-v2-thread-card {
    min-height: 430px;
}

.cb-hub-v2-activity-list,
.cb-hub-v2-thread-list,
.cb-hub-table {
    display: grid;
    gap: 12px;
    padding: 0 26px 26px;
}

.cb-hub-v2-activity-item,
.cb-hub-v2-thread-item,
.cb-hub-row {
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid #e8eefb;
    background: linear-gradient(180deg, #fdfdff, #f8fbff);
}

.cb-hub-v2-activity-item strong,
.cb-hub-v2-thread-item strong,
.cb-hub-row strong {
    color: #14255b;
}

.cb-hub-v2-activity-item small,
.cb-hub-v2-thread-item small,
.cb-hub-row span,
.cb-hub-v2-empty-inline,
.cb-hub-empty {
    color: #8c99bd;
}

.cb-hub-v2-activity-icon,
.cb-hub-v2-avatar,
.cb-hub-v2-team-avatar {
    box-shadow: 0 14px 26px rgba(98, 86, 255, 0.16);
}

.cb-hub-v2-inline-link {
    margin: 0 26px 26px;
    color: #7d4dff;
    font-weight: 700;
}

.cb-hub-v2-filter-row {
    gap: 10px;
    flex-wrap: wrap;
}

.cb-hub-v2-filter {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #dce5f9;
    background: rgba(255, 255, 255, 0.75);
    color: #61729f;
    font-weight: 700;
}

.cb-hub-v2-filter.is-active {
    border-color: rgba(126, 79, 255, 0.18);
    background: linear-gradient(135deg, #7a46ff, #5c6dff);
    color: #fff;
    box-shadow: 0 18px 32px rgba(103, 71, 255, 0.22);
}

.cb-hub-v2-table-card {
    overflow: hidden;
}

.cb-hub-v2-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cb-hub-v2-table thead th {
    padding: 18px 22px;
    color: #8796bc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-top: 1px solid #edf2fd;
    border-bottom: 1px solid #edf2fd;
    background: rgba(248, 250, 255, 0.92);
}

.cb-hub-v2-table tbody td {
    padding: 20px 22px;
    color: #22325f;
    border-bottom: 1px solid #eef3fb;
    background: rgba(255, 255, 255, 0.76);
}

.cb-hub-v2-table tbody tr:last-child td {
    border-bottom: 0;
}

.cb-hub-v2-row-link {
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.cb-hub-v2-row-link:hover td {
    background: #fbfcff;
}

.cb-hub-v2-row-anchor {
    color: #18295f;
    font-weight: 700;
}

.cb-hub-v2-business,
.cb-hub-v2-person {
    gap: 14px;
}

.cb-hub-v2-business strong,
.cb-hub-v2-person strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    letter-spacing: -0.03em;
}

.cb-hub-v2-business small,
.cb-hub-v2-person small {
    color: #8e9dc0;
}

.cb-hub-v2-avatar {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: linear-gradient(135deg, #7747ff, #5d74ff);
    color: #fff;
    font-weight: 800;
}

.cb-hub-v2-avatar.is-business {
    background: linear-gradient(135deg, #8a4eff, #6b44ff);
}

.cb-hub-v2-pill {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cb-hub-v2-pill.is-plan {
    background: rgba(125, 88, 255, 0.12);
    color: #7658ff;
}

.cb-hub-v2-status {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
}

.cb-hub-v2-status.is-active {
    background: #e9fff4;
    border-color: #9de6c0;
    color: #0ca96a;
}

.cb-hub-v2-status.is-trial {
    background: #fff6df;
    border-color: #ffd277;
    color: #e68d0f;
}

.cb-hub-v2-status.is-suspended {
    background: #fff0f3;
    border-color: #ffbcc7;
    color: #eb4965;
}

.cb-hub-v2-status.is-info {
    background: #edf5ff;
    border-color: #b8d5ff;
    color: #2f73f6;
}

.cb-hub-v2-health {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 96px;
}

.cb-hub-v2-health span {
    width: 58px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1ad07b, #13b768);
    box-shadow: inset 0 0 0 999px rgba(227, 240, 233, 0.6);
}

.cb-hub-v2-health small {
    color: #7688b2;
    font-weight: 700;
}

.cb-hub-v2-primary-button,
.cb-hub-v2-danger-button,
.cb-hub-v2-ghost-button {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cb-hub-v2-primary-button {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #7a44ff, #5d6fff);
    box-shadow: 0 18px 34px rgba(108, 85, 255, 0.26);
}

.cb-hub-v2-primary-button:hover {
    filter: brightness(1.03);
}

.cb-hub-v2-ghost-button {
    border: 1px solid #dde5f7;
    background: rgba(255, 255, 255, 0.86);
    color: #304372;
}

.cb-hub-v2-danger-button {
    border: 1px solid rgba(255, 110, 132, 0.18);
    color: #fff;
    background: linear-gradient(135deg, #ff6582, #f04f7a);
    box-shadow: 0 18px 30px rgba(240, 79, 122, 0.22);
}

.cb-hub-v2-form-card,
.cb-card.cb-hub-record-card {
    overflow: hidden;
    padding-bottom: 26px;
}

.cb-hub-v2-form-grid,
.cb-hub-form-shell {
    display: grid;
    gap: 16px;
    padding: 0 26px;
}

.cb-hub-v2-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-hub-v2-form-grid label,
.cb-hub-field {
    display: grid;
    gap: 8px;
}

.cb-hub-v2-form-grid label span,
.cb-hub-field span {
    color: #4f628e;
    font-size: 14px;
    font-weight: 700;
}

.cb-hub-v2-form-grid input,
.cb-hub-v2-form-grid select,
.cb-hub-v2-form-grid textarea,
.cb-hub-form-shell input,
.cb-hub-form-shell select,
.cb-hub-form-shell textarea {
    min-height: 52px;
    border: 1px solid #dbe5f8;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 0 16px;
    color: #1e2e5a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cb-hub-v2-form-grid textarea,
.cb-hub-form-shell textarea {
    min-height: 132px;
    padding-top: 14px;
    padding-bottom: 14px;
    resize: vertical;
}

.cb-hub-v2-form-grid .is-wide,
.cb-hub-field-grid,
.cb-hub-field.is-wide {
    grid-column: 1 / -1;
}

.cb-hub-v2-form-actions,
.cb-hub-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 26px;
}

.cb-hub-v2-form-actions.is-spread {
    justify-content: space-between;
}

.cb-hub-v2-ticket-focus-head {
    gap: 18px;
}

.cb-hub-v2-ticket-focus-copy h1 {
    font-size: clamp(36px, 4vw, 52px);
    letter-spacing: -0.05em;
}

.cb-hub-v2-back-link {
    color: #6578a8;
    font-weight: 700;
}

.cb-hub-v2-ticket-layout {
    gap: 18px;
    align-items: start;
}

.cb-hub-v2-ticket-details-card,
.cb-hub-v2-thread-card {
    min-height: 100%;
}

.cb-hub-v2-thread-list.is-scrollable {
    max-height: 560px;
    overflow-y: auto;
}

.cb-hub-v2-thread-list.is-scrollable::-webkit-scrollbar {
    width: 8px;
}

.cb-hub-v2-thread-list.is-scrollable::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d5def2;
}

.cb-hub-v2-support-list-card,
.cb-hub-v2-business-editor-card {
    min-height: 100%;
}

.cb-hub-v2-empty-inline {
    padding: 18px 4px;
}

.cb-hub-v2-team-grid {
    gap: 18px;
}

.cb-hub-v2-team-card {
    position: relative;
    overflow: hidden;
    min-height: 226px;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(220, 229, 248, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98));
    box-shadow: 0 22px 46px rgba(22, 37, 92, 0.08);
}

.cb-hub-v2-team-card::after {
    content: "";
    position: absolute;
    inset: auto -22px -26px auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(123, 77, 255, 0.12), transparent 68%);
}

.cb-hub-v2-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #7a44ff, #5e73ff);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.cb-hub-v2-team-card h3 {
    color: #15255d;
    font-size: 18px;
    letter-spacing: -0.03em;
}

.cb-hub-v2-team-card p,
.cb-hub-v2-team-tags small,
.cb-hub-v2-team-meta span {
    color: #8897bd;
}

.cb-hub-v2-incident-banner {
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid #ffd37f;
    background: linear-gradient(180deg, #fff8e8, #fff2cb);
    box-shadow: 0 18px 36px rgba(255, 196, 44, 0.12);
}

.cb-hub-v2-status-grid {
    gap: 18px;
}

.cb-hub-v2-status-card {
    padding: 22px;
    border-radius: 26px;
    border: 1px solid rgba(220, 229, 248, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.99));
    box-shadow: 0 20px 42px rgba(20, 39, 91, 0.08);
}

.cb-hub-v2-status-head strong.is-ok {
    color: #10b86b;
}

.cb-hub-v2-status-head strong.is-warn {
    color: #ef9308;
}

.cb-hub-v2-incident-row {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid #ffe0a6;
    background: linear-gradient(180deg, #fffaf0, #fff5df);
}

.cb-hub-v2-page-business .cb-hub-v2-table-card td:first-child,
.cb-hub-v2-page-business .cb-hub-v2-table-card th:first-child {
    padding-left: 26px;
}

@media (max-width: 1200px) {
    .cb-hub-v2-topbar {
        grid-template-columns: 1fr;
        justify-items: stretch;
        gap: 14px;
        padding: 16px 18px;
        min-height: auto;
    }

    .cb-hub-v2-topbar-right {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .cb-hub-v2-dashboard-grid,
    .cb-hub-v2-dashboard-grid.is-business-detail,
    .cb-hub-v2-split,
    .cb-hub-v2-split.is-business-detail,
    .cb-hub-v2-ticket-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .cb-hub-v2-shell {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-sidebar {
        position: relative;
        height: auto;
        min-height: auto;
    }

    .cb-hub-v2-main {
        padding: 14px;
    }

    .cb-hub-v2-page-head.is-spread {
        grid-template-columns: 1fr;
    }

    .cb-hub-v2-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Final Hub Figma shell overrides */
.cb-hub-shell-body .cb-hub-v2-shell {
    display: grid;
    grid-template-columns: 231px minmax(0, 1fr);
    min-height: 100vh;
    background: #f5f3ff;
}

.cb-hub-shell-body .cb-hub-v2-sidebar {
    position: sticky;
    top: 0;
    width: 231px;
    height: 100vh;
    padding: 0;
    border-radius: 0;
    border: 0;
    border-right: 1px solid #ece9f8;
    background: #fff;
    box-shadow: none;
    overflow: auto;
}

.cb-hub-shell-body .cb-hub-v2-sidebar::before {
    display: none;
}

.cb-hub-shell-body .cb-hub-v2-sidebar > * {
    position: static;
    z-index: auto;
}

.cb-hub-shell-body .cb-hub-v2-main {
    min-width: 0;
}

.cb-hub-shell-body .cb-hub-v2-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 52px;
    padding: 0 18px 0 20px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #ece9f8;
    background: #fff;
    box-shadow: none;
}

.cb-hub-shell-body .cb-hub-v2-content {
    padding: 28px;
    max-width: none;
}

.cb-hub-shell-body .cb-hub-v2-brand {
    min-height: 52px;
    border-radius: 0;
    border-bottom: 1px solid #ece9f8;
}

.cb-hub-shell-body .cb-hub-v2-nav-link {
    min-height: 35px;
    border-radius: 18px;
}

.cb-hub-shell-body .cb-hub-v2-nav-link.is-active {
    box-shadow: none;
}

.cb-hub-shell-body .cb-hub-v2-topbar-user,
.cb-hub-shell-body .cb-hub-v2-date {
    display: none;
}

@media (max-width: 1000px) {
    .cb-hub-shell-body .cb-hub-v2-shell {
        grid-template-columns: 1fr;
    }

    .cb-hub-shell-body .cb-hub-v2-sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }
}

/* Hub Figma hard reset: overrides older Hub refresh rules above */
body.cb-hub-shell-body {
    background: #f5f3ff !important;
    color: #071229;
}

body.cb-hub-shell-body .cb-hub-v2-shell {
    display: grid !important;
    grid-template-columns: 231px minmax(0, 1fr) !important;
    min-height: 100vh;
    background: #f5f3ff !important;
}

body.cb-hub-shell-body .cb-hub-v2-main {
    min-width: 0;
    padding: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 231px !important;
    height: 100vh !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #ece9f8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-y: auto;
    scrollbar-width: none;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar::-webkit-scrollbar {
    display: none;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar::before {
    display: none !important;
    content: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar > * {
    position: static !important;
    z-index: auto !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand {
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #ece9f8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-mark {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #6f4df6 !important;
    color: #fff !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-mark::after {
    content: "✓";
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}

body.cb-hub-shell-body .cb-hub-v2-brand-mark img {
    display: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-copy strong {
    color: #071229 !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-copy small {
    color: #9298b2 !important;
    font-size: 10px !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav {
    display: block !important;
    padding: 17px 8px 10px !important;
    gap: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-group {
    display: block !important;
    margin: 0 0 20px !important;
    gap: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-label {
    display: block !important;
    padding: 0 8px 8px !important;
    color: #9aa0b6 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-link {
    height: 35px !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #536079 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transform: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-link:hover,
body.cb-hub-shell-body .cb-hub-v2-nav-link.is-active {
    background: #eee9ff !important;
    color: #6f4df6 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-icon {
    color: currentColor !important;
    opacity: 1 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar-footer {
    border-top: 1px solid #ece9f8 !important;
    padding: 15px 16px !important;
    background: #fff !important;
    display: block !important;
}

body.cb-hub-shell-body .cb-hub-v2-account {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-account-avatar,
body.cb-hub-shell-body .cb-hub-v2-topbar-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #ede8ff !important;
    color: #6f4df6 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.cb-hub-shell-body .cb-hub-v2-account-copy strong {
    color: #071229 !important;
    font-size: 13px !important;
}

body.cb-hub-shell-body .cb-hub-v2-account-copy small,
body.cb-hub-shell-body .cb-hub-v2-collapse {
    color: #9298b2 !important;
    font-size: 11px !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 18px 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #ece9f8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

body.cb-hub-shell-body .cb-hub-v2-breadcrumb {
    color: #9298b2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

body.cb-hub-shell-body .cb-hub-v2-breadcrumb strong {
    color: #071229 !important;
    font-weight: 800 !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    min-width: 0;
}

body.cb-hub-shell-body .cb-hub-v2-search {
    width: 222px !important;
    height: 39px !important;
    min-height: 39px !important;
    border: 1px solid #ddd8f3 !important;
    border-radius: 20px !important;
    background: #f8f7ff !important;
    padding: 0 12px !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-search input {
    min-width: 0 !important;
    font-size: 13px !important;
    color: #071229 !important;
}

body.cb-hub-shell-body .cb-hub-v2-search kbd {
    flex: none;
    color: #9298b2 !important;
}

body.cb-hub-shell-body .cb-hub-v2-quick-action {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 17px !important;
    padding: 0 16px !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-operational {
    white-space: nowrap;
}

body.cb-hub-shell-body .cb-hub-v2-content {
    padding: 28px !important;
}

body.cb-hub-shell-body .cb-hub-page-title {
    margin-top: 20px;
}

@media (max-width: 1000px) {
    body.cb-hub-shell-body .cb-hub-v2-shell {
        grid-template-columns: 1fr !important;
    }

    body.cb-hub-shell-body .cb-hub-v2-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* App modules */
.cb-module-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-module-grid-analytics {
    align-items: start;
}

.cb-module-card-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.cb-module-form-card,
.cb-module-summary-card,
.cb-module-table-card {
    padding: 28px;
}

.cb-module-form-card .cb-form-stack,
.cb-module-inline-form {
    margin-top: 12px;
}

.cb-module-table {
    display: grid;
    gap: 0;
}

.cb-module-table .cb-simple-table-head,
.cb-module-table-row {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(100px, 1fr)) minmax(170px, 1.1fr);
    align-items: center;
}

.cb-module-table-row {
    padding: 18px 0;
    border-top: 1px solid #eef2fb;
}

.cb-module-table-row strong {
    color: #14245b;
}

.cb-module-table-payroll .cb-simple-table-head,
.cb-module-table-payroll .cb-module-table-row,
.cb-module-table-compliance .cb-simple-table-head,
.cb-module-table-compliance .cb-module-table-row {
    grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(90px, 1fr)) minmax(170px, 1.1fr);
}

.cb-module-table-compact .cb-simple-table-head,
.cb-module-table-compact .cb-module-table-row {
    grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(120px, 1fr));
}

.cb-module-trend-list {
    display: grid;
    gap: 14px;
}

.cb-module-trend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #f7f9ff;
    border: 1px solid #e8eefc;
}

.cb-module-trend-item span {
    color: #8391b7;
}

.cb-inline-filter-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-inline-filter-form select {
    min-width: 180px;
}

.cb-department-card-live {
    display: grid;
    gap: 18px;
}

.cb-department-card-live .cb-chip-grid {
    margin-top: 0;
}

.cb-module-summary-card .cb-dashboard-kpi-strips {
    margin-top: 10px;
}

.cb-module-table-row .cb-inline-actions {
    justify-content: flex-end;
}

.cb-module-shell .cb-empty-state.compact {
    min-height: 0;
    padding: 26px;
}

.cb-timeoff-page {
    max-width: 1180px;
    margin-inline: auto;
}

.cb-timeoff-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cb-timeoff-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 18px;
}

.cb-timeoff-panel {
    display: grid;
    align-content: start;
    gap: 12px;
}

.cb-timeoff-panel .cb-section-heading p,
.cb-timeoff-table-card .cb-section-heading p {
    margin: 4px 0 0;
    color: #8c95b2;
    font-size: 13px;
}

.cb-timeoff-request-row,
.cb-timeoff-upcoming-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #eef1f8;
}

.cb-timeoff-request-row:first-of-type,
.cb-timeoff-upcoming-row:first-of-type {
    border-top: 0;
}

.cb-timeoff-upcoming-row {
    justify-content: flex-start;
}

.cb-timeoff-upcoming-row > div {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-timeoff-upcoming-row strong {
    color: #111a44;
    font-size: 14px;
}

.cb-timeoff-upcoming-row span:not(.cb-person-pill):not(.cb-status-badge) {
    color: #8c95b2;
    font-size: 12px;
}

.cb-timeoff-table-card {
    overflow-x: auto;
}

.cb-timeoff-table {
    min-width: 980px;
}

.cb-timeoff-table .cb-simple-table-head,
.cb-timeoff-row {
    grid-template-columns: minmax(230px, 1.35fr) 0.7fr 0.75fr 0.65fr minmax(150px, 0.9fr) 0.9fr 0.85fr;
}

.cb-timeoff-row {
    align-items: center;
    border: 0;
    border-top: 1px solid #eef2fb;
    border-radius: 0;
    background: transparent;
}

.cb-timeoff-balance {
    display: grid;
    gap: 7px;
}

.cb-timeoff-balance strong {
    color: #111a44;
    font-size: 13px;
}

.cb-timeoff-balance span {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef1f7;
}

.cb-timeoff-balance i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #6a55f6 0%, #16c784 100%);
}

.cb-timeoff-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-timeoff-status small {
    color: #8c95b2;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .cb-module-grid,
    .cb-module-grid-analytics {
        grid-template-columns: 1fr;
    }

    .cb-timeoff-kpis,
    .cb-timeoff-grid {
        grid-template-columns: 1fr;
    }

    .cb-module-table .cb-simple-table-head,
    .cb-module-table-row {
        grid-template-columns: 1.8fr repeat(3, minmax(90px, 1fr));
    }

    .cb-module-table .cb-simple-table-head span:nth-child(5),
    .cb-module-table .cb-simple-table-head span:nth-child(6),
    .cb-module-table .cb-simple-table-head span:nth-child(7),
    .cb-module-table-row > span:nth-child(5),
    .cb-module-table-row > span:nth-child(6),
    .cb-module-table-row > div:nth-child(7) {
        display: none;
    }

    .cb-module-table-compact .cb-simple-table-head,
    .cb-module-table-compact .cb-module-table-row {
        grid-template-columns: 1.5fr repeat(2, minmax(100px, 1fr));
    }
}

@media (max-width: 760px) {
    .cb-module-card-grid {
        grid-template-columns: 1fr;
    }

    .cb-clock-edit-form .cb-form-grid,
    .cb-clock-break-row {
        grid-template-columns: 1fr;
    }

    .cb-module-form-card,
    .cb-module-summary-card,
    .cb-module-table-card {
        padding: 22px;
    }

    .cb-module-table .cb-simple-table-head {
        display: none;
    }

    .cb-module-table-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .cb-module-table-row .cb-inline-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1180px) {
    .cb-timeoff-table .cb-simple-table-head {
        display: grid;
    }

    .cb-timeoff-table .cb-simple-table-head span:nth-child(5),
    .cb-timeoff-table .cb-simple-table-head span:nth-child(6),
    .cb-timeoff-table .cb-simple-table-head span:nth-child(7),
    .cb-timeoff-row > span:nth-child(6) {
        display: block;
    }

    .cb-timeoff-row {
        grid-template-columns: minmax(230px, 1.35fr) 0.7fr 0.75fr 0.65fr minmax(150px, 0.9fr) 0.9fr 0.85fr;
    }

    .cb-timeoff-row > div:nth-child(7) {
        display: flex;
    }
}
 .cb-nav-link.is-locked {
    position: relative;
}

.cb-nav-lock {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(109, 78, 255, 0.8);
}

.cb-nav-lock svg {
    width: 0.85rem;
    height: 0.85rem;
}

.cb-feature-lock-card {
    padding: 2rem;
}

.cb-feature-lock-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.cb-feature-lock-copy h1 {
    margin: 1rem 0 0.75rem;
}

.cb-feature-lock-copy p {
    margin: 0 0 1rem;
    max-width: 44rem;
}

.cb-feature-lock-list {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
    color: var(--cb-ink-muted, #6d7ca8);
}

.cb-feature-lock-list li + li {
    margin-top: 0.45rem;
}

.cb-feature-lock-panel {
    padding: 1.25rem;
    border: 1px solid rgba(115, 131, 178, 0.14);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(244, 247, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.cb-feature-lock-panel strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--cb-ink, #18224a);
}

.cb-feature-lock-panel p {
    margin: 0 0 1rem;
    color: var(--cb-ink-muted, #6d7ca8);
}

.cb-feature-lock-panel p:last-child {
    margin-bottom: 0;
}

.cb-hub-v2-checkbox {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 3.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(115, 131, 178, 0.18);
    border-radius: 1rem;
    background: rgba(248, 250, 255, 0.88);
}

.cb-hub-v2-checkbox input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #6d4eff;
}

.cb-hub-v2-checkbox span {
    margin: 0;
    color: var(--cb-ink, #18224a);
    font-size: 0.96rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .cb-feature-lock-grid {
        grid-template-columns: 1fr;
    }
}

.cb-support-ticket.is-focused {
    border-color: rgba(116, 93, 255, 0.34);
    box-shadow: 0 24px 48px rgba(109, 78, 255, 0.12);
}

.cb-support-feedback-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #edf1fa;
}

.cb-support-feedback-form {
    display: grid;
    gap: 14px;
}

.cb-support-feedback-form.inline {
    margin-top: 16px;
}

.cb-support-feedback-form label {
    display: grid;
    gap: 8px;
}

.cb-support-feedback-form label span {
    font-size: 13px;
    font-weight: 700;
    color: #56658a;
}

.cb-support-feedback-form textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 16px;
    background: #fbfbfe;
    color: var(--cb-text);
    resize: vertical;
}

.cb-support-rating-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cb-support-rating-row.compact {
    gap: 8px;
}

.cb-support-rating-choice {
    position: relative;
}

.cb-support-rating-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cb-support-rating-choice span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #dce4f5;
    border-radius: 999px;
    background: #fff;
    color: #5a688e;
    font-weight: 700;
    transition: 0.18s ease;
}

.cb-support-rating-row.compact .cb-support-rating-choice span {
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.9rem;
}

.cb-support-rating-choice input:checked + span {
    border-color: rgba(109, 78, 255, 0.4);
    background: rgba(109, 78, 255, 0.12);
    color: #5f38f3;
    box-shadow: 0 10px 20px rgba(109, 78, 255, 0.12);
}

.cb-support-feedback-thanks {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid #dce8f8;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcff, #f5f8ff);
}

.cb-support-feedback-thanks strong {
    color: #17214a;
}

.cb-support-feedback-thanks p {
    margin: 0;
    color: #7180a7;
    line-height: 1.65;
}

.cb-support-feedback-comment {
    display: grid;
    gap: 6px;
}

.cb-support-feedback-comment span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #93a0bf;
}

.cb-support-feedback-shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px;
}

.cb-support-feedback-card {
    padding: 28px;
}

.cb-hub-v2-ticket-summary-card {
    display: grid;
    gap: 18px;
}

.cb-hub-v2-ticket-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-hub-v2-ticket-stat {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #e8eefb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fdfdff, #f7faff);
}

.cb-hub-v2-ticket-stat span {
    color: #93a0c2;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cb-hub-v2-ticket-stat strong {
    color: #16275c;
    font-size: 1rem;
    line-height: 1.4;
}

.cb-hub-v2-form-note {
    margin: 0;
    color: #8b99bc;
    font-size: 0.93rem;
    line-height: 1.6;
}

@media (max-width: 960px) {
    .cb-hub-v2-ticket-stat-grid {
        grid-template-columns: 1fr;
    }

    .cb-support-rating-row {
        gap: 8px;
    }

    .cb-support-rating-choice span {
        min-width: 40px;
        min-height: 40px;
        padding: 0 12px;
    }
}

/* Hub Figma repair pass: keep the internal Hub shell from inheriting older app chrome styles. */
body.cb-hub-shell-body {
    margin: 0 !important;
    background: #f5f3ff !important;
    color: #071229 !important;
}

body.cb-hub-shell-body .cb-hub-v2-shell {
    display: grid !important;
    grid-template-columns: 231px minmax(0, 1fr) !important;
    min-height: 100vh !important;
    background: #f5f3ff !important;
}

body.cb-hub-shell-body .cb-hub-v2-main {
    min-width: 0 !important;
    padding: 0 !important;
    background: #f5f3ff !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 231px !important;
    height: 100vh !important;
    padding: 0 !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-right: 1px solid #eceaf7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #536079 !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar::before {
    display: none !important;
    content: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar::-webkit-scrollbar {
    width: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar > * {
    position: static !important;
    z-index: auto !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    height: 52px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eceaf7 !important;
    border-radius: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-mark {
    position: relative !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 999px !important;
    background: #6f4df6 !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-mark img {
    display: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-mark::after {
    content: "✓" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-copy,
body.cb-hub-shell-body .cb-hub-v2-brand-copy strong,
body.cb-hub-shell-body .cb-hub-v2-brand-copy small,
body.cb-hub-shell-body .cb-hub-v2-nav-link span {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-copy strong {
    color: #071229 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
}

body.cb-hub-shell-body .cb-hub-v2-brand-copy small {
    margin-top: 2px !important;
    color: #8d96ad !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav {
    display: grid !important;
    gap: 10px !important;
    padding: 21px 7px 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-section {
    display: grid !important;
    gap: 6px !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-heading {
    margin: 9px 13px 5px !important;
    color: #9aa3b9 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 35px !important;
    padding: 0 14px !important;
    color: #536079 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transform: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-link svg {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
    stroke-width: 1.8 !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-link span {
    color: inherit !important;
}

body.cb-hub-shell-body .cb-hub-v2-nav-link:hover,
body.cb-hub-shell-body .cb-hub-v2-nav-link.is-active {
    color: #6f4df6 !important;
    background: #eee9ff !important;
}

body.cb-hub-shell-body .cb-hub-v2-sidebar-footer {
    margin-top: auto !important;
    padding: 17px 16px 14px !important;
    border-top: 1px solid #eceaf7 !important;
    background: #ffffff !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    height: 52px !important;
    padding: 0 18px 0 27px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #eceaf7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-breadcrumb {
    min-width: 170px !important;
    color: #8f98af !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

body.cb-hub-shell-body .cb-hub-v2-breadcrumb strong {
    color: #071229 !important;
}

body.cb-hub-shell-body .cb-hub-v2-search {
    width: 240px !important;
    height: 39px !important;
    padding: 0 13px !important;
    background: #f8f7ff !important;
    border: 1px solid #ddd8f3 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-search input {
    min-width: 0 !important;
    color: #071229 !important;
}

body.cb-hub-shell-body .cb-hub-v2-search kbd {
    min-width: 32px !important;
    height: 20px !important;
    padding: 0 6px !important;
    background: #ffffff !important;
    border: 1px solid #e6e2f7 !important;
    border-radius: 999px !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar-right {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-icon-button {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-operational {
    color: #008f69 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar-user {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar-copy,
body.cb-hub-shell-body .cb-hub-v2-topbar-user svg {
    display: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-topbar-avatar {
    width: 36px !important;
    height: 36px !important;
    background: #6f4df6 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 30px rgba(111, 77, 246, 0.34) !important;
}

body.cb-hub-shell-body .cb-hub-v2-content {
    padding: 28px !important;
}

body.cb-hub-shell-body .cb-hub-page-title {
    margin: 0 0 25px !important;
}

@media (max-width: 980px) {
    body.cb-hub-shell-body .cb-hub-v2-shell {
        grid-template-columns: 1fr !important;
    }

    body.cb-hub-shell-body .cb-hub-v2-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    body.cb-hub-shell-body .cb-hub-v2-topbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 52px !important;
        padding: 10px 16px !important;
    }
}

/* Hub login redesign */
body.cb-hub-v2-login-body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(111, 77, 246, 0.12), transparent 28%),
        linear-gradient(145deg, #f7f5ff 0%, #f8fbff 52%, #f0fff8 100%) !important;
    color: #071229 !important;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 100vh !important;
    gap: 0 !important;
    padding: 0 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 70px !important;
    padding: 0 32px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #071229 !important;
    text-decoration: none !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-logo {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 999px !important;
    background: #6f4df6 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 30px rgba(111, 77, 246, 0.28) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-logo img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-brand-copy {
    display: grid !important;
    gap: 1px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-brand-copy strong {
    color: #071229 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-brand-copy small {
    color: #8d96ad !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #e6e2f7 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #536079 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 30px rgba(26, 21, 59, 0.05) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-status span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #00c58e !important;
    box-shadow: 0 0 0 4px rgba(0, 197, 142, 0.12) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 510px) minmax(380px, 460px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 70px !important;
    width: min(1120px, calc(100vw - 48px)) !important;
    min-height: calc(100vh - 70px) !important;
    margin: 0 auto !important;
    padding: 28px 0 56px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel {
    display: grid !important;
    align-content: center !important;
    gap: 28px !important;
    min-height: auto !important;
    max-width: none !important;
    color: #071229 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-copy {
    display: grid !important;
    gap: 18px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-chip,
body.cb-hub-v2-login-body .cb-hub-v2-login-card-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    min-height: 31px !important;
    padding: 0 12px !important;
    border: 1px solid #e7e1ff !important;
    border-radius: 999px !important;
    background: #f0ecff !important;
    color: #6f4df6 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-chip svg,
body.cb-hub-v2-login-body .cb-hub-v2-login-card-chip svg {
    width: 14px !important;
    height: 14px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-copy h1 {
    max-width: 500px !important;
    margin: 0 !important;
    color: #071229 !important;
    font-size: clamp(42px, 4.6vw, 64px) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-copy p {
    max-width: 470px !important;
    margin: 0 !important;
    color: #7e89a5 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card {
    display: grid !important;
    gap: 20px !important;
    max-width: 470px !important;
    padding: 22px !important;
    border: 1px solid #e6e2f7 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 24px 60px rgba(26, 21, 59, 0.08) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card-head > span {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    background: #6f4df6 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(111, 77, 246, 0.22) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card-head svg {
    width: 19px !important;
    height: 19px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card-head strong {
    display: block !important;
    color: #071229 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card-head small {
    display: block !important;
    margin-top: 3px !important;
    color: #8d96ad !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-checklist {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-checklist span {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #f7f6ff !important;
    color: #536079 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-checklist svg {
    width: 13px !important;
    height: 13px !important;
    color: #00a879 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-footnote {
    margin: 0 !important;
    padding: 0 !important;
    color: #8d96ad !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-card {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #071229 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-alerts {
    margin: 0 0 14px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-alerts .cb-flash {
    margin: 0 !important;
    border-radius: 16px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-card-inner {
    display: grid !important;
    gap: 0 !important;
    padding: 34px !important;
    border: 1px solid #e4e0f5 !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 28px 70px rgba(26, 21, 59, 0.12) !important;
    backdrop-filter: blur(18px) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-card h2 {
    margin: 18px 0 8px !important;
    color: #071229 !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-card p {
    margin: 0 0 8px !important;
    color: #7e89a5 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-field {
    display: grid !important;
    gap: 9px !important;
    margin-top: 18px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-field > span,
body.cb-hub-v2-login-body .cb-hub-v2-login-field-row span {
    color: #536079 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-field input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 15px !important;
    border: 1px solid #ddd8f3 !important;
    border-radius: 16px !important;
    background: #fbfbff !important;
    color: #071229 !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: none !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-field input:focus {
    border-color: #8b6cf8 !important;
    box-shadow: 0 0 0 4px rgba(111, 77, 246, 0.12) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-password {
    position: relative !important;
    display: block !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-password input {
    padding-right: 46px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-password i,
body.cb-hub-v2-login-body .cb-hub-v2-login-password svg {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    width: 17px !important;
    height: 17px !important;
    color: #9aa3b9 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: 50px !important;
    margin-top: 24px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #6f4df6 !important;
    color: #ffffff !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 18px 34px rgba(111, 77, 246, 0.28) !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-submit svg {
    width: 16px !important;
    height: 16px !important;
}

body.cb-hub-v2-login-body .cb-hub-v2-login-card small {
    display: block !important;
    margin-top: 20px !important;
    color: #8d96ad !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

@media (max-width: 980px) {
    body.cb-hub-v2-login-body .cb-hub-v2-login-header {
        padding: 0 20px !important;
    }

    body.cb-hub-v2-login-body .cb-hub-v2-login-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        width: min(620px, calc(100vw - 36px)) !important;
        padding: 22px 0 42px !important;
    }

    body.cb-hub-v2-login-body .cb-hub-v2-login-panel {
        text-align: left !important;
    }
}

@media (max-width: 640px) {
    body.cb-hub-v2-login-body .cb-hub-v2-login-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 18px !important;
    }

    body.cb-hub-v2-login-body .cb-hub-v2-login-grid {
        width: calc(100vw - 28px) !important;
        padding-top: 8px !important;
    }

    body.cb-hub-v2-login-body .cb-hub-v2-login-copy h1 {
        font-size: 36px !important;
    }

    body.cb-hub-v2-login-body .cb-hub-v2-login-checklist {
        grid-template-columns: 1fr !important;
    }

    body.cb-hub-v2-login-body .cb-hub-v2-login-card-inner,
    body.cb-hub-v2-login-body .cb-hub-v2-login-panel-card {
        padding: 22px !important;
        border-radius: 20px !important;
    }
}

/* Hub operations polish */
body.cb-hub-shell-body .cb-hub-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

body.cb-hub-shell-body .cb-hub-record-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(420px, 1.25fr);
    gap: 16px;
    align-items: start;
}

body.cb-hub-shell-body .cb-hub-panel {
    padding: 20px;
    border: 1px solid #e8e4f7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(26, 21, 59, 0.06);
}

body.cb-hub-shell-body .cb-hub-record-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.cb-hub-shell-body .cb-hub-record-head > div {
    min-width: 0;
    flex: 1;
}

body.cb-hub-shell-body .cb-hub-record-head strong {
    display: block;
    color: #071229;
    font-size: 18px;
    font-weight: 900;
}

body.cb-hub-shell-body .cb-hub-record-head p,
body.cb-hub-shell-body .cb-hub-card-heading p,
body.cb-hub-shell-body .cb-hub-modal-copy {
    margin: 4px 0 0;
    color: #8d96ad;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

body.cb-hub-shell-body .cb-hub-record-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 16px;
    background: #eee9ff;
    color: #6f4df6;
    font-size: 14px;
    font-weight: 900;
}

body.cb-hub-shell-body .cb-hub-record-facts {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
}

body.cb-hub-shell-body .cb-hub-record-facts div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid #f0edf8;
}

body.cb-hub-shell-body .cb-hub-record-facts dt {
    color: #9aa3b9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.cb-hub-shell-body .cb-hub-record-facts dd {
    margin: 0;
    color: #071229;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

body.cb-hub-shell-body .cb-hub-card-heading {
    margin-bottom: 18px;
}

body.cb-hub-shell-body .cb-hub-card-heading h3,
body.cb-hub-shell-body .cb-hub-form-modal h3 {
    margin: 0;
    color: #071229;
    font-size: 17px;
    font-weight: 900;
}

body.cb-hub-shell-body .cb-hub-security-check {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    min-height: auto;
    padding: 12px 14px;
    border: 1px solid #e8e4f7;
    border-radius: 14px;
    background: #fbfbff;
    color: #536079;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

body.cb-hub-shell-body .cb-hub-security-check input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #6f4df6;
}

body.cb-hub-shell-body .cb-hub-form-modal {
    max-width: 560px !important;
    padding: 24px !important;
    border: 1px solid #e8e4f7 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 80px rgba(26, 21, 59, 0.2) !important;
}

body.cb-hub-shell-body .cb-hub-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

body.cb-hub-shell-body .cb-hub-stat-strip article {
    padding: 18px 20px;
    border: 1px solid #e8e4f7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(26, 21, 59, 0.06);
}

body.cb-hub-shell-body .cb-hub-stat-strip span {
    display: block;
    color: #8d96ad;
    font-size: 13px;
    font-weight: 800;
}

body.cb-hub-shell-body .cb-hub-stat-strip strong {
    display: block;
    margin-top: 8px;
    color: #071229;
    font-size: 26px;
    font-weight: 900;
}

body.cb-hub-shell-body .cb-hub-announcement-cell {
    display: grid;
    gap: 5px;
}

body.cb-hub-shell-body .cb-hub-announcement-cell strong {
    color: #071229;
    font-weight: 900;
}

body.cb-hub-shell-body .cb-hub-announcement-cell small,
body.cb-hub-shell-body .cb-hub-muted-line {
    display: block;
    color: #8d96ad;
    font-size: 12px;
    font-weight: 700;
}

body.cb-hub-shell-body .cb-hub-empty-row {
    padding: 26px;
    color: #8d96ad;
    text-align: center;
    font-weight: 800;
}

body.cb-hub-shell-body .cb-hub-context-code {
    display: block;
    max-width: 520px;
    overflow: hidden;
    color: #536079;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.cb-hub-shell-body .cb-hub-role-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

body.cb-hub-shell-body .cb-hub-role-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eeeaf8;
    border-radius: 14px;
    color: #071229;
    text-decoration: none;
}

body.cb-hub-shell-body .cb-hub-role-list strong {
    font-size: 13px;
    font-weight: 900;
}

body.cb-hub-shell-body .cb-hub-role-list span {
    color: #8d96ad;
    font-size: 12px;
    font-weight: 700;
}

body.cb-hub-shell-body .cb-hub-v2-page,
body.cb-hub-shell-body .cb-hub-v2-page-business {
    padding: 0 !important;
}

body.cb-hub-shell-body .cb-hub-v2-page-head,
body.cb-hub-shell-body .cb-hub-v2-dashboard-grid,
body.cb-hub-shell-body .cb-hub-v2-split,
body.cb-hub-shell-body .cb-hub-v2-stat-grid,
body.cb-hub-shell-body .cb-hub-v2-table-card {
    max-width: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-form-card,
body.cb-hub-shell-body .cb-hub-v2-table-card,
body.cb-hub-shell-body .cb-hub-v2-stat-card,
body.cb-hub-shell-body .cb-hub-v2-thread-item {
    border-color: #e8e4f7 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(26, 21, 59, 0.06) !important;
}

body.cb-hub-shell-body .cb-hub-v2-primary-button,
body.cb-hub-shell-body .cb-hub-v2-danger-button,
body.cb-hub-shell-body .cb-hub-v2-ghost-button {
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-primary-button {
    background: #6f4df6 !important;
    color: #ffffff !important;
}

body.cb-hub-shell-body .cb-hub-v2-ghost-button {
    background: #ffffff !important;
    color: #536079 !important;
    border: 1px solid #e8e4f7 !important;
}

body.cb-hub-shell-body .cb-hub-v2-collapse {
    color: #536079 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.cb-hub-shell-body .cb-hub-v2-collapse:hover {
    color: #6f4df6 !important;
}

@media (max-width: 980px) {
    body.cb-hub-shell-body .cb-hub-record-grid,
    body.cb-hub-shell-body .cb-hub-stat-strip {
        grid-template-columns: 1fr;
    }

    body.cb-hub-shell-body .cb-hub-action-row {
        justify-content: flex-start;
    }
}

/* Settings control centre v3 */
.cb-settings-v3,
.cb-settings-v3 * {
    box-sizing: border-box;
}

.cb-settings-v3 {
    --settings-ink: #11183f;
    --settings-muted: #7f89aa;
    --settings-line: #e3e7f1;
    --settings-soft: #f6f7fb;
    --settings-purple: #704cf6;
    display: grid;
    gap: 20px;
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
    padding: 32px 0 64px;
    color: var(--settings-ink);
}

.cb-settings-v3-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.cb-settings-v3-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--settings-purple);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cb-settings-v3-page-head h1 {
    margin: 0;
    color: var(--settings-ink);
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0;
}

.cb-settings-v3-page-head p {
    margin: 7px 0 0;
    color: var(--settings-muted);
    font-size: 14px;
    line-height: 1.5;
}

.cb-settings-v3-context {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    padding: 9px 11px;
    border: 1px solid var(--settings-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 31, 65, 0.05);
}

.cb-settings-v3-avatar,
.cb-settings-v3-profile-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: var(--settings-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.cb-settings-v3-context > span:nth-child(2) {
    display: grid;
    min-width: 0;
    margin-right: auto;
}

.cb-settings-v3-context strong,
.cb-settings-v3-context small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-context strong {
    color: var(--settings-ink);
    font-size: 13px;
}

.cb-settings-v3-context small {
    margin-top: 2px;
    color: var(--settings-muted);
    font-size: 11px;
}

.cb-settings-v3-tabs {
    display: flex;
    gap: 8px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--settings-line);
    border-radius: 8px;
    background: #fff;
    scrollbar-width: none;
}

.cb-settings-v3-tabs::-webkit-scrollbar {
    display: none;
}

.cb-settings-v3-tab {
    display: flex;
    flex: 1 0 176px;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #59637f;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cb-settings-v3-tab:hover {
    border-color: #ddd6ff;
    background: #faf9ff;
    color: var(--settings-ink);
}

.cb-settings-v3-tab.is-active {
    border-color: #d9d0ff;
    background: #f1edff;
    color: #5f3fe9;
}

.cb-settings-v3-tab-icon {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 7px;
    background: #f1f2f7;
}

.cb-settings-v3-tab.is-active .cb-settings-v3-tab-icon {
    background: #fff;
}

.cb-settings-v3-tab-icon svg {
    width: 16px;
    height: 16px;
}

.cb-settings-v3-tab > span:last-child {
    display: grid;
    min-width: 0;
}

.cb-settings-v3-tab strong {
    font-size: 13px;
    line-height: 1.2;
}

.cb-settings-v3-tab small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--settings-muted);
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-surface {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--settings-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(31, 32, 66, 0.06);
}

.cb-settings-v3-surface-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--settings-line);
}

.cb-settings-v3-surface-head > div:nth-child(2) {
    min-width: 0;
    margin-right: auto;
}

.cb-settings-v3-surface-head h2 {
    margin: 0;
    color: var(--settings-ink);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 0;
}

.cb-settings-v3-surface-head p {
    margin: 4px 0 0;
    color: var(--settings-muted);
    font-size: 12px;
    line-height: 1.4;
}

.cb-settings-v3-surface-icon {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: #f0ecff;
    color: var(--settings-purple);
}

.cb-settings-v3-surface-icon.is-green {
    background: #e9faf4;
    color: #079f76;
}

.cb-settings-v3-surface-icon svg {
    width: 18px;
    height: 18px;
}

.cb-settings-v3-access-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f0ecff;
    color: #6947e9;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.cb-settings-v3-access-label svg,
.cb-settings-v3 .cb-btn svg {
    width: 14px;
    height: 14px;
}

.cb-settings-v3 .cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.cb-settings-v3-form {
    display: block;
}

.cb-settings-v3-form-section {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 32px;
    padding: 26px 24px;
}

.cb-settings-v3-form-section + .cb-settings-v3-form-section {
    border-top: 1px solid var(--settings-line);
}

.cb-settings-v3-section-copy > span {
    display: block;
    margin-bottom: 7px;
    color: var(--settings-purple);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cb-settings-v3-section-copy h3 {
    margin: 0;
    color: var(--settings-ink);
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0;
}

.cb-settings-v3-section-copy p {
    max-width: 210px;
    margin: 7px 0 0;
    color: var(--settings-muted);
    font-size: 12px;
    line-height: 1.55;
}

.cb-settings-v3-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.cb-settings-v3-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    color: var(--settings-ink);
    font-size: 12px;
    font-weight: 800;
}

.cb-settings-v3-field-wide {
    grid-column: 1 / -1;
}

.cb-settings-v3-field > small {
    color: var(--settings-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.cb-settings-v3-field input:not([type="checkbox"]):not([type="color"]),
.cb-settings-v3-field select {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 13px;
    border: 1px solid #d9deeb;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: var(--settings-ink);
    font: inherit;
    font-weight: 600;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cb-settings-v3-field input:focus,
.cb-settings-v3-field select:focus {
    border-color: #8e75f8;
    box-shadow: 0 0 0 3px rgba(112, 76, 246, 0.1);
}

.cb-settings-v3-field input:disabled,
.cb-settings-v3-field select:disabled {
    border-color: #e5e8f0;
    background: #f5f6f9;
    color: #8d95aa;
    cursor: not-allowed;
}

.cb-settings-v3-colour-control {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 44px;
    padding: 5px 11px 5px 6px;
    border: 1px solid #d9deeb;
    border-radius: 8px;
    background: #fff;
}

.cb-settings-v3-colour-control input[type="color"] {
    width: 34px;
    height: 32px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.cb-settings-v3-colour-control code {
    color: #626c87;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
}

.cb-settings-v3-file-control {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 68px;
    padding: 10px;
    border: 1px solid #d9deeb;
    border-radius: 8px;
    background: #fff;
}

.cb-settings-v3-file-control img,
.cb-settings-v3-logo-placeholder {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid #e4e7f0;
    border-radius: 7px;
    background: #f7f8fb;
    object-fit: contain;
}

.cb-settings-v3-logo-placeholder {
    color: #8b93a8;
}

.cb-settings-v3-logo-placeholder svg {
    width: 18px;
    height: 18px;
}

.cb-settings-v3-file-control > span:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

.cb-settings-v3-file-control input[type="file"] {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 11px;
}

.cb-settings-v3-file-control small {
    color: var(--settings-muted);
    font-size: 10px;
    font-weight: 600;
}

.cb-settings-v3-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 62px;
    padding: 11px 13px;
    border: 1px solid var(--settings-line);
    border-radius: 8px;
    background: var(--settings-soft);
}

.cb-settings-v3-toggle-row > span:first-child {
    display: grid;
    gap: 3px;
}

.cb-settings-v3-toggle-row strong {
    font-size: 12px;
}

.cb-settings-v3-toggle-row small {
    color: var(--settings-muted);
    font-size: 10px;
    font-weight: 600;
}

.cb-settings-v3-toggle {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
}

.cb-settings-v3-toggle input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.cb-settings-v3-toggle i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d8dce6;
    transition: background-color 160ms ease;
}

.cb-settings-v3-toggle i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(19, 24, 63, 0.2);
    content: "";
    transition: transform 160ms ease;
}

.cb-settings-v3-toggle input:checked + i {
    background: var(--settings-purple);
}

.cb-settings-v3-toggle input:checked + i::after {
    transform: translateX(18px);
}

.cb-settings-v3-toggle input:focus-visible + i {
    outline: 3px solid rgba(112, 76, 246, 0.18);
}

.cb-settings-v3-toggle input:disabled + i {
    opacity: 0.55;
}

.cb-settings-v3-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 20px 20px;
    padding: 10px 12px;
    border: 1px solid #dcd5ff;
    border-radius: 8px;
    background: #f5f2ff;
    color: #5d4c9d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.cb-settings-v3-fields > .cb-settings-v3-notice {
    margin: 0;
}

.cb-settings-v3-notice.is-warning {
    border-color: #f6dfac;
    background: #fff9e9;
    color: #8c650b;
}

.cb-settings-v3-notice svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.cb-settings-v3-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-height: 64px;
    padding: 12px 20px;
    border-top: 1px solid var(--settings-line);
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 22px rgba(32, 33, 68, 0.04);
    backdrop-filter: blur(10px);
}

.cb-settings-v3-savebar > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    color: var(--settings-muted);
    font-size: 11px;
    font-weight: 650;
}

.cb-settings-v3-savebar svg {
    width: 14px;
    height: 14px;
    color: #07a77b;
}

.cb-settings-v3-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cb-settings-v3-metrics > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 20px;
}

.cb-settings-v3-metrics > div + div {
    border-left: 1px solid var(--settings-line);
}

.cb-settings-v3-metrics span {
    color: var(--settings-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-settings-v3-metrics strong {
    overflow: hidden;
    color: var(--settings-ink);
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-metrics small {
    overflow: hidden;
    color: var(--settings-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-metrics i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #f2ae2e;
}

.cb-settings-v3-metrics i.is-green {
    background: #08b98a;
}

.cb-settings-v3-plan-list,
.cb-settings-v3-role-list {
    display: grid;
}

.cb-settings-v3-plan-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 130px 160px;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 12px 20px;
}

.cb-settings-v3-plan-row + .cb-settings-v3-plan-row {
    border-top: 1px solid var(--settings-line);
}

.cb-settings-v3-plan-row.is-current {
    background: #faf9ff;
}

.cb-settings-v3-plan-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    background: #f1edff;
    color: var(--settings-purple);
}

.cb-settings-v3-plan-mark svg {
    width: 16px;
    height: 16px;
}

.cb-settings-v3-plan-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.cb-settings-v3-plan-copy strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--settings-ink);
    font-size: 13px;
}

.cb-settings-v3-plan-copy em {
    padding: 3px 7px;
    border-radius: 999px;
    background: #e7f8f2;
    color: #008864;
    font-size: 9px;
    font-style: normal;
    text-transform: uppercase;
}

.cb-settings-v3-plan-copy small {
    overflow: hidden;
    color: var(--settings-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-plan-price {
    color: var(--settings-ink);
    font-size: 13px;
    font-weight: 850;
    text-align: right;
}

.cb-settings-v3-plan-action {
    display: flex;
    justify-content: flex-end;
}

.cb-settings-v3-current-label,
.cb-settings-v3-muted-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #078c68;
    font-size: 10px;
    font-weight: 800;
}

.cb-settings-v3-muted-label {
    color: var(--settings-muted);
}

.cb-settings-v3-current-label svg {
    width: 13px;
    height: 13px;
}

.cb-settings-v3-profile-band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--settings-line);
    background: #fafaff;
}

.cb-settings-v3-profile-avatar {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

.cb-settings-v3-profile-band > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin-right: auto;
}

.cb-settings-v3-profile-band strong {
    font-size: 14px;
}

.cb-settings-v3-profile-band small {
    overflow: hidden;
    color: var(--settings-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: start;
    gap: 20px;
}

.cb-settings-v3-security-form {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.cb-settings-v3-input-action {
    position: relative;
    display: block;
}

.cb-settings-v3-input-action input {
    padding-right: 46px !important;
}

.cb-settings-v3-input-action button {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8a93aa;
    cursor: pointer;
}

.cb-settings-v3-input-action button:hover,
.cb-settings-v3-input-action button.is-visible {
    background: #f1edff;
    color: var(--settings-purple);
}

.cb-settings-v3-input-action svg {
    width: 16px;
    height: 16px;
}

.cb-settings-v3-form-action {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.cb-settings-v3-status-list {
    display: grid;
}

.cb-settings-v3-status-list > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px 16px;
}

.cb-settings-v3-status-list > div + div {
    border-top: 1px solid var(--settings-line);
}

.cb-settings-v3-status-list > div > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 7px;
    background: var(--settings-soft);
    color: #65708d;
}

.cb-settings-v3-status-list svg {
    width: 15px;
    height: 15px;
}

.cb-settings-v3-status-list p {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

.cb-settings-v3-status-list strong {
    font-size: 11px;
}

.cb-settings-v3-status-list small {
    overflow: hidden;
    color: var(--settings-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-status-list em {
    padding: 4px 7px;
    border-radius: 999px;
    background: #e8faf4;
    color: #078863;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.cb-settings-v3-roles-head {
    flex-wrap: wrap;
}

.cb-settings-v3-segmented {
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--settings-line);
    border-radius: 8px;
    background: var(--settings-soft);
}

.cb-settings-v3-segmented a {
    padding: 7px 10px;
    border-radius: 6px;
    color: #69728c;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.cb-settings-v3-segmented a.is-active {
    background: #fff;
    color: #6542e9;
    box-shadow: 0 1px 4px rgba(24, 29, 62, 0.09);
}

.cb-settings-v3-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--settings-line);
}

.cb-settings-v3-list-toolbar > div {
    display: grid;
    gap: 3px;
}

.cb-settings-v3-list-toolbar strong {
    font-size: 13px;
}

.cb-settings-v3-list-toolbar small {
    color: var(--settings-muted);
    font-size: 10px;
}

.cb-settings-v3-role-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 78px 90px auto 36px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 11px 20px;
}

.cb-settings-v3-role-row + .cb-settings-v3-role-row {
    border-top: 1px solid var(--settings-line);
}

.cb-settings-v3-role-row:hover {
    background: #fbfbfe;
}

.cb-settings-v3-role-icon,
.cb-settings-v3-tone {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: #f1edff;
    color: var(--settings-purple);
    font-size: 12px;
    font-weight: 900;
}

.cb-settings-v3-tone {
    background: color-mix(in srgb, var(--role-tone) 13%, white);
    color: var(--role-tone);
}

.cb-settings-v3-role-icon svg {
    width: 17px;
    height: 17px;
}

.cb-settings-v3-role-main,
.cb-settings-v3-role-count {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.cb-settings-v3-role-main strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-role-main small {
    overflow: hidden;
    color: var(--settings-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-role-count {
    text-align: center;
}

.cb-settings-v3-role-count strong {
    font-size: 12px;
}

.cb-settings-v3-role-count small {
    color: var(--settings-muted);
    font-size: 9px;
    white-space: nowrap;
}

.cb-settings-v3-tone-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #66708b;
    font-size: 10px;
    font-weight: 750;
}

.cb-settings-v3-tone-label i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role-tone);
}

.cb-settings-v3-icon-button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--settings-line);
    border-radius: 7px;
    background: #fff;
    color: #7d86a0;
    cursor: pointer;
}

.cb-settings-v3-icon-button:hover {
    border-color: #cabfff;
    background: #f4f1ff;
    color: var(--settings-purple);
}

.cb-settings-v3-icon-button svg {
    width: 15px;
    height: 15px;
}

.cb-settings-v3-empty {
    display: grid;
    min-height: 210px;
    padding: 30px;
    place-items: center;
    align-content: center;
    gap: 7px;
    text-align: center;
}

.cb-settings-v3-empty > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: #f1edff;
    color: var(--settings-purple);
}

.cb-settings-v3-empty svg {
    width: 19px;
    height: 19px;
}

.cb-settings-v3-empty strong {
    font-size: 13px;
}

.cb-settings-v3-empty small {
    color: var(--settings-muted);
    font-size: 11px;
}

.cb-modal.cb-settings-v3-modal .cb-modal-dialog {
    display: flex;
    flex-direction: column;
    width: min(780px, calc(100vw - 32px));
    max-width: none;
    max-height: min(820px, calc(100vh - 32px));
    overflow: hidden;
    border: 1px solid #e2e5ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(18, 23, 56, 0.22);
}

.cb-modal.cb-settings-v3-modal .cb-modal-head {
    flex: 0 0 auto;
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e8f0;
}

.cb-modal.cb-settings-v3-modal .cb-modal-head h2 {
    font-size: 17px;
    letter-spacing: 0;
}

.cb-modal.cb-settings-v3-modal .cb-modal-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 7px;
    font-size: 22px;
}

.cb-modal.cb-settings-v3-modal .cb-modal-body {
    min-height: 0;
    padding: 0;
    overflow: auto;
}

.cb-settings-v3-modal-form {
    display: grid;
}

.cb-settings-v3-modal-form > .cb-settings-v3-fields {
    padding: 18px;
    border-bottom: 1px solid #e5e8f0;
}

.cb-settings-v3-modal-intro {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e8f0;
    background: #fafaff;
}

.cb-settings-v3-modal-intro > span:first-child {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: #f0ecff;
    color: var(--settings-purple);
}

.cb-settings-v3-modal-intro > span:first-child svg {
    width: 17px;
    height: 17px;
}

.cb-settings-v3-modal-intro > .cb-settings-v3-tone:first-child {
    background: color-mix(in srgb, var(--role-tone) 13%, white);
    color: var(--role-tone);
}

.cb-settings-v3-modal-intro p {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

.cb-settings-v3-modal-intro strong {
    font-size: 12px;
}

.cb-settings-v3-modal-intro small {
    color: var(--settings-muted);
    font-size: 10px;
}

.cb-settings-v3-modal-intro em {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f0ecff;
    color: #6846ea;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
    white-space: nowrap;
}

.cb-settings-v3-permission-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.cb-settings-v3-permission-groups fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e2e6ef;
    border-radius: 8px;
}

.cb-settings-v3-permission-groups legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border-bottom: 1px solid #e7eaf1;
    background: #f7f8fb;
    color: var(--settings-ink);
    font-size: 11px;
    font-weight: 850;
}

.cb-settings-v3-permission-groups legend small {
    color: var(--settings-muted);
    font-size: 9px;
    font-weight: 650;
}

.cb-settings-v3-permission-groups fieldset > label {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 47px;
    padding: 8px 11px;
    cursor: pointer;
}

.cb-settings-v3-permission-groups fieldset > label + label {
    border-top: 1px solid #edf0f5;
}

.cb-settings-v3-permission-groups input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--settings-purple);
}

.cb-settings-v3-permission-groups label > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.cb-settings-v3-permission-groups label strong {
    overflow: hidden;
    color: var(--settings-ink);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-permission-groups label small {
    overflow: hidden;
    color: var(--settings-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-settings-v3-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 64px;
    padding: 12px 18px;
    border-top: 1px solid #e4e7ef;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.cb-settings-v3-modal-action-spacer {
    flex: 1 1 auto;
}

.cb-settings-v3-delete-confirm {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #f1c9cf;
    background: #fff5f6;
}

.cb-settings-v3-delete-confirm[hidden],
.cb-settings-v3-modal-actions [hidden] {
    display: none !important;
}

.cb-settings-v3-delete-confirm > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 7px;
    background: #ffe2e6;
    color: #d5364b;
}

.cb-settings-v3-delete-confirm svg {
    width: 16px;
    height: 16px;
}

.cb-settings-v3-delete-confirm p {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

.cb-settings-v3-delete-confirm strong {
    color: #8f1e2d;
    font-size: 11px;
}

.cb-settings-v3-delete-confirm small {
    color: #a45560;
    font-size: 9px;
}

@media (max-width: 1050px) {
    .cb-settings-v3-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-settings-v3-metrics > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--settings-line);
    }

    .cb-settings-v3-metrics > div:nth-child(4) {
        border-top: 1px solid var(--settings-line);
    }

    .cb-settings-v3-security-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .cb-settings-v3 {
        width: min(100% - 28px, 1220px);
        padding-top: 24px;
    }

    .cb-settings-v3-page-head {
        align-items: flex-start;
    }

    .cb-settings-v3-context {
        min-width: 230px;
    }

    .cb-settings-v3-form-section {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cb-settings-v3-section-copy p {
        max-width: none;
    }

    .cb-settings-v3-plan-row {
        grid-template-columns: 40px minmax(0, 1fr) 110px 140px;
    }

    .cb-settings-v3-role-row {
        grid-template-columns: 42px minmax(0, 1fr) 72px auto 36px;
    }

    .cb-settings-v3-role-row .cb-settings-v3-role-count:nth-of-type(4) {
        display: none;
    }
}

@media (max-width: 640px) {
    .cb-settings-v3 {
        width: min(100% - 20px, 1220px);
        gap: 14px;
        padding: 18px 0 42px;
    }

    .cb-settings-v3-page-head {
        display: grid;
        gap: 14px;
    }

    .cb-settings-v3-page-head h1 {
        font-size: 29px;
    }

    .cb-settings-v3-context {
        width: 100%;
        min-width: 0;
    }

    .cb-settings-v3-tabs {
        margin-right: -10px;
        margin-left: -10px;
        padding-right: 10px;
        padding-left: 10px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .cb-settings-v3-tab {
        flex-basis: 158px;
    }

    .cb-settings-v3-surface-head {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 14px;
    }

    .cb-settings-v3-surface-head > form,
    .cb-settings-v3-surface-head > .cb-btn {
        width: 100%;
        margin-left: 50px;
    }

    .cb-settings-v3-surface-head > form .cb-btn,
    .cb-settings-v3-surface-head > .cb-btn {
        width: 100%;
    }

    .cb-settings-v3-access-label {
        margin-left: 50px;
    }

    .cb-settings-v3-form-section,
    .cb-settings-v3-security-form {
        padding: 18px 14px;
    }

    .cb-settings-v3-fields {
        grid-template-columns: 1fr;
    }

    .cb-settings-v3-field-wide {
        grid-column: auto;
    }

    .cb-settings-v3-toggle-row {
        grid-column: auto;
    }

    .cb-settings-v3-savebar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
    }

    .cb-settings-v3-savebar .cb-btn {
        width: 100%;
    }

    .cb-settings-v3-metrics {
        grid-template-columns: 1fr;
    }

    .cb-settings-v3-metrics > div + div,
    .cb-settings-v3-metrics > div:nth-child(3) {
        border-top: 1px solid var(--settings-line);
        border-left: 0;
    }

    .cb-settings-v3-plan-row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .cb-settings-v3-plan-price {
        grid-column: 2;
        text-align: left;
    }

    .cb-settings-v3-plan-action {
        grid-column: 2;
        justify-content: flex-start;
    }

    .cb-settings-v3-plan-action .cb-btn {
        width: 100%;
    }

    .cb-settings-v3-profile-band {
        flex-wrap: wrap;
        padding: 14px;
    }

    .cb-settings-v3-profile-band .cb-status-badge {
        margin-left: 60px;
    }

    .cb-settings-v3-segmented {
        width: 100%;
        margin-left: 50px;
    }

    .cb-settings-v3-segmented a {
        flex: 1;
        text-align: center;
    }

    .cb-settings-v3-list-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
    }

    .cb-settings-v3-list-toolbar .cb-btn {
        width: 100%;
    }

    .cb-settings-v3-role-row {
        grid-template-columns: 40px minmax(0, 1fr) 34px;
        gap: 10px;
        padding: 12px 14px;
    }

    .cb-settings-v3-role-row .cb-settings-v3-role-count,
    .cb-settings-v3-role-row .cb-settings-v3-tone-label {
        display: none;
    }

    .cb-settings-v3-role-row .cb-status-badge {
        grid-column: 2;
        justify-self: start;
    }

    .cb-settings-v3-role-row .cb-settings-v3-icon-button {
        grid-column: 3;
        grid-row: 1;
    }

    .cb-modal.cb-settings-v3-modal .cb-modal-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        margin: 8px auto 0;
    }

    .cb-settings-v3-permission-groups {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .cb-settings-v3-modal-form > .cb-settings-v3-fields {
        padding: 14px;
    }

    .cb-settings-v3-modal-intro {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 14px;
    }

    .cb-settings-v3-modal-intro em {
        grid-column: 2;
        justify-self: start;
    }

    .cb-settings-v3-modal-actions {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .cb-settings-v3-modal-action-spacer {
        display: none;
    }

    .cb-settings-v3-modal-actions .cb-btn {
        flex: 1 1 130px;
    }

    .cb-settings-v3-delete-confirm {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 12px;
    }

    .cb-settings-v3-delete-confirm .cb-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Guided workspace onboarding v2 */
body.cb-onboarding-body {
    background: #f4f6f9;
    color: #11183f;
}

body.cb-onboarding-body .cb-page-shell-standalone {
    min-height: 100vh;
    padding: 0 28px 48px;
}

.cb-onboarding-v2,
.cb-onboarding-v2 * {
    box-sizing: border-box;
}

.cb-onboarding-v2 {
    --onboarding-ink: #11183f;
    --onboarding-muted: #78839f;
    --onboarding-line: #e1e5ed;
    --onboarding-soft: #f7f8fb;
    --onboarding-purple: #704cf6;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding-top: 18px;
}

.cb-onboarding-v2-topbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) minmax(220px, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 58px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    min-width: 0;
    color: var(--onboarding-ink);
    text-decoration: none;
}

.cb-onboarding-v2-brand-mark {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    background: var(--onboarding-purple);
    color: #fff;
}

.cb-onboarding-v2-brand-mark.is-image {
    background: #fff;
}

.cb-onboarding-v2-brand-mark svg,
.cb-onboarding-v2-brand-mark img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.cb-onboarding-v2-brand > strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-brand > span:last-child {
    padding-left: 10px;
    border-left: 1px solid var(--onboarding-line);
    color: var(--onboarding-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-onboarding-v2-wordmark-image {
    width: auto;
    max-width: 100px;
    height: 24px;
    object-fit: contain;
}

.cb-onboarding-v2-top-progress {
    display: grid;
    gap: 7px;
    width: 100%;
}

.cb-onboarding-v2-top-progress > span {
    color: var(--onboarding-muted);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.cb-onboarding-v2-top-progress > i {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #dde1e9;
}

.cb-onboarding-v2-top-progress b {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    border-radius: inherit;
    background: var(--onboarding-purple);
    transition: width 220ms ease;
}

.cb-onboarding-v2-account {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 9px;
    min-width: 0;
}

.cb-onboarding-v2-account > span {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: #ebe7ff;
    color: #6745e8;
    font-size: 11px;
    font-weight: 900;
}

.cb-onboarding-v2-account p {
    display: grid;
    min-width: 0;
    gap: 2px;
    margin: 0;
}

.cb-onboarding-v2-account strong,
.cb-onboarding-v2-account small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-account strong {
    font-size: 12px;
}

.cb-onboarding-v2-account small {
    color: var(--onboarding-muted);
    font-size: 9px;
}

.cb-onboarding-v2-account > a {
    display: grid;
    width: 32px;
    height: 32px;
    margin-left: 3px;
    place-items: center;
    border: 1px solid var(--onboarding-line);
    border-radius: 8px;
    background: #fff;
    color: #7d869c;
}

.cb-onboarding-v2-account > a:hover {
    border-color: #cfc5ff;
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-account svg {
    width: 15px;
    height: 15px;
}

.cb-onboarding-v2 > .cb-flash {
    margin: 14px 0 0;
    border-radius: 8px;
    font-size: 12px;
}

.cb-onboarding-v2-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 28px 2px 22px;
}

.cb-onboarding-v2-intro > div:first-child {
    min-width: 0;
}

.cb-onboarding-v2-intro > div:first-child > span {
    display: block;
    margin-bottom: 7px;
    color: var(--onboarding-purple);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cb-onboarding-v2-intro h1 {
    margin: 0;
    color: var(--onboarding-ink);
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: 0;
}

.cb-onboarding-v2-intro p {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--onboarding-muted);
    font-size: 13px;
    line-height: 1.55;
}

.cb-onboarding-v2-intro dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 360px;
    margin: 0;
    border: 1px solid var(--onboarding-line);
    border-radius: 8px;
    background: #fff;
}

.cb-onboarding-v2-intro dl > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
}

.cb-onboarding-v2-intro dl > div + div {
    border-left: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-intro dt {
    color: var(--onboarding-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-onboarding-v2-intro dd {
    overflow: hidden;
    margin: 0;
    color: var(--onboarding-ink);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-form {
    overflow: visible;
    border: 1px solid var(--onboarding-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(28, 32, 66, 0.07);
}

.cb-onboarding-v2-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 76px;
    padding: 0 18px;
    border-bottom: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 13px 12px;
    border: 0;
    background: transparent;
    color: #737d96;
    text-align: left;
}

.cb-onboarding-v2-step::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 2px;
    background: transparent;
    content: "";
}

.cb-onboarding-v2-step:hover:not(:disabled) {
    color: var(--onboarding-ink);
}

.cb-onboarding-v2-step:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.cb-onboarding-v2-step.is-active {
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-step.is-active::after {
    background: var(--onboarding-purple);
}

.cb-onboarding-v2-step > span {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #d8dce6;
    border-radius: 7px;
    background: #f5f6f9;
    color: #707990;
}

.cb-onboarding-v2-step > span b {
    font-size: 10px;
}

.cb-onboarding-v2-step > span i {
    display: none;
}

.cb-onboarding-v2-step > span svg {
    width: 14px;
    height: 14px;
}

.cb-onboarding-v2-step.is-active > span {
    border-color: var(--onboarding-purple);
    background: var(--onboarding-purple);
    color: #fff;
}

.cb-onboarding-v2-step.is-complete > span {
    border-color: #09a979;
    background: #e8f9f3;
    color: #078762;
}

.cb-onboarding-v2-step.is-complete > span b {
    display: none;
}

.cb-onboarding-v2-step.is-complete > span i {
    display: block;
}

.cb-onboarding-v2-step p {
    display: grid;
    min-width: 0;
    gap: 3px;
    margin: 0;
}

.cb-onboarding-v2-step strong,
.cb-onboarding-v2-step small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-step strong {
    font-size: 11px;
}

.cb-onboarding-v2-step small {
    color: #929aae;
    font-size: 9px;
    font-weight: 600;
}

.cb-onboarding-v2-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    min-height: 570px;
}

.cb-onboarding-v2-panels {
    min-width: 0;
}

.cb-onboarding-v2-panel {
    min-height: 570px;
    padding: 28px 30px 34px;
}

.cb-onboarding-v2-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.cb-onboarding-v2-panel-head > span {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: #f0ecff;
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-panel-head svg {
    width: 18px;
    height: 18px;
}

.cb-onboarding-v2-panel-head > div {
    min-width: 0;
}

.cb-onboarding-v2-panel-head small {
    display: block;
    margin-bottom: 3px;
    color: var(--onboarding-purple);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.cb-onboarding-v2-panel-head h2 {
    margin: 0;
    color: var(--onboarding-ink);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0;
    outline: none;
}

.cb-onboarding-v2-panel-head p {
    margin: 5px 0 0;
    color: var(--onboarding-muted);
    font-size: 11px;
    line-height: 1.5;
}

.cb-onboarding-v2-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-onboarding-v2-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.cb-onboarding-v2-field-wide {
    grid-column: 1 / -1;
}

.cb-onboarding-v2-field > span:first-child,
.cb-onboarding-v2-plan-options > legend {
    color: var(--onboarding-ink);
    font-size: 11px;
    font-weight: 800;
}

.cb-onboarding-v2-field > span em {
    margin-left: 5px;
    color: #8f98ad;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-onboarding-v2-field input:not([type="color"]),
.cb-onboarding-v2-field select {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 13px;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: var(--onboarding-ink);
    font-size: 12px;
    font-weight: 650;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cb-onboarding-v2-field input:focus,
.cb-onboarding-v2-field select:focus {
    border-color: #8b73f7;
    box-shadow: 0 0 0 3px rgba(112, 76, 246, 0.1);
}

.cb-onboarding-v2-field input::placeholder {
    color: #a1a8b8;
}

.cb-onboarding-v2 .cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.cb-onboarding-v2 .cb-btn svg {
    width: 14px;
    height: 14px;
}

.cb-onboarding-v2-role-builder {
    display: grid;
    gap: 18px;
}

.cb-onboarding-v2-role-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.cb-onboarding-v2-suggestions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.cb-onboarding-v2-suggestions > span {
    margin-right: 2px;
    color: var(--onboarding-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-onboarding-v2-suggestions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #e0e3eb;
    border-radius: 999px;
    background: #fff;
    color: #616b83;
    font-size: 9px;
    font-weight: 750;
}

.cb-onboarding-v2-suggestions button:hover {
    border-color: #cfc4ff;
    background: #f7f5ff;
    color: #6542e8;
}

.cb-onboarding-v2-suggestions svg {
    width: 11px;
    height: 11px;
}

.cb-onboarding-v2-role-list {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 126px;
    padding: 14px;
    border: 1px solid var(--onboarding-line);
    border-radius: 8px;
    background: var(--onboarding-soft);
}

.cb-onboarding-v2-role-chip {
    --role-tone: #704cf6;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    min-height: 32px;
    padding: 4px 5px 4px 9px;
    border: 1px solid #dfd9fa;
    border-radius: 999px;
    background: #fff;
    color: var(--onboarding-ink);
}

.cb-onboarding-v2-role-chip:nth-child(4n + 2) {
    --role-tone: #0f9f95;
    border-color: #cde8e5;
}

.cb-onboarding-v2-role-chip:nth-child(4n + 3) {
    --role-tone: #d88a08;
    border-color: #f0dfbd;
}

.cb-onboarding-v2-role-chip:nth-child(4n + 4) {
    --role-tone: #d94d79;
    border-color: #f1d1dc;
}

.cb-onboarding-v2-role-chip > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-tone);
}

.cb-onboarding-v2-role-chip strong {
    font-size: 10px;
}

.cb-onboarding-v2-role-chip button {
    display: grid;
    width: 23px;
    height: 23px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0f1f5;
    color: #7f879a;
}

.cb-onboarding-v2-role-chip button:hover {
    background: #ffe9ed;
    color: #cf344c;
}

.cb-onboarding-v2-role-chip svg {
    width: 11px;
    height: 11px;
}

.cb-onboarding-v2-role-empty {
    margin: -94px 0 66px;
    color: #9199aa;
    font-size: 11px;
    text-align: center;
    pointer-events: none;
}

.cb-onboarding-v2-field-error {
    margin: -8px 0 0;
    color: #d6334b;
    font-size: 10px;
    font-weight: 700;
}

.cb-onboarding-v2-plan-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cb-onboarding-v2-plan-options > legend {
    grid-column: 1 / -1;
    margin-bottom: 1px;
}

.cb-onboarding-v2-plan-options > label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 9px;
    min-height: 64px;
    padding: 10px 11px;
    border: 1px solid #dfe3eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.cb-onboarding-v2-plan-options > label:hover {
    border-color: #cfc4ff;
}

.cb-onboarding-v2-plan-options > label:has(input:checked) {
    border-color: #9e8af9;
    background: #f8f6ff;
}

.cb-onboarding-v2-plan-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cb-onboarding-v2-plan-indicator {
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid #c9cfdb;
    border-radius: 50%;
    background: #fff;
}

.cb-onboarding-v2-plan-options input:checked + .cb-onboarding-v2-plan-indicator {
    border: 5px solid var(--onboarding-purple);
}

.cb-onboarding-v2-plan-options label > span:nth-child(3) {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.cb-onboarding-v2-plan-options strong {
    font-size: 11px;
}

.cb-onboarding-v2-plan-options small {
    overflow: hidden;
    color: var(--onboarding-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-plan-options label > i {
    display: none;
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-plan-options label:has(input:checked) > i {
    display: block;
}

.cb-onboarding-v2-plan-options svg {
    width: 15px;
    height: 15px;
}

.cb-onboarding-v2-brand-fields {
    margin-top: 20px;
}

.cb-onboarding-v2-colour {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 5px 10px 5px 6px;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    background: #fff;
}

.cb-onboarding-v2-colour input[type="color"] {
    width: 34px;
    height: 32px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.cb-onboarding-v2-colour code {
    color: #667087;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
}

.cb-onboarding-v2-upload {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 9px 11px;
    border: 1px dashed #cfd5e1;
    border-radius: 8px;
    background: #fafbfc;
    cursor: pointer;
}

.cb-onboarding-v2-upload > input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.cb-onboarding-v2-upload > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 7px;
    background: #efecff;
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-upload svg {
    width: 16px;
    height: 16px;
}

.cb-onboarding-v2-upload p {
    display: grid;
    min-width: 0;
    gap: 3px;
    margin: 0;
}

.cb-onboarding-v2-upload strong {
    font-size: 10px;
}

.cb-onboarding-v2-upload small {
    color: var(--onboarding-muted);
    font-size: 9px;
}

.cb-onboarding-v2-upload em {
    color: var(--onboarding-purple);
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
}

.cb-onboarding-v2-toggle-row,
.cb-onboarding-v2-invite-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid var(--onboarding-line);
    border-radius: 8px;
    background: var(--onboarding-soft);
}

.cb-onboarding-v2-toggle-row > span:first-child,
.cb-onboarding-v2-invite-switch > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin-right: auto;
}

.cb-onboarding-v2-toggle-row strong,
.cb-onboarding-v2-invite-switch strong {
    font-size: 10px;
}

.cb-onboarding-v2-toggle-row small,
.cb-onboarding-v2-invite-switch small {
    color: var(--onboarding-muted);
    font-size: 9px;
    font-weight: 600;
}

.cb-onboarding-v2-toggle {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
}

.cb-onboarding-v2-toggle input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.cb-onboarding-v2-toggle i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d6dae3;
    transition: background-color 160ms ease;
}

.cb-onboarding-v2-toggle i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(18, 24, 63, 0.2);
    content: "";
    transition: transform 160ms ease;
}

.cb-onboarding-v2-toggle input:checked + i {
    background: var(--onboarding-purple);
}

.cb-onboarding-v2-toggle input:checked + i::after {
    transform: translateX(18px);
}

.cb-onboarding-v2-toggle input:focus-visible + i {
    outline: 3px solid rgba(112, 76, 246, 0.16);
}

.cb-onboarding-v2-invite-switch {
    justify-content: flex-start;
    margin-bottom: 18px;
    background: #fff;
    cursor: pointer;
}

.cb-onboarding-v2-invite-icon {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 7px;
    background: #eeebff;
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-invite-icon svg {
    width: 16px;
    height: 16px;
}

.cb-onboarding-v2-invite-fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: opacity 160ms ease;
}

.cb-onboarding-v2-invite-fields.is-disabled {
    opacity: 0.42;
}

.cb-onboarding-v2-launch-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-launch-note > span {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 7px;
    background: #e9f8f3;
    color: #078c68;
}

.cb-onboarding-v2-launch-note svg {
    width: 15px;
    height: 15px;
}

.cb-onboarding-v2-launch-note p {
    display: grid;
    gap: 3px;
    margin: 0;
}

.cb-onboarding-v2-launch-note strong {
    font-size: 10px;
}

.cb-onboarding-v2-launch-note small {
    color: var(--onboarding-muted);
    font-size: 9px;
}

.cb-onboarding-v2-context {
    min-width: 0;
    border-left: 1px solid var(--onboarding-line);
    background: var(--onboarding-soft);
}

.cb-onboarding-v2-context > section {
    padding: 30px 24px;
}

.cb-onboarding-v2-context-label {
    display: block;
    margin-bottom: 18px;
    color: #8b94a8;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.cb-onboarding-v2-workspace-preview,
.cb-onboarding-v2-brand-preview {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-workspace-preview > span,
.cb-onboarding-v2-preview-mark {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--onboarding-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.cb-onboarding-v2-workspace-preview p,
.cb-onboarding-v2-brand-preview p {
    display: grid;
    min-width: 0;
    gap: 4px;
    margin: 0;
}

.cb-onboarding-v2-workspace-preview strong,
.cb-onboarding-v2-workspace-preview small,
.cb-onboarding-v2-brand-preview strong,
.cb-onboarding-v2-brand-preview small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-workspace-preview strong,
.cb-onboarding-v2-brand-preview strong {
    font-size: 12px;
}

.cb-onboarding-v2-workspace-preview small,
.cb-onboarding-v2-brand-preview small {
    color: var(--onboarding-muted);
    font-size: 9px;
}

.cb-onboarding-v2-context-list {
    display: grid;
    margin: 5px 0 0;
}

.cb-onboarding-v2-context-list > div {
    display: grid;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-context-list dt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--onboarding-muted);
    font-size: 9px;
    font-weight: 700;
}

.cb-onboarding-v2-context-list dt svg {
    width: 13px;
    height: 13px;
}

.cb-onboarding-v2-context-list dd {
    overflow: hidden;
    margin: 0 0 0 19px;
    color: var(--onboarding-ink);
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-big-number {
    display: block;
    color: var(--onboarding-ink);
    font-size: 54px;
    line-height: 1;
}

.cb-onboarding-v2-context-copy {
    max-width: 210px;
    margin: 8px 0 0;
    color: var(--onboarding-muted);
    font-size: 11px;
    line-height: 1.55;
}

.cb-onboarding-v2-context-rule {
    height: 1px;
    margin: 22px 0;
    background: var(--onboarding-line);
}

.cb-onboarding-v2-check-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-onboarding-v2-check-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f6981;
    font-size: 9px;
    font-weight: 700;
}

.cb-onboarding-v2-check-list svg {
    width: 14px;
    height: 14px;
    color: #08a878;
}

.cb-onboarding-v2-brand-preview {
    padding: 18px;
    border: 1px solid #e0e3eb;
    border-radius: 8px;
    background: #fff;
}

.cb-onboarding-v2-preview-mark {
    background: var(--brand-primary);
    color: #fff;
}

.cb-onboarding-v2-preview-mark img {
    width: 100%;
    height: 100%;
    padding: 6px;
    background: #fff;
    object-fit: contain;
}

.cb-onboarding-v2-preview-mark b {
    font-size: 12px;
}

.cb-onboarding-v2-brand-swatches {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
}

.cb-onboarding-v2-brand-swatches i {
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 0 1px #d9dee8;
}

.cb-onboarding-v2-brand-swatches i:nth-child(2) {
    margin-left: -10px;
    background: var(--brand-accent);
}

.cb-onboarding-v2-brand-swatches span {
    margin-left: 3px;
    color: var(--onboarding-muted);
    font-size: 9px;
    font-weight: 700;
}

.cb-onboarding-v2-context h3 {
    overflow-wrap: anywhere;
    margin: 0 0 16px;
    color: var(--onboarding-ink);
    font-size: 20px;
    letter-spacing: 0;
}

.cb-onboarding-v2-summary-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-onboarding-v2-summary-list li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 62px;
    border-top: 1px solid var(--onboarding-line);
}

.cb-onboarding-v2-summary-list li > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 7px;
    background: #eeebff;
    color: var(--onboarding-purple);
}

.cb-onboarding-v2-summary-list svg {
    width: 14px;
    height: 14px;
}

.cb-onboarding-v2-summary-list p {
    display: grid;
    min-width: 0;
    gap: 3px;
    margin: 0;
}

.cb-onboarding-v2-summary-list strong,
.cb-onboarding-v2-summary-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-onboarding-v2-summary-list strong {
    font-size: 10px;
}

.cb-onboarding-v2-summary-list small {
    color: var(--onboarding-muted);
    font-size: 8px;
}

.cb-onboarding-v2-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    padding: 12px 18px;
    border-top: 1px solid var(--onboarding-line);
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(28, 32, 66, 0.04);
    backdrop-filter: blur(10px);
}

.cb-onboarding-v2-exit {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 7px;
    color: #7a8399;
    font-size: 10px;
    font-weight: 800;
}

.cb-onboarding-v2-exit:hover {
    color: #cf344c;
}

.cb-onboarding-v2-exit svg {
    width: 14px;
    height: 14px;
}

.cb-onboarding-v2-actions > span {
    color: #8992a6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-onboarding-v2-actions > div {
    display: flex;
    justify-self: end;
    gap: 8px;
}

@media (max-width: 980px) {
    .cb-onboarding-v2-topbar {
        grid-template-columns: 1fr auto;
    }

    .cb-onboarding-v2-top-progress {
        grid-column: 1 / -1;
        grid-row: 2;
        width: min(320px, 100%);
        justify-self: center;
    }

    .cb-onboarding-v2-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .cb-onboarding-v2-intro dl {
        width: 100%;
        flex-basis: auto;
    }

    .cb-onboarding-v2-steps {
        display: flex;
        padding: 0 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cb-onboarding-v2-steps::-webkit-scrollbar {
        display: none;
    }

    .cb-onboarding-v2-step {
        flex: 0 0 190px;
    }

    .cb-onboarding-v2-workspace {
        grid-template-columns: 1fr;
    }

    .cb-onboarding-v2-context {
        border-top: 1px solid var(--onboarding-line);
        border-left: 0;
    }

    .cb-onboarding-v2-context > section {
        min-height: 230px;
    }

    .cb-onboarding-v2-context-list,
    .cb-onboarding-v2-summary-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .cb-onboarding-v2-context-list > div,
    .cb-onboarding-v2-summary-list li {
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 680px) {
    body.cb-onboarding-body .cb-page-shell-standalone {
        padding: 0 10px 28px;
    }

    .cb-onboarding-v2 {
        padding-top: 10px;
    }

    .cb-onboarding-v2-topbar {
        gap: 12px;
        padding: 0 2px 10px;
    }

    .cb-onboarding-v2-brand > span:last-child,
    .cb-onboarding-v2-account p {
        display: none;
    }

    .cb-onboarding-v2-account {
        gap: 5px;
    }

    .cb-onboarding-v2-intro {
        padding: 22px 2px 16px;
    }

    .cb-onboarding-v2-intro h1 {
        font-size: 28px;
    }

    .cb-onboarding-v2-intro dl {
        grid-template-columns: 1fr;
    }

    .cb-onboarding-v2-intro dl > div + div {
        border-top: 1px solid var(--onboarding-line);
        border-left: 0;
    }

    .cb-onboarding-v2-panel {
        min-height: 0;
        padding: 20px 14px 24px;
    }

    .cb-onboarding-v2-panel-head {
        margin-bottom: 20px;
    }

    .cb-onboarding-v2-fields,
    .cb-onboarding-v2-plan-options {
        grid-template-columns: 1fr;
    }

    .cb-onboarding-v2-field-wide,
    .cb-onboarding-v2-plan-options > legend {
        grid-column: auto;
    }

    .cb-onboarding-v2-role-entry {
        grid-template-columns: 1fr;
    }

    .cb-onboarding-v2-role-entry .cb-btn {
        width: 100%;
    }

    .cb-onboarding-v2-suggestions > span {
        width: 100%;
    }

    .cb-onboarding-v2-upload {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .cb-onboarding-v2-upload em {
        display: none;
    }

    .cb-onboarding-v2-toggle-row,
    .cb-onboarding-v2-invite-switch {
        align-items: flex-start;
    }

    .cb-onboarding-v2-context > section {
        min-height: 0;
        padding: 22px 16px;
    }

    .cb-onboarding-v2-context-list,
    .cb-onboarding-v2-summary-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cb-onboarding-v2-context-list > div,
    .cb-onboarding-v2-summary-list li {
        border-top: 1px solid var(--onboarding-line);
    }

    .cb-onboarding-v2-actions {
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 10px 12px;
    }

    .cb-onboarding-v2-actions > span {
        display: none;
    }

    .cb-onboarding-v2-actions > div {
        width: 100%;
    }

    .cb-onboarding-v2-actions .cb-btn {
        flex: 1 1 auto;
    }
}

/* Staff directory */
.cb-staff-v2 {
    --staff-v2-ink: #11183f;
    --staff-v2-muted: #7f88a6;
    --staff-v2-line: #e3e7f0;
    --staff-v2-soft: #f6f7fb;
    --staff-v2-purple: #6849f5;
    display: grid;
    width: 100%;
    gap: 18px;
    color: var(--staff-v2-ink);
}

.cb-staff-v2 [hidden] {
    display: none !important;
}

.cb-staff-v2-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 2px 2px;
}

.cb-staff-v2-page-head > div {
    min-width: 0;
}

.cb-staff-v2-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--staff-v2-purple);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cb-staff-v2-page-head h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0;
}

.cb-staff-v2-page-head p {
    margin: 7px 0 0;
    color: var(--staff-v2-muted);
    font-size: 14px;
}

.cb-staff-v2-add {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 42px;
    border-radius: 8px;
    background: var(--staff-v2-purple);
    box-shadow: 0 8px 18px rgba(104, 73, 245, 0.18);
}

.cb-staff-v2-add svg {
    width: 16px;
    height: 16px;
}

.cb-staff-v2-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--staff-v2-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(27, 35, 70, 0.035);
}

.cb-staff-v2-summary > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 16px 18px;
}

.cb-staff-v2-summary > div + div {
    border-left: 1px solid var(--staff-v2-line);
}

.cb-staff-v2-summary-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: #6748ef;
    background: #f1edff;
}

.cb-staff-v2-summary-icon.is-green {
    color: #079569;
    background: #eaf9f3;
}

.cb-staff-v2-summary-icon.is-blue {
    color: #3474dc;
    background: #edf4ff;
}

.cb-staff-v2-summary-icon.is-amber {
    color: #c77709;
    background: #fff5df;
}

.cb-staff-v2-summary-icon svg {
    width: 18px;
    height: 18px;
}

.cb-staff-v2-summary p {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
    margin: 0;
}

.cb-staff-v2-summary small {
    color: var(--staff-v2-muted);
    font-size: 11px;
    font-weight: 700;
}

.cb-staff-v2-summary strong {
    grid-row: 1 / 3;
    grid-column: 2;
    font-size: 24px;
    line-height: 1;
}

.cb-staff-v2-summary em {
    color: #a0a7ba;
    font-size: 11px;
    font-style: normal;
}

.cb-staff-v2-directory {
    overflow: hidden;
    border: 1px solid var(--staff-v2-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(27, 35, 70, 0.04);
}

.cb-staff-v2-directory-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 78px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--staff-v2-line);
}

.cb-staff-v2-directory-head h2 {
    margin: 0;
    font-size: 16px;
    letter-spacing: 0;
}

.cb-staff-v2-directory-head p {
    margin: 4px 0 0;
    color: var(--staff-v2-muted);
    font-size: 11px;
}

.cb-staff-v2-directory-controls {
    display: grid;
    grid-template-columns: minmax(210px, 1.7fr) repeat(4, minmax(110px, 0.8fr)) 38px;
    justify-self: stretch;
    gap: 8px;
    min-width: 0;
}

.cb-staff-v2-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 38px;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    color: #949cb2;
    background: #fff;
}

.cb-staff-v2-search > span {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
}

.cb-staff-v2-search svg {
    width: 16px;
    height: 16px;
}

.cb-staff-v2-search input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    color: var(--staff-v2-ink);
    background: transparent;
    font: inherit;
    font-size: 12px;
}

.cb-staff-v2-directory-controls select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 28px 0 10px;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    outline: 0;
    color: #4a5574;
    background-color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
}

.cb-staff-v2-search:focus-within,
.cb-staff-v2-directory-controls select:focus {
    border-color: #9f8cff;
    box-shadow: 0 0 0 3px rgba(104, 73, 245, 0.09);
}

.cb-staff-v2-reset,
.cb-staff-v2-actions button {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #dfe4ee;
    border-radius: 8px;
    color: #75809c;
    background: #fff;
    cursor: pointer;
}

.cb-staff-v2-reset:hover,
.cb-staff-v2-actions button:hover {
    border-color: #c8bfff;
    color: var(--staff-v2-purple);
    background: #f8f6ff;
}

.cb-staff-v2-reset svg,
.cb-staff-v2-actions svg {
    width: 16px;
    height: 16px;
}

.cb-staff-v2-table-head,
.cb-staff-v2-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) minmax(130px, 0.85fr) minmax(125px, 0.8fr) minmax(125px, 0.8fr) 90px 110px 118px;
    align-items: center;
    gap: 12px;
}

.cb-staff-v2-table-head {
    min-height: 38px;
    padding: 0 16px;
    color: #9199af;
    background: #fafbfe;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-staff-v2-row {
    min-height: 70px;
    padding: 11px 16px;
    border-top: 1px solid #edf0f5;
}

.cb-staff-v2-list .cb-staff-v2-row:first-child {
    border-top: 0;
}

.cb-staff-v2-row:hover {
    background: #fbfbfe;
}

.cb-staff-v2-person {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.cb-staff-v2-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #6849f5;
    font-size: 12px;
    font-weight: 800;
}

.cb-staff-v2-avatar.tone-blue { background: #3f82ea; }
.cb-staff-v2-avatar.tone-teal { background: #14a894; }
.cb-staff-v2-avatar.tone-amber { background: #e99114; }
.cb-staff-v2-avatar.tone-pink { background: #e95188; }
.cb-staff-v2-avatar.tone-lime { background: #75b906; }
.cb-staff-v2-avatar.tone-indigo { background: #5263d8; }
.cb-staff-v2-avatar.tone-mint { background: #0b9f71; }

.cb-staff-v2-person p,
.cb-staff-v2-cell {
    display: grid;
    min-width: 0;
    gap: 4px;
    margin: 0;
}

.cb-staff-v2-person strong,
.cb-staff-v2-cell strong {
    overflow: hidden;
    color: var(--staff-v2-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-staff-v2-person a,
.cb-staff-v2-person p > span,
.cb-staff-v2-cell span {
    overflow: hidden;
    color: var(--staff-v2-muted);
    font-size: 10px;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-staff-v2-person a:hover {
    color: var(--staff-v2-purple);
}

.cb-staff-v2-account > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #686f82;
    background: #f0f2f6;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.cb-staff-v2-account > span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.cb-staff-v2-account > span.is-connected {
    color: #087c59;
    background: #e8f8f1;
}

.cb-staff-v2-account > span.is-invite-sent {
    color: #b66b06;
    background: #fff4dd;
}

.cb-staff-v2-account > span.is-no-invite {
    color: #6750cf;
    background: #f0edff;
}

.cb-staff-v2-account > span.is-inactive {
    color: #8a5260;
    background: #f7ecef;
}

.cb-staff-v2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cb-staff-v2-actions button {
    width: 34px;
    height: 34px;
    border-radius: 7px;
}

.cb-staff-v2-actions form {
    display: contents;
}

.cb-staff-v2-no-action {
    color: #b3b8c7;
    font-size: 12px;
}

.cb-staff-v2-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 30px;
    border-top: 1px solid var(--staff-v2-line);
    text-align: center;
}

.cb-staff-v2-empty > span {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    place-items: center;
    border-radius: 8px;
    color: var(--staff-v2-purple);
    background: #f0edff;
}

.cb-staff-v2-empty svg {
    width: 19px;
    height: 19px;
}

.cb-staff-v2-empty strong {
    font-size: 14px;
}

.cb-staff-v2-empty p {
    margin: 0 0 6px;
    color: var(--staff-v2-muted);
    font-size: 12px;
}

.cb-modal.cb-staff-v2-modal {
    --staff-v2-ink: #11183f;
    --staff-v2-muted: #7f88a6;
    --staff-v2-line: #e3e7f0;
    --staff-v2-purple: #6849f5;
}

.cb-modal.cb-staff-v2-modal .cb-modal-dialog {
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: 16px auto;
    overflow: hidden;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(17, 24, 63, 0.22);
}

.cb-modal.cb-staff-v2-modal .cb-modal-head {
    flex: 0 0 auto;
    min-height: 62px;
    padding: 12px 18px;
    border-bottom: 1px solid #e5e8ef;
}

.cb-modal.cb-staff-v2-modal .cb-modal-head h2 {
    font-size: 17px;
    letter-spacing: 0;
}

.cb-modal.cb-staff-v2-modal .cb-modal-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 7px;
}

.cb-modal.cb-staff-v2-modal .cb-modal-body {
    min-height: 0;
    padding: 0;
    overflow-y: auto;
}

.cb-staff-v2-form {
    display: grid;
    color: var(--staff-v2-ink);
}

.cb-staff-v2-form-intro {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8f7ff;
}

.cb-staff-v2-form-intro > span,
.cb-staff-v2-form-section > header > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: var(--staff-v2-purple);
    background: #ece8ff;
}

.cb-staff-v2-form-intro svg,
.cb-staff-v2-form-section > header svg {
    width: 17px;
    height: 17px;
}

.cb-staff-v2-form-intro strong,
.cb-staff-v2-form-section > header strong {
    display: block;
    font-size: 13px;
}

.cb-staff-v2-form-intro p,
.cb-staff-v2-form-section > header p {
    margin: 3px 0 0;
    color: var(--staff-v2-muted);
    font-size: 11px;
    line-height: 1.45;
}

.cb-staff-v2-form-section {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
    border-top: 1px solid #e8eaf0;
}

.cb-staff-v2-form-section > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.cb-staff-v2-form-section > header > span {
    width: 34px;
    height: 34px;
    color: #52617d;
    background: #f1f3f7;
}

.cb-staff-v2-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-staff-v2-fields-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-staff-v2-fields label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #3c4665;
    font-size: 11px;
    font-weight: 700;
}

.cb-staff-v2-fields input,
.cb-staff-v2-fields select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dce2ec;
    border-radius: 7px;
    outline: 0;
    color: var(--staff-v2-ink);
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
}

.cb-staff-v2-fields input:focus,
.cb-staff-v2-fields select:focus {
    border-color: #9581fa;
    box-shadow: 0 0 0 3px rgba(104, 73, 245, 0.09);
}

.cb-staff-v2-field-wide {
    grid-column: 1 / -1;
}

.cb-staff-v2-form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 20px;
    border-top: 1px solid #e5e8ef;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(17, 24, 63, 0.035);
}

.cb-staff-v2-form-actions .cb-btn {
    min-height: 40px;
    border-radius: 7px;
    box-shadow: none;
}

.cb-staff-v2-form-actions .cb-btn-primary {
    background: var(--staff-v2-purple);
}

@media (max-width: 1180px) {
    .cb-staff-v2-directory-head {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cb-staff-v2-directory-head > div:first-child {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
    }

    .cb-staff-v2-directory-head > div:first-child p {
        margin: 0;
    }
}

@media (max-width: 980px) {
    .cb-staff-v2-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-staff-v2-summary > div:nth-child(3) {
        border-top: 1px solid var(--staff-v2-line);
        border-left: 0;
    }

    .cb-staff-v2-summary > div:nth-child(4) {
        border-top: 1px solid var(--staff-v2-line);
    }

    .cb-staff-v2-directory-controls {
        grid-template-columns: minmax(210px, 1.5fr) repeat(2, minmax(120px, 1fr)) 38px;
    }

    .cb-staff-v2-search {
        grid-column: 1;
    }

    .cb-staff-v2-directory-controls select:nth-of-type(1) {
        grid-column: 2;
    }

    .cb-staff-v2-directory-controls select:nth-of-type(2) {
        grid-column: 3;
    }

    .cb-staff-v2-directory-controls select:nth-of-type(3),
    .cb-staff-v2-directory-controls select:nth-of-type(4) {
        grid-row: 2;
    }

    .cb-staff-v2-directory-controls select:nth-of-type(3) {
        grid-column: 1 / 3;
    }

    .cb-staff-v2-directory-controls select:nth-of-type(4) {
        grid-column: 3 / 5;
    }

    .cb-staff-v2-reset {
        grid-row: 1;
        grid-column: 4;
    }

    .cb-staff-v2-table-head {
        display: none;
    }

    .cb-staff-v2-row {
        grid-template-areas:
            "person role location actions"
            "person contract pay account";
        grid-template-columns: minmax(220px, 1.4fr) minmax(130px, 1fr) minmax(130px, 1fr) 118px;
        gap: 10px 16px;
        min-height: 92px;
    }

    .cb-staff-v2-person { grid-area: person; }
    .cb-staff-v2-role { grid-area: role; }
    .cb-staff-v2-location { grid-area: location; }
    .cb-staff-v2-contract { grid-area: contract; }
    .cb-staff-v2-pay { grid-area: pay; }
    .cb-staff-v2-account { grid-area: account; }
    .cb-staff-v2-actions { grid-area: actions; }
}

@media (max-width: 680px) {
    .cb-staff-v2 {
        gap: 14px;
    }

    .cb-staff-v2-page-head {
        align-items: flex-start;
    }

    .cb-staff-v2-page-head h1 {
        font-size: 27px;
    }

    .cb-staff-v2-page-head p {
        max-width: 250px;
        font-size: 12px;
    }

    .cb-staff-v2-add {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .cb-staff-v2-add span {
        display: none;
    }

    .cb-staff-v2-summary > div {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        min-height: 78px;
        padding: 12px;
    }

    .cb-staff-v2-summary-icon {
        width: 32px;
        height: 32px;
    }

    .cb-staff-v2-summary strong {
        font-size: 20px;
    }

    .cb-staff-v2-summary em {
        display: none;
    }

    .cb-staff-v2-summary p {
        grid-template-columns: 1fr auto;
    }

    .cb-staff-v2-directory-head {
        padding: 14px;
    }

    .cb-staff-v2-directory-controls {
        grid-template-columns: 1fr 38px;
    }

    .cb-staff-v2-search {
        grid-column: 1 / -1;
    }

    .cb-staff-v2-directory-controls select,
    .cb-staff-v2-directory-controls select:nth-of-type(3),
    .cb-staff-v2-directory-controls select:nth-of-type(4) {
        grid-row: auto;
    }

    .cb-staff-v2-directory-controls select:nth-of-type(1),
    .cb-staff-v2-directory-controls select:nth-of-type(2),
    .cb-staff-v2-directory-controls select:nth-of-type(3),
    .cb-staff-v2-directory-controls select:nth-of-type(4) {
        grid-row: auto;
        grid-column: 1;
    }

    .cb-staff-v2-reset {
        grid-row: 2;
        grid-column: 2;
    }

    .cb-staff-v2-row {
        grid-template-areas:
            "person actions"
            "role account"
            "location contract"
            "pay pay";
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 13px 12px;
        padding: 14px;
    }

    .cb-staff-v2-cell,
    .cb-staff-v2-account {
        align-self: start;
    }

    .cb-staff-v2-cell::before,
    .cb-staff-v2-account::before {
        display: block;
        margin-bottom: 4px;
        color: #9ba2b5;
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cb-staff-v2-contract {
        justify-self: end;
        text-align: right;
    }

    .cb-staff-v2-account {
        justify-self: end;
        text-align: right;
    }

    .cb-staff-v2-pay {
        padding-top: 2px;
        border-top: 1px solid #eef0f5;
    }

    .cb-staff-v2-actions button {
        width: 32px;
        height: 32px;
    }

    .cb-modal.cb-staff-v2-modal .cb-modal-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        margin: 8px auto;
    }

    .cb-staff-v2-fields,
    .cb-staff-v2-fields-three {
        grid-template-columns: 1fr;
    }

    .cb-staff-v2-field-wide {
        grid-column: auto;
    }

    .cb-staff-v2-form-section,
    .cb-staff-v2-form-intro {
        padding-right: 14px;
        padding-left: 14px;
    }

    .cb-staff-v2-form-actions {
        padding: 12px 14px;
    }

    .cb-staff-v2-form-actions .cb-btn {
        flex: 1 1 auto;
        padding: 0 12px;
    }
}

/* Staff offboarding */
.cb-staff-v2-row.is-terminated {
    background: #fcfbfc;
}

.cb-staff-v2-row.is-terminated:hover {
    background: #faf8f9;
}

.cb-staff-v2-account {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.cb-staff-v2-account > span.is-terminated {
    color: #a43d53;
    background: #f8e9ed;
}

.cb-staff-v2-account > small {
    color: #989faf;
    font-size: 9px;
    white-space: nowrap;
}

.cb-staff-v2-actions button.is-danger {
    border-color: #f0cbd3;
    color: #c63f58;
    background: #fff7f8;
}

.cb-staff-v2-actions button.is-danger:hover {
    border-color: #e69bab;
    color: #ae2943;
    background: #fff0f3;
}

.cb-staff-v2-actions button.is-record {
    color: #7156d9;
    background: #f7f4ff;
}

.cb-modal.cb-staff-v2-termination-modal .cb-modal-dialog {
    width: min(720px, calc(100vw - 32px));
}

.cb-staff-v2-termination-form {
    display: grid;
    color: var(--staff-v2-ink);
}

.cb-staff-v2-termination-intro {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 17px 20px;
    border-bottom: 1px solid #efdce1;
    background: #fff6f7;
}

.cb-staff-v2-termination-intro > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #bd3851;
    background: #f8dfe5;
}

.cb-staff-v2-termination-intro svg {
    width: 19px;
    height: 19px;
}

.cb-staff-v2-termination-intro strong {
    display: block;
    font-size: 13px;
}

.cb-staff-v2-termination-intro strong b {
    font-weight: 800;
}

.cb-staff-v2-termination-intro p {
    margin: 4px 0 0;
    color: #805b65;
    font-size: 11px;
    line-height: 1.45;
}

.cb-staff-v2-termination-section {
    display: grid;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid #e7e9f0;
}

.cb-staff-v2-termination-section > header {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.cb-staff-v2-termination-section > header > b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: #6a4ef3;
    font-size: 11px;
}

.cb-staff-v2-termination-section > header strong {
    display: block;
    font-size: 13px;
}

.cb-staff-v2-termination-section > header p {
    margin: 3px 0 0;
    color: var(--staff-v2-muted);
    font-size: 10px;
    line-height: 1.45;
}

.cb-staff-v2-outcome-options,
.cb-staff-v2-rehire-options {
    display: grid;
    margin: 0;
    padding: 0;
    border: 0;
}

.cb-staff-v2-outcome-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-staff-v2-outcome-options label,
.cb-staff-v2-rehire-options label {
    position: relative;
    cursor: pointer;
}

.cb-staff-v2-outcome-options input,
.cb-staff-v2-rehire-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cb-staff-v2-outcome-options label > span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 0 10px;
    min-height: 68px;
    padding: 11px 13px;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    background: #fff;
}

.cb-staff-v2-outcome-options svg {
    grid-row: 1 / 3;
    width: 18px;
    height: 18px;
    padding: 7px;
    box-sizing: content-box;
    border-radius: 7px;
    color: #6b55db;
    background: #efecff;
}

.cb-staff-v2-outcome-options strong {
    font-size: 12px;
}

.cb-staff-v2-outcome-options small {
    color: var(--staff-v2-muted);
    font-size: 9px;
}

.cb-staff-v2-outcome-options input:checked + span {
    border-color: #917df7;
    background: #faf9ff;
    box-shadow: 0 0 0 3px rgba(106, 78, 243, 0.08);
}

.cb-staff-v2-outcome-options input:focus-visible + span,
.cb-staff-v2-rehire-options input:focus-visible + span {
    outline: 3px solid rgba(106, 78, 243, 0.18);
    outline-offset: 2px;
}

.cb-staff-v2-termination-fields {
    display: grid;
    grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
    gap: 12px;
}

.cb-staff-v2-termination-fields label {
    display: grid;
    align-content: start;
    gap: 6px;
    color: #3c4665;
    font-size: 11px;
    font-weight: 700;
}

.cb-staff-v2-termination-fields label.is-wide {
    grid-column: 2;
    grid-row: 1;
}

.cb-staff-v2-termination-fields input,
.cb-staff-v2-termination-fields textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #dce2ec;
    border-radius: 7px;
    outline: 0;
    color: var(--staff-v2-ink);
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
}

.cb-staff-v2-termination-fields input {
    min-height: 42px;
    padding: 0 11px;
}

.cb-staff-v2-termination-fields textarea {
    min-height: 96px;
    padding: 10px 11px;
    line-height: 1.5;
    resize: vertical;
}

.cb-staff-v2-termination-fields input:focus,
.cb-staff-v2-termination-fields textarea:focus {
    border-color: #9581fa;
    box-shadow: 0 0 0 3px rgba(104, 73, 245, 0.09);
}

.cb-staff-v2-termination-fields label > small {
    color: #969db0;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
}

.cb-staff-v2-rehire-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.cb-staff-v2-rehire-options legend {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    color: #3c4665;
    font-size: 11px;
    font-weight: 700;
}

.cb-staff-v2-rehire-options label > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid #dfe3ec;
    border-radius: 7px;
    color: #4a5574;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
}

.cb-staff-v2-rehire-options svg {
    width: 15px;
    height: 15px;
}

.cb-staff-v2-rehire-options input[value="yes"]:checked + span {
    border-color: #77c7aa;
    color: #087c59;
    background: #eefaf5;
}

.cb-staff-v2-rehire-options input[value="no"]:checked + span {
    border-color: #e7a5b2;
    color: #aa3149;
    background: #fff4f6;
}

.cb-staff-v2-termination-effects {
    padding: 12px 13px;
    border: 1px solid #e1e4ed;
    border-radius: 8px;
    background: #f8f9fc;
}

.cb-staff-v2-termination-effects > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    text-transform: uppercase;
}

.cb-staff-v2-termination-effects ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-staff-v2-termination-effects li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #69728d;
    font-size: 10px;
}

.cb-staff-v2-termination-effects svg {
    width: 14px;
    height: 14px;
    color: #6b55db;
}

.cb-staff-v2-termination-confirm {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    cursor: pointer;
}

.cb-staff-v2-termination-confirm input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: #bd3851;
}

.cb-staff-v2-termination-confirm span {
    display: grid;
    gap: 2px;
}

.cb-staff-v2-termination-confirm strong {
    font-size: 10px;
}

.cb-staff-v2-termination-confirm small {
    color: var(--staff-v2-muted);
    font-size: 9px;
    line-height: 1.4;
}

.cb-staff-v2-termination-submit {
    border-color: #bb3650;
    color: #fff;
    background: #bb3650;
}

.cb-staff-v2-termination-submit:hover {
    border-color: #a72d45;
    color: #fff;
    background: #a72d45;
}

.cb-staff-v2-termination-submit:disabled {
    cursor: wait;
    opacity: 0.65;
}

.cb-staff-v2-termination-form > .cb-staff-v2-form-actions {
    position: static;
}

.cb-staff-v2-form-intro.is-terminated {
    border-bottom: 1px solid #eddde1;
    background: #fff7f8;
}

.cb-staff-v2-form-intro.is-terminated > span {
    color: #b33a51;
    background: #f7e1e6;
}

.cb-modal.cb-staff-v2-record-modal .cb-modal-dialog {
    width: min(620px, calc(100vw - 32px));
}

.cb-staff-v2-termination-record {
    display: grid;
    color: var(--staff-v2-ink);
}

.cb-staff-v2-termination-record-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #e7e9f0;
}

.cb-staff-v2-termination-record-head > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #7a5adb;
    background: #efebff;
}

.cb-staff-v2-termination-record-head svg {
    width: 18px;
    height: 18px;
}

.cb-staff-v2-termination-record-head strong {
    display: block;
    font-size: 13px;
}

.cb-staff-v2-termination-record-head p {
    margin: 3px 0 0;
    color: var(--staff-v2-muted);
    font-size: 10px;
}

.cb-staff-v2-termination-record-head em {
    min-height: 25px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #a43d53;
    background: #f8e9ed;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.cb-staff-v2-termination-record dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 5px 20px;
    border-bottom: 1px solid #e7e9f0;
}

.cb-staff-v2-termination-record dl > div {
    display: grid;
    gap: 4px;
    padding: 13px 0;
}

.cb-staff-v2-termination-record dl > div:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid #e7e9f0;
}

.cb-staff-v2-termination-record dt,
.cb-staff-v2-termination-record > section > span {
    color: #9299ad;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-staff-v2-termination-record dd {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.cb-staff-v2-termination-record > section {
    display: grid;
    gap: 8px;
    padding: 17px 20px;
    border-bottom: 1px solid #e7e9f0;
}

.cb-staff-v2-termination-record > section p {
    margin: 0;
    color: #4f5873;
    font-size: 11px;
    line-height: 1.6;
}

.cb-staff-v2-record-note {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 16px 20px 0;
    padding: 11px 12px;
    border: 1px solid #e3e6ed;
    border-radius: 8px;
    background: #f8f9fb;
}

.cb-staff-v2-record-note > svg {
    width: 17px;
    height: 17px;
    color: #6d7690;
}

.cb-staff-v2-record-note p {
    display: grid;
    gap: 2px;
    margin: 0;
}

.cb-staff-v2-record-note strong {
    font-size: 10px;
}

.cb-staff-v2-record-note span {
    color: var(--staff-v2-muted);
    font-size: 9px;
    line-height: 1.4;
}

.cb-staff-v2-termination-record > footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
}

.cb-staff-v2-termination-record > footer .cb-btn {
    min-height: 38px;
    border-radius: 7px;
}

@media (max-width: 680px) {
    .cb-staff-v2-account {
        justify-items: end;
    }

    .cb-staff-v2-termination-intro,
    .cb-staff-v2-termination-section {
        padding-right: 14px;
        padding-left: 14px;
    }

    .cb-staff-v2-outcome-options,
    .cb-staff-v2-rehire-options,
    .cb-staff-v2-termination-fields {
        grid-template-columns: 1fr;
    }

    .cb-staff-v2-termination-fields label.is-wide {
        grid-row: auto;
        grid-column: auto;
    }

    .cb-staff-v2-termination-record-head {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 15px 14px;
    }

    .cb-staff-v2-termination-record-head em {
        grid-column: 2;
        justify-self: start;
    }

    .cb-staff-v2-termination-record dl {
        padding-right: 14px;
        padding-left: 14px;
    }

    .cb-staff-v2-termination-record dl > div:nth-child(even) {
        padding-left: 12px;
    }

    .cb-staff-v2-termination-record > section {
        padding-right: 14px;
        padding-left: 14px;
    }

    .cb-staff-v2-record-note {
        margin-right: 14px;
        margin-left: 14px;
    }

    .cb-staff-v2-termination-record > footer {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* Keep rota v3 overrides after legacy rota styles. */
.cb-page-body-rota .cb-page-stack.cb-rota-v3 {
    display: grid;
    gap: 12px;
}

.cb-page-body-rota .cb-rota-v3 > *,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-shell,
.cb-page-body-rota .cb-rota-v3 .cb-rota-v2-boardwrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cb-page-body-rota .cb-rota-v2-toolbar.cb-rota-v3-commandbar {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e3e7f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(40, 52, 96, 0.04);
}

.cb-page-body-rota .cb-rota-v2-weeknav.cb-rota-v3-weeknav {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 7px;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v2-actions.cb-rota-v3-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    gap: 6px;
    min-width: 0;
    max-width: none;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v3-actions > .cb-rota-v2-badge,
.cb-page-body-rota .cb-rota-v3-actions > form {
    display: none !important;
}

.cb-page-body-rota .cb-rota-v2-confirm-modal,
.cb-page-body-rota .cb-rota-v2-autoschedule {
    border-radius: 8px;
}

@media (max-width: 1540px) {
    .cb-page-body-rota .cb-rota-v2-toolbar.cb-rota-v3-commandbar {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
    }

    .cb-page-body-rota .cb-rota-v2-actions.cb-rota-v3-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .cb-page-body-rota .cb-rota-v2-toolbar.cb-rota-v3-commandbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 9px;
    }

    .cb-page-body-rota .cb-rota-v2-actions.cb-rota-v3-actions {
        grid-column: auto;
        justify-content: flex-start;
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Operations modules: shift swaps, time off, and documents */
.cb-page-body-shift-swaps .cb-page-shell,
.cb-page-body-time-off .cb-page-shell,
.cb-page-body-documents .cb-page-shell,
.cb-page-body-leave-requests .cb-page-shell,
.cb-page-body-time-clock .cb-page-shell,
.cb-page-body-locations .cb-page-shell,
.cb-page-body-departments .cb-page-shell,
.cb-page-body-payroll .cb-page-shell,
.cb-page-body-analytics .cb-page-shell,
.cb-page-body-compliance .cb-page-shell {
    width: min(1460px, 100%);
    padding: 24px 28px 48px;
    background: #f5f7fb;
}

.cb-ops-v2,
.cb-ops-v2 * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.cb-ops-v2 {
    width: 100%;
    display: grid;
    gap: 16px;
    color: #17203f;
}

.cb-ops-v2 [hidden] {
    display: none !important;
}

.cb-ops-v2-header {
    min-height: 78px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 2px 2px 6px;
}

.cb-ops-v2-heading {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.cb-ops-v2-heading h1 {
    margin: 0;
    color: #111a3f;
    font-size: 31px;
    line-height: 1.08;
    font-weight: 800;
}

.cb-ops-v2-heading p {
    max-width: 720px;
    margin: 0;
    color: #75809d;
    font-size: 13px;
    line-height: 1.5;
}

.cb-ops-v2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b52f2;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-ops-v2-kicker svg,
.cb-ops-v2-primary svg,
.cb-ops-v2-button svg,
.cb-ops-v2-icon-button svg,
.cb-ops-v2-text-link svg,
.cb-ops-v2-alert > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.cb-ops-v2-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.cb-ops-v2-primary,
.cb-ops-v2-button,
.cb-ops-v2-icon-button {
    min-height: 36px;
    border: 1px solid #dfe4ef;
    border-radius: 6px;
    background: #ffffff;
    color: #37415f;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.cb-ops-v2-primary,
.cb-ops-v2-button {
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.cb-ops-v2-primary,
.cb-ops-v2-button.is-primary {
    border-color: #6b52f2;
    background: #6b52f2;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(79, 55, 195, 0.16);
}

.cb-ops-v2-primary:hover,
.cb-ops-v2-button.is-primary:hover {
    border-color: #5b43df;
    background: #5b43df;
}

.cb-ops-v2-primary:disabled,
.cb-ops-v2-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

.cb-ops-v2-button:hover,
.cb-ops-v2-icon-button:hover {
    border-color: #c8cfdf;
    background: #f8f9fc;
}

.cb-ops-v2-button.is-danger,
.cb-ops-v2-icon-button.is-danger {
    border-color: #f0cbd4;
    color: #c63c5e;
    background: #fffafb;
}

.cb-ops-v2-button.is-danger-solid {
    border-color: #c83f60;
    background: #c83f60;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(174, 40, 71, 0.15);
}

.cb-ops-v2-button.is-compact {
    min-height: 32px;
    padding: 0 10px;
}

.cb-ops-v2-icon-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cb-ops-v2 .cb-flash {
    margin: 0;
    padding: 11px 13px;
    border-radius: 6px;
    font-size: 12px;
}

.cb-ops-v2-alert {
    min-height: 54px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #f1cbd5;
    border-radius: 7px;
    background: #fff8fa;
    color: #a83753;
}

.cb-ops-v2-alert div {
    display: grid;
    gap: 2px;
}

.cb-ops-v2-alert strong {
    font-size: 12px;
}

.cb-ops-v2-alert span {
    color: #8d6170;
    font-size: 11px;
}

.cb-ops-v2-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e1e5ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(34, 42, 78, 0.04);
    overflow: hidden;
}

.cb-ops-v2-metric {
    position: relative;
    min-height: 92px;
    padding: 15px 18px;
    display: grid;
    align-content: center;
    gap: 3px;
    border-right: 1px solid #e8ebf2;
}

.cb-ops-v2-metric:last-child {
    border-right: 0;
}

.cb-ops-v2-metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #745af4;
}

.cb-ops-v2-metric.is-blue::before { background: #3683e9; }
.cb-ops-v2-metric.is-green::before { background: #00a978; }
.cb-ops-v2-metric.is-amber::before { background: #e49a15; }
.cb-ops-v2-metric.is-rose::before { background: #db5574; }

.cb-ops-v2-metric span {
    color: #838ca4;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.cb-ops-v2-metric strong {
    color: #151e42;
    font-size: 23px;
    line-height: 1.15;
    font-weight: 800;
}

.cb-ops-v2-metric small {
    color: #9aa2b6;
    font-size: 10px;
    line-height: 1.3;
}

.cb-ops-v2-panel {
    min-width: 0;
    border: 1px solid #e1e5ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 9px 25px rgba(34, 42, 78, 0.045);
    overflow: hidden;
}

.cb-ops-v2-panel-head {
    min-height: 74px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e9ecf3;
}

.cb-ops-v2-panel-head > div:first-child,
.cb-ops-v2-panel-title > div > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-ops-v2-panel h2,
.cb-ops-v2-panel-title h2 {
    margin: 0;
    color: #17203f;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

.cb-ops-v2-panel-head p,
.cb-ops-v2-panel-title p {
    margin: 0;
    color: #8a93aa;
    font-size: 10px;
    line-height: 1.4;
}

.cb-ops-v2-toolbar {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cb-ops-v2-search {
    position: relative;
    width: min(330px, 32vw);
    min-width: 210px;
    height: 36px;
    display: flex;
    align-items: center;
}

.cb-ops-v2-search svg {
    position: absolute;
    left: 11px;
    width: 15px;
    height: 15px;
    color: #919ab0;
    pointer-events: none;
}

.cb-ops-v2-search input,
.cb-ops-v2-select-filter select,
.cb-ops-v2-form input,
.cb-ops-v2-form select,
.cb-ops-v2-form textarea,
.cb-swaps-v2-approve-form select {
    width: 100%;
    border: 1px solid #dfe4ef;
    border-radius: 6px;
    background: #fafbfe;
    color: #253052;
    font: inherit;
    font-size: 11px;
    outline: none;
}

.cb-ops-v2-search input {
    height: 36px;
    padding: 0 11px 0 34px;
}

.cb-ops-v2-search input:focus,
.cb-ops-v2-select-filter select:focus,
.cb-ops-v2-form input:focus,
.cb-ops-v2-form select:focus,
.cb-ops-v2-form textarea:focus,
.cb-swaps-v2-approve-form select:focus {
    border-color: #8b77f7;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(107, 82, 242, 0.09);
}

.cb-ops-v2-segments {
    min-height: 36px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e3e6ef;
    border-radius: 6px;
    background: #f4f6fa;
}

.cb-ops-v2-segments button {
    min-height: 28px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #6f7994;
    font: inherit;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.cb-ops-v2-segments button span {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e6e9f1;
    color: #747e98;
    font-size: 9px;
}

.cb-ops-v2-segments button.is-active {
    background: #ffffff;
    color: #5c45df;
    box-shadow: 0 1px 4px rgba(43, 50, 80, 0.11);
}

.cb-ops-v2-segments button.is-active span {
    background: #eeeaff;
    color: #654be8;
}

.cb-ops-v2-select-filter {
    width: 142px;
}

.cb-ops-v2-select-filter select {
    height: 36px;
    padding: 0 28px 0 10px;
}

.cb-ops-v2-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #ece8ff;
    color: #654ae8;
    font-size: 10px;
    font-weight: 800;
}

.cb-ops-v2-avatar.is-blue { background: #e7f1ff; color: #2875d0; }
.cb-ops-v2-avatar.is-neutral { background: #f0f2f6; color: #778098; }

.cb-ops-v2-status {
    width: max-content;
    max-width: 100%;
    min-height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    background: #f1f3f7;
    color: #67718b;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.cb-ops-v2-status i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: currentColor;
}

.cb-ops-v2-status.is-pending { background: #fff4dc; color: #a96b00; }
.cb-ops-v2-status.is-approved { background: #e5f8f1; color: #008b63; }
.cb-ops-v2-status.is-declined { background: #fff0f3; color: #c84462; }

.cb-ops-v2-empty {
    min-height: 190px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.cb-ops-v2-empty.is-compact {
    min-height: 150px;
}

.cb-ops-v2-empty > span {
    width: 38px;
    height: 38px;
    margin-bottom: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f0edff;
    color: #6b52f2;
}

.cb-ops-v2-empty svg {
    width: 19px;
    height: 19px;
}

.cb-ops-v2-empty strong {
    color: #273152;
    font-size: 12px;
}

.cb-ops-v2-empty p {
    max-width: 420px;
    margin: 0;
    color: #8d96ac;
    font-size: 10px;
    line-height: 1.5;
}

.cb-ops-v2-panel-title {
    min-height: 68px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e9ecf3;
}

.cb-ops-v2-panel-title > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-ops-v2-title-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff4dc;
    color: #ac7000;
}

.cb-ops-v2-title-icon.is-blue { background: #e8f2ff; color: #2f78ce; }
.cb-ops-v2-title-icon svg { width: 16px; height: 16px; }

.cb-ops-v2-count {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff1d3;
    color: #a66a00;
    font-size: 11px;
    font-weight: 800;
}

.cb-ops-v2-text-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #5f49df;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* Shift swaps */
.cb-swaps-v2-row {
    min-height: 96px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(285px, 1.15fr) minmax(230px, 0.9fr) 145px minmax(225px, auto);
    align-items: center;
    gap: 17px;
    border-bottom: 1px solid #edf0f5;
}

.cb-swaps-v2-row:last-child {
    border-bottom: 0;
}

.cb-swaps-v2-row:hover {
    background: #fbfcfe;
}

.cb-swaps-v2-people {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.cb-swaps-v2-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-swaps-v2-person > div,
.cb-swaps-v2-shift > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-swaps-v2-person small,
.cb-swaps-v2-shift small,
.cb-swaps-v2-state small {
    color: #929bb1;
    font-size: 9px;
    line-height: 1.3;
}

.cb-swaps-v2-person strong,
.cb-swaps-v2-shift strong {
    min-width: 0;
    overflow: hidden;
    color: #1b2547;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-swaps-v2-direction {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f0f2f7;
    color: #8992a9;
}

.cb-swaps-v2-direction svg { width: 13px; height: 13px; }

.cb-swaps-v2-shift {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-swaps-v2-shift span:not(.cb-swaps-v2-date-icon) {
    color: #5e6986;
    font-size: 10px;
    line-height: 1.3;
}

.cb-swaps-v2-date-icon {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef3fb;
    color: #4c6d9e;
}

.cb-swaps-v2-date-icon svg { width: 16px; height: 16px; }

.cb-swaps-v2-state {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.cb-swaps-v2-actions,
.cb-swaps-v2-approve-form {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cb-swaps-v2-actions form {
    margin: 0;
}

.cb-swaps-v2-approve-form label {
    width: 136px;
}

.cb-swaps-v2-approve-form select {
    height: 34px;
    padding: 0 25px 0 9px;
}

/* Time off */
.cb-timeoff-v2-workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
    align-items: stretch;
    gap: 16px;
}

.cb-timeoff-v2-request,
.cb-timeoff-v2-away {
    min-height: 70px;
    padding: 10px 14px;
    display: grid;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #edf0f5;
}

.cb-timeoff-v2-request:last-child,
.cb-timeoff-v2-away:last-child {
    border-bottom: 0;
}

.cb-timeoff-v2-request {
    grid-template-columns: minmax(190px, 1fr) minmax(170px, 0.8fr) auto;
}

.cb-timeoff-v2-request-person,
.cb-timeoff-v2-member {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-timeoff-v2-request-person > div,
.cb-timeoff-v2-member > div,
.cb-timeoff-v2-away > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-timeoff-v2-request-person strong,
.cb-timeoff-v2-member strong,
.cb-timeoff-v2-away strong {
    overflow: hidden;
    color: #1c2648;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-timeoff-v2-request-person span,
.cb-timeoff-v2-member span,
.cb-timeoff-v2-away span:not(.cb-ops-v2-status):not(.cb-ops-v2-avatar):not(.cb-timeoff-v2-timeline-mark) {
    color: #8791aa;
    font-size: 9px;
    line-height: 1.35;
}

.cb-timeoff-v2-request-dates {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-timeoff-v2-request-dates strong {
    color: #35405f;
    font-size: 10px;
    line-height: 1.3;
}

.cb-timeoff-v2-request-dates span {
    color: #939cb1;
    font-size: 9px;
}

.cb-timeoff-v2-request-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cb-timeoff-v2-request-actions form {
    margin: 0;
}

.cb-timeoff-v2-away {
    position: relative;
    grid-template-columns: 8px 34px minmax(0, 1fr) auto;
    gap: 9px;
}

.cb-timeoff-v2-timeline-mark {
    width: 7px;
    height: 7px;
    border: 2px solid #aeb8cc;
    border-radius: 50%;
    background: #ffffff;
}

.cb-timeoff-v2-away.is-current .cb-timeoff-v2-timeline-mark {
    border-color: #00a978;
    background: #00a978;
    box-shadow: 0 0 0 3px #dff7ef;
}

.cb-timeoff-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.cb-timeoff-v2-table-head,
.cb-timeoff-v2-row {
    min-width: 1040px;
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) 90px 100px 82px minmax(125px, 0.8fr) 105px 105px;
    align-items: center;
    gap: 13px;
}

.cb-timeoff-v2-table-head {
    min-height: 37px;
    padding: 0 15px;
    border-bottom: 1px solid #e8ebf2;
    background: #fafbfc;
    color: #9099af;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-timeoff-v2-row {
    min-height: 67px;
    padding: 9px 15px;
    border-bottom: 1px solid #edf0f5;
    color: #4b5674;
    font-size: 10px;
}

.cb-timeoff-v2-row:last-child { border-bottom: 0; }
.cb-timeoff-v2-row:hover { background: #fbfcfe; }

.cb-timeoff-v2-balance {
    display: grid;
    gap: 5px;
}

.cb-timeoff-v2-balance strong {
    color: #283253;
    font-size: 10px;
}

.cb-timeoff-v2-balance > span {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #e9ecf2;
    overflow: hidden;
}

.cb-timeoff-v2-balance i {
    height: 100%;
    display: block;
    border-radius: 2px;
    background: #00a978;
}

.cb-timeoff-v2-row-status {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.cb-timeoff-v2-row-status small {
    color: #b47500;
    font-size: 8px;
}

/* Documents */
.cb-documents-v2-head,
.cb-documents-v2-row {
    display: grid;
    grid-template-columns: minmax(270px, 2fr) minmax(95px, 0.65fr) minmax(110px, 0.8fr) 92px 72px minmax(120px, auto);
    align-items: center;
    gap: 14px;
}

.cb-documents-v2-head {
    min-height: 37px;
    padding: 0 15px;
    border-bottom: 1px solid #e8ebf2;
    background: #fafbfc;
    color: #9099af;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-documents-v2-row {
    min-height: 76px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf0f5;
    color: #515d7a;
    font-size: 10px;
}

.cb-documents-v2-row:last-child { border-bottom: 0; }
.cb-documents-v2-row:hover { background: #fbfcfe; }

.cb-documents-v2-file {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-documents-v2-file > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-documents-v2-file strong,
.cb-documents-v2-file span,
.cb-documents-v2-file small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-documents-v2-file strong {
    color: #1b2547;
    font-size: 11px;
}

.cb-documents-v2-file span,
.cb-documents-v2-file small {
    color: #8b95ac;
    font-size: 9px;
}

.cb-documents-v2-type {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #e7f1ff;
    color: #2875d0;
    font-size: 8px;
    font-weight: 800;
}

.cb-documents-v2-type.is-rose { background: #fff0f3; color: #c84462; }
.cb-documents-v2-type.is-green { background: #e5f8f1; color: #008b63; }
.cb-documents-v2-type.is-amber { background: #fff4dc; color: #a96b00; }

.cb-documents-v2-category {
    width: max-content;
    max-width: 100%;
    padding: 5px 7px;
    border-radius: 5px;
    background: #f1f3f7;
    color: #616c88;
    font-size: 9px;
    font-weight: 700;
}

.cb-documents-v2-row .is-missing {
    color: #c84462;
    font-weight: 700;
}

.cb-documents-v2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cb-documents-v2-actions form { margin: 0; }

/* Module modals and forms */
.cb-modal.cb-ops-v2-modal .cb-modal-dialog {
    width: min(100% - 28px, 600px);
    margin: 6vh auto 24px;
    max-height: 88vh;
    border: 1px solid #dfe4ef;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(18, 26, 63, 0.22);
}

.cb-modal.cb-ops-v2-modal .cb-modal-head {
    min-height: 56px;
    padding: 13px 16px;
    border-bottom: 1px solid #e8ebf2;
}

.cb-modal.cb-ops-v2-modal .cb-modal-head h2 {
    color: #17203f;
    font-size: 15px;
}

.cb-modal.cb-ops-v2-modal .cb-modal-close {
    width: 31px;
    height: 31px;
    border: 1px solid #e1e5ee;
    border-radius: 6px;
    background: #ffffff;
}

.cb-modal.cb-ops-v2-modal .cb-modal-body {
    padding: 16px;
}

.cb-ops-v2-form {
    display: grid;
    gap: 13px;
}

.cb-ops-v2-form-intro {
    padding: 11px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid #6b52f2;
    background: #f7f6ff;
}

.cb-ops-v2-form-intro > span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #ebe7ff;
    color: #654ae8;
}

.cb-ops-v2-form-intro svg { width: 16px; height: 16px; }

.cb-ops-v2-form-intro > div {
    display: grid;
    gap: 3px;
}

.cb-ops-v2-form-intro strong {
    color: #263052;
    font-size: 11px;
}

.cb-ops-v2-form-intro p {
    margin: 0;
    color: #79839f;
    font-size: 9px;
    line-height: 1.5;
}

.cb-ops-v2-form label {
    display: grid;
    gap: 6px;
    color: #313c5e;
    font-size: 10px;
    font-weight: 700;
}

.cb-ops-v2-form label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cb-ops-v2-form label small {
    color: #929bb0;
    font-size: 9px;
    font-weight: 500;
}

.cb-ops-v2-form input,
.cb-ops-v2-form select {
    height: 40px;
    padding: 0 11px;
}

.cb-ops-v2-form textarea {
    min-height: 86px;
    padding: 10px 11px;
    resize: vertical;
}

.cb-ops-v2-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-ops-v2-form-grid .is-wide {
    grid-column: 1 / -1;
}

.cb-ops-v2-duration {
    min-height: 40px;
    padding: 6px 10px;
    display: grid;
    align-content: center;
    grid-template-columns: 1fr auto;
    gap: 1px 8px;
    border: 1px solid #dfe4ef;
    border-radius: 6px;
    background: #f7f9fc;
}

.cb-ops-v2-duration span {
    grid-row: 1 / 3;
    align-self: center;
    color: #77829e;
    font-size: 10px;
    font-weight: 700;
}

.cb-ops-v2-duration strong {
    color: #5f49df;
    font-size: 11px;
    text-align: right;
}

.cb-ops-v2-duration small {
    color: #969eb2;
    font-size: 8px;
    text-align: right;
}

.cb-ops-v2-form-actions {
    padding-top: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.cb-documents-v2-dropzone {
    position: relative;
    min-height: 112px;
    padding: 18px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px !important;
    border: 1px dashed #bdc6d8;
    border-radius: 7px;
    background: #fafbfe;
    text-align: center;
    cursor: pointer;
}

.cb-documents-v2-dropzone:hover,
.cb-documents-v2-dropzone.is-dragging,
.cb-documents-v2-dropzone.has-file {
    border-color: #806bf3;
    background: #f7f5ff;
}

.cb-documents-v2-dropzone.has-error {
    border-color: #d75a75;
    background: #fff7f9;
}

.cb-documents-v2-dropzone.has-error strong {
    color: #bc3d5b;
}

.cb-documents-v2-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cb-documents-v2-drop-icon {
    width: 30px;
    height: 30px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px;
    background: #ebe7ff;
    color: #654ae8;
}

.cb-documents-v2-drop-icon svg { width: 16px; height: 16px; }
.cb-documents-v2-dropzone strong { color: #384362; font-size: 10px; }
.cb-documents-v2-dropzone small { color: #8f98af; font-size: 9px; }

.cb-modal.cb-ops-v2-confirm .cb-modal-dialog {
    width: min(100% - 28px, 450px);
    margin-top: 16vh;
    padding: 17px;
    overflow: visible;
}

.cb-ops-v2-confirm-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cb-ops-v2-confirm-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff1d8;
    color: #aa6c00;
}

.cb-ops-v2-confirm-icon svg { width: 19px; height: 19px; }

.cb-ops-v2-confirm-body > div {
    display: grid;
    gap: 5px;
}

.cb-ops-v2-confirm-body h2 {
    margin: 0;
    color: #1b2547;
    font-size: 15px;
    line-height: 1.3;
}

.cb-ops-v2-confirm-body p {
    margin: 0;
    color: #737e99;
    font-size: 10px;
    line-height: 1.55;
}

.cb-ops-v2-confirm-actions {
    margin-top: 18px;
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    border-top: 1px solid #e9ecf3;
}

@media (max-width: 1180px) {
    .cb-swaps-v2-row {
        grid-template-columns: minmax(270px, 1.2fr) minmax(215px, 0.9fr) minmax(220px, auto);
    }

    .cb-swaps-v2-state {
        grid-column: 2;
        grid-row: 2;
    }

    .cb-swaps-v2-actions {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .cb-ops-v2-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .cb-ops-v2-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .cb-ops-v2-search {
        width: min(420px, 100%);
    }

    .cb-documents-v2-head,
    .cb-documents-v2-row {
        grid-template-columns: minmax(260px, 1.7fr) minmax(90px, 0.6fr) minmax(105px, 0.8fr) 82px minmax(120px, auto);
    }

    .cb-documents-v2-head > :nth-child(5),
    .cb-documents-v2-row > :nth-child(5) {
        display: none;
    }
}

@media (max-width: 940px) {
    .cb-page-body-shift-swaps .cb-page-shell,
    .cb-page-body-time-off .cb-page-shell,
    .cb-page-body-documents .cb-page-shell,
    .cb-page-body-leave-requests .cb-page-shell,
    .cb-page-body-time-clock .cb-page-shell,
    .cb-page-body-locations .cb-page-shell,
    .cb-page-body-departments .cb-page-shell,
    .cb-page-body-payroll .cb-page-shell,
    .cb-page-body-analytics .cb-page-shell,
    .cb-page-body-compliance .cb-page-shell {
        padding: 19px 16px 36px;
    }

    .cb-ops-v2-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-ops-v2-metric:nth-child(2) { border-right: 0; }
    .cb-ops-v2-metric:nth-child(-n + 2) { border-bottom: 1px solid #e8ebf2; }

    .cb-timeoff-v2-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-timeoff-v2-table-wrap {
        overflow: visible;
    }

    .cb-timeoff-v2-table-head {
        display: none;
    }

    .cb-timeoff-v2-table-body {
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cb-timeoff-v2-row {
        min-width: 0;
        min-height: 0;
        padding: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        border: 1px solid #e5e8f0;
        border-radius: 6px;
    }

    .cb-timeoff-v2-member,
    .cb-timeoff-v2-row-status {
        grid-column: 1 / -1;
    }

    .cb-timeoff-v2-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #969fb4;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cb-documents-v2-head { display: none; }

    .cb-documents-v2-list {
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cb-documents-v2-row {
        min-height: 0;
        padding: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px 14px;
        border: 1px solid #e5e8f0;
        border-radius: 6px;
    }

    .cb-documents-v2-file,
    .cb-documents-v2-actions {
        grid-column: 1 / -1;
    }

    .cb-documents-v2-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #969fb4;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cb-documents-v2-row > :nth-child(5) { display: block; }
    .cb-documents-v2-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
    .cb-page-body-shift-swaps .cb-page-shell,
    .cb-page-body-time-off .cb-page-shell,
    .cb-page-body-documents .cb-page-shell,
    .cb-page-body-leave-requests .cb-page-shell,
    .cb-page-body-time-clock .cb-page-shell,
    .cb-page-body-locations .cb-page-shell,
    .cb-page-body-departments .cb-page-shell,
    .cb-page-body-payroll .cb-page-shell,
    .cb-page-body-analytics .cb-page-shell,
    .cb-page-body-compliance .cb-page-shell {
        padding: 14px 10px 28px;
    }

    .cb-ops-v2 {
        gap: 12px;
    }

    .cb-ops-v2-header {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .cb-ops-v2-heading h1 {
        font-size: 27px;
    }

    .cb-ops-v2-header-actions,
    .cb-ops-v2-primary {
        width: 100%;
    }

    .cb-ops-v2-header-actions > * {
        flex: 1 1 0;
    }

    .cb-ops-v2-metric {
        min-height: 82px;
        padding: 12px 13px;
    }

    .cb-ops-v2-metric strong { font-size: 20px; }

    .cb-ops-v2-panel-head {
        padding: 12px;
    }

    .cb-ops-v2-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .cb-ops-v2-search,
    .cb-ops-v2-select-filter {
        width: 100%;
        min-width: 0;
    }

    .cb-ops-v2-segments {
        width: 100%;
        overflow-x: auto;
    }

    .cb-ops-v2-segments button {
        flex: 1 0 auto;
    }

    .cb-swaps-v2-row {
        min-height: 0;
        padding: 13px;
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .cb-swaps-v2-state,
    .cb-swaps-v2-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .cb-swaps-v2-actions {
        padding-top: 10px;
        justify-content: flex-start;
        border-top: 1px solid #edf0f5;
    }

    .cb-swaps-v2-approve-form {
        flex: 1 1 auto;
    }

    .cb-swaps-v2-approve-form label {
        width: auto;
        flex: 1 1 auto;
    }

    .cb-timeoff-v2-request {
        padding: 12px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cb-timeoff-v2-request-dates {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .cb-timeoff-v2-request-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .cb-timeoff-v2-away {
        grid-template-columns: 7px 34px minmax(0, 1fr);
    }

    .cb-timeoff-v2-away .cb-ops-v2-status {
        grid-column: 2 / -1;
        margin-left: 0;
    }

    .cb-timeoff-v2-table-body,
    .cb-documents-v2-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-ops-v2-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-ops-v2-form-grid .is-wide {
        grid-column: auto;
    }

    .cb-modal.cb-ops-v2-modal .cb-modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
        max-height: calc(100vh - 16px);
    }

    .cb-modal.cb-ops-v2-modal .cb-modal-body {
        padding: 13px;
    }

    .cb-modal.cb-ops-v2-confirm .cb-modal-dialog {
        margin-top: 18vh;
    }
}

/* Keep labour planner controls authoritative over legacy rota field styles. */
.cb-page-body-rota .cb-rota-v3-budget-fields .cb-rota-v2-field .cb-rota-v3-money-input input,
.cb-page-body-rota .cb-rota-v3-budget-fields .cb-rota-v2-field .cb-rota-v3-suffix-input input {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 38px;
    padding: 0 9px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #17204d;
    font: inherit;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v2-auto-loader-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 520px) {
    .cb-page-body-rota .cb-rota-v2-auto-loader-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Operations modules v2: approvals, attendance, structure, finance, and compliance */
.cb-ops-v2-status.is-neutral {
    background: #f1f3f7;
    color: #69738d;
}

.cb-ops-v2-title-icon.is-green {
    background: #e5f8f1;
    color: #008b63;
}

.cb-ops-v2-title-icon.is-amber {
    background: #fff4dc;
    color: #ac7000;
}

.cb-ops-v2-metric.is-purple::before {
    background: #745af4;
}

.cb-ops-v2-form select[multiple] {
    height: auto;
    min-height: 164px;
    padding: 8px;
}

.cb-ops-v2-form input[type="file"] {
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
}

/* Leave requests */
.cb-leave-requests-v2-workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(480px, 0.95fr);
    align-items: start;
    gap: 16px;
}

.cb-leave-requests-v2-list,
.cb-leave-requests-v2-history-list {
    display: grid;
}

.cb-leave-requests-v2-request {
    min-height: 116px;
    padding: 14px 15px;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(155px, 0.9fr) minmax(170px, 1.05fr) auto;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #edf0f5;
}

.cb-leave-requests-v2-request:last-child,
.cb-leave-requests-v2-history-row:last-child {
    border-bottom: 0;
}

.cb-leave-requests-v2-request:hover,
.cb-leave-requests-v2-history-row:hover {
    background: #fbfcfe;
}

.cb-leave-requests-v2-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-leave-requests-v2-person > div,
.cb-leave-requests-v2-dates,
.cb-leave-requests-v2-reason,
.cb-leave-requests-v2-history-row > div:not(.cb-leave-requests-v2-person) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-leave-requests-v2-person strong,
.cb-leave-requests-v2-dates strong,
.cb-leave-requests-v2-history-row strong {
    overflow: hidden;
    color: #202a4b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-leave-requests-v2-person span:not(.cb-ops-v2-avatar),
.cb-leave-requests-v2-dates span,
.cb-leave-requests-v2-history-row div > span {
    overflow: hidden;
    color: #8b94aa;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-leave-requests-v2-reason > span {
    color: #929bb0;
    font-size: 8px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-leave-requests-v2-reason p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #59647f;
    font-size: 10px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cb-leave-requests-v2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cb-leave-requests-v2-actions form {
    margin: 0;
}

.cb-leave-requests-v2-history-head,
.cb-leave-requests-v2-history-row {
    display: grid;
    grid-template-columns: minmax(175px, 1.15fr) minmax(145px, 0.95fr) minmax(170px, 1.1fr) 82px;
    align-items: center;
    gap: 13px;
}

.cb-leave-requests-v2-history-head {
    min-height: 37px;
    padding: 0 15px;
    border-bottom: 1px solid #e8ebf2;
    background: #fafbfc;
    color: #9099af;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-leave-requests-v2-history-row {
    min-height: 74px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf0f5;
}

/* Time clock */
.cb-timeclock-v2-live {
    min-width: 122px;
    min-height: 48px;
    padding: 7px 11px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1px 9px;
    border: 1px solid #dfe4ef;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(31, 41, 77, 0.045);
}

.cb-timeclock-v2-live span {
    color: #8b94aa;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-timeclock-v2-live strong {
    grid-row: 1 / 3;
    grid-column: 2;
    color: #17203f;
    font-size: 16px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cb-timeclock-v2-live small {
    color: #9aa2b6;
    font-size: 8px;
    white-space: nowrap;
}

.cb-timeclock-v2-register-wrap,
.cb-payroll-v2-table-wrap,
.cb-compliance-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.cb-timeclock-v2-register-head,
.cb-timeclock-v2-register-row {
    min-width: 1080px;
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) 132px minmax(130px, 0.85fr) minmax(145px, 0.95fr) 90px 86px minmax(125px, auto);
    align-items: center;
    gap: 13px;
}

.cb-timeclock-v2-register-head {
    min-height: 37px;
    padding: 0 15px;
    border-bottom: 1px solid #e8ebf2;
    background: #fafbfc;
    color: #9099af;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-timeclock-v2-register-row {
    position: relative;
    min-height: 76px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf0f5;
    color: #505b78;
    font-size: 10px;
}

.cb-timeclock-v2-register-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
}

.cb-timeclock-v2-register-row.is-active::before { background: #00a978; }
.cb-timeclock-v2-register-row.is-flagged::before { background: #e49a15; }
.cb-timeclock-v2-register-row:last-child { border-bottom: 0; }
.cb-timeclock-v2-register-row:hover { background: #fbfcfe; }

.cb-timeclock-v2-member,
.cb-timeclock-v2-location {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-timeclock-v2-member > div,
.cb-timeclock-v2-register-row > div:not(.cb-timeclock-v2-member):not(.cb-timeclock-v2-location) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-timeclock-v2-member strong,
.cb-timeclock-v2-register-row > div strong {
    overflow: hidden;
    color: #202a4b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-timeclock-v2-member span:not(.cb-ops-v2-avatar),
.cb-timeclock-v2-register-row > div > span {
    overflow: hidden;
    color: #9099ae;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-timeclock-v2-location svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #7861ed;
}

/* Locations */
.cb-locations-v2-workspace > .cb-module-table-card,
.cb-departments-v2-workspace > .cb-module-table-card {
    padding: 12px;
    border: 0;
    box-shadow: none;
}

.cb-locations-v2 .cb-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 11px;
}

.cb-locations-v2-card {
    min-width: 0;
    min-height: 190px;
    padding: 18px;
    display: grid;
    grid-template-rows: auto auto minmax(40px, 1fr) auto;
    gap: 10px;
    border: 1px solid #e3e7f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.cb-locations-v2-card:hover {
    border-color: #d3d9e7;
    box-shadow: 0 10px 24px rgba(34, 42, 78, 0.055);
    transform: translateY(-1px);
}

.cb-locations-v2-card .cb-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-locations-v2-card .cb-kpi-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eeeaff;
    color: #654ae8;
}

.cb-locations-v2-card .cb-kpi-icon svg {
    width: 18px;
    height: 18px;
}

.cb-locations-v2-card > strong {
    color: #182243;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
}

.cb-locations-v2-card > p {
    margin: 0;
    color: #78829c;
    font-size: 10px;
    line-height: 1.5;
}

.cb-locations-v2-card footer {
    padding-top: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #edf0f5;
    color: #8b94aa;
    font-size: 9px;
}

.cb-locations-v2-card footer b {
    color: #475270;
    font-weight: 700;
}

.cb-locations-v2-card .cb-location-staff {
    padding: 5px 7px;
    border-radius: 5px;
    background: #f3f1ff;
    color: #6550dd;
    font-weight: 700;
    white-space: nowrap;
}

/* Departments */
.cb-departments-v2 .cb-module-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 11px;
}

.cb-departments-v2-card {
    min-width: 0;
    min-height: 218px;
    padding: 17px;
    display: grid;
    align-content: start;
    gap: 13px;
    border: 1px solid #e3e7f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.cb-departments-v2-card:hover {
    border-color: #d3d9e7;
    box-shadow: 0 10px 24px rgba(34, 42, 78, 0.05);
}

.cb-departments-v2-card > .cb-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cb-departments-v2-card > .cb-card-head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.cb-departments-v2-card > .cb-card-head h2 {
    margin: 0;
    overflow: hidden;
    color: #192344;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-departments-v2-card > .cb-card-head p {
    margin: 0;
    color: #7b859e;
    font-size: 10px;
    line-height: 1.5;
}

.cb-departments-v2-card > .cb-card-head > .cb-inline-actions {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.cb-member-pill-row {
    min-height: 42px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cb-member-pill {
    min-width: 0;
    padding: 5px 8px 5px 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e8f0;
    border-radius: 7px;
    background: #fafbfe;
}

.cb-member-pill .cb-ops-v2-avatar {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 5px;
    font-size: 8px;
}

.cb-member-pill-name {
    max-width: 130px;
    overflow: hidden;
    color: #46516f;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-member-pill small {
    max-width: 120px;
    overflow: hidden;
    color: #929bb0;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-departments-v2-card > .cb-inline-actions {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    border-top: 1px solid #edf0f5;
}

.cb-departments-v2-card > .cb-inline-actions form {
    margin: 0;
}

/* Payroll */
.cb-payroll-v2-period-form,
.cb-analytics-v2-period-form {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cb-payroll-v2-period-form select,
.cb-analytics-v2-period-form select {
    min-width: 152px;
    height: 36px;
    padding: 0 31px 0 11px;
    border: 1px solid #dfe4ef;
    border-radius: 6px;
    background: #ffffff;
    color: #35405f;
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    outline: none;
}

.cb-payroll-v2-period-form select:focus,
.cb-analytics-v2-period-form select:focus {
    border-color: #8b77f7;
    box-shadow: 0 0 0 3px rgba(107, 82, 242, 0.09);
}

.cb-payroll-v2-notice {
    min-height: 56px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #dfe4ef;
    border-left: 3px solid #745af4;
    border-radius: 7px;
    background: #ffffff;
}

.cb-payroll-v2-notice > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eeeaff;
    color: #654ae8;
}

.cb-payroll-v2-notice svg {
    width: 16px;
    height: 16px;
}

.cb-payroll-v2-notice > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cb-payroll-v2-notice strong {
    color: #273152;
    font-size: 11px;
}

.cb-payroll-v2-notice p {
    margin: 0;
    color: #7d879f;
    font-size: 9px;
    line-height: 1.45;
}

.cb-payroll-v2-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-payroll-v2-metrics .cb-ops-v2-metric:nth-child(2) {
    border-right: 1px solid #e8ebf2;
    border-bottom: 0;
}

.cb-payroll-v2-table-head,
.cb-payroll-v2-row {
    min-width: 960px;
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) 92px 100px 100px 125px minmax(125px, 0.8fr);
    align-items: center;
    gap: 14px;
}

.cb-payroll-v2-table-head {
    min-height: 37px;
    padding: 0 15px;
    border-bottom: 1px solid #e8ebf2;
    background: #fafbfc;
    color: #9099af;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-payroll-v2-row {
    min-height: 74px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf0f5;
}

.cb-payroll-v2-row:last-child { border-bottom: 0; }
.cb-payroll-v2-row:hover { background: #fbfcfe; }

.cb-payroll-v2-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-payroll-v2-person > div,
.cb-payroll-v2-value,
.cb-payroll-v2-gross,
.cb-payroll-v2-state {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-payroll-v2-person strong,
.cb-payroll-v2-value strong,
.cb-payroll-v2-gross strong {
    overflow: hidden;
    color: #202a4b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-payroll-v2-person span:not(.cb-ops-v2-avatar),
.cb-payroll-v2-value span,
.cb-payroll-v2-gross span,
.cb-payroll-v2-state small {
    overflow: hidden;
    color: #9099ae;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-payroll-v2-scope,
.cb-analytics-v2-scope {
    width: max-content;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid #e2dfff;
    border-radius: 6px;
    background: #f6f4ff;
    color: #6650df;
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
    white-space: nowrap;
}

.cb-payroll-v2-trend-list,
.cb-analytics-v2-trend-list,
.cb-analytics-v2-workload-list,
.cb-analytics-v2-location-list,
.cb-analytics-v2-insight-list {
    padding: 7px 15px 12px;
    display: grid;
}

.cb-payroll-v2-trend-row {
    min-height: 55px;
    display: grid;
    grid-template-columns: 80px minmax(180px, 1fr) 130px 100px;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #edf0f5;
}

.cb-payroll-v2-trend-row:last-child { border-bottom: 0; }

.cb-payroll-v2-trend-row strong,
.cb-payroll-v2-trend-row b {
    color: #263052;
    font-size: 10px;
    line-height: 1.3;
}

.cb-payroll-v2-trend-row b {
    text-align: right;
}

.cb-payroll-v2-trend-row span {
    color: #8791aa;
    font-size: 9px;
    text-align: right;
    white-space: nowrap;
}

.cb-payroll-v2-trend-track,
.cb-analytics-v2-bar {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: #eceef4;
    overflow: hidden;
}

.cb-payroll-v2-trend-track i,
.cb-analytics-v2-bar i {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #6b52f2, #8e72ff);
}

/* Analytics */
.cb-analytics-v2-metrics .cb-ops-v2-metric > span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cb-analytics-v2-metrics .cb-ops-v2-metric > span svg {
    width: 13px;
    height: 13px;
}

.cb-analytics-v2-grid {
    min-width: 0;
    display: grid;
    align-items: stretch;
    gap: 16px;
}

.cb-analytics-v2-grid-primary {
    grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.75fr);
}

.cb-analytics-v2-grid-secondary {
    grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
}

.cb-analytics-v2-trend-row {
    min-height: 53px;
    display: grid;
    grid-template-columns: 72px minmax(140px, 1fr) 120px 92px;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #edf0f5;
}

.cb-analytics-v2-trend-row:last-child,
.cb-analytics-v2-workload-row:last-child,
.cb-analytics-v2-location-row:last-child,
.cb-analytics-v2-insight:last-child {
    border-bottom: 0;
}

.cb-analytics-v2-trend-row strong,
.cb-analytics-v2-trend-row b,
.cb-analytics-v2-workload-row strong,
.cb-analytics-v2-location-row strong,
.cb-analytics-v2-location-row b,
.cb-analytics-v2-insight strong,
.cb-analytics-v2-insight b {
    color: #263052;
    font-size: 10px;
    line-height: 1.3;
}

.cb-analytics-v2-trend-row b,
.cb-analytics-v2-location-row b,
.cb-analytics-v2-insight b {
    text-align: right;
}

.cb-analytics-v2-trend-row > span,
.cb-analytics-v2-workload-row > span,
.cb-analytics-v2-location-row span,
.cb-analytics-v2-insight span:not(.cb-ops-v2-title-icon) {
    color: #8993aa;
    font-size: 9px;
    line-height: 1.35;
}

.cb-analytics-v2-trend-row > span {
    text-align: right;
    white-space: nowrap;
}

.cb-analytics-v2-workload-row {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(90px, 0.75fr) minmax(140px, 1.5fr) 48px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #edf0f5;
}

.cb-analytics-v2-workload-row > span {
    text-align: right;
    font-weight: 700;
}

.cb-analytics-v2-location-row {
    min-height: 57px;
    display: grid;
    grid-template-columns: minmax(120px, 0.95fr) minmax(150px, 1.2fr) 90px;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #edf0f5;
}

.cb-analytics-v2-location-row > div:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-analytics-v2-location-row strong,
.cb-analytics-v2-location-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-analytics-v2-insight {
    min-height: 67px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf0f5;
}

.cb-analytics-v2-insight > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-analytics-v2-insight b {
    color: #5f49df;
    font-size: 13px;
    font-weight: 800;
}

/* Compliance */
.cb-compliance-v2-table-head,
.cb-compliance-v2-row {
    min-width: 1070px;
    display: grid;
    grid-template-columns: minmax(185px, 1.2fr) minmax(165px, 1.05fr) 112px minmax(145px, 0.9fr) 105px minmax(135px, auto);
    align-items: center;
    gap: 14px;
}

.cb-compliance-v2-table-head {
    min-height: 37px;
    padding: 0 15px;
    border-bottom: 1px solid #e8ebf2;
    background: #fafbfc;
    color: #9099af;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-compliance-v2-row {
    min-height: 78px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf0f5;
}

.cb-compliance-v2-row:last-child { border-bottom: 0; }
.cb-compliance-v2-row:hover { background: #fbfcfe; }

.cb-compliance-v2-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cb-compliance-v2-person > div,
.cb-compliance-v2-record,
.cb-compliance-v2-dates,
.cb-compliance-v2-state {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cb-compliance-v2-person strong,
.cb-compliance-v2-record strong,
.cb-compliance-v2-dates strong {
    overflow: hidden;
    color: #202a4b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-compliance-v2-person span:not(.cb-ops-v2-avatar),
.cb-compliance-v2-record span,
.cb-compliance-v2-dates span,
.cb-compliance-v2-state small {
    overflow: hidden;
    color: #9099ae;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-compliance-v2-type {
    width: max-content;
    max-width: 100%;
    padding: 5px 7px;
    overflow: hidden;
    border-radius: 5px;
    background: #eef3fb;
    color: #4f6589;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-compliance-v2-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.cb-compliance-v2-actions form {
    margin: 0;
}

@media (max-width: 1280px) {
    .cb-leave-requests-v2-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-analytics-v2-grid-primary,
    .cb-analytics-v2-grid-secondary {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1180px) {
    .cb-leave-requests-v2-request {
        grid-template-columns: minmax(190px, 1.1fr) minmax(165px, 0.9fr) minmax(190px, 1fr) auto;
    }

    .cb-payroll-v2-header-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cb-payroll-v2-period-form {
        justify-content: flex-end;
    }
}

@media (max-width: 940px) {
    .cb-leave-requests-v2-request {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 0.75fr) auto;
    }

    .cb-leave-requests-v2-reason {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .cb-leave-requests-v2-actions {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .cb-leave-requests-v2-history-head,
    .cb-timeclock-v2-register-head,
    .cb-payroll-v2-table-head,
    .cb-compliance-v2-table-head {
        display: none;
    }

    .cb-leave-requests-v2-history-list,
    .cb-timeclock-v2-register-body,
    .cb-payroll-v2-table-list,
    .cb-compliance-v2-list {
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cb-leave-requests-v2-history-row,
    .cb-timeclock-v2-register-row,
    .cb-payroll-v2-row,
    .cb-compliance-v2-row {
        min-width: 0;
        min-height: 0;
        padding: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 11px 14px;
        border: 1px solid #e5e8f0;
        border-radius: 7px;
    }

    .cb-leave-requests-v2-person,
    .cb-timeclock-v2-member,
    .cb-payroll-v2-person,
    .cb-compliance-v2-person,
    .cb-compliance-v2-record {
        grid-column: 1 / -1;
    }

    .cb-timeclock-v2-register-wrap,
    .cb-payroll-v2-table-wrap,
    .cb-compliance-v2-table-wrap {
        overflow: visible;
    }

    .cb-timeclock-v2-register-row::before {
        inset: 0 auto 0 0;
        border-radius: 7px 0 0 7px;
    }

    .cb-timeclock-v2-register-row > .cb-ops-v2-button,
    .cb-compliance-v2-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .cb-timeclock-v2-register-row > .cb-ops-v2-button {
        width: max-content;
    }

    .cb-payroll-v2-state,
    .cb-compliance-v2-state {
        align-content: start;
    }

    .cb-leave-requests-v2-history-row > [data-label]::before,
    .cb-timeclock-v2-register-row > [data-label]::before,
    .cb-payroll-v2-row > [data-label]::before,
    .cb-compliance-v2-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #969fb4;
        font-size: 8px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cb-compliance-v2-type {
        width: fit-content;
    }

    .cb-payroll-v2-trend-row,
    .cb-analytics-v2-trend-row {
        grid-template-columns: 72px minmax(130px, 1fr) 110px 88px;
    }
}

@media (max-width: 720px) {
    .cb-timeclock-v2-header-actions,
    .cb-payroll-v2-header-actions,
    .cb-payroll-v2-period-form,
    .cb-analytics-v2-period-form {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .cb-payroll-v2-period-form label,
    .cb-analytics-v2-period-form label,
    .cb-payroll-v2-period-form select,
    .cb-analytics-v2-period-form select,
    .cb-payroll-v2-period-form .cb-ops-v2-button,
    .cb-analytics-v2-period-form .cb-ops-v2-primary {
        width: 100%;
    }

    .cb-timeclock-v2-live {
        width: 100%;
    }

    .cb-leave-requests-v2-request {
        min-height: 0;
        padding: 13px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .cb-leave-requests-v2-person {
        grid-column: 1;
        grid-row: 1;
    }

    .cb-leave-requests-v2-dates,
    .cb-leave-requests-v2-reason {
        grid-column: 1 / -1;
    }

    .cb-leave-requests-v2-dates { grid-row: 2; }
    .cb-leave-requests-v2-reason { grid-row: 3; }

    .cb-leave-requests-v2-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .cb-leave-requests-v2-history-list,
    .cb-timeclock-v2-register-body,
    .cb-payroll-v2-table-list,
    .cb-compliance-v2-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-locations-v2 .cb-location-grid,
    .cb-departments-v2 .cb-module-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-locations-v2-card footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .cb-departments-v2-card > .cb-inline-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cb-payroll-v2-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-payroll-v2-metrics .cb-ops-v2-metric {
        border-right: 0;
        border-bottom: 1px solid #e8ebf2;
    }

    .cb-payroll-v2-metrics .cb-ops-v2-metric:last-child {
        border-bottom: 0;
    }

    .cb-payroll-v2-trend-list,
    .cb-analytics-v2-trend-list,
    .cb-analytics-v2-workload-list,
    .cb-analytics-v2-location-list,
    .cb-analytics-v2-insight-list {
        padding: 7px 12px 10px;
    }

    .cb-payroll-v2-trend-row,
    .cb-analytics-v2-trend-row {
        min-height: 72px;
        padding: 9px 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 12px;
    }

    .cb-payroll-v2-trend-track,
    .cb-analytics-v2-trend-row .cb-analytics-v2-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .cb-payroll-v2-trend-row > span,
    .cb-analytics-v2-trend-row > span {
        grid-column: 1;
        grid-row: 3;
        text-align: left;
    }

    .cb-payroll-v2-trend-row > b,
    .cb-analytics-v2-trend-row > b {
        grid-column: 2;
        grid-row: 1;
    }

    .cb-analytics-v2-workload-row {
        grid-template-columns: minmax(85px, 1fr) minmax(110px, 1.3fr) 45px;
        gap: 9px;
    }

    .cb-analytics-v2-location-row {
        min-height: 72px;
        padding: 8px 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
    }

    .cb-analytics-v2-location-row .cb-analytics-v2-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .cb-ops-v2-form select[multiple] {
        min-height: 140px;
    }
}

@media (max-width: 460px) {
    .cb-leave-requests-v2-actions {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-content: flex-start;
        padding-top: 10px;
        border-top: 1px solid #edf0f5;
    }

    .cb-leave-requests-v2-actions form:last-child {
        flex: 1 1 auto;
    }

    .cb-leave-requests-v2-actions .cb-ops-v2-button {
        width: 100%;
    }

    .cb-timeclock-v2-register-row,
    .cb-payroll-v2-row,
    .cb-compliance-v2-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-timeclock-v2-register-row > *,
    .cb-payroll-v2-row > *,
    .cb-compliance-v2-row > * {
        grid-column: 1;
    }

    .cb-analytics-v2-workload-row {
        min-height: 67px;
        padding: 8px 0;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cb-analytics-v2-workload-row .cb-analytics-v2-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .cb-ops-v2-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cb-ops-v2-form-actions .cb-ops-v2-button {
        width: 100%;
    }
}