/* Staff console — dark outer chrome + curved light workspace frame.
   Outline is locked: only sidebar nav + main content scroll independently. */

html:has(body.staff-console) {
    height: 100%;
    overflow: hidden;
}

body.staff-console {
    --console-main-pad-top: 28px;
    --console-main-pad-x: 32px;
    --console-main-pad-bottom: 40px;
    --console-chat-clearance: 0px;
    --staff-void: #0b0b14;
    --staff-void-2: #141422;
    --staff-frame: #f3f1f7;
    --staff-panel: #ffffff;
    --staff-side: #eceaf2;
    --staff-ink: #16161f;
    --staff-muted: #6f6b7b;
    --staff-line: #ddd8e8;
    --staff-radius: 28px;
    background-color: var(--staff-void) !important;
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(103, 76, 210, 0.28), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(48, 36, 92, 0.45), transparent 50%) !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
    color: var(--staff-ink);
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Super Admin uses the same chrome tokens as staff-console (no alternate void theme). */

.staff-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 14px 14px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.staff-chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 8px 12px;
    color: #fff;
    flex: none;
}

.staff-chrome-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.staff-chrome-brand:hover { color: #fff !important; }

.staff-chrome-brand img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.08);
}

.staff-chrome-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-chrome-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.staff-chrome-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

.staff-chrome-menu {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) saturate(1.25);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    color: rgba(255, 255, 255, 0.96) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.28);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}
.staff-chrome-menu:hover,
.staff-chrome-menu:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 20px rgba(0, 0, 0, 0.32);
    outline: none;
}
.staff-chrome-menu:active {
    transform: scale(0.96);
}
.staff-chrome-menu svg {
    width: 20px;
    height: 20px;
}

body.staff-console .staff-chrome .console-avatar {
    background: linear-gradient(145deg, #7c6cf0, #4f46b8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.staff-console .staff-chrome .console-account-menu {
    background: #fff;
    color: var(--staff-ink);
}

/* Curved workspace sitting on the dark void */
.staff-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background: var(--staff-frame);
    border-radius: var(--staff-radius);
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.staff-console .staff-side {
    background: var(--staff-side);
    border-right: 1px solid var(--staff-line);
    padding: 18px 12px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    position: relative;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    width: auto;
    box-shadow: none;
}

body.staff-console .staff-side-head {
    display: flex;
    flex: 0 0 auto;
    position: relative;
    top: auto;
    z-index: 2;
    background: var(--staff-side);
    border-bottom: 1px solid var(--staff-line);
    padding: 4px 10px 14px;
    margin: 0;
}

body.staff-console .staff-side-head .console-side-brand {
    color: var(--staff-ink);
}

body.staff-console .staff-side-head .console-side-brand img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 22, 31, 0.06);
}

body.staff-console .staff-side-head .console-side-brand strong {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.staff-console .staff-side-head .console-icon-btn {
    display: none;
}

.staff-side-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--staff-ink);
}

body.staff-console .staff-side .console-side-user {
    color: var(--staff-muted);
    font-size: 0.82rem;
    font-weight: 600;
}
body.staff-console .staff-side .console-side-hello {
    color: var(--staff-muted);
    font-size: 0.8rem;
}
body.staff-console .staff-side .console-side-name {
    color: var(--staff-ink);
    font-size: 1.08rem;
}
body.staff-console .staff-side .console-side-role {
    color: var(--staff-muted);
    font-size: 0.8rem;
    font-weight: 650;
}

.staff-side-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0 20px;
    -webkit-overflow-scrolling: touch;
}

.staff-side-nav,
body.staff-console .staff-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 22, 31, 0.22) transparent;
}

.staff-side-nav::-webkit-scrollbar,
body.staff-console .staff-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.staff-side-nav::-webkit-scrollbar-track,
body.staff-console .staff-main::-webkit-scrollbar-track {
    background: transparent;
}

.staff-side-nav::-webkit-scrollbar-thumb,
body.staff-console .staff-main::-webkit-scrollbar-thumb {
    background: rgba(22, 22, 31, 0.2);
    border-radius: 999px;
}

.staff-side-nav::-webkit-scrollbar-thumb:hover,
body.staff-console .staff-main::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 22, 31, 0.35);
}

/* Group labels sit above a run of nav links. The Control Center and the card
   console use .staff-nav-group; the affiliate portal uses .console-group, so
   both names carry one identical label style. Super Admin uses the same look on
   collapsible section summaries (dropdown groups). */
.staff-nav-group,
body.staff-console .staff-side .console-group,
body.staff-console-super .staff-nav-section-summary {
    margin: 14px 10px 6px;
    padding: 0;
    color: var(--staff-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.staff-nav-group:first-child,
body.staff-console .staff-side .console-group:first-child,
body.staff-console-super .staff-nav-section:first-child > .staff-nav-section-summary {
    margin-top: 4px;
}

body.staff-console-super .staff-nav-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    border-radius: 0;
}

body.staff-console-super .staff-nav-section-summary::-webkit-details-marker {
    display: none;
}

body.staff-console-super .staff-nav-section-label {
    min-width: 0;
    flex: 1 1 auto;
}

body.staff-console-super .staff-nav-section-chevron {
    display: inline-flex;
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--staff-muted);
    opacity: 0.85;
    transition: transform 0.18s ease;
}

body.staff-console-super .staff-nav-section-chevron svg {
    width: 14px;
    height: 14px;
}

body.staff-console-super .staff-nav-section[open] > .staff-nav-section-summary .staff-nav-section-chevron {
    transform: rotate(180deg);
}

body.staff-console-super .staff-nav-section {
    margin: 0;
    border: 0;
}

body.staff-console-super .staff-nav-section-items {
    margin: 0 0 2px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.staff-console .staff-side .console-nav {
    color: var(--staff-muted);
    border-radius: 14px;
}

body.staff-console .staff-side .console-nav:hover {
    color: var(--staff-ink);
    background: rgba(255, 255, 255, 0.55);
}

body.staff-console .staff-side .console-nav.is-active {
    color: var(--staff-ink);
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 22, 31, 0.08);
    font-weight: 750;
}

body.staff-console .staff-main {
    background: var(--staff-panel);
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
        var(--console-main-pad-top)
        var(--console-main-pad-x)
        calc(
            var(--console-main-pad-bottom)
            + env(safe-area-inset-bottom, 0px)
            + var(--console-chat-clearance, 0px)
        );
    border-radius: 0;
    box-sizing: border-box;
}

body.staff-console .staff-main > .h4,
body.staff-console .staff-main > h1 {
    letter-spacing: -0.03em;
}

body.staff-console .staff-workspace-search {
    margin: 0 0 22px;
    padding: 0;
}

body.staff-console .staff-workspace-search .dash-hello-sub {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--text-secondary, #6b7280);
}

/* Content cards / tables on the light frame */
.staff-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0 24px;
}
.staff-stats article {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    background: #faf9fc;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.staff-stats strong {
    display: block;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.staff-stats span {
    display: block;
    margin-top: 4px;
    color: var(--staff-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}
.staff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.staff-search {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
}
.staff-search .form-control { flex: 1; min-width: 0; }
/* One height for every control in a search or filter row. Chrome does not stretch
   a select or an input with align-items, so the row mixed a 48px field, a 42px
   select and a 44px button; naming the height keeps them level. */
.staff-search .form-control,
.staff-search .form-select,
.staff-search .btn,
.staff-audit-filter .form-control,
.staff-audit-filter .btn {
    height: 48px;
}
/* The card console's search row (Leads, CRM) is the same control as the staff
   one, so every console's filter row measures the same. */
.crm-search .form-control,
.crm-search .form-select,
.crm-search .btn {
    height: 48px;
}
/* Labelled filter rows (the export bar under the inbox search) line up with the
   search row above them instead of stepping by a few pixels. */
.export-bar select,
.export-bar .btn {
    height: 48px;
}
.table-wrap { overflow-x: auto; }
.staff-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    overflow: hidden;
}
.staff-table th,
.staff-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #efeaf6;
    vertical-align: top;
}
.staff-table th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b8798;
    background: #f7f4fb;
}
.staff-table tr:last-child td { border-bottom: 0; }
.staff-inline {
    display: flex;
    gap: 6px;
    align-items: center;
}
.staff-inline .form-control { min-width: 0; }
body.staff-console .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
}
body.staff-console select.form-control {
    appearance: auto;
    /* min-height, not a fixed height: a fixed height keeps a select out of the
       row it shares with inputs and buttons, which is what left the Users,
       Reports and Audit filter rows stepped by a few pixels. */
    min-height: 42px;
}
body.staff-console .card,
body.staff-console .card.card-body {
    border-radius: 20px;
    border-color: var(--staff-line);
    box-shadow: 0 10px 30px rgba(22, 22, 31, 0.04);
}
.staff-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: #efeaf6;
    color: #5b5670;
    font-size: 0.75rem;
    font-weight: 700;
}
.staff-form {
    max-width: 760px;
}
.staff-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 24px;
}
.staff-page-head h1 {
    margin: 0;
}
.staff-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.staff-form-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.staff-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.staff-roles {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 18px;
    align-items: start;
}
.staff-role-list {
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}
.staff-role-link {
    display: block;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #efeaf6;
}
.staff-role-link span {
    display: block;
    margin-top: 4px;
    color: var(--staff-muted);
    font-size: 0.8rem;
}
.staff-role-link.is-active {
    background: #f4f0fb;
}
.staff-perm-group {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    background: #fff;
}
.staff-perm-group h3 {
    font-size: 0.95rem;
    margin: 0 0 10px;
}
.staff-perm {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 8px;
}
.staff-perm small {
    display: block;
    color: #8b8798;
}

@media (max-width: 980px) {
    body.staff-console {
        --console-main-pad-top: 22px;
        --console-main-pad-x: 16px;
        --console-main-pad-bottom: 36px;
    }
    .staff-shell {
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .staff-chrome {
        padding: 10px 14px calc(10px + env(safe-area-inset-top, 0px));
        position: relative;
        top: auto;
        z-index: 45;
        flex: 0 0 auto;
        background: linear-gradient(180deg, #0b0b14 70%, rgba(11, 11, 20, 0.92));
    }
    .staff-chrome-menu { display: grid; }
    .staff-chrome-link { display: none; }
    .staff-frame {
        border-radius: 24px 24px 0 0;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        flex: 1 1 auto;
    }
    body.staff-console .staff-side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(300px, 82vw);
        height: 100dvh;
        max-height: 100dvh;
        z-index: 60;
        padding: calc(14px + env(safe-area-inset-top)) 12px 0;
        background: #fff;
        border-right: 0;
        border-radius: 0 var(--staff-radius) var(--staff-radius) 0;
        transform: translateX(-105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.22s ease, visibility 0.22s ease;
        box-shadow: 18px 0 40px rgba(11, 11, 26, 0.35);
    }
    body.is-sidebar-open .staff-side {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }
    body.staff-console.is-sidebar-open .staff-main,
    body.staff-console.is-sidebar-open .console-main {
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
    }
    body.staff-console.is-sidebar-open .staff-side-nav,
    body.staff-console.is-sidebar-open .console-side-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    body.staff-console .staff-side-head {
        display: flex;
        background: #fff;
    }
    body.staff-console .staff-side-head .console-icon-btn {
        display: grid;
        background: var(--accent-soft);
        color: var(--accent-deep);
    }
    body.is-sidebar-open .console-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(8, 8, 14, 0.62);
        z-index: 50;
    }
    body.staff-console .staff-main,
    body.staff-console .console-main {
        border-radius: 24px 24px 0 0;
        min-height: 0;
        height: 100%;
        max-height: 100%;
    }
}

@media (max-width: 640px) {
    body.staff-console {
        --console-main-pad-top: 18px;
        --console-main-pad-x: 14px;
        --console-main-pad-bottom: 32px;
    }
}

@media (max-width: 800px) {
    .staff-roles { grid-template-columns: 1fr; }
}

@media (min-width: 981px) {
    body.staff-console .console-overlay { display: none !important; }
}

/* Metrics modules */
.staff-kpi-hint {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--staff-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.staff-kpi-grid article {
    min-height: 96px;
    height: auto;
}
.staff-range {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.staff-range-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--staff-line);
    background: #fff;
    color: var(--staff-muted) !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
.staff-range-pill.is-active {
    background: #16161f;
    border-color: #16161f;
    color: #fff !important;
}
.staff-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0 18px;
}
.staff-metrics-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-panel {
    background: #fff;
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    padding: 16px 18px 18px;
    min-width: 0;
}
.staff-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}
.staff-panel-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.staff-panel-head a {
    font-size: 0.8rem;
    font-weight: 700;
}
.staff-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.staff-mini-stats strong {
    display: block;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}
