/* Demo Pay: shared visual system for every operations panel. */
html[data-demo-pay-theme] {
    --dp-accent: #345bee;
    --dp-accent-hover: #2448d5;
    --dp-accent-soft: #edf2ff;
    --dp-success: #0b8c69;
    --dp-success-soft: #e8f8f2;
    --dp-warning: #ab6309;
    --dp-warning-soft: #fff5e5;
    --dp-danger: #d13f53;
    --dp-danger-soft: #ffedf0;
    --dp-info: #087eaa;
    --dp-radius: 14px;
    --dp-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dp-shadow: 0 4px 20px rgb(25 52 101 / 3%);
    --dp-sidebar-width: 250px;
}
html[data-demo-pay-theme="light"] {
    --dp-bg: #f4f7fc;
    --dp-surface: #fff;
    --dp-surface-soft: #f8faff;
    --dp-surface-raised: #fff;
    --dp-text: #16243e;
    --dp-muted: #64748b;
    --dp-border: #e4eaf4;
    --dp-hover: #f0f4fb;
    --dp-overlay: rgb(16 28 54 / 35%);
    --dp-input: #fff;
    color-scheme: light;
}
html[data-demo-pay-theme="dark"] {
    --dp-bg: #0c1426;
    --dp-surface: #121e34;
    --dp-surface-soft: #17243c;
    --dp-surface-raised: #1b2a44;
    --dp-text: #e9effb;
    --dp-muted: #9aabc8;
    --dp-border: #263752;
    --dp-hover: #1c2d4a;
    --dp-overlay: rgb(3 8 20 / 70%);
    --dp-input: #142139;
    --dp-accent: #819dff;
    --dp-accent-hover: #9bb1ff;
    --dp-accent-soft: #21335a;
    --dp-success: #67dabb;
    --dp-success-soft: #14382f;
    --dp-warning: #f2c47b;
    --dp-warning-soft: #3b3022;
    --dp-danger: #ff9aaa;
    --dp-danger-soft: #3c2535;
    --dp-info: #75d4f5;
    --dp-shadow: 0 5px 24px rgb(0 0 0 / 8%);
    color-scheme: dark;
}
/* Adapt existing panel tokens so feature views inherit the same palette. */
html[data-demo-pay-theme] {
    --panel-dark: var(--dp-bg) !important;
    --panel-soft: var(--dp-surface) !important;
    --panel-card: var(--dp-surface) !important;
    --panel-border: var(--dp-border) !important;
    --panel-green: var(--dp-accent) !important;
    --panel-green-dark: var(--dp-accent-hover) !important;
    --panel-text: var(--dp-text) !important;
    --panel-muted: var(--dp-muted) !important;
    --theme-bg: var(--dp-bg) !important;
    --theme-bg-start: var(--dp-bg) !important;
    --theme-bg-end: var(--dp-bg) !important;
    --theme-sidebar: var(--dp-surface) !important;
    --theme-card: var(--dp-surface) !important;
    --theme-border: var(--dp-border) !important;
    --theme-text: var(--dp-text) !important;
    --theme-muted: var(--dp-muted) !important;
    --theme-accent: var(--dp-accent) !important;
    --theme-primary: var(--dp-accent) !important;
    --theme-input: var(--dp-input) !important;
    --bg: var(--dp-bg) !important;
    --surface: var(--dp-surface) !important;
    --text: var(--dp-text) !important;
    --muted: var(--dp-muted) !important;
    --border: var(--dp-border) !important;
    --accent: var(--dp-accent) !important;
    --bg-base: var(--dp-bg) !important;
    --bg-card: var(--dp-surface) !important;
    --text-primary: var(--dp-text) !important;
    --text-secondary: var(--dp-muted) !important;
    --text-muted: var(--dp-muted) !important;
    --accent-primary: var(--dp-accent) !important;
    --accent-secondary: var(--dp-info) !important;
    --accent-glow: color-mix(in srgb,var(--dp-accent) 12%,transparent) !important;
    --border-subtle: var(--dp-border) !important;
    --success: var(--dp-success) !important;
}
html[data-demo-pay-theme], html[data-demo-pay-theme] body {
    font-family: var(--dp-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html[data-demo-pay-theme] body.dp-shell,
html[data-demo-pay-theme] body.dp-document {
    background: var(--dp-bg) !important;
    color: var(--dp-text) !important;
    font-size: 14px;
    line-height: 1.55;
}
body.dp-shell::before, body.dp-shell .panel-bg::before { display: none !important; }
html[data-demo-pay-theme] :is(.dp-workspace,.panel-bg,.boss-shell,.boss-page,.panel-shell,.employee-layout,.dp-content) {
    background: var(--dp-bg) !important;
    color: var(--dp-text) !important;
    background-image: none !important;
}
html[data-demo-pay-theme] .dp-content { min-width: 0; }
html[data-demo-pay-theme] .dp-workspace {
    --panel-text: var(--dp-text) !important;
    --panel-strong: var(--dp-text) !important;
    --panel-muted: var(--dp-muted) !important;
    --panel-soft: var(--dp-surface-soft) !important;
    --panel-border: var(--dp-border) !important;
    --panel-border-strong: var(--dp-border) !important;
    --panel-accent: var(--dp-accent) !important;
    --panel-accent-2: var(--dp-info) !important;
    --panel-card-bg: var(--dp-surface) !important;
    --panel-sidebar-bg: var(--dp-surface) !important;
    --panel-topbar-bg: var(--dp-surface) !important;
    --panel-input-bg: var(--dp-input) !important;
    --panel-input-border: var(--dp-border) !important;
    --panel-table-head: var(--dp-surface-soft) !important;
    --panel-row-border: var(--dp-border) !important;
    --panel-row-hover: var(--dp-hover) !important;
    --panel-shadow: var(--dp-shadow) !important;
    --panel-btn-bg: var(--dp-surface-soft) !important;
    --staff-bg: var(--dp-bg) !important;
    --staff-panel: var(--dp-surface) !important;
    --staff-panel-2: var(--dp-surface-soft) !important;
    --staff-border: var(--dp-border) !important;
    --staff-text: var(--dp-text) !important;
    --staff-muted: var(--dp-muted) !important;
    --staff-accent: var(--dp-accent) !important;
    --staff-accent-2: var(--dp-info) !important;
    --affboss-bg: var(--dp-bg) !important;
    --affboss-ink: var(--dp-text) !important;
    --affboss-muted: var(--dp-muted) !important;
    --affboss-panel: var(--dp-surface) !important;
    --affboss-panel-strong: var(--dp-surface-raised) !important;
    --affboss-border: var(--dp-border) !important;
    --affboss-pink: var(--dp-accent) !important;
    --affboss-violet: var(--dp-accent) !important;
    --affboss-cyan: var(--dp-info) !important;
    --affboss-mint: var(--dp-success) !important;
    --affboss-gold: var(--dp-warning) !important;
    --dj-bg: var(--dp-bg) !important;
    --dj-sidebar: var(--dp-surface) !important;
    --dj-surface: var(--dp-surface) !important;
    --dj-surface-soft: var(--dp-surface-soft) !important;
    --dj-sidebar-soft: var(--dp-surface-soft) !important;
    --dj-card: var(--dp-surface) !important;
    --dj-text: var(--dp-text) !important;
    --dj-muted: var(--dp-muted) !important;
    --dj-muted-soft: var(--dp-muted) !important;
    --dj-border: var(--dp-border) !important;
    --dj-border-strong: var(--dp-border) !important;
    --dj-accent: var(--dp-accent) !important;
    --dj-accent-alt: var(--dp-info) !important;
    --dj-green: var(--dp-success) !important;
    --dj-green-strong: var(--dp-success) !important;
    --dj-green-soft: var(--dp-success-soft) !important;
    --dj-amber: var(--dp-warning) !important;
    --dj-amber-soft: var(--dp-warning-soft) !important;
    --dj-red: var(--dp-danger) !important;
    --dj-red-soft: var(--dp-danger-soft) !important;
    --dj-shadow: var(--dp-shadow) !important;
}
html[data-demo-pay-theme] .dp-shell .dj-main { background: var(--dp-bg) !important; background-image: none !important; }
html[data-demo-pay-theme] :is(.dp-workspace,.fr-shell,.aff-shell,.dj-shell,.staff-shell,.panel-shell)::before { display: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar {
    background: var(--dp-surface) !important;
    background-image: none !important;
    color: var(--dp-text) !important;
    border-right: 1px solid var(--dp-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.sidebar-logo-area,.sidebar-header) {
    background: transparent !important;
    border-bottom: 1px solid var(--dp-border) !important;
    min-height: 84px;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.sidebar-logo-frame,.logo-panel) {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.dp-brand { display: inline-flex; align-items: center; min-width: 0; gap: 10px; }
html[data-demo-pay-theme] .dp-brand-logo { display: block; width: 184px !important; height: 43px !important; object-fit: contain; max-width: 100%; }
.dp-brand-mark { display: none; width: 40px; height: 40px; }
.dp-brand-row { min-height: 84px; display: flex; align-items: center; border-bottom: 1px solid var(--dp-border); }
.dp-panel-role { display: block; font-size: 10px; color: var(--dp-muted); margin-top: 6px; letter-spacing: .6px; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar .panel-brand { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 22px 0 !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.affboss-nav,.aff-nav-item,.aff-site-menu,.fr-nav-item,.dj-nav-link,.staff-nav) {
    color: var(--dp-muted) !important; border: 1px solid transparent !important;
    background: transparent !important; border-radius: 9px !important; box-shadow: none !important;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.affboss-nav,.aff-nav-item,.aff-site-menu,.fr-nav-item,.dj-nav-link,.staff-nav):hover { background: var(--dp-hover) !important; color: var(--dp-text) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.affboss-nav,.aff-nav-item,.aff-site-menu,.fr-nav-item,.dj-nav-link,.staff-nav):is(.active,.is-active,[aria-current="page"]) { background: var(--dp-accent-soft) !important; color: var(--dp-accent) !important; border-color: transparent !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.affboss-nav,.aff-nav-item,.aff-site-menu,.fr-nav-item,.dj-nav-link,.staff-nav) * { color: inherit !important; }
/* Some legacy panels style child labels directly rather than their nav link. */
html[data-demo-pay-theme] body.dp-shell .dp-sidebar nav :is(a,button,summary) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar nav :is(a,button,summary) :is(span,small,strong) { color: inherit !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav,.aff-menu) { color: var(--dp-muted) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 9px !important; box-shadow: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav,.aff-menu):hover { background: var(--dp-hover) !important; color: var(--dp-text) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav,.aff-menu).active { background: var(--dp-accent-soft) !important; color: var(--dp-accent) !important; border-color: transparent !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav,.aff-menu).active::before { background: var(--dp-accent) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav-icon,.aff-icon) { color: inherit !important; border-color: var(--dp-border) !important; background: var(--dp-surface-soft) !important; box-shadow: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav-group-title,.aff-menu-title,.aff-side-marquee,.aff-side-marquee-track,.panel-side-action,.panel-refresh-control,.panel-refresh-current,.dj-sidebar-footer,.dj-user-role) { color: var(--dp-muted) !important; background: transparent !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav-group-title,.aff-menu-title,.aff-side-marquee-track,.panel-side-action,.panel-refresh-control,.dj-user-card) :is(span,small) { color: inherit !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.boss-nav-group-title,.aff-menu-title) { font-size: 10px !important; letter-spacing: .8px !important; font-weight: 600 !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.affboss-btn-soft,.aff-pocket,.dj-user-card) { color: var(--dp-text) !important; background: var(--dp-surface-soft) !important; border-color: var(--dp-border) !important; box-shadow: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar .dj-user-card small { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] body.dp-shell .dj-operator { background: var(--dp-surface-soft) !important; border-color: var(--dp-border) !important; box-shadow: none !important; }
html[data-demo-pay-theme] body.dp-shell .dj-operator-copy strong { color: var(--dp-text) !important; }
html[data-demo-pay-theme] body.dp-shell .dj-operator-copy small { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.sidebar-label,.menu-text,.nav-link-text,.side-label) { font-size: 13px; font-weight: 550; letter-spacing: -.1px; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.menu-title,.nav-section-title,.sidebar-section-title,.boss-menu-title,.panel-nav-title) {
    color: var(--dp-muted) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 1.1px !important;
    margin-top: 20px;
    margin-bottom: 8px;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.menu-btn,.menu-item,.menu-link,.nav-link,.panel-nav,.boss-nav-link,.sidebar-link,.employee-nav-link,.sub-menu-item,.submenu-link,.nav-item) {
    color: var(--dp-muted) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 9px !important;
    transition: background .16s ease, color .16s ease;
    min-height: 42px;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.menu-btn,.menu-item,.menu-link,.nav-link,.panel-nav,.boss-nav-link,.sidebar-link,.employee-nav-link,.sub-menu-item,.submenu-link,.nav-item):hover {
    background: var(--dp-hover) !important;
    color: var(--dp-text) !important;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.menu-btn,.menu-item,.menu-link,.nav-link,.panel-nav,.boss-nav-link,.sidebar-link,.employee-nav-link,.sub-menu-item,.submenu-link,.nav-item):is(.active,[aria-current="page"]) {
    color: var(--dp-accent) !important;
    background: var(--dp-accent-soft) !important;
    border-color: transparent !important;
    font-weight: 650;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar .active::before { background: var(--dp-accent) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-sidebar :is(.support-menu-section,.boss-panel,.sidebar-section) {
    background: transparent !important;
    border-color: var(--dp-border) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
html[data-demo-pay-theme] body.dp-shell .dp-sidebar .support-menu-section { border-color: transparent !important; }
html[data-demo-pay-theme] .dp-shell .dp-preview-status { color: var(--dp-success) !important; background: var(--dp-success-soft) !important; }
html[data-demo-pay-theme] .dp-shell .dp-preview-status.is-review { color: var(--dp-warning) !important; background: var(--dp-warning-soft) !important; }
html[data-demo-pay-theme] .dp-shell .dp-preview-status.is-waiting { color: var(--dp-accent) !important; background: var(--dp-accent-soft) !important; }
html.dp-theme-changing *,html.dp-theme-changing *::before,html.dp-theme-changing *::after { transition: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar {
    background: var(--dp-surface) !important;
    color: var(--dp-text) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--dp-border) !important;
    box-shadow: none !important;
    min-height: 72px;
    gap: 12px;
    padding-left: 26px;
    padding-right: 26px;
    backdrop-filter: none !important;
}
html[data-demo-pay-theme] body.dp-shell .dp-topbar::before,
html[data-demo-pay-theme] body.dp-shell .dp-topbar::after,
html[data-demo-pay-theme] body.dp-shell .dp-topbar .header-center-brand { display: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is(.ibanci-brand-center,.employee-brand-center) { display: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is(span:not(.iconify),p,small,a,button,div):not([data-dp-theme]):not(.dp-theme-switch) { color: var(--dp-text) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is([class*="text-cyan-"],[class*="text-sky-"],[class*="text-pink-"],[class*="text-blue-"],[class*="text-emerald-"],[class*="text-white/"]) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is(.boss-profile-button,.affboss-btn-soft,.aff-refresh-pill,.aff-user-pill,.employee-header-btn,.ibanci-header-btn) { background: var(--dp-surface-soft) !important; color: var(--dp-text) !important; border-color: var(--dp-border) !important; box-shadow: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar .dj-refresh-status { background: var(--dp-success-soft) !important; color: var(--dp-success) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is(.header-pill,.topbar-pill,.user-button,.header-button) { background: var(--dp-surface-soft) !important; color: var(--dp-text) !important; border: 1px solid var(--dp-border) !important; border-radius: 8px !important; box-shadow: none !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is(.header-pill,.topbar-pill,.user-button,.header-button) > span:not(.iconify) { color: var(--dp-text) !important; }
html[data-demo-pay-theme] :is(.dp-topbar,.dp-sidebar) :is(h1,h2,h3,strong) { color: var(--dp-text) !important; }
html[data-demo-pay-theme] body.dp-shell .dp-topbar :is(.page-title,.header-title) { font-size: 16px !important; font-weight: 600; }
.dp-theme-switch {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    width: max-content;
    background: var(--dp-surface-soft) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 24px !important;
}
.dp-theme-switch button {
    appearance: none;
    display: grid !important;
    place-items: center;
    width: 37px !important;
    height: 33px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--dp-muted) !important;
    cursor: pointer;
    box-shadow: none !important;
}
.dp-theme-switch button[aria-pressed="true"] {
    color: var(--dp-accent) !important;
    background: var(--dp-surface-raised) !important;
    box-shadow: 0 1px 5px rgb(22 36 62 / 9%) !important;
}
.dp-theme-switch button:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 2px; }
.dp-topbar > .dp-theme-switch { margin-left: auto; }
.dp-theme-slot { display: inline-flex; align-items: center; flex-shrink: 0; position: relative; z-index: 20; }
html[data-demo-pay-theme] .dp-workspace:is([data-dp-panel="boss"],[data-dp-panel="affboss"],[data-dp-panel="ibantether"],[data-dp-panel="staff-panel"]) .dp-topbar { position: relative; padding-right: 124px; }
html[data-demo-pay-theme] .dp-workspace:is([data-dp-panel="boss"],[data-dp-panel="affboss"],[data-dp-panel="ibantether"],[data-dp-panel="staff-panel"]) .dp-topbar > .dp-theme-slot { position: absolute; right: 22px; top: 16px; }
.dp-topbar-copy { display: flex; align-items: center; gap: 12px; }
.dp-breadcrumb { font-size: 12px; color: var(--dp-muted); }
.dp-breadcrumb::after { content: '/'; margin-left: 12px; color: var(--dp-border); }
.dp-workspace-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid var(--dp-border); color: var(--dp-muted); background: var(--dp-surface); font-size: 12px; }
html[data-demo-pay-theme] .dp-shell :is(.dashboard-card,.stat-card,.stats-card,.boss-card,.boss-live-stat,.panel-card,.employee-card,.detail-card,.summary-card,.chart-card,.data-card,.content-card,.finance-card,.table-card,.filter-card,.card,.modal-content,.panel-notification-drawer) {
    background: var(--dp-surface) !important;
    background-image: none !important;
    color: var(--dp-text) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius) !important;
    box-shadow: var(--dp-shadow) !important;
    backdrop-filter: none !important;
}
html[data-demo-pay-theme] .dp-shell :is(.dashboard-card,.stat-card,.stats-card,.boss-live-stat) { padding: 22px !important; min-height: 138px; }
html[data-demo-pay-theme] .dp-shell :is(.card-label,.stat-label,.stats-label) { color: var(--dp-text) !important; font-size: 13px !important; font-weight: 550; }
html[data-demo-pay-theme] .dp-shell :is(.card-value,.stat-value,.stats-value) { color: var(--dp-text) !important; font-size: clamp(23px,2.1vw,32px) !important; font-weight: 650 !important; letter-spacing: -1px; line-height: 1.3; }
html[data-demo-pay-theme] .dp-shell :is(.card-desc,.stat-desc,.card-breakdown,.boss-live-stat__average,.boss-live-stat__commission) { color: var(--dp-muted) !important; font-size: 11px; }
html[data-demo-pay-theme] .dp-shell .card-icon { color: var(--dp-accent) !important; background: var(--dp-accent-soft); padding: 12px; border-radius: 16px; box-sizing: content-box; font-size: 24px !important; }
html[data-demo-pay-theme] .dp-shell :is(.fr-main-card,.aff-card,.affboss-card,.dj-card,.staff-card,.employee-card,.boss-panel,.table-wrapper,.table-container,.filter-panel,.filters-card) {
    background: var(--dp-surface) !important; color: var(--dp-text) !important;
    border: 1px solid var(--dp-border) !important; border-radius: var(--dp-radius) !important;
    box-shadow: var(--dp-shadow) !important; background-image: none !important;
}
html[data-demo-pay-theme] .dp-shell :is(.affiliate-card,.staff-pill,.dj-topbar-control) { background: var(--dp-surface) !important; border-color: var(--dp-border) !important; color: var(--dp-text) !important; box-shadow: none !important; }
html[data-demo-pay-theme] .dp-shell :is(.font-black,.font-extrabold) { font-weight: 650 !important; }
html[data-demo-pay-theme] .dp-shell :is(h1,h2,h3,h4,h5,h6,.page-heading,.section-title,.table-title,.modal-title) { color: var(--dp-text) !important; letter-spacing: -.5px; }
html[data-demo-pay-theme] .dp-shell h1 { font-weight: 680 !important; }
html[data-demo-pay-theme] .dp-shell :is(.subtitle,.page-subtitle,.section-subtitle,.text-muted) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),select,textarea) {
    background: var(--dp-input) !important;
    color: var(--dp-text) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 8px !important;
    min-height: 40px;
    box-shadow: none !important;
    font-family: var(--dp-font) !important;
    font-size: 13px;
    color-scheme: inherit;
}
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) :is(input,select,textarea):focus {
    outline: 2px solid color-mix(in srgb,var(--dp-accent) 24%,transparent) !important;
    outline-offset: 1px;
    border-color: var(--dp-accent) !important;
}
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) input::placeholder,
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) textarea::placeholder { color: var(--dp-muted) !important; opacity: .8; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) option { background: var(--dp-surface) !important; color: var(--dp-text) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) input:is([type="checkbox"],[type="radio"]) { accent-color: var(--dp-accent); }
html[data-demo-pay-theme] .dp-shell :is(.btn,.panel-btn,.boss-button,.action-btn,.filter-btn,.btn-primary) { border-radius: 8px !important; font-weight: 550; box-shadow: none !important; font-size: 13px; }
html[data-demo-pay-theme] .dp-shell :is(.btn-primary,.panel-btn.primary,.boss-button-primary,.filter-btn.active,.tab-btn.active,.btn-success) {
    background: #345bee !important;
    color: #fff !important;
    border-color: #345bee !important;
}
html[data-demo-pay-theme] .dp-shell :is(.fr-btn-primary,.aff-btn-primary,.affboss-btn-primary,.dj-btn-primary,.staff-btn-primary) { background: #345bee !important; border-color: #345bee !important; color: #fff !important; box-shadow: none !important; }
html[data-demo-pay-theme] .dp-shell :is(.fr-btn,.aff-btn,.affboss-btn,.dj-btn,.staff-btn) { border-radius: 8px !important; font-weight: 550 !important; }
html[data-demo-pay-theme] .dp-shell :is(.btn-secondary,.panel-btn:not(.primary):not(.danger),.boss-button-secondary) { background: var(--dp-surface) !important; color: var(--dp-text) !important; border: 1px solid var(--dp-border) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) table { width: 100%; border-collapse: collapse; font-size: 12px; background: transparent !important; color: var(--dp-text) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) thead,
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) th {
    color: var(--dp-muted) !important;
    background: var(--dp-surface-soft) !important;
    border-color: var(--dp-border) !important;
    font-weight: 550 !important;
    letter-spacing: .1px;
    text-transform: none !important;
}
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) :is(th,td) { padding-top: 14px; padding-bottom: 14px; border-color: var(--dp-border) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) table td { color: var(--dp-text) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) tbody tr { border-bottom: 1px solid var(--dp-border) !important; background: var(--dp-surface) !important; }
html[data-demo-pay-theme] :is(.dp-shell,.dp-document) tbody tr:hover { background: var(--dp-hover) !important; }
html[data-demo-pay-theme] .dp-shell :is(.badge-success,.status-approved,.status-success) { background: var(--dp-success-soft) !important; color: var(--dp-success) !important; border-color: transparent !important; }
html[data-demo-pay-theme] .dp-shell :is(.badge-warning,.status-pending) { background: var(--dp-warning-soft) !important; color: var(--dp-warning) !important; border-color: transparent !important; }
html[data-demo-pay-theme] .dp-shell :is(.badge-danger,.status-failed,.status-rejected) { background: var(--dp-danger-soft) !important; color: var(--dp-danger) !important; border-color: transparent !important; }
/* Existing Tailwind views retain their semantic colors; neutral surfaces follow the mode. */
html[data-demo-pay-theme] .dp-shell :is(.bg-white,.bg-gray-800,.bg-gray-900,.bg-slate-800,.bg-slate-900,[class~="bg-white/5"],[class~="bg-white/10"],[class~="bg-white/[0.03]"],[class~="bg-white/[0.04]"],[class~="bg-white/[0.05]"],[class~="bg-black/20"],[class~="bg-black/30"]) { background-color: var(--dp-surface) !important; background-image: none !important; }
html[data-demo-pay-theme] .dp-shell :is(.bg-gray-50,.bg-gray-100,.bg-slate-50,.bg-slate-100,.bg-gray-700,.bg-slate-700) { background-color: var(--dp-surface-soft) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-white,.text-gray-100,.text-gray-200,.text-slate-100,.text-slate-200,.text-gray-800,.text-gray-900,.text-slate-800,.text-slate-900) { color: var(--dp-text) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-gray-300,.text-gray-400,.text-gray-500,.text-gray-600,.text-slate-300,.text-slate-400,.text-slate-500,.text-slate-600,[class~="text-white/40"],[class~="text-white/50"],[class~="text-white/60"],[class~="text-white/70"],[class~="text-white/80"]) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] .dp-shell :is(.border-gray-200,.border-gray-700,.border-gray-800,.border-slate-200,.border-slate-700,[class~="border-white/5"],[class~="border-white/10"],[class~="border-white/[0.08]"]) { border-color: var(--dp-border) !important; }
html[data-demo-pay-theme] .dp-shell :is(.bg-green-500,.bg-green-600,.bg-emerald-500,.bg-emerald-600,.bg-blue-600,.bg-indigo-600) { background-color: #345bee !important; color: #fff !important; }
html[data-demo-pay-theme] .dp-shell :is(button,a):is(.bg-green-500,.bg-green-600,.bg-emerald-500,.bg-emerald-600,.bg-blue-600,.bg-indigo-600) * { color: #fff !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-green-300,.text-green-400,.text-green-500,.text-green-600,.text-emerald-300,.text-emerald-400,.text-emerald-500,.text-emerald-600) { color: var(--dp-success) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-yellow-300,.text-yellow-400,.text-yellow-500,.text-amber-400,.text-orange-400) { color: var(--dp-warning) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-red-300,.text-red-400,.text-red-500,.text-rose-400) { color: var(--dp-danger) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-blue-300,.text-blue-400,.text-indigo-400,.text-cyan-400) { color: var(--dp-accent) !important; }
html[data-demo-pay-theme] .dp-shell :is([class*="text-white/"]) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] .dp-shell :is([class*="text-sky-100/"],[class*="text-cyan-100/"],[class*="text-blue-100/"],[class*="text-blue-200/"],[class*="text-emerald-300/"]) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-green-100,.text-green-200,.text-emerald-100,.text-emerald-200) { color: var(--dp-success) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-yellow-100,.text-yellow-200,.text-amber-100,.text-amber-200,.text-orange-100,.text-orange-200) { color: var(--dp-warning) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-red-100,.text-red-200,.text-rose-100,.text-rose-200) { color: var(--dp-danger) !important; }
html[data-demo-pay-theme] .dp-shell :is(.text-sky-100,.text-sky-200,.text-cyan-100,.text-cyan-200,.text-blue-100,.text-blue-200,.text-purple-100,.text-violet-100,.text-fuchsia-100,.text-pink-100) { color: var(--dp-accent) !important; }
html[data-demo-pay-theme] .dp-shell :is([class~="bg-green-500/10"],[class~="bg-emerald-500/10"],[class~="bg-green-500/20"],[class~="bg-emerald-500/20"]) { background: var(--dp-success-soft) !important; }
html[data-demo-pay-theme] .dp-shell :is([class~="bg-yellow-500/10"],[class~="bg-amber-500/10"],[class~="bg-yellow-500/20"]) { background: var(--dp-warning-soft) !important; }
html[data-demo-pay-theme] .dp-shell :is([class~="bg-red-500/10"],[class~="bg-rose-500/10"],[class~="bg-red-500/20"]) { background: var(--dp-danger-soft) !important; }
html[data-demo-pay-theme] .dp-shell :is(.panel-brand-vertical,.sidebar-modern)::after { display: none !important; }
html[data-demo-pay-theme] .dp-shell :is(.panel-overlay,.sidebar-overlay,.boss-sidebar-backdrop) { background-color: var(--dp-overlay) !important; }
html[data-demo-pay-theme] .dp-shell :is(.panel-mobile-open,.sidebar-toggle-btn,.menu-trigger) { background: var(--dp-surface) !important; color: var(--dp-muted) !important; border-color: var(--dp-border) !important; box-shadow: none !important; }
html[data-demo-pay-theme] .dp-shell :is(.panel-sidebar-footer,.sidebar-footer,.boss-mobile-quickbar) { border-color: var(--dp-border) !important; background: var(--dp-surface) !important; }
html[data-demo-pay-theme] .dp-shell :is(.apexcharts-text,.apexcharts-legend-text) { fill: var(--dp-muted) !important; color: var(--dp-muted) !important; }
html[data-demo-pay-theme] .dp-shell .apexcharts-gridline { stroke: var(--dp-border) !important; }
html[data-demo-pay-theme] .dp-shell .apexcharts-tooltip { background: var(--dp-surface-raised) !important; border-color: var(--dp-border) !important; color: var(--dp-text) !important; }
.dp-document-tools { position: fixed; top: 16px; right: 18px; z-index: 1000; }
html[data-demo-pay-theme] .dp-document :is(.payment,.selection-shell,.intro,.picker,.summary,.page>.shell,.box,.modal,.checkout-card,.doc-section,.note,.hero,.hero-visual,.top,.topbar,.layout>aside) { background: var(--dp-surface) !important; color: var(--dp-text) !important; border-color: var(--dp-border) !important; box-shadow: var(--dp-shadow) !important; background-image: none !important; }
html[data-demo-pay-theme] .dp-document :is(h1,h2,h3,h4,strong,label,.subtitle,.desc,.description,.hint,.muted,.label) { color: var(--dp-text) !important; }
html[data-demo-pay-theme] .dp-document :is(.subtitle,.desc,.description,.hint,.muted,.label) { color: var(--dp-muted) !important; }
html[data-demo-pay-theme] .dp-document :is(.brand-frame,.logo-frame) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-demo-pay-theme] .dp-document :is(.code-shell,pre) { background: var(--dp-surface-soft) !important; color: var(--dp-text) !important; border-color: var(--dp-border) !important; }
html[data-demo-pay-theme] * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--dp-muted) 28%,transparent) transparent; }
html[data-demo-pay-theme] :focus-visible { outline-color: var(--dp-accent); }
@media (min-width:1024px) {
    html[data-demo-pay-theme] body.dp-shell .dp-sidebar:not(.sidebar-collapsed):not(.collapsed):not(.compact) { width: var(--dp-sidebar-width) !important; min-width: var(--dp-sidebar-width); flex-basis: var(--dp-sidebar-width) !important; }
    html[data-demo-pay-theme] body.dp-shell .dp-sidebar:is(.sidebar-collapsed,.collapsed,.compact) { width: 76px !important; min-width: 76px !important; }
    html[data-demo-pay-theme] body.dp-shell .dp-sidebar:is(.sidebar-collapsed,.collapsed,.compact) .dp-brand-logo { display: none !important; }
    html[data-demo-pay-theme] body.dp-shell .dp-sidebar:is(.sidebar-collapsed,.collapsed,.compact) .dp-brand-mark { display: block !important; }
}
@media (max-width:767px) {
    html[data-demo-pay-theme] body.dp-shell .dp-topbar { padding-left: 16px; padding-right: 16px; min-height: 64px; }
    .dp-topbar > .dp-theme-switch { margin-left: 0; }
    .dp-theme-switch button { width: 32px !important; height: 31px !important; }
    html[data-demo-pay-theme] .dp-shell :is(.dashboard-card,.stat-card,.boss-live-stat) { padding: 16px !important; min-height: 124px; }
    .dp-workspace-bar { padding: 12px 16px; }
    .dp-staff-topbar .dp-topbar-copy { padding-left: 44px; }
    .dp-staff-topbar .dp-breadcrumb { display: none; }
    .dp-topbar.top-header > .dp-theme-slot { position: absolute; top: 12px; right: 16px; }
    .dp-topbar.top-header .support-header-left { padding-right: 88px; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}