:root {
    /* Veil tokens shared with the client panel. */
    --fused-purple: #a855f7;
    --fused-purple-rgb: 168, 85, 247;
    --fused-cyan: #22d3ee;
    --fused-cyan-rgb: 34, 211, 238;
    --fused-sidebar: #101012;
    --fused-sidebar-width: 320px;
    --fused-bg: #101012;
    --fused-surface: #1b1b1f;
    --fused-surface-soft: #24242a;
    --fused-text: #f2f2f4;
    --fused-muted: #a1a1aa;
    --fused-border: #34343c;
    --fused-border-strong: #4b4b55;
    --fused-shadow: 0 2px 4px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.22);
    --fused-radius: 8px;
    color-scheme: dark;
}

html[data-fused-theme="light"] {
    --fused-sidebar: #ffffff;
    --fused-bg: #f8fafc;
    --fused-surface: #ffffff;
    --fused-surface-soft: #f1f5f9;
    --fused-text: #111827;
    --fused-muted: #475569;
    --fused-border: #e5e7eb;
    --fused-border-strong: #cbd5e1;
    --fused-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);
    color-scheme: light;
}

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

html {
    min-width: 320px;
    font-size: 125%;
    background: var(--fused-sidebar);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.fused-whmcs,
body.fused-whmcs input,
body.fused-whmcs button,
body.fused-whmcs select,
body.fused-whmcs textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.fused-whmcs {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--fused-bg) !important;
    color: var(--fused-text);
}

/* Native checkboxes/radios, reskinned larger (Catalyst-style: ~20px, rounded
   square, filled + checkmark when checked) instead of the browser's tiny
   ~13px default that's fiddly to click. Catalyst's own component hides a real
   input and renders a separate SVG-driven box, which needs React state to
   drive — not portable into plain Smarty/HTML — so this reproduces the same
   visual with a plain appearance:none reskin of the real input instead. */
body.fused-whmcs input[type="checkbox"],
body.fused-whmcs input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid var(--fused-border-strong);
    background: var(--fused-surface);
    position: relative;
    cursor: pointer;
    accent-color: var(--fused-cyan);
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.fused-whmcs input[type="checkbox"] {
    border-radius: 0.35rem;
}

body.fused-whmcs input[type="radio"] {
    border-radius: 999px;
}

body.fused-whmcs input[type="checkbox"]:checked,
body.fused-whmcs input[type="radio"]:checked {
    border-color: var(--fused-cyan);
    background: var(--fused-cyan);
}

body.fused-whmcs input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.08rem;
    width: 0.3rem;
    height: 0.65rem;
    border: solid #042f32;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.fused-whmcs input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 0.3rem;
    border-radius: 999px;
    background: #042f32;
}

body.fused-whmcs input[type="checkbox"]:focus-visible,
body.fused-whmcs input[type="radio"]:focus-visible {
    outline: 2px solid rgba(var(--fused-purple-rgb), 0.6);
    outline-offset: 2px;
}

/* Bootstrap's .form-check assumes the old ~13px checkbox (absolute-positioned,
   pulled back with a negative margin to sit in a fixed-width gutter) — fragile
   now that ours is 20px. Flexbox instead, so it holds up at any checkbox size
   and wraps cleanly when the label is a full sentence, not just "Yes". */
body.fused-whmcs .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 0;
}

body.fused-whmcs .form-check-input {
    position: static;
    flex-shrink: 0;
    margin: 0.15rem 0 0;
}

/* #registration label {color:#666} in vendor theme.css (ID selector) outranks
   a bare class, so this needs the #registration prefix to actually win. */
#registration .fused-checkbox-card-label {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--fused-text);
    line-height: 1.5;
}

body.fused-whmcs a {
    color: #7e22ce;
}

html[data-fused-theme="dark"] body.fused-whmcs a {
    color: #67e8f9;
}

body.fused-whmcs a:hover,
body.fused-whmcs a:focus {
    color: #9333ea;
}

html[data-fused-theme="dark"] body.fused-whmcs a:hover,
html[data-fused-theme="dark"] body.fused-whmcs a:focus {
    color: #a5f3fc;
}

body.fused-whmcs h1,
body.fused-whmcs h2,
body.fused-whmcs h3,
body.fused-whmcs h4,
body.fused-whmcs h5,
body.fused-whmcs h6,
body.fused-whmcs p,
body.fused-whmcs label,
body.fused-whmcs .card-title,
body.fused-whmcs .modal-title {
    color: var(--fused-text);
}

.fused-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    width: var(--fused-sidebar-width);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--fused-sidebar);
    color: #ffffff;
}

html[data-fused-theme="light"] .fused-sidebar {
    color: #111827;
}

html[data-fused-theme="light"] .fused-sidebar-brand,
html[data-fused-theme="light"] .fused-sidebar-session,
html[data-fused-theme="light"] .fused-nav-divider {
    border-color: var(--fused-border);
    background: transparent;
}

html[data-fused-theme="light"] .fused-nav-item,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item {
    color: #475569;
}

html[data-fused-theme="light"] .fused-nav-item > i {
    color: #64748b;
}

html[data-fused-theme="light"] .fused-nav-item:hover,
html[data-fused-theme="light"] .fused-nav-item:focus,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item:hover,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item:focus,
html[data-fused-theme="light"] .fused-nav-item.is-active,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item.is-active {
    background: #f1f5f9;
    color: #0f172a;
}

html[data-fused-theme="light"] .fused-nav-item.is-active > i {
    color: #0891b2;
}

html[data-fused-theme="light"] .fused-session-name {
    color: #334155;
}

/* Height matches #header.fused-topbar (both 4rem) so the sidebar's brand
   divider and the topbar's bottom border land on the same line across the
   full width of the page, instead of the two borders sitting at different
   heights where the sidebar meets the main content. */
.fused-sidebar-brand {
    display: flex;
    height: 4rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0 1.5rem;
}

.fused-sidebar-brand a {
    display: inline-flex;
    align-items: center;
}

.fused-sidebar-brand .fused-logo-svg {
    display: block;
    width: auto;
    height: 3rem;
}

/* Logo is inlined (includes/fused-logo.tpl), not <img>, specifically so this
   override can reach the wordmark: white reads fine on the dark sidebar, but
   needs to be dark in light theme instead of vanishing against a light bg. */
html[data-fused-theme="light"] .fused-sidebar-brand .fused-logo-svg .three-3 {
    fill: #000000;
}

.fused-sidebar-close {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #a1a1aa;
}

.fused-sidebar-close:hover,
.fused-sidebar-close:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.fused-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    scrollbar-color: rgba(113, 113, 122, 0.65) transparent;
    scrollbar-width: thin;
}

.fused-nav-item,
body.fused-whmcs .fused-nav-item {
    position: relative;
    display: flex;
    min-height: 2.625rem;
    align-items: center;
    gap: 0.75rem;
    margin: 0.125rem 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    color: #a1a1aa;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.fused-nav-item > i {
    width: 1.25rem;
    flex: 0 0 1.25rem;
    color: #71717a;
    font-size: 1rem;
    text-align: center;
    transition: color 140ms ease;
}

.fused-nav-item > i.fused-nav-external-icon {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
    color: #71717a;
    font-size: 0.6875rem;
    opacity: 0.75;
}

.fused-nav-item:hover,
.fused-nav-item:focus,
body.fused-whmcs .fused-nav-item:hover,
body.fused-whmcs .fused-nav-item:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-decoration: none;
}

.fused-nav-item.is-active,
body.fused-whmcs .fused-nav-item.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.fused-nav-item.is-active::before {
    position: absolute;
    inset: 0.5rem auto 0.5rem -1rem;
    width: 0.125rem;
    border-radius: 999px;
    background: var(--fused-cyan);
    content: "";
}

.fused-nav-item.is-active > i {
    color: #67e8f9;
}

.fused-nav-divider {
    height: 1px;
    margin: 1rem 0.75rem;
    background: rgba(255, 255, 255, 0.07);
}

.fused-sidebar-session {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.6rem;
}

/* The sidebar's own trigger for the same account menu the topbar exposes
   (see header.tpl) — reuses .fused-account-button/-icon/-name so both
   triggers read as one component, just widened to fill the sidebar rail. */
.fused-sidebar-account-button,
body.fused-whmcs .fused-sidebar-account-button {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 0.55rem 0.65rem;
}

.fused-sidebar-account-caret {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--fused-muted);
    font-size: 0.7rem;
}

.fused-sidebar-backdrop {
    display: none;
}

#header.fused-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: calc(100% - var(--fused-sidebar-width));
    height: 4rem;
    margin: 0 0 0 var(--fused-sidebar-width);
    border: 0;
    border-bottom: 1px solid var(--fused-border);
    background: var(--fused-surface);
    box-shadow: none;
}

/* Shares the breadcrumb bar's own .container centering math (same width/
   max-width/margin formula) instead of a hardcoded padding value, so the page
   title and the breadcrumb trail directly below it land at the exact same
   left edge instead of drifting a few pixels apart. Solid --fused-surface
   (was a translucent + blurred rgba) also now matches the breadcrumb bar's
   background exactly instead of reading as a slightly different shade. */
#header.fused-topbar > .container {
    display: flex;
    width: 100%;
    max-width: 80rem;
    align-items: center;
    height: 100%;
}

.fused-menu-button,
.fused-icon-button,
.fused-theme-toggle {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--fused-muted);
    text-decoration: none;
}

/* Circular + bordered so it reads as a two-state toggle control at a glance,
   instead of blending in with the plain action icons (bell, switch account)
   next to it — at topbar size the bare sun glyph was easy to mistake for a
   settings gear. */
.fused-theme-toggle {
    border: 1px solid var(--fused-border);
    border-radius: 999px;
}

.fused-topbar-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.25rem;
    background: var(--fused-border);
}

body.fused-whmcs .fused-icon-button {
    color: var(--fused-muted);
}

.fused-menu-button:hover,
.fused-menu-button:focus,
.fused-icon-button:hover,
.fused-icon-button:focus,
.fused-theme-toggle:hover,
.fused-theme-toggle:focus {
    background: rgba(24, 24, 27, 0.05);
    color: var(--fused-text);
    text-decoration: none;
}

html[data-fused-theme="dark"] .fused-menu-button:hover,
html[data-fused-theme="dark"] .fused-menu-button:focus,
html[data-fused-theme="dark"] .fused-icon-button:hover,
html[data-fused-theme="dark"] .fused-icon-button:focus,
html[data-fused-theme="dark"] .fused-theme-toggle:hover,
html[data-fused-theme="dark"] .fused-theme-toggle:focus {
    background: rgba(255, 255, 255, 0.06);
}

.fused-menu-button {
    display: none;
    margin-right: 0.5rem;
}