.staff-mini-stats span {
    color: var(--staff-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.staff-panel-meta {
    font-size: 0.85rem;
    color: var(--staff-muted);
    font-weight: 600;
    line-height: 1;
}
.staff-panel--pay-split .staff-panel-head {
    align-items: center;
    gap: 6px;
}
.staff-pay-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}
.staff-pay-split-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.staff-pay-split-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--staff-line, #ececf3);
    font-size: 0.85rem;
}
.staff-pay-split-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.staff-pay-split-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: block;
}
.staff-pay-split-label {
    color: var(--staff-text, #111);
    font-weight: 650;
}
.staff-pay-split-count {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.staff-pay-split-chart-wrap {
    width: 88px;
    height: 88px;
    padding: 10px;
    border-radius: 12px;
    background: #f4f4f8;
    flex-shrink: 0;
}
.staff-pay-split-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e5e7eb;
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}
@media (max-width: 520px) {
    .staff-pay-split {
        grid-template-columns: 1fr;
    }
    .staff-pay-split-chart-wrap {
        justify-self: center;
    }
}
.staff-mini-stats--compact {
    margin-bottom: 14px;
}
.staff-trend-up {
    color: #15803d;
    font-weight: 700;
}
.staff-trend-down {
    color: #b45309;
    font-weight: 700;
}
.staff-sales-spark {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-height: 88px;
    padding: 8px 4px 0;
    border-top: 1px solid var(--staff-line, #ececf3);
}
.staff-sales-spark-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 72px;
}
.staff-sales-spark-col i {
    display: block;
    width: 100%;
    max-width: 22px;
    min-height: 4px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);
}
.staff-sales-spark-col span {
    font-size: 0.62rem;
    font-weight: 650;
    color: var(--staff-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}
.staff-bars { display: grid; gap: 8px; }
.staff-bar-row {
    display: grid;
    grid-template-columns: minmax(70px, 120px) 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 0.8rem;
}
.staff-bar-row span {
    color: var(--staff-muted);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staff-bar-row i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #efeaf6;
    position: relative;
    overflow: hidden;
}
.staff-bar-row i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    background: linear-gradient(90deg, #6d5efc, #3f37b3);
    border-radius: inherit;
}
.staff-bar-row b { font-weight: 750; white-space: nowrap; }
.staff-funnel { display: grid; gap: 10px; }
.staff-funnel-step {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    align-items: center;
}
.staff-funnel-track {
    height: 12px;
    border-radius: 999px;
    background: #efeaf6;
    overflow: hidden;
}
.staff-funnel-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6d5efc, #3f37b3);
    border-radius: inherit;
}
.staff-funnel-step strong { display: block; font-size: 1.05rem; }
.staff-funnel-step span { color: var(--staff-muted); font-size: 0.78rem; font-weight: 600; }
.staff-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 800;
    margin: 0 0 14px;
}
.staff-status.is-ok { background: #ecfdf3; color: #027a48; }
.staff-status.is-watch { background: #fffaeb; color: #b54708; }
.staff-geo {
    display: grid;
    grid-template-columns: minmax(240px, 1.15fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.staff-geo-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.staff-geo-pair.staff-geo-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.staff-geo-pair .staff-geo {
    grid-template-columns: 1fr;
}
.staff-geo.is-compact { grid-template-columns: 1fr; }
.staff-geo.is-compact .staff-india-map-wrap,
.staff-geo.is-compact .staff-world-map-wrap,
.staff-geo.is-compact .staff-tn-map-wrap { max-height: 280px; }
.staff-india-map-wrap,
.staff-world-map-wrap,
.staff-tn-map-wrap {
    position: relative;
    padding: 12px 12px 28px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(109, 94, 252, 0.08), transparent 55%),
        linear-gradient(160deg, #f7f5fc 0%, #efeaf8 100%);
    overflow: hidden;
}
.staff-india-svg,
.staff-world-svg,
.staff-tn-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
}
.staff-world-svg {
    max-height: 360px;
    stroke: #fff;
}
.staff-tn-svg {
    max-height: 520px;
}
.staff-geo.is-compact .staff-india-svg,
.staff-geo.is-compact .staff-world-svg,
.staff-geo.is-compact .staff-tn-svg { max-height: 240px; }
.staff-map-wrap {
    position: relative;
}
.staff-map-tip {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    max-width: min(240px, 70vw);
    padding: 6px 10px;
    border-radius: 8px;
    background: #16161f;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 24px rgba(22, 22, 31, 0.2);
    white-space: nowrap;
}
.staff-map-tip[hidden] { display: none; }
.staff-india-path,
.staff-world-path,
.staff-tn-path {
    stroke: #fff;
    stroke-width: 0.6;
    cursor: pointer;
    pointer-events: visiblePainted;
    transition: fill 0.15s ease, stroke-width 0.15s ease;
}
.staff-world-path { stroke-width: 0.35; }
.staff-india-path:hover,
.staff-world-path:hover,
.staff-tn-path:hover {
    stroke: #16161f;
    stroke-width: 1.2;
    filter: brightness(0.92);
}
.staff-india-path.is-active,
.staff-world-path.is-active,
.staff-tn-path.is-active {
    stroke: #6d5efc;
    stroke-width: 1.4;
}
.staff-india-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--staff-muted);
}
.staff-india-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.staff-india-legend span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.staff-india-legend .lv-0::before { background: #e8e4f2; }
.staff-india-legend .lv-1::before { background: #c9bdf7; }
.staff-india-legend .lv-2::before { background: #9b87f0; }
.staff-india-legend .lv-3::before { background: #6d5efc; }
.staff-india-legend .lv-4::before { background: #3f37b3; }
.staff-map-credit {
    margin: 8px 0 0;
    font-size: 0.65rem;
    color: var(--staff-muted);
}
.staff-map-credit a { color: inherit; }
.staff-bar-link {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 4px 6px;
    margin: 0 -6px;
}
.staff-bar-link:hover,
.staff-bar-link.is-active {
    background: rgba(109, 94, 252, 0.08);
}
.staff-geo-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f7f5fc;
}
.staff-geo-filters label {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--staff-muted);
}
.staff-geo-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.staff-pin-result {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #eef2ff;
    font-size: 0.9rem;
}
.staff-subhead {
    margin: 16px 0 8px;
    font-size: 0.9rem;
    font-weight: 800;
}
.staff-city-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.staff-city-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
}
.staff-city-list a { color: inherit; text-decoration: none; font-weight: 700; }
.staff-city-list a:hover { color: #6d5efc; }
.staff-city-list span { color: var(--staff-muted); }
.staff-health-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.staff-health-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f4fb;
    font-size: 0.86rem;
}
.staff-health-list li.is-ok strong { color: #027a48; }
.staff-health-list li.is-bad strong { color: #b42318; }
.staff-mail-table td:first-child,
.staff-mail-table th:first-child { width: 52px; }
.staff-mail-table td:last-child { white-space: normal; }
.staff-mail-template-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}
.staff-mail-template-preview {
    width: 100%;
    min-height: 520px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
@media (max-width: 1100px) {
    .staff-mail-template-grid { grid-template-columns: 1fr; }
}

.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.settings-nav a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eceaf2;
    color: #3d3a48 !important;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}
.settings-nav a.is-active {
    background: #16161f;
    color: #fff !important;
}
.settings-item-desc {
    margin: 0 0 14px;
    line-height: 1.45;
}
.settings-item-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}
.settings-item-controls.is-multiline {
    align-items: flex-start;
}
.settings-item-control-field {
    flex: 1 1 12rem;
    min-width: 0;
}
.settings-item-control-field .form-control,
.settings-item-control-field textarea.form-control {
    width: 100%;
    margin: 0;
}
.settings-item-reauth-field {
    flex: 0 1 10rem;
    min-width: 8rem;
    max-width: 12rem;
}
.settings-reset-link {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 4px;
    border: 0;
    background: transparent;
    color: var(--accent, #7c6cff);
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.settings-reset-link:hover {
    color: var(--accent-deep, #5b4de6);
    text-decoration: underline;
}
.settings-item-controls .btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .settings-item-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-item-reauth-field {
        max-width: none;
    }
    .settings-reset-link {
        align-self: flex-start;
        padding-left: 0;
    }
}
.settings-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.risk-low { background: #e8f7ee; color: #027a48; }
.risk-medium { background: #fff4d6; color: #8a5a00; }
.risk-high { background: #ffead8; color: #b54708; }
.risk-critical { background: #fde8e8; color: #b42318; }
.settings-affects {
    font-size: 0.72rem;
    color: #b54708;
    font-weight: 700;
}
.settings-warn {
    background: #fff6ea;
    border: 1px solid #f3d2a4;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}
.settings-secret-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.settings-secret-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.settings-status-on { color: #027a48; font-weight: 700; }
.settings-status-off { color: #6f6b7b; font-weight: 700; }
.settings-reset { margin-top: -4px; }
.settings-actions { display: flex; gap: 8px; }

.staff-status-reason {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--staff-muted);
    margin-top: 4px;
}
.staff-health-list li.is-watch strong { color: #b54708; }
.staff-health-list li.is-muted strong { color: #667085; }
.staff-status-banner {
    display: grid;
    gap: 4px;
    margin: 0 0 18px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #f7f4fb;
}
.staff-status-banner.is-ok { background: #ecfdf3; }
.staff-status-banner.is-watch { background: #fffaeb; }
.staff-status-banner.is-bad { background: #fef3f2; }
.staff-status-banner.is-muted { background: #f2f4f7; }
.staff-status-banner strong { font-size: 1.05rem; }
.staff-status-banner em { color: var(--staff-muted); font-style: normal; font-size: 0.8rem; }
.staff-cc-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 18px;
}
@media (max-width: 800px) {
    .staff-cc-status { grid-template-columns: 1fr; }
}
.staff-cc-status .staff-status-banner { margin: 0; }
.staff-cc-status a { color: inherit; font-weight: 750; }
.staff-attention {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.staff-attention li {
    padding: 10px 14px;
    border-radius: 12px;
    background: #fffaeb;
    font-size: 0.88rem;
    font-weight: 650;
}
.staff-attention li.is-bad { background: #fef3f2; }
.staff-funnel-note {
    margin: 0 0 10px;
    color: var(--staff-muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.staff-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.staff-ops-grid .staff-panel p { margin: 0 0 10px; color: var(--staff-muted); font-size: 0.86rem; }
.staff-status.is-muted { background: #f2f4f7; color: #475467; }
.staff-status.is-bad { background: #fef3f2; color: #b42318; }
.staff-limitations {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 8px;
    color: var(--staff-muted);
    font-size: 0.88rem;
}
.staff-ops-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.staff-ops-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f4fb;
    font-size: 0.86rem;
}
.staff-ops-list li.is-na span { color: var(--staff-muted); }
.staff-ops-list li.is-ok strong { color: #027a48; }
.staff-warn-list,
.staff-fix-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.staff-warn-list li,
.staff-fix-list li {
    padding: 12px 14px;
    border-radius: 14px;
    background: #fffaeb;
}
.staff-warn-list li.is-ok { background: #ecfdf3; }
.staff-warn-list li.is-watch { background: #fffaeb; }
.staff-warn-list li.is-bad { background: #fef3f2; }
.staff-warn-list strong,
.staff-fix-list strong { display: block; }
.staff-warn-list span,
.staff-warn-list em,
.staff-fix-list span {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--staff-muted);
    font-style: normal;
}
.staff-fix-list li { background: #f7f4fb; }
.staff-fix-list a { font-weight: 750; }
.staff-filter-note { color: var(--staff-muted); margin: 0 0 12px; }
.staff-audit-filter { margin: 0 0 16px; flex-wrap: wrap; }
/* Both rules need the body prefix to outrank the shared form-control and
   form-label rules (padding and a 6px bottom margin) that body.app-console
   applies to these controls; without it the label sits high and the select
   keeps width:100%, filling the line and wrapping the rest of the filter onto
   rows of its own. */
body.staff-console .staff-audit-filter .form-label { margin: 0; }
body.staff-console .staff-audit-filter .form-control { width: auto; min-width: 260px; }
body.staff-console .integration-test-form.mail-ses-test-form,
body.staff-console .mail-delivery-config .integration-test-form {
    max-width: 480px;
}
body.staff-console .mail-ses-test-recipient {
    width: 100%;
    min-width: min(100%, 320px);
    max-width: 480px;
}
.staff-action-code {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--staff-muted);
}

@media (max-width: 1180px) {
    .staff-geo-pair.staff-geo-trio {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 980px) {
    .staff-metrics-grid,
    .staff-metrics-grid-2,
    .staff-geo,
    .staff-geo-pair,
    .staff-funnel-step,
    .staff-geo-filters {
        grid-template-columns: 1fr;
    }
    .staff-bar-row {
        grid-template-columns: 90px 1fr auto;
    }
}

/* ------------------------------------------------------------------
   Profile Admin (the card console) wears the same chrome.

   The panel loads this stylesheet too, so the dark void, the curved
   frame, the sidebar, the nav and the content primitives all come from
   the rules above: one shell, one look, both consoles. What follows is
   only what the card console adds on top of that shell — its completion
   meter, its top-bar chips, its gate strip and its publish action.
   Everything is scoped to body.staff-console-card, so the Control
   Center never sees any of it.
   ------------------------------------------------------------------ */

/* Completion meter. app.css paints the meter for a light chrome; on the
   void it needs the light-on-dark pair instead. */
body.staff-console-card .chrome-progress {
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    color: #fff;
}
body.staff-console-card .chrome-progress-label {
    opacity: 0.72;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
body.staff-console-card .chrome-progress-track {
    background: rgba(255, 255, 255, 0.18);
    min-width: 120px;
}
body.staff-console-card .chrome-progress-track i {
    background: linear-gradient(90deg, #a394ff, #7c6cf0);
}
body.staff-console-card .chrome-progress-pct {
    color: #fff;
    font-weight: 750;
}

/* Top-bar chips read as Control Center links on the dark chrome rather
   than as white cards. The accent chips (share, preview) keep a fill. */
body.staff-console-card .staff-chrome-end .console-chip {
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.84rem;
    font-weight: 650;
}
body.staff-console-card .staff-chrome-end .console-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
body.staff-console-card .staff-chrome-end .console-chip-accent {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}
body.staff-console-card .staff-chrome-end .console-chip-accent:hover {
    background: var(--accent-deep);
    color: #fff;
}
body.staff-console-card .staff-chrome-end button.console-share {
    color: rgba(255, 255, 255, 0.92);
}
body.staff-console-card .staff-chrome-end button.console-share:hover {
    color: #fff;
}
body.staff-console-card .staff-chrome-end button.console-share:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The gate strip (tour agreement / plan lock) sits on the void between
   the chrome and the frame, so it is a translucent bar, not a white band. */
.staff-shell .console-bars {
    flex: none;
    padding: 0 14px 8px;
    background: none;
    display: flex;
    justify-content: center;
}
.staff-shell .console-bars:has(.plan-lock-bar) {
    justify-content: flex-end;
}
.staff-shell .console-bars .tour-agree-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: min(980px, 100%);
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.92);
}
.staff-shell .console-bars .plan-lock-bar {
    width: auto;
    max-width: min(100%, 22rem);
    margin: 0 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 6px 20px rgba(12, 8, 32, 0.12);
    color: #23233a;
}
.staff-shell .plan-lock-callout {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(91, 79, 214, 0.22);
    background: linear-gradient(135deg, rgba(124, 108, 255, 0.08), rgba(255, 255, 255, 0.96));
    box-shadow: 0 8px 24px rgba(40, 28, 120, 0.06);
}
.staff-shell .plan-lock-callout .plan-lock-note {
    white-space: normal;
    font-size: 0.92rem;
}
.staff-shell .plan-lock-note {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.staff-shell .plan-lock-note a {
    font-weight: 800;
    color: #5b4fd6;
    text-decoration: none;
}
.staff-shell .plan-lock-note a:hover {
    color: #4338ca;
    text-decoration: underline;
}
.staff-shell .console-bars .tour-agree-bar p {
    font-weight: 700;
    font-size: 0.9rem;
}
@media (max-width: 520px) {
    .staff-shell .console-bars {
        justify-content: center;
    }
    .staff-shell .console-bars .plan-lock-bar {
        margin-inline: auto;
        max-width: 100%;
    }
    .staff-shell .plan-lock-note {
        white-space: normal;
        text-align: center;
    }
}

/* Sidebar footer: the Publish action sits under the nav on the light
   panel, the way every other console footer action does. */
body.staff-console-card .staff-side .console-side-foot {
    flex: none;
    border-top: 1px solid var(--staff-line);
    background: transparent;
}
body.staff-console-card .staff-side .console-publish .btn {
    width: 100%;
}

@media (max-width: 980px) {
    /* app.css greys the main panel on narrow screens; the frame stays white
       so both consoles stack the same way. */
    body.staff-console-card .staff-main,
    body.staff-console-card .console-main {
        background: var(--staff-panel);
    }
    /* The narrow chrome keeps the mark, drops the wordmark — same as the
       Control Center. app.css hides the whole brand link on mobile. */
    body.staff-console-card .staff-chrome .console-brand {
        display: inline-flex !important;
        align-items: center;
    }
    body.staff-console-card .staff-chrome .console-brand span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
}

/* ------------------------------------------------------------------
   Blog admin (Control Center)
   Self-contained layout: the manager and the post editor must render
   correctly on their own, without depending on utility grid helpers.
   ------------------------------------------------------------------ */
body.app-console .blog-admin {
    width: 100%;
    min-width: 0;
}
body.app-console .blog-admin .card,
body.app-console .blog-admin .card.card-body {
    padding: 22px 24px;
    border: 1px solid var(--staff-line);
    border-radius: 20px;
    background: #fff;
}
body.app-console .blog-admin .card > .h6:first-of-type,
body.app-console .blog-admin .card.card-body > .h6:first-of-type {
    margin-top: 0;
}
body.app-console .blog-admin .form-control {
    width: 100%;
    max-width: 100%;
}
body.app-console .blog-admin .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 750;
    color: #4a4560;
}

.blog-admin__head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}
.blog-admin__head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.blog-admin__lede {
    margin: 0;
    max-width: 62ch;
    color: var(--staff-muted);
}

.blog-admin__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 14px;
    align-items: center;
}
.blog-admin__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.blog-admin__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--staff-line);
    border-radius: 999px;
    background: #fff;
    color: #43405a;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.blog-admin__tab em {
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1ecfa;
    color: #5b5670;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}
.blog-admin__tab.is-active {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
}
.blog-admin__tab.is-active em {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.blog-admin__search {
    display: flex;
    gap: 8px;
}
.blog-admin__search .form-control { min-width: 0; }

.blog-admin__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
    gap: 18px;
    align-items: start;
}
.blog-admin__split > * { min-width: 0; }
.blog-admin__split--aside-wide {
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
}
.blog-admin__aside {
    min-width: 0;
    position: sticky;
    top: 0;
}

body.app-console .blog-admin__stats {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 0 0 18px;
}
.blog-admin-table--posts { min-width: 880px; }
.blog-admin-table td,
.blog-admin-table th { overflow-wrap: anywhere; }
.blog-admin-table td.blog-admin-table--actions,
.blog-admin-table th.blog-admin-table--actions { white-space: nowrap; }
.blog-admin-table td.blog-admin-table--actions { width: 1%; }
.blog-admin-table form { display: inline; margin: 0; }
.blog-admin-table .staff-inline { flex-wrap: nowrap; }

.blog-admin-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.blog-admin-title img,
.blog-admin-title .blog-admin-title__ph {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 12px;
    object-fit: cover;
    background: #f1ecfa;
}
.blog-admin-title .blog-admin-title__ph {
    display: grid;
    place-items: center;
    color: #8b8798;
}
.blog-admin-title a { font-weight: 750; }
.blog-admin-title__meta {
    display: block;
    margin-top: 3px;
    color: var(--staff-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}
.blog-admin-status {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.blog-admin-status small { color: var(--staff-muted); }

.blog-admin__permalink {
    display: flex;
    align-items: stretch;
    border: 1px solid #ded8ea;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.blog-admin__permalink-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f7f4fb;
    border-right: 1px solid #ded8ea;
    color: var(--staff-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.app-console .blog-admin__permalink .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
}
.blog-admin__permalink.is-needs-manual {
    border-color: #c62828;
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.15);
}
.blog-admin__permalink.is-needs-manual .form-control {
    background: #fff8f8;
}
.blog-admin__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 16px;
}
.blog-admin__hint {
    margin: 6px 0 0;
    color: var(--staff-muted);
    font-size: 0.8rem;
}
.blog-admin__cover {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid var(--staff-line);
}
.blog-admin__savebar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}
.blog-admin__note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f4fb;
    color: #4a4560;
    font-size: 0.82rem;
}
.blog-admin__note.is-due { background: #fff7e6; color: #92400e; }

@media (max-width: 1180px) {
    .blog-admin__toolbar,
    .blog-admin__split,
    .blog-admin__split--aside-wide {
        grid-template-columns: minmax(0, 1fr);
    }
    .blog-admin__aside { position: static; }
}


/* Customer Usage Dashboard (superadmin) — self-contained; no bootstrap grid. */
.usage-dash {
    --usage-accent: #6d5efc;
    --usage-up: #027a48;
    --usage-down: #b42318;
    display: grid;
    /* minmax(0, 1fr) stops a wide child (the search input) from sizing the
       column and pushing the whole page sideways. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}
.usage-dash__head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
}
.usage-dash__intro { flex: 1 1 300px; min-width: 0; }
.usage-dash__intro h1 { margin: 2px 0 6px; }
.usage-dash__intro > p:last-child { margin: 0; max-width: 56ch; font-size: 0.9rem; }
.usage-dash__intro .editor-kicker a { color: inherit; text-decoration: none; font-weight: 700; }
.usage-dash__intro .editor-kicker a:hover { color: var(--usage-accent); }
.usage-dash__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    max-width: 100%;
}
/* The search, its Search/Clear buttons and the Export link next to it all sit on
   one line at one height. The form used to be a plain block, so on Customers the
   buttons dropped underneath the field, and the field, the buttons and Export
   were three different heights (50 / 44 / 41) on the same row. */
.usage-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 0 0 auto;
}
.usage-search__label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(34ch, 42vw);
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--staff-line);
    border-radius: 999px;
    background: var(--staff-panel);
}
.usage-search__label .form-control {
    border: 0;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: transparent;
    width: 100%;
    min-width: 0;
    height: 42px;
}
.usage-search__label .form-control:focus { box-shadow: none; }
.usage-search__icon { color: var(--staff-muted); font-size: 0.95rem; }
.usage-search .btn { min-height: 44px; }
.usage-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--staff-line);
    background: var(--staff-panel);
    color: var(--staff-ink);
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    white-space: nowrap;
}
.usage-export:hover { border-color: var(--usage-accent); color: var(--usage-accent); }

.usage-kpis {
    display: grid;
    /* 8 cards fit one row on a full-width console; they reflow below that. */
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 12px;
}
.usage-kpis article {
    padding: 14px 16px;
    border: 1px solid var(--staff-line);
    border-radius: 16px;
    background: var(--staff-panel);
    min-width: 0;
}
.usage-kpis strong { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.usage-kpis span { display: block; margin-top: 2px; color: var(--staff-muted); font-size: 0.76rem; font-weight: 650; }

/* Average Dashboard — the compact per-profile growth panel: averages by period on
   the left, most-clicked CTA and month-on-month growth beside it. */
.usage-average {
    padding: 14px 16px 16px;
    border: 1px solid var(--staff-line);
    border-radius: 16px;
    background: var(--staff-panel);
    min-width: 0;
}
.usage-average__head {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.usage-average__head h2 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.usage-average__head p { margin: 0; color: var(--staff-muted); font-size: 0.76rem; font-weight: 600; }
.usage-average__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.usage-average__matrix { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.usage-average__matrix th,
.usage-average__matrix td { padding: 7px 8px; text-align: right; }
.usage-average__matrix thead th {
    color: var(--staff-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.usage-average__matrix tbody th { text-align: left; font-weight: 700; color: var(--staff-ink); }
.usage-average__matrix tbody td { font-weight: 750; font-variant-numeric: tabular-nums; }
.usage-average__matrix tbody tr + tr th,
.usage-average__matrix tbody tr + tr td { border-top: 1px solid var(--staff-line); }
.usage-average__matrix thead th + th { border-left: 1px solid var(--staff-line); }
.usage-average__card {
    padding: 10px 12px;
    border: 1px solid var(--staff-line);
    border-radius: 14px;
    background: #faf9ff;
    min-width: 0;
}
.usage-average__card h3 {
    margin: 0 0 6px;
    color: var(--staff-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.usage-average__big { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.usage-average__meta { margin: 5px 0 0; color: var(--staff-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.4; }
.usage-average__mom { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.usage-average__mom li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
}
.usage-average__mom span { color: var(--staff-muted); font-weight: 600; }
.usage-average__mom b { font-weight: 800; font-variant-numeric: tabular-nums; }
.usage-average__mom b.is-up { color: var(--usage-up); }
.usage-average__mom b.is-down { color: var(--usage-down); }
.usage-average__mom b.is-flat { color: var(--staff-muted); }
@media (max-width: 900px) {
    .usage-average__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Metrics Dashboard — pro-analytics panels.

   The dashboard used to be a flat grey page of white tiles. It now wears the
   same dark summary panel as the customer-facing pro-analytics page, so the two
   read as one product. The .an-* classes come from profile-admin/app.css, which
   the staff layout already loads; everything below only re-scopes them to
   .usage-dash and re-colours the usage-* internals that sit inside a panel.
   Selectors stay two classes deep so they beat both the .an-* bases and the
   single-class .usage-* rules above regardless of file order. */
.usage-dash .an-life {
    padding: 22px 20px 20px;
    border: 1px solid #4a3d8a;
    border-radius: 24px;
    background: linear-gradient(165deg, #3a2d78 0%, #1c163c 62%, #12101f 100%);
    box-shadow: 0 28px 56px rgba(28, 18, 70, 0.32);
    color: #fff;
}
.usage-dash .an-life > h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: -0.04em;
}
.usage-dash .an-life .an-note {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}
/* Tile counts are pinned per breakpoint so a row always fills its lines — the
   auto-fit base would leave a lonely tile beside empty columns. */
.usage-dash .an-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
    .usage-dash .an-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .usage-dash .an-kpis-4 { grid-template-columns: minmax(0, 1fr); }
}
/* The .an-life bases only know .an-kpi and .an-rates articles, so the panel's
   usage-* tiles need the translucent treatment stated explicitly. */
.usage-dash .an-life .usage-kpis article,
.usage-dash .an-life .usage-average__card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
}
.usage-dash .an-life .usage-kpis strong { color: #fff; font-size: 1.6rem; letter-spacing: -0.04em; }
.usage-dash .an-life .usage-kpis span { color: rgba(255, 255, 255, 0.68); }
.usage-dash .an-life .usage-average__card h3 { color: rgba(255, 255, 255, 0.62); }
.usage-dash .an-life .usage-average__big { color: #fff; }
.usage-dash .an-life .usage-average__meta { color: rgba(255, 255, 255, 0.68); }
.usage-dash .an-life .usage-average__matrix thead th { color: rgba(255, 255, 255, 0.62); }
.usage-dash .an-life .usage-average__matrix tbody th { color: #fff; }
.usage-dash .an-life .usage-average__matrix tbody tr + tr th,
.usage-dash .an-life .usage-average__matrix tbody tr + tr td { border-top-color: rgba(255, 255, 255, 0.14); }
.usage-dash .an-life .usage-average__matrix thead th + th { border-left-color: rgba(255, 255, 255, 0.14); }
.usage-dash .an-life .usage-average__mom span { color: rgba(255, 255, 255, 0.68); }
.usage-dash .an-life .usage-average__mom b.is-up { color: #6ee7a8; }
.usage-dash .an-life .usage-average__mom b.is-down { color: #ff9d9d; }
.usage-dash .an-life .usage-average__mom b.is-flat { color: rgba(255, 255, 255, 0.68); }
/* One accent for the whole page: the active range pill matches the panels. */
.usage-dash .staff-range-pill.is-active {
    background: var(--usage-accent);
    border-color: var(--usage-accent);
    color: #fff !important;
}

.usage-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.usage-filters .staff-range { margin: 0; }
.usage-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin: 0;
}
.usage-dates__field { display: grid; gap: 3px; font-size: 0.72rem; font-weight: 700; color: var(--staff-muted); }
.usage-dates__field .form-control { padding: 7px 10px; font-size: 0.86rem; }
.usage-dates__note { margin: 0; flex-basis: 100%; color: var(--staff-muted); font-size: 0.8rem; }

.usage-table-wrap {
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    background: var(--staff-panel);
    /* The table is a query container: with enough room the fixed grid below
       takes over and the table always fits (no horizontal scrollbar). Without
       it — narrow windows and phones — the table keeps natural widths and
       scrolls sideways, which is the accepted behaviour on mobile. */
    container-type: inline-size;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.usage-table { font-size: 0.84rem; }
/* The 15-column dashboard table needs 1000px before the fixed grid engages. */
.usage-table--grid { min-width: 1000px; font-size: 0.82rem; }
/* The 9-column detail table has few enough columns to always fit. */
.usage-table--fit { width: 100%; }

@container (min-width: 1000px) {
    .usage-table-wrap { overflow-x: hidden; }
    .usage-table--grid {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
        font-size: 0.8rem;
    }
}
/* Column grid — percentages, so the table tracks the console width exactly.

   Two tiers, because 15 columns of real data only just fit a console:

   Narrow consoles (up to 1534px of table) keep the compact grid the table was
   tuned for: every column is squeezed, so a long name or a plan badge wraps and
   the spacing between columns is whatever spare width each one happened to hold.

   Wide consoles get the grid below — the one the table is actually designed
   for. Each column is exactly as wide as its widest value (header label plus
   sort caret, or the longest cell) with the SAME gutter added to every one, so
   the white space between neighbouring columns is identical end to end instead
   of running from 12px to 90px. That only works with no spare width left in any
   column: slack sits on a cell's alignment side (a left-aligned cell parks it on
   the right, a right-aligned one on the left), which is exactly what made the
   gutters uneven. So the widths are content + a uniform gutter against the
   ~1570px a full-width console gives the table, and the 10px side padding below
   is what turns that gutter into the space you see. */
.usage-table { --usage-cell-pad-x: 6px; }
.usage-col--id { width: 6.8%; }
.usage-col--customer { width: 11.5%; }
.usage-col--company { width: 8.6%; }
.usage-col--plan { width: 9.6%; }
.usage-col--expiry { width: 8%; }
.usage-col--card { width: 5.4%; }
.usage-col--views { width: 6.4%; }
.usage-col--growth { width: 6.6%; }
.usage-col--leads { width: 4.5%; }
.usage-col--enquiries { width: 4.5%; }
.usage-col--whatsapp { width: 7.2%; }
.usage-col--saved { width: 4.7%; }
.usage-col--enquiry-rate { width: 4.7%; }
.usage-col--engagement-rate { width: 5.7%; }
.usage-col--detail { width: 5.8%; }

/* The even-gutter grid, from the width where every column can hold its widest
   value on one line. Below it the compact grid above stays in charge, so the
   table keeps inside the console instead of scrolling sideways. */
@container (min-width: 1535px) {
    .usage-table--grid { --usage-cell-pad-x: 10px; }
    .usage-col--id { width: 7.59%; }
    .usage-col--customer { width: 12.58%; }
    .usage-col--company { width: 12.13%; }
    .usage-col--plan { width: 7.34%; }
    .usage-col--expiry { width: 7.31%; }
    .usage-col--card { width: 3.96%; }
    .usage-col--views { width: 4.93%; }
    .usage-col--growth { width: 6.08%; }
    .usage-col--leads { width: 5.06%; }
    .usage-col--enquiries { width: 4.29%; }
    .usage-col--whatsapp { width: 7.24%; }
    .usage-col--saved { width: 5.15%; }
    .usage-col--enquiry-rate { width: 5.2%; }
    .usage-col--engagement-rate { width: 6.5%; }
    .usage-col--detail { width: 4.67%; }
}

.usage-table th,
.usage-table td {
    padding: 10px var(--usage-cell-pad-x);
    vertical-align: middle;
}
.usage-table th { overflow-wrap: normal; }
.usage-table td { overflow-wrap: anywhere; }
.usage-table thead th {
    background: #faf9fd;
}
/* A header that wraps a sortable .usage-th link brings its own padding, so the
   cell keeps none. Plain headers (e.g. the detail table) keep the body inset. */
.usage-table thead th:has(> .usage-th) {
    padding: 0;
}
.usage-table thead th > .usage-th {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 3px;
    /* Same inset as the body cells below, so a header label sits exactly over
       the figures in its column. */
    padding: 10px var(--usage-cell-pad-x);
    color: var(--staff-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
}
.usage-table thead th > .usage-th:hover { background: #f4f1fd; }
/* Reversed order hides the sort caret on the left of the label while the label
   itself stays flush with the right-aligned figures underneath it. */
.usage-table thead th > .usage-th.is-right {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.usage-table thead th > .usage-th.is-center { justify-content: center; }
.usage-table thead th > .usage-th:hover { color: var(--usage-accent); }
.usage-table thead th > .usage-th.is-sorted { color: var(--usage-accent); }
.usage-th__caret { font-size: 0.62rem; line-height: 1; }
.usage-table thead th.usage-th {
    padding: 10px var(--usage-cell-pad-x);
    color: var(--staff-muted);
    font-size: 0.7rem;
    font-weight: 750;
    text-align: center;
}
.usage-table tbody tr:hover { background: #fbfaff; }
.usage-table td { border-bottom: 1px solid #f0edf7; }
.usage-table tbody tr:last-child td { border-bottom: 0; }

.usage-code {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    color: #4a4560;
}
.usage-sub { display: block; color: var(--staff-muted); font-size: 0.76rem; }
.usage-muted { color: var(--staff-muted); }
.usage-nowrap { white-space: nowrap; }
/* The td-scoped copies below are deliberate: the base .staff-table td rule sets
   text-align: left at (0,1,1) and would otherwise beat these single-class
   alignments, leaving every figure under a right-aligned header. */
.usage-center, .usage-table td.usage-center { text-align: center; }
.usage-num,
.usage-table td.usage-num,
.usage-table thead th.usage-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Growth sits left so it never crowds the right-aligned views figure. */
.usage-num--left, .usage-table td.usage-num--left { text-align: left; }
.usage-sub { font-size: 0.7rem; }
.usage-view { font-size: 0.74rem; }

.usage-plan {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}
.usage-plan.is-pro { background: #ece9fe; color: #4c3fd6; }
.usage-plan.is-basic { background: #e8f1fd; color: #175cd3; }

.usage-view {
    color: var(--usage-accent);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.usage-view:hover { text-decoration: underline; }

.usage-growth { font-weight: 750; white-space: nowrap; }
.usage-growth.is-up { color: var(--usage-up); }
.usage-growth.is-down { color: var(--usage-down); }
.usage-growth.is-flat { color: var(--staff-muted); }

.usage-detail-link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f1eefc;
    color: #4c3fd6;
    font-weight: 750;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}
.usage-detail-link:hover { background: var(--usage-accent); color: #fff; }

.usage-empty { padding: 26px 14px !important; text-align: center; color: var(--staff-muted); }

.usage-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px;
}
.usage-foot p { margin: 0; color: var(--staff-muted); font-size: 0.82rem; }
.usage-pager { display: flex; align-items: center; gap: 6px; }
.usage-pager__page,
.usage-pager__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--staff-line);
    border-radius: 10px;
    background: var(--staff-panel);
    color: var(--staff-ink);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}
.usage-pager__page:hover,
.usage-pager__step:hover { border-color: var(--usage-accent); color: var(--usage-accent); }
.usage-pager__page.is-active {
    background: var(--usage-accent);
    border-color: var(--usage-accent);
    color: #fff;
}
.usage-pager__step.is-disabled { opacity: 0.45; pointer-events: none; }
.usage-pager__gap { color: var(--staff-muted); padding: 0 4px; }

/* ---------------------------------------------------------------- Customers
   The Customers list reuses the usage-dashboard shell (KPI strip, container
   query, pager). Only the column grid and the row-level controls are new. */
.cust-table td { padding: 9px 6px; }
.cust-table .usage-th { font-size: 0.66rem; }
/* 11 columns instead of 15, so the fixed grid can engage ~100px earlier and a
   standard laptop console (~930px of content) still fits without a scrollbar. */
.cust-table { min-width: 900px; }
@container (min-width: 900px) {
    .usage-table-wrap:has(.cust-table) { overflow-x: hidden; }
    .cust-table { min-width: 0; width: 100%; table-layout: fixed; font-size: 0.78rem; }
}
.cust-col--id { width: 6%; }
.cust-col--email { width: 17%; }
.cust-col--name { width: 12%; }
.cust-col--status { width: 8%; }
.cust-col--consent { width: 9%; }
.cust-col--package { width: 12%; }
.cust-filters { align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.cust-filters__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; flex: 1 1 520px; }
.cust-filters__field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.cust-filters__label { font-size: 0.72rem; font-weight: 700; color: var(--staff-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cust-filters__export { flex-shrink: 0; white-space: nowrap; }
.cust-filters__hint { margin: -4px 0 16px; }
.cust-consent { display: flex; flex-wrap: wrap; gap: 4px; }
.cust-consent .cust-chip { font-size: 0.68rem; padding: 2px 7px; }
.cust-col--profile { width: 9.5%; }
.cust-col--dates { width: 8%; }
.cust-col--journey { width: 9%; }
.cust-col--manage { width: 13%; }
.cust-col--detail { width: 7%; }
.cust-journey { font-size: 0.82rem; line-height: 1.35; }
.cust-journey-table td { vertical-align: top; }

/* The whole row must stay one line tall: the status control and the add-on
   disclosure sit side by side, and the add-on form only widens when opened. */
.cust-manage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.cust-manage > form.cust-inline { flex: 1 1 auto; }
.cust-addon { flex: 0 0 auto; margin: 0; }
.cust-addon > summary {
    cursor: pointer;
    color: var(--usage-accent);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
    list-style: none;
}
.cust-addon > summary::-webkit-details-marker { display: none; }
.cust-addon[open] { flex: 1 1 100%; }
.cust-addon[open] > summary { margin-bottom: 4px; }

.cust-dates .usage-sub { white-space: nowrap; font-variant-numeric: tabular-nums; }

.cust-table td > form.cust-inline { margin: 0; }
.cust-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.cust-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--staff-line);
    border-radius: 9px;
    background: var(--staff-panel);
    color: var(--staff-ink);
    font-size: 0.72rem;
}
.cust-btn {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--usage-accent);
    border-radius: 9px;
    background: #f1eefc;
    color: var(--usage-accent);
    font-size: 0.74rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}
.cust-btn:hover { background: var(--usage-accent); color: #fff; }

.cust-chip {
    display: inline-block;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #eef0f4;
    color: #4a4560;
}
.cust-chip.is-active { background: #e4f5ea; color: #1c7c3f; }
.cust-chip.is-pending { background: #fdf1dc; color: #9a6a12; }
.cust-chip.is-suspended { background: #fde8e8; color: #b42318; }

.cust-tools {
    border: 1px solid var(--staff-line);
    border-radius: 16px;
    background: var(--staff-panel);
    padding: 12px 16px;
}
.cust-tools summary { cursor: pointer; font-weight: 750; font-size: 0.86rem; }
.cust-tools__body { padding-top: 12px; }

.cust-assign-panel {
    padding: 18px 20px 20px;
}
.cust-assign-panel__head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--staff-line);
}

.cust-assign-plan { width: 100%; margin: 0; }
.cust-assign-plan--panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.assign-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
@media (max-width: 720px) {
    .assign-plan-grid { grid-template-columns: 1fr; }
}
.assign-plan-field--full,
.assign-plan-field--wide {
    grid-column: 1 / -1;
}
@media (min-width: 721px) {
    .assign-plan-field--wide { grid-column: span 1; }
}
.assign-plan-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--staff-muted);
}
.assign-plan-field .form-control {
    width: 100%;
    min-height: 40px;
}
.assign-plan-customer {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(107, 70, 245, 0.06);
    font-weight: 650;
    font-size: 0.92rem;
}

.cust-assign-plan__confirms {
    margin: 0;
    border: 1px solid var(--staff-line);
    border-radius: 14px;
    padding: 14px 16px 12px;
    background: rgba(107, 70, 245, 0.04);
}
.cust-assign-plan__confirms legend {
    font-size: 0.82rem;
    font-weight: 750;
    padding: 0 6px;
    margin-bottom: 4px;
}
.cust-assign-plan__confirms-hint {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: var(--staff-muted);
}
.assign-plan-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
}
.assign-plan-check:last-child { margin-bottom: 0; }
.assign-plan-check--required {
    border-color: rgba(107, 70, 245, 0.25);
    background: rgba(107, 70, 245, 0.06);
}
.assign-plan-check .form-check-input {
    margin-top: 0.2rem;
    flex: none;
}
.assign-plan-check span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.assign-plan-check strong {
    font-size: 0.86rem;
    font-weight: 700;
}
.assign-plan-check small {
    font-size: 0.76rem;
    color: var(--staff-muted);
    line-height: 1.35;
}
.assign-plan-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}
.assign-plan-actions .btn-primary {
    min-width: 12rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.cust-assign-plan--compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    min-width: 220px;
}
.cust-assign-plan__confirms--compact {
    padding: 8px 10px;
}
.cust-addon--wide > .cust-assign-plan--compact { max-width: 280px; }

.usage-notes {
    border: 1px solid var(--staff-line);
    border-radius: 16px;
    background: var(--staff-panel);
    padding: 12px 16px;
}
.usage-notes summary { cursor: pointer; font-weight: 750; font-size: 0.86rem; }
.usage-notes ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.usage-notes li { display: grid; gap: 2px; }
.usage-notes li strong { font-size: 0.8rem; }
.usage-notes li span { color: var(--staff-muted); font-size: 0.8rem; }

.usage-trend { margin-top: 16px; }
.usage-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 150px;
    padding: 8px 2px 0;
    overflow-x: auto;
}
.usage-spark__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 16px;
    height: 100%;
}
.usage-spark__col i {
    width: 100%;
    height: var(--h, 2%);
    min-height: 3px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #8b7cf6, #6d5efc);
}
.usage-spark__col span { color: var(--staff-muted); font-size: 0.62rem; white-space: nowrap; }

.usage-leads { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.usage-leads li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--staff-line);
    border-radius: 12px;
}
.usage-leads li strong { display: block; font-size: 0.88rem; }
.usage-leads li div > span { color: var(--staff-muted); font-size: 0.78rem; }
.usage-leads__meta { display: flex; align-items: center; gap: 10px; }
.usage-leads__meta time { color: var(--staff-muted); font-size: 0.76rem; }
.usage-lead-status {
    padding: 2px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: capitalize;
}
.usage-lead-status.is-won { background: #ecfdf3; color: #027a48; }
.usage-lead-status.is-proposal,
.usage-lead-status.is-interested { background: #fffaeb; color: #b54708; }
.usage-lead-status.is-contacted { background: #eff8ff; color: #175cd3; }
.usage-lead-status.is-lost,
.usage-lead-status.is-not_interested { background: #fef3f2; color: #b42318; }

/* Mobile / very narrow console: the fixed grid would crush the columns, so the
   table falls back to natural widths and scrolls sideways (accepted there). */
@media (max-width: 900px) {
    /* Stack the header controls: a side-by-side search and Export button cannot
       both fit a phone width without one of them overflowing. */
    .usage-dash__head { display: block; }
    .usage-dash__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 14px;
    }
    /* The field fills the line here, so its Search and Clear buttons sit under it
       rather than fighting it for room. */
    .usage-search {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }
    .usage-search__label { width: 100%; min-width: 0; }
    .usage-search .btn { width: 100%; }
    .usage-export { align-self: flex-start; }
}

/* Natural-width (scrolling) mode needs the roomier paddings and unwrapped
   headers, since the table is no longer being squeezed into the container. */
@container (max-width: 999px) {
    .usage-table th,
    .usage-table td { padding: 12px 12px; }
    /* The Customers grid keeps its compact rows: it decides its own layout from
       900px up, so the roomier scrolling-mode padding would only add height. */
    .cust-table th,
    .cust-table td { padding: 8px 6px; }
    .usage-table thead th > .usage-th { white-space: nowrap; font-size: 0.72rem; }
    .usage-plan { padding: 4px 10px; font-size: 0.76rem; }
    .usage-code { font-size: 0.85rem; }
}

/* In-app promotion studio */
.promo-studio { display: grid; gap: 20px; min-width: 0; }
.promo-editor {
    display: grid;
    gap: 20px;
    max-width: 56rem;
    min-width: 0;
}
.promo-campaign-hero {
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
    border: 1px solid var(--staff-line);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(22, 22, 31, 0.05);
}
.promo-campaign-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--staff-line);
}
.promo-campaign-actions form { margin: 0; display: inline-flex; }
.promo-studio h1 {
    margin: 0 0 6px;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.promo-studio h2 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.promo-head p { margin: 0; max-width: 68ch; color: var(--staff-muted); }
.promo-head--editor { align-items: flex-start; }
.promo-head__copy { flex: 1 1 auto; min-width: 0; }
.promo-head__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.promo-head__title-row h1 { margin: 0; }
.promo-head__meta {
    margin: 6px 0 0;
    font-size: 0.84rem;
    color: var(--staff-muted);
    font-weight: 600;
}
.promo-head__meta a { color: #4c3bd4; font-weight: 700; text-decoration: none; }
.promo-head__meta a:hover { text-decoration: underline; }
.promo-head__actions--split { flex-wrap: wrap; justify-content: flex-end; }
.promo-head .editor-kicker { margin-bottom: 4px; }
.promo-head .editor-kicker a { color: inherit; text-decoration: none; }
.promo-head .editor-kicker a:hover { color: #4c3bd4; }
.promo-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--staff-line);
    background: #fff;
    color: var(--staff-ink);
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(22, 22, 31, 0.04);
}
.promo-back-link:hover {
    border-color: #c8c4e8;
    color: #4c3bd4;
    background: #faf9ff;
}
.promo-head--inner .promo-head__copy { flex: 1 1 auto; min-width: 0; }
.promo-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.promo-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.promo-summary article,
.promo-panel,
.promo-kpis article {
    background: #fff;
    border: 1px solid var(--staff-line);
    border-radius: 18px;
}
.promo-summary article { padding: 14px 16px; }
.promo-summary strong,
.promo-kpis strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.promo-summary span,
.promo-kpis span {
    color: var(--staff-muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.promo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.promo-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.promo-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--staff-line);
    background: #fff;
    color: var(--staff-muted);
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.promo-filter em { font-style: normal; font-weight: 800; color: var(--staff-ink); }
.promo-filter.is-filter-on.is-active {
    background: #16161f;
    border-color: #16161f;
    color: #fff;
}
.promo-filter.is-filter-on.is-active em { color: #fff; }
.promo-search input {
    width: min(280px, 100%);
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--staff-line);
    border-radius: 999px;
    background: #fff;
}
.promo-list { display: grid; gap: 12px; }
.promo-head--library { align-items: flex-end; }
.promo-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(120deg, #5b4cff 0%, #7c6cff 45%, #9b8cff 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(76, 59, 212, 0.22);
}
.promo-callout__copy strong { display: block; font-size: 1.02rem; letter-spacing: -0.02em; }
.promo-callout__copy p { margin: 6px 0 0; max-width: 62ch; font-size: 0.86rem; font-weight: 600; opacity: 0.92; }
.promo-callout__btn {
    background: #e8ff5a;
    border-color: #e8ff5a;
    color: #1a1630;
    font-weight: 800;
}
.promo-callout__btn:hover { background: #f0ff7a; border-color: #f0ff7a; color: #1a1630; }
.promo-library {
    display: grid;
    gap: 20px;
    min-width: 0;
}
.promo-toolbar--library {
    align-items: flex-start;
    margin: 0;
    padding-bottom: 4px;
}
.promo-toolbar__groups { display: grid; gap: 8px; flex: 1 1 auto; min-width: 0; }
.promo-filters--type .promo-filter--type:not(.is-active) { background: #f7f6ff; }
.promo-flashcard--filter-out,
.promo-flashcard.promo-flashcard--filter-out {
    display: none !important;
}
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 2px;
}
.promo-library [data-promo-none] {
    margin: 0;
}
.promo-flashcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--staff-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(22, 22, 31, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.promo-flashcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(22, 22, 31, 0.1);
}
.promo-flashcard__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 1;
    background: #0f0f14;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.promo-flashcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.promo-flashcard__placeholder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, #16161f 0%, #3d36a8 100%);
    color: #fff;
}
.promo-flashcard__placeholder.is-offer {
    background: linear-gradient(135deg, #1c163c 0%, var(--promo-accent, #7c6cff) 100%);
}
.promo-flashcard__placeholder.is-text {
    background: linear-gradient(135deg, #111827 0%, var(--promo-accent, #4c3bd4) 100%);
}
.promo-flashcard__placeholder.is-carousel {
    background: linear-gradient(135deg, #101828 0%, #5b4cff 55%, #9b8cff 100%);
}
.promo-flashcard__placeholder-type {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}
.promo-flashcard__placeholder p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.promo-flashcard__badge {
    position: absolute;
    top: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}
.promo-flashcard__badge--type {
    left: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1630;
}
.promo-flashcard__badge--status { right: 10px; }
.promo-flashcard__slides {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}
.promo-flashcard__body { padding: 14px 16px 10px; min-width: 0; }
.promo-flashcard__title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.promo-flashcard__title a { color: inherit; text-decoration: none; }
.promo-flashcard__title a:hover { color: #4c3bd4; }
.promo-flashcard__headline {
    margin: 0 0 6px;
    color: var(--staff-ink);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.promo-flashcard__meta { margin: 0; color: var(--staff-muted); font-size: 0.76rem; font-weight: 600; line-height: 1.45; }
.promo-flashcard__sub { margin: 6px 0 0; color: var(--staff-muted); font-size: 0.78rem; line-height: 1.4; }
.promo-flashcard__metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--staff-line);
    color: var(--staff-muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.promo-flashcard__metrics span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.promo-flashcard__metrics svg { flex: none; opacity: 0.72; }
.promo-flashcard__ctr { margin-left: auto; color: var(--staff-ink); }
.promo-flashcard__ctr strong { color: #1c7c3f; }
.promo-flashcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
    margin-top: auto;
}
.promo-flashcard__actions form { margin: 0; display: inline-flex; }
.promo-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 14px;
    background: #fff;
    border: 1px solid var(--staff-line);
    border-radius: 18px;
}
.promo-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 32px;
}
.promo-card__main { flex: 1 1 260px; min-width: 0; }
.promo-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promo-card__title h2 { margin: 0; font-size: 1.02rem; }
.promo-card__meta { margin: 4px 0 0; color: var(--staff-muted); font-size: 0.8rem; }
.promo-card__stats {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 2px 28px;
    margin: 0;
    flex: 0 0 auto;
    align-self: center;
}
.promo-card__stats div { min-width: 0; }
.promo-card__stats dt,
.promo-card__stats dd { display: block; white-space: nowrap; }
.promo-card__stats dt { color: var(--staff-muted); font-size: 0.72rem; font-weight: 700; }
.promo-card__stats dd { margin: 2px 0 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.promo-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--staff-line);
    position: relative;
    z-index: 2;
}
.promo-card__actions form { margin: 0; display: inline-flex; flex: 0 0 auto; }
.promo-card__actions .btn,
.promo-card__actions a,
.promo-card__actions button {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    pointer-events: auto;
    cursor: pointer;
}
.promo-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef0f4;
    color: #4a4560;
    font-size: 0.72rem;
    font-weight: 800;
}
.promo-status.is-active { background: #e4f5ea; color: #1c7c3f; }
.promo-status.is-scheduled { background: #efeaff; color: #4c3bd4; }
.promo-status.is-paused { background: #fdf1dc; color: #9a6a12; }
.promo-status.is-ended { background: #fde8e8; color: #b42318; }
.promo-status.is-deleted { background: #f2f4f7; color: #475467; }
.promo-warn { margin: 8px 0 0; color: #9a6a12; font-size: 0.8rem; font-weight: 700; }
.promo-muted { margin: 6px 0 0; color: var(--staff-muted); font-size: 0.82rem; }
.promo-empty {
    padding: 28px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--staff-line);
    border-radius: 18px;
}
.promo-empty h2 { margin-bottom: 6px; }
.promo-empty p { margin: 0 0 14px; color: var(--staff-muted); }
.promo-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.promo-kpis article { padding: 14px 14px 12px; min-width: 0; }
.promo-kpis small { display: block; margin-top: 6px; color: var(--staff-muted); font-size: 0.72rem; line-height: 1.35; }
.promo-panel { padding: 16px 18px 18px; min-width: 0; }
.promo-panel--settings,
.promo-panel--slides {
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(22, 22, 31, 0.04);
}
.promo-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.promo-panel--settings .promo-panel__head,
.promo-panel--slides .promo-panel__head {
    margin: 0;
    padding: 20px 22px 0;
}
.promo-panel__lede {
    margin: 6px 0 0;
    color: var(--staff-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    max-width: 52ch;
}
.promo-panel__chip {
    flex: none;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f3f1f8;
    color: var(--staff-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.promo-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #fafafa;
    border-top: 1px solid var(--staff-line);
}
.promo-settings-body {
    display: grid;
    gap: 22px;
    padding: 18px 22px 22px;
}
.promo-settings-section {
    display: grid;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--staff-line);
}
.promo-settings-section:first-of-type { border-top: 0; padding-top: 0; }
.promo-field { display: grid; gap: 6px; min-width: 0; }
.promo-field .form-label { margin-bottom: 0; font-size: 0.78rem; letter-spacing: 0.01em; }
.promo-input,
.promo-file {
    min-height: 42px;
    border-radius: 12px;
    border-color: #e6e3ef;
}
.promo-input:focus,
.promo-file:focus {
    border-color: #8b7cf6;
    box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.14);
}
.promo-hint--tight { margin-top: -4px; }
.promo-panel__head span { color: var(--staff-muted); font-size: 0.78rem; font-weight: 700; }
.promo-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promo-bars { display: grid; gap: 14px; }
.promo-bar__top { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; }
.promo-bar i {
    display: block;
    height: 8px;
    margin: 6px 0 4px;
    border-radius: 999px;
    background: #efeaf6;
    position: relative;
    overflow: hidden;
}
.promo-bar i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #8b7cf6, #4c3bd4);
}
.promo-bar small { color: var(--staff-muted); font-size: 0.75rem; }
.promo-trend {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    overflow-x: auto;
}
.promo-trend__col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 36px;
    height: 100%;
}
.promo-trend__col i {
    width: 100%;
    max-width: 28px;
    height: var(--h, 0%);
    min-height: 0;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #8b7cf6, #4c3bd4);
}
.promo-trend__col span { color: var(--staff-muted); font-size: 0.68rem; white-space: nowrap; }
.promo-composer { display: grid; gap: 20px; }
.promo-composer--simple {
    gap: 20px;
    padding-bottom: 0;
    max-width: none;
}
.promo-settings__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(140px, 0.8fr);
    gap: 16px;
}
.promo-settings__block { margin-top: 18px; }
.promo-settings__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.promo-settings__tz {
    color: var(--staff-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.promo-hint {
    margin: 6px 0 0;
    color: var(--staff-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 600;
}
.promo-places--compact { gap: 6px; }
.promo-composer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 12px;
    align-items: start;
}
.promo-composer__main,
.promo-composer__side { display: grid; gap: 12px; min-width: 0; }
.promo-types,
.promo-places,
.promo-presets,
.promo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-type,
.promo-choice,
.promo-preset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--staff-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.promo-type:has(input:checked),
.promo-choice:has(input:checked) {
    border-color: #6d5efc;
    background: #f6f4ff;
    box-shadow: 0 0 0 1px rgba(109, 94, 252, 0.12);
}
.promo-type input,
.promo-choice input { margin: 0; }
.promo-preset {
    color: #4c3bd4;
    background: #f6f4ff;
    border-color: transparent;
}
.promo-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promo-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f6f4ff;
    color: #3d355c;
    font-size: 0.82rem;
}
.promo-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--staff-line);
}
.promo-slides-list { display: grid; gap: 16px; padding: 0 22px 22px; }
.promo-slide-card {
    border: 1px solid var(--staff-line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 22, 31, 0.04);
}
.promo-slide-card--new {
    padding-bottom: 0;
    border-style: dashed;
    background: linear-gradient(180deg, #fdfcff 0%, #fff 100%);
}
.promo-slide-card--new .promo-slide__fields--solo { padding: 0 18px 18px; }
.promo-slide__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f7fc;
    border-bottom: 1px solid var(--staff-line);
}
.promo-slide__head strong { font-size: 0.88rem; letter-spacing: -0.01em; }
.promo-slide__delete { margin: 0; display: inline-flex; }
.promo-slide__body {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 18px;
    padding: 16px 18px 18px;
}
.promo-slide__active { margin: 0; font-weight: 700; color: var(--staff-muted); }
.promo-actions form { margin: 0; display: inline-flex; }
.promo-actions .btn,
.promo-savebar .btn,
.promo-head__actions .btn,
.promo-head > .btn {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}
.promo-btn-danger {
    color: #b42318 !important;
    background: #fff !important;
    border: 1px solid #f3c4c0 !important;
}
.promo-btn-danger:hover { background: #fef3f2 !important; }
.promo-readonly { display: grid; gap: 8px; margin: 12px 0; }
.promo-readonly div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.promo-readonly dt { color: var(--staff-muted); font-size: 0.8rem; }
.promo-readonly dd { margin: 0; font-weight: 700; }
.promo-aside-note p { margin: 8px 0 0; color: var(--staff-muted); font-size: 0.84rem; }
.promo-readonly-creative { margin: 0 0 14px; }
.promo-readonly-creative p { margin: 4px 0 0; color: var(--staff-muted); }
.promo-ended-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 0 0 14px; }
.promo-ended-slides figure { margin: 0; }
.promo-ended-slides img { display: block; width: 100%; border-radius: 12px; background: #f3f1f7; }
.promo-ended-slides figcaption { margin-top: 4px; color: var(--staff-muted); font-size: 0.75rem; }
.promo-slide {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.promo-slide--new { grid-template-columns: 1fr; border-style: dashed; }
.promo-slide__preview {
    border-radius: 14px;
    overflow: hidden;
    background: #0f0f14;
    aspect-ratio: 1500 / 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 22, 31, 0.08);
}
.promo-slide__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.promo-slide__preview .promo-warn { margin: 16px; color: #fff; }
.promo-slide__fields { display: grid; gap: 12px; min-width: 0; }
.promo-slide__fields h3 { margin: 0 0 10px; font-size: 0.95rem; }
.promo-slide__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.promo-slide__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--staff-line);
}
.promo-slide-delete { margin: 6px 0 0; }
.promo-card[hidden],
.promo-flashcard[hidden],
.promo-panel[hidden],
.promo-empty[hidden] { display: none !important; }
.promo-table { margin: 0; }
@media (max-width: 1100px) {
    .promo-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .promo-composer__grid,
    .promo-split,
    .promo-slide { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .promo-head { align-items: stretch; flex-direction: column; }
    .promo-head__actions--split { justify-content: flex-start; width: 100%; }
    .promo-settings__pair { grid-template-columns: 1fr; }
    .promo-composer--simple { max-width: none; }
    .promo-campaign-hero { padding: 16px; }
    .promo-campaign-actions { width: 100%; justify-content: flex-start; }
    .promo-settings-body,
    .promo-slides-list { padding-left: 16px; padding-right: 16px; }
    .promo-panel--settings .promo-panel__head,
    .promo-panel--slides .promo-panel__head { padding-left: 16px; padding-right: 16px; }
    .promo-panel__footer { padding-left: 16px; padding-right: 16px; }
    .promo-summary,
    .promo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promo-schedule,
    .promo-readonly div,
    .promo-slide__row { grid-template-columns: 1fr; }
    .promo-card__stats {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
    .promo-card__actions { justify-content: flex-start; }
    .promo-grid { grid-template-columns: 1fr; }
    .promo-flashcard__ctr { margin-left: 0; width: 100%; }
    .promo-callout { align-items: flex-start; flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Font lock: the whole admin console renders in Manrope.

   staff.css loads after site.css and app.css on every console layout (the staff
   Control Center, Profile Admin and the Affiliate portal), so an !important rule
   here wins the cascade and no component can leak another family. The Manrope
   @font-face is declared in site.css; public/assets/css is the mirror the deploy
   package serves. Login / MFA pages are body.site, which site.css already pins
   to Manrope.
   --------------------------------------------------------------------------- */
body.app-console,
body.app-console *,
body.app-console *::before,
body.app-console *::after,
body.staff-console,
body.staff-console *,
body.staff-console *::before,
body.staff-console *::after {
    font-family: "Manrope", sans-serif !important;
}

/* Form controls do not always inherit the page font; pin them explicitly too. */
body.app-console button,
body.app-console input,
body.app-console select,
body.app-console textarea,
body.app-console optgroup,
body.app-console option,
body.app-console fieldset,
body.app-console legend {
    font-family: "Manrope", sans-serif !important;
}

/* Zyncky superadmin metrics dashboard */
.staff-zyncky-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    padding: 8px 4px;
    border: 1px solid var(--staff-line);
    border-radius: 12px;
    background: #fff;
    font-size: 0.82rem;
    line-height: 1.35;
}
.staff-zyncky-summary-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 4px 14px;
    border-right: 1px solid var(--staff-line);
}
.staff-zyncky-summary-item:last-child {
    border-right: 0;
}
.staff-zyncky-summary-label {
    color: var(--staff-muted);
    font-weight: 650;
    font-size: 0.78rem;
}
.staff-zyncky-summary-item strong {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--staff-ink);
    letter-spacing: -0.02em;
}
.staff-zyncky-summary-meta {
    color: var(--staff-muted);
    font-size: 0.74rem;
    font-weight: 600;
}
@media (max-width: 720px) {
    .staff-zyncky-summary-item {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: 1px solid var(--staff-line);
        padding: 8px 12px;
    }
    .staff-zyncky-summary-item:last-child {
        border-bottom: 0;
    }
}
.staff-zyncky-topics {
    padding: 10px 14px 12px;
    border: 1px solid var(--staff-line);
    border-radius: 12px;
    background: #fff;
}
.staff-zyncky-topics-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
}
.staff-zyncky-topics-meta {
    line-height: 1.35;
}
.staff-zyncky-topics-subhead {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--staff-ink);
}
.staff-zyncky-topic-groups {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--staff-line);
}
.staff-catalog-multiselect {
    max-width: 36rem;
}
.staff-catalog-picker {
    margin-bottom: 10px;
}
.staff-catalog-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 2rem;
    align-items: center;
}
.staff-catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--staff-line);
    background: #f5f3ff;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--staff-ink);
    line-height: 1.25;
}
.staff-catalog-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--staff-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.staff-catalog-chip-remove:hover {
    color: var(--staff-ink);
    background: rgba(17, 17, 17, 0.06);
}
.staff-zyncky-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.staff-zyncky-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--staff-line);
    background: #fafafa;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--staff-ink);
    line-height: 1.25;
}
.staff-zyncky-chip.is-high {
    border-color: #a7f3d0;
    background: #ecfdf5;
}
.staff-zyncky-chip.is-low {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.staff-zyncky-chip-icon {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}
.staff-zyncky-chip-icon.is-high {
    color: #059669;
}
.staff-zyncky-chip-icon.is-low {
    color: #64748b;
}
.staff-zyncky-chip-meta {
    font-weight: 600;
    color: var(--staff-muted);
    font-variant-numeric: tabular-nums;
}
.staff-zyncky-topics-ai {
    margin-top: 10px;
    line-height: 1.35;
}
.staff-zyncky-topics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.staff-zyncky-topics-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1.1fr) minmax(0, 2fr) auto auto;
    align-items: center;
    gap: 8px 10px;
    font-size: 0.8rem;
}
.staff-zyncky-topics-label {
    font-weight: 650;
    color: var(--staff-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staff-zyncky-topics-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--staff-line);
    overflow: hidden;
    min-width: 0;
}
.staff-zyncky-topics-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9b8cff, #6b46f5);
}
.staff-zyncky-topics-pct {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--staff-ink);
    min-width: 3.2em;
    text-align: right;
}
.staff-zyncky-topics-count {
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .staff-zyncky-topics-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .staff-zyncky-topics-label {
        grid-column: 1 / -1;
        white-space: normal;
    }
    .staff-zyncky-topics-bar {
        grid-column: 1;
    }
    .staff-zyncky-topics-pct {
        grid-column: 2;
    }
    .staff-zyncky-topics-count {
        grid-column: 2;
        justify-self: end;
    }
}
.staff-zyncky-table th,
.staff-zyncky-table td {
    vertical-align: middle;
}
.staff-zyncky-email {
    font-weight: 600;
}
.staff-zyncky-credits {
    display: inline-block;
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.staff-zyncky-credits-bar {
    display: block;
    margin-top: 4px;
    height: 4px;
    max-width: 88px;
    border-radius: 999px;
    background: var(--staff-line);
    overflow: hidden;
}
.staff-zyncky-credits-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6b4fd4, #9b7bff);
}
.staff-zyncky-stars {
    letter-spacing: 0.02em;
    color: #c9a227;
    white-space: nowrap;
}
.staff-zyncky-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: capitalize;
}
.staff-zyncky-status.is-open {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}
.staff-zyncky-status.is-waiting {
    background: rgba(237, 108, 2, 0.14);
    color: #e65100;
}
.staff-zyncky-status.is-closed {
    background: rgba(111, 107, 123, 0.14);
    color: var(--staff-muted);
}
body.staff-zyncky-modal-open {
    overflow: hidden;
}
.staff-zyncky-modal[hidden] {
    display: none !important;
}
.staff-zyncky-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.staff-zyncky-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 20, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.staff-zyncky-modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 80px rgba(20, 16, 40, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.staff-zyncky-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.staff-zyncky-modal-log {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: 48vh;
    overflow: auto;
    padding: 8px 4px;
    border-radius: 14px;
    background: rgba(243, 241, 247, 0.65);
}
.staff-zyncky-modal-reply textarea {
    resize: vertical;
}

/* Quick Connect logos — compact catalog table */
.staff-qc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.staff-qc-search {
    flex: 1 1 160px;
    max-width: 280px;
    margin: 0;
}
.staff-qc-filter {
    flex: 0 1 auto;
    margin: 0;
    min-width: 120px;
}
.staff-qc-add-btn {
    margin-left: auto;
}
.staff-qc-add-panel {
    margin-bottom: 12px;
    border: 1px solid var(--staff-line);
    border-radius: 12px;
    background: var(--staff-panel);
    padding: 10px 12px;
}
.staff-qc-add-panel:not([open]) {
    display: none;
}
.staff-qc-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.staff-qc-add-form .form-control-sm {
    flex: 1 1 120px;
    max-width: 200px;
}
.staff-qc-table-wrap {
    border: 1px solid var(--staff-line);
    border-radius: 12px;
    background: var(--staff-panel);
    overflow: hidden;
}
.staff-qc-table {
    margin: 0;
    font-size: 0.875rem;
}
.staff-qc-table th,
.staff-qc-table td {
    padding: 8px 10px;
    vertical-align: middle;
}
.staff-qc-table tbody tr {
    border-top: 1px solid var(--staff-line);
}
.staff-qc-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}
.staff-qc-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: #f3f1f7;
}
.staff-qc-thumb-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #6b46f5;
}
.staff-qc-channel-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
    min-width: 0;
}
.staff-qc-channel-text strong {
    font-size: 0.875rem;
    font-weight: 700;
}
.staff-qc-channel-text small {
    font-size: 0.72rem;
    color: var(--staff-muted);
}
.staff-qc-slug {
    font-size: 0.78rem;
    padding: 2px 6px;
    background: #f3f1f7;
    border-radius: 4px;
}
.staff-qc-logo-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}
.staff-qc-logo-preview {
    width: 32px;
    height: 32px;
}
.staff-qc-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.staff-qc-pill.is-ok {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}
.staff-qc-pill.is-warn {
    background: rgba(237, 108, 2, 0.12);
    color: #e65100;
}
.staff-qc-col-actions {
    width: 42%;
    min-width: 280px;
}
.staff-qc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.staff-qc-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.staff-qc-inline .form-control-sm {
    width: 108px;
    min-width: 0;
    padding: 4px 8px;
}
.staff-qc-file.form-control-sm {
    width: 132px;
    padding: 2px 4px;
    font-size: 0.72rem;
}
.staff-qc-meta,
.staff-qc-empty,
.staff-qc-empty-static {
    padding: 8px 12px;
    margin: 0;
    border-top: 1px solid var(--staff-line);
}
@media (max-width: 900px) {
    .staff-qc-col-actions {
        min-width: 0;
    }
    .staff-qc-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .staff-qc-inline {
        flex-wrap: wrap;
    }
    .staff-qc-inline .form-control-sm,
    .staff-qc-file.form-control-sm {
        width: 100%;
        max-width: 200px;
    }
}

/* Super Admin — sidebar search only (nav uses shared staff-console .console-nav rules) */
body.staff-console-super .staff-side-search {
    padding: 0 10px 14px;
    position: relative;
}

body.staff-console-super .staff-side-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--staff-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
}

body.staff-console-super .staff-side-search-field:focus-within {
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 22, 31, 0.08);
}

body.staff-console-super .staff-side-search-ico {
    display: inline-flex;
    color: var(--staff-muted);
    flex: none;
}

body.staff-console-super .staff-side-search-ico svg {
    width: 18px;
    height: 18px;
}

body.staff-console-super .staff-side-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 0;
    outline: none;
    color: var(--staff-ink);
}

body.staff-console-super .staff-side-search-field input::placeholder {
    color: var(--staff-muted);
    font-weight: 600;
}

body.staff-console-super .staff-side-search-results {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% - 4px);
    z-index: 30;
    max-height: min(60vh, 420px);
    overflow: auto;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(22, 22, 31, 0.12);
}

body.staff-console-super .staff-main.staff-main-surface {
    background: var(--staff-panel);
    min-width: 0;
}

body.staff-console-super #staff-main-pane.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* cards, tables, settings tabs: inherit global staff-console styles */

/* Super Admin — page rhythm, grids, catalog rows, integration density */
body.staff-console-super .staff-main > .editor-kicker {
    margin-bottom: 4px;
}

body.staff-console-super .staff-main > .h4,
body.staff-console-super .staff-main > h1.h4 {
    margin-bottom: 8px;
}

body.staff-console-super .staff-main > .text-secondary {
    max-width: 72ch;
    margin-bottom: 16px;
    line-height: 1.55;
}

body.staff-console-super .staff-main > .text-secondary.small {
    max-width: none;
}

body.staff-console-super .staff-cc-status {
    overflow: hidden;
}

body.staff-console-super .staff-cc-status .staff-status-banner {
    min-width: 0;
    overflow: hidden;
}

body.staff-console-super .staff-status-banner a {
    display: inline-block;
    margin-top: 4px;
    color: var(--accent-deep, #5b4de6);
    font-weight: 700;
    text-decoration: none;
}

body.staff-console-super .staff-status-banner a:hover {
    text-decoration: underline;
}

body.staff-console-super .staff-stats.staff-kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
    margin: 0 0 20px;
    align-items: stretch;
}

body.staff-console-super .staff-stats.staff-kpi-grid article {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 108px;
}

body.staff-console-super .staff-kpi-hint {
    margin-top: auto;
    padding-top: 8px;
}

body.staff-console-super .staff-main > .h6 {
    margin: 4px 0 10px;
    font-weight: 800;
}

body.staff-console-super .staff-attention {
    gap: 6px;
    margin-bottom: 16px;
}

body.staff-console-super .staff-attention li {
    padding: 12px 16px;
    border: 1px solid rgba(181, 71, 8, 0.15);
}

body.staff-console-super .staff-range {
    margin-bottom: 14px;
}

body.staff-console-super .staff-metrics-grid {
    gap: 12px;
    margin-top: 4px;
}

body.staff-console-super .staff-mini-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
}

@media (max-width: 720px) {
    body.staff-console-super .staff-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.staff-console-super .card.profile-body.settings-item {
    padding: 18px 20px 20px;
    margin-bottom: 12px !important;
}

body.staff-console-super .settings-item-head {
    margin-bottom: 8px;
}

body.staff-console-super .settings-item-desc {
    max-width: 72ch;
    margin-bottom: 12px;
}

body.staff-console-super .settings-item-controls {
    gap: 10px 14px;
}

body.staff-console-super .settings-nav {
    margin-bottom: 14px;
    gap: 6px;
}

body.staff-console-super .membership-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    align-items: center;
    gap: 12px 20px;
    padding: 12px 16px;
    border-radius: var(--staff-radius);
}

body.staff-console-super .membership-pick-main {
    width: auto;
    flex: none;
    min-width: 0;
}

body.staff-console-super .membership-pick-label {
    grid-template-columns: 48px minmax(0, 1fr);
}

body.staff-console-super .membership-pick-upload {
    flex: none;
    width: 100%;
    min-width: 0;
    justify-self: end;
}

@media (max-width: 720px) {
    body.staff-console-super .membership-pick {
        grid-template-columns: 1fr;
    }

    body.staff-console-super .membership-pick-upload {
        justify-self: stretch;
    }
}

body.staff-console-super .staff-qc-toolbar {
    margin-bottom: 12px;
    gap: 10px;
}

body.staff-console-super .staff-qc-table-wrap {
    border-radius: var(--staff-radius);
}

body.staff-console-super .staff-qc-col-actions {
    width: 48%;
    min-width: 320px;
}

body.staff-console-super .staff-qc-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.staff-console-super .staff-qc-inline {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: auto;
}

body.staff-console-super .staff-qc-inline .form-control-sm {
    width: 108px;
    flex: 0 1 auto;
    min-width: 88px;
    max-width: 160px;
}

body.staff-console-super .staff-qc-replace-form .form-control-sm {
    width: 132px;
}

body.staff-console-super .staff-qc-file.form-control-sm {
    width: 132px;
    flex: 0 1 auto;
    max-width: 180px;
    font-size: 0.72rem;
}

body.staff-console-super .staff-qc-table .btn-primary {
    box-shadow: none;
}

body.staff-console-super .staff-qc-table .btn {
    min-height: 32px;
    padding: 6px 12px;
}

/* Mobile: never keep desktop sidebar column — full-width main like admin staff */
@media (max-width: 980px) {
    body.staff-console-super .staff-frame {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding: 0;
    }

    body.staff-console-super .staff-side {
        width: min(300px, 82vw);
        max-width: none;
        padding: calc(14px + env(safe-area-inset-top)) 12px 0;
    }

    body.staff-console-super .staff-main.staff-main-surface {
        width: 100%;
        max-width: none;
        border-radius: 0;
    }

    body.staff-console-super .staff-main > .text-secondary {
        max-width: none;
    }

    body.staff-console-super .staff-stats.staff-kpi-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    body.staff-console-super .staff-cc-status {
        grid-template-columns: 1fr;
    }

    body.staff-console-super .staff-metrics-grid {
        grid-template-columns: 1fr;
    }

    body.staff-console-super .staff-range {
        gap: 6px;
    }

    body.staff-console-super .staff-range-pill {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        text-align: center;
    }
}

.live-metrics-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

.live-metrics-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    animation: live-metrics-pulse 1.6s ease-out infinite;
}

@keyframes live-metrics-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.live-metric-bump {
    color: var(--accent, #6b46f5);
    transition: color 0.35s ease;
}

.profile-owner-live-metrics {
    position: fixed;
    z-index: 45;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 28rem;
    margin: 0 auto;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    background: rgba(17, 17, 24, 0.92);
    color: #f4f4f5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

/* Super Admin sign-in (password + MFA) — dark void only; Admin staff login stays light. */
html.staff-superadmin-login-html {
    color-scheme: dark;
}

body.staff-superadmin-login {
    margin: 0;
    min-height: 100dvh;
    font-family: "Manrope", sans-serif;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    background-color: #0b0b14 !important;
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(103, 76, 210, 0.28), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(48, 36, 92, 0.45), transparent 50%) !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
}

body.staff-superadmin-login * {
    box-sizing: border-box;
}

body.staff-superadmin-login .staff-login-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    box-sizing: border-box;
}

body.staff-superadmin-login .staff-login-card {
    width: 100%;
    max-width: 420px;
    padding: 28px 32px;
    border-radius: 28px;
    background: rgba(20, 20, 34, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
}

body.staff-superadmin-login .text-secondary {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

body.staff-superadmin-login a {
    color: #b4a6ff;
    text-decoration: none;
    font-weight: 600;
}

body.staff-superadmin-login a:hover {
    color: #d8ccff;
}

body.staff-superadmin-login .auth-links {
    margin: 14px 0 0;
}

body.staff-superadmin-login .form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 6px;
}

body.staff-superadmin-login .form-control {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    margin: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
}

body.staff-superadmin-login .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

body.staff-superadmin-login .form-control:focus {
    outline: none;
    border-color: rgba(168, 156, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.22);
}

body.staff-superadmin-login .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

body.staff-superadmin-login .btn-primary {
    background: #7c6cff;
    color: #fff;
    box-shadow: 0 10px 28px rgba(124, 108, 255, 0.35);
}

body.staff-superadmin-login .btn-primary:hover {
    background: #6a5af8;
}

body.staff-superadmin-login .btn-primary:disabled,
body.staff-superadmin-login .form .js-auth-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.staff-superadmin-login .alert {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 0.9rem;
}

body.staff-superadmin-login .alert-danger {
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

body.staff-superadmin-login .d-flex { display: flex; }
body.staff-superadmin-login .align-items-center { align-items: center; }
body.staff-superadmin-login .gap-2 { gap: 8px; }
body.staff-superadmin-login .mb-2 { margin-bottom: 8px; }
body.staff-superadmin-login .mb-3 { margin-bottom: 16px; }
body.staff-superadmin-login .mt-2 { margin-top: 8px; }
body.staff-superadmin-login .mt-3 { margin-top: 16px; }
body.staff-superadmin-login .mb-0 { margin-bottom: 0; }
body.staff-superadmin-login .small { font-size: 0.82rem; }

body.staff-superadmin-login .password-field {
    position: relative;
    margin-bottom: 14px;
}

body.staff-superadmin-login .password-field input {
    margin-bottom: 0;
    padding-right: 52px;
}

body.staff-superadmin-login .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    padding: 0;
}

body.staff-superadmin-login .password-toggle:hover,
body.staff-superadmin-login .password-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

body.staff-superadmin-login .auth-human-check label,
body.staff-superadmin-login .auth-captcha-note {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
}

/* Console appearance toggle (Profile Admin + Super Admin) */
.console-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
}

.console-theme-toggle-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

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

html[data-console-theme="dark"] .console-theme-toggle-icon--light,
html[data-console-theme="light"] .console-theme-toggle-icon--dark,
html:not([data-console-theme]) .console-theme-toggle-icon--light {
    display: none;
}

html[data-console-theme="light"] .console-theme-toggle-icon--light {
    display: inline-flex;
}

html[data-console-theme="dark"] .console-theme-toggle-icon--dark {
    display: inline-flex;
}

.console-theme-toggle-label {
    font-size: 0.84rem;
    font-weight: 650;
}