.fused-page-name {
    min-width: 0;
    overflow: hidden;
    color: var(--fused-text);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.fused-theme-light-icon {
    display: none;
}

html[data-fused-theme="dark"] .fused-theme-dark-icon {
    display: none;
}

html[data-fused-theme="dark"] .fused-theme-light-icon {
    display: inline-block;
}

.fused-icon-button {
    position: relative;
}

.fused-notification-count {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: inline-flex;
    min-width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fused-surface);
    border-radius: 999px;
    background: var(--fused-purple);
    color: #ffffff;
    font-size: 0.5625rem;
    font-weight: 700;
}

.fused-account-button,
body.fused-whmcs .fused-account-button {
    display: inline-flex;
    max-width: 15rem;
    align-items: center;
    gap: 0.55rem;
    margin-left: 0.25rem;
    padding: 0.3rem 0.55rem 0.3rem 0.35rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--fused-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.fused-account-button:hover,
.fused-account-button:focus {
    background: rgba(24, 24, 27, 0.05);
    color: var(--fused-text);
}

html[data-fused-theme="dark"] .fused-account-button:hover,
html[data-fused-theme="dark"] .fused-account-button:focus {
    background: rgba(255, 255, 255, 0.06);
}

.fused-account-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--fused-purple-rgb), 0.16), rgba(var(--fused-cyan-rgb), 0.16));
    color: #7e22ce;
}

html[data-fused-theme="dark"] .fused-account-icon {
    color: #67e8f9;
}

.fused-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-sign-in,
body.fused-whmcs .fused-sign-in {
    padding-inline: 1rem;
}

body.fused-whmcs > .alert,
body.fused-whmcs > .network-issue,
body.fused-whmcs > .client-alert,
body.fused-whmcs > .verify-email,
body.fused-whmcs #main-body,
#footer.footer {
    margin-left: var(--fused-sidebar-width);
}

.fused-topbar-breadcrumb {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.fused-topbar-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--fused-muted);
    font-size: 0.75rem;
    overflow: hidden;
}

.fused-topbar-breadcrumb .breadcrumb-item {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fused-topbar-breadcrumb .breadcrumb-item:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fused-topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--fused-muted);
}

body.fused-whmcs #main-body {
    min-height: calc(100vh - 4rem);
    padding: 2rem 0 2.5rem;
    background: var(--fused-bg);
}

body.fused-whmcs #main-body > .container,
#footer > .container {
    width: min(100% - 2rem, 80rem);
    max-width: 80rem;
}

.fused-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.fused-page-heading > div,
.fused-page-heading h1 {
    text-align: left;
}

.fused-page-heading h1 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.fused-page-heading p {
    margin: 0.55rem 0 0;
    color: var(--fused-muted);
    font-size: 0.95rem;
}

body.fused-whmcs .btn {
    border-radius: 0.55rem;
    font-weight: 600;
}

body.fused-whmcs .btn-primary,
body.fused-whmcs .btn-info {
    border-color: #00b8bd;
    background: var(--fused-cyan);
    color: #042f32;
    box-shadow: none;
}

body.fused-whmcs .btn-primary:hover,
body.fused-whmcs .btn-primary:focus,
body.fused-whmcs .btn-info:hover,
body.fused-whmcs .btn-info:focus {
    border-color: #00a6aa;
    background: #22e6e6;
    color: #042f32;
}

/* Dashboard action buttons can inherit WHMCS's muted/disabled treatment even
   when they remain actionable links. Keep the cyan actions fully legible. */
body.fused-whmcs .fused-page-heading .btn-primary,
body.fused-whmcs .client-home-cards .btn-primary,
body.fused-whmcs .fused-page-heading .btn-info,
body.fused-whmcs .client-home-cards .btn-info {
    opacity: 1 !important;
    color: #042f32 !important;
    text-shadow: none;
    filter: none;
}

body.fused-whmcs .btn-default,
body.fused-whmcs .btn-secondary,
body.fused-whmcs .btn-outline-primary {
    border-color: var(--fused-border-strong);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: none;
}

body.fused-whmcs .btn-outline-danger {
    border-color: #dc2626;
    background: transparent;
    color: #dc2626;
    box-shadow: none;
}

body.fused-whmcs .btn-outline-danger:hover,
body.fused-whmcs .btn-outline-danger:focus {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Bulk registrar-lock confirmation: the page's own copy recommends keeping
   lock enabled, but Enable/Disable were rendered as two equally loud, equally
   large solid buttons with no cue toward either. Outlining Disable keeps it
   fully visible and functional while reflecting that recommendation instead
   of presenting both as equally urgent. */
.fused-reglock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fused-reglock-actions .btn i {
    margin-right: 0.4rem;
}

.fused-changelog-subtitle,
.fused-changelog-empty {
    color: var(--fused-muted);
}

.fused-changelog-list {
    border-top: 1px solid var(--fused-border);
}

.fused-changelog-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 1.25rem 0;
}

.fused-changelog-search {
    flex: 1 1 16rem;
    max-width: 22rem;
}

/* Filter toolbar: the primary control for this list, so it gets the
   heavier treatment — a segmented-control track with a filled, unambiguous
   active state. Hover only lightens; it never looks like the active state,
   since the two used to share one style and were easy to confuse. */
.fused-changelog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid var(--fused-border);
    border-radius: 999px;
    background: var(--fused-surface-soft);
}

.fused-changelog-filter {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--fused-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.42rem 0.75rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.fused-changelog-filter:hover {
    color: var(--fused-text);
    background: var(--fused-surface);
}

.fused-changelog-filter:focus-visible {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 1px;
}

.fused-changelog-filter.is-active {
    border-color: rgba(var(--fused-cyan-rgb), 0.4);
    background: rgba(var(--fused-cyan-rgb), 0.16);
    color: var(--fused-text);
}

/* Per-entry tags are metadata riding along next to a title, not a second
   set of controls, so they stay visually quiet: small, square-ish, outline
   only, and only pick up color on hover/focus rather than sitting tinted
   at rest like the filter pills above. */
.fused-changelog-tags {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fused-changelog-tags button {
    border: 1px solid var(--fused-border);
    border-radius: 0.3rem;
    background: transparent;
    color: var(--fused-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.28rem 0.5rem;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

.fused-changelog-tags button:hover {
    border-color: rgba(var(--fused-cyan-rgb), 0.45);
    color: var(--fused-cyan);
}

.fused-changelog-tags button:focus-visible {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 1px;
}

.fused-changelog-entry {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0 -0.6rem;
    padding: 0.8rem 0.6rem;
    border-bottom: 1px solid var(--fused-border);
    border-radius: 0.4rem;
    color: var(--fused-text);
    text-decoration: none;
}

.fused-changelog-title {
    min-width: 0;
    color: var(--fused-text);
    font-weight: 600;
    line-height: 1.35;
}

.fused-changelog-date {
    color: var(--fused-muted);
    font-family: var(--fused-mono, ui-monospace, monospace);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

body.fused-whmcs .select-account {
    border-top-color: var(--fused-border);
}

body.fused-whmcs .select-account a {
    border-bottom-color: var(--fused-border);
    color: var(--fused-text);
}

body.fused-whmcs .select-account a:not(.disabled):hover,
body.fused-whmcs .select-account a:not(.disabled):focus-visible {
    background: rgba(var(--fused-cyan-rgb), 0.14);
    color: var(--fused-text);
    outline: 2px solid rgba(var(--fused-cyan-rgb), 0.55);
    outline-offset: -2px;
}

html[data-fused-theme="light"] body.fused-whmcs .select-account a:not(.disabled):hover,
html[data-fused-theme="light"] body.fused-whmcs .select-account a:not(.disabled):focus-visible {
    background: #e2e8f0;
    color: #0f172a;
}

.fused-changelog-content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.fused-free-account {
    white-space: nowrap;
    font-weight: 600;
    color: var(--fused-muted);
}

@media (max-width: 600px) {
    .fused-changelog-entry {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .fused-changelog-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }
}

body.fused-whmcs .btn-default:hover,
body.fused-whmcs .btn-default:focus,
body.fused-whmcs .btn-secondary:hover,
body.fused-whmcs .btn-secondary:focus,
body.fused-whmcs .btn-outline-primary:hover,
body.fused-whmcs .btn-outline-primary:focus {
    border-color: rgba(var(--fused-purple-rgb), 0.35);
    background: rgba(var(--fused-purple-rgb), 0.07);
    color: var(--fused-text);
}

body.fused-whmcs .btn-success {
    border-color: #059669;
    background: #10b981;
    color: #022c22;
    box-shadow: none;
}

body.fused-whmcs .btn-success:hover,
body.fused-whmcs .btn-success:focus {
    border-color: #047857;
    background: #34d399;
    color: #022c22;
}

/* WHMCS's own home-panel buttons (Pay All, Add Funds, etc.) are raw
   core-generated HTML we don't template — same vendor-icon leak already
   neutralized for the summary tiles above: the base client-area theme
   positions some icon glyphs absolutely, which here let the Pay All
   checkmark spill outside the button's rounded corner instead of sitting
   inline before the label. */
body.fused-whmcs .card-body .btn {
    overflow: hidden;
}

body.fused-whmcs .card-body .btn i {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    display: inline-flex;
    margin-right: 0.4rem;
    font-size: 1em;
    vertical-align: middle;
}

body.fused-whmcs .client-home-cards .fused-unpaid-invoice-action {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0 1rem 0.9rem;
}

body.fused-whmcs .client-home-cards .fused-unpaid-invoice-action .btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    transform: none;
}

body.fused-whmcs .btn-warning {
    border-color: #d97706;
    background: #f59e0b;
    color: #451a03;
    box-shadow: none;
}

body.fused-whmcs .btn-warning:hover,
body.fused-whmcs .btn-warning:focus {
    border-color: #b45309;
    background: #fbbf24;
    color: #451a03;
}

body.fused-whmcs .btn-danger {
    border-color: #dc2626;
    background: #ef4444;
    color: #ffffff;
    box-shadow: none;
}

body.fused-whmcs .btn-danger:hover,
body.fused-whmcs .btn-danger:focus {
    border-color: #b91c1c;
    background: #f87171;
    color: #ffffff;
}

.fused-summary-grid .row {
    margin: -0.375rem;
}

.fused-summary-grid [class*="col-"] {
    padding: 0.375rem;
}

.fused-summary-grid .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 9.5rem;
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-top: 3px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
    padding: 1.25rem;
    color: var(--fused-text);
    text-align: left;
    text-decoration: none;
    transition: border-color 140ms ease;
}

/* Only the three non-accent edges tint on hover — the top border carries
   each tile's accent color and should stay put rather than washing out to
   the same purple tint on every tile. */
.fused-summary-grid .tile:hover,
.fused-summary-grid .tile:focus {
    border-right-color: rgba(var(--fused-purple-rgb), 0.28);
    border-bottom-color: rgba(var(--fused-purple-rgb), 0.28);
    border-left-color: rgba(var(--fused-purple-rgb), 0.28);
    background: var(--fused-surface);
    color: var(--fused-text);
    text-decoration: none;
}

.fused-tile-accent-cyan { border-top-color: #0891b2; }
.fused-tile-accent-purple { border-top-color: #7e22ce; }
.fused-tile-accent-amber { border-top-color: #b45309; }
.fused-tile-accent-green { border-top-color: #15803d; }

.fused-summary-grid .tile .stat {
    min-width: 0;
    color: var(--fused-text);
    font-size: 1.875rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.fused-summary-grid .tile .title {
    margin-top: 0.35rem;
    min-width: 0;
    color: var(--fused-text);
    font-size: 0.875rem;
    font-weight: 650;
    overflow-wrap: normal;
    word-break: normal;
}

.fused-tile-detail {
    margin-top: 0.8rem;
    color: var(--fused-muted);
    font-size: 0.75rem;
}

/* The sidebar consumes a substantial portion of the viewport, so the
   framework's 1200px `xl` breakpoint is too early for four dashboard cards.
   Keep two comfortable columns until there is genuinely enough content
   width for the compact four-column arrangement. */
@media (max-width: 1500px) {
    .fused-summary-grid .col-xl-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

body.fused-whmcs .card,
body.fused-whmcs .modal-content,
body.fused-whmcs .dropdown-menu,
body.fused-whmcs .table-container,
body.fused-whmcs .dataTables_wrapper {
    border-color: var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: var(--fused-shadow);
}

body.fused-whmcs .card {
    overflow: hidden;
}

body.fused-whmcs .card-header,
body.fused-whmcs .card-footer,
body.fused-whmcs .modal-header,
body.fused-whmcs .modal-footer {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

/* A few modal headers (Generate Password, etc.) are hardcoded with Bootstrap's
   `bg-primary text-white` utility classes right in the markup — and utility
   classes carry !important, so the plain .modal-header rule above never had a
   chance against it. Same idea for .modal-body, which isn't covered by any
   rule above at all and was falling back to Bootstrap's opaque white. */
body.fused-whmcs .modal-header.bg-primary {
    background: var(--fused-surface-soft) !important;
    color: var(--fused-text) !important;
}

body.fused-whmcs .modal-body {
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .modal .close {
    color: var(--fused-text);
    text-shadow: none;
    opacity: 0.7;
}

body.fused-whmcs .modal .close:hover,
body.fused-whmcs .modal .close:focus {
    color: var(--fused-text);
    opacity: 1;
}

body.fused-whmcs .card-header {
    padding: 1rem 1.25rem;
}

/* Home-panel icons (e.g. "Unpaid Invoices") sit inline before the heading
   text with no baseline correction, so FontAwesome's glyph metrics read a
   few pixels higher than the title next to it instead of lining up. A
   vertical-align nudge (rather than restructuring .card-title with flex)
   keeps every other .card-title layout — floated header buttons, badges —
   exactly as it was. */
body.fused-whmcs .card-header .card-title > i {
    margin-right: 0.15rem;
    vertical-align: -0.1em;
    color: var(--fused-cyan);
}

html[data-fused-theme="dark"] body.fused-whmcs .card-header .card-title > i {
    color: #67e8f9;
}

body.fused-whmcs .card-body {
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .card-accent-blue,
body.fused-whmcs .card-accent-green,
body.fused-whmcs .card-accent-red,
body.fused-whmcs .card-accent-gold,
body.fused-whmcs .card-accent-teal,
body.fused-whmcs .card-accent-midnight-blue,
body.fused-whmcs .card-accent-pomegranate {
    border-top-color: rgba(var(--fused-purple-rgb), 0.35);
}

body.fused-whmcs .list-group-item {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .list-group-item-action:hover,
body.fused-whmcs .list-group-item-action:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-whmcs .list-group-item.active {
    border-color: rgba(var(--fused-cyan-rgb), 0.25);
    background: rgba(var(--fused-cyan-rgb), 0.09);
    color: var(--fused-text);
}

body.fused-whmcs .table,
body.fused-whmcs table,
body.fused-whmcs .table td,
body.fused-whmcs .table th {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .table tbody tr,
body.fused-whmcs table tbody tr,
body.fused-whmcs table.dataTable tbody tr,
body.fused-whmcs .dataTables_wrapper .dataTables_processing {
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .table-list > tbody > tr > td,
body.fused-whmcs table.table-list tbody td {
    background-color: var(--fused-surface);
}

body.fused-whmcs .table-list > tbody > tr:hover > td {
    background-color: var(--fused-surface-soft);
}

body.fused-whmcs .table thead th,
body.fused-whmcs table thead th {
    border-color: var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

/* The currently-sorted column header (e.g. clicking "Domain" to sort by it)
   gets its own hardcoded light-gray background from vendor theme.css,
   independent of the normal header rule above — stands out as a bright block
   against every other dark header cell until reset here. */
body.fused-whmcs .dataTables_wrapper table.table-list thead th.sorting_asc,
body.fused-whmcs .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--fused-surface-soft);
}

body.fused-whmcs .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(161, 161, 170, 0.06);
}

body.fused-whmcs .table-hover tbody tr:hover {
    background: rgba(var(--fused-purple-rgb), 0.04);
    color: var(--fused-text);
}

/* DataTables' "no records" row (Tickets/Domains/Services — Invoices keeps
   the plain default text) gets an icon, a line of copy, and an action
   button/pair instead of a bare "No records found." — an empty list is
   normal here, so it should read as an invitation, not a dead end. */
body.fused-whmcs td.dataTables_empty {
    padding: 3rem 1.5rem;
    text-align: center;
}

.fused-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.fused-empty-state > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
    font-size: 1.25rem;
}

.fused-empty-state > p {
    margin: 0;
    color: var(--fused-muted);
    font-size: 0.95rem;
}

.fused-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.fused-domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem !important;
}

.fused-domain-actions[hidden] {
    display: none !important;
}

.fused-domain-actions > .btn,
.fused-domain-actions > .btn-group > .btn {
    min-height: 2.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.45rem !important;
    font-size: 0.8rem;
    white-space: nowrap;
}

.fused-domain-actions > .btn i,
.fused-domain-actions > .btn-group > .btn i {
    margin-right: 0.25rem;
}

body.fused-whmcs .fused-domain-bulk-menu {
    width: max-content;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
}

body.fused-whmcs .fused-domain-bulk-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    white-space: normal;
}

body.fused-whmcs .fused-domain-bulk-menu .dropdown-item i {
    flex: 0 0 1rem;
    margin: 0;
    text-align: center;
}

@media (max-width: 575.98px) {
    .fused-domain-actions,
    .fused-domain-actions > .btn-group,
    .fused-domain-actions > .btn-group > .btn {
        width: 100%;
    }

    body.fused-whmcs .fused-domain-bulk-menu {
        width: min(100%, calc(100vw - 2rem));
        min-width: 0;
    }
}

/* The overview panel is populated by WHMCS as menu-item HTML. Show the three
   most recent tickets without creating a nested scrollbar or an oversized card. */
body.fused-whmcs .client-home-cards [menuItemName*="Recent Support Tickets"] > .list-group > .list-group-item:nth-child(n+4) {
    display: none;
}

body.fused-whmcs .client-home-cards [menuItemName*="Recent Support Tickets"] > .list-group {
    max-height: none;
    overflow: hidden;
}

/* Affiliates: keep the referral workspace compact and intentional. The vendor
   template uses oversized Bootstrap defaults and an unstyled DataTables shell,
   which makes an empty referral list feel disconnected from the Veil surface. */
.fused-affiliates {
    max-width: 72rem;
    margin: 0 auto;
}

.fused-affiliates > .row:first-child {
    margin: -0.375rem;
}

.fused-affiliates > .row:first-child > [class*="col-"] {
    padding: 0.375rem;
}

.fused-affiliates .affiliate-stat {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    gap: 0.75rem;
    margin: 0 !important;
    padding: 1rem 1.15rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-muted);
    box-shadow: var(--fused-shadow);
    font-size: 0.875rem;
}

.fused-affiliates .affiliate-stat i {
    color: var(--fused-cyan);
    font-size: 1.05rem;
}

.fused-affiliates .affiliate-stat span {
    color: var(--fused-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.fused-affiliates > .card {
    margin: 1.25rem 0 !important;
}

.fused-affiliates > .card .card-body {
    padding: 1.25rem 1.5rem;
}

.fused-affiliates > .card .h3 {
    margin-bottom: 0.7rem;
    color: var(--fused-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fused-affiliates > .row:not(:first-child) {
    margin: 0 auto 1rem;
}

.fused-affiliates > .row:not(:first-child) > .col-md-8 {
    padding: 0;
}

.fused-affiliates > .row:not(:first-child) table {
    margin: 0;
    overflow: hidden;
    border-radius: var(--fused-radius);
    box-shadow: var(--fused-shadow);
}

.fused-affiliates > .row:not(:first-child) table td {
    padding: 0.8rem 1rem;
}

.fused-affiliates > .row:not(:first-child) table td:first-child {
    width: 58%;
    color: var(--fused-muted);
    font-size: 0.8rem;
}

.fused-affiliates > .text-center form {
    margin: 1rem 0 0.5rem;
}

.fused-affiliates .btn-lg {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}

.fused-affiliates > .text-center > .text-muted,
.fused-affiliates > .text-muted {
    margin: 0.5rem 0 1.75rem;
    color: var(--fused-muted) !important;
    font-size: 0.8rem;
}

.fused-affiliates > h2 {
    margin: 2rem 0 0.75rem;
    color: var(--fused-text);
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.fused-affiliates .table-container,
.fused-affiliates .dataTables_wrapper {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
}

.fused-affiliates .dataTables_wrapper .listtable {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--fused-border);
}

.fused-affiliates .dataTables_wrapper .dataTables_filter {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.fused-affiliates .dataTables_wrapper .dataTables_filter input {
    width: min(17rem, 100%);
    min-height: 2.4rem;
    margin-left: 0.5rem;
}

.fused-affiliates .dataTables_wrapper .dataTables_info {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: var(--fused-muted);
    font-size: 0.8rem;
}

.fused-affiliates .dataTables_wrapper .dataTables_length,
.fused-affiliates .dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem;
    color: var(--fused-muted);
    font-size: 0.8rem;
}

.fused-affiliates .dataTables_wrapper .dataTables_paginate {
    float: right;
}

.fused-affiliates .dataTables_wrapper .dataTables_length {
    float: left;
}

.fused-affiliates #tableAffiliatesList {
    margin: 0;
}

.fused-affiliates #tableAffiliatesList th,
.fused-affiliates #tableAffiliatesList td {
    padding: 0.8rem 0.9rem;
    vertical-align: middle;
}

.fused-affiliates #tableAffiliatesList td:first-child,
.fused-affiliates #tableAffiliatesList th:first-child {
    white-space: nowrap;
}

.fused-affiliates > .margin-bottom {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
}

.fused-affiliates > .margin-bottom img,
.fused-affiliates > .margin-bottom textarea,
.fused-affiliates > .margin-bottom pre {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .fused-affiliates .dataTables_wrapper .listtable {
        display: block;
    }

    .fused-affiliates .dataTables_wrapper .dataTables_filter {
        margin-top: 0.6rem;
        text-align: left;
    }

    .fused-affiliates .dataTables_wrapper .dataTables_filter input {
        width: calc(100% - 0.5rem);
        margin-left: 0;
    }

    .fused-affiliates .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
    }
}

body.fused-whmcs .form-control,
body.fused-whmcs .custom-select,
body.fused-whmcs input[type="text"],
body.fused-whmcs input[type="email"],
body.fused-whmcs input[type="password"],
body.fused-whmcs input[type="tel"],
body.fused-whmcs input[type="number"],
body.fused-whmcs input[type="search"],
body.fused-whmcs select,
body.fused-whmcs textarea {
    border-color: var(--fused-border-strong);
    border-radius: 0.55rem;
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: none;
}

body.fused-whmcs .form-control:focus,
body.fused-whmcs .custom-select:focus,
body.fused-whmcs input:focus,
body.fused-whmcs input[type="search"]:focus,
body.fused-whmcs select:focus,
body.fused-whmcs textarea:focus {
    border-color: rgba(var(--fused-purple-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--fused-purple-rgb), 0.1);
}

body.fused-whmcs .form-control::placeholder,
body.fused-whmcs textarea::placeholder {
    color: var(--fused-muted);
}

/* Vendor hardcodes disabled/readonly fields to a light-mode #e9ecef — on our
   dark theme that's a bright box on a dark page, the opposite of "greyed
   out". Account Details' read-only view (clientareadetails.tpl) leans on
   this for its whole-page locked look, so it needs to actually read as
   dimmed here. */
body.fused-whmcs .form-control:disabled,
body.fused-whmcs .form-control[readonly],
body.fused-whmcs select:disabled,
body.fused-whmcs input:disabled {
    background-color: var(--fused-surface-soft);
    color: var(--fused-muted);
    opacity: 1;
}

/* Support-ticket custom fields (e.g. "Phone Number") render whatever raw
   input HTML the admin's field config produces, which can carry a `size`
   attribute derived from the field's configured max length rather than its
   actual expected input length — with no form-control class and no CSS
   width, the browser sizes the box off that attribute instead, so a max
   length meant only to cap input turns into a comically wide field. Pin a
   sane width regardless of what markup WHMCS core hands us. */
#customFieldsContainer input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    max-width: 28rem;
}

#customFieldsContainer textarea,
#customFieldsContainer select {
    width: 100%;
}

/* For the handful of fields WHMCS core hands us as raw rendered HTML (the
   country dropdown, custom fields, extra fields) — no `disabled` attribute
   to add, so this fakes the same locked, greyed-out treatment with CSS. */
.fused-field-locked {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* Five preference types settle into three short rows instead of stretching
   into a wide strip that competes with the client-area sidebar. */
body.fused-whmcs .fused-email-preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

body.fused-whmcs .fused-email-preferences label {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.45;
}

body.fused-whmcs .fused-email-preferences label .form-check-input {
    flex: 0 0 auto;
    margin: 0.2rem 0 0;
}

@media (max-width: 760px) {
    body.fused-whmcs .fused-email-preferences {
        grid-template-columns: 1fr;
    }
}

.fused-contact-introduction .card-body {
    max-width: 46rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.fused-contact-introduction-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid rgba(var(--fused-cyan-rgb), 0.35);
    border-radius: 0.75rem;
    background: rgba(var(--fused-cyan-rgb), 0.1);
    color: var(--fused-cyan);
    font-size: 1.2rem;
}

.fused-contact-introduction p {
    max-width: 42rem;
    color: var(--fused-muted);
    line-height: 1.65;
}

.fused-contact-introduction .btn {
    margin-top: 0.5rem;
}

/* Every DataTables search box on every table, site-wide — not just affiliates.
   Vendor's own rule (theme.css) hardcodes a white background-image search
   icon with `!important` padding and never constrains width, so it renders as
   a plain white pill that can grow past its table's edge at some widths. */
body.fused-whmcs .dataTables_wrapper .dataTables_filter {
    display: flex;
    min-width: 0;
    max-width: 100%;
    float: none;
    margin: 0 auto 0 0;
}

body.fused-whmcs .dataTables_wrapper .dataTables_filter label {
    display: flex;
    min-width: 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.fused-whmcs .dataTables_wrapper .dataTables_filter label .form-control {
    width: 100% !important;
    max-width: 16rem !important;
    background: var(--fused-surface) !important;
    border: 1px solid var(--fused-border-strong);
    border-radius: 0.55rem;
    padding: 0.5rem 0.85rem !important;
    color: var(--fused-text);
    box-shadow: none;
}

body.fused-whmcs .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: var(--fused-muted);
}

/* DataTables' own .dataTables_info ("Showing 1 to X of Y entries") has zero
   left spacing at all — sits flush against the table container's edge. */
body.fused-whmcs .dataTables_wrapper .dataTables_info {
    padding-left: 0.75rem;
    color: var(--fused-muted);
}

/* The bottom control row (length + pagination) has the same problem as the
   info text above: neither vendor rule for them carries any padding, so
   "Show 10 entries" sits flush against the container's left edge and
   pagination flush against the right — everything else in these tables
   (the search/info row, every cell) keeps a 0.75rem inset, this didn't. */
body.fused-whmcs .dataTables_wrapper .dataTables_length {
    padding: 0.75rem;
    color: var(--fused-muted);
}

body.fused-whmcs .dataTables_wrapper .dataTables_length .form-control,
body.fused-whmcs .dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    margin: 0 0.35rem;
}

body.fused-whmcs .dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem;
}

/* Keep DataTables' search control inside the wrapper. The Bootstrap adapter
   floats it right, while the generated input can retain its intrinsic width;
   on narrower tables that combination lets the field escape the surface.

   WHMCS's own dom string for these tables (`<"listtable"fit>pl`) makes the
   search box, the "Showing X of Y" info text, AND the actual <table> three
   siblings inside this one .listtable div — not just the search box and
   info text as the layout implies. Without `flex-wrap`, flex tries to fit
   all three on one line, and combined with `min-width: 0` below, that
   shrinks the real data table down to a sliver instead of overflowing,
   which effectively hid every row (the earlier `> table` rule below never
   caught this: the table isn't a direct child of .dataTables_wrapper, it's
   nested one level deeper inside .listtable, so that selector never
   matched anything). `flex-basis: 100%` on the table forces it past line
   one's remaining space so it wraps onto its own full-width row below the
   search/info line, which is what this always looked like it was trying to
   do. */
body.fused-whmcs .dataTables_wrapper .listtable {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.75rem;
    padding: 0.75rem;
    overflow: hidden;
    border-bottom: 1px solid var(--fused-border);
}

/* The WHMCS DataTables adapter can leave the wrapper/table in an inherited
   flex context. Keep the toolbar a full-width block above the table instead
   of allowing the table to occupy the next flex column. */
body.fused-whmcs .table-container,
body.fused-whmcs .dataTables_wrapper {
    display: block !important;
    width: 100%;
    clear: both;
}

body.fused-whmcs .dataTables_wrapper > .row,
body.fused-whmcs .dataTables_wrapper > .dataTables_scroll {
    display: block;
    width: 100%;
    clear: both;
}

body.fused-whmcs .dataTables_wrapper .listtable > * {
    min-width: 0;
}

body.fused-whmcs .dataTables_wrapper .listtable > table {
    flex: 1 1 100%;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter {
    flex: 0 1 17rem;
    margin: 0 !important;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_info {
    margin-left: 0;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter input,
body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

body.fused-whmcs .input-group-text,
body.fused-whmcs .input-group-addon {
    border-color: var(--fused-border-strong);
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
}

/* Stripe-hosted fields render their text inside provider iframes, beyond the
   reach of our dark-mode text color. Keep just the hosted card-entry surface
   light so the gateway's dark input text stays readable. */
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .StripeElement,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .StripeElement,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .StripeElement,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .StripeElement {
    min-height: 2.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #111827;
    color-scheme: light;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput iframe,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput iframe,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput iframe,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput iframe {
    width: 100% !important;
}

html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput label,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput label,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput label,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput label {
    color: #111827 !important;
}

html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput small,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .text-muted,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput small,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .text-muted,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput small,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .text-muted,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput small,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .text-muted {
    color: #475569 !important;
}

/* Payment-method billing contacts need three stable columns: selection,
   identity, and the address. Keeping the complete address in one grid cell
   lets punctuation and long values wrap together instead of colliding with
   the name or becoming separate flex items. */
#billingContactsContainer .billing-contact-option {
    display: grid !important;
    grid-template-columns: auto minmax(7.5rem, 10rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 1rem;
    width: 100%;
    margin: 0 0 0.875rem;
    color: var(--fused-text);
    cursor: pointer;
}

#billingContactsContainer .billing-contact-option .name,
#billingContactsContainer .billing-contact-address {
    min-width: 0;
    overflow-wrap: anywhere;
}

#billingContactsContainer .billing-contact-address {
    color: var(--fused-muted);
}

@media (max-width: 767.98px) {
    #billingContactsContainer .billing-contact-option {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #billingContactsContainer .billing-contact-address {
        grid-column: 2;
    }
}

body.fused-whmcs .account-permission-all-warning {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.875rem;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(249, 115, 22, 0.5);
    border-left: 0.25rem solid #f97316;
    border-radius: 0.625rem;
    background: rgba(249, 115, 22, 0.1);
    color: var(--fused-text);
}

body.fused-whmcs .account-permission-all-warning.w-hidden {
    display: none;
}

body.fused-whmcs .account-permission-all-warning > i {
    margin-top: 0.15rem;
    color: #fb923c;
}

body.fused-whmcs .account-permission-all-warning strong,
body.fused-whmcs .account-permission-all-warning span {
    display: block;
}

body.fused-whmcs .account-permission-all-warning strong {
    margin-bottom: 0.25rem;
}

body.fused-whmcs .account-permission-all-warning span {
    color: var(--fused-muted);
    line-height: 1.5;
}

body.fused-whmcs .account-user-permission-picker {
    margin-bottom: 1.25rem;
}

body.fused-whmcs .account-permission-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.fused-whmcs .account-permission-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-radius: 0.625rem;
    background: var(--fused-surface);
}

body.fused-whmcs .account-permission-group h4 {
    margin: 0;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.35;
}

body.fused-whmcs .account-permission-options {
    display: grid;
}

.fused-user-management-heading,
.fused-user-invite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fused-user-management-heading {
    justify-content: space-between;
    margin-bottom: 1rem;
}

body.fused-whmcs .account-permission-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--fused-text);
    cursor: pointer;
}

body.fused-whmcs .account-permission-option + .account-permission-option {
    border-top: 1px solid var(--fused-border);
}

body.fused-whmcs .account-permission-option:hover {
    background: rgba(var(--fused-cyan-rgb), 0.055);
}

body.fused-whmcs .account-permission-option .form-check-input {
    position: static;
    margin: 0.2rem 0 0;
}

body.fused-whmcs .account-permission-option strong,
body.fused-whmcs .account-permission-option small {
    display: block;
}

body.fused-whmcs .account-permission-option strong {
    color: var(--fused-text);
    font-size: 0.875rem;
    line-height: 1.35;
}

body.fused-whmcs .account-permission-option small {
    margin-top: 0.2rem;
    color: var(--fused-muted);
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    body.fused-whmcs .account-permission-groups {
        grid-template-columns: 1fr;
    }
}

/* Bootstrap's "custom file" input (ticket/reply attachments) is entirely
   unstyled by us — plain white "Choose file" box + light-gray "Browse"
   pseudo-button — same untouched-vendor-white pattern as the DataTables
   search box and the Generate Password modal earlier. */
body.fused-whmcs .custom-file-label {
    background-color: var(--fused-surface);
    color: var(--fused-text);
    border-color: var(--fused-border-strong);
}

body.fused-whmcs .custom-file-label::after {
    background-color: var(--fused-surface-soft);
    color: var(--fused-muted);
    border-left-color: var(--fused-border-strong);
}

body.fused-whmcs .custom-file-input:focus ~ .custom-file-label {
    border-color: rgba(var(--fused-purple-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--fused-purple-rgb), 0.1);
}

/* Ticket view: "Ticket Information" + "Custom Fields" sidebar cards get
   reflowed (via viewticket.tpl's script) into one clean row of fields above
   the ticket instead of a narrow stacked sidebar. */
body.fused-whmcs .fused-ticket-info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    overflow: hidden;
}

body.fused-whmcs .fused-ticket-info-row > div {
    flex: 1 1 10rem;
    padding: 0.85rem 1.25rem;
    border-right: 1px solid var(--fused-border);
    border-bottom: 1px solid var(--fused-border);
    color: var(--fused-text);
}

body.fused-whmcs .fused-ticket-info-row > div:last-child {
    border-right: 0;
}

body.fused-whmcs .fused-ticket-info-row .title {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--fused-muted);
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Ticket heading: subject as a large title with Reply/Close beside it,
   replacing the old "View Ticket #X" / "Subject: X" / "Ticket ID: #X" stack
   — the info row above already carries the ticket ID and the subject reads
   fine as the page's real title. */
body.fused-whmcs .fused-ticket-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body.fused-whmcs .fused-ticket-subject {
    margin: 0;
    color: var(--fused-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.fused-whmcs .fused-ticket-heading .ticket-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

/* CC Recipients moves from the sidebar to right above the reply's submit
   button (also via viewticket.tpl's script) — same card look, just relocated. */
body.fused-whmcs .fused-cc-recipients-inline {
    margin: 0 0 1.5rem;
}

@media (max-width: 575.98px) {
    body.fused-whmcs .fused-ticket-info-row > div {
        flex: 1 1 50%;
    }
}

/* Ticket thread as chat bubbles: the client's own replies (the viewer's own
   words) sit right in an accent bubble, staff/support replies sit left in a
   neutral one — vendor's ".ticket-reply.staff" class already tells the two
   apart, this just gives that distinction a side and a shape instead of the
   flat, undifferentiated divided list it ships as. */
body.fused-whmcs .view-ticket .card-body {
    border-bottom: 0;
    padding: 0.35rem 1.5rem;
}

body.fused-whmcs .view-ticket .card-body:first-child {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fused-border);
}

body.fused-whmcs .view-ticket .ticket-reply {
    max-width: 82%;
    margin: 0.65rem 0;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) {
    margin-left: auto;
}

body.fused-whmcs .view-ticket .ticket-reply.staff {
    margin-right: auto;
}

body.fused-whmcs .view-ticket .posted-by {
    background: none;
    padding: 0 0.4rem 0.3rem;
    font-size: 0.78rem;
    color: var(--fused-muted);
}

body.fused-whmcs .view-ticket .posted-by .requestor-badge {
    display: inline-flex;
    float: none !important;
    align-items: center;
    margin-left: 0.5rem;
    white-space: nowrap;
    vertical-align: middle;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .posted-by {
    text-align: right;
}

body.fused-whmcs .view-ticket .message {
    border-radius: 1.1rem;
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-whmcs .view-ticket .ticket-reply.staff .message {
    border-bottom-left-radius: 0.3rem;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message {
    background: #7e22ce;
    color: #fff !important;
    border-bottom-right-radius: 0.3rem;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message p,
body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message li,
body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message blockquote {
    color: #fff !important;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message a {
    color: #fff;
    text-decoration: underline;
}

body.fused-whmcs .view-ticket .attachments {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    font-size: 0.78rem;
}

body.fused-whmcs .view-ticket .ticket-reply.staff .attachments {
    border-top: 1px dashed var(--fused-border);
}

body.fused-whmcs .view-ticket .attachment-list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.55rem 0 0;
    padding: 0;
}

body.fused-whmcs .view-ticket .attachment-list li {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 0;
}

body.fused-whmcs .view-ticket .attachment-list li > a,
body.fused-whmcs .view-ticket .attachment-list li > span {
    display: block;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

body.fused-whmcs .view-ticket .attachment-list li span {
    display: flex;
    max-width: 22rem;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.12);
}

body.fused-whmcs .view-ticket .ticket-reply.staff .attachment-list li span {
    border-color: var(--fused-border);
    background: var(--fused-surface);
}

body.fused-whmcs .view-ticket .attachment-list li figure {
    flex: 0 0 auto;
    width: 1.8rem;
    margin: 0;
    background: transparent;
    color: currentColor;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
}

body.fused-whmcs .view-ticket .attachment-list .caption {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

body.fused-whmcs .view-ticket .attachment-list a:hover .caption,
body.fused-whmcs .view-ticket .attachment-list a:focus-visible .caption {
    text-decoration: underline;
}

/* Latest-ticket conversation follows the client through the portal while
   keeping the full ticket view available for attachments and history. */
.fused-ticket-chat {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
}

.fused-ticket-chat-trigger {
    display: inline-flex;
    min-height: 3.15rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem 0.55rem 0.6rem;
    border: 1px solid rgba(var(--fused-cyan-rgb), 0.45);
    border-radius: 999px;
    background: var(--fused-surface);
    color: var(--fused-text);
    font-weight: 700;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.fused-ticket-chat-trigger:hover,
.fused-ticket-chat-trigger:focus-visible,
.fused-ticket-chat.is-open .fused-ticket-chat-trigger {
    border-color: var(--fused-cyan);
    color: var(--fused-text);
}

.fused-ticket-chat-trigger-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--fused-cyan);
    color: #042f32;
}

.fused-ticket-chat-panel {
    position: absolute;
    right: 0;
    bottom: 4.15rem;
    display: flex;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(35rem, calc(100vh - 7rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fused-border-strong);
    border-radius: 0.9rem;
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.36);
}

.fused-ticket-chat-panel[hidden] {
    display: none;
}

.fused-ticket-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--fused-border);
}

.fused-ticket-chat-heading {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.fused-ticket-chat-heading strong {
    font-size: 1rem;
}

.fused-ticket-chat-heading span {
    overflow: hidden;
    color: var(--fused-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-ticket-chat-close {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fused-muted);
    cursor: pointer;
}

.fused-ticket-chat-close:hover,
.fused-ticket-chat-close:focus-visible {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

.fused-ticket-chat-messages {
    display: flex;
    min-height: 12rem;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding: 1rem;
    overscroll-behavior: contain;
}

.fused-ticket-chat-message {
    width: fit-content;
    max-width: 88%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.8rem;
    background: var(--fused-surface-soft);
}

.fused-ticket-chat-message.is-staff {
    align-self: flex-start;
    border-bottom-left-radius: 0.2rem;
}

.fused-ticket-chat-message.is-staff .fused-ticket-chat-message-meta strong {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(var(--fused-cyan-rgb), 0.45);
    border-radius: 999px;
    background: rgba(var(--fused-cyan-rgb), 0.12);
    color: var(--fused-cyan);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
}

.fused-ticket-chat-message.is-client {
    align-self: flex-end;
    border-bottom-right-radius: 0.2rem;
    background: #7e22ce;
    color: #fff;
}

.fused-ticket-chat-message.is-third-party {
    align-self: flex-end;
    border-bottom-right-radius: 0.2rem;
    background: #155e75;
    color: #fff;
}

.fused-ticket-chat-message.is-third-party .fused-ticket-chat-message-body {
    color: #fff !important;
}

.fused-ticket-chat-message.is-client .fused-ticket-chat-message-body {
    color: #fff !important;
}

.fused-ticket-chat-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.66rem;
}

.fused-ticket-chat-message-meta time {
    color: inherit;
    opacity: 0.62;
}

.fused-ticket-chat-message-body {
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    line-height: 1.45;
}

.fused-ticket-chat-attachments {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid currentColor;
    font-size: 0.7rem;
}

.fused-ticket-chat-attachments a {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    overflow-wrap: anywhere;
    opacity: 0.82;
}

.fused-ticket-chat-attachments a:hover,
.fused-ticket-chat-attachments a:focus-visible {
    color: inherit;
    opacity: 1;
}

.fused-ticket-chat-empty {
    display: grid;
    min-height: 10rem;
    place-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 1rem;
    color: var(--fused-muted);
    text-align: center;
}

.fused-ticket-chat-empty i {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    background: rgba(var(--fused-cyan-rgb), 0.12);
    color: var(--fused-cyan);
    font-size: 1rem;
}

.fused-ticket-chat-empty strong {
    color: var(--fused-text);
    font-size: 0.9rem;
}

.fused-ticket-chat-empty span {
    max-width: 17rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.fused-ticket-chat-footer {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--fused-border);
}

.fused-ticket-chat-reply {
    display: grid;
    gap: 0.55rem;
}

.fused-ticket-chat-reply textarea {
    width: 100%;
    min-height: 4.75rem;
    max-height: 10rem;
    resize: vertical;
    border: 1px solid var(--fused-border-strong);
    border-radius: 0.55rem;
    background: var(--fused-bg);
    color: var(--fused-text);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
}

.fused-ticket-chat-reply textarea:focus {
    border-color: var(--fused-cyan);
    box-shadow: 0 0 0 0.18rem rgba(var(--fused-cyan-rgb), 0.16);
    outline: 0;
}

.fused-ticket-chat-upload-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.fused-ticket-chat-upload {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--fused-cyan);
    font-size: 0.7rem;
    font-weight: 650;
    cursor: pointer;
}

.fused-ticket-chat-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.fused-ticket-chat-upload:focus-within {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 0.2rem;
}

.fused-ticket-chat-upload-summary {
    min-width: 0;
    overflow: hidden;
    color: var(--fused-muted);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-ticket-chat-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fused-ticket-chat-reply-status {
    min-height: 1.1rem;
    color: var(--fused-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.fused-ticket-chat-reply-status.is-error {
    color: #fca5a5;
}

.fused-ticket-chat-reply-status.is-success {
    color: #86efac;
}

.fused-ticket-chat-full-link {
    justify-self: end;
    color: var(--fused-cyan);
    font-size: 0.72rem;
    font-weight: 650;
}

@media (max-width: 575.98px) {
    .fused-ticket-chat {
        right: 0.6rem;
        bottom: 0.6rem;
    }

    .fused-ticket-chat-panel {
        width: calc(100vw - 1.2rem);
    }
}

@media (max-width: 575.98px), (max-height: 575.98px) {
    .fused-ticket-chat-panel {
        max-height: 40vh;
        max-height: 40dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fused-ticket-chat-messages {
        min-height: 0;
    }
}

/* Replies posted in by email drag their whole quoted thread history along
   with them ("On ... Fused Support <support@fused.com> wrote: > ...") —
   viewticket.tpl's script finds that marker line and moves everything from
   there on into this collapsed-by-default block. `currentColor` for both
   the rule and the text so it dims correctly whether it lands in a purple
   client bubble or a neutral staff one, rather than picking one fixed color
   that only reads well against one of the two backgrounds. */
body.fused-whmcs .view-ticket .fused-quoted-toggle,
body.fused-whmcs .fused-ticket-chat .fused-quoted-toggle {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.65;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

body.fused-whmcs .view-ticket .fused-quoted-toggle:hover,
body.fused-whmcs .view-ticket .fused-quoted-toggle:focus,
body.fused-whmcs .fused-ticket-chat .fused-quoted-toggle:hover,
body.fused-whmcs .fused-ticket-chat .fused-quoted-toggle:focus {
    opacity: 1;
}

body.fused-whmcs .view-ticket .fused-quoted-text,
body.fused-whmcs .fused-ticket-chat .fused-quoted-text {
    margin-top: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid currentColor;
    opacity: 0.65;
    font-size: 0.85rem;
}

body.fused-whmcs .view-ticket .fused-quoted-text.fused-quoted-collapsed,
body.fused-whmcs .fused-ticket-chat .fused-quoted-text.fused-quoted-collapsed {
    display: none;
}

@media (max-width: 575.98px) {
    body.fused-whmcs .view-ticket .ticket-reply {
        max-width: 100%;
    }
}

body.fused-whmcs .alert {
    border: 1px solid var(--fused-border);
    border-radius: 0.65rem;
    box-shadow: none;
}

/* Severity tints match the badge palette used everywhere else (soft rgba
   fill + matching border, full-strength text) instead of Bootstrap's
   light-mode alert colors, which read as a stray pale box on a dark card. */
body.fused-whmcs .alert-info {
    background: rgba(var(--fused-cyan-rgb), 0.1);
    border-color: rgba(var(--fused-cyan-rgb), 0.35);
    color: var(--fused-text);
}

body.fused-whmcs .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--fused-text);
}

body.fused-whmcs .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--fused-text);
}

body.fused-whmcs .alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--fused-text);
}

/* Announcement excerpt callouts: vendor styles the <article> with a hardcoded
   light-mode #f5f5f5 background; our global text color is light-on-dark, so on
   this one component it became near-invisible light text on a near-white box. */
body.fused-whmcs .announcements .announcement article {
    margin: 0;
    padding: 1rem 1.25rem;
    background-color: var(--fused-surface-soft);
    border-left: 4px solid rgba(var(--fused-cyan-rgb), 0.5);
    border-radius: 0 0.4rem 0.4rem 0;
    color: var(--fused-text);
    line-height: 1.6;
}

body.fused-whmcs .announcements .announcement article > :first-child {
    margin-top: 0;
}

body.fused-whmcs .announcements .announcement article > :last-child {
    margin-bottom: 0;
}

/* The list itself: default markup is a plain stack of full-size <h1>s with
   no separation between entries and a Bootstrap .text-muted date row, which
   fails contrast on our dark surface same as everywhere else it shows up. */
body.fused-whmcs .announcements .announcement {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--fused-border);
}

body.fused-whmcs .announcements .announcement:first-child {
    padding-top: 0;
}

body.fused-whmcs .announcements .announcement:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body.fused-whmcs .announcements .announcement h1 {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.fused-whmcs .announcements .announcement h1 a {
    color: var(--fused-text);
    text-decoration: none;
}

body.fused-whmcs .announcements .announcement h1 a:hover,
body.fused-whmcs .announcements .announcement h1 a:focus {
    color: var(--fused-cyan);
}

body.fused-whmcs .announcements .announcement .list-inline {
    margin: 0 0 0.9rem;
}

body.fused-whmcs .announcements .announcement .text-muted {
    color: var(--fused-muted) !important;
    font-size: 0.85rem;
}

/* Single-announcement page: same Bootstrap .text-muted contrast fix, plus
   comfortable reading measure and line-height for the full post body, and
   safety for any image an admin drops into the announcement text. */
body.fused-whmcs .fused-announcement-detail .text-muted {
    color: var(--fused-muted) !important;
}

body.fused-whmcs .fused-announcement-detail .py-5 {
    max-width: 48rem;
    line-height: 1.7;
}

body.fused-whmcs .fused-announcement-detail .py-5 img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Shared "sign in to see this" empty state for both the listing and a
   single-announcement permalink when a visitor isn't logged in. */
.fused-locked-notice .card-body {
    padding: 3rem 1.5rem;
}

.fused-locked-icon {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--fused-cyan-rgb), 0.12);
    color: var(--fused-cyan);
    font-size: 1.3rem;
}

.fused-locked-copy {
    max-width: 28rem;
    margin: 0 auto 1.25rem;
    color: var(--fused-muted);
}

body.fused-whmcs .badge,
body.fused-whmcs .label {
    border-radius: 999px;
    font-weight: 650;
}

/* Status pills: soft tinted chips instead of solid saturated fills, so text meets
   contrast targets against the dark surface (solid `.label-success` etc. from the
   vendor theme is white-on-#5cb85c, ~2.5:1 — well under WCAG AA). */
body.fused-whmcs .label-success,
body.fused-whmcs .badge-success,
body.fused-whmcs .status-active,
body.fused-whmcs .status-open,
body.fused-whmcs .status-completed,
body.fused-whmcs .status-paid,
body.fused-whmcs .status-accepted,
body.fused-whmcs .requestor-type-owner {
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

body.fused-whmcs .label-danger,
body.fused-whmcs .badge-danger,
body.fused-whmcs .status-pending,
body.fused-whmcs .status-unpaid,
body.fused-whmcs .status-inprogress {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}

body.fused-whmcs .label-warning,
body.fused-whmcs .badge-warning,
body.fused-whmcs .status-pending-transfer,
body.fused-whmcs .status-suspended,
body.fused-whmcs .status-refunded,
body.fused-whmcs .status-customer-reply,
body.fused-whmcs .status-pending-registration,
body.fused-whmcs .status-redemption,
body.fused-whmcs .status-grace {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}

body.fused-whmcs .label-default,
body.fused-whmcs .badge-secondary,
body.fused-whmcs .badge-light,
body.fused-whmcs .badge-dark,
body.fused-whmcs .status-terminated,
body.fused-whmcs .status-closed,
body.fused-whmcs .status-cancelled,
body.fused-whmcs .status-collections,
body.fused-whmcs .status-expired,
body.fused-whmcs .status-transferred-away {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

body.fused-whmcs .label-info,
body.fused-whmcs .badge-info,
body.fused-whmcs .requestor-type-operator,
body.fused-whmcs .status-onhold,
body.fused-whmcs .status-payment-pending,
body.fused-whmcs .status-delivered {
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
}

body.fused-whmcs .status-answered {
    border: 1px solid rgba(var(--fused-purple-rgb), 0.4);
    background: rgba(var(--fused-purple-rgb), 0.16);
    color: #d8b4fe;
}

body.fused-whmcs .status-fraud,
body.fused-whmcs .status-lost,
body.fused-whmcs .status-dead {
    border: 1px solid var(--fused-border-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--fused-muted);
}

/* The pill colors above (including the renewal cart's "Renewing in X days"
   badge, which is a .label-warning) were tuned for the dark surface only —
   light pastel text that reads fine on near-black is close to invisible on
   the light theme's white/near-white surfaces. Same dark-ink pattern
   already used for .status-pill-* in server-status.css. */
html[data-fused-theme="light"] body.fused-whmcs .label-success,
html[data-fused-theme="light"] body.fused-whmcs .badge-success,
html[data-fused-theme="light"] body.fused-whmcs .status-active,
html[data-fused-theme="light"] body.fused-whmcs .status-open,
html[data-fused-theme="light"] body.fused-whmcs .status-completed,
html[data-fused-theme="light"] body.fused-whmcs .status-paid,
html[data-fused-theme="light"] body.fused-whmcs .status-accepted,
html[data-fused-theme="light"] body.fused-whmcs .requestor-type-owner {
    color: #166534;
}

html[data-fused-theme="light"] body.fused-whmcs .label-danger,
html[data-fused-theme="light"] body.fused-whmcs .badge-danger,
html[data-fused-theme="light"] body.fused-whmcs .status-pending,
html[data-fused-theme="light"] body.fused-whmcs .status-unpaid,
html[data-fused-theme="light"] body.fused-whmcs .status-inprogress {
    color: #991b1b;
}

html[data-fused-theme="light"] body.fused-whmcs .label-warning,
html[data-fused-theme="light"] body.fused-whmcs .badge-warning,
html[data-fused-theme="light"] body.fused-whmcs .status-pending-transfer,
html[data-fused-theme="light"] body.fused-whmcs .status-suspended,
html[data-fused-theme="light"] body.fused-whmcs .status-refunded,
html[data-fused-theme="light"] body.fused-whmcs .status-customer-reply,
html[data-fused-theme="light"] body.fused-whmcs .status-pending-registration,
html[data-fused-theme="light"] body.fused-whmcs .status-redemption,
html[data-fused-theme="light"] body.fused-whmcs .status-grace {
    color: #92400e;
}

html[data-fused-theme="light"] body.fused-whmcs .label-default,
html[data-fused-theme="light"] body.fused-whmcs .badge-secondary,
html[data-fused-theme="light"] body.fused-whmcs .badge-light,
html[data-fused-theme="light"] body.fused-whmcs .badge-dark,
html[data-fused-theme="light"] body.fused-whmcs .status-terminated,
html[data-fused-theme="light"] body.fused-whmcs .status-closed,
html[data-fused-theme="light"] body.fused-whmcs .status-cancelled,
html[data-fused-theme="light"] body.fused-whmcs .status-collections,
html[data-fused-theme="light"] body.fused-whmcs .status-expired,
html[data-fused-theme="light"] body.fused-whmcs .status-transferred-away {
    color: #334155;
}

html[data-fused-theme="light"] body.fused-whmcs .label-info,
html[data-fused-theme="light"] body.fused-whmcs .badge-info,
html[data-fused-theme="light"] body.fused-whmcs .requestor-type-operator,
html[data-fused-theme="light"] body.fused-whmcs .status-onhold,
html[data-fused-theme="light"] body.fused-whmcs .status-payment-pending,
html[data-fused-theme="light"] body.fused-whmcs .status-delivered {
    color: #0e7490;
}

html[data-fused-theme="light"] body.fused-whmcs .status-answered {
    color: #6b21a8;
}

body.fused-whmcs .dropdown-item {
    color: var(--fused-text);
}

body.fused-whmcs .dropdown-item:hover,
body.fused-whmcs .dropdown-item:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-whmcs .sidebar .card {
    box-shadow: none;
}

body.fused-whmcs .sidebar .card-header {
    border-bottom: 1px solid var(--fused-border);
    padding: 0.75rem 1.1rem;
}

body.fused-whmcs .sidebar .card-title {
    font-size: 0.9rem;
    font-weight: 650;
}

body.fused-whmcs .sidebar .card-body {
    padding: 0.85rem 1.1rem;
}

body.fused-whmcs .sidebar .card-sidebar:first-of-type address,
body.fused-whmcs .sidebar .card-sidebar:first-of-type .card-body p {
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

body.fused-whmcs .sidebar .card-sidebar:first-of-type .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
}

/* Sidebar billing actions inherit the rail's cyan link color, which makes
   the green Pay All action read like blue-on-green. Give sidebar buttons their
   own compact action treatment and strong contrast. */
body.fused-whmcs .sidebar .card .btn-success,
body.fused-whmcs .sidebar .card .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 0.65rem;
    color: #042f32 !important;
    font-weight: 700;
    opacity: 1 !important;
    text-shadow: none;
}

body.fused-whmcs .sidebar .card .btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 0.65rem;
    color: var(--fused-text) !important;
}

body.fused-whmcs .pagination .page-link {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-muted);
}

body.fused-whmcs .pagination .page-item.active .page-link {
    border-color: #00aeb3;
    background: var(--fused-cyan);
    color: #042f32;
}

#footer.footer {
    border: 0;
    border-top: 1px solid var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-muted);
    padding: 1.25rem 0;
}

.fused-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#footer.footer .copyright {
    color: var(--fused-muted);
    font-size: 0.75rem;
}

.fused-footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
}

#footer.footer .fused-footer-links a,
#footer.footer .fused-footer-links .btn-link {
    margin: 0;
    padding: 0;
    color: var(--fused-muted);
    font-size: 0.75rem;
}

#footer.footer .fused-footer-links a:hover,
#footer.footer .fused-footer-links .btn-link:hover {
    color: var(--fused-text);
}

.popover,
.tooltip-inner {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.popover {
    border-color: var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.popover-user-notifications {
    border-color: var(--fused-border);
}

.popover-user-notifications ul li {
    border-bottom-color: var(--fused-border);
}

.popover-user-notifications ul li a {
    color: var(--fused-text);
}

.popover-user-notifications ul li a:hover {
    background-color: var(--fused-surface-soft);
}

.popover-user-notifications ul li.none {
    color: var(--fused-muted);
}

.popover-user-notifications ul li i.fas.fa-info-circle,
.popover-user-notifications ul li i.far.fa-info-circle {
    color: #0891b2;
}

.popover-user-notifications ul li i.fas.fa-exclamation-triangle,
.popover-user-notifications ul li i.far.fa-exclamation-triangle {
    color: #d97706;
}

.popover-user-notifications ul li i.fas.fa-exclamation-circle,
.popover-user-notifications ul li i.far.fa-exclamation-circle {
    color: #dc2626;
}

.popover-user-notifications ul li i.fas.fa-check-circle,
.popover-user-notifications ul li i.far.fa-check-circle {
    color: #16a34a;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-info-circle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-info-circle {
    color: #67e8f9;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-exclamation-triangle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-exclamation-triangle {
    color: #fcd34d;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-exclamation-circle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-exclamation-circle {
    color: #fca5a5;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-check-circle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-check-circle {
    color: #86efac;
}

.client-alerts a,
.client-alerts li {
    color: var(--fused-text);
}

/* Account menu popover — modeled after Tailwind Catalyst's user-menu dropdown
   (icon + label rows, generous hit area, quiet hover, a divider before the
   destructive/exit action) instead of the previous scattered icon buttons. */
.fused-account-menu {
    margin: 0;
    padding: 0.4rem;
    list-style: none;
}

body.fused-whmcs .fused-account-menu li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--fused-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

body.fused-whmcs .fused-account-menu li a:hover,
body.fused-whmcs .fused-account-menu li a:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
    text-decoration: none;
}

.fused-account-menu li a i {
    width: 1rem;
    color: var(--fused-muted);
    text-align: center;
}

.fused-account-menu-divider {
    height: 1px;
    margin: 0.35rem 0.6rem;
    background: var(--fused-border);
}

::selection {
    background: rgba(var(--fused-purple-rgb), 0.65);
    color: #ffffff;
}

/* WHMCS lays its page sidebar (Your Info/Contacts/Shortcuts, etc.) and main
   content out with plain col-lg-4/col-xl-3 + col-lg-8/col-xl-9, sized as if the
   full viewport were available. Our fixed nav permanently eats
   --fused-sidebar-width (320px) of that before Bootstrap's grid ever sees it, so
   its lg/xl breakpoints kick in ~320px too early and the two columns get
   squeezed into an unreadably narrow sliver. Shift those breakpoints out by the
   nav's width so the split only happens once there's actually room for it. */
@media (min-width: 992px) and (max-width: 1311.98px) {
    body.fused-whmcs #main-body > .container > .row > .col-lg-4.col-xl-3,
    body.fused-whmcs #main-body > .container > .row > .col-lg-8.col-xl-9.primary-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1312px) and (max-width: 1519.98px) {
    body.fused-whmcs #main-body > .container > .row > .col-lg-4.col-xl-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    body.fused-whmcs #main-body > .container > .row > .col-lg-8.col-xl-9.primary-content {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

@media (min-width: 1600px) {
    body.fused-whmcs #main-body > .container,
    #header.fused-topbar > .container {
        width: 100%;
        max-width: none;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    body.fused-whmcs #main-body > .container > .row > .col-lg-4.col-xl-3 {
        flex: 0 0 22rem;
        max-width: 22rem;
    }

    body.fused-whmcs #main-body > .container > .row > .col-lg-8.col-xl-9.primary-content {
        flex: 1 1 0;
        max-width: calc(100% - 22rem);
    }
}

/* Auth pages (login, register, password reset) skip the dashboard chrome
   entirely — no fixed nav, no topbar, no breadcrumb — and render inside this
   centered full-bleed shell instead. See header.tpl / footer.tpl $isAuthPage. */
.fused-auth-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--fused-bg);
    padding: 6rem 1.5rem 3rem;
}

.fused-auth-blob {
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
}

.fused-auth-blob-purple {
    top: -12rem;
    left: -12rem;
    width: 34rem;
    height: 34rem;
    background: rgba(var(--fused-purple-rgb), 0.22);
}

.fused-auth-blob-cyan {
    right: -12rem;
    bottom: -12rem;
    width: 32rem;
    height: 32rem;
    background: rgba(var(--fused-cyan-rgb), 0.16);
}

.fused-auth-brand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-bottom: 2rem;
}

.fused-auth-brand .fused-logo-svg {
    height: 4.5rem;
    width: auto;
}

/* Logo is now inlined (includes/fused-logo.tpl) instead of <img src>,
   specifically so this can reach the wordmark fill directly — an <img> is
   opaque to page CSS, which previously meant the best we could do in light
   theme was a drop-shadow halo around the white text. This recolors it
   properly instead. */
html[data-fused-theme="light"] .fused-auth-brand .fused-logo-svg .three-3 {
    fill: #000000;
}

.fused-auth-theme-toggle.fused-auth-theme-toggle {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 2;
}

.fused-auth-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
}

.fused-auth-page-clientregister .fused-auth-main {
    max-width: 56rem;
}

.fused-auth-main .card {
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.fused-auth-main > .card > .card-body,
.fused-auth-main > form > .card > .card-body {
    padding: 2.5rem;
}

.fused-auth-main .card-title,
.fused-auth-main .h3 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fused-auth-main > .card > .card-footer,
.fused-auth-main > form > .card > .card-footer {
    padding: 1.25rem 2.5rem;
    background: var(--fused-surface-soft);
}

/* Google's rendered button ({$provider.code}) can't be restyled — it's their
   own branded widget — so instead of leaving it floating below the card (its
   original spot, right after the form closes), it's pulled in as a second
   footer segment with a divider, reading as one cohesive card. */
.fused-auth-main .card-footer + .card-footer.fused-auth-social {
    border-top: 1px solid var(--fused-border);
}

.fused-auth-main .fused-auth-social .social-signin-btns {
    display: flex;
    justify-content: center;
}

.fused-auth-main .fused-auth-social .providerLinkingFeedback:empty {
    display: none;
}

/* The "Sign Up" divider above the register form (vendor's #registration
   .sub-heading) is a classic "line with text cut into it" trick: a full-width
   border-top plus a span shifted up to straddle it, with the span's own
   background painted over the line to mask the segment behind the text. That
   masking color is hardcoded white, so on our dark background it didn't mask
   anything — the line just ran straight through the text instead of being
   interrupted by it, reading as a stray rule "jetting out" either side. */
#registration .sub-heading {
    border-top-color: var(--fused-border);
}

#registration .sub-heading span {
    background-color: var(--fused-bg);
    color: var(--fused-text);
    font-size: 1.35rem;
    font-weight: 650;
}

.fused-auth-back-link {
    display: block;
    margin-top: 1.5rem;
    color: var(--fused-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.fused-auth-back-link:hover,
.fused-auth-back-link:focus {
    color: var(--fused-text);
    text-decoration: none;
}

.fused-auth-back-link > i {
    margin-right: 0.4rem;
}

@media (max-width: 575.98px) {
    .fused-auth-shell {
        padding: 5.5rem 1rem 2rem;
    }

    .fused-auth-main > .card > .card-body,
    .fused-auth-main > form > .card > .card-body {
        padding: 1.75rem;
    }

    .fused-auth-main > .card > .card-footer,
    .fused-auth-main > form > .card > .card-footer {
        padding: 1rem 1.75rem;
    }
}

@media (max-width: 1199.98px) {
    /* Scoped to the topbar trigger only — the sidebar's own account button
       (.fused-sidebar-account-button) has the whole rail's width to work
       with and should keep showing the name. */
    .fused-topbar-actions .fused-account-name {
        display: none;
    }

    .fused-topbar-actions .fused-account-button {
        padding-right: 0.35rem;
    }
}

@media (max-width: 991.98px) {
    .fused-sidebar {
        width: min(18rem, 86vw);
        transform: translateX(-100%);
        transition: transform 180ms ease;
    }

    .fused-sidebar-close,
    .fused-menu-button {
        display: inline-flex;
    }

    .fused-sidebar-open {
        overflow: hidden;
    }

    .fused-sidebar-open .fused-sidebar {
        transform: translateX(0);
    }

    .fused-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1039;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        backdrop-filter: blur(3px);
    }

    .fused-sidebar-open .fused-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    #header.fused-topbar,
    body.fused-whmcs > .alert,
    body.fused-whmcs > .network-issue,
    body.fused-whmcs > .client-alert,
    body.fused-whmcs > .verify-email,
    body.fused-whmcs #main-body,
    #footer.footer {
        margin-left: 0;
    }

    #header.fused-topbar {
        width: 100%;
    }

    .fused-sidebar[aria-hidden="true"] {
        visibility: hidden;
    }

    .fused-sidebar[aria-hidden="false"] {
        visibility: visible;
    }
}

@media (max-width: 575.98px) {
    #header.fused-topbar {
        padding: 0;
    }

    .fused-topbar-actions {
        gap: 0;
    }

    .fused-topbar-actions .fused-account-button,
    .fused-topbar-actions > .fused-icon-button:last-child {
        display: none;
    }

    body.fused-whmcs #main-body {
        padding: 1.25rem 0 2rem;
    }

    body.fused-whmcs #main-body > .container,
    #footer > .container {
        width: min(100% - 1.25rem, 80rem);
    }

    .fused-topbar-breadcrumb .breadcrumb-item:not(:nth-last-child(-n+2)) {
        display: none;
    }

    .fused-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .fused-page-heading .btn {
        align-self: flex-start;
    }

    .fused-summary-grid .tile {
        min-height: 8.75rem;
        padding: 1rem;
    }

    .fused-summary-grid .tile .stat {
        font-size: 1.55rem;
    }

    .fused-footer-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .fused-footer-links {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .fused-sidebar,
    .fused-topbar,
    .fused-sidebar-backdrop,
    #footer.footer {
        display: none !important;
    }

    #main-body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }
}

/* Service-specific shortcuts: Mail MX1 gets an email-only sidebar; ordinary
   services do not inherit email links. S1000 remains intentionally unchanged. */
body.fused-service-email .sidebar .card-sidebar .list-group-item[menuItemName]:not([menuItemName*="Email"]):not([menuItemName*="email"]) {
    display: none !important;
}

body.fused-service-non-email .sidebar .card-sidebar .list-group-item[menuItemName*="Email"],
body.fused-service-non-email .sidebar .card-sidebar .list-group-item[menuItemName*="email"] {
    display: none !important;
}

/* cPanel services away from S1000 are hosting-only in this portal. Keep the
   three account-management email shortcuts on S1000 and Mail MX1 only. */
body.fused-service-non-email #cPanelQuickShortcutsPanel #cPanelEmailAccounts,
body.fused-service-non-email #cPanelQuickShortcutsPanel #cPanelForwarders,
body.fused-service-non-email #cPanelQuickShortcutsPanel #cPanelAutoResponders {
    display: none !important;
}

/* Mail MX1 uses the cPanel module's Quick Shortcuts output, so keep its
   email tools while removing hosting-only shortcuts from the product view. */
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelFileManager,
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelBackup,
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelDomains,
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelCronJobs,
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelMySQLDatabases,
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelPhpMyAdmin,
body.fused-service-email #cPanelQuickShortcutsPanel #cPanelAwstats {
    display: none !important;
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fused-border);
    border-radius: 0.75rem;
    background: var(--fused-surface-soft);
    color: var(--fused-cyan);
    font-size: 1.25rem;
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut > a {
    color: var(--fused-cyan);
    text-decoration: none;
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut > a:hover .fused-email-shortcut-icon,
body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut > a:focus .fused-email-shortcut-icon {
    border-color: var(--fused-cyan);
    background: rgba(var(--fused-cyan-rgb), 0.12);
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut-groups {
    row-gap: 1.25rem;
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut-category {
    text-align: left;
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut-category + .fused-email-shortcut-category {
    padding-top: 1.25rem;
    border-top: 1px solid var(--fused-border);
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut-category-title {
    margin: 0 0 1rem;
    color: var(--fused-text);
    font-size: 1rem;
    font-weight: 700;
}

body.fused-service-email #cPanelQuickShortcutsPanel .fused-email-shortcut-category-grid {
    text-align: center;
}

/* Mail MX1 exposes account quantity through usage billing. The generic cPanel
   usage and billing summaries duplicate that information and hosting detail. */
body.fused-service-email #cPanelUsagePanel,
body.fused-service-email #cPanelBillingOverviewPanel {
    display: none !important;
}

body.fused-service-email .fused-email-metrics {
    text-align: left;
}

/* The invoice is a standalone WHMCS document, so it opts into the same Veil
   theme tokens without inheriting the portal shell. */
body.fused-invoice-page {
    min-height: 100vh;
    padding: 1rem 0 2rem;
    background: var(--fused-bg) !important;
    color: var(--fused-text);
    --fused-invoice-logo-text: #ffffff;
}

html[data-fused-theme="light"] body.fused-invoice-page {
    --fused-invoice-logo-text: #111827;
}

body.fused-invoice-page .fused-invoice-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
}

body.fused-invoice-page .invoice-container {
    max-width: 900px;
    margin: 1rem auto;
    padding: 3.5rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: var(--fused-shadow);
}

body.fused-invoice-page .fused-invoice-logo {
    display: inline-flex;
    margin-bottom: 0.75rem;
}

body.fused-invoice-page .fused-invoice-logo .fused-logo-svg {
    display: block;
    width: auto;
    height: 3.25rem;
}

body.fused-invoice-page .fused-invoice-logo .fused-logo-svg .three-3 {
    fill: var(--fused-invoice-logo-text);
}

body.fused-invoice-page h1,
body.fused-invoice-page h2,
body.fused-invoice-page h3,
body.fused-invoice-page h4,
body.fused-invoice-page h5,
body.fused-invoice-page h6,
body.fused-invoice-page strong,
body.fused-invoice-page label,
body.fused-invoice-page address,
body.fused-invoice-page .card-title,
body.fused-invoice-page .card-subtitle {
    color: var(--fused-text);
}

body.fused-invoice-page address {
    font-style: normal;
}

body.fused-invoice-page .small-text,
body.fused-invoice-page .text-muted {
    color: var(--fused-muted) !important;
}

body.fused-invoice-page hr {
    border-color: var(--fused-border);
}

body.fused-invoice-page .card,
body.fused-invoice-page .panel {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-invoice-page .card-header,
body.fused-invoice-page .panel-heading {
    border-color: var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-invoice-page .card-header.bg-success,
body.fused-invoice-page .card-title.bg-info {
    color: #ffffff !important;
}

body.fused-invoice-page .table,
body.fused-invoice-page .table td,
body.fused-invoice-page .table th {
    border-color: var(--fused-border);
    background: transparent;
    color: var(--fused-text);
}

body.fused-invoice-page .table thead td,
body.fused-invoice-page .table thead th,
body.fused-invoice-page .table td.total-row {
    background: var(--fused-surface-soft) !important;
}

body.fused-invoice-page .form-control,
body.fused-invoice-page .custom-select,
body.fused-invoice-page input,
body.fused-invoice-page select {
    border-color: var(--fused-border-strong);
    background: var(--fused-bg);
    color: var(--fused-text);
}

/* The closed box above is fully ours to style, but the open option list on
   a native <select> is drawn by the OS/browser, not CSS — color-scheme is
   the one lever that reaches it, hinting the browser to use its dark native
   popup chrome instead of always-white. Declared directly on the control
   (not just inherited from :root) since some browsers only honor it there. */
body.fused-invoice-page select {
    color-scheme: dark;
}

html[data-fused-theme="light"] body.fused-invoice-page select {
    color-scheme: light;
}

body.fused-invoice-page .fused-payment-method-form {
    position: relative;
    display: inline-flex;
    width: min(100%, 15rem);
    margin-top: 0.35rem;
}

body.fused-invoice-page .fused-payment-method-form::after {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    color: #67e8f9;
    content: "\f078";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

body.fused-invoice-page .fused-payment-method-select {
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding: 0.6rem 2.5rem 0.6rem 0.85rem;
    border: 1px solid var(--fused-cyan);
    border-radius: 0.55rem;
    background-color: var(--fused-surface-soft);
    background-image: none;
    color: var(--fused-text);
    font-weight: 600;
    cursor: pointer;
    appearance: none;
}

body.fused-invoice-page .fused-payment-method-select:hover {
    border-color: #67e8f9;
    background-color: var(--fused-surface);
}

body.fused-invoice-page .fused-payment-method-select:focus {
    border-color: var(--fused-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
    outline: 0;
}

html[data-fused-theme="light"] body.fused-invoice-page .fused-payment-method-form::after {
    color: #6d28d9;
}

html[data-fused-theme="light"] body.fused-invoice-page .fused-payment-method-select {
    border-color: #7c3aed;
    background-color: #ffffff;
}

@media (max-width: 575.98px) {
    body.fused-invoice-page .fused-payment-method-form {
        width: 100%;
    }
}

body.fused-invoice-page .btn-default {
    border-color: var(--fused-border-strong);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-invoice-page .btn-default:hover,
body.fused-invoice-page .btn-default:focus {
    border-color: var(--fused-cyan);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-invoice-page .invoice-qr-wrapper {
    width: fit-content;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: #ffffff;
}

body.fused-invoice-page > p.text-center a {
    color: var(--fused-cyan);
}

body.fused-invoice-page .payment-btn-container-footer {
    margin-bottom: 1.25rem;
}

@media (max-width: 895px) {
    body.fused-invoice-page .invoice-container {
        margin: 3.75rem 0.75rem 1rem;
        padding: 2rem;
    }
}

@media (max-width: 575.98px) {
    body.fused-invoice-page .invoice-container {
        padding: 1.25rem;
    }

    body.fused-invoice-page .fused-invoice-logo .fused-logo-svg {
        height: 2.75rem;
    }
}

@media print {
    body.fused-invoice-page,
    body.fused-invoice-page .invoice-container,
    body.fused-invoice-page .card,
    body.fused-invoice-page .panel,
    body.fused-invoice-page .card-header,
    body.fused-invoice-page .panel-heading,
    body.fused-invoice-page .table,
    body.fused-invoice-page .table td,
    body.fused-invoice-page .table th,
    body.fused-invoice-page .table thead td,
    body.fused-invoice-page .table thead th,
    body.fused-invoice-page .table td.total-row {
        border-color: #d1d5db !important;
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    body.fused-invoice-page .invoice-container {
        margin: 0 auto;
    }

    body.fused-invoice-page h1,
    body.fused-invoice-page h2,
    body.fused-invoice-page h3,
    body.fused-invoice-page h4,
    body.fused-invoice-page strong,
    body.fused-invoice-page address,
    body.fused-invoice-page .small-text,
    body.fused-invoice-page .text-muted {
        color: #111827 !important;
    }

    body.fused-invoice-page .fused-invoice-logo .fused-logo-svg .three-3 {
        fill: #111827 !important;
    }
}