@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/*
 * VNex.uk Cloud ? shared UI system
 * Used by Admin + Customer panels. Matches Storage Engine card language.
 */
:root {
    --vnex-blue: #4F6EF5;
    --vnex-blue-bright: #7B94F8;
    --vnex-blue-soft: rgba(79, 110, 245, 0.14);
    --vnex-ok: #22c55e;
    --vnex-ok-soft: rgba(34, 197, 94, 0.16);
    --vnex-warn: #f59e0b;
    --vnex-warn-soft: rgba(245, 158, 11, 0.16);
    --vnex-bad: #ef4444;
    --vnex-bad-soft: rgba(239, 68, 68, 0.16);
    --vnex-sidebar: #f4f4f5;
    --vnex-sidebar-border: #e4e4e7;
    --vnex-main: #f4f4f5;
    --vnex-card: #ffffff;
    --vnex-border: #e4e4e7;
    --vnex-text: #1b2539;
    --vnex-muted: #6e7e83;
    --vnex-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --vnex-radius: 16px;
    --vnex-radius-sm: 12px;
    --vnex-on-accent: #ffffff;
    --vnex-ok-text: #15803d;
    --vnex-bad-text: #b91c1c;
    --vnex-warn-text: #b45309;
    /* Module accents (sidebar / chips) — light */
    --vnex-mod-storage: #0369a1;
    --vnex-mod-storage-soft: rgba(3, 105, 161, 0.14);
    --vnex-mod-crm: #0f766e;
    --vnex-mod-crm-soft: rgba(15, 118, 110, 0.14);
    --vnex-mod-hr: #7c3aed;
    --vnex-mod-hr-soft: rgba(124, 58, 237, 0.14);
    --vnex-mod-projects: #4338ca;
    --vnex-mod-projects-soft: rgba(67, 56, 202, 0.14);
    --vnex-mod-home: #475569;
    --vnex-mod-home-soft: rgba(71, 85, 105, 0.12);
    --vnex-mod-business: #c2410c;
    --vnex-mod-business-soft: rgba(194, 65, 12, 0.14);
    --vnex-mod-sales: #1d4ed8;
    --vnex-mod-sales-soft: rgba(29, 78, 216, 0.14);
    --vnex-mod-export: #0e7490;
    --vnex-mod-export-soft: rgba(14, 116, 144, 0.14);
    --vnex-mod-finance: #15803d;
    --vnex-mod-finance-soft: rgba(21, 128, 61, 0.14);
    --vnex-mod-settings: #6d28d9;
    --vnex-mod-settings-soft: rgba(109, 40, 217, 0.14);
    /* Alias for Drive/sidebar chrome (same as vnex-vfm-customer) */
    --vnex-nav-storage: var(--vnex-mod-storage);
    --vnex-nav-crm: var(--vnex-mod-crm);
    --vnex-nav-hr: var(--vnex-mod-hr);
    --vnex-nav-projects: var(--vnex-mod-projects);
    --vnex-nav-home: var(--vnex-mod-home);
    --vnex-nav-business: var(--vnex-mod-business);
    --vnex-nav-sales: var(--vnex-mod-sales);
    --vnex-nav-export: var(--vnex-mod-export);
    --vnex-nav-finance: var(--vnex-mod-finance);
    --vnex-nav-settings: var(--vnex-mod-settings);
}

.dark,
html.dark {
    /* Filament demo ? Zinc midnight */
    --vnex-blue: #60a5fa;
    --vnex-blue-bright: #93c5fd;
    --vnex-blue-soft: rgba(96, 165, 250, 0.16);
    --vnex-ok: #4ade80;
    --vnex-ok-soft: rgba(74, 222, 128, 0.16);
    --vnex-warn: #fbbf24;
    --vnex-warn-soft: rgba(251, 191, 36, 0.16);
    --vnex-bad: #f87171;
    --vnex-bad-soft: rgba(248, 113, 113, 0.16);
    --vnex-sidebar: #09090b;
    --vnex-sidebar-border: #27272a;
    --vnex-main: #09090b;
    --vnex-card: #18181b;
    --vnex-border: #27272a;
    --vnex-text: #fafafa;
    --vnex-muted: #a1a1aa;
    --vnex-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.45);
    --vnex-radius: 14px;
    --vnex-radius-sm: 12px;
    --vnex-on-accent: #ffffff;
    --vnex-ok-text: #86efac;
    --vnex-bad-text: #fecaca;
    --vnex-warn-text: #fde68a;
    /* Module accents — dark */
    --vnex-mod-storage: #38bdf8;
    --vnex-mod-storage-soft: rgba(56, 189, 248, 0.18);
    --vnex-mod-crm: #2dd4bf;
    --vnex-mod-crm-soft: rgba(45, 212, 191, 0.18);
    --vnex-mod-hr: #c4b5fd;
    --vnex-mod-hr-soft: rgba(196, 181, 253, 0.18);
    --vnex-mod-projects: #a5b4fc;
    --vnex-mod-projects-soft: rgba(165, 180, 252, 0.18);
    --vnex-mod-home: #cbd5e1;
    --vnex-mod-home-soft: rgba(203, 213, 225, 0.14);
    --vnex-mod-business: #fb923c;
    --vnex-mod-business-soft: rgba(251, 146, 60, 0.18);
    --vnex-mod-sales: #93c5fd;
    --vnex-mod-sales-soft: rgba(147, 197, 253, 0.18);
    --vnex-mod-export: #67e8f9;
    --vnex-mod-export-soft: rgba(103, 232, 249, 0.18);
    --vnex-mod-finance: #86efac;
    --vnex-mod-finance-soft: rgba(134, 239, 172, 0.18);
    --vnex-mod-settings: #c4b5fd;
    --vnex-mod-settings-soft: rgba(196, 181, 253, 0.18);
    --vnex-nav-storage: var(--vnex-mod-storage);
    --vnex-nav-crm: var(--vnex-mod-crm);
    --vnex-nav-hr: var(--vnex-mod-hr);
    --vnex-nav-projects: var(--vnex-mod-projects);
    --vnex-nav-home: var(--vnex-mod-home);
    --vnex-nav-business: var(--vnex-mod-business);
    --vnex-nav-sales: var(--vnex-mod-sales);
    --vnex-nav-export: var(--vnex-mod-export);
    --vnex-nav-finance: var(--vnex-mod-finance);
    --vnex-nav-settings: var(--vnex-mod-settings);
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;
    --color-gray-50: #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;
    --color-gray-950: #09090b;
}

.dark .fi-body,
html.dark .fi-body,
.dark.fi-body,
html.dark body,
.dark .fi-main,
html.dark .fi-main,
.dark .fi-main-ctn,
html.dark .fi-main-ctn {
    background-color: var(--vnex-main, #09090b) !important;
}

.dark .fi-sidebar,
html.dark .fi-sidebar {
    background-color: var(--vnex-sidebar) !important;
    border-inline-end: 1px solid var(--vnex-sidebar-border) !important;
}

/* Alias for older VFM skins */
:root,
.dark,
html.dark {
    --vnex-vfm-blue: var(--vnex-blue);
    --vnex-vfm-blue-bright: var(--vnex-blue-bright);
    --vnex-vfm-blue-soft: var(--vnex-blue-soft);
    --vnex-vfm-sidebar: var(--vnex-sidebar);
    --vnex-vfm-sidebar-border: var(--vnex-sidebar-border);
    --vnex-vfm-card: var(--vnex-card);
    --vnex-vfm-card-border: var(--vnex-border);
    --vnex-vfm-text: var(--vnex-text);
    --vnex-vfm-muted: var(--vnex-muted);
    --vnex-vfm-shadow: var(--vnex-shadow);
}

.fi-body,
.fi-sidebar,
.fi-main,
.fi-header,
.vnex-ui {
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif !important;
}

.fi-body {
    color-scheme: light;
}

html.dark .fi-body,
.dark .fi-body {
    color-scheme: dark;
}

/* Livewire / Filament SPA navigate progress (top blue line) */
#nprogress {
    pointer-events: none;
}

#nprogress .bar {
    background: var(--primary-600, #0ea5e9) !important;
    height: 3px !important;
    z-index: 99999 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--primary-600, #0ea5e9), 0 0 5px var(--primary-600, #0ea5e9) !important;
}

#nprogress .spinner {
    display: none !important;
}

/* ?? Layout shell ?? */
.vnex-ui {
    display: grid;
    gap: 1.25rem;
    color: var(--vnex-text);
}

.vnex-ui__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

.vnex-ui__grid--2 {
    grid-template-columns: 1fr;
}

.vnex-ui__grid--3 {
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .vnex-ui__grid--2 { grid-template-columns: 1.15fr 0.85fr; }
    .vnex-ui__grid--2.is-equal { grid-template-columns: 1fr 1fr; }
    .vnex-ui__grid--3 { grid-template-columns: 1.4fr 0.8fr; }
}

@media (min-width: 1100px) {
    .vnex-ui__grid--3 { grid-template-columns: 1.3fr 0.85fr 0.85fr; }
}

.vnex-ui__stack {
    display: grid;
    gap: 1.25rem;
}

/* ?? Hero ?? */
.vnex-ui__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.4rem;
    border-radius: var(--vnex-radius);
    border: 1px solid var(--vnex-border);
    background:
        radial-gradient(900px 220px at 0% 0%, var(--vnex-blue-soft), transparent 60%),
        var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}

.vnex-ui__hero h3,
.vnex-ui__hero-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vnex-text);
    letter-spacing: -0.01em;
}

.vnex-ui__hero p,
.vnex-ui__hero-sub {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--vnex-muted);
    line-height: 1.45;
}

/* ?? Badge ?? */
.vnex-ui__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.vnex-ui__badge-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}

.vnex-ui__badge--ok,
.vnex-ui__badge.is-online {
    color: var(--vnex-ok-text);
    background: var(--vnex-ok-soft);
    border-color: color-mix(in srgb, var(--vnex-ok) 40%, transparent);
}

.vnex-ui__badge--bad,
.vnex-ui__badge.is-offline {
    color: var(--vnex-bad-text);
    background: var(--vnex-bad-soft);
    border-color: color-mix(in srgb, var(--vnex-bad) 40%, transparent);
}

.vnex-ui__badge--warn {
    color: var(--vnex-warn-text);
    background: var(--vnex-warn-soft);
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, transparent);
}

.vnex-ui__badge--info {
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}

/* ?? Card ?? */
.vnex-ui__card {
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius);
    background: var(--vnex-card);
    overflow: hidden;
    box-shadow: var(--vnex-shadow);
}

.vnex-ui__card-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vnex-border);
    font-weight: 800;
    color: var(--vnex-text);
}

.vnex-ui__card-head-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
    flex-shrink: 0;
}

.vnex-ui__card-body {
    padding: 1.25rem;
}

.vnex-ui__card-body--flush {
    padding: 0;
}

/* ?? Definition rows ?? */
.vnex-ui__rows {
    display: grid;
}

.vnex-ui__row {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-ui__row:last-child {
    border-bottom: 0;
}

.vnex-ui__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vnex-muted);
}

.vnex-ui__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vnex-text);
    word-break: break-word;
}

.vnex-ui__value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 600;
}

.vnex-ui__secret {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vnex-ui__secret-text {
    min-width: 0;
    flex: 1;
    letter-spacing: 0.08em;
}

.vnex-ui__secret-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.vnex-ui__icon-btn {
    appearance: none;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-muted);
    border-radius: 0.45rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vnex-ui__icon-btn:hover {
    color: var(--vnex-text);
    border-color: var(--vnex-text);
}

/* ?? Stats + meter ?? */
.vnex-ui__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.vnex-ui__stat {
    padding: 0.9rem 1rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-blue-soft);
}

.vnex-ui__stat small {
    display: block;
    color: var(--vnex-muted);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.vnex-ui__stat strong {
    color: var(--vnex-text);
    font-size: 1.15rem;
    font-weight: 800;
}

.vnex-ui__meter {
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.vnex-ui__meter > i,
.vnex-ui__meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vnex-blue), var(--vnex-blue-bright));
}

.vnex-ui__meter-caption {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: var(--vnex-muted);
    font-weight: 700;
}

/* ?? Links / list blocks ?? */
.vnex-ui__links {
    display: grid;
    gap: 0.5rem;
}

.vnex-ui__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    color: var(--vnex-blue-bright);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vnex-ui__link:hover {
    background: var(--vnex-blue-soft);
    border-color: rgba(79, 110, 245, 0.35);
}

.vnex-ui__list {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.45rem;
    color: var(--vnex-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.vnex-ui__list strong {
    color: var(--vnex-text);
}

.vnex-ui__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--vnex-muted);
    line-height: 1.45;
}

.vnex-ui__error {
    margin: 0 1.25rem 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: var(--vnex-bad-soft);
    color: #fecaca;
    font-size: 0.82rem;
    line-height: 1.45;
}

html:not(.dark) .vnex-ui__error {
    color: #991b1b;
}

.vnex-ui__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: var(--vnex-blue);
    color: #fff !important;
    font-weight: 800;
    font-size: 0.875rem;
    text-decoration: none;
    border: 0;
}

.vnex-ui__btn:hover {
    filter: brightness(1.05);
}

.vnex-ui__btn--ghost {
    background: transparent;
    color: var(--vnex-text) !important;
    border: 1px solid var(--vnex-border);
}

.vnex-ui__btn--danger {
    background: #b91c1c;
    color: #fff !important;
}

/* ?? Filament native polish (global) ?? */
.fi-sidebar {
    background: var(--vnex-sidebar) !important;
    border-inline-end-color: var(--vnex-sidebar-border) !important;
}

.fi-sidebar-group-label {
    color: var(--vnex-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: var(--vnex-blue-soft) !important;
}

.fi-wi-stats-overview-stat,
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-sc-section,
.fi-fo-tabs-tab,
.fi-wi-chart,
.vnex-stat-card {
    border-radius: var(--vnex-radius-sm) !important;
}

.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-wi-chart,
.vnex-stat-card {
    box-shadow: none !important;
    background: var(--vnex-card) !important;
    border: 1px solid var(--vnex-border) !important;
}

.dark .fi-wi-stats-overview-stat,
html.dark .fi-wi-stats-overview-stat,
.dark .fi-section:not(.fi-section-not-contained),
html.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-ta-ctn,
html.dark .fi-ta-ctn,
.dark .fi-wi-chart,
html.dark .fi-wi-chart {
    background: #18181b !important;
    border-color: #27272a !important;
}

.dark .fi-wi-stats-overview-stat-value,
html.dark .fi-wi-stats-overview-stat-value {
    color: #fafafa !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.dark .fi-wi-stats-overview-stat-label,
html.dark .fi-wi-stats-overview-stat-label {
    color: #a1a1aa !important;
}

.dark .fi-header,
html.dark .fi-header {
    background: rgba(9, 9, 11, 0.92) !important;
    border-bottom-color: #27272a !important;
    /* No z-index here ? elevating .fi-header traps in-page Filament modals under the title. */
}

.dark .fi-topbar,
html.dark .fi-topbar {
    background: rgba(9, 9, 11, 0.92) !important;
    border-bottom-color: #27272a !important;
}

.dark .fi-sidebar-item-badge,
html.dark .fi-sidebar-item-badge,
.dark .fi-badge,
html.dark .fi-badge {
    border-radius: 999px !important;
}

.dark .fi-ta-row,
html.dark .fi-ta-row {
    border-color: rgba(39, 39, 42, 0.9) !important;
}

.dark .fi-ta-header-cell,
html.dark .fi-ta-header-cell {
    color: #a1a1aa !important;
}

/* Unified KPI / tab strip language (HR + rest of panels) */
.vnex-stat-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .vnex-stat-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vnex-stat-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vnex-stat-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vnex-stat-grid.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vnex-stat-grid.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vnex-stat-grid.is-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .vnex-stat-grid.is-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .vnex-stat-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vnex-stat-grid.is-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vnex-stat-grid.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .vnex-stat-grid.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .vnex-stat-grid.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .vnex-stat-grid.is-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.vnex-stat-grid.is-7 .vnex-stat-card {
    padding: 1rem 0.95rem;
}
.vnex-stat-grid.is-7 .vnex-stat-card__label {
    font-size: 0.78rem;
    line-height: 1.25;
}
.vnex-stat-grid.is-7 .vnex-stat-card__value {
    font-size: clamp(1.05rem, 0.7rem + 1.1vw, 1.55rem);
}

.vnex-stat-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.35rem;
}

.vnex-stat-card__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vnex-muted);
}

.vnex-stat-card__value {
    margin-top: 0.5rem;
    font-size: clamp(1.05rem, 0.55rem + 1.6vw, 1.875rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--vnex-text);
    max-width: 100%;
}

/* Keep currency + amount on one line (payslip / CFO KPIs) */
.vnex-stat-card__value.is-money {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.35em;
    white-space: nowrap;
    overflow: hidden;
}

.vnex-stat-card__currency {
    flex-shrink: 0;
    font-size: 0.58em;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--vnex-muted);
    line-height: 1;
}

.vnex-stat-card__amount {
    min-width: 0;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vnex-stat-card__desc {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--vnex-muted);
}

.vnex-stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.vnex-stat-card.is-success .vnex-stat-card__icon { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-stat-card.is-danger .vnex-stat-card__icon { background: var(--vnex-bad-soft); color: var(--vnex-bad); }
.vnex-stat-card.is-warning .vnex-stat-card__icon { background: var(--vnex-warn-soft); color: var(--vnex-warn); }
.vnex-stat-card.is-info .vnex-stat-card__icon { background: var(--vnex-mod-storage-soft); color: var(--vnex-nav-storage); }
.vnex-stat-card.is-primary .vnex-stat-card__icon { background: var(--vnex-blue-soft); color: var(--vnex-blue-bright); }
.vnex-stat-card.is-gray .vnex-stat-card__icon { background: rgba(161, 161, 170, 0.14); color: #a1a1aa; }

/* Bottom glow underline (HR Present-card language) */
.vnex-stat-card::after {
    content: '';
    position: absolute;
    left: 1rem;
    bottom: 0;
    width: 42%;
    height: 3px;
    border-radius: 999px 999px 0 0;
    opacity: 0.95;
    background: #60a5fa;
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.7);
}
.vnex-stat-card.is-success::after {
    background: #4ade80;
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.75), 0 0 28px rgba(34, 197, 94, 0.35);
}
.vnex-stat-card.is-danger::after {
    background: #f87171;
    box-shadow: 0 0 16px rgba(248, 113, 113, 0.7);
}
.vnex-stat-card.is-warning::after {
    background: #fbbf24;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.7);
}
.vnex-stat-card.is-info::after {
    background: var(--vnex-nav-storage, #38bdf8);
    box-shadow: 0 0 16px color-mix(in srgb, var(--vnex-nav-storage, #38bdf8) 70%, transparent);
}
.vnex-stat-card.is-primary::after {
    background: var(--vnex-blue-bright);
    box-shadow: 0 0 16px color-mix(in srgb, var(--vnex-blue-bright) 70%, transparent);
}
.vnex-stat-card.is-gray::after {
    background: #71717a;
    box-shadow: 0 0 12px rgba(113, 113, 122, 0.45);
}

/* Employee 360 ? profile cards */
.vnex-ep-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    margin-bottom: 1rem;
    padding: 1.35rem 1.4rem;
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    position: relative;
    overflow: hidden;
}

.vnex-ep-hero::after {
    content: '';
    position: absolute;
    inset: auto -10% -40% auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.16), transparent 68%);
    pointer-events: none;
}

.vnex-ep-hero__main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.vnex-ep-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: #7dd3fc;
    background:
        linear-gradient(145deg, rgba(56, 189, 248, 0.22), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.18);
}

.vnex-ep-hero__eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-ep-hero__name {
    margin: 0.15rem 0 0.55rem;
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vnex-text);
}

.vnex-ep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.vnex-ep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vnex-muted);
    background: rgba(161, 161, 170, 0.1);
    border: 1px solid rgba(161, 161, 170, 0.18);
}

.vnex-ep-chip.is-success {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(74, 222, 128, 0.35);
}
.vnex-ep-chip.is-warning {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 191, 36, 0.35);
}
.vnex-ep-chip.is-danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(248, 113, 113, 0.35);
}
.vnex-ep-chip.is-primary,
.vnex-ep-chip.is-info {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.35);
}

.vnex-ep-back {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.28);
    transition: background 0.14s ease, border-color 0.14s ease;
}
.vnex-ep-back:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(125, 211, 252, 0.45);
}
.vnex-op-backstrip {
    margin: 0 0 0.75rem;
}

/* BL filing modal */
.vnex-bl-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}
.vnex-bl-modal {
    background: var(--fi-bg, #1e2334);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    min-width: 320px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.vnex-bl-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem 0.6rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.vnex-bl-modal__header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.6;
    color: inherit;
}
.vnex-bl-modal__header button:hover { opacity: 1; }
.vnex-bl-modal__body {
    padding: 1rem;
}
.vnex-bl-modal__label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 0.35rem;
}
.vnex-bl-modal__input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.4rem;
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 0.9rem;
}
.vnex-bl-modal__input:focus {
    outline: none;
    border-color: rgba(56,189,248,0.5);
}
.vnex-bl-modal__footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.6rem 1rem 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Account 360 — Next Action banner + CTA (theme tokens; no Tailwind purge) */
.vnex-ep-next {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid rgba(79, 110, 245, 0.28);
    background:
        linear-gradient(135deg, rgba(79, 110, 245, 0.14), rgba(56, 189, 248, 0.06)),
        var(--vnex-card, #18181b);
    box-shadow: var(--vnex-shadow);
}

html:not(.dark) .vnex-ep-next {
    border-color: rgba(79, 110, 245, 0.22);
    background:
        linear-gradient(135deg, rgba(79, 110, 245, 0.1), rgba(255, 255, 255, 0.9)),
        #fff;
}

.vnex-ep-next__row {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

@media (min-width: 640px) {
    .vnex-ep-next__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.vnex-ep-next__copy {
    min-width: 0;
}

.vnex-ep-next__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-blue-bright, #7B94F8);
}

.vnex-ep-next__title {
    margin-top: 0.2rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vnex-text, #fafafa);
}

.vnex-ep-next__body {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--vnex-muted, #a1a1aa);
}

.vnex-ep-next__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-shrink: 0;
    padding: 0.7rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, var(--vnex-blue-bright, #7B94F8) 0%, var(--vnex-blue, #4F6EF5) 100%);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(79, 110, 245, 0.35);
    transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.vnex-ep-next__cta:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 24px rgba(79, 110, 245, 0.45);
}

.vnex-ep-next__cta:active {
    transform: translateY(1px);
}

.vnex-ep-next__cta-arrow {
    display: inline-block;
    font-weight: 700;
    opacity: 0.95;
}

[dir="rtl"] .vnex-ep-next__cta-arrow {
    transform: scaleX(-1);
}

.vnex-ep-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--vnex-border, #27272a);
    background: var(--vnex-card, #18181b);
    color: var(--vnex-text, #fafafa);
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}
.vnex-ep-mini-btn:hover {
    filter: brightness(1.08);
}
.vnex-ep-mini-btn.is-primary {
    border-color: rgba(79, 110, 245, 0.45);
    background: linear-gradient(180deg, var(--vnex-blue-bright, #7B94F8), var(--vnex-blue, #4F6EF5));
    color: #fff;
}
.vnex-ep-mini-btn.is-ok {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}
.vnex-ep-mini-btn.is-warn {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}
.vnex-ep-mini-btn.is-bad {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}
html:not(.dark) .vnex-ep-mini-btn {
    background: #fff;
    color: #18181b;
}
html:not(.dark) .vnex-ep-mini-btn.is-ok {
    color: #166534;
    background: #dcfce7;
}
html:not(.dark) .vnex-ep-mini-btn.is-warn {
    color: #92400e;
    background: #fef3c7;
}
html:not(.dark) .vnex-ep-mini-btn.is-bad {
    color: #991b1b;
    background: #fee2e2;
}

.vnex-ep-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin-bottom: 1rem;
    align-items: flex-end;
}
.vnex-ep-tab-cluster {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.vnex-ep-tab-cluster__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    padding-inline: 0.15rem;
}
.vnex-ep-tab-cluster__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.vnex-ep-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    color: var(--vnex-muted);
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.vnex-ep-tab:hover {
    color: var(--vnex-text);
    border-color: rgba(96, 165, 250, 0.35);
}
.vnex-ep-tab.is-active {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.42);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.12);
}

/* Account 360 — same grouped-tab chrome as Project workspace */
.vnex-a360-nav {
    margin: 0 0 1rem;
}
.vnex-a360-nav .vnex-pw-nav__tab {
    gap: 0.4rem;
}
.vnex-a360-nav .vnex-pw-nav__tab svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}
.vnex-a360-nav .vnex-pw-nav__tab.is-active svg {
    opacity: 1;
}

.vnex-ep-panel {
    padding: 1.25rem 1.35rem 1.4rem;
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
}

.vnex-ep-panel__head {
    margin-bottom: 1rem;
}
.vnex-ep-panel__head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vnex-text);
}
.vnex-ep-panel__head p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: var(--vnex-muted);
}

.vnex-ask {
    display: grid;
    gap: 0.85rem;
}

.vnex-ask__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-ask__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.vnex-ask__chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
}

.vnex-ask__chip:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    color: var(--vnex-text);
}

.vnex-ask__chip.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    background: var(--vnex-blue-soft, rgba(56, 189, 248, 0.14));
    color: var(--vnex-text);
}

.vnex-ask__composer {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem 0.7rem;
    border-radius: 14px;
    border: 1px solid var(--vnex-border);
    background: rgba(255, 255, 255, 0.02);
}

.vnex-ask__field {
    width: 100%;
    min-height: 5.5rem;
    resize: vertical;
    border: 0;
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    outline: none;
}

.vnex-ask__field::placeholder {
    color: var(--vnex-muted);
    opacity: 0.85;
}

.vnex-ask__bar {
    display: flex;
    justify-content: flex-end;
}

.vnex-ask__submit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 50%, var(--vnex-border));
    background: var(--vnex-blue-soft, rgba(56, 189, 248, 0.16));
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

.vnex-ask__submit:hover {
    border-color: var(--vnex-blue, #3b82f6);
}

.vnex-ask__submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

.vnex-ask__answer {
    margin-top: 1rem;
    padding: 0.95rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--vnex-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--vnex-text);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-line;
}

/* Opposite the sidebar: LTR right, RTL left (inline-end). Upload dock shares that corner and stacks above (higher z-index). */
.vnex-assistant {
    position: fixed;
    z-index: 2147482500;
    inset-inline-end: 1.25rem;
    inset-inline-start: auto;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
    width: min(22.5rem, calc(100vw - 2rem));
    pointer-events: none;
}
.vnex-assistant.is-disabled {
    display: none;
}
.vnex-assistant > *,
.vnex-assistant__fab,
.vnex-assistant__panel {
    pointer-events: auto;
}
.vnex-assistant__fab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 50%, var(--vnex-border));
    background: var(--vnex-blue-soft, rgba(56, 189, 248, 0.18));
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.vnex-assistant__fab:hover {
    border-color: var(--vnex-blue, #3b82f6);
}
.vnex-assistant__panel {
    display: grid;
    grid-template-rows: auto minmax(12rem, 1fr) auto auto;
    gap: 0.55rem;
    width: 100%;
    max-height: min(32rem, calc(100vh - 6rem));
    padding: 0.9rem 0.95rem 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card, #0f172a);
    color: var(--vnex-text);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.vnex-assistant__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.vnex-assistant__head h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.vnex-assistant__head p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}
.vnex-assistant__icon-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-text);
    cursor: pointer;
}
.vnex-assistant__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    max-height: 2.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
}
.vnex-assistant__chips.is-expanded {
    flex-wrap: wrap;
    max-height: 5.6rem;
    overflow-y: auto;
}
.vnex-assistant__chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 11.5rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.vnex-assistant__chip--more {
    font-weight: 800;
    color: var(--vnex-blue, #38bdf8);
    max-width: none;
}
.vnex-assistant__chip:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
}
.vnex-assistant__thread {
    overflow: auto;
    display: grid;
    gap: 0.5rem;
    min-height: 12rem;
    padding: 0.15rem 0.1rem;
}
.vnex-assistant__empty {
    margin: 0;
    font-size: 0.82rem;
    color: var(--vnex-muted);
}
.vnex-assistant__bubble {
    justify-self: start;
    max-width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-line;
}
.vnex-assistant__bubble.is-user {
    justify-self: end;
    background: var(--vnex-blue-soft, rgba(56, 189, 248, 0.16));
}
.vnex-assistant__form {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}
.vnex-assistant__input {
    flex: 1;
    min-width: 0;
    height: 2.35rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.84rem;
    outline: none;
}
.vnex-assistant__input::placeholder {
    color: var(--vnex-muted);
}
.vnex-assistant__send {
    appearance: none;
    flex-shrink: 0;
    height: 2.35rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 50%, var(--vnex-border));
    background: var(--vnex-blue-soft, rgba(56, 189, 248, 0.16));
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
}

.vnex-ep-info-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .vnex-ep-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vnex-ep-info {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--vnex-border);
}
.dark .vnex-ep-info,
html.dark .vnex-ep-info {
    background: rgba(9, 9, 11, 0.35);
    border-color: #27272a;
}

.vnex-ep-info::after {
    content: '';
    position: absolute;
    left: 1rem;
    bottom: 0;
    width: 38%;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: #60a5fa;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.55);
}
.vnex-ep-info.is-success::after { background: #4ade80; box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
.vnex-ep-info.is-danger::after { background: #f87171; box-shadow: 0 0 12px rgba(248, 113, 113, 0.55); }
.vnex-ep-info.is-warning::after { background: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.55); }
.vnex-ep-info.is-info::after,
.vnex-ep-info.is-primary::after { background: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.55); }
.vnex-ep-info.is-gray::after { background: #71717a; box-shadow: 0 0 10px rgba(113, 113, 122, 0.4); }

.vnex-ep-info__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}
.vnex-ep-info.is-success .vnex-ep-info__icon { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-ep-info.is-danger .vnex-ep-info__icon { background: var(--vnex-bad-soft); color: var(--vnex-bad); }
.vnex-ep-info.is-warning .vnex-ep-info__icon { background: var(--vnex-warn-soft); color: var(--vnex-warn); }
.vnex-ep-info.is-info .vnex-ep-info__icon,
.vnex-ep-info.is-primary .vnex-ep-info__icon { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.vnex-ep-info.is-gray .vnex-ep-info__icon { background: rgba(161, 161, 170, 0.14); color: #a1a1aa; }

.vnex-ep-info__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vnex-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vnex-ep-info__value {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vnex-text);
    word-break: break-word;
}

.vnex-ep-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.vnex-ep-punch-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .vnex-ep-punch-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vnex-ep-punch-col {
    min-width: 0;
    padding: 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--vnex-border);
    background: rgba(255, 255, 255, 0.015);
}
.dark .vnex-ep-punch-col,
html.dark .vnex-ep-punch-col {
    background: rgba(9, 9, 11, 0.28);
    border-color: #27272a;
}

.vnex-ep-punch-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--vnex-border);
}
.vnex-ep-punch-col__label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vnex-ep-punch-col__head.is-in .vnex-ep-punch-col__label { color: #4ade80; }
.vnex-ep-punch-col__head.is-out .vnex-ep-punch-col__label { color: #f87171; }
.vnex-ep-punch-col__count {
    min-width: 1.6rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--vnex-muted);
    background: rgba(161, 161, 170, 0.12);
}

.vnex-ep-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--vnex-border);
}
.dark .vnex-ep-row,
html.dark .vnex-ep-row {
    background: rgba(9, 9, 11, 0.35);
    border-color: #27272a;
}

.vnex-ep-row__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}
.vnex-ep-row__icon.is-success { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-ep-row__icon.is-danger { background: var(--vnex-bad-soft); color: var(--vnex-bad); }
.vnex-ep-row__icon.is-warning { background: var(--vnex-warn-soft); color: var(--vnex-warn); }
.vnex-ep-row__icon.is-info,
.vnex-ep-row__icon.is-primary { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.vnex-ep-row__icon.is-gray { background: rgba(161, 161, 170, 0.14); color: #a1a1aa; }

.vnex-ep-row__body { min-width: 0; flex: 1; }
.vnex-ep-row__title {
    font-size: 0.92rem;
    font-weight: 750;
    color: var(--vnex-text);
}
.vnex-ep-row__meta {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--vnex-muted);
}

.vnex-ep-badge {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}
.vnex-ep-badge.is-success { color: #86efac; background: rgba(34, 197, 94, 0.14); }
.vnex-ep-badge.is-danger { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }
.vnex-ep-badge.is-warning { color: #fde68a; background: rgba(245, 158, 11, 0.14); }
.vnex-ep-badge.is-info,
.vnex-ep-badge.is-primary { color: #7dd3fc; background: rgba(56, 189, 248, 0.14); }
.vnex-ep-badge.is-gray { color: #a1a1aa; background: rgba(161, 161, 170, 0.12); }

.vnex-ep-empty {
    padding: 1.4rem 1rem;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed var(--vnex-border);
    color: var(--vnex-muted);
}

.vnex-ep-subhead {
    margin: 1.1rem 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-ep-row--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vnex-ep-row--link:hover {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.06);
}
    font-size: 0.9rem;
    font-weight: 600;
}

.fi-page-header-heading {
    letter-spacing: -0.02em;
    color: var(--vnex-text);
}

.fi-btn,
.fi-ac-btn-action {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* Filament primary actions ? soft HR-style accents (light + dark) */
.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-ac-btn-action.fi-color-primary:not(.fi-outlined) {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #0369a1 !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.42) !important;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-ac-btn-action.fi-color-primary:not(.fi-outlined):hover {
    background: rgba(14, 165, 233, 0.26) !important;
    color: #075985 !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.55), 0 8px 20px rgba(14, 165, 233, 0.16) !important;
    filter: none !important;
}

.dark .fi-btn.fi-color-primary:not(.fi-outlined),
html.dark .fi-btn.fi-color-primary:not(.fi-outlined),
.dark .fi-ac-btn-action.fi-color-primary:not(.fi-outlined),
html.dark .fi-ac-btn-action.fi-color-primary:not(.fi-outlined) {
    background: rgba(56, 189, 248, 0.16) !important;
    color: #7dd3fc !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.4) !important;
}

.dark .fi-btn.fi-color-primary:not(.fi-outlined):hover,
html.dark .fi-btn.fi-color-primary:not(.fi-outlined):hover,
.dark .fi-ac-btn-action.fi-color-primary:not(.fi-outlined):hover,
html.dark .fi-ac-btn-action.fi-color-primary:not(.fi-outlined):hover {
    background: rgba(56, 189, 248, 0.26) !important;
    color: #bae6fd !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.55), 0 8px 22px rgba(14, 165, 233, 0.22) !important;
}

/* Dark: elevated tray behind page header action buttons */
.dark .fi-header-actions-ctn,
html.dark .fi-header-actions-ctn,
.dark .fi-ac-header-actions,
html.dark .fi-ac-header-actions,
.dark .fi-page-header-actions,
html.dark .fi-page-header-actions {
    background: rgba(24, 24, 27, 0.92) !important;
    border: 1px solid rgba(63, 63, 70, 0.9) !important;
    border-radius: 0.9rem !important;
    padding: 0.35rem 0.4rem !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.35) !important;
    gap: 0.4rem !important;
}

/* Light: soft tray behind header action buttons */
.fi-header-actions-ctn,
.fi-ac-header-actions,
.fi-page-header-actions {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.9rem;
    padding: 0.35rem 0.4rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    gap: 0.4rem;
}

.fi-tabs,
.fi-fo-tabs {
    gap: 0.25rem;
}

.fi-tabs-item,
.fi-fo-tabs-item {
    border-radius: 10px 10px 0 0 !important;
    font-weight: 700 !important;
}

.fi-input,
.fi-select-input,
.fi-textarea {
    border-radius: 10px !important;
}

.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--vnex-radius-sm) !important;
}

/*
 * System stacking (Filament customer + admin):
 * Page titles must NOT create a high stacking context ? action modals render inside
 * page content (sibling of the header), so a z-index on .fi-header / .fi-page-header
 * paints "Documents" / "Projects" over every Create / Edit modal.
 *
 * Layers: content/cards (0) ? header actions (5) ? topbar (40) ? modals (1000) ? dropdowns (1100)
 */
.fi-page-header,
.fi-header,
.fi-header-heading-ctn {
    position: relative;
    z-index: auto !important;
}

.fi-page-header-actions,
.fi-header-actions,
.fi-ac-header-actions {
    position: relative;
    z-index: 5;
}

.fi-topbar,
.fi-topbar-ctn {
    position: relative;
    z-index: 40 !important;
}

.fi-modal,
.fi-modal.fi-modal-open,
.fi-modal > .fi-modal-close-overlay,
.fi-modal > .fi-modal-window-ctn {
    z-index: 1000 !important;
}

.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open,
.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open > .fi-modal-close-overlay,
.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open > .fi-modal-window-ctn {
    z-index: 1010 !important;
}

.fi-dropdown-panel,
.fi-dropdown-panel.fi-open,
.fi-topbar .fi-dropdown-panel,
.fi-modal .fi-dropdown-panel,
.fi-fo-select-panel,
.fi-fo-date-time-picker-panel {
    z-index: 1100 !important;
}

.vnex-stat-grid,
.vnex-stat-card,
.vnex-punch,
.vnex-punch__panel {
    position: relative;
    z-index: 0;
}

/* Export menu: colored icons only, natural text */
.vnex-export-excel,
.fi-dropdown-list-item.vnex-export-excel,
button.vnex-export-excel {
    color: inherit !important;
}
.vnex-export-excel .fi-icon,
.vnex-export-excel svg {
    color: #22c55e !important;
}

.vnex-export-pdf,
.fi-dropdown-list-item.vnex-export-pdf,
button.vnex-export-pdf {
    color: inherit !important;
}
.vnex-export-pdf .fi-icon,
.vnex-export-pdf svg {
    color: #f97316 !important;
}

.dark .vnex-export-excel .fi-icon,
.dark .vnex-export-excel svg,
html.dark .vnex-export-excel .fi-icon,
html.dark .vnex-export-excel svg {
    color: #4ade80 !important;
}

.dark .vnex-export-pdf .fi-icon,
.dark .vnex-export-pdf svg,
html.dark .vnex-export-pdf .fi-icon,
html.dark .vnex-export-pdf svg {
    color: #fb923c !important;
}

/* -- Drive workspace + preview pane -- */
.vnex-fm__workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    min-height: calc(100vh - 11rem);
}
.vnex-fm__workspace.has-pane {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
    gap: 0.75rem;
    align-items: stretch;
}
.vnex-fm__workspace > .vnex-fm__body {
    min-width: 0;
    min-height: 0;
}
.vnex-fm__body.is-list {
    width: 100%;
}
.vnex-fm__pane {
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    display: flex;
    flex-direction: column;
    align-self: stretch;
    position: sticky;
    top: 0.75rem;
    height: calc(100vh - 9.5rem);
    max-height: calc(100vh - 9.5rem);
    min-height: 0;
    overflow: hidden;
}
.vnex-fm__pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vnex-border);
    font-weight: 800;
    flex-shrink: 0;
}
.vnex-fm__pane-body {
    padding: 0.75rem;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.vnex-fm__pane-empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--vnex-muted);
    flex: 1;
}
.vnex-fm__pane-body > .vnex-preview {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: 0.65rem;
}
.vnex-fm__pane-body .vnex-preview__toolbar {
    flex-shrink: 0;
}
.vnex-fm__pane-body .vnex-preview__frame {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow: hidden;
}
.vnex-fm__pane-body .vnex-preview__frame iframe,
.vnex-fm__pane-body .vnex-preview__frame img,
.vnex-fm__pane-body .vnex-preview__frame video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}
.vnex-fm__upload-menu {
    position: relative;
}
.vnex-fm__upload-menu-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 40;
    min-width: 12rem;
    padding: 0.35rem;
    border-radius: 12px;
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    box-shadow: var(--vnex-shadow);
    display: grid;
    gap: 0.15rem;
}
.vnex-fm__upload-menu-panel button,
.vnex-fm__upload-menu-panel label {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vnex-text);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.vnex-fm__upload-menu-panel button:hover,
.vnex-fm__upload-menu-panel label:hover {
    background: var(--vnex-blue-soft);
}
.vnex-ui__stack {
    display: grid;
    gap: 1rem;
}
.vnex-ui__btn--primary {
    background: var(--vnex-blue);
    color: #fff !important;
}
@media (max-width: 960px) {
    .vnex-fm__workspace.has-pane {
        grid-template-columns: 1fr;
    }
    .vnex-fm__pane {
        position: static;
        height: min(70vh, 32rem);
        max-height: min(70vh, 32rem);
    }
}

/* ?? Account shell (Profile / Security / Storage / Billing) ?? */
.fi-page:has(.vnex-account) .fi-header-heading,
.fi-page:has(.vnex-account) .fi-header-subheading,
.fi-page:has(.vnex-account) .fi-header > .fi-header-heading-ctn {
    display: none !important;
}

.fi-page:has(.vnex-account) .fi-main,
.fi-page:has(.vnex-dash) .fi-main {
    max-width: 56rem;
}

.fi-page:has(.vnex-account--wide) .fi-main,
.fi-page:has(.vnex-account--wide) .fi-main-ctn,
.fi-page:has(.vnex-account--wide) .fi-page-content,
.fi-page:has(.vnex-account--wide) .fi-header {
    max-width: none !important;
    width: 100%;
}

.vnex-account {
    gap: 1.15rem;
}

.vnex-account__header {
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    border-radius: 18px;
    box-shadow: var(--vnex-shadow);
    overflow: hidden;
}

.vnex-account__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1.1rem;
}

.vnex-account__avatar {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(145deg, var(--vnex-blue), #3150d4);
    box-shadow: 0 8px 18px rgba(79, 110, 245, 0.28);
}

.vnex-account__avatar.is-photo {
    overflow: hidden;
    padding: 0;
    background: var(--vnex-border);
}

.vnex-account__avatar.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vnex-account__photo-row {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    flex-wrap: wrap;
}

.vnex-account__photo-fields {
    flex: 1 1 16rem;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.vnex-account__meta {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.vnex-account__name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.vnex-account__name {
    margin: 0;
    color: var(--vnex-text);
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.2;
}

.vnex-account__plan {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vnex-account__email,
.vnex-account__company {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vnex-account__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    padding: 0 1rem;
    border-top: 1px solid var(--vnex-border);
}

.vnex-account__tab {
    position: relative;
    padding: 0.95rem 0.95rem;
    color: var(--vnex-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.vnex-account__tab:hover {
    color: var(--vnex-text);
}

.vnex-account__tab.is-active {
    color: var(--vnex-blue-bright);
    border-bottom-color: var(--vnex-blue);
}

.vnex-account__body {
    display: grid;
    gap: 1rem;
}

.vnex-section__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-section__icon {
    display: inline-flex;
    color: var(--vnex-blue-bright);
}

.vnex-section__title {
    margin: 0;
    flex: 1;
    color: var(--vnex-blue-bright);
    font-size: 1rem;
    font-weight: 800;
}

.vnex-section__aside {
    margin-left: auto;
}

.vnex-section__body {
    padding-top: 1.15rem;
}

.vnex-account__form {
    display: grid;
    gap: 1rem;
}

.vnex-account__grid-2 {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 720px) {
    .vnex-account__grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.vnex-account__field {
    display: grid;
    gap: 0.4rem;
}

.vnex-account__field-label {
    color: var(--vnex-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.vnex-account__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.12);
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

html:not(.dark) .vnex-account__input {
    background: #f3f4f6;
    color: #1b2539;
}

.vnex-account__input:focus {
    outline: none;
    border-color: var(--vnex-blue);
    box-shadow: 0 0 0 3px var(--vnex-blue-soft);
    background: color-mix(in srgb, var(--vnex-card) 92%, #000 8%);
}

html:not(.dark) .vnex-account__input:focus {
    background: #fff;
}

.vnex-account__input.is-disabled,
.vnex-account__input:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.vnex-account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.15rem;
}

.vnex-ui__btn--soft {
    background: var(--vnex-blue-soft) !important;
    color: var(--vnex-blue-bright) !important;
}

.vnex-ui__btn--soft:hover {
    filter: brightness(1.05);
}

.vnex-account__code {
    display: block;
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: var(--vnex-blue-soft);
    color: var(--vnex-text);
    word-break: break-all;
    font-size: 0.85rem;
}

.vnex-account__kv {
    display: grid;
    gap: 1rem;
}

@media (min-width: 720px) {
    .vnex-account__kv {
        grid-template-columns: 1fr 1fr;
    }
}

.vnex-account__kv strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--vnex-text);
    font-size: 1rem;
}

.vnex-account__qr {
    margin: 1rem 0;
    max-width: 11rem;
    padding: 0.65rem;
    border-radius: 12px;
    background: #fff;
}

.vnex-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-token-row strong {
    color: var(--vnex-text);
    font-size: 0.95rem;
}

.vnex-token-row__del {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--vnex-muted);
    cursor: pointer;
}

.vnex-token-row__del:hover {
    color: #f87171;
    background: var(--vnex-bad-soft);
}

.vnex-login-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.vnex-login-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1.1rem 1.05rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background:
        linear-gradient(165deg, rgba(96, 165, 250, 0.07), transparent 42%),
        color-mix(in srgb, var(--vnex-card) 92%, transparent);
    box-shadow: var(--vnex-shadow);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.vnex-login-card:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    transform: translateY(-1px);
}

.vnex-login-card__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
}

.vnex-login-card__icon {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 12px;
    color: var(--vnex-blue-bright);
    background: var(--vnex-blue-soft);
    flex-shrink: 0;
}

.vnex-login-card[data-device="mobile"] .vnex-login-card__icon {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
}

.vnex-login-card[data-device="tablet"] .vnex-login-card__icon {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
}

.vnex-login-card__headline {
    min-width: 0;
}

.vnex-login-card__title {
    margin: 0;
    color: var(--vnex-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.vnex-login-card__when {
    margin: 0.2rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.vnex-login-card__ago {
    display: inline-flex;
    align-items: center;
    max-width: 7.5rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.vnex-login-card__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.vnex-login-chip {
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, transparent);
}

.vnex-login-chip em {
    display: block;
    margin-bottom: 0.12rem;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-login-chip strong {
    display: block;
    overflow: hidden;
    color: var(--vnex-text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vnex-login-chip.is-local {
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border));
    background: var(--vnex-warn-soft);
}

.vnex-login-chip.is-local strong {
    color: var(--vnex-warn);
}

@media (max-width: 640px) {
    .vnex-login-cards {
        grid-template-columns: 1fr;
    }

    .vnex-login-card__top {
        grid-template-columns: auto 1fr;
    }

    .vnex-login-card__ago {
        grid-column: 2;
        justify-self: start;
        max-width: none;
    }

    .vnex-login-card__chips {
        grid-template-columns: 1fr;
    }
}

/* Legacy list rows (kept for any leftover markup) */
.vnex-login-row {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-login-row__main strong {
    color: var(--vnex-text);
    font-size: 0.95rem;
}

.vnex-login-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    font-size: 0.8rem;
    color: var(--vnex-muted);
}

.vnex-login-row__meta em {
    display: block;
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    opacity: 0.85;
    margin-bottom: 0.1rem;
}

.vnex-login-row__meta span {
    min-width: 6.5rem;
    color: var(--vnex-text);
}

.vnex-storage-hero__used {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vnex-text);
    line-height: 1.15;
}

.vnex-storage-bar {
    display: flex;
    width: 100%;
    height: 0.7rem;
    margin-top: 1rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.16);
}

.vnex-storage-bar i {
    display: block;
    height: 100%;
}

.vnex-storage-bar .is-used {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.vnex-storage-bar .is-free {
    background: transparent;
}

.vnex-storage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.7rem;
    color: var(--vnex-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.vnex-storage-legend i {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    vertical-align: middle;
}

.vnex-storage-legend .is-used { background: #22c55e; }
.vnex-storage-legend .is-free { background: rgba(148, 163, 184, 0.45); }

.vnex-activity-spark {
    display: grid;
    grid-template-columns: repeat(45, minmax(0, 1fr));
    align-items: end;
    gap: 0.12rem;
    height: 4.5rem;
    margin-top: 1rem;
}

.vnex-activity-spark__col {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.vnex-activity-spark__col i {
    display: block;
    width: 100%;
    max-width: 0.35rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.28);
}

.vnex-activity-spark__col i.is-on {
    background: linear-gradient(180deg, var(--vnex-blue-bright), var(--vnex-blue));
}

@media (max-width: 720px) {
    .vnex-account__identity {
        align-items: flex-start;
    }

    .vnex-account__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .vnex-account__tab {
        white-space: nowrap;
    }

    .vnex-activity-spark {
        grid-template-columns: repeat(30, minmax(0, 1fr));
    }
}

/* —— Company Dashboard —— */
.vnex-dash__kpis {
    margin-bottom: 0;
    gap: 0.75rem;
}

/* Compact KPI tiles — quiet, dense, no neon glow */
.vnex-dash .vnex-stat-card {
    min-height: 0;
    padding: 0.85rem 0.95rem 0.95rem;
    border-radius: 12px !important;
    background: var(--vnex-card) !important;
    border: 1px solid var(--vnex-border) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.vnex-dash .vnex-stat-card:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border)) !important;
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-blue) 12%) !important;
    box-shadow: none !important;
}

/* Kill HR-style glow underline on dashboard tiles */
.vnex-dash .vnex-stat-card::after,
.vnex-dash .vnex-stat-card::before {
    display: none !important;
}

.vnex-dash .vnex-stat-card__row {
    align-items: center;
    gap: 0.55rem;
}

.vnex-dash .vnex-stat-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    line-height: 1.2;
}

.vnex-dash .vnex-stat-card__value {
    margin-top: 0.28rem;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.vnex-dash .vnex-stat-card__unit {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vnex-muted);
    letter-spacing: 0;
}

.vnex-dash .vnex-stat-card__desc {
    margin-top: 0.28rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--vnex-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vnex-dash .vnex-stat-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    box-shadow: none;
}

.vnex-dash .vnex-stat-card__icon .fi-icon,
.vnex-dash .vnex-stat-card__icon svg {
    width: 1rem !important;
    height: 1rem !important;
}

.vnex-dash__kpi-meter {
    margin-top: 0.55rem;
}

.vnex-dash__kpi-meter .vnex-ui__meter {
    height: 0.35rem;
}

.vnex-dash__kpi-meter .vnex-ui__meter-caption {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    gap: 0.35rem;
}

.vnex-dash__kpi-storage .vnex-stat-card__desc {
    margin-top: 0.4rem;
}

.vnex-dash__kpi-storage .vnex-stat-card__desc.is-warn {
    color: var(--vnex-warn);
    font-weight: 700;
}

.vnex-dash__kpi-storage .vnex-stat-card__desc.is-critical {
    color: var(--vnex-bad);
    font-weight: 700;
}

.vnex-dash__panels {
    margin-top: 1.1rem;
}

.vnex-dash .vnex-ui__card {
    background: var(--vnex-card);
    border-color: var(--vnex-border);
    box-shadow: none;
}

.vnex-dash .vnex-ui__card-head {
    background: transparent;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    padding: 0.85rem 1rem;
}

.vnex-dash .vnex-ui__card-body {
    padding: 1rem;
}

.vnex-dash__big {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--vnex-text);
    line-height: 1.15;
}

.vnex-dash__big span {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--vnex-muted);
}

.vnex-dash__alert {
    margin: 0.65rem 0 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.vnex-dash__alert.is-warn { color: #fbbf24; }
.vnex-dash__alert.is-critical { color: #f87171; }
html:not(.dark) .vnex-dash__alert.is-warn { color: #b45309; }
html:not(.dark) .vnex-dash__alert.is-critical { color: #b91c1c; }

.vnex-dash__spark {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    align-items: end;
    gap: 0.28rem;
    height: 7.5rem;
    padding-top: 0.35rem;
}

.vnex-dash__spark-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 0.25rem;
    min-width: 0;
}

.vnex-dash__spark-col i {
    display: block;
    width: 100%;
    max-width: 0.85rem;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--vnex-blue-bright), var(--vnex-blue));
}

.vnex-dash__spark-col span {
    font-size: 0.58rem;
    color: var(--vnex-muted);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    transform: scale(0.92);
}

/* ?? HR Quick punch (compact colored bar) ?? */
.vnex-punch__panel {
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.15rem;
}

.vnex-punch__panel--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

@media (min-width: 860px) {
    .vnex-punch__panel--split {
        grid-template-columns: minmax(15rem, 0.95fr) minmax(0, 1.35fr);
    }
}

.vnex-punch__map {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 13.5rem;
    padding: 1rem 1.1rem 1.15rem;
    background:
        radial-gradient(420px 180px at 20% 20%, rgba(34, 197, 94, 0.18), transparent 60%),
        radial-gradient(320px 160px at 90% 80%, rgba(14, 165, 233, 0.12), transparent 55%),
        linear-gradient(160deg, #10231a 0%, #0b1220 55%, #111827 100%);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.vnex-punch__map-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.vnex-punch__map-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.65);
}

.vnex-punch__map-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.2rem;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    padding: 0.35rem 0.15rem;
}

.vnex-punch__map-body.is-ready:hover .vnex-punch__map-cta {
    text-decoration: underline;
}

.vnex-punch__map-pin {
    font-size: 1.55rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.vnex-punch__map-ready {
    font-size: 1.15rem;
    font-weight: 800;
    color: #bbf7d0;
}

.vnex-punch__map-acc {
    font-size: 0.78rem;
    color: rgba(187, 247, 208, 0.8);
}

.vnex-punch__map-coords {
    margin-top: 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.78);
}

.vnex-punch__map-cta {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #86efac;
}

.vnex-punch__map-body.is-loading,
.vnex-punch__map-body.is-denied {
    color: rgba(226, 232, 240, 0.85);
}

.vnex-punch__map-body.is-denied .vnex-punch__map-ready {
    color: #fecaca;
}

.vnex-punch__pulse {
    width: 0.85rem;
    height: 0.85rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55);
    animation: vnex-punch-pulse 1.4s infinite;
}

@keyframes vnex-punch-pulse {
    0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
    70% { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

.vnex-punch__controls {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.15rem 1.15rem;
}

.vnex-punch__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vnex-text);
    margin-bottom: 0.15rem;
}

.vnex-punch__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.vnex-punch__sub {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--vnex-muted);
}

.vnex-punch__link {
    border: 0;
    background: transparent;
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.vnex-punch__label {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-punch__chip,
.vnex-punch__submit,
.vnex-punch__select {
    box-sizing: border-box;
    min-height: 2.75rem;
    border-radius: 12px;
}

.vnex-punch__pair,
.vnex-punch__modes {
    display: grid;
    gap: 0.45rem;
}

.vnex-punch__pair {
    grid-template-columns: 1fr 1fr;
}

.vnex-punch__modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1100px) {
    .vnex-punch__modes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vnex-punch__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.vnex-punch__chip-ico {
    font-size: 0.85rem;
    line-height: 1;
}

.vnex-punch__chip.is-in {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}
.vnex-punch__chip.is-in.is-active {
    background: #22c55e;
    border-color: #4ade80;
    color: #052e16;
}

.vnex-punch__chip.is-out {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.vnex-punch__chip.is-out.is-active {
    background: #ef4444;
    border-color: #f87171;
    color: #fff;
}

.vnex-punch__chip.is-office {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
}
.vnex-punch__chip.is-office.is-active {
    background: #0ea5e9;
    border-color: #38bdf8;
    color: #fff;
}

.vnex-punch__chip.is-remote {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
}
.vnex-punch__chip.is-remote.is-active {
    background: #a855f7;
    border-color: #c084fc;
    color: #fff;
}

.vnex-punch__chip.is-site {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}
.vnex-punch__chip.is-site.is-active {
    background: #f59e0b;
    border-color: #fbbf24;
    color: #1c1917;
}

.vnex-punch__chip.is-client {
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(20, 184, 166, 0.35);
    color: #5eead4;
}
.vnex-punch__chip.is-client.is-active {
    background: #14b8a6;
    border-color: #2dd4bf;
    color: #042f2e;
}

.vnex-punch__select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--vnex-border);
    background: #ffffff;
    color: #18181b;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    color-scheme: light;
    appearance: auto;
}

.vnex-punch__select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vnex-blue) 18%, transparent);
}

.vnex-punch__select option {
    background-color: #ffffff;
    color: #18181b;
}

.vnex-punch__select option:checked,
.vnex-punch__select option:hover {
    background-color: #e0f2fe;
    color: #0c4a6e;
}

.dark .vnex-punch__select,
html.dark .vnex-punch__select {
    background: #18181b;
    color: #fafafa;
    border-color: #3f3f46;
    color-scheme: dark;
}

.dark .vnex-punch__select:focus,
html.dark .vnex-punch__select:focus {
    border-color: color-mix(in srgb, #38bdf8 55%, #3f3f46);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.dark .vnex-punch__select option,
html.dark .vnex-punch__select option {
    background-color: #18181b;
    color: #fafafa;
}

.dark .vnex-punch__select option:checked,
.dark .vnex-punch__select option:hover,
html.dark .vnex-punch__select option:checked,
html.dark .vnex-punch__select option:hover {
    background-color: #0c4a6e;
    color: #e0f2fe;
}

.vnex-punch__submit {
    width: 100%;
    margin-top: 0.35rem;
    border: 0;
    background: linear-gradient(135deg, var(--vnex-blue), #3b82f6);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
}

.vnex-punch__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.vnex-punch__submit:not(:disabled):hover {
    filter: brightness(1.08);
}

/* Guest auth (login/register/2FA/pending) ΓÇö Miracle-style split; Light + neutral Dark */
.vnex-guest-auth-layout.fi-simple-layout,
.vnex-guest-auth-page {
    --vnex-guest-bg: #f4f5f7;
    --vnex-guest-surface: #ffffff;
    --vnex-guest-text: #111214;
    --vnex-guest-muted: #6b7280;
    --vnex-guest-border: #e5e7eb;
    --vnex-guest-input: #ffffff;
    --vnex-guest-cta-bg: #111214;
    --vnex-guest-cta-fg: #ffffff;
    --vnex-guest-link: #111214;
    --vnex-guest-focus: #111214;
    min-height: 100vh;
    background: var(--vnex-guest-bg) !important;
    overflow-x: hidden;
}

.vnex-guest-auth-layout.fi-simple-layout::before,
.vnex-guest-auth-layout.fi-simple-layout::after {
    display: none !important;
    content: none !important;
}

html.dark .vnex-guest-auth-layout.fi-simple-layout,
html.dark .vnex-guest-auth-page,
.dark .vnex-guest-auth-layout.fi-simple-layout,
.dark .vnex-guest-auth-page {
    --vnex-guest-bg: #0a0a0b;
    --vnex-guest-surface: #1a1b1e;
    --vnex-guest-text: #f3f4f6;
    --vnex-guest-muted: #9ca3af;
    --vnex-guest-border: #2a2b2f;
    --vnex-guest-input: #1a1b1e;
    --vnex-guest-cta-bg: #ffffff;
    --vnex-guest-cta-fg: #0a0a0b;
    --vnex-guest-link: #f3f4f6;
    --vnex-guest-focus: #ffffff;
}

.vnex-guest-auth {
    display: grid;
    /* Exact page halves: form | hero */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    box-sizing: border-box;
    color: var(--vnex-guest-text);
}

.vnex-guest-auth__form-pane {
    display: flex;
    align-items: center;
    justify-content: center; /* form centered inside its half */
    min-width: 0;
    width: 100%;
}

.vnex-guest-auth__form-inner {
    width: 100%;
    max-width: 26rem;
    padding: 0.5rem 0.25rem 1rem;
}

.vnex-guest-auth__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.vnex-guest-auth__brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    text-decoration: none;
}

.vnex-guest-auth__theme {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-guest-border);
    background: var(--vnex-guest-surface);
}

.vnex-guest-auth__theme-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vnex-guest-muted);
    background: transparent;
}

.vnex-guest-auth__theme-btn.is-active,
.vnex-guest-auth__theme-btn[aria-pressed="true"] {
    color: var(--vnex-guest-cta-fg);
    background: var(--vnex-guest-cta-bg);
}

.vnex-guest-auth__brand-logo {
    display: block;
    height: 3rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.vnex-guest-auth__brand-logo--dark {
    display: none;
}

html.dark .vnex-guest-auth__brand-logo--light,
.dark .vnex-guest-auth__brand-logo--light {
    display: none;
}

html.dark .vnex-guest-auth__brand-logo--dark,
.dark .vnex-guest-auth__brand-logo--dark {
    display: block;
}

.vnex-guest-auth__heading {
    margin: 0 0 1.35rem;
    font-size: clamp(1.55rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--vnex-guest-text);
}

.vnex-guest-auth__slot {
    width: 100%;
}

.vnex-guest-auth__filament-main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.vnex-guest-auth-layout .fi-simple-page,
.vnex-guest-auth-layout .fi-simple-page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.vnex-guest-auth-layout .fi-simple-header {
    display: none !important;
}

.vnex-guest-auth-layout .fi-input-wrp,
.vnex-guest-auth-layout .fi-fo-text-input input,
.vnex-guest-auth-layout input[type="email"],
.vnex-guest-auth-layout input[type="password"],
.vnex-guest-auth-layout input[type="text"] {
    border-radius: 0.85rem !important;
    background: var(--vnex-guest-input) !important;
    border-color: var(--vnex-guest-border) !important;
    color: var(--vnex-guest-text) !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
}

.vnex-guest-auth-layout .fi-input-wrp:focus-within,
.vnex-guest-auth-layout input:focus,
.vnex-guest-auth-layout input:focus-visible {
    border-color: var(--vnex-guest-focus) !important;
    outline: 2px solid color-mix(in srgb, var(--vnex-guest-focus) 35%, transparent) !important;
    outline-offset: 1px;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --primary-600: var(--vnex-guest-focus) !important;
}

.vnex-guest-auth-layout .fi-btn-primary,
.vnex-guest-auth-layout button[type="submit"].fi-btn,
.vnex-guest-auth-layout .fi-ac-btn-action {
    width: 100%;
    border-radius: 0.85rem !important;
    background: var(--vnex-guest-cta-bg) !important;
    color: var(--vnex-guest-cta-fg) !important;
    border-color: transparent !important;
    font-weight: 700 !important;
    --tw-ring-color: transparent !important;
}

.vnex-guest-auth-layout .fi-btn-primary:hover,
.vnex-guest-auth-layout button[type="submit"].fi-btn:hover {
    filter: brightness(1.06);
}

.vnex-guest-auth-layout .fi-fo-field-wrp-label span,
.vnex-guest-auth-layout .fi-checkbox-label,
.vnex-guest-auth-layout label {
    color: var(--vnex-guest-muted) !important;
}

.vnex-guest-auth-layout a {
    color: var(--vnex-guest-text);
}

.vnex-guest-auth__footer-link {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--vnex-guest-muted);
}

.vnex-guest-auth__footer-link a {
    color: var(--vnex-guest-text);
    text-decoration: none;
}

.vnex-guest-auth__footer-link a:hover {
    color: var(--vnex-guest-link);
}

.vnex-guest-auth__copyright {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--vnex-guest-muted);
}

/* Right hero: CSS radius always clips even sharp uploads */
.vnex-guest-auth__hero {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 2.5rem);
    min-width: 0;
}

.vnex-guest-auth__hero-frame {
    position: relative;
    flex: 1;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #141416;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.vnex-guest-auth__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.vnex-guest-auth__hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.75rem 1.6rem 1.85rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 78%);
    color: #fff;
}

.vnex-guest-auth__hero-logo {
    display: block;
    height: 1.5rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
    margin-bottom: 0.85rem;
}

.vnex-guest-auth__hero-headline {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.vnex-guest-auth__hero-tagline {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    max-width: 28rem;
}

.vnex-guest-auth__social {
    margin-top: 1.15rem;
}

.vnex-guest-auth__social-label {
    text-align: center;
    color: var(--vnex-guest-muted);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.65rem;
}

.vnex-guest-auth__social-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vnex-guest-auth__social-btn {
    flex: 1 1 0;
    min-width: 6.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vnex-guest-border);
    background: var(--vnex-guest-surface);
    color: var(--vnex-guest-text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 650;
}

.vnex-guest-auth__social-btn:hover {
    border-color: color-mix(in srgb, var(--vnex-guest-link) 45%, var(--vnex-guest-border));
}

.vnex-guest-auth__standalone-note {
    margin: 0 0 1rem;
    color: var(--vnex-guest-muted);
    line-height: 1.5;
    font-size: 0.95rem;
}

.vnex-guest-auth__standalone-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--vnex-guest-border);
    background: var(--vnex-guest-input);
    color: var(--vnex-guest-text);
    margin: 0.65rem 0 1rem;
}

.vnex-guest-auth__standalone-form button,
.vnex-guest-auth__cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 0;
    background: var(--vnex-guest-cta-bg);
    color: var(--vnex-guest-cta-fg);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.vnex-guest-auth__err {
    color: #ef4444;
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
}

@media (max-width: 960px) {
    .vnex-guest-auth {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .vnex-guest-auth__form-pane {
        max-width: none;
        margin-inline: 0;
    }

    .vnex-guest-auth__hero {
        min-height: 14rem;
        order: -1;
    }

    .vnex-guest-auth__hero-frame {
        min-height: 14rem;
        border-radius: 1.15rem;
    }

    .vnex-guest-auth__hero-overlay {
        padding: 1.1rem 1.15rem 1.2rem;
    }

    .vnex-guest-auth__hero-headline {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vnex-guest-auth * {
        animation: none !important;
        transition: none !important;
    }
}

/* Legacy simple-layout (non guest-auth) keeps relative stacking only */
.fi-simple-main-ctn,
.fi-simple-main,
.fi-simple-layout-header {
    position: relative;
    z-index: 1;
}

/* HR Insights drilldown ? theme-aware (light + dark) */
.vnex-insight-filters {
    margin-bottom: 1rem;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    box-shadow: var(--vnex-shadow);
}

.vnex-insight-filters__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.vnex-insight-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}
.vnex-insight-back:hover {
    filter: brightness(0.97);
}

.vnex-insight-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
}
.vnex-insight-summary__label {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-insight-summary__value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vnex-text);
    line-height: 1.1;
}
.vnex-insight-summary__period {
    margin-left: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-muted) 14%, transparent);
}
.vnex-insight-summary.is-success {
    color: var(--vnex-ok);
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
    background: var(--vnex-ok-soft);
}
.vnex-insight-summary.is-danger {
    color: var(--vnex-bad);
    border-color: color-mix(in srgb, var(--vnex-bad) 35%, var(--vnex-border));
    background: var(--vnex-bad-soft);
}
.vnex-insight-summary.is-warning {
    color: var(--vnex-warn);
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
    background: var(--vnex-warn-soft);
}
.vnex-insight-summary.is-primary,
.vnex-insight-summary.is-info {
    color: var(--vnex-blue);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    background: var(--vnex-blue-soft);
}
.vnex-insight-summary.is-gray {
    color: var(--vnex-muted);
    border-color: var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-muted) 10%, var(--vnex-card));
}

.vnex-insight-filters__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .vnex-insight-filters__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
        align-items: end;
    }
}

.vnex-insight-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.vnex-insight-field > span {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-insight-field select,
.vnex-insight-field input[type="date"],
.vnex-insight-field input[type="text"],
.vnex-insight-field input[type="number"],
.vnex-insight-field input[type="time"],
.vnex-insight-field input[type="email"],
.vnex-insight-field input[type="tel"],
.vnex-insight-field input:not([type]),
.vnex-insight-field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    color-scheme: light;
}
.dark .vnex-insight-field select,
html.dark .vnex-insight-field select,
.dark .vnex-insight-field input[type="date"],
html.dark .vnex-insight-field input[type="date"],
.dark .vnex-insight-field input[type="text"],
html.dark .vnex-insight-field input[type="text"],
.dark .vnex-insight-field input[type="number"],
html.dark .vnex-insight-field input[type="number"],
.dark .vnex-insight-field input[type="time"],
html.dark .vnex-insight-field input[type="time"],
.dark .vnex-insight-field input[type="email"],
html.dark .vnex-insight-field input[type="email"],
.dark .vnex-insight-field input[type="tel"],
html.dark .vnex-insight-field input[type="tel"],
.dark .vnex-insight-field input:not([type]),
html.dark .vnex-insight-field input:not([type]),
.dark .vnex-insight-field textarea,
html.dark .vnex-insight-field textarea {
    color-scheme: dark;
    background: #121216;
}

.vnex-insight-select {
    position: relative;
    width: 100%;
}

.vnex-insight-select__trigger {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
    font-size: 0.88rem;
    font-weight: 650;
    cursor: pointer;
    user-select: none;
}
.vnex-insight-select__trigger::-webkit-details-marker { display: none; }
.vnex-insight-select__trigger:hover,
.vnex-insight-select[open] .vnex-insight-select__trigger {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 18%, transparent);
}

.vnex-insight-select__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow: auto;
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}

.vnex-insight-select__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    cursor: pointer;
}
.vnex-insight-select__option:hover {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}
.vnex-insight-select__option.is-active {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}

.vnex-insight-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.vnex-insight-chip {
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
    color: var(--vnex-muted);
    background: var(--vnex-main);
    border: 1px solid var(--vnex-border);
}
.vnex-insight-chip.is-active {
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border-color: color-mix(in srgb, var(--vnex-blue) 42%, var(--vnex-border));
    box-shadow: 0 0 16px color-mix(in srgb, var(--vnex-blue) 12%, transparent);
}

.vnex-insight-results {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .vnex-insight-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .vnex-insight-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vnex-insight-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    text-decoration: none;
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    box-shadow: var(--vnex-shadow);
    transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.vnex-insight-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
}
.vnex-insight-card::after {
    content: '';
    position: absolute;
    left: 1rem;
    bottom: 0;
    width: 38%;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--vnex-blue);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-blue) 55%, transparent);
}
.vnex-insight-card.is-success::after { background: var(--vnex-ok); box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-ok) 55%, transparent); }
.vnex-insight-card.is-danger::after { background: var(--vnex-bad); box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-bad) 55%, transparent); }
.vnex-insight-card.is-warning::after { background: var(--vnex-warn); box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-warn) 55%, transparent); }
.vnex-insight-card.is-info::after,
.vnex-insight-card.is-primary::after { background: var(--vnex-blue); box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-blue) 55%, transparent); }
.vnex-insight-card.is-gray::after { background: var(--vnex-muted); box-shadow: none; }

.vnex-insight-card__avatar {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.85rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 28%, transparent);
}
.vnex-insight-card.is-success .vnex-insight-card__avatar {
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
    border-color: color-mix(in srgb, var(--vnex-ok) 30%, transparent);
}
.vnex-insight-card.is-danger .vnex-insight-card__avatar {
    color: var(--vnex-bad);
    background: var(--vnex-bad-soft);
    border-color: color-mix(in srgb, var(--vnex-bad) 30%, transparent);
}
.vnex-insight-card.is-warning .vnex-insight-card__avatar {
    color: var(--vnex-warn);
    background: var(--vnex-warn-soft);
    border-color: color-mix(in srgb, var(--vnex-warn) 30%, transparent);
}

.vnex-insight-card__body { min-width: 0; flex: 1; }
.vnex-insight-card__name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-insight-card__meta,
.vnex-insight-card__detail {
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: var(--vnex-muted);
}
.vnex-insight-card__badge {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-muted) 12%, transparent);
}
.vnex-insight-card.is-success .vnex-insight-card__badge {
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
}
.vnex-insight-card.is-danger .vnex-insight-card__badge {
    color: var(--vnex-bad);
    background: var(--vnex-bad-soft);
}
.vnex-insight-card.is-warning .vnex-insight-card__badge {
    color: var(--vnex-warn);
    background: var(--vnex-warn-soft);
}
.vnex-insight-card.is-info .vnex-insight-card__badge,
.vnex-insight-card.is-primary .vnex-insight-card__badge {
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
}

.vnex-insight-empty {
    grid-column: 1 / -1;
    padding: 2rem 1rem;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed var(--vnex-border);
    color: var(--vnex-muted);
    font-weight: 650;
    background: var(--vnex-card);
}

/* Attendance report ? compact searchable multi-select */
.vnex-ar-toolbar {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .vnex-ar-toolbar {
        grid-template-columns: minmax(9rem, 12rem) minmax(9rem, 12rem) minmax(16rem, 1fr);
        align-items: start;
    }
}

.vnex-ar-employees { min-width: 0; }

.vnex-ar-select__trigger,
.vnex-ar-select .vnex-insight-select__trigger {
    gap: 0.5rem;
}
.vnex-ar-select__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnex-ar-select__badge {
    flex: 0 0 auto;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: var(--vnex-blue);
}
.vnex-ar-select__chevron {
    flex: 0 0 auto;
    opacity: 0.7;
}

.vnex-ar-select__menu {
    min-width: min(24rem, 92vw);
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
}

.vnex-ar-select__search {
    padding: 0.35rem 0.35rem 0.55rem;
    flex: 0 0 auto;
}
.vnex-ar-select__search input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.85rem;
}
.vnex-ar-select__search input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 22%, transparent);
}

.vnex-ar-select__list {
    max-height: 14rem;
    overflow: auto;
    padding: 0 0.1rem;
}

.vnex-ar-select__empty {
    padding: 0.85rem 0.75rem;
    color: var(--vnex-muted);
    font-size: 0.84rem;
    font-weight: 650;
}

.vnex-ar-select__meta {
    margin-inline-start: auto;
    color: var(--vnex-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.vnex-ar-select__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vnex-ar-select__hint {
    margin-top: 0.35rem;
    padding: 0.45rem 0.65rem 0.25rem;
    border-top: 1px solid var(--vnex-border);
    color: var(--vnex-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.vnex-ar-check {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.45rem;
    border-radius: 0.25rem;
    border: 1px solid var(--vnex-border);
    background: transparent;
    flex: 0 0 auto;
}
.vnex-ar-check.is-on {
    background: var(--vnex-blue);
    border-color: var(--vnex-blue);
    box-shadow: inset 0 0 0 2px var(--vnex-card);
}

.vnex-insight-select__option {
    display: flex;
    align-items: center;
}

.vnex-ar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}
.vnex-ar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
    font-size: 0.75rem;
    font-weight: 750;
    cursor: pointer;
}
.vnex-ar-chip.is-clear {
    background: transparent;
    color: var(--vnex-muted);
    border-color: var(--vnex-border);
}

.vnex-ar-credit {
    margin-top: 0.55rem;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
    background: transparent;
    color: var(--vnex-blue);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 750;
    cursor: pointer;
}
.vnex-ar-credit:hover {
    background: var(--vnex-blue-soft);
}

.vnex-ar-credited {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--vnex-muted);
}

.vnex-ar-sheet {
    margin-top: 1rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    box-shadow: none;
}
.vnex-ar-sheet__meta {
    margin: 0;
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
    color: var(--vnex-muted);
    border-bottom: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
}
.vnex-ar-sheet__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.vnex-ar-sheet .vnex-ar-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    font-size: 0.8125rem;
    color: var(--vnex-text);
    background: var(--vnex-card);
}
.vnex-ar-sheet .vnex-ar-table th,
.vnex-ar-sheet .vnex-ar-table td {
    box-sizing: border-box;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--vnex-border);
    border-inline-end: 1px solid color-mix(in srgb, var(--vnex-border) 70%, transparent);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
    background: var(--vnex-card);
}
.vnex-ar-sheet .vnex-ar-table th:last-child,
.vnex-ar-sheet .vnex-ar-table td:last-child {
    border-inline-end: 0;
}
.vnex-ar-sheet .vnex-ar-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-main) 70%, var(--vnex-card));
    border-bottom: 1px solid var(--vnex-border);
}
.vnex-ar-sheet .vnex-ar-table tbody tr:hover td {
    background: color-mix(in srgb, var(--vnex-blue) 8%, var(--vnex-card));
}
.vnex-ar-sheet .vnex-ar-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--vnex-main) 35%, var(--vnex-card));
}
.vnex-ar-sheet .vnex-ar-table tbody tr:nth-child(even):hover td {
    background: color-mix(in srgb, var(--vnex-blue) 10%, var(--vnex-card));
}
.vnex-ar-table__status {
    font-weight: 700;
}
.vnex-ar-table__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
}
.vnex-ar-table__pill.is-present {
    border-color: color-mix(in srgb, var(--vnex-ok) 45%, var(--vnex-border));
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
}
.vnex-ar-table__pill.is-absent {
    border-color: color-mix(in srgb, var(--vnex-bad) 45%, var(--vnex-border));
    color: var(--vnex-bad);
    background: var(--vnex-bad-soft);
}
.vnex-ar-table__pill.is-leave {
    border-color: color-mix(in srgb, var(--vnex-warn) 45%, var(--vnex-border));
    color: var(--vnex-warn);
    background: var(--vnex-warn-soft);
}
.vnex-ar-table__pill.is-incomplete {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    color: var(--vnex-blue-bright, var(--vnex-blue));
    background: var(--vnex-blue-soft);
}
.vnex-ar-table__pill.is-off,
.vnex-ar-table__pill.is-gray {
    color: var(--vnex-muted);
}
.vnex-ar-table__actions {
    white-space: normal;
    min-width: 8rem;
}
.vnex-ar-table__link {
    display: inline-block;
    margin-inline-end: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vnex-blue-bright, var(--vnex-blue));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vnex-ar-table__link:hover {
    filter: brightness(1.12);
}
.vnex-ar-table__actions .vnex-ar-credit {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.vnex-digest-prefs {
    display: grid;
    gap: 1.25rem;
}

/* Cards 7718 (كروت 7718) — approved customer portal card system.
   Surfaces: Digest mailbox / policies / delivery logs.
   Spec: docs/design/CARDS_7718.md
*/
.vnex-c7718-grid,
.vnex-digest-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .vnex-c7718-grid,
    .vnex-digest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .vnex-c7718-grid,
    .vnex-digest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vnex-c7718,
.vnex-digest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-height: 100%;
    padding: 1.15rem 1.2rem 1.2rem;
    border: 1px solid var(--vnex-border);
    border-radius: 18px;
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    overflow: hidden;
}

.vnex-c7718::after,
.vnex-digest-card::after {
    content: '';
    position: absolute;
    inset-inline-start: 1.1rem;
    bottom: 0;
    width: 2.75rem;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--vnex-blue, #60a5fa);
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.45);
    opacity: 0.85;
}

.vnex-digest-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vnex-digest-card__module {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-digest-card__pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
    border: 1px solid var(--vnex-border);
    color: var(--vnex-muted);
    line-height: 1.2;
}

.vnex-digest-card__pill.is-on {
    border-color: color-mix(in srgb, var(--vnex-ok) 45%, var(--vnex-border));
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
}

.vnex-digest-card__pill.is-off {
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border));
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
}

.vnex-digest-card__title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vnex-text);
    line-height: 1.25;
}

.vnex-digest-card__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vnex-muted) 6%, transparent);
    overflow: hidden;
}

.vnex-digest-card__meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.62rem 0.85rem;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-digest-card__meta > div:last-child {
    border-bottom: 0;
}

.vnex-digest-card__meta dt {
    margin: 0;
    flex: 0 1 42%;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vnex-muted);
    line-height: 1.4;
}

.vnex-digest-card__meta dd {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 750;
    color: var(--vnex-text);
    text-align: end;
    line-height: 1.4;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.vnex-digest-card__meta.is-stack,
.vnex-digest-card__meta.is-rows,
.vnex-digest-card.is-log .vnex-digest-card__meta {
    grid-template-columns: 1fr;
}

.vnex-digest-card.is-log .vnex-digest-card__module {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vnex-text);
    min-width: 0;
}

.vnex-digest-card__email {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-size: 0.78rem;
    font-weight: 650;
    direction: ltr;
    unicode-bidi: isolate;
}

.vnex-digest-card__btn.is-danger {
    border-color: color-mix(in srgb, var(--vnex-bad, #ef4444) 40%, var(--vnex-border));
    color: var(--vnex-bad, #ef4444);
    background: color-mix(in srgb, var(--vnex-bad, #ef4444) 10%, transparent);
}

.vnex-digest-card__btn.is-danger:hover {
    background: color-mix(in srgb, var(--vnex-bad, #ef4444) 18%, transparent);
}

.vnex-digest-grid.is-dense {
    gap: 0.85rem;
}

.vnex-digest-card__actions {
    display: flex;
    margin-top: auto;
    padding-top: 0.1rem;
}

.vnex-digest-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.4rem 0.85rem;
    border-radius: 11px;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
}

.vnex-digest-card__btn:hover {
    background: color-mix(in srgb, var(--vnex-muted) 12%, transparent);
}

.vnex-digest-card__btn.is-primary {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}

a.vnex-digest-card__btn {
    text-decoration: none;
}

.vnex-c7718__copy {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--vnex-muted);
}

.vnex-c7718__steps {
    margin: 0;
    padding-inline-start: 1.15rem;
    display: grid;
    gap: 0.5rem;
    color: var(--vnex-text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vnex-c7718__steps li {
    padding-inline-end: 0.15rem;
    overflow-wrap: anywhere;
}

.vnex-c7718__qr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.vnex-c7718__qr figure {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
}

.vnex-c7718__qr img {
    width: 148px;
    height: 148px;
    border-radius: 12px;
    background: #fff;
    padding: 0.45rem;
}

.vnex-c7718__qr figcaption {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vnex-muted);
    text-align: center;
}

.vnex-c7718__secret {
    display: grid;
    gap: 0.45rem;
    justify-items: end;
    min-width: 0;
}

.vnex-c7718__secret-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.vnex-c7718__fold {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vnex-border);
}

.vnex-c7718__fold > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--vnex-muted);
}

.vnex-c7718__fold > summary::-webkit-details-marker {
    display: none;
}

.vnex-c7718__chev {
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

[dir="rtl"] .vnex-c7718__chev {
    transform: rotate(135deg);
}

.vnex-c7718__fold[open] > summary .vnex-c7718__chev,
[dir="rtl"] .vnex-c7718__fold[open] > summary .vnex-c7718__chev {
    transform: rotate(45deg);
}

.vnex-c7718__fold[open] > summary {
    margin-bottom: 0.75rem;
    color: var(--vnex-text);
}

.vnex-c7718__readme-wrap {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.4rem;
}

.vnex-c7718__readme-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-c7718__readme {
    margin: 0;
    max-height: 14rem;
    overflow: auto;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main, #09090B) 55%, transparent);
    color: var(--vnex-text);
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.vnex-kit-top,
.vnex-kit-packs {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.vnex-kit-page {
    display: grid;
    gap: 1rem;
}

.vnex-kit-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--vnex-border);
    border-radius: 18px;
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}

.vnex-kit-page__intro {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 18rem;
}

.vnex-kit-page__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vnex-text);
    line-height: 1.25;
}

.vnex-kit-page__sub {
    margin: 0;
    max-width: 42rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--vnex-muted);
}

.vnex-kit-page__tools {
    flex: 0 0 auto;
}

.vnex-kit-locale {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0.2rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vnex-muted) 6%, transparent);
}

.vnex-kit-locale__btn {
    appearance: none;
    border: 0;
    border-radius: 9px;
    padding: 0.42rem 0.75rem;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vnex-kit-locale__btn.is-on {
    background: var(--vnex-card);
    color: var(--vnex-blue-bright);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.vnex-kit-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--vnex-border);
    scrollbar-width: thin;
}

.vnex-kit-tabs__tab {
    position: relative;
    flex: 0 0 auto;
    appearance: none;
    margin-bottom: -1px;
    padding: 0.8rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.vnex-kit-tabs__tab:hover {
    color: var(--vnex-text);
}

.vnex-kit-tabs__tab.is-on {
    color: var(--vnex-blue-bright);
    border-bottom-color: var(--vnex-blue);
}

.vnex-kit-panel {
    display: grid;
    gap: 1rem;
}

.vnex-kit-panel--stack {
    max-width: 52rem;
}

.vnex-kit-steps {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0.95rem 1rem 0.95rem 2.35rem;
    list-style: decimal;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 22%, var(--vnex-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--vnex-blue) 8%, transparent);
    color: var(--vnex-text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vnex-kit-steps li {
    padding-inline-end: 0.25rem;
}

.vnex-kit-alert {
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn) 8%, var(--vnex-card));
}

.vnex-kit-card .vnex-digest-card__top {
    align-items: flex-start;
}

.vnex-kit-card .vnex-digest-card__title {
    flex: 1;
    min-width: 0;
}

.vnex-kit-card--qr {
    align-self: stretch;
}

.vnex-kit-meta--primary > div:first-child {
    border-top: 0;
}

.vnex-kit-more {
    margin-top: 0.15rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--vnex-border);
}

.vnex-kit-more > summary {
    margin-bottom: 0;
}

.vnex-kit-more[open] > summary {
    margin-bottom: 0.65rem;
}

.vnex-kit-note {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}

.vnex-kit-pack .vnex-digest-card__title {
    font-size: 1rem;
}

.vnex-kit-top {
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .vnex-kit-top {
        grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.9fr);
        align-items: stretch;
    }
}

.vnex-kit-packs {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .vnex-kit-packs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vnex-kit-meta > div {
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
}

.vnex-kit-meta dt {
    flex: none;
}

.vnex-kit-meta dd {
    text-align: start;
    font-size: 0.8rem;
    line-height: 1.45;
}

.vnex-kit-meta .vnex-digest-card__email {
    word-break: break-all;
}

.vnex-c7718__secret {
    justify-items: start;
}

.vnex-c7718__secret-actions {
    justify-content: flex-start;
}

.vnex-kit-top .vnex-c7718__qr {
    flex: 1;
    align-content: center;
}

.vnex-digest-card__actions .vnex-digest-card__btn.is-primary {
    width: 100%;
}

.vnex-digest-card__actions.is-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
}

.vnex-digest-card__actions.is-row .vnex-digest-card__btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.45rem;
}

.vnex-digest-card__meta.is-3 {
    grid-template-columns: 1fr;
}

.vnex-digest-grid.is-compact {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .vnex-digest-grid.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vnex-digest-card.is-compact {
    gap: 0.65rem;
    padding: 1rem 1.1rem;
}

.vnex-digest-admin {
    display: grid;
    gap: 1.75rem;
}

.vnex-digest-admin__section {
    display: grid;
    gap: 0.9rem;
}

.vnex-digest-admin__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vnex-digest-admin__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--vnex-text);
}

.vnex-digest-admin__sub {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--vnex-muted);
    line-height: 1.45;
    max-width: 42rem;
}

.vnex-digest-admin__table {
    border: 1px solid var(--vnex-border);
    border-radius: 16px;
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    padding: 0.75rem;
    overflow: hidden;
}

.vnex-digest-prefs__note,
.vnex-digest-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--vnex-muted);
    line-height: 1.5;
}

.vnex-digest-empty {
    padding: 1.25rem 1.35rem;
    border: 1px dashed var(--vnex-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--vnex-card) 80%, transparent);
}

/* ?? HR Documents (employee accordion) ?? */
.vnex-hr-docs {
    display: grid;
    gap: 1rem;
}

.vnex-hr-docs__toolbar {
    display: grid;
    gap: 0.65rem;
}

.vnex-hr-docs__search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: var(--vnex-card);
    color: var(--vnex-muted);
}

.vnex-hr-docs__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.9rem;
}

.vnex-hr-docs__hint,
.vnex-hr-docs__empty,
.vnex-hr-docs__empty-docs {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--vnex-muted);
    line-height: 1.45;
}

.vnex-hr-docs__empty,
.vnex-hr-docs__empty-docs {
    padding: 1rem 1.1rem;
    border: 1px dashed var(--vnex-border);
    border-radius: 12px;
}

.vnex-hr-docs__list {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .vnex-hr-docs__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vnex-hr-docs__card.is-open {
        grid-column: 1 / -1;
    }
}

.vnex-hr-docs__card {
    border: 1px solid var(--vnex-border);
    border-radius: 16px;
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    overflow: hidden;
}

.vnex-hr-docs__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.vnex-hr-docs__trigger:hover {
    background: color-mix(in srgb, var(--vnex-muted) 8%, transparent);
}

.vnex-hr-docs__avatar {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(145deg, var(--vnex-blue), #3150d4);
}

.vnex-hr-docs__who {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.vnex-hr-docs__name {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--vnex-text);
}

.vnex-hr-docs__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--vnex-muted);
}

.vnex-hr-docs__count {
    flex: 0 0 auto;
    min-width: 1.6rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 750;
    color: var(--vnex-muted);
}

.vnex-hr-docs__chevron {
    flex: 0 0 auto;
    color: var(--vnex-muted);
}

.vnex-hr-docs__body {
    display: grid;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--vnex-border);
    padding-top: 0.85rem;
}

.vnex-hr-docs__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vnex-hr-docs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

.vnex-hr-docs__btn:hover {
    background: color-mix(in srgb, var(--vnex-muted) 12%, transparent);
}

.vnex-hr-docs__btn.is-primary {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}

.vnex-hr-docs__files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.vnex-hr-docs__file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vnex-muted) 6%, var(--vnex-card));
}

.vnex-hr-docs__file-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.vnex-hr-docs__file-title {
    font-weight: 750;
    color: var(--vnex-text);
}

.vnex-hr-docs__file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.vnex-hr-docs__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vnex-muted);
}

.vnex-hr-docs__pill.is-success {
    border-color: color-mix(in srgb, var(--vnex-ok) 40%, var(--vnex-border));
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
}

.vnex-hr-docs__pill.is-warning {
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border));
    color: var(--vnex-warn);
    background: var(--vnex-warn-soft);
}

.vnex-hr-docs__pill.is-danger {
    border-color: color-mix(in srgb, var(--vnex-bad) 40%, var(--vnex-border));
    color: var(--vnex-bad);
    background: var(--vnex-bad-soft);
}

.vnex-hr-docs__pill.is-info,
.vnex-hr-docs__pill.is-primary {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
    color: var(--vnex-blue-bright);
    background: var(--vnex-blue-soft);
}



/* Payroll payslip lines ? real table layout (not Tailwind grid) */
.vnex-payroll-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
}
.vnex-payroll-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.vnex-payroll-summary__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-payroll-summary__value {
    margin-top: 0.2rem;
    font-weight: 700;
    color: var(--vnex-text);
}
.vnex-payroll-summary__net {
    text-align: right;
}
.vnex-payroll-summary__net-value {
    margin-top: 0.15rem;
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--vnex-text);
}

.vnex-payroll-group {
    margin-bottom: 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    overflow: hidden;
}
.vnex-payroll-group__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
}
.vnex-payroll-group__head > div:last-child {
    flex: 1 1 auto;
    min-width: min(100%, 12rem);
    text-align: right;
}
.vnex-payroll-group__name {
    font-weight: 750;
    color: var(--vnex-text);
}
.vnex-payroll-group__code {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--vnex-muted);
}
.vnex-payroll-group__net-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    text-align: right;
}
.vnex-payroll-group__net-value {
    margin-top: 0.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--vnex-text);
    white-space: nowrap;
}
}
.vnex-payroll-group__net-value.is-neg {
    color: var(--vnex-bad);
}

.vnex-payroll-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.vnex-payroll-table th,
.vnex-payroll-table td {
    padding: 0.65rem 1rem;
    vertical-align: middle;
    text-align: left;
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
.vnex-payroll-table thead th {
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-main) 40%, var(--vnex-card));
    border-top: 0;
}
.vnex-payroll-table .col-line { width: 46%; }
.vnex-payroll-table .col-type { width: 20%; }
.vnex-payroll-table .col-qty { width: 10%; }
.vnex-payroll-table .col-amt {
    width: 34%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}
.vnex-payroll-table td.col-amt.is-neg { color: var(--vnex-bad); }
.vnex-payroll-table td.col-qty { color: var(--vnex-muted); font-variant-numeric: tabular-nums; }
.vnex-payroll-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
}
.vnex-payroll-pill.is-basic { border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border)); color: var(--vnex-blue-bright); background: var(--vnex-blue-soft); }
.vnex-payroll-pill.is-allowance { border-color: color-mix(in srgb, var(--vnex-ok) 40%, var(--vnex-border)); color: var(--vnex-ok); background: var(--vnex-ok-soft); }
.vnex-payroll-pill.is-ot { border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border)); color: var(--vnex-warn); background: var(--vnex-warn-soft); }
.vnex-payroll-pill.is-expense { border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border)); color: var(--vnex-blue-bright); background: var(--vnex-blue-soft); }
.vnex-payroll-pill.is-unpaid_leave,
.vnex-payroll-pill.is-deduction { border-color: color-mix(in srgb, var(--vnex-bad) 40%, var(--vnex-border)); color: var(--vnex-bad); background: var(--vnex-bad-soft); }

@media (max-width: 720px) {
    .vnex-payroll-table thead { display: none; }
    .vnex-payroll-table,
    .vnex-payroll-table tbody,
    .vnex-payroll-table tr,
    .vnex-payroll-table td {
        display: block;
        width: 100%;
    }
    .vnex-payroll-table tr {
        padding: 0.65rem 1rem;
        border-top: 1px solid var(--vnex-border);
    }
    .vnex-payroll-table td {
        border: 0;
        padding: 0.15rem 0;
    }
    .vnex-payroll-table td.col-amt {
        text-align: left;
        font-size: 1rem;
        white-space: nowrap;
        width: 100%;
    }
}

/* HR Dashboard actions + empty state */
.vnex-stat-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.vnex-stat-card__body { min-width: 0; }
.vnex-stat-card.is-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.vnex-stat-card.is-link:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    transform: translateY(-1px);
}

.vnex-hr-present-today {
    margin-top: 0.25rem;
}
.vnex-op-home--people .vnex-hr-present-today {
    margin-top: 0.5rem;
}

.vnex-hr-dash-charts {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .vnex-hr-dash-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vnex-dash-actions {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin: 0 0 1.25rem;
}
@media (min-width: 640px) {
    .vnex-dash-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.vnex-dash-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vnex-dash-action:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
}
.vnex-dash-action__icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--vnex-main);
    color: var(--vnex-muted);
}
.vnex-dash-action.is-warning .vnex-dash-action__icon {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
}
.vnex-dash-action.is-info .vnex-dash-action__icon {
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
}
.vnex-dash-action__body { min-width: 0; flex: 1; }
.vnex-dash-action__title {
    font-weight: 750;
    color: var(--vnex-text);
}
.vnex-dash-action__desc {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--vnex-muted);
}
.vnex-dash-action__value {
    flex: 0 0 auto;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--vnex-text);
}
.vnex-dash-action.is-warning .vnex-dash-action__value { color: var(--vnex-warn); }
.vnex-dash-action.is-info .vnex-dash-action__value { color: #38bdf8; }

.vnex-dash-empty {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    color: var(--vnex-muted);
    font-size: 0.9rem;
}
.vnex-dash-empty.is-success {
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
}
.vnex-dash-docs-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* Project workspace header / tabs (legacy pills kept for safety) */
.vnex-proj-head { margin-bottom: 0.25rem; }
.vnex-proj-head__type {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vnex-blue-bright);
}
.vnex-proj-head__title {
    margin: 0.25rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vnex-text);
}
.vnex-proj-head__meta {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--vnex-muted);
}
.vnex-proj-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.15rem;
}
.vnex-proj-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-elevated, var(--vnex-card));
    color: var(--vnex-text);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.vnex-proj-tab:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    background: var(--vnex-blue-soft);
}
.vnex-proj-tab.is-active {
    background: var(--vnex-blue);
    border-color: var(--vnex-blue);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}
html[dir="rtl"] .vnex-proj-tab,
html[lang="ar"] .vnex-proj-tab {
    font-size: 0.98rem;
    font-weight: 600;
}

/* Project workspace chrome — hero + commerce + grouped tabs */
.vnex-pw-chrome {
    display: grid;
    gap: 0.85rem;
}
.vnex-pw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1.15rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    border-radius: 1.1rem;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vnex-blue) 18%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--vnex-elevated, var(--vnex-card)) 96%, #fff), var(--vnex-card));
    box-shadow: 0 10px 28px color-mix(in srgb, #000 18%, transparent);
}
.vnex-pw-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-blue-bright);
}
.vnex-pw-hero__title {
    margin: 0.35rem 0 0;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--vnex-text);
}
.vnex-pw-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.vnex-pw-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-elevated, var(--vnex-card)) 70%, transparent);
    color: var(--vnex-text);
    font-size: 0.78rem;
    font-weight: 600;
}
.vnex-pw-chip.is-soft {
    color: var(--vnex-muted);
    background: transparent;
}
.vnex-pw-hero__pack {
    margin: 0.65rem 0 0;
    font-size: 0.8rem;
    color: var(--vnex-muted);
}
.vnex-pw-hero__ring {
    display: grid;
    place-items: center;
}
.vnex-pw-ring {
    --vnex-pw-pct: 0;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--vnex-card) 72%, transparent 73% 100%),
        conic-gradient(var(--vnex-blue) calc(var(--vnex-pw-pct) * 1%), color-mix(in srgb, var(--vnex-border) 70%, transparent) 0);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vnex-border) 60%, transparent);
}
.vnex-pw-ring__value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vnex-text);
    line-height: 1;
}
.vnex-pw-ring__label {
    font-size: 0.65rem;
    font-weight: 650;
    color: var(--vnex-muted);
    margin-top: 0.15rem;
}
.vnex-pw-commerce {
    padding: 1rem 1.15rem;
    border: 1px solid var(--vnex-border);
    border-radius: 1rem;
    background: var(--vnex-card);
}
.vnex-pw-commerce__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.85rem;
}
.vnex-pw-commerce__title {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pw-commerce__account {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vnex-blue-bright);
    text-decoration: none;
}
.vnex-pw-commerce__account:hover {
    text-decoration: underline;
}
.vnex-pw-commerce__account span {
    color: var(--vnex-muted);
    font-weight: 550;
}
.vnex-pw-commerce__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}
.vnex-pw-metric {
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--vnex-blue) 8%, transparent), transparent 55%),
        var(--vnex-elevated, var(--vnex-card));
}
.vnex-pw-metric__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pw-metric__value {
    margin-top: 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vnex-text);
}
.vnex-pw-metric__value.is-ok {
    color: color-mix(in srgb, #34d399 75%, var(--vnex-text));
}
.vnex-pw-metric__hint {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--vnex-muted);
    line-height: 1.35;
}
.vnex-pw-commerce__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
}
.vnex-pw-commerce__contacts-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vnex-muted);
    margin-inline-end: 0.25rem;
}
.vnex-pw-nav {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--vnex-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--vnex-card) 92%, #000);
}
.vnex-pw-nav__groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
.vnex-pw-nav__group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.15rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vnex-pw-nav__group:hover {
    color: var(--vnex-text);
    background: color-mix(in srgb, var(--vnex-blue) 10%, transparent);
}
.vnex-pw-nav__group.is-active {
    color: #fff;
    background: var(--vnex-blue);
    border-color: color-mix(in srgb, var(--vnex-blue) 70%, #000);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--vnex-blue) 28%, transparent);
}
.vnex-pw-nav__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    background: color-mix(in srgb, currentColor 16%, transparent);
}
.vnex-pw-nav__group.is-active .vnex-pw-nav__count {
    background: color-mix(in srgb, #fff 22%, transparent);
}
.vnex-pw-nav__rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}
.vnex-pw-nav__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.05rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vnex-pw-nav__tab:hover {
    color: var(--vnex-text);
    background: color-mix(in srgb, var(--vnex-elevated, var(--vnex-card)) 80%, transparent);
    border-color: var(--vnex-border);
}
.vnex-pw-nav__tab.is-active {
    color: var(--vnex-text);
    background: color-mix(in srgb, var(--vnex-blue) 16%, var(--vnex-card));
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    box-shadow: inset 0 -2px 0 var(--vnex-blue);
}
html[dir="rtl"] .vnex-pw-nav__tab,
html[lang="ar"] .vnex-pw-nav__tab,
html[dir="rtl"] .vnex-pw-nav__group,
html[lang="ar"] .vnex-pw-nav__group {
    font-size: 0.9rem;
}
@media (max-width: 900px) {
    .vnex-pw-hero {
        grid-template-columns: 1fr;
    }
    .vnex-pw-hero__ring {
        justify-self: start;
    }
    .vnex-pw-commerce__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .vnex-pw-commerce__grid {
        grid-template-columns: 1fr;
    }
}
.vnex-pw-panel .fi-section-content-ctn,
.vnex-pw-panel.fi-section {
    border-radius: 1rem;
}
.vnex-pw-panel__inner {
    min-width: 0;
}
.vnex-pw-section-title {
    margin: 1.25rem 0 0.55rem;
    font-size: 0.95rem;
    font-weight: 750;
}
.vnex-pw-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--vnex-card);
}
.vnex-pw-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 70%, transparent);
}
.vnex-pw-checklist__item:last-child {
    border-bottom: 0;
}
.vnex-pw-checklist__item .is-done {
    text-decoration: line-through;
    opacity: 0.65;
}
.vnex-pw-panel .vnex-proj-dl > div {
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vnex-elevated, var(--vnex-card)) 88%, transparent);
}
html[dir="rtl"] .vnex-proj-tab.is-active,
html[lang="ar"] .vnex-proj-tab.is-active {
    font-weight: 700;
}
.vnex-proj-dl {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .vnex-proj-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vnex-proj-dl.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .vnex-proj-dl.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.vnex-proj-dl .is-wide { grid-column: 1 / -1; }
.vnex-proj-dl dt {
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-proj-dl dd {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--vnex-text);
}
.vnex-proj-dl dd.is-lg { font-size: 1.15rem; font-weight: 800; }
.vnex-proj-dl dd.is-pre { white-space: pre-wrap; }
.vnex-proj-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--vnex-muted);
}
.vnex-proj-bars {
    display: grid;
    gap: 0.65rem;
}
.vnex-proj-bar__label {
    font-size: 0.8rem;
    color: var(--vnex-muted);
    margin-bottom: 0.25rem;
}
.vnex-proj-bar__track {
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-border) 70%, transparent);
    overflow: hidden;
}
.vnex-proj-bar__track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--vnex-accent, #2563eb) 85%, transparent);
}

/* Shared detail KPI chrome (Project + Account + operating homes) */
.vnex-kpi-cockpit {
    margin-top: 0.25rem;
}
.vnex-kpi-alert-link {
    all: unset;
    cursor: pointer;
    color: inherit;
    text-align: inherit;
}
.vnex-kpi-alert-link:hover {
    color: var(--vnex-blue-bright);
    text-decoration: underline;
}
.vnex-pw-kpi strong.is-sm,
.vnex-pw-kpi .is-sm {
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
    word-break: break-word;
}
.vnex-kpi-identity {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
.vnex-kpi-home-strip {
    margin: 0 0 1.15rem;
}
.vnex-kpi-home-strip .vnex-pw-gauges {
    margin-bottom: 0.85rem;
}
.vnex-kpi-month {
    padding: 1rem 1.1rem;
}

/* Project workspace — Attention cockpit (rings + donuts) */
.vnex-pw-cockpit {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.vnex-pw-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}
.vnex-pw-pill.is-ok {
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.35);
}
.vnex-pw-pill.is-watch {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.35);
}
.vnex-pw-pill.is-risk {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.35);
}
.vnex-pw-pill.is-muted {
    color: var(--vnex-muted);
    background: rgba(161, 161, 170, 0.12);
    border-color: var(--vnex-border);
}
.vnex-pw-cockpit__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.9fr);
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--vnex-border));
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(251, 191, 36, 0.14), transparent 55%),
        radial-gradient(90% 80% at 100% 20%, rgba(56, 189, 248, 0.1), transparent 50%),
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-card) 88%, #1c1917), var(--vnex-card));
}
.vnex-pw-cockpit.is-ok .vnex-pw-cockpit__hero {
    border-color: color-mix(in srgb, #34d399 30%, var(--vnex-border));
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(52, 211, 153, 0.16), transparent 55%),
        radial-gradient(90% 80% at 100% 20%, rgba(56, 189, 248, 0.08), transparent 50%),
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-card) 88%, #052e1c), var(--vnex-card));
}
.vnex-pw-cockpit.is-risk .vnex-pw-cockpit__hero {
    border-color: color-mix(in srgb, #f87171 32%, var(--vnex-border));
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(248, 113, 113, 0.16), transparent 55%),
        radial-gradient(90% 80% at 100% 20%, rgba(251, 146, 60, 0.08), transparent 50%),
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-card) 88%, #3f0f0f), var(--vnex-card));
}
.vnex-pw-cockpit__hero-main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}
.vnex-pw-cockpit__hero-copy {
    min-width: 0;
}
.vnex-pw-cockpit__hero-copy h3 {
    margin: 0.45rem 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vnex-text);
}
.vnex-pw-cockpit__hero-copy > p {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.vnex-pw-alerts {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.vnex-pw-alerts li {
    padding: 0.45rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, #fbbf24 28%, var(--vnex-border));
    background: rgba(251, 191, 36, 0.08);
    color: color-mix(in srgb, #fde68a 80%, white);
    font-size: 0.84rem;
    font-weight: 600;
}
.vnex-pw-cockpit__kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.vnex-pw-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.85rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 70%, transparent);
}
.vnex-pw-kpi.is-hot {
    border-color: color-mix(in srgb, #f87171 40%, var(--vnex-border));
    background: rgba(248, 113, 113, 0.08);
}
.vnex-pw-kpi span {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pw-kpi strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-pw-kpi em {
    font-style: normal;
    margin-inline-start: 0.35rem;
    font-size: 0.78rem;
    color: var(--vnex-muted);
    font-weight: 700;
}
.vnex-pw-ring {
    position: relative;
    width: 6.5rem;
    height: 6.5rem;
    flex-shrink: 0;
}
.vnex-pw-ring--hero {
    width: 8.25rem;
    height: 8.25rem;
}
.vnex-pw-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.vnex-pw-ring__track {
    fill: none;
    stroke: color-mix(in srgb, var(--vnex-border) 85%, transparent);
    stroke-width: 9;
}
.vnex-pw-ring__value {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}
.vnex-pw-ring.is-ok .vnex-pw-ring__value,
.vnex-pw-ring--hero.is-ok .vnex-pw-ring__value { stroke: #34d399; }
.vnex-pw-ring.is-watch .vnex-pw-ring__value,
.vnex-pw-ring--hero.is-watch .vnex-pw-ring__value { stroke: #fbbf24; }
.vnex-pw-ring.is-risk .vnex-pw-ring__value,
.vnex-pw-ring--hero.is-risk .vnex-pw-ring__value { stroke: #f87171; }
.vnex-pw-ring.is-budget .vnex-pw-ring__value { stroke: #a78bfa; }
.vnex-pw-ring.is-schedule .vnex-pw-ring__value { stroke: #38bdf8; }
.vnex-pw-ring.is-progress .vnex-pw-ring__value { stroke: #34d399; }
.vnex-pw-ring.is-ms .vnex-pw-ring__value { stroke: #f59e0b; }
.vnex-pw-ring__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.vnex-pw-ring__center strong {
    font-size: 1.2rem;
    font-weight: 850;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.vnex-pw-ring--hero .vnex-pw-ring__center strong { font-size: 1.55rem; }
.vnex-pw-ring__center span {
    margin-top: 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pw-gauges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.vnex-pw-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 1rem 0.9rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid var(--vnex-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--vnex-card) 70%, transparent), var(--vnex-card));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.vnex-pw-gauge h4 {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-pw-gauge > p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--vnex-muted);
    line-height: 1.35;
}
.vnex-pw-gauge dl {
    width: 100%;
    margin: 0.35rem 0 0;
    display: grid;
    gap: 0.3rem;
    text-align: start;
}
.vnex-pw-gauge dl div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
}
.vnex-pw-gauge dt { color: var(--vnex-muted); }
.vnex-pw-gauge dd {
    margin: 0;
    font-weight: 750;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-pw-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.vnex-pw-panel {
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
}
.vnex-pw-panel__head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.85rem;
}
.vnex-pw-panel__head h4 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-pw-panel__head span {
    font-size: 0.78rem;
    color: var(--vnex-muted);
}
.vnex-pw-donut-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.vnex-pw-donut {
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(
        #34d399 0 var(--p-done, 0%),
        #38bdf8 var(--p-done, 0%) calc(var(--p-done, 0%) + var(--p-active, 0%)),
        #f87171 calc(var(--p-done, 0%) + var(--p-active, 0%)) calc(var(--p-done, 0%) + var(--p-active, 0%) + var(--p-blocked, 0%)),
        #71717a calc(var(--p-done, 0%) + var(--p-active, 0%) + var(--p-blocked, 0%)) 100%
    );
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.vnex-pw-donut__hole {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
    background: var(--vnex-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px var(--vnex-border);
}
.vnex-pw-donut__hole strong {
    font-size: 1.35rem;
    font-weight: 850;
    color: var(--vnex-text);
    line-height: 1;
}
.vnex-pw-donut__hole span {
    margin-top: 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pw-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--vnex-text);
}
.vnex-pw-legend li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 650;
}
.vnex-pw-legend span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.vnex-pw-legend .is-done span { background: #34d399; }
.vnex-pw-legend .is-active span { background: #38bdf8; }
.vnex-pw-legend .is-blocked span { background: #f87171; }
.vnex-pw-legend .is-other span { background: #71717a; }
.vnex-pw-stack {
    margin-top: 0.9rem;
    display: flex;
    height: 0.55rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--vnex-border) 70%, transparent);
}
.vnex-pw-stack i {
    display: block;
    height: 100%;
}
.vnex-pw-stack .is-done { background: #34d399; }
.vnex-pw-stack .is-active { background: #38bdf8; }
.vnex-pw-stack .is-blocked { background: #f87171; }
.vnex-pw-stack .is-other { background: #71717a; }
.vnex-pw-dims {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.vnex-pw-dim {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 80%, transparent);
}
.vnex-pw-dim__top {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.vnex-pw-dim__top strong {
    font-size: 0.82rem;
    font-weight: 750;
    color: var(--vnex-text);
}
.vnex-pw-dim__top em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--vnex-muted);
}
.vnex-pw-dim__bar {
    height: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-border) 75%, transparent);
    overflow: hidden;
}
.vnex-pw-dim__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.vnex-pw-dim.is-ok .vnex-pw-dim__bar span { background: linear-gradient(90deg, #059669, #34d399); }
.vnex-pw-dim.is-watch .vnex-pw-dim__bar span { background: linear-gradient(90deg, #d97706, #fbbf24); }
.vnex-pw-dim.is-risk .vnex-pw-dim__bar span { background: linear-gradient(90deg, #dc2626, #f87171); }
.vnex-pw-control {
    display: grid;
    grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.vnex-pw-control__card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--vnex-border));
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent 55%),
        var(--vnex-card);
}
.vnex-pw-control__card .vnex-pw-ring { width: 5.25rem; height: 5.25rem; }
.vnex-pw-control__card .vnex-pw-ring__center strong { font-size: 0.95rem; }
.vnex-pw-control__card h4 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-pw-control__card p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--vnex-muted);
}
.vnex-pw-control__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
}
.vnex-pw-control__stat.is-hot {
    border-color: color-mix(in srgb, #f87171 40%, var(--vnex-border));
    background: rgba(248, 113, 113, 0.07);
}
.vnex-pw-control__stat.is-watch {
    border-color: color-mix(in srgb, #fbbf24 40%, var(--vnex-border));
    background: rgba(251, 191, 36, 0.07);
}
.vnex-pw-control__stat span {
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pw-control__stat strong {
    font-size: 1.55rem;
    font-weight: 850;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
    .vnex-pw-cockpit__hero { grid-template-columns: 1fr; }
    .vnex-pw-gauges { grid-template-columns: 1fr; }
    .vnex-pw-panels { grid-template-columns: 1fr; }
    .vnex-pw-control { grid-template-columns: 1fr 1fr; }
    .vnex-pw-control__card { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .vnex-pw-cockpit__hero-main { flex-direction: column; align-items: flex-start; }
    .vnex-pw-dims { grid-template-columns: 1fr; }
    .vnex-pw-control { grid-template-columns: 1fr; }
    .vnex-pw-donut-row { flex-direction: column; align-items: flex-start; }
}

.vnex-payslip-egypt {
    margin: 0 0 1.15rem;
    padding: 1rem 1.1rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background:
        linear-gradient(165deg, rgba(96, 165, 250, 0.08), transparent 50%),
        color-mix(in srgb, var(--vnex-card) 94%, transparent);
}
.vnex-payslip-egypt__head {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.85rem;
}
.vnex-payslip-egypt__head strong {
    color: var(--vnex-text);
    font-size: 0.95rem;
}
.vnex-payslip-egypt__head span {
    color: var(--vnex-muted);
    font-size: 0.78rem;
}
.vnex-payslip-egypt__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.vnex-payslip-egypt__col {
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 45%, transparent);
}
.vnex-payslip-egypt__col.is-company {
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
    background: var(--vnex-warn-soft);
}
.vnex-payslip-egypt__col h4 {
    margin: 0 0 0.55rem;
    color: var(--vnex-text);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.vnex-payslip-egypt__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.vnex-payslip-egypt__col li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}
.vnex-payslip-egypt__col em {
    font-style: normal;
    color: var(--vnex-muted);
    font-size: 0.78rem;
}
.vnex-payslip-egypt__col strong {
    color: var(--vnex-text);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .vnex-payslip-egypt__grid {
        grid-template-columns: 1fr;
    }
}

/* (payslip earnings/deductions use .vnex-payroll-table — original layout) */

.vnex-payslip__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: color-mix(in srgb, var(--vnex-card) 88%, transparent);
}
.vnex-payslip__toolbar-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 12rem;
}
.vnex-payslip__toolbar-copy strong {
    color: var(--vnex-text);
    font-size: 0.9rem;
}
.vnex-payslip__toolbar-copy span {
    color: var(--vnex-muted);
    font-size: 0.78rem;
}
.vnex-payslip__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.vnex-payslip__toolbar-actions .vnex-ui__btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.vnex-payslip__status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
    margin: 0 0 0.85rem;
}
.vnex-payslip__status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
    font-size: 0.75rem;
    font-weight: 700;
}
.vnex-payslip__periods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.25rem;
}

.vnex-payslip-period-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 7.5rem;
    padding: 0.95rem 1rem 0.9rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background:
        linear-gradient(160deg, rgba(96, 165, 250, 0.08), transparent 46%),
        color-mix(in srgb, var(--vnex-card) 94%, transparent);
    box-shadow: var(--vnex-shadow);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.vnex-payslip-period-card:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 42%, var(--vnex-border));
    transform: translateY(-1px);
}

.vnex-payslip-period-card.is-active {
    border-color: color-mix(in srgb, var(--vnex-blue) 65%, var(--vnex-border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent),
        var(--vnex-shadow);
}

.vnex-payslip-period-card.is-checked {
    background:
        linear-gradient(160deg, rgba(74, 222, 128, 0.10), transparent 48%),
        color-mix(in srgb, var(--vnex-card) 94%, transparent);
}

.vnex-payslip-period-card__select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 1.55rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, transparent);
    color: var(--vnex-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    appearance: none;
    font: inherit;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vnex-payslip-period-card.is-checked .vnex-payslip-period-card__select,
.vnex-payslip-period-card__select.is-on {
    border-color: color-mix(in srgb, var(--vnex-ok) 45%, var(--vnex-border));
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
}

.vnex-payslip-period-card__body {
    appearance: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.vnex-payslip-period-card__icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 12px;
    color: var(--vnex-blue-bright);
    background: var(--vnex-blue-soft);
}

.vnex-payslip-period-card.is-active .vnex-payslip-period-card__icon {
    color: #fff;
    background: var(--vnex-blue);
}

.vnex-payslip-period-card__text {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.vnex-payslip-period-card__text strong {
    color: var(--vnex-text);
    font-size: 0.98rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.vnex-payslip-period-card__text em {
    font-style: normal;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.vnex-payslip-period-card__badge {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
}

.vnex-payslip-period-card__badge.is-exported {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}

.vnex-payslip-period-card__viewing {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .vnex-payslip__toolbar {
        align-items: stretch;
    }
    .vnex-payslip__toolbar-actions {
        width: 100%;
    }
    .vnex-payslip__periods {
        grid-template-columns: 1fr;
    }
}

/* Legacy pill selectors (unused) */
.vnex-payslip__period-wrap { display: none; }
.vnex-payslip__period { display: none; }

/* Payroll policy (ADR-033) */
.vnex-policy {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 1120px;
}
.vnex-policy__intro {
    margin: 0;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-blue) 10%, var(--vnex-card));
    color: var(--vnex-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.vnex-policy__intro p { margin: 0; }
.vnex-policy__flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
}
.vnex-policy__flow li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, transparent);
    color: var(--vnex-text);
    font-size: 0.72rem;
    font-weight: 750;
}
.vnex-policy__flow li:not(:last-child)::after {
    content: "?";
    margin-inline-start: 0.15rem;
    color: var(--vnex-muted);
    font-weight: 600;
}
.vnex-policy__flow li.is-company {
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border));
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
}
.vnex-policy__row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}
@media (min-width: 900px) {
    .vnex-policy__row--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.vnex-policy__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.vnex-policy-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vnex-border);
    border-radius: 16px;
    background: var(--vnex-card);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    min-height: 100%;
}
.vnex-policy-card--wide {
    min-height: 0;
}
.vnex-policy-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
}
.vnex-policy-card__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-policy-card__hint {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--vnex-muted);
}
.vnex-policy-card__body {
    flex: 1;
    padding: 1.1rem 1.15rem 1.25rem;
}
.vnex-policy-card__body.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.vnex-policy-tax-layout {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .vnex-policy-tax-layout {
        grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.35fr);
        align-items: start;
    }
}
.vnex-policy-tax-layout__meta {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}
.vnex-policy-fields {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .vnex-policy-fields {
        grid-template-columns: 1fr 1fr;
    }
    .vnex-policy-fields--2 {
        grid-template-columns: 1fr 1fr;
    }
}
.vnex-policy .vnex-insight-field input[type="number"],
.vnex-policy .vnex-insight-field input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
}
.dark .vnex-policy .vnex-insight-field input[type="number"],
html.dark .vnex-policy .vnex-insight-field input[type="number"] {
    background: #121216;
}
.vnex-policy .vnex-insight-field small {
    font-size: 0.72rem;
    color: var(--vnex-muted);
    font-weight: 550;
}
.vnex-policy-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vnex-text);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.vnex-policy-switch input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--vnex-blue);
}
.vnex-policy-brackets {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--vnex-border);
}
.vnex-policy-brackets__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.vnex-policy-brackets__head h3 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-policy-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--vnex-blue-bright);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.vnex-policy-link:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.vnex-policy-brackets__table {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.vnex-policy-brackets__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) 2.25rem;
    gap: 0.55rem;
    align-items: end;
}
.vnex-policy-brackets__row.is-head {
    padding: 0 0.15rem;
}
.vnex-policy-brackets__row.is-head span {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-policy-brackets__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
}
.vnex-policy-icon-btn {
    appearance: none;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.vnex-policy-icon-btn:hover:not(:disabled) {
    color: var(--vnex-bad);
    border-color: color-mix(in srgb, var(--vnex-bad) 45%, var(--vnex-border));
}
.vnex-policy-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.vnex-policy-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--vnex-muted);
    line-height: 1.4;
}
.vnex-policy__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.vnex-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.vnex-payroll-section-label {
    margin: 0.85rem 0 0.35rem;
    padding: 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-payroll-section-row td {
    padding-top: 0.85rem !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    border-bottom: 0 !important;
}

/* ?? Settings ? Server status cards ?? */
.vnex-srv {
    display: grid;
    gap: 1.1rem;
    font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
}

.vnex-srv__panel {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: var(--vnex-radius);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-blue) 7%, transparent), transparent 42%),
        var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    padding: 1.15rem 1.25rem 1.25rem;
}

.vnex-srv__panel--storage {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-ok) 8%, transparent), transparent 46%),
        var(--vnex-card);
}

.vnex-srv__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vnex-srv__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-srv__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vnex-text);
    line-height: 1.25;
}

.vnex-srv__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vnex-srv__pill.is-ok {
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
}

.vnex-srv__pill.is-warn {
    color: var(--vnex-warn);
    background: var(--vnex-warn-soft);
}

.vnex-srv__pill.is-bad {
    color: var(--vnex-bad);
    background: var(--vnex-bad-soft);
}

.vnex-srv__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.vnex-srv__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .vnex-srv__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vnex-srv__grid--storage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vnex-srv__metric--wide {
        grid-column: span 1;
    }
}

.vnex-srv__metric {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    background: color-mix(in srgb, var(--vnex-main, #151515) 55%, transparent);
    padding: 0.85rem 0.9rem;
    min-height: 4.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.vnex-srv__metric--status.is-ok {
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, transparent);
    background: color-mix(in srgb, var(--vnex-ok-soft) 70%, transparent);
}

.vnex-srv__metric--status.is-bad {
    border-color: color-mix(in srgb, var(--vnex-bad) 35%, transparent);
    background: color-mix(in srgb, var(--vnex-bad-soft) 70%, transparent);
}

.vnex-srv__metric-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-srv__metric-value {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.vnex-srv__metric-value--wrap {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.vnex-srv__metric-hint {
    font-size: 0.72rem;
    color: var(--vnex-muted);
    line-height: 1.35;
}

.vnex-srv__detail {
    margin: 0 0 1rem;
    color: var(--vnex-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.vnex-srv__ext {
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
}

.vnex-srv__ext-label {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-srv__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.vnex-srv__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.vnex-srv__chip.is-on {
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
    border-color: color-mix(in srgb, var(--vnex-ok) 28%, transparent);
}

.vnex-srv__chip.is-off {
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-border) 35%, transparent);
    border-color: color-mix(in srgb, var(--vnex-border) 80%, transparent);
}

.vnex-srv__chip .vnex-srv__dot {
    width: 0.38rem;
    height: 0.38rem;
    box-shadow: none;
}

.vnex-srv--ops {
    display: grid;
    gap: 1rem;
}

.vnex-srv__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vnex-accent, #0ea5e9);
    text-decoration: none;
}

.vnex-srv__log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.vnex-srv__log-action {
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0.55rem;
    border: 1px solid var(--vnex-border, #334155);
    background: transparent;
    color: inherit;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.vnex-srv__log-action:hover:not(:disabled) {
    border-color: var(--vnex-accent, #0ea5e9);
    color: var(--vnex-accent, #0ea5e9);
}

.vnex-srv__log-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.vnex-srv__log-action--danger:hover:not(:disabled) {
    border-color: #f87171;
    color: #f87171;
}

.vnex-srv__jobs,
.vnex-srv__files {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.vnex-srv__jobs code {
    margin-inline-end: 0.5rem;
    opacity: 0.75;
}

.vnex-srv__files li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.vnex-srv__logs {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 960px) {
    .vnex-srv__logs {
        grid-template-columns: 16rem 1fr;
        align-items: start;
    }
}

.vnex-srv__log-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.vnex-srv__log-btn {
    width: 100%;
    text-align: start;
    border-radius: 0.65rem;
    border: 1px solid var(--vnex-border, #334155);
    background: transparent;
    color: inherit;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    display: grid;
}

.vnex-srv__log-btn.is-on {
    border-color: var(--vnex-accent, #0ea5e9);
}

.vnex-srv__log-btn span {
    font-size: 0.72rem;
    opacity: 0.7;
}

.vnex-srv__log-body {
    margin: 0;
    max-height: 28rem;
    overflow: auto;
    padding: 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vnex-border, #334155);
    background: #0b1220;
    color: #e2e8f0;
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.vnex-srv__chip em {
    font-style: normal;
    font-size: 0.65rem;
    opacity: 0.75;
    margin-inline-start: 0.25rem;
}

/* ?? Provisioning Tasks detail cards ?? */
.vnex-prov {
    display: grid;
    gap: 1.15rem;
    font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
    margin-bottom: 0.25rem;
}

.vnex-prov__block {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: var(--vnex-radius);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-blue) 6%, transparent), transparent 40%),
        var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    padding: 1.1rem 1.2rem 1.2rem;
}

.vnex-prov__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.vnex-prov__eyebrow {
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-prov__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--vnex-text);
}

.vnex-prov__hint {
    font-size: 0.78rem;
    color: var(--vnex-muted);
    text-align: right;
}

.vnex-prov__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 900px) {
    .vnex-prov__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vnex-prov__card {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    background: color-mix(in srgb, var(--vnex-main, #111) 45%, transparent);
    padding: 0.85rem 0.9rem;
    min-height: 6.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vnex-prov__card--ok {
    border-color: color-mix(in srgb, var(--vnex-ok) 28%, transparent);
}

.vnex-prov__card--warn {
    border-color: color-mix(in srgb, var(--vnex-warn) 32%, transparent);
}

.vnex-prov__card--danger {
    border-color: color-mix(in srgb, var(--vnex-bad) 35%, transparent);
    background: color-mix(in srgb, var(--vnex-bad-soft) 55%, transparent);
}

.vnex-prov__card-top {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.vnex-prov__card-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--vnex-text);
}

.vnex-prov__card-code {
    font-size: 0.68rem;
    color: var(--vnex-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vnex-prov__card-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--vnex-text);
    line-height: 1.1;
    margin-top: 0.15rem;
}

.vnex-prov__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.vnex-prov__card-meta .is-ok { color: var(--vnex-ok); }
.vnex-prov__card-meta .is-bad { color: var(--vnex-bad); }
.vnex-prov__card-meta .is-mute { color: var(--vnex-muted); }

.vnex-prov__fail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

@media (min-width: 900px) {
    .vnex-prov__fail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vnex-prov__fail-card {
    border: 1px solid color-mix(in srgb, var(--vnex-bad) 28%, transparent);
    border-radius: var(--vnex-radius-sm);
    background: color-mix(in srgb, var(--vnex-bad-soft) 40%, transparent);
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vnex-prov__fail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vnex-prov__pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: lowercase;
}

.vnex-prov__pill.is-bad {
    color: var(--vnex-bad);
    background: var(--vnex-bad-soft);
}

.vnex-prov__fail-id {
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--vnex-muted);
}

.vnex-prov__fail-action {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vnex-text);
}

.vnex-prov__fail-company,
.vnex-prov__fail-error {
    margin: 0;
    font-size: 0.78rem;
    color: var(--vnex-muted);
    line-height: 1.35;
}

.vnex-prov__fail-error {
    color: color-mix(in srgb, var(--vnex-bad) 75%, var(--vnex-text));
}

.vnex-prov__fail-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--vnex-muted);
}

.vnex-prov__empty {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.9rem;
    grid-column: 1 / -1;
}

.vnex-prov__empty--ok {
    color: var(--vnex-ok);
}

.vnex-ui__input {
    appearance: none;
    border: 1px solid var(--vnex-border);
    border-radius: 10px;
    background: var(--vnex-card);
    color: var(--vnex-text);
    padding: 0.55rem 0.7rem;
    font: inherit;
    color-scheme: inherit;
}
.vnex-ui__input:focus {
    outline: 2px solid color-mix(in srgb, var(--vnex-blue) 45%, transparent);
    outline-offset: 1px;
}

/* -- Backup Center (ops) -- */
.vnex-bk {
    display: grid;
    gap: 1rem;
    font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
}

.vnex-bk__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: var(--vnex-radius);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--vnex-blue) 10%, transparent), transparent 48%),
        var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    padding: 1.25rem 1.35rem;
}

.vnex-bk__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-bk__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--vnex-text);
    line-height: 1.2;
}

.vnex-bk__sub {
    margin: 0.45rem 0 0;
    max-width: 40rem;
    color: var(--vnex-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.vnex-bk__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.vnex-bk__panel {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: var(--vnex-radius);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-blue) 6%, transparent), transparent 42%),
        var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    padding: 1.1rem 1.2rem 1.25rem;
}

.vnex-bk__panel--aside {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-ok) 7%, transparent), transparent 46%),
        var(--vnex-card);
}

.vnex-bk__panel--danger {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-bad) 8%, transparent), transparent 44%),
        var(--vnex-card);
}

.vnex-bk__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.vnex-bk__panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vnex-text);
}

.vnex-bk__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.vnex-bk__pill.is-ok { color: var(--vnex-ok); background: var(--vnex-ok-soft); }
.vnex-bk__pill.is-warn { color: var(--vnex-warn); background: var(--vnex-warn-soft); }
.vnex-bk__pill.is-bad { color: var(--vnex-bad); background: var(--vnex-bad-soft); }

.vnex-bk__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.vnex-bk__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 900px) {
    .vnex-bk__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vnex-bk__metric {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    background: color-mix(in srgb, var(--vnex-main, #151515) 55%, transparent);
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-height: 5rem;
}

.vnex-bk__kpi {
    appearance: none;
    width: 100%;
    text-align: start;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--vnex-card) 96%, #fff 4%), var(--vnex-card));
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset;
    padding: 0.95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-height: 7.5rem;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.vnex-bk__kpi:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
}

.vnex-bk__kpi.is-ok { border-color: color-mix(in srgb, var(--vnex-ok) 32%, var(--vnex-border)); }
.vnex-bk__kpi.is-warn { border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border)); }
.vnex-bk__kpi.is-bad { border-color: color-mix(in srgb, var(--vnex-bad) 42%, var(--vnex-border)); }

.vnex-bk__kpi-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2rem;
}

.vnex-bk__kpi-label {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    line-height: 1.25;
}

.vnex-bk__kpi-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--vnex-blue) 14%, transparent);
    color: var(--vnex-blue);
}

.vnex-bk__kpi.is-ok .vnex-bk__kpi-icon { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-bk__kpi.is-warn .vnex-bk__kpi-icon { background: var(--vnex-warn-soft); color: var(--vnex-warn); }
.vnex-bk__kpi.is-bad .vnex-bk__kpi-icon { background: var(--vnex-bad-soft); color: var(--vnex-bad); }

.vnex-bk__kpi-icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    max-width: 1.125rem;
    max-height: 1.125rem;
}

.vnex-bk__kpi-value {
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--vnex-text);
    word-break: break-word;
}

.vnex-bk__kpi-value.is-compact {
    font-size: 1.05rem;
    line-height: 1.35;
}

.vnex-bk__kpi.is-ok .vnex-bk__kpi-value { color: var(--vnex-ok); }
.vnex-bk__kpi.is-warn .vnex-bk__kpi-value { color: var(--vnex-warn); }
.vnex-bk__kpi.is-bad .vnex-bk__kpi-value { color: var(--vnex-bad); }

.vnex-bk__kpi-hint {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vnex-bk__metric-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-bk__metric-value {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--vnex-text);
    word-break: break-word;
}

.vnex-bk__metric-hint {
    font-size: 0.74rem;
    color: var(--vnex-muted);
    line-height: 1.35;
}

.vnex-bk__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--vnex-card) 92%, transparent);
}

.vnex-bk__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-weight: 800;
    font-size: 0.84rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    cursor: pointer;
}

.vnex-bk__tab:hover { color: var(--vnex-text); background: color-mix(in srgb, var(--vnex-blue) 8%, transparent); }
.vnex-bk__tab.is-active {
    color: #fff;
    background: var(--vnex-blue);
}

.vnex-bk__grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 980px) {
    .vnex-bk__grid { grid-template-columns: 1.35fr 0.95fr; }
}

.vnex-bk__actions {
    display: grid;
    gap: 0.65rem;
}

.vnex-bk__action {
    appearance: none;
    width: 100%;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    background: color-mix(in srgb, var(--vnex-main, #151515) 50%, transparent);
    padding: 0.9rem 1rem;
    cursor: pointer;
    display: grid;
    gap: 0.2rem;
}

.vnex-bk__action:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, transparent);
    background: color-mix(in srgb, var(--vnex-blue-soft) 55%, transparent);
}

.vnex-bk__action strong {
    color: var(--vnex-text);
    font-size: 0.95rem;
}

.vnex-bk__action span {
    color: var(--vnex-muted);
    font-size: 0.82rem;
}

.vnex-bk__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.vnex-bk__checklist li {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.86rem;
    color: var(--vnex-text);
    line-height: 1.4;
}

.vnex-bk__checklist li.is-in { border-color: color-mix(in srgb, var(--vnex-ok) 30%, transparent); }
.vnex-bk__checklist li.is-out { border-color: color-mix(in srgb, var(--vnex-border) 95%, transparent); opacity: 0.92; }
.vnex-bk__checklist strong { display: block; margin-bottom: 0.15rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vnex-muted); }

.vnex-bk__aside-note {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
}
.vnex-bk__aside-note p { margin: 0.35rem 0 0; color: var(--vnex-text); font-size: 0.88rem; font-weight: 700; }

.vnex-bk__detail {
    margin: 0 0 1rem;
    color: var(--vnex-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.vnex-bk__btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.vnex-bk__btn-danger {
    background: var(--vnex-bad) !important;
    color: #fff !important;
}

.vnex-bk__db-list { display: grid; gap: 0.65rem; }

.vnex-bk__db-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: flex-start;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    padding: 0.85rem 0.95rem;
}

.vnex-bk__db-row strong { display: block; color: var(--vnex-text); }
.vnex-bk__db-row code { display: inline-block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--vnex-muted); }
.vnex-bk__db-row p { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--vnex-muted); line-height: 1.4; max-width: 36rem; }

.vnex-bk__form { display: grid; gap: 1rem; }
.vnex-bk__form-grid {
    display: grid;
    gap: 0.75rem;
}
@media (min-width: 760px) {
    .vnex-bk__form-grid { grid-template-columns: 1fr 1fr; }
}

.vnex-bk__field {
    display: grid;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--vnex-text);
}
.vnex-bk__field .vnex-ui__input { width: 100%; }
.vnex-bk__field-hint { font-size: 0.76rem; font-weight: 600; color: var(--vnex-muted); }

.vnex-bk__checks,
.vnex-bk__check {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--vnex-text);
}
.vnex-bk__check { gap: 0.45rem; }
.vnex-bk__checks label { display: inline-flex; align-items: center; gap: 0.45rem; }

.vnex-bk__split {
    display: grid;
    gap: 1rem;
}
@media (min-width: 860px) {
    .vnex-bk__split { grid-template-columns: 1fr 1fr; }
}

.vnex-bk__block {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    padding: 0.95rem 1rem;
    display: grid;
    gap: 0.7rem;
}
.vnex-bk__block h4 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-bk__preview {
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    border-radius: var(--vnex-radius-sm);
    padding: 0.85rem 0.95rem;
    display: grid;
    gap: 0.35rem;
}
.vnex-bk__preview p { margin: 0; font-size: 0.86rem; color: var(--vnex-text); }
.vnex-bk__warn { color: var(--vnex-bad) !important; font-weight: 700; font-size: 0.82rem; }

.vnex-bk__table-wrap { overflow-x: auto; }
.vnex-bk__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.vnex-bk__table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
}
.vnex-bk__table td {
    padding: 0.75rem 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 82%, transparent);
    vertical-align: top;
    color: var(--vnex-text);
}
.vnex-bk__pkg { font-weight: 700; word-break: break-word; max-width: 18rem; }
.vnex-bk__table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}
.vnex-bk__empty {
    text-align: center;
    color: var(--vnex-muted);
    padding: 1.5rem 0.65rem !important;
}

.vnex-bk__tag {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.vnex-bk__tag.is-backup { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-bk__tag.is-restore { background: var(--vnex-warn-soft); color: var(--vnex-warn); }

.vnex-bk__status { font-weight: 800; text-transform: capitalize; }
.vnex-bk__status.is-succeeded { color: var(--vnex-ok); }
.vnex-bk__status.is-failed { color: var(--vnex-bad); }
.vnex-bk__status.is-partial { color: var(--vnex-warn); }
.vnex-bk__status.is-pending,
.vnex-bk__status.is-running { color: var(--vnex-warn); }

.vnex-bk__steps {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.55rem;
    color: var(--vnex-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* —— Work Schedule: company + shifts (same card language as HR stats) —— */
.vnex-ws {
    display: grid;
    gap: 1rem;
}
.vnex-ws__tabs {
    margin-bottom: 0.15rem;
}
.vnex-ws__accordion {
    display: grid;
    gap: 0.85rem;
}
.vnex-ws__acc {
    padding: 0;
    min-width: 0;
}
.vnex-ws__acc-trigger {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 0.65rem 0.85rem;
    padding: 1.05rem 1.15rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.vnex-ws__acc-copy {
    min-width: 0;
}
.vnex-ws__acc-copy .vnex-ws__title {
    margin: 0.1rem 0;
    font-size: 1.05rem;
}
.vnex-ws__acc-copy .vnex-ws__hint {
    margin: 0;
}
.vnex-ws__acc-chevron {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    color: var(--vnex-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.vnex-ws__acc.is-open .vnex-ws__acc-chevron {
    transform: rotate(180deg);
}
.vnex-ws__acc-body {
    padding: 0 1.15rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
@media (max-width: 640px) {
    .vnex-ws__acc-trigger {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .vnex-ws__acc-trigger .vnex-ws__pill {
        grid-column: 1;
        justify-self: start;
    }
    .vnex-ws__acc-chevron {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }
}
.vnex-ws__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .vnex-ws__split { grid-template-columns: 1fr; }
}
.vnex-ws__panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
    padding: 1.1rem 1.15rem 1.25rem;
    color: var(--vnex-text);
}
.vnex-ws__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--vnex-blue);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-blue) 40%, transparent);
}
.vnex-ws__panel.is-company {
    accent-color: var(--vnex-blue);
}
.vnex-ws__panel.is-shifts {
    accent-color: var(--vnex-warn);
}
.vnex-ws__panel.is-shifts::after {
    background: var(--vnex-warn);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-warn) 40%, transparent);
}
.vnex-ws__panel.is-overrides {
    max-width: 52rem;
    accent-color: #38bdf8;
}
.vnex-ws__panel.is-overrides::after {
    background: #38bdf8;
    box-shadow: 0 0 14px color-mix(in srgb, #38bdf8 40%, transparent);
}
.vnex-ws__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.vnex-ws__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    margin-bottom: 0.2rem;
}
.vnex-ws__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vnex-text) !important;
    letter-spacing: -0.02em;
}
.vnex-ws__hint {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--vnex-muted) !important;
    max-width: 28rem;
}
.vnex-ws__pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 28%, var(--vnex-border));
}
.vnex-ws__pill.is-amber {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
    border-color: color-mix(in srgb, var(--vnex-warn) 32%, var(--vnex-border));
}
.vnex-ws__alert { margin-bottom: 0.85rem; }
.vnex-ws__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.95rem;
}
.vnex-ws__meta--shift {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) auto;
    align-items: end;
}
@media (max-width: 640px) {
    .vnex-ws__meta,
    .vnex-ws__meta--shift { grid-template-columns: 1fr; }
}
.vnex-ws__panel .vnex-insight-field span {
    color: var(--vnex-muted);
}
.vnex-ws__panel .vnex-insight-field input,
.vnex-ws__panel .vnex-insight-select__trigger {
    background: color-mix(in srgb, var(--vnex-main, #fff) 88%, var(--vnex-card));
    border-color: var(--vnex-border);
    color: var(--vnex-text);
}
.vnex-ws__active {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    padding: 0 0.15rem;
    font-weight: 700;
    color: var(--vnex-text);
    font-size: 0.9rem;
}
.vnex-ws__week {
    display: grid;
    gap: 0.4rem;
}
.vnex-ws__day {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.85fr) minmax(0, 1.4fr);
    gap: 0.55rem 0.75rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: 0.7rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main, transparent) 55%, var(--vnex-card));
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.vnex-ws__day.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 42%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-blue) 8%, var(--vnex-card));
}
.vnex-ws__panel.is-shifts .vnex-ws__day.is-on {
    border-color: color-mix(in srgb, var(--vnex-warn) 45%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn) 9%, var(--vnex-card));
}
.vnex-ws__panel.is-overrides .vnex-ws__day.is-on {
    border-color: color-mix(in srgb, #38bdf8 45%, var(--vnex-border));
    background: color-mix(in srgb, #38bdf8 9%, var(--vnex-card));
}
.vnex-ws__day.is-off { opacity: 0.78; }
.vnex-ws__day-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    color: var(--vnex-text);
    font-size: 0.9rem;
    margin: 0;
}
.vnex-ws__day-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.vnex-ws__day-times .vnex-insight-field span { font-size: 0.65rem; }
.vnex-ws__day-times input[type="time"] { min-height: 2.15rem; }
@media (max-width: 520px) {
    .vnex-ws__day { grid-template-columns: 1fr; }
}
.vnex-ws__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
}
.vnex-ws__meta-note {
    font-size: 0.78rem;
    color: var(--vnex-muted);
    font-weight: 600;
}
.vnex-ws__saved {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--vnex-border);
    display: grid;
    gap: 0.45rem;
}
.vnex-ws__saved-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    margin-bottom: 0.15rem;
}
.vnex-ws__shift-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main, transparent) 45%, var(--vnex-card));
}
.vnex-ws__shift-row.is-editing {
    border-color: color-mix(in srgb, var(--vnex-warn) 50%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn) 8%, var(--vnex-card));
}
.vnex-ws__shift-row.is-inactive { opacity: 0.65; }
.vnex-ws__shift-name {
    font-weight: 800;
    color: var(--vnex-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.vnex-ws__code {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 0.35rem;
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
}
.vnex-ws__shift-meta {
    font-size: 0.8rem;
    color: var(--vnex-muted);
    margin-top: 0.15rem;
}
.vnex-ws__shift-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.vnex-ws__employee-pick {
    max-width: 28rem;
    margin-bottom: 1rem;
}

/* —— Payroll company CFO month summary (aligned with vnex-stat-card tones) —— */
.vnex-cfo {
    display: grid;
    gap: 1rem;
}
.vnex-cfo__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.vnex-cfo__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-cfo__title {
    margin: 0.2rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vnex-text);
    letter-spacing: -0.02em;
}
.vnex-cfo__hint {
    margin: 0.4rem 0 0;
    max-width: 40rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--vnex-muted);
}
.vnex-cfo__month {
    min-width: 16rem;
}
.vnex-cfo__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.vnex-cfo__pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 28%, var(--vnex-border));
}
.vnex-cfo__pill.is-muted {
    background: color-mix(in srgb, var(--vnex-muted) 10%, var(--vnex-card));
    color: var(--vnex-muted);
    border-color: var(--vnex-border);
}
.vnex-cfo__pill.is-status {
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
    border-color: color-mix(in srgb, var(--vnex-ok) 32%, var(--vnex-border));
}
.vnex-cfo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 900px) {
    .vnex-cfo__grid { grid-template-columns: 1fr; }
}
.vnex-cfo__panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
    padding: 1rem 1.1rem 1.15rem;
}
.vnex-cfo__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--vnex-blue);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-blue) 45%, transparent);
}
.vnex-cfo__panel.is-success::after {
    background: var(--vnex-ok);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-ok) 45%, transparent);
}
.vnex-cfo__panel.is-warning::after {
    background: var(--vnex-warn);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-warn) 45%, transparent);
}
.vnex-cfo__panel.is-info::after {
    background: #38bdf8;
    box-shadow: 0 0 14px color-mix(in srgb, #38bdf8 45%, transparent);
}
.vnex-cfo__panel.is-primary::after {
    background: var(--vnex-blue);
}
.vnex-cfo__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.vnex-cfo__panel h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-cfo__panel-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}
.vnex-cfo__panel-icon.is-success { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-cfo__panel-icon.is-warning { background: var(--vnex-warn-soft); color: var(--vnex-warn); }
.vnex-cfo__panel-icon.is-info { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.vnex-cfo__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.vnex-cfo__panel li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    font-size: 0.9rem;
}
.vnex-cfo__panel li span { color: var(--vnex-muted); }
.vnex-cfo__panel li strong {
    color: var(--vnex-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.vnex-cfo__note {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}
.vnex-cfo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

/* Bonuses & deductions full page */
.vnex-pa { display: grid; gap: 1.1rem; }
.vnex-pa__top {
    display: grid;
    grid-template-columns: minmax(0, 28rem);
    gap: 0.85rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
}
@media (max-width: 700px) {
    .vnex-pa__top { grid-template-columns: 1fr; }
}
.vnex-pa__employee select {
    width: 100%;
}
.vnex-pa__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .vnex-pa__split { grid-template-columns: 1fr; }
}
.vnex-pa__panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    padding: 1rem 1.1rem 1.25rem;
    color: var(--vnex-text);
}
.vnex-pa__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--vnex-ok);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-ok) 40%, transparent);
}
.vnex-pa__panel.is-deduct::after {
    background: var(--vnex-warn);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-warn) 40%, transparent);
}
.vnex-pa__panel-head { margin-bottom: 0.85rem; }
.vnex-pa__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-pa__title {
    margin: 0.15rem 0 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--vnex-text) !important;
    letter-spacing: -0.02em;
}
.vnex-pa__hint {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--vnex-muted);
    line-height: 1.4;
}
.vnex-pa__rows { display: grid; gap: 0.85rem; }
.vnex-pa__row {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
}
.vnex-pa__panel.is-earn .vnex-pa__row {
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok) 7%, var(--vnex-card));
}
.vnex-pa__panel.is-deduct .vnex-pa__row {
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn) 7%, var(--vnex-card));
}
.vnex-pa__row-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) auto;
    gap: 0.55rem;
    align-items: end;
}
.vnex-pa__panel.is-deduct .vnex-pa__row-top {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
}
@media (max-width: 700px) {
    .vnex-pa__row-top { grid-template-columns: 1fr; }
    .vnex-pa__check { padding-bottom: 0; }
}
.vnex-pa__period {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}
@media (max-width: 700px) {
    .vnex-pa__period { grid-template-columns: 1fr 1fr; }
}
.vnex-pa__check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vnex-text);
    padding-bottom: 0.35rem;
    white-space: nowrap;
}
.vnex-pa__remove {
    justify-self: start;
    border: 0;
    background: transparent;
    color: var(--vnex-warn);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.vnex-pa__remove:hover { color: var(--vnex-bad); }
.vnex-pa__row-note textarea { width: 100%; resize: vertical; min-height: 2.6rem; }
.vnex-pa__panel-actions { margin-top: 0.85rem; }
.vnex-pa__save {
    display: flex;
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .vnex-pa__save { justify-content: stretch; }
    .vnex-pa__save .fi-btn,
    .vnex-pa__save button { width: 100%; }
}
.vnex-pa__existing {
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    padding: 1rem 1.1rem;
}
.vnex-pa__existing-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--vnex-text) !important;
}
.vnex-pa__existing-head p {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8rem;
    color: var(--vnex-muted);
}
.vnex-pa__list { display: grid; gap: 0.55rem; }
.vnex-pa__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 45%, var(--vnex-card));
}
.vnex-pa__item.is-earn { border-left: 3px solid var(--vnex-ok); }
.vnex-pa__item.is-deduct { border-left: 3px solid var(--vnex-warn); }
.vnex-pa__item.is-editing {
    flex-direction: column;
    align-items: stretch;
}
.vnex-pa__edit {
    display: grid;
    gap: 0.65rem;
    width: 100%;
}
.vnex-pa__item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.vnex-pa__item-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--vnex-text);
}
.vnex-pa__item-meta {
    font-size: 0.78rem;
    color: var(--vnex-muted);
    margin-top: 0.15rem;
}

/* Favourites pinned cards */
.vnex-fav { display: grid; gap: 1.25rem; }

.vnex-fav__hero-aside {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.vnex-fav__refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-blue) 10%, transparent);
    color: color-mix(in srgb, var(--vnex-blue) 90%, white);
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.vnex-fav__refresh:hover {
    background: color-mix(in srgb, var(--vnex-blue) 18%, transparent);
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--vnex-blue) 22%, transparent);
    transform: translateY(-1px);
}
.vnex-fav__refresh.is-refreshing .vnex-fav__refresh-icon {
    animation: vnex-fav-spin 0.8s linear infinite;
}
@keyframes vnex-fav-spin {
    to { transform: rotate(360deg); }
}

.vnex-fav__section {
    position: relative;
    border-radius: calc(var(--vnex-radius-sm) + 2px);
    padding: 1.15rem 1.2rem 1.3rem;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 14%, var(--vnex-border));
    background:
        radial-gradient(680px 180px at 0% 0%, color-mix(in srgb, var(--vnex-blue) 8%, transparent), transparent 55%),
        var(--vnex-card);
    box-shadow:
        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
        var(--vnex-shadow);
}

.vnex-fav__section-head { margin-bottom: 1rem; }
.vnex-fav__eyebrow {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--vnex-blue) 70%, var(--vnex-muted));
}
.vnex-fav__section-title {
    margin: 0.2rem 0 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--vnex-text) !important;
    letter-spacing: -0.025em;
}

.vnex-fav__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
}

.vnex-fav__card {
    position: relative;
    display: grid;
    gap: 0;
    padding: 0;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    background:
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--vnex-card) 92%, white 8%) 0%,
            color-mix(in srgb, var(--vnex-main) 70%, var(--vnex-card)) 100%
        );
    color: var(--vnex-text);
    overflow: hidden;
    transition:
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, black 18%, transparent);
}
.vnex-fav__card::before {
    content: "";
    position: absolute;
    inset-block: 0.85rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--vnex-blue), color-mix(in srgb, var(--vnex-blue) 55%, transparent));
    opacity: 0.9;
}
.vnex-fav__card.is-file::before {
    background: linear-gradient(180deg, var(--vnex-warn), color-mix(in srgb, var(--vnex-warn) 55%, transparent));
}
.vnex-fav__card:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 38%, var(--vnex-border));
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--vnex-blue) 14%, transparent),
        0 2px 8px color-mix(in srgb, black 22%, transparent);
}

.vnex-fav__card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem 1.1rem;
    min-width: 0;
}

.vnex-fav__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--vnex-ok-soft), color-mix(in srgb, var(--vnex-ok) 8%, transparent));
    color: var(--vnex-ok);
    border: 1px solid color-mix(in srgb, var(--vnex-ok) 28%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--vnex-ok) 18%, transparent);
}
.vnex-fav__card.is-file .vnex-fav__icon {
    background: linear-gradient(145deg, var(--vnex-warn-soft), color-mix(in srgb, var(--vnex-warn) 8%, transparent));
    color: var(--vnex-warn);
    border-color: color-mix(in srgb, var(--vnex-warn) 28%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--vnex-warn) 18%, transparent);
}

.vnex-fav__body { min-width: 0; flex: 1; }
.vnex-fav__kind {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    margin-bottom: 0.25rem;
}
.vnex-fav__name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--vnex-text) !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.vnex-fav__path {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--vnex-muted) 88%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vnex-fav__actions {
    display: flex;
    gap: 0.45rem;
    padding: 0.75rem 0.85rem 0.85rem 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 70%, transparent);
    background: color-mix(in srgb, var(--vnex-main) 35%, transparent);
}

.vnex-fav__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.vnex-fav__btn.is-primary {
    background: linear-gradient(135deg, var(--vnex-blue), color-mix(in srgb, var(--vnex-blue) 78%, #6366f1));
    border-color: color-mix(in srgb, var(--vnex-blue) 60%, transparent);
    color: #fff !important;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}
.vnex-fav__btn.is-primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--vnex-blue) 42%, transparent);
}
.vnex-fav__btn.is-ghost {
    background: color-mix(in srgb, var(--vnex-card) 55%, transparent);
    border-color: color-mix(in srgb, var(--vnex-border) 90%, transparent);
    color: var(--vnex-muted);
}
.vnex-fav__btn.is-ghost:hover {
    background: color-mix(in srgb, #fbbf24 12%, var(--vnex-card));
    border-color: color-mix(in srgb, #fbbf24 45%, var(--vnex-border));
    color: #fbbf24;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .vnex-fav__grid { grid-template-columns: 1fr; }
    .vnex-fav__hero-aside { width: 100%; }
    .vnex-fav__actions { flex-direction: column; }
}

/* —— Explorer / Navigator library cards —— */
.vnex-libs { display: grid; gap: 1.1rem; }
.vnex-libs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}
.vnex-libs__card {
    --lib-accent: var(--vnex-blue);
    --lib-soft: var(--vnex-blue-soft);
    position: relative;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.9rem 0.9rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--lib-accent) 22%, var(--vnex-border));
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--lib-accent) 14%, transparent), transparent 55%),
        color-mix(in srgb, var(--vnex-card) 92%, transparent);
    box-shadow: var(--vnex-shadow);
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.vnex-libs__card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lib-accent);
    opacity: 0.95;
}
.vnex-libs__card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lib-accent) 45%, var(--vnex-border));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--lib-accent) 18%, transparent);
}
.vnex-libs__card.is-blue { --lib-accent: var(--vnex-blue); --lib-soft: var(--vnex-blue-soft); }
.vnex-libs__card.is-cyan { --lib-accent: #38bdf8; --lib-soft: rgba(56, 189, 248, 0.16); }
.vnex-libs__card.is-green { --lib-accent: var(--vnex-ok); --lib-soft: var(--vnex-ok-soft); }
.vnex-libs__card.is-amber { --lib-accent: var(--vnex-warn); --lib-soft: var(--vnex-warn-soft); }
.vnex-libs__card.is-violet { --lib-accent: #a78bfa; --lib-soft: rgba(167, 139, 250, 0.16); }
.vnex-libs__card.is-rose { --lib-accent: #f472b6; --lib-soft: rgba(244, 114, 182, 0.16); }

.vnex-libs__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.vnex-libs__icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.7rem;
    background: var(--lib-soft);
    color: var(--lib-accent);
}
.vnex-libs__pin-dot {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: var(--lib-soft);
    color: var(--lib-accent);
}
.vnex-libs__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vnex-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vnex-libs__path {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--vnex-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vnex-libs__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.vnex-libs__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 750;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vnex-libs__btn.is-open {
    background: var(--lib-accent);
    color: #0b1220;
}
.vnex-libs__card.is-blue .vnex-libs__btn.is-open,
.vnex-libs__card.is-violet .vnex-libs__btn.is-open,
.vnex-libs__card.is-rose .vnex-libs__btn.is-open {
    color: #fff;
}
.vnex-libs__btn.is-open:hover { filter: brightness(1.08); }
.vnex-libs__btn.is-pin {
    background: color-mix(in srgb, var(--vnex-card) 70%, transparent);
    border-color: color-mix(in srgb, var(--lib-accent) 28%, var(--vnex-border));
    color: var(--vnex-text);
}
.vnex-libs__btn.is-pin:hover {
    border-color: color-mix(in srgb, var(--lib-accent) 55%, var(--vnex-border));
    color: var(--lib-accent);
    background: var(--lib-soft);
}

@media (max-width: 1100px) {
    .vnex-libs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .vnex-libs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .vnex-libs__grid { grid-template-columns: 1fr; }
    .vnex-libs__actions { grid-template-columns: 1fr; }
}

/* —— Locale switcher (ADR-039) —— */
.vnex-locale-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-end: 0.5rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.vnex-locale-switch__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #a1a1aa;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.vnex-locale-switch__btn:hover:not(:disabled) {
    color: #fafafa;
    background: rgba(255, 255, 255, 0.06);
}

.vnex-locale-switch__btn.is-active,
.vnex-locale-switch__btn:disabled.is-active {
    color: #fff;
    background: #3b82f6;
    cursor: default;
}

/* ===== ADR-039: RTL layout for custom VNEX UI (logical properties) ===== */
html[dir="rtl"] .vnex-ui,
html[dir="rtl"] .vnex-payslip,
html[dir="rtl"] .vnex-punch,
html[dir="rtl"] .vnex-payroll-group,
html[dir="rtl"] .vnex-stat-grid {
    text-align: start;
}

html[dir="rtl"] .vnex-stat-card__row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .vnex-punch__map-top,
html[dir="rtl"] .vnex-payslip__toolbar,
html[dir="rtl"] .vnex-payslip__status-row,
html[dir="rtl"] .vnex-payroll-group__head {
    flex-direction: row-reverse;
}

html[dir="rtl"] .vnex-punch__chip-ico {
    transform: scaleX(-1);
}

html[dir="rtl"] .vnex-payslip__toolbar-copy,
html[dir="rtl"] .vnex-payslip-period-card__text,
html[dir="rtl"] .vnex-payslip-egypt__head,
html[dir="rtl"] .vnex-payslip-egypt__col h4,
html[dir="rtl"] .vnex-payroll-group__name,
html[dir="rtl"] .vnex-payroll-group__code,
html[dir="rtl"] .vnex-payroll-group__net-label,
html[dir="rtl"] .vnex-payroll-table th,
html[dir="rtl"] .vnex-payroll-table td {
    text-align: start;
}

html[dir="rtl"] .vnex-payroll-table td.col-amt,
html[dir="rtl"] .vnex-payroll-table th.col-amt,
html[dir="rtl"] .vnex-payroll-group__net-value {
    text-align: end;
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .vnex-payslip-egypt__col li {
    flex-direction: row-reverse;
}

html[dir="rtl"] .vnex-payslip-period-card__body {
    text-align: start;
}

html[dir="rtl"] .vnex-dash-empty {
    text-align: center;
}

/* CRM Setup — surfaces + industry packs */
.vnex-crm-setup {
    display: grid;
    gap: 1rem;
}
.vnex-crm-setup__summary {
    display: grid;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1.05rem;
    border: 1px solid var(--vnex-border);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vnex-blue) 16%, transparent), transparent 55%),
        var(--vnex-card);
}
.vnex-crm-setup__summary-eyebrow {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-crm-setup__summary-title {
    margin: 0.25rem 0 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-crm-setup__summary-lede {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    color: var(--vnex-muted);
    max-width: 52rem;
}
.vnex-crm-setup__summary-chips,
.vnex-crm-setup__reco {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.vnex-crm-setup__chip,
.vnex-crm-setup__reco-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--vnex-muted);
    background: transparent;
}
.vnex-crm-setup__chip.is-on,
.vnex-crm-setup__reco-chip.is-on {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.12);
}
.vnex-crm-setup__chip.is-off,
.vnex-crm-setup__reco-chip.is-off {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.1);
}
.vnex-crm-setup__chip.is-preset {
    color: var(--vnex-blue-bright);
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
}
.vnex-crm-setup__chip.is-custom {
    color: var(--vnex-muted);
}
.vnex-crm-setup__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.15rem;
}
.vnex-crm-setup__link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-blue) 10%, transparent);
    color: var(--vnex-blue-bright);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
.vnex-crm-setup__link:hover {
    background: color-mix(in srgb, var(--vnex-blue) 18%, transparent);
    text-decoration: underline;
}
.vnex-crm-setup__section-kicker {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vnex-blue-bright);
    margin-bottom: 0.35rem;
}
.vnex-crm-setup__hint.is-tight {
    margin-top: 0.25rem;
    margin-bottom: 0.55rem;
}
.vnex-crm-surfaces__preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-elevated, var(--vnex-card));
    color: var(--vnex-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}
.vnex-crm-surfaces__preset-btn em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 750;
    opacity: 0.8;
}
.vnex-crm-surfaces__preset-btn.is-active {
    color: #fff;
    background: var(--vnex-blue);
    border-color: var(--vnex-blue);
}
.vnex-crm-setup-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.vnex-crm-setup-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.vnex-crm-setup-modal__panel {
    position: relative;
    z-index: 1;
    width: min(28rem, 100%);
    padding: 1.2rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.vnex-crm-setup-modal__panel h3 {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--vnex-text);
}
.vnex-crm-setup-modal__panel > p {
    margin: 0 0 0.75rem;
    color: var(--vnex-muted);
    font-size: 0.88rem;
}
.vnex-crm-setup-modal__check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.85rem 0 0.25rem;
    color: var(--vnex-text);
    font-size: 0.88rem;
    font-weight: 650;
}
.vnex-crm-setup-modal__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.vnex-crm-setup__intro {
    display: grid;
    gap: 0.75rem;
}

.vnex-crm-setup__lede {
    margin: 0;
    color: var(--vnex-muted, #a1a1aa);
    font-size: 0.95rem;
    line-height: 1.55;
}

.vnex-crm-setup__active {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    font-size: 0.875rem;
    font-weight: 600;
}

.vnex-crm-setup__active-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.vnex-crm-setup__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .vnex-crm-setup__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.vnex-crm-setup__card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem 1.2rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(24, 24, 27, 0.72);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

html:not(.dark) .vnex-crm-setup__card {
    background: #fff;
    border-color: #e4e4e7;
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.06);
}

.vnex-crm-setup__card.is-active {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 12px 28px rgba(0, 0, 0, 0.22);
}

.vnex-crm-setup__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.vnex-crm-setup__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vnex-text, #f4f4f5);
}

html:not(.dark) .vnex-crm-setup__title {
    color: #18181b;
}

.vnex-crm-setup__blurb {
    margin: 0.35rem 0 0;
    color: var(--vnex-muted, #a1a1aa);
    font-size: 0.9rem;
    line-height: 1.5;
}

.vnex-crm-setup__badge {
    flex-shrink: 0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
    font-size: 0.75rem;
    font-weight: 700;
}
.vnex-crm-setup__badge.is-inactive {
    background: color-mix(in srgb, var(--vnex-border) 70%, transparent);
    color: var(--vnex-muted, #a1a1aa);
}

.vnex-crm-setup__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #71717a;
}

.vnex-crm-setup__path-block {
    display: grid;
    gap: 0.45rem;
}

.vnex-crm-setup__path {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0.65rem;
    list-style: none;
    border-radius: 0.75rem;
    background: rgba(39, 39, 42, 0.85);
    border: 1px solid rgba(63, 63, 70, 0.8);
}

html:not(.dark) .vnex-crm-setup__path {
    background: #f4f4f5;
    border-color: #e4e4e7;
}

.vnex-crm-setup__path > li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.vnex-crm-setup__path > li > span:first-child {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.14);
    color: #bae6fd;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

html:not(.dark) .vnex-crm-setup__path > li > span:first-child {
    background: #e0f2fe;
    color: #0369a1;
}

.vnex-crm-setup__arrow {
    color: #71717a;
    font-size: 0.8rem;
}

.vnex-crm-setup__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.vnex-crm-setup__list li {
    position: relative;
    padding-inline-start: 1.15rem;
    color: var(--vnex-muted, #a1a1aa);
    font-size: 0.9rem;
    line-height: 1.4;
}

.vnex-crm-setup__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #38bdf8;
}

.vnex-crm-setup__actions {
    margin-top: auto;
    padding-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.vnex-crm-setup__actions .fi-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 520px) {
    .vnex-crm-setup__actions .fi-btn {
        width: auto;
    }
}

.vnex-crm-setup__hint {
    margin: 0;
    color: var(--vnex-muted, #a1a1aa);
    font-size: 0.85rem;
    line-height: 1.5;
}

.vnex-crm-surfaces {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.vnex-crm-surfaces__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vnex-border, rgba(63, 63, 70, 0.8));
    background: color-mix(in srgb, var(--vnex-card, #18181b) 92%, transparent);
    cursor: pointer;
}

.vnex-crm-surfaces__row.is-locked {
    opacity: 0.85;
    cursor: default;
}

.vnex-crm-surfaces__copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.vnex-crm-surfaces__copy strong {
    font-size: 0.95rem;
    color: var(--vnex-text, #fafafa);
}

.vnex-crm-surfaces__copy span {
    font-size: 0.82rem;
    color: var(--vnex-muted, #a1a1aa);
    line-height: 1.4;
}

.vnex-crm-surfaces__row input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    accent-color: var(--vnex-blue, #4f6ef5);
}

.vnex-crm-surfaces__presets {
    margin-top: 1rem;
    display: grid;
    gap: 0.55rem;
}

.vnex-crm-surfaces__preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.vnex-review {
    display: grid;
    gap: 1rem;
    color: var(--vnex-text);
    color-scheme: light;
}

html.dark .vnex-review,
.dark .vnex-review {
    color-scheme: dark;
}

.vnex-review a {
    color: var(--vnex-blue);
}

.vnex-hub-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-bottom: 1px solid var(--vnex-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: thin;
}

.vnex-hub-page-header {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.vnex-hub-page-header .fi-header {
    background: transparent !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.vnex-hub-page-header .fi-header-heading {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

.vnex-hub-page-header__sub {
    margin: 0.15rem 0 0;
}

.vnex-hub-nav {
    min-width: 0;
}

.vnex-hub-nav__meta {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--vnex-muted);
}

.vnex-export-catalog__nav {
    margin-bottom: 0.85rem;
}

.vnex-seg-rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--vnex-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

.vnex-seg-rail__item,
.vnex-hub-tabs__tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    appearance: none;
    margin-bottom: -1px;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.vnex-seg-rail__item:hover,
.vnex-hub-tabs__tab:hover {
    color: var(--vnex-text);
    background: transparent;
}

.vnex-seg-rail__item.is-on,
.vnex-hub-tabs__tab.is-on {
    color: var(--vnex-blue-bright);
    background: transparent;
    border-bottom-color: var(--vnex-blue);
    box-shadow: none;
}

.vnex-review a.vnex-hub-tabs__tab,
.vnex-review a.vnex-seg-rail__item {
    color: var(--vnex-muted);
}

.vnex-review a.vnex-hub-tabs__tab.is-on,
.vnex-review a.vnex-seg-rail__item.is-on {
    color: var(--vnex-blue-bright);
}

/* Hub header actions — light ghost pills */
.vnex-hub-page-header .fi-header-actions-ctn,
.vnex-hub-page-header .fi-ac-header-actions,
.vnex-hub-page-header .fi-page-header-actions {
    display: inline-flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.vnex-hub-page-header .fi-ac-btn-action {
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    padding: 0.42rem 0.82rem !important;
    min-height: unset !important;
    box-shadow: none !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
}

.vnex-hub-page-header .fi-ac-btn-action.fi-color-gray,
.vnex-hub-page-header .fi-ac-btn-action.fi-color-primary,
.vnex-hub-page-header .fi-ac-btn-action:not(.fi-color-warning):not(.fi-color-danger) {
    background: color-mix(in srgb, var(--vnex-text) 3%, transparent) !important;
    color: var(--vnex-text, #fafafa) !important;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent) !important;
}

.vnex-hub-page-header .fi-ac-btn-action.fi-color-gray:hover,
.vnex-hub-page-header .fi-ac-btn-action.fi-color-primary:hover,
.vnex-hub-page-header .fi-ac-btn-action:not(.fi-color-warning):not(.fi-color-danger):hover {
    background: color-mix(in srgb, var(--vnex-blue) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--vnex-blue-bright) 35%, transparent) !important;
}

.vnex-hub-page-header .fi-ac-btn-action.fi-color-warning {
    background: color-mix(in srgb, var(--vnex-warn) 88%, #000) !important;
    color: #18181b !important;
    border: 1px solid color-mix(in srgb, var(--vnex-warn) 70%, transparent) !important;
}

.vnex-hub-page-header .fi-ac-btn-action.fi-color-warning:hover {
    background: var(--vnex-warn, #fbbf24) !important;
    color: #18181b !important;
}

.vnex-lede {
    position: relative;
    overflow: hidden;
    padding-block: 1.05rem 1.1rem;
    padding-inline: 1.4rem 1.25rem;
    border-radius: var(--vnex-radius, 14px);
    border: 1px solid color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 32%, var(--vnex-border));
    background:
        linear-gradient(
            125deg,
            color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 16%, var(--vnex-card)) 0%,
            var(--vnex-card) 58%
        );
    box-shadow: var(--vnex-shadow);
}

.vnex-lede::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--vnex-blue-bright), var(--vnex-nav-storage, #38bdf8));
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 65%, transparent);
}

.vnex-lede strong {
    display: block;
    color: var(--vnex-text);
    font-size: 0.98rem;
    font-weight: 750;
}

.vnex-lede p {
    margin: 0.4rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.vnex-review .vnex-ui__card,
.vnex-review details.vnex-ui__card {
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
}

.vnex-review .vnex-ui__card-head {
    padding: 0.85rem 1.1rem;
    background: color-mix(in srgb, var(--vnex-main) 38%, var(--vnex-card));
    font-size: 0.86rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-review .vnex-ui__card-head-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: var(--vnex-mod-storage-soft, var(--vnex-blue-soft));
    color: var(--vnex-nav-storage, var(--vnex-blue));
}

.vnex-fold > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.vnex-fold > summary::-webkit-details-marker {
    display: none;
}
.vnex-fold > summary.vnex-ui__card-head {
    border-bottom: 1px solid transparent;
}
.vnex-fold[open] > summary.vnex-ui__card-head {
    border-bottom-color: var(--vnex-border);
}
.vnex-fold__chev {
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    margin-inline-start: auto;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    color: var(--vnex-muted);
}
[dir="rtl"] .vnex-fold__chev {
    transform: rotate(135deg);
}
.vnex-fold[open] > summary .vnex-fold__chev,
[dir="rtl"] .vnex-fold[open] > summary .vnex-fold__chev {
    transform: rotate(45deg);
    color: var(--vnex-blue);
}
.vnex-fold__meta {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--vnex-muted);
    font-variant-numeric: tabular-nums;
}
.vnex-fold__pad {
    padding-top: 0;
}
.vnex-alert-card > summary.vnex-alert-card__top {
    align-items: center;
}
.vnex-alert-card[open] > summary.vnex-alert-card__top {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--vnex-border);
}

.vnex-growth__kpis {
    margin-bottom: 0;
}

.vnex-growth .vnex-stat-card {
    min-height: 0;
    padding: 1.05rem 1.15rem 1.2rem;
}

.vnex-growth .vnex-stat-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vnex-growth .vnex-stat-card__value {
    font-size: 1.55rem;
}

.vnex-growth .vnex-stat-card__unit {
    margin-inline-start: 0.2rem;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--vnex-muted);
}

.vnex-growth .vnex-review__empty .vnex-ui__card-head-icon {
    margin: 0 auto 0.75rem;
}

/* Storage & Recovery hub — professional polish (matches dashboard density) */
.vnex-review {
    gap: 0.85rem;
}

.vnex-review .vnex-lede {
    padding-block: 0.9rem 0.95rem;
    padding-inline: 1.15rem 1.1rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
}

.vnex-review .vnex-lede::before {
    width: 2px;
    top: 0.65rem;
    bottom: 0.65rem;
    background: var(--vnex-nav-storage, var(--vnex-blue));
    box-shadow: none;
}

.vnex-review .vnex-lede strong {
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.vnex-review .vnex-lede p {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.vnex-review .vnex-ui__card-body {
    padding: 1rem 1.1rem 1.1rem;
}

.vnex-company-table {
    min-width: 0;
    max-width: 100%;
}

.vnex-company-table .fi-section,
.vnex-company-table .fi-section-content-ctn,
.vnex-company-table .fi-ta-ctn {
    min-width: 0;
    max-width: 100%;
}

.vnex-company-table .fi-ta-content-ctn {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.vnex-company-table .fi-ta-table {
    min-width: 56rem;
    width: max-content;
}

.vnex-review .vnex-stat-grid {
    gap: 0.75rem;
}

.vnex-review .vnex-stat-card {
    position: relative;
    min-height: 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: 12px;
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.vnex-review .vnex-stat-card::after,
.vnex-review .vnex-stat-card::before {
    display: none !important;
}

.vnex-review .vnex-stat-card:hover {
    border-color: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 32%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-card) 92%, var(--vnex-nav-storage, var(--vnex-blue)) 8%);
}

.vnex-review .vnex-stat-card__row {
    align-items: center;
    gap: 0.55rem;
}

.vnex-review .vnex-stat-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-review .vnex-stat-card__value {
    margin-top: 0.25rem;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--vnex-text);
}

.vnex-review .vnex-stat-card__unit {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vnex-muted);
}

.vnex-review .vnex-stat-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    box-shadow: none;
}

.vnex-review .vnex-stat-card__icon .fi-icon,
.vnex-review .vnex-stat-card__icon svg {
    width: 1rem !important;
    height: 1rem !important;
}

.vnex-growth__used {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--vnex-nav-storage, var(--vnex-blue));
    font-size: 0.875rem;
}

.vnex-review .vnex-review__table-wrap {
    max-height: 22rem;
    overflow: auto;
}

.vnex-review .vnex-review__table {
    font-size: 0.84rem;
}

.vnex-review .vnex-review__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.6rem 1.1rem;
    background: color-mix(in srgb, var(--vnex-main) 45%, var(--vnex-card));
    border-bottom: 1px solid var(--vnex-border);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.vnex-review .vnex-review__table td {
    padding: 0.65rem 1.1rem;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}

.vnex-review .vnex-review__table tbody tr:hover td {
    background: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 5%, var(--vnex-card));
}

.vnex-review .vnex-review__table tbody tr:last-child td {
    border-bottom: 0;
}

.vnex-review .vnex-hub-tabs__tab.is-on,
.vnex-review a.vnex-hub-tabs__tab.is-on {
    color: var(--vnex-text);
    border-bottom-color: var(--vnex-nav-storage, var(--vnex-blue));
}

.vnex-review .vnex-ransom__hint {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.vnex-review .vnex-ransom__note {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.82rem;
}

.vnex-review .vnex-ransom__freeze {
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
    border-radius: 12px;
}

.vnex-review .vnex-ransom__freeze.is-ok {
    border-color: color-mix(in srgb, var(--vnex-ok) 28%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok) 5%, var(--vnex-card));
}

.vnex-review .vnex-ransom__freeze.is-frozen {
    border-color: color-mix(in srgb, var(--vnex-bad) 32%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-bad) 6%, var(--vnex-card));
}

.vnex-review .vnex-ransom__utility .vnex-ui__card-body {
    padding: 0.95rem 1.05rem;
}

.vnex-review .vnex-ransom__honesty {
    padding: 0 0.15rem;
    font-size: 0.78rem;
}

.vnex-review .vnex-ransom__events-head {
    align-items: center;
}

.vnex-review .vnex-ransom__table th {
    background: color-mix(in srgb, var(--vnex-main) 45%, var(--vnex-card));
}

.vnex-review .vnex-ransom-kpi,
.vnex-review .vnex-ransom-card,
.vnex-review .vnex-ransom-pack {
    border-radius: 10px;
    box-shadow: none;
}

.vnex-review .vnex-fold[open] > summary .vnex-fold__chev {
    color: var(--vnex-nav-storage, var(--vnex-blue));
}

.vnex-alerts__list {
    display: grid;
    gap: 0.85rem;
}

.vnex-alert-card {
    padding: 1.05rem 1.15rem 1.15rem;
}

.vnex-alert-card.is-unread {
    border-color: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 40%, var(--vnex-border)) !important;
}

.vnex-alert-card__top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.vnex-alert-card__heading {
    min-width: 0;
    flex: 1;
}

.vnex-alert-card__heading strong {
    display: block;
    color: var(--vnex-text);
    font-size: 0.95rem;
    font-weight: 750;
}

.vnex-alert-card__heading span {
    display: block;
    margin-top: 0.2rem;
    color: var(--vnex-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.vnex-alert-card__facts {
    display: grid;
    gap: 0.65rem;
    margin: 0.95rem 0 0;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .vnex-alert-card__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .vnex-alert-card__facts.is-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vnex-alert-card__facts dt {
    color: var(--vnex-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vnex-alert-card__facts dd {
    margin: 0.2rem 0 0;
    color: var(--vnex-text);
    font-size: 0.9rem;
    font-weight: 650;
    word-break: break-word;
}

.vnex-alert-card__note {
    margin: 0.7rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.vnex-alert-card__actions {
    margin-top: 0.85rem;
}

.vnex-alerts__path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 600;
}

.vnex-alerts__report-note {
    margin: 0;
    padding: 0.75rem 1.15rem 1rem;
    color: var(--vnex-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.vnex-alerts__deleted {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vnex-border);
}

.vnex-alerts__deleted-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.vnex-alerts__deleted-head strong {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-alerts__deleted-head em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vnex-muted);
}

.vnex-alerts__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.vnex-alerts__chip {
    appearance: none;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-muted);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.vnex-alerts__chip em {
    font-style: normal;
    margin-inline-start: 0.3rem;
    color: var(--vnex-text);
}

.vnex-alerts__chip.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    color: var(--vnex-text);
}

.vnex-alerts__trace-wrap {
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--vnex-border);
    border-radius: 10px;
}

.vnex-alerts__trace-wrap--tall {
    max-height: 22rem;
}

.vnex-alerts__trace {
    margin: 0;
}

.vnex-alerts__trace th,
.vnex-alerts__trace td {
    padding: 0.45rem 0.7rem;
}

.vnex-alerts__file {
    font-weight: 650;
    word-break: break-word;
}

.vnex-alerts__deleted ul {
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.vnex-alerts__deleted li {
    display: grid;
    gap: 0.1rem;
}

.vnex-alerts__deleted li span {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--vnex-text);
    word-break: break-all;
}

.vnex-alerts__deleted li small {
    color: var(--vnex-muted);
    font-size: 0.72rem;
}

.vnex-review__stats--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 960px) {
    .vnex-review__stats--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.vnex-review__empty {
    padding: 1.75rem 1.15rem;
    text-align: center;
}

.vnex-review__empty strong {
    display: block;
    color: var(--vnex-text);
    font-size: 0.95rem;
}

.vnex-review__empty p {
    margin: 0.4rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vnex-packs {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 800px) {
    .vnex-packs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vnex-pack {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    text-align: start;
    position: relative;
    padding-block: 1rem 1.1rem;
    padding-inline: 1.05rem 4.75rem;
    border-radius: var(--vnex-radius, 14px);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 35%, var(--vnex-card));
    color: var(--vnex-text);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.vnex-pack strong {
    font-size: 0.95rem;
    font-weight: 750;
}

.vnex-pack__copy > span:not(.vnex-pack__chips) {
    color: var(--vnex-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.vnex-pack.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}

.vnex-policy-settings {
    display: grid;
    gap: 1.35rem;
}

.vnex-policy-settings__block {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm, 12px);
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
}

.vnex-policy-settings__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-policy-settings__checks {
    display: grid;
    gap: 0.85rem;
}

.vnex-policy-check {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    cursor: pointer;
    color: var(--vnex-text);
}

.vnex-policy-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.15rem 0 0;
    accent-color: var(--vnex-blue);
    cursor: pointer;
}

.vnex-policy-check__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.vnex-policy-check__copy strong {
    font-size: 0.9rem;
    line-height: 1.35;
}

.vnex-policy-check__copy small {
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.vnex-policy-settings__fields {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .vnex-policy-settings__fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .vnex-policy-settings__fields:has(.vnex-policy-num:only-child) {
        grid-template-columns: minmax(12rem, 22rem);
    }
}

.vnex-policy-num {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    margin: 0;
    color: var(--vnex-text);
}

.vnex-policy-num strong {
    font-size: 0.88rem;
    line-height: 1.35;
}

.vnex-policy-num small {
    color: var(--vnex-muted);
    font-size: 0.76rem;
    line-height: 1.45;
    min-height: 2.2rem;
}

.vnex-policy-num .vnex-ui__input {
    width: 100%;
    max-width: none;
    min-height: 2.55rem;
}

.vnex-policy-settings__footer {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.vnex-lifecycle-wip-catalog {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.65rem;
}

.vnex-lifecycle-wip-catalog__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vnex-text);
}

.vnex-lifecycle-wip-catalog__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius, 14px);
}

.vnex-lifecycle-wip-catalog__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.vnex-lifecycle-wip-catalog__table th,
.vnex-lifecycle-wip-catalog__table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--vnex-border);
    text-align: start;
    vertical-align: top;
}

.vnex-lifecycle-wip-catalog__table th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-border));
}

.vnex-lifecycle-wip-catalog__table tr:last-child td {
    border-bottom: none;
}

.vnex-lifecycle-wip-catalog__desc {
    margin-top: 0.2rem;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.vnex-review .fi-section {
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    border-radius: var(--vnex-radius, 14px);
    box-shadow: none;
}

.vnex-review__banner {
    padding: 0.95rem 1.15rem;
    border-radius: var(--vnex-radius, 14px);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 30%, var(--vnex-border));
    background: var(--vnex-blue-soft);
}

.vnex-review__banner strong {
    display: block;
    color: var(--vnex-text);
    font-size: 0.92rem;
}

.vnex-review__banner p {
    margin: 0.35rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.vnex-review__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vnex-review__stats--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 800px) {
    .vnex-review__stats--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vnex-review__stat-btn {
    width: 100%;
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.vnex-review__stat-btn.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}

.vnex-review__filters {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.vnex-review__field {
    background: var(--vnex-card);
    border-color: var(--vnex-border);
    color: var(--vnex-text);
    min-height: 2.55rem;
}

.vnex-dd {
    position: relative;
}

.vnex-dd__btn {
    width: 100%;
    min-height: 2.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--vnex-border);
    border-radius: 10px;
    background: var(--vnex-card);
    color: var(--vnex-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.vnex-dd__btn:hover,
.vnex-dd__btn:focus,
.vnex-dd__btn.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    outline: none;
}

.vnex-dd__btn span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vnex-dd__caret {
    width: 0.45rem;
    height: 0.45rem;
    flex-shrink: 0;
    border-inline-end: 2px solid var(--vnex-muted);
    border-bottom: 2px solid var(--vnex-muted);
    transform: rotate(45deg);
    margin-top: -0.2rem;
}

.vnex-dd__menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.35rem);
    z-index: 50;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}

.vnex-dd__menu li + li {
    margin-top: 0.15rem;
}

.vnex-dd__opt {
    width: 100%;
    display: block;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vnex-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.vnex-dd__opt:hover {
    background: color-mix(in srgb, var(--vnex-blue) 18%, var(--vnex-card));
    color: var(--vnex-text);
}

.vnex-dd__opt.is-on {
    background: var(--vnex-blue-soft);
    color: var(--vnex-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}

.vnex-dd--compact .vnex-dd__btn {
    min-height: 2.2rem;
    padding: 0.4rem 0.65rem;
    min-width: 8.5rem;
}

.vnex-review__table .vnex-dd__menu {
    min-width: 10rem;
}

.vnex-review__check input[type="checkbox"] {
    accent-color: var(--vnex-blue);
    width: 1rem;
    height: 1rem;
}

[x-cloak] {
    display: none !important;
}

@media (min-width: 900px) {
    .vnex-review__filters {
        grid-template-columns: 1.4fr 1fr 0.8fr 0.9fr;
    }
}

.vnex-review__ledger-head {
    justify-content: space-between;
}

.vnex-review__ledger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.vnex-review__table-wrap {
    overflow: auto;
}

.vnex-review__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.vnex-review__table th,
.vnex-review__table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--vnex-border);
    text-align: start;
    vertical-align: middle;
}

.vnex-review__table th {
    color: var(--vnex-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vnex-review__table tr.is-selected {
    background: var(--vnex-blue-soft);
}

.vnex-review__check {
    width: 2rem;
}

.vnex-review__name-btn {
    display: grid;
    gap: 0.1rem;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.vnex-review__level {
    min-width: 8.5rem;
}

.vnex-review__stop {
    background: var(--vnex-bad);
    color: var(--vnex-on-accent) !important;
}

.vnex-review__stop:hover {
    filter: brightness(1.05);
}

.vnex-review__stop-row {
    color: var(--vnex-bad-text) !important;
    background: var(--vnex-bad-soft);
    border-color: color-mix(in srgb, var(--vnex-bad) 40%, var(--vnex-border));
}

.vnex-review__split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 960px) {
    .vnex-review__split {
        grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    }
}

.vnex-review__search {
    padding: 0.75rem 1rem 0;
}

.vnex-review__list {
    max-height: 38rem;
    overflow: auto;
}

.vnex-review__person {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--vnex-border);
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.vnex-review__person:hover,
.vnex-review__person.is-selected {
    background: var(--vnex-blue-soft);
}

.vnex-review__avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--vnex-blue);
    color: var(--vnex-on-accent);
    font-weight: 800;
    text-transform: uppercase;
}

.vnex-review__person-meta {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 0.15rem;
}

.vnex-review__person .vnex-ui__badge {
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.vnex-review__facts {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.1rem;
}

@media (min-width: 720px) {
    .vnex-review__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vnex-review__facts small {
    display: block;
    color: var(--vnex-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.vnex-review__facts strong {
    color: var(--vnex-text);
    font-size: 0.92rem;
}

.vnex-review__grant {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--vnex-border);
}

.vnex-review__grant-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.vnex-review__grant .vnex-ui__badge {
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
}

.vnex-review__revoke {
    justify-self: start;
}

/* CRM Document Design */
.vnex-doc-design { display: grid; gap: 1rem; }
.vnex-doc-design__lede { margin: 0; color: var(--vnex-muted); line-height: 1.5; }
.vnex-doc-design__tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vnex-doc-design__tab {
  padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid var(--vnex-border);
  background: var(--vnex-card); color: var(--vnex-muted); font-weight: 750; cursor: pointer;
}
.vnex-doc-design__tab.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--vnex-blue-bright), var(--vnex-blue));
}
.vnex-doc-design__panel {
  padding: 1.1rem 1.15rem; border-radius: 1rem; border: 1px solid var(--vnex-border);
  background: var(--vnex-card); display: grid; gap: 0.9rem;
}
.vnex-doc-design__panel h3 { margin: 0; font-size: 1.05rem; color: var(--vnex-text); }
.vnex-doc-design__help { margin: 0; color: var(--vnex-muted); font-size: 0.9rem; }
.vnex-doc-design__grid {
  display: grid; gap: 0.75rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .vnex-doc-design__grid { grid-template-columns: 1fr 1fr; }
}
.vnex-doc-design__field { display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--vnex-muted); }
.vnex-doc-design__field.is-full { grid-column: 1 / -1; }
.vnex-doc-design__field input,
.vnex-doc-design__field textarea,
.vnex-doc-design__field select {
  width: 100%; border-radius: 10px; border: 1px solid var(--vnex-border);
  background: color-mix(in srgb, var(--vnex-card) 88%, #0b1220);
  color: var(--vnex-text); padding: 0.55rem 0.7rem;
  color-scheme: dark;
}
.vnex-doc-design__field input[type="color"] {
  min-height: 2.4rem;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
}
.vnex-doc-design__field select option,
.vnex-doc-design__field select optgroup {
  background-color: #111827;
  color: #f8fafc;
}
.vnex-doc-design__field select option:checked,
.vnex-doc-design__field select option:hover {
  background-color: #1e3a8a;
  color: #fff;
}
.vnex-doc-design__check { display: flex; align-items: center; gap: 0.5rem; color: var(--vnex-text); font-size: 0.9rem; }
.vnex-doc-design__templates { display: grid; gap: 0.75rem; }
@media (min-width: 900px) {
  .vnex-doc-design__templates { grid-template-columns: repeat(3, 1fr); }
}
.vnex-doc-design__template {
  text-align: start; padding: 0.9rem; border-radius: 12px; border: 1px solid var(--vnex-border);
  background: transparent; color: var(--vnex-text); cursor: pointer; display: grid; gap: 0.35rem;
}
.vnex-doc-design__template span { color: var(--vnex-muted); font-size: 0.85rem; }
.vnex-doc-design__template.is-active {
  border-color: rgba(79,110,245,0.55);
  box-shadow: 0 0 0 1px rgba(79,110,245,0.25);
}
.vnex-doc-design__blocks { display: grid; gap: 0.55rem; }
.vnex-doc-design__block {
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: center;
  padding: 0.75rem 0.85rem; border-radius: 10px; border: 1px solid var(--vnex-border);
}
.vnex-doc-design__block-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.vnex-doc-design__block-actions button,
.vnex-doc-design__variants button {
  border-radius: 8px; border: 1px solid var(--vnex-border); background: transparent;
  color: var(--vnex-text); padding: 0.3rem 0.55rem; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.vnex-doc-design__variants {
  display: flex; gap: 0.35rem; margin-top: 0.35rem; flex-wrap: wrap;
}
.vnex-doc-design__field .vnex-doc-design__variants { margin-top: 0; }
.vnex-doc-design__variants button.is-active {
  background: rgba(79,110,245,0.22); border-color: rgba(79,110,245,0.55); color: #fff;
}
.vnex-doc-design__variants button:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.vnex-doc-design__workspace {
  display: grid;
  gap: 1rem;
}
@media (min-width: 1100px) {
  .vnex-doc-design__workspace {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    align-items: start;
  }
}
.vnex-doc-design__editor {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.vnex-doc-design__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.vnex-doc-design__preview {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border-radius: 1rem;
  border: 1px solid var(--vnex-border);
  background: var(--vnex-card);
  position: sticky;
  top: 1rem;
}
.vnex-doc-design__preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.vnex-doc-design__preview-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--vnex-text);
}
.vnex-doc-design__preview-head span {
  display: block;
  color: var(--vnex-muted);
  font-size: 0.82rem;
  margin-top: 0.2rem;
}
.vnex-doc-design__preview-frame {
  border-radius: 12px;
  border: 1px solid var(--vnex-border);
  overflow: hidden;
  background: #fff;
  min-height: 520px;
}
.vnex-doc-design__iframe {
  width: 100%;
  height: 720px;
  border: 0;
  background: #fff;
}
.vnex-doc-design__link {
  margin-top: 0.35rem; background: none; border: 0; color: var(--vnex-blue-bright);
  font-size: 0.8rem; cursor: pointer; padding: 0; text-align: start;
}

.vnex-ransom {
    display: grid;
    gap: 1rem;
}

/* Ransomware hub: lede + freeze status row */
.vnex-ransom__top {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}
@media (min-width: 900px) {
    .vnex-ransom__top {
        grid-template-columns: 1.35fr 0.85fr;
    }
}
.vnex-ransom__top .vnex-lede {
    margin: 0;
}
.vnex-ransom__freeze {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding: 1rem 1.05rem;
    border-radius: var(--vnex-radius, 14px);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}
.vnex-ransom__freeze.is-ok {
    border-color: color-mix(in srgb, var(--vnex-ok) 40%, var(--vnex-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--vnex-ok) 8%, var(--vnex-card)) 0%,
            var(--vnex-card) 100%
        );
}
.vnex-ransom__freeze.is-frozen {
    border-color: color-mix(in srgb, var(--vnex-bad) 50%, var(--vnex-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--vnex-bad) 10%, var(--vnex-card)) 0%,
            var(--vnex-card) 100%
        );
}
.vnex-ransom__freeze strong {
    color: var(--vnex-text);
    font-size: 0.95rem;
}
.vnex-ransom__freeze small {
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
.vnex-ransom__pulse {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--vnex-ok);
    animation: vnex-ransom-pulse 1.6s ease-out infinite;
}
.vnex-ransom__freeze.is-frozen .vnex-ransom__pulse {
    background: var(--vnex-bad);
}
@keyframes vnex-ransom-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vnex-ok) 45%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.vnex-ransom__freeze .vnex-ui__btn {
    margin-top: 0.35rem;
    justify-self: start;
}
.vnex-ransom__freeze .vnex-ui__btn--danger {
    background: var(--vnex-bad);
    border: 1px solid color-mix(in srgb, var(--vnex-bad) 70%, #7f1d1d);
    color: #fff !important;
    font-weight: 800;
}
.vnex-ransom__freeze-mode {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.vnex-ransom__freeze-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.92rem;
    color: var(--vnex-text);
    cursor: pointer;
}
.vnex-ransom__freeze-choice input {
    margin-top: 0.15rem;
}
.vnex-ransom__freeze-duration {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}
.vnex-ransom__freeze-duration-label {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: var(--vnex-muted);
}
.vnex-ransom__freeze-duration label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: var(--vnex-muted);
}
.vnex-ransom__freeze-duration input {
    width: 100%;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-bg);
    color: var(--vnex-text);
}
.vnex-ransom__exceptions-card .vnex-ui__card-body {
    display: grid;
    gap: 0.75rem;
}
.vnex-ransom__exceptions-priority {
    color: var(--vnex-ok);
    font-weight: 600;
}
.vnex-ransom__exception-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vnex-ransom__exception-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.35rem 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-ok) 45%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok) 10%, var(--vnex-card));
}
.vnex-ransom__exception-chip {
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--vnex-text);
}
.vnex-ransom__exception-remove {
    border: 0;
    background: transparent;
    color: var(--vnex-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
}
.vnex-ransom__exception-remove:hover {
    color: var(--vnex-bad);
}
.vnex-ransom__catalog-control {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
}
.vnex-ransom__catalog-control.is-on {
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok) 6%, var(--vnex-card));
}
.vnex-ransom__catalog-control.is-paused {
    border-color: color-mix(in srgb, var(--vnex-warn) 45%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn) 10%, var(--vnex-card));
}
.vnex-ransom__catalog-control strong {
    display: block;
    color: var(--vnex-text);
}
.vnex-ransom__honesty {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}
.vnex-ransom__utilities {
    display: grid;
    gap: 1rem;
}
@media (min-width: 720px) {
    .vnex-ransom__utilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.vnex-ransom__utility .vnex-ui__card-body {
    display: grid;
    gap: 0.55rem;
}
.vnex-ransom__utility strong {
    color: var(--vnex-text);
    font-size: 0.92rem;
}
.vnex-ransom__utility .vnex-ransom__hint {
    margin: 0;
}
.vnex-ransom__events-head {
    flex-wrap: wrap;
    gap: 0.75rem;
}
.vnex-ransom__events-head strong {
    display: block;
    color: var(--vnex-text);
    font-size: 0.92rem;
}
.vnex-ransom__events-head .vnex-ransom__hint {
    margin: 0.2rem 0 0;
}
.vnex-ransom__windows {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-inline-start: auto;
}
.vnex-ransom__window {
    appearance: none;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    color: var(--vnex-text);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.vnex-ransom__window.is-on {
    border-color: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 55%, var(--vnex-border));
    background: var(--vnex-mod-storage-soft, var(--vnex-blue-soft));
    color: var(--vnex-nav-storage, var(--vnex-blue));
}
.vnex-ransom__table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 22rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: color-mix(in srgb, var(--vnex-main) 40%, var(--vnex-card));
    border-top: 1px solid var(--vnex-border);
}
.vnex-ransom__table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.8rem;
    color: var(--vnex-text);
}
.vnex-ransom__table th,
.vnex-ransom__table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--vnex-border);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}
.vnex-ransom__table th {
    color: var(--vnex-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 6%, var(--vnex-card));
    position: sticky;
    top: 0;
    z-index: 3;
}
.vnex-ransom__table tr.is-danger {
    background: color-mix(in srgb, var(--vnex-bad) 8%, var(--vnex-card));
}
.vnex-ransom__table tr.is-warn {
    background: color-mix(in srgb, var(--vnex-warn) 8%, var(--vnex-card));
}
.vnex-ransom__table tr.is-ok {
    background: color-mix(in srgb, var(--vnex-ok) 6%, var(--vnex-card));
}
.vnex-ransom__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
}
.vnex-ransom__tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--vnex-mod-storage-soft, var(--vnex-blue-soft));
    color: var(--vnex-nav-storage, var(--vnex-blue));
}
.vnex-ransom__tag.is-danger {
    background: var(--vnex-bad-soft);
    color: var(--vnex-bad-text, var(--vnex-bad));
}
.vnex-ransom__tag.is-warn {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn-text, var(--vnex-warn));
}
.vnex-ransom__tag.is-ok {
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok-text, var(--vnex-ok));
}
.vnex-ransom__cell {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.vnex-ransom__cell strong {
    color: var(--vnex-text);
}
.vnex-ransom__cell-muted {
    color: var(--vnex-muted);
    font-weight: 500;
}
.vnex-ransom__detail {
    color: var(--vnex-muted);
    font-size: 0.78rem;
}
.vnex-ransom .vnex-ransom-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}
@media (max-width: 720px) {
    .vnex-ransom .vnex-ransom-kpis {
        grid-template-columns: 1fr;
    }
}
.vnex-ransom .vnex-ransom-kpi {
    text-align: start;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vnex-ransom .vnex-ransom-kpi.is-on {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 18%, transparent);
}
.vnex-ransom .vnex-ransom-kpi.is-block.is-on {
    border-color: color-mix(in srgb, var(--vnex-bad) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-bad) 35%, transparent);
}
.vnex-ransom .vnex-ransom-kpi.is-note.is-on {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-warn) 35%, transparent);
}
.vnex-ransom .vnex-ransom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.65rem;
}
.vnex-ransom .vnex-ransom-card {
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vnex-ransom .vnex-ransom-card.is-block {
    border-color: color-mix(in srgb, var(--vnex-bad) 35%, var(--vnex-border));
}
.vnex-ransom .vnex-ransom-card:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 22%, transparent);
}
.vnex-ransom .vnex-ransom-pack {
    border-color: var(--vnex-border);
    background: var(--vnex-card);
}
.vnex-ransom .vnex-ransom-pack.is-on {
    border-color: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 18%, transparent);
}
html[dir="rtl"] .vnex-ransom__table th,
html[dir="rtl"] .vnex-ransom__table td {
    text-align: start;
}

.vnex-ransom__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: var(--vnex-radius);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}
.vnex-ransom__status p {
    margin: 0.4rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.85rem;
    max-width: 44rem;
    line-height: 1.45;
}
.vnex-ransom__pill {
    display: inline-flex;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    border: 1px solid var(--vnex-border);
}
.vnex-ransom__status.is-ok .vnex-ransom__pill {
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}
.vnex-ransom__status.is-frozen {
    border-color: color-mix(in srgb, #ef4444 45%, var(--vnex-border));
    background: color-mix(in srgb, #7f1d1d 22%, var(--vnex-card));
}
.vnex-ransom__status.is-frozen .vnex-ransom__pill {
    color: #fecaca;
    background: rgba(185, 28, 28, 0.28);
    border-color: rgba(248, 113, 113, 0.4);
}
.vnex-ransom__note {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}
.vnex-ransom__note.is-warn {
    color: var(--vnex-warn-text);
    background: var(--vnex-warn-soft);
    border: 1px solid color-mix(in srgb, var(--vnex-warn) 35%, transparent);
    border-radius: var(--vnex-radius-sm);
    padding: 0.7rem 0.9rem;
}
.vnex-ransom__hint {
    margin: 0 0 0.75rem;
    color: var(--vnex-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}
.vnex-ransom__split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 960px) {
    .vnex-ransom__split {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }
}
.vnex-ransom__textarea {
    width: 100%;
    min-height: 5.5rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.45;
    resize: vertical;
}
.vnex-ransom__packs {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.1rem;
}
@media (min-width: 800px) {
    .vnex-ransom__packs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.vnex-ransom-pack {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.05rem 0.9rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    min-height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vnex-ransom-pack:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
}
.vnex-ransom-pack.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-blue-soft) 70%, var(--vnex-card));
    box-shadow: var(--vnex-shadow), inset 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 28%, transparent);
}
.vnex-ransom-pack header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
}
.vnex-ransom-pack header strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 750;
}
.vnex-ransom-pack header small {
    display: block;
    margin-top: 0.2rem;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
.vnex-ransom-pack__toggle {
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-muted);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}
.vnex-ransom-pack.is-on .vnex-ransom-pack__toggle {
    color: var(--vnex-blue);
    border-color: color-mix(in srgb, var(--vnex-blue) 50%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-blue) 12%, transparent);
}
.vnex-ransom-pack label span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--vnex-muted);
}
.vnex-ransom-pack__fold {
    border-top: 1px solid var(--vnex-border);
    padding-top: 0.55rem;
}
.vnex-ransom-pack__fold > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--vnex-muted);
}
.vnex-ransom-pack__fold > summary::-webkit-details-marker {
    display: none;
}
.vnex-ransom-pack__fold > summary .vnex-fold__chev {
    margin-inline-start: 0;
}
.vnex-ransom-pack__fold[open] > summary {
    margin-bottom: 0.45rem;
    color: var(--vnex-text);
}
.vnex-ransom-pack__reset {
    justify-self: start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--vnex-blue);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.vnex-ransom__alerts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.vnex-ransom__alerts li {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
}
.vnex-ransom__exceptions {
    display: grid;
    gap: 0.35rem;
    margin: 0.25rem 0 1rem;
}
.vnex-ransom__save {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.vnex-ransom__pitr {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
@media (min-width: 800px) {
    .vnex-ransom__pitr {
        grid-template-columns: 1.2fr 0.8fr;
    }
}
.vnex-ransom__run {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-main);
    color: var(--vnex-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}
.vnex-ransom__run span {
    display: block;
    margin-top: 0.35rem;
    color: var(--vnex-bad-text, #fecaca);
}
.vnex-ransom-progress {
    margin: 1rem 0 0;
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
}
.vnex-ransom-progress.is-live {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 18%, transparent);
}
.vnex-ransom-progress.is-done {
    border-color: color-mix(in srgb, var(--vnex-ok) 40%, var(--vnex-border));
}
.vnex-ransom-progress.is-partial {
    border-color: color-mix(in srgb, #d97706 45%, var(--vnex-border));
}
.vnex-ransom-progress.is-failed {
    border-color: color-mix(in srgb, var(--vnex-bad) 45%, var(--vnex-border));
}
.vnex-ransom-progress__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}
.vnex-ransom-progress__head strong {
    color: var(--vnex-text);
    font-size: 0.92rem;
}
.vnex-ransom-progress__status {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-blue);
}
.vnex-ransom-progress.is-failed .vnex-ransom-progress__status {
    color: var(--vnex-bad);
}
.vnex-ransom-progress.is-done .vnex-ransom-progress__status {
    color: var(--vnex-ok);
}
.vnex-ransom-progress.is-partial .vnex-ransom-progress__status {
    color: #d97706;
}
.vnex-ransom-progress__meta {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    word-break: break-all;
}
.vnex-ransom-progress__bar-block {
    display: grid;
    gap: 0.35rem;
}
.vnex-ransom-progress__bar-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    color: var(--vnex-text);
    font-size: 0.8rem;
}
.vnex-ransom-progress__bar-label em {
    font-style: normal;
    color: var(--vnex-muted);
    font-size: 0.74rem;
}
.vnex-ransom-progress__bar-block small {
    color: var(--vnex-muted);
    font-size: 0.74rem;
}
.vnex-ransom-progress__track {
    position: relative;
    height: 0.7rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--vnex-border) 70%, var(--vnex-main));
}
.vnex-ransom-progress__track.is-chunk {
    height: 0.55rem;
}
.vnex-ransom-progress__fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vnex-blue), var(--vnex-blue-bright));
    transition: width 0.45s ease;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
}
.vnex-ransom-progress.is-done .vnex-ransom-progress__fill {
    background: linear-gradient(90deg, var(--vnex-ok), color-mix(in srgb, var(--vnex-ok) 70%, white));
}
.vnex-ransom-progress.is-partial .vnex-ransom-progress__fill {
    background: linear-gradient(90deg, #d97706, color-mix(in srgb, #d97706 70%, white));
}
.vnex-ransom-progress.is-failed .vnex-ransom-progress__fill {
    background: linear-gradient(90deg, var(--vnex-bad), color-mix(in srgb, var(--vnex-bad) 70%, white));
}
.vnex-ransom-progress__track.is-indeterminate .vnex-ransom-progress__fill {
    width: 38% !important;
    animation: vnex-ransom-progress-slide 1.15s ease-in-out infinite;
}
@keyframes vnex-ransom-progress-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(280%); }
}
.vnex-ransom-progress.is-live .vnex-ransom-progress__status::after {
    content: '';
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-inline-start: 0.4rem;
    border-radius: 999px;
    background: var(--vnex-blue);
    vertical-align: middle;
    animation: vnex-ransom-progress-pulse 1s ease-in-out infinite;
}
@keyframes vnex-ransom-progress-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}
.vnex-ransom-progress__counts {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.8rem;
}
.vnex-ransom-progress__error {
    margin: 0;
    color: var(--vnex-bad-text, #fecaca);
    font-size: 0.8rem;
}
.vnex-ransom__dr-link {
    display: grid;
    gap: 0.45rem;
}
.vnex-ransom__dr-link p {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.82rem;
}
.vnex-dr__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin: 0.15rem 0 0.35rem;
}
.vnex-dr__actions .vnex-ui__btn {
    min-height: 2.6rem;
    min-width: 10.5rem;
    padding: 0.7rem 1.15rem;
    cursor: pointer;
    box-shadow: 0 1px 0 color-mix(in srgb, #000 18%, transparent);
}
.vnex-dr__actions .vnex-ui__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}
.vnex-dr__doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.1rem;
}
.vnex-dr__door {
    display: grid;
    gap: 0.45rem;
    text-align: start;
    padding: 1rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border: 0;
    width: 100%;
}
.vnex-dr__door p {
    margin: 0;
    font-size: 0.92rem;
    opacity: 0.82;
}
@media (max-width: 720px) {
    .vnex-dr__doors {
        grid-template-columns: 1fr;
    }
}
.vnex-dr__outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.vnex-dr__outcome {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: var(--vnex-card, transparent);
    text-align: start;
    cursor: pointer;
}
.vnex-dr__outcome small {
    color: var(--vnex-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vnex-dr__outcome strong {
    font-size: 1.25rem;
}
.vnex-dr__outcome.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    background: var(--vnex-blue-soft);
}
.vnex-dr__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.vnex-dr__folders {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
}
.vnex-dr__folders button {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--vnex-border);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.vnex-dr__folders em {
    font-style: normal;
    color: var(--vnex-muted);
    font-variant-numeric: tabular-nums;
}
.vnex-dr__filters {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.vnex-dr__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.vnex-dr__tabs .vnex-ui__btn.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    background: var(--vnex-blue-soft);
}
.vnex-dr__tabs .vnex-ui__btn em {
    margin-inline-start: 0.35rem;
    font-style: normal;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}
.vnex-dr__file {
    display: block;
    font-weight: 650;
    color: var(--vnex-text);
}
.vnex-dr__folder {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--vnex-muted);
    font-family: var(--vnex-mono, ui-monospace, monospace);
}
.vnex-dr__select-bar {
    display: grid;
    gap: 0.55rem;
    margin: 0.75rem 0 0.85rem;
}
.vnex-dr__col-pick {
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}
.vnex-dr__quarantine-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}
.vnex-dr__quarantine-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.vnex-dr__quarantine-row small {
    display: block;
    color: var(--vnex-muted, #a1a1aa);
    margin-top: 0.15rem;
}
.vnex-dr__quarantine-warn {
    color: #b45309 !important;
}
.vnex-dr__col-file {
    min-width: 14rem;
}
.vnex-dr__table-wrap {
    overflow: auto;
    max-height: 28rem;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm, 12px);
}
.vnex-dr__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.vnex-dr__table th,
.vnex-dr__table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--vnex-border);
    text-align: start;
    vertical-align: top;
}
.vnex-dr__table th {
    color: var(--vnex-muted);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vnex-dr__action {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.vnex-dr__action.is-restore {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}
.vnex-dr__action.is-quarantine {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn-text, var(--vnex-warn));
}
.vnex-dr__action.is-skip {
    background: color-mix(in srgb, var(--vnex-border) 55%, transparent);
    color: var(--vnex-muted);
}
.vnex-dr__force-tag {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: color-mix(in srgb, #2563eb 16%, transparent);
    color: #93c5fd;
    border: 1px solid color-mix(in srgb, #60a5fa 28%, transparent);
}
html:not(.dark) .vnex-dr__force-tag {
    color: #1d4ed8;
    background: color-mix(in srgb, #2563eb 10%, transparent);
}
.vnex-dr__force-all {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.75rem 0 0.35rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    background: color-mix(in srgb, var(--vnex-card) 92%, transparent);
    cursor: pointer;
}
.vnex-dr__force-all input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.vnex-dr__force-all strong {
    display: block;
    font-size: 0.88rem;
    color: var(--vnex-text);
}
.vnex-dr__force-all small {
    display: block;
    margin-top: 0.15rem;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.vnex-dr__path-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.vnex-dr__path-row .vnex-ui__input {
    flex: 1 1 12rem;
    min-width: 0;
}
.vnex-dr__picker {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--vnex-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--vnex-card) 92%, var(--vnex-main));
}
.vnex-dr__picker-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}
.vnex-dr__picker .vnex-dr__folders li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: space-between;
}
.vnex-dr__guide {
    margin: 0.85rem 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--vnex-blue) 8%, var(--vnex-card));
}
.vnex-dr__guide strong {
    display: block;
    margin-bottom: 0.35rem;
}
.vnex-dr__guide p {
    margin: 0 0 0.65rem;
    color: var(--vnex-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}
.vnex-dr__select-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.vnex-dr__select-menu .vnex-ui__input {
    min-width: 12rem;
}
.vnex-dr__pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}
.vnex-dr__quarantine {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.vnex-dr__quarantine li {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--vnex-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
}
.vnex-dr__quarantine button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--vnex-blue);
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-align: start;
}
.vnex-dr__quarantine small {
    display: block;
    margin-top: 0.2rem;
    color: var(--vnex-muted);
    font-size: 0.76rem;
}
.vnex-dr__search {
    width: 100%;
}
.vnex-dr__col-path {
    min-width: 12rem;
}
.vnex-dr__col-action {
    white-space: nowrap;
    width: 7.5rem;
}
.vnex-dr__col-reason {
    min-width: 14rem;
}
html[dir="rtl"] .vnex-dr,
html[dir="rtl"] .vnex-dr .vnex-ui__card-body,
html[dir="rtl"] .vnex-dr .vnex-ransom__hint,
html[dir="rtl"] .vnex-dr .vnex-ui__note,
html[dir="rtl"] .vnex-dr .vnex-policy-num strong,
html[dir="rtl"] .vnex-dr .vnex-policy-num small {
    text-align: start;
}
html[dir="rtl"] .vnex-dr__table th,
html[dir="rtl"] .vnex-dr__table td {
    text-align: start;
}
html[dir="rtl"] .vnex-dr__col-path {
    text-align: start;
    unicode-bidi: isolate;
}
html[dir="rtl"] .vnex-ransom-progress__status {
    letter-spacing: 0;
    text-transform: none;
}
html[dir="rtl"] .vnex-dr__action {
    text-transform: none;
    letter-spacing: 0;
}
html[dir="rtl"] .vnex-dr__tabs {
    justify-content: flex-start;
}
html[dir="rtl"] .vnex-dr__pager {
    flex-direction: row;
}
html[dir="rtl"] .vnex-ransom-progress__track.is-indeterminate .vnex-ransom-progress__fill {
    animation-name: vnex-ransom-progress-slide-rtl;
}
@keyframes vnex-ransom-progress-slide-rtl {
    0% { transform: translateX(120%); }
    100% { transform: translateX(-280%); }
}
.vnex-ransom__alerts span {
    color: var(--vnex-muted);
    font-size: 0.75rem;
}
.vnex-ransom__alerts strong {
    font-size: 0.86rem;
}
.vnex-ransom__alerts em {
    font-style: normal;
    color: var(--vnex-muted);
    font-size: 0.8rem;
}
.vnex-ransom__empty {
    margin: 0;
    color: var(--vnex-muted);
}
.vnex-ransom-kpis {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
}
@media (min-width: 800px) {
    .vnex-ransom-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.vnex-ransom-kpi {
    display: grid;
    gap: 0.2rem;
    text-align: start;
    padding: 0.9rem 1rem 1rem;
    border-radius: var(--vnex-radius-sm);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    color: var(--vnex-text);
    cursor: pointer;
    font: inherit;
    position: relative;
    overflow: hidden;
}
.vnex-ransom-kpi small {
    color: var(--vnex-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vnex-ransom-kpi strong {
    font-size: 1.55rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.vnex-ransom-kpi span {
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.vnex-ransom-kpi::after {
    content: '';
    position: absolute;
    inset-inline-start: 1rem;
    bottom: 0;
    width: 38%;
    height: 3px;
    border-radius: 999px 999px 0 0;
}
.vnex-ransom-kpi.is-block::after { background: var(--vnex-bad); }
.vnex-ransom-kpi.is-note::after { background: var(--vnex-warn); }
.vnex-ransom-kpi.is-watch::after { background: var(--vnex-muted); }
.vnex-ransom-kpi.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 28%, transparent);
}
.vnex-ransom-catalog-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.65rem;
}
.vnex-ransom-filter {
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-muted);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.vnex-ransom-filter.is-on {
    color: var(--vnex-text);
    border-color: color-mix(in srgb, var(--vnex-nav-storage, var(--vnex-blue)) 50%, var(--vnex-border));
    background: var(--vnex-mod-storage-soft, var(--vnex-blue-soft));
}
.vnex-ransom-flag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.vnex-ransom-flag.is-block {
    background: var(--vnex-bad-soft);
    color: var(--vnex-bad-text);
}
.vnex-ransom-flag.is-note {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn-text);
}
.vnex-ransom-flag.is-watch {
    background: color-mix(in srgb, var(--vnex-muted) 16%, transparent);
    color: var(--vnex-muted);
}
.vnex-ransom-search {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
}
.vnex-ransom-search span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vnex-muted);
}
.vnex-ransom-editbar {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}
.vnex-ransom-editbar small {
    color: var(--vnex-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vnex-ransom-samples li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.vnex-ransom-samples button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}
.vnex-ransom-samples li > button:last-child:not(:only-child) {
    color: var(--vnex-bad-text);
    font-weight: 800;
    padding-inline-start: 0.15rem;
}
.vnex-ransom-cards {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 800px) {
    .vnex-ransom-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1100px) {
    .vnex-ransom-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.vnex-ransom-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    background: var(--vnex-card);
    padding: 0.95rem 1rem 1.05rem;
    display: grid;
    gap: 0.45rem;
}
.vnex-ransom-card::after {
    content: '';
    position: absolute;
    inset-inline-start: 1rem;
    bottom: 0;
    width: 36%;
    height: 3px;
    border-radius: 999px 999px 0 0;
}
.vnex-ransom-card.is-block::after { background: var(--vnex-bad); }
.vnex-ransom-card.is-note::after { background: var(--vnex-warn); }
.vnex-ransom-card.is-watch::after { background: var(--vnex-muted); }
.vnex-ransom-card header {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}
.vnex-ransom-card header strong {
    font-size: 0.98rem;
    color: var(--vnex-text);
    word-break: break-all;
}
.vnex-ransom-card > p {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.8rem;
}
.vnex-ransom-card > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: grid;
    gap: 0.35rem;
}
.vnex-ransom-card > summary::-webkit-details-marker {
    display: none;
}
.vnex-ransom-card > summary p {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.8rem;
}
.vnex-ransom-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.vnex-ransom-family {
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm);
    padding: 0.7rem 0.85rem;
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
}
.vnex-ransom-family.is-block {
    box-shadow: inset 3px 0 0 var(--vnex-bad);
}
.vnex-ransom-family.is-note {
    box-shadow: inset 3px 0 0 var(--vnex-warn);
}
.vnex-ransom-family.is-watch {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--vnex-muted) 70%, transparent);
}
[dir="rtl"] .vnex-ransom-family.is-block,
[dir="rtl"] .vnex-ransom-family.is-note,
[dir="rtl"] .vnex-ransom-family.is-watch {
    box-shadow: inset -3px 0 0 var(--vnex-muted);
}
[dir="rtl"] .vnex-ransom-family.is-block { box-shadow: inset -3px 0 0 var(--vnex-bad); }
[dir="rtl"] .vnex-ransom-family.is-note { box-shadow: inset -3px 0 0 var(--vnex-warn); }
.vnex-ransom-family header {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}
.vnex-ransom-family > summary {
    list-style: none;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}
.vnex-ransom-family > summary::-webkit-details-marker {
    display: none;
}
.vnex-ransom-family > summary .vnex-fold__chev {
    margin-inline-start: 0;
    margin-inline-end: 0.1rem;
}
.vnex-ransom-family > summary strong {
    font-size: 0.92rem;
    color: var(--vnex-text);
}
.vnex-ransom-family > summary em {
    font-style: normal;
    color: var(--vnex-muted);
    font-size: 0.75rem;
    font-weight: 650;
    margin-inline-start: auto;
}
.vnex-ransom-samples {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
}
.vnex-ransom-samples li {
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-muted) 10%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

/* -- Defence SOC / command center (theme-aware light + dark) -- */
.vnex-soc {
    position: relative;
    display: grid;
    gap: 1rem;
    color: var(--vnex-text);
}
.vnex-soc__grid {
    pointer-events: none;
    position: absolute;
    inset: -0.5rem;
    z-index: 0;
    opacity: 0.22;
    background:
        linear-gradient(color-mix(in srgb, var(--vnex-blue) 14%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, color-mix(in srgb, var(--vnex-blue) 14%, transparent) 1px, transparent 1px) 0 0 / 28px 28px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.vnex-soc > *:not(.vnex-soc__grid) {
    position: relative;
    z-index: 1;
}
.vnex-soc__hero {
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 28%, var(--vnex-border));
    border-radius: var(--vnex-radius-sm, 12px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vnex-blue) 10%, transparent), transparent 58%),
        var(--vnex-card);
    box-shadow: var(--vnex-shadow);
}
@media (min-width: 900px) {
    .vnex-soc__hero {
        grid-template-columns: 1.4fr 0.9fr;
        align-items: stretch;
    }
}
.vnex-soc__eyebrow {
    margin: 0 0 0.35rem;
    color: var(--vnex-blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vnex-soc__hero-copy h1 {
    margin: 0;
    color: var(--vnex-text);
    font-size: 1.45rem;
    font-weight: 800;
}
.vnex-soc__hero-copy p {
    margin: 0.45rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 46rem;
}
.vnex-soc__hero-status {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
}
.vnex-soc__hero-status.is-ok {
    border-color: color-mix(in srgb, var(--vnex-ok) 40%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok) 8%, var(--vnex-card));
}
.vnex-soc__hero-status.is-frozen {
    border-color: color-mix(in srgb, var(--vnex-bad) 50%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-bad) 10%, var(--vnex-card));
}
.vnex-soc__hero-status strong {
    color: var(--vnex-text);
    font-size: 0.95rem;
}
.vnex-soc__hero-status small {
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
.vnex-soc__pulse {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--vnex-ok);
    animation: vnex-soc-pulse 1.6s ease-out infinite;
}
.vnex-soc__hero-status.is-frozen .vnex-soc__pulse {
    background: var(--vnex-bad);
}
@keyframes vnex-soc-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vnex-ok) 45%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.vnex-soc__honesty {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}
.vnex-soc__panel {
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 18%, var(--vnex-border));
    border-radius: var(--vnex-radius-sm, 12px);
    background: var(--vnex-card);
    overflow: hidden;
    box-shadow: var(--vnex-shadow);
}
.vnex-soc__panel--link {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-color: color-mix(in srgb, var(--vnex-blue) 32%, var(--vnex-border));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--vnex-blue) 10%, transparent), transparent 55%),
        var(--vnex-card);
}
.vnex-soc__panel--link p {
    margin: 0.25rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.8rem;
}
.vnex-soc__panel--link .vnex-ui__btn {
    font-weight: 800;
}
.vnex-soc__panel-head,
.vnex-soc__panel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-blue) 6%, var(--vnex-card));
}
.vnex-soc__panel-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.vnex-soc__panel-summary::-webkit-details-marker { display: none; }
.vnex-soc__panel-head p {
    margin: 0.2rem 0 0;
    color: var(--vnex-muted);
    font-size: 0.78rem;
}
.vnex-soc__panel-body {
    padding: 1rem 1.05rem 1.15rem;
    display: grid;
    gap: 0.85rem;
}
.vnex-soc__windows {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.vnex-soc__window {
    appearance: none;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    color: var(--vnex-text);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.vnex-soc__window.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}
.vnex-soc__table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.vnex-soc__table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.8rem;
    color: var(--vnex-text);
}
.vnex-soc__table th,
.vnex-soc__table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--vnex-border);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}
.vnex-soc__table th {
    color: var(--vnex-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--vnex-main) 70%, var(--vnex-card));
    position: sticky;
    top: 0;
    z-index: 3;
}
.vnex-soc__table tr.is-danger {
    background: color-mix(in srgb, var(--vnex-bad) 8%, var(--vnex-card));
}
.vnex-soc__table tr.is-warn {
    background: color-mix(in srgb, var(--vnex-warn) 8%, var(--vnex-card));
}
.vnex-soc__table tr.is-ok {
    background: color-mix(in srgb, var(--vnex-ok) 6%, var(--vnex-card));
}
.vnex-soc__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    color: var(--vnex-text);
}
.vnex-soc__tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}
.vnex-soc__tag.is-danger {
    background: var(--vnex-bad-soft);
    color: var(--vnex-bad-text, var(--vnex-bad));
}
.vnex-soc__tag.is-warn {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn-text, var(--vnex-warn));
}
.vnex-soc__tag.is-ok {
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok-text, var(--vnex-ok));
}
.vnex-soc__tag.is-info {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}
.vnex-soc .vnex-ransom-kpi,
.vnex-soc .vnex-ransom-card,
.vnex-soc .vnex-ransom-pack {
    border-color: var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
}
.vnex-soc .vnex-ransom-kpi.is-on,
.vnex-soc .vnex-ransom-pack.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 45%, var(--vnex-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 18%, transparent);
}
html[dir="rtl"] .vnex-soc__table th,
html[dir="rtl"] .vnex-soc__table td { text-align: start; }
html[dir="rtl"] .vnex-soc__eyebrow { letter-spacing: 0.04em; }

.vnex-soc__hero-status .vnex-ui__btn {
    margin-top: 0.35rem;
    justify-self: start;
}
.vnex-soc__hero-status .vnex-ui__btn--danger {
    background: var(--vnex-bad);
    border: 1px solid color-mix(in srgb, var(--vnex-bad) 70%, #7f1d1d);
    color: #fff !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--vnex-bad) 25%, transparent);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.vnex-soc__hero-status.is-frozen .vnex-ui__btn {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--vnex-blue) 20%, transparent);
}
.vnex-soc__events .vnex-soc__table-wrap {
    position: relative;
    max-height: 22rem;
    overflow-x: auto;
    overflow-y: auto;
    background: color-mix(in srgb, var(--vnex-main) 40%, var(--vnex-card));
    border-top: 1px solid var(--vnex-border);
}
.vnex-soc__events .vnex-soc__table-wrap::before {
    content: none;
}
.vnex-soc__events .vnex-soc__table {
    position: relative;
    z-index: 2;
    width: max-content;
    min-width: max-content;
}
.vnex-soc__events .vnex-soc__table th,
.vnex-soc__events .vnex-soc__table td {
    white-space: nowrap;
    vertical-align: middle;
}
.vnex-soc__events .vnex-soc__cell {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    max-width: none;
}
.vnex-soc__events .vnex-soc__cell strong {
    color: var(--vnex-text);
}
.vnex-soc__events .vnex-soc__cell-muted {
    color: var(--vnex-muted);
    font-weight: 500;
}
.vnex-soc__events .vnex-soc__detail {
    color: var(--vnex-muted);
    font-size: 0.78rem;
}
.vnex-soc .vnex-ransom-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}
@media (max-width: 720px) {
    .vnex-soc .vnex-ransom-kpis { grid-template-columns: 1fr; }
}
.vnex-soc .vnex-ransom-kpi {
    text-align: start;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vnex-soc .vnex-ransom-kpi.is-on {
    transform: translateY(-1px);
}
.vnex-soc .vnex-ransom-kpi.is-block.is-on {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-bad) 35%, transparent);
}
.vnex-soc .vnex-ransom-kpi.is-note.is-on {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 35%, transparent);
}
.vnex-soc .vnex-ransom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.65rem;
}
.vnex-soc .vnex-ransom-card {
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vnex-soc .vnex-ransom-card.is-block {
    border-color: color-mix(in srgb, var(--vnex-bad) 35%, var(--vnex-border));
}
.vnex-soc .vnex-ransom-card:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 22%, transparent);
}

/* Dark: keep a light SOC atmosphere without fighting theme tokens */
html.dark .vnex-soc__grid,
.dark .vnex-soc__grid {
    opacity: 0.32;
}
html.dark .vnex-soc__hero,
.dark .vnex-soc__hero,
html.dark .vnex-soc__panel,
.dark .vnex-soc__panel {
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}
html.dark .vnex-soc__hero-status .vnex-ui__btn--danger,
.dark .vnex-soc__hero-status .vnex-ui__btn--danger {
    background: linear-gradient(180deg, #dc2626, #991b1b);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #ef4444 30%, transparent),
        0 0 18px color-mix(in srgb, #ef4444 22%, transparent);
}
html.dark .vnex-soc__panel--link .vnex-ui__btn,
.dark .vnex-soc__panel--link .vnex-ui__btn {
    box-shadow: 0 0 14px color-mix(in srgb, var(--vnex-blue) 22%, transparent);
}
html.dark .vnex-soc__events .vnex-soc__table-wrap,
.dark .vnex-soc__events .vnex-soc__table-wrap {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--vnex-blue) 5%, transparent), transparent 20%),
        color-mix(in srgb, var(--vnex-main) 65%, var(--vnex-card));
}
html.dark .vnex-soc__events .vnex-soc__table-wrap::before,
.dark .vnex-soc__events .vnex-soc__table-wrap::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.05;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 2px,
        color-mix(in srgb, var(--vnex-blue) 35%, transparent) 3px
    );
}

/* Module accent helpers (ready for sidebar wiring) */
.vnex-mod-storage { color: var(--vnex-mod-storage); }
.vnex-mod-crm { color: var(--vnex-mod-crm); }
.vnex-mod-hr { color: var(--vnex-mod-hr); }
.vnex-mod-projects { color: var(--vnex-mod-projects); }
[data-vnex-module="storage"] { --vnex-module-accent: var(--vnex-mod-storage); --vnex-module-accent-soft: var(--vnex-mod-storage-soft); }
[data-vnex-module="crm"] { --vnex-module-accent: var(--vnex-mod-crm); --vnex-module-accent-soft: var(--vnex-mod-crm-soft); }
[data-vnex-module="hr"] { --vnex-module-accent: var(--vnex-mod-hr); --vnex-module-accent-soft: var(--vnex-mod-hr-soft); }
[data-vnex-module="projects"] { --vnex-module-accent: var(--vnex-mod-projects); --vnex-module-accent-soft: var(--vnex-mod-projects-soft); }
[data-vnex-module="home"] { --vnex-module-accent: var(--vnex-mod-home); --vnex-module-accent-soft: var(--vnex-mod-home-soft); }
[data-vnex-module="sales"] { --vnex-module-accent: var(--vnex-mod-sales); --vnex-module-accent-soft: var(--vnex-mod-sales-soft); }
[data-vnex-module="export"] { --vnex-module-accent: var(--vnex-mod-export); --vnex-module-accent-soft: var(--vnex-mod-export-soft); }
[data-vnex-module="finance"] { --vnex-module-accent: var(--vnex-mod-finance); --vnex-module-accent-soft: var(--vnex-mod-finance-soft); }
[data-vnex-module="settings"] { --vnex-module-accent: var(--vnex-mod-settings); --vnex-module-accent-soft: var(--vnex-mod-settings-soft); }

/* Account 360 sales cockpit */
.vnex-ac-dash { display: grid; gap: 1.1rem; }
.vnex-ac-dash__attention {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .vnex-ac-dash__attention { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vnex-ac-attn {
    position: relative;
    text-align: start;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    border-radius: 14px;
    padding: 0.95rem 1.1rem 0.95rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.vnex-ac-attn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border)); }
.vnex-ac-attn::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 999px;
    background: #38bdf8;
}
.vnex-ac-attn.is-danger::before { background: #f87171; }
.vnex-ac-attn.is-warning::before { background: #fbbf24; }
.vnex-ac-attn.is-success::before { background: #4ade80; }
.vnex-ac-attn.is-info::before { background: #38bdf8; }
.vnex-ac-attn__title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.vnex-ac-attn__body { color: var(--vnex-muted, #a1a1aa); font-size: 0.86rem; line-height: 1.45; padding-inline-end: 1.2rem; }
.vnex-ac-attn__go { position: absolute; inset-inline-end: 0.9rem; top: 50%; transform: translateY(-50%); opacity: .55; }
.vnex-ac-dash__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .vnex-ac-dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .vnex-ac-dash__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vnex-ac-tile {
    border: 1px solid var(--vnex-border);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vnex-blue) 14%, transparent), transparent 55%),
        var(--vnex-card);
    border-radius: 16px;
    padding: 1rem 1.05rem 0.9rem;
    display: grid;
    gap: 0.35rem;
    min-height: 9.2rem;
}
.vnex-ac-tile.is-hot {
    border-color: color-mix(in srgb, #f87171 45%, var(--vnex-border));
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(248, 113, 113, 0.16), transparent 55%),
        var(--vnex-card);
}
.vnex-ac-tile__label {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--vnex-muted, #a1a1aa);
    font-weight: 650;
}
.vnex-ac-tile__value {
    font-size: 1.85rem;
    font-weight: 780;
    line-height: 1.1;
}
.vnex-ac-tile__value--sm { font-size: 1.25rem; }
.vnex-ac-tile__meta {
    color: var(--vnex-muted, #a1a1aa);
    font-size: 0.84rem;
    line-height: 1.4;
    min-height: 2.4rem;
}
.vnex-ac-tile__link {
    justify-self: start;
    margin-top: auto;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--vnex-blue) 85%, white);
    font-weight: 650;
    font-size: 0.84rem;
    padding: 0;
    cursor: pointer;
}
.vnex-ac-tile__link:hover { text-decoration: underline; }
.vnex-ac-dash__identity h4 {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
}

/* CRM Sales Home (rollup under CRM — not a separate Sales module) */
.vnex-sales-home__attention {
    margin: 0 0 1.15rem;
}
.vnex-sales-home__attention a.vnex-ac-attn {
    text-decoration: none;
    color: inherit;
}
.vnex-sales-home__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    width: 100%;
}
.vnex-sales-home__pane {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
}
.vnex-sales-home__pane .fi-section {
    width: 100%;
    height: 100%;
}
@media (min-width: 960px) {
    .vnex-sales-home-page .fi-page-content {
        display: flex;
        flex-direction: column;
    }
    .vnex-sales-home__pane.is-accounts {
        flex: 0 0 calc(33.333% - 0.34rem);
        width: calc(33.333% - 0.34rem);
        max-width: calc(33.333% - 0.34rem);
    }
    .vnex-sales-home__pane.is-queue {
        flex: 0 0 calc(66.667% - 0.66rem);
        width: calc(66.667% - 0.66rem);
        max-width: calc(66.667% - 0.66rem);
    }
}
.vnex-sales-home__queue-wrap {
    overflow-x: auto;
}
.vnex-sales-home__queue-table {
    table-layout: auto !important;
    min-width: 40rem;
    width: 100%;
}
.vnex-sales-home__queue-table th,
.vnex-sales-home__queue-table td {
    white-space: nowrap;
    vertical-align: middle;
}
.vnex-sales-home__queue-table th:nth-child(2),
.vnex-sales-home__queue-table td:nth-child(2),
.vnex-sales-home__queue-table th:nth-child(3),
.vnex-sales-home__queue-table td:nth-child(3) {
    white-space: normal;
    overflow-wrap: anywhere;
}
.vnex-sales-home__mono {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}
.vnex-sales-home__accounts {
    display: grid;
    gap: 0.55rem;
}
.vnex-sales-home__account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 92%, transparent);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.vnex-sales-home__account:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
    transform: translateY(-1px);
}
.vnex-sales-home__account.is-hot {
    border-color: color-mix(in srgb, #f87171 45%, var(--vnex-border));
    background: color-mix(in srgb, #f87171 8%, var(--vnex-card));
}
.vnex-sales-home__account-name {
    font-weight: 700;
    font-size: 0.95rem;
}
.vnex-sales-home__account-meta {
    margin-top: 0.15rem;
    color: var(--vnex-muted, #a1a1aa);
    font-size: 0.8rem;
    line-height: 1.4;
}
.vnex-sales-home__account-side {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.vnex-sales-home__money {
    font-weight: 650;
    font-size: 0.82rem;
    color: var(--vnex-muted, #a1a1aa);
}
.vnex-sales-home__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.vnex-sales-home__pill.is-danger {
    background: rgba(248, 113, 113, 0.16);
    color: #f87171;
}
.vnex-sales-home__bars {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--vnex-border);
    display: grid;
    gap: 0.45rem;
}
.vnex-sales-home__bars-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vnex-muted, #a1a1aa);
    margin-bottom: 0.2rem;
}
.vnex-sales-home__bar-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 7rem) 1fr 2rem;
    gap: 0.55rem;
    align-items: center;
}
.vnex-sales-home__bar-label {
    font-size: 0.78rem;
    color: var(--vnex-muted, #a1a1aa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vnex-sales-home__bar-track {
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-border) 80%, transparent);
    overflow: hidden;
}
.vnex-sales-home__bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f87171, #fb923c);
}
.vnex-sales-home__bar-fill.is-variety {
    background: linear-gradient(90deg, #38bdf8, #818cf8);
}
.vnex-sales-home__bar-fill.is-pod {
    background: linear-gradient(90deg, #34d399, #2dd4bf);
}
.vnex-sales-home__mix-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.1rem;
}
.vnex-sales-home__mix-bars .vnex-sales-home__bars {
    margin-top: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--vnex-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--vnex-card) 94%, transparent);
}
@media (max-width: 900px) {
    .vnex-sales-home__mix-bars {
        grid-template-columns: 1fr;
    }
}
.vnex-sales-home__queue-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.vnex-sales-home__bulk-btn {
    appearance: none;
    border: 1px solid color-mix(in srgb, #f87171 45%, var(--vnex-border));
    background: color-mix(in srgb, #f87171 14%, transparent);
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
}
.vnex-sales-home__bulk-btn:hover {
    background: color-mix(in srgb, #f87171 22%, transparent);
}
.vnex-sales-home__bar-val {
    font-size: 0.78rem;
    font-weight: 700;
    text-align: end;
}
.vnex-sales-home__link {
    color: inherit;
    font-weight: 650;
    text-decoration: none;
}
.vnex-sales-home__link:hover {
    color: color-mix(in srgb, var(--vnex-blue) 80%, white);
    text-decoration: underline;
}

.vnex-ac-dash__chart {
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 94%, transparent);
}
.vnex-ac-month-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: end;
    min-height: 9rem;
    margin-top: 0.55rem;
}
.vnex-ac-month-chart__col {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    align-content: end;
    height: 100%;
}
.vnex-ac-month-chart__val {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vnex-muted, #a1a1aa);
}
.vnex-ac-month-chart__track {
    width: 100%;
    max-width: 2.2rem;
    height: 6.5rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--vnex-border) 75%, transparent);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.vnex-ac-month-chart__fill {
    width: 100%;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    min-height: 4px;
}
.vnex-ac-month-chart__label {
    font-size: 0.72rem;
    color: var(--vnex-muted, #a1a1aa);
}

.vnex-ac-credit-total {
    display: grid;
    gap: 0.2rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #fbbf24 35%, var(--vnex-border));
    background: color-mix(in srgb, #fbbf24 10%, var(--vnex-card));
}
.vnex-ac-credit-total__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vnex-muted, #a1a1aa);
}
.vnex-ac-credit-total__value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.vnex-ac-credit-total__meta {
    font-size: 0.8rem;
    color: var(--vnex-muted, #a1a1aa);
}
.vnex-ep-row.is-hot {
    border-color: color-mix(in srgb, #f87171 40%, var(--vnex-border));
    background: color-mix(in srgb, #f87171 7%, var(--vnex-card));
}

.vnex-sales-home__hero {
    margin-bottom: 1rem;
}
.vnex-ep-avatar.is-sales {
    color: #38bdf8;
}
.vnex-ep-avatar.is-crm {
    color: #818cf8;
}
.vnex-ep-avatar.is-export {
    color: #fb923c;
}
.vnex-ep-avatar.is-hr {
    color: #38bdf8;
}
.vnex-ep-avatar.is-projects {
    color: #fbbf24;
}
.vnex-sales-home__bar-fill.is-projects {
    background: linear-gradient(90deg, #fbbf24, #fb923c);
}
.vnex-ep-avatar.is-finance {
    color: #34d399;
}
.vnex-sales-home__bar-fill.is-crm,
.vnex-sales-home__bar-fill.is-activity {
    background: linear-gradient(90deg, #818cf8, #c084fc);
}
.vnex-sales-home__bar-fill.is-money {
    background: linear-gradient(90deg, #34d399, #fbbf24);
}
.vnex-op-rail {
    margin: 0 0 1.25rem;
}
.vnex-op-rail__intro {
    margin-bottom: 0.65rem;
}
.vnex-op-rail__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}
.vnex-op-rail__lede {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    opacity: 0.78;
}
.vnex-op-rail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: 0.65rem;
}
.vnex-op-rail__item {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    text-decoration: none;
    color: inherit;
}
.vnex-ep-avatar.is-home {
    color: #93c5fd;
}
.vnex-op-rail__item.is-hot {
    border-color: color-mix(in srgb, #fbbf24 45%, var(--vnex-border));
}
.vnex-op-rail__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.vnex-op-rail__count {
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.vnex-op-rail__item.is-hot .vnex-op-rail__count {
    color: #fbbf24;
}
.vnex-op-rail__item:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 42%, var(--vnex-border));
}
.vnex-op-rail__label {
    font-weight: 650;
    font-size: 0.92rem;
}
.vnex-op-rail__hint {
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.72;
}
.vnex-ep-hero__backs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.vnex-ep-back.is-muted {
    opacity: 0.72;
    font-size: 0.8rem;
}
.vnex-sales-home__row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.vnex-sales-home__mini-link {
    font-size: 0.78rem;
    font-weight: 650;
    color: color-mix(in srgb, var(--vnex-blue) 85%, white);
    text-decoration: none;
}
.vnex-sales-home__mini-link:hover { text-decoration: underline; }
.vnex-sales-home__mini-btn {
    border: 1px solid color-mix(in srgb, #4ade80 45%, var(--vnex-border));
    background: color-mix(in srgb, #4ade80 12%, transparent);
    color: #4ade80;
    border-radius: 8px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.vnex-sales-home__mini-btn:hover {
    background: color-mix(in srgb, #4ade80 20%, transparent);
}
.vnex-sales-home__mini-btn.is-bad {
    border-color: color-mix(in srgb, #f87171 45%, var(--vnex-border));
    background: color-mix(in srgb, #f87171 12%, transparent);
    color: #f87171;
}
.vnex-sales-home__mini-btn.is-bad:hover {
    background: color-mix(in srgb, #f87171 20%, transparent);
}

/* Operating home dashboards (CRM / Export / Money / Projects / People) */
.vnex-op-home-page .vnex-ep-hero.vnex-sales-home__hero {
    margin-bottom: 1.15rem;
    padding: 1.25rem 1.35rem;
    border-radius: calc(var(--vnex-radius-sm) + 2px);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 16%, var(--vnex-border));
    background:
        radial-gradient(720px 200px at 0% 0%, color-mix(in srgb, var(--vnex-blue) 10%, transparent), transparent 58%),
        var(--vnex-card);
    box-shadow:
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        var(--vnex-shadow);
}
.vnex-op-home--crm .vnex-ep-hero.vnex-sales-home__hero {
    margin-bottom: 0.75rem;
    padding: 1rem 1.15rem;
}
.vnex-op-home-page .vnex-ep-hero__backs {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vnex-op-home-page .vnex-ep-back.is-muted {
    opacity: 1;
    padding: 0.48rem 0.85rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 750;
    color: color-mix(in srgb, var(--vnex-blue) 88%, white);
    background: color-mix(in srgb, var(--vnex-blue) 10%, transparent);
    border-color: color-mix(in srgb, var(--vnex-blue) 32%, var(--vnex-border));
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.vnex-op-home-page .vnex-ep-back.is-muted:hover {
    background: color-mix(in srgb, var(--vnex-blue) 18%, transparent);
    border-color: color-mix(in srgb, var(--vnex-blue) 52%, var(--vnex-border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--vnex-blue) 20%, transparent);
    transform: translateY(-1px);
}
.vnex-op-home-page .vnex-ep-hero__backs .vnex-ep-back:not(.is-muted) {
    padding: 0.52rem 1rem;
    border-radius: 0.65rem;
    font-size: 0.8rem;
    font-weight: 750;
    color: #fff !important;
    background: linear-gradient(135deg, var(--vnex-blue), color-mix(in srgb, var(--vnex-blue) 75%, #6366f1));
    border-color: color-mix(in srgb, var(--vnex-blue) 55%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--vnex-blue) 32%, transparent);
}
.vnex-op-home-page .vnex-ep-hero__backs .vnex-ep-back:not(.is-muted):hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--vnex-blue) 40%, transparent);
}

.vnex-op-home-page .vnex-ep-avatar.is-crm {
    color: #a5b4fc;
    background: linear-gradient(145deg, rgba(129, 140, 248, 0.28), rgba(99, 102, 241, 0.08));
    border-color: rgba(129, 140, 248, 0.38);
    box-shadow: 0 4px 22px rgba(129, 140, 248, 0.2);
}
.vnex-op-home-page .vnex-ep-avatar.is-export {
    color: #fdba74;
    background: linear-gradient(145deg, rgba(251, 146, 60, 0.26), rgba(234, 88, 12, 0.08));
    border-color: rgba(251, 146, 60, 0.35);
    box-shadow: 0 4px 22px rgba(251, 146, 60, 0.18);
}
.vnex-op-home-page .vnex-ep-avatar.is-finance {
    color: #6ee7b7;
    background: linear-gradient(145deg, rgba(52, 211, 153, 0.26), rgba(16, 185, 129, 0.08));
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: 0 4px 22px rgba(52, 211, 153, 0.18);
}
.vnex-op-home-page .vnex-ep-avatar.is-projects {
    color: #fcd34d;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.26), rgba(245, 158, 11, 0.08));
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 4px 22px rgba(251, 191, 36, 0.18);
}
.vnex-op-home-page .vnex-ep-avatar.is-hr {
    color: #7dd3fc;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.26), rgba(14, 165, 233, 0.08));
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 4px 22px rgba(56, 189, 248, 0.18);
}

.vnex-op-home-page .vnex-ep-chip {
    padding: 0.32rem 0.72rem;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
}
.vnex-op-home-page .vnex-ep-hero__name {
    font-size: 1.35rem;
}

.vnex-op-home-page .vnex-stat-grid {
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}
.vnex-op-home-page .vnex-stat-card {
    border-radius: 1rem !important;
    padding: 1.1rem 1.15rem 1.15rem !important;
    background:
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--vnex-card) 94%, white 6%) 0%,
            color-mix(in srgb, var(--vnex-main) 65%, var(--vnex-card)) 100%
        ) !important;
    border-color: color-mix(in srgb, var(--vnex-border) 88%, transparent) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, black 16%, transparent) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vnex-op-home-page .vnex-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--vnex-blue) 32%, var(--vnex-border)) !important;
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--vnex-blue) 12%, transparent),
        0 2px 10px color-mix(in srgb, black 18%, transparent) !important;
}
.vnex-op-home-page .vnex-stat-card__icon {
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, currentColor 16%, transparent);
}
.vnex-op-home-page .vnex-stat-card__value {
    font-size: clamp(1.05rem, 0.55rem + 1.45vw, 1.75rem);
    font-weight: 800;
}

.vnex-op-home-page .vnex-ac-dash__attention {
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}
.vnex-op-home-page .vnex-ac-dash__attention:has(.vnex-ac-attn:only-child) {
    grid-template-columns: 1fr;
}
.vnex-op-home-page .vnex-ac-attn {
    border-radius: 1rem;
    padding: 1rem 1.1rem 1rem 1.15rem;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--vnex-card) 96%, transparent),
            color-mix(in srgb, var(--vnex-main) 50%, var(--vnex-card))
        );
    box-shadow: 0 2px 8px color-mix(in srgb, black 14%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vnex-op-home-page .vnex-ac-attn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vnex-blue) 12%, transparent);
}
.vnex-op-home-page .vnex-ac-attn::before {
    inset-block: 0.75rem;
    width: 3px;
}
.vnex-op-home-page .vnex-ac-attn__title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.vnex-op-home-page .vnex-sales-home__mix-bars {
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}
.vnex-op-home-page .vnex-sales-home__mix-bars .vnex-sales-home__bars {
    border-radius: 1rem;
    padding: 1rem 1.05rem;
    border-color: color-mix(in srgb, var(--vnex-blue) 12%, var(--vnex-border));
    background:
        radial-gradient(480px 120px at 0% 0%, color-mix(in srgb, var(--vnex-blue) 6%, transparent), transparent 55%),
        color-mix(in srgb, var(--vnex-card) 96%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, black 14%, transparent);
}
.vnex-op-home-page .vnex-sales-home__bar-track {
    height: 0.62rem;
}
.vnex-op-home-page .vnex-sales-home__bar-fill {
    box-shadow: 0 0 10px color-mix(in srgb, currentColor 25%, transparent);
}

.vnex-op-home-page .vnex-dash-actions {
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}
.vnex-op-home-page .vnex-dash-action {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 0.95rem 1.05rem;
    background:
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--vnex-card) 94%, white 6%) 0%,
            color-mix(in srgb, var(--vnex-main) 60%, var(--vnex-card)) 100%
        );
    border-color: color-mix(in srgb, var(--vnex-border) 85%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, black 14%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vnex-op-home-page .vnex-dash-action::before {
    content: "";
    position: absolute;
    inset-block: 0.75rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #38bdf8;
    opacity: 0.85;
}
.vnex-op-home-page .vnex-dash-action.is-warning::before { background: #fbbf24; }
.vnex-op-home-page .vnex-dash-action.is-info::before { background: #38bdf8; }
.vnex-op-home-page .vnex-dash-action:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vnex-blue) 12%, transparent);
}
.vnex-op-home-page .vnex-dash-action__icon {
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, currentColor 14%, transparent);
}
.vnex-op-home-page .vnex-dash-action__value {
    font-size: 1.65rem;
    letter-spacing: -0.03em;
}

.vnex-op-home-page .vnex-sales-home__pane .fi-section {
    border-radius: 1rem !important;
    border-color: color-mix(in srgb, var(--vnex-blue) 12%, var(--vnex-border)) !important;
    background:
        radial-gradient(520px 140px at 0% 0%, color-mix(in srgb, var(--vnex-blue) 5%, transparent), transparent 55%),
        var(--vnex-card) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, black 14%, transparent);
}
.vnex-op-home-page .vnex-sales-home__account {
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--vnex-main) 30%, var(--vnex-card));
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.vnex-op-home-page .vnex-sales-home__account:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--vnex-blue) 10%, transparent);
}
.vnex-op-home-page .vnex-sales-home__mini-btn {
    min-height: 1.85rem;
    padding: 0.28rem 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.74rem;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.vnex-op-home-page .vnex-sales-home__mini-btn:hover {
    transform: translateY(-1px);
}
.vnex-op-home-page .vnex-dash-empty {
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vnex-ok) 6%, var(--vnex-card));
}
.vnex-op-home-page .vnex-sales-home__queue-table tbody tr:hover td {
    background: color-mix(in srgb, var(--vnex-blue) 5%, transparent);
}
.vnex-op-home-page .vnex-sales-home__queue-table td {
    transition: background 0.15s ease;
}

/* Inner wrapper — guarantees op-home polish when page class is on fi-page only */
.vnex-op-home {
    display: grid;
    gap: 0;
}

/* ── Projects dashboard accent (amber delivery lane) ── */
.vnex-op-home--projects .vnex-ep-hero.vnex-sales-home__hero {
    border-color: color-mix(in srgb, #fbbf24 22%, var(--vnex-border));
    background:
        radial-gradient(720px 200px at 0% 0%, color-mix(in srgb, #fbbf24 14%, transparent), transparent 58%),
        radial-gradient(420px 160px at 100% 100%, color-mix(in srgb, #fb923c 8%, transparent), transparent 55%),
        var(--vnex-card);
}
.vnex-op-home--projects .vnex-ep-hero__backs .vnex-ep-back:not(.is-muted) {
    background: linear-gradient(135deg, #f59e0b, color-mix(in srgb, #f59e0b 75%, #fb923c));
    border-color: color-mix(in srgb, #f59e0b 55%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, #f59e0b 32%, transparent);
}
.vnex-op-home--projects .vnex-ep-hero__backs .vnex-ep-back:not(.is-muted):hover {
    box-shadow: 0 6px 18px color-mix(in srgb, #f59e0b 42%, transparent);
}
.vnex-op-home--projects .vnex-ep-back.is-muted {
    color: color-mix(in srgb, #fbbf24 92%, white);
    background: color-mix(in srgb, #fbbf24 10%, transparent);
    border-color: color-mix(in srgb, #fbbf24 32%, var(--vnex-border));
}
.vnex-op-home--projects .vnex-ep-back.is-muted:hover {
    background: color-mix(in srgb, #fbbf24 18%, transparent);
    border-color: color-mix(in srgb, #fbbf24 52%, var(--vnex-border));
    box-shadow: 0 4px 14px color-mix(in srgb, #fbbf24 20%, transparent);
}
.vnex-op-home--projects .vnex-ep-chip.is-danger {
    color: #fecaca;
    background: color-mix(in srgb, #ef4444 18%, transparent);
    border-color: color-mix(in srgb, #f87171 42%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, #ef4444 15%, transparent);
}
.vnex-op-home--projects .vnex-stat-card.is-danger {
    border-color: color-mix(in srgb, #f87171 28%, var(--vnex-border)) !important;
}
.vnex-op-home--projects .vnex-stat-card.is-danger:hover {
    border-color: color-mix(in srgb, #f87171 45%, var(--vnex-border)) !important;
    box-shadow:
        0 10px 24px color-mix(in srgb, #ef4444 14%, transparent),
        0 2px 10px color-mix(in srgb, black 18%, transparent) !important;
}
.vnex-op-home--projects .vnex-ac-attn.is-danger,
.vnex-op-home--projects .vnex-ac-attn.is-warning {
    border-color: color-mix(in srgb, #f87171 35%, var(--vnex-border));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, #ef4444 8%, var(--vnex-card)),
            color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card))
        );
}
.vnex-op-home--projects .vnex-ac-attn.is-danger:hover,
.vnex-op-home--projects .vnex-ac-attn.is-warning:hover {
    box-shadow: 0 8px 22px color-mix(in srgb, #ef4444 16%, transparent);
}
.vnex-op-home--projects .vnex-sales-home__mix-bars .vnex-sales-home__bars {
    border-color: color-mix(in srgb, #fbbf24 14%, var(--vnex-border));
    background:
        radial-gradient(480px 120px at 0% 0%, color-mix(in srgb, #fbbf24 8%, transparent), transparent 55%),
        color-mix(in srgb, var(--vnex-card) 96%, transparent);
}
.vnex-op-home--projects .vnex-sales-home__bar-fill.is-projects {
    background: linear-gradient(90deg, #fbbf24, #fb923c);
    box-shadow: 0 0 12px color-mix(in srgb, #fbbf24 45%, transparent);
}
.vnex-op-home--projects .vnex-dash-action.is-warning .vnex-dash-action__value {
    color: #fbbf24;
    text-shadow: 0 0 20px color-mix(in srgb, #fbbf24 35%, transparent);
}
.vnex-op-home--projects .vnex-sales-home__pane .fi-section {
    border-color: color-mix(in srgb, #fbbf24 12%, var(--vnex-border)) !important;
    background:
        radial-gradient(480px 120px at 0% 0%, color-mix(in srgb, #fbbf24 5%, transparent), transparent 55%),
        var(--vnex-card) !important;
}
.vnex-op-home--projects .vnex-sales-home__queue-wrap {
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
    overflow: hidden;
}
.vnex-op-home--projects .vnex-sales-home__queue-table thead th {
    background: color-mix(in srgb, var(--vnex-main) 50%, var(--vnex-card));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-op-home--projects .vnex-sales-home__queue-table tbody tr:hover td {
    background: color-mix(in srgb, #fbbf24 6%, transparent);
}
.vnex-op-home--projects .vnex-sales-home__account.is-hot {
    border-color: color-mix(in srgb, #f87171 50%, var(--vnex-border));
    background: color-mix(in srgb, #ef4444 6%, var(--vnex-card));
}

/* Filament section headings inside operating homes */
.vnex-op-home-page .vnex-sales-home__pane .fi-section-header-heading,
.vnex-op-home .vnex-sales-home__pane .fi-section-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-size: 0.95rem !important;
}
.vnex-op-home-page .vnex-sales-home__pane .fi-section-header-description,
.vnex-op-home .vnex-sales-home__pane .fi-section-header-description {
    font-size: 0.78rem !important;
    opacity: 0.78;
}
.vnex-op-home-page .vnex-sales-home__grid,
.vnex-op-home .vnex-sales-home__grid {
    margin-top: 0.25rem;
    gap: 1rem;
}

/* ── Money dashboard accent (emerald collection lane) ── */
.vnex-op-home--money .vnex-ep-hero.vnex-sales-home__hero {
    border-color: color-mix(in srgb, #34d399 22%, var(--vnex-border));
    background:
        radial-gradient(720px 200px at 0% 0%, color-mix(in srgb, #34d399 14%, transparent), transparent 58%),
        radial-gradient(420px 160px at 100% 100%, color-mix(in srgb, #10b981 8%, transparent), transparent 55%),
        var(--vnex-card);
}
.vnex-op-home--money .vnex-ep-hero__backs .vnex-ep-back:not(.is-muted) {
    background: linear-gradient(135deg, #34d399, color-mix(in srgb, #10b981 85%, #059669));
    border-color: color-mix(in srgb, #34d399 55%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, #34d399 35%, transparent);
}
.vnex-op-home--money .vnex-ep-hero__backs .vnex-ep-back:not(.is-muted):hover {
    box-shadow: 0 6px 20px color-mix(in srgb, #34d399 45%, transparent);
}
.vnex-op-home--money .vnex-ep-back.is-muted {
    color: color-mix(in srgb, #6ee7b7 95%, white);
    background: color-mix(in srgb, #34d399 10%, transparent);
    border-color: color-mix(in srgb, #34d399 32%, var(--vnex-border));
}
.vnex-op-home--money .vnex-ep-back.is-muted:hover {
    background: color-mix(in srgb, #34d399 18%, transparent);
    border-color: color-mix(in srgb, #34d399 52%, var(--vnex-border));
    box-shadow: 0 4px 14px color-mix(in srgb, #34d399 22%, transparent);
}
.vnex-op-home--money .vnex-ep-chip.is-danger {
    color: #fecaca;
    font-weight: 800;
    background: color-mix(in srgb, #ef4444 16%, transparent);
    border-color: color-mix(in srgb, #f87171 40%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, #ef4444 18%, transparent);
}
.vnex-op-home--money .vnex-stat-card.is-warning {
    border-color: color-mix(in srgb, #fbbf24 30%, var(--vnex-border)) !important;
}
.vnex-op-home--money .vnex-stat-card.is-warning:hover {
    border-color: color-mix(in srgb, #fbbf24 48%, var(--vnex-border)) !important;
    box-shadow:
        0 10px 24px color-mix(in srgb, #fbbf24 14%, transparent),
        0 2px 10px color-mix(in srgb, black 18%, transparent) !important;
}
.vnex-op-home--money .vnex-ac-attn.is-warning {
    border-color: color-mix(in srgb, #fbbf24 38%, var(--vnex-border));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, #fbbf24 8%, var(--vnex-card)),
            color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card))
        );
}
.vnex-op-home--money .vnex-ac-attn.is-warning:hover {
    box-shadow: 0 8px 22px color-mix(in srgb, #fbbf24 16%, transparent);
}
.vnex-op-home--money .vnex-ac-attn.is-danger {
    border-color: color-mix(in srgb, #f87171 38%, var(--vnex-border));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, #ef4444 7%, var(--vnex-card)),
            color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card))
        );
}
.vnex-op-home--money .vnex-sales-home__mix-bars .vnex-sales-home__bars,
.vnex-op-home--money .vnex-sales-home__bars {
    border-color: color-mix(in srgb, #34d399 14%, var(--vnex-border));
    background:
        radial-gradient(480px 120px at 0% 0%, color-mix(in srgb, #34d399 8%, transparent), transparent 55%),
        color-mix(in srgb, var(--vnex-card) 96%, transparent);
    border-radius: 1rem;
    padding: 1rem 1.05rem;
    box-shadow: 0 2px 8px color-mix(in srgb, black 14%, transparent);
}
.vnex-op-home--money .vnex-sales-home__bar-fill.is-money {
    background: linear-gradient(90deg, #34d399, #2dd4bf);
    box-shadow: 0 0 12px color-mix(in srgb, #34d399 45%, transparent);
}
.vnex-op-home--money .vnex-dash-action.is-warning .vnex-dash-action__value {
    color: #fbbf24;
    text-shadow: 0 0 18px color-mix(in srgb, #fbbf24 32%, transparent);
}
.vnex-op-home--money .vnex-dash-action.is-info .vnex-dash-action__value {
    color: #34d399;
    text-shadow: 0 0 18px color-mix(in srgb, #34d399 28%, transparent);
}
.vnex-op-home--money .vnex-sales-home__pane .fi-section {
    border-color: color-mix(in srgb, #34d399 12%, var(--vnex-border)) !important;
    background:
        radial-gradient(480px 120px at 0% 0%, color-mix(in srgb, #34d399 5%, transparent), transparent 55%),
        var(--vnex-card) !important;
}
.vnex-op-home--money .vnex-sales-home__queue-wrap {
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, #34d399 18%, var(--vnex-border));
    overflow: hidden;
    box-shadow: 0 2px 10px color-mix(in srgb, black 12%, transparent);
}
.vnex-op-home--money .vnex-sales-home__queue-table thead th {
    background: color-mix(in srgb, #34d399 8%, var(--vnex-card));
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, #6ee7b7 80%, var(--vnex-muted));
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
.vnex-op-home--money .vnex-sales-home__queue-table tbody tr {
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 70%, transparent);
}
.vnex-op-home--money .vnex-sales-home__queue-table tbody tr:hover td {
    background: color-mix(in srgb, #34d399 7%, transparent);
}
.vnex-op-home--money .vnex-sales-home__queue-table .vnex-sales-home__mini-btn {
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.74rem;
    font-weight: 750;
    color: #fff !important;
    background: linear-gradient(135deg, #34d399, color-mix(in srgb, #10b981 88%, #059669));
    border-color: color-mix(in srgb, #34d399 50%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, #34d399 32%, transparent);
}
.vnex-op-home--money .vnex-sales-home__queue-table .vnex-sales-home__mini-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px color-mix(in srgb, #34d399 42%, transparent);
}
.vnex-op-home--money .vnex-sales-home__account {
    border-color: color-mix(in srgb, #34d399 12%, var(--vnex-border));
}
.vnex-op-home--money .vnex-sales-home__account:hover {
    border-color: color-mix(in srgb, #34d399 35%, var(--vnex-border));
    box-shadow: 0 6px 16px color-mix(in srgb, #34d399 12%, transparent);
}
.vnex-op-home--money .vnex-sales-home__money {
    color: color-mix(in srgb, #6ee7b7 90%, white);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.vnex-op-home--money .vnex-sales-home__link.is-hot {
    color: #fbbf24;
    font-weight: 750;
}

/* Shipments table — keep BL/container columns compact when few columns are visible */
.vnex-shipments-page .fi-ta-header-cell-bl-number,
.vnex-shipments-page .fi-ta-cell-bl-number,
.vnex-shipments-page .fi-ta-header-cell-container-no,
.vnex-shipments-page .fi-ta-cell-container-no {
    width: 12rem !important;
    max-width: 14rem;
    white-space: nowrap;
}

.vnex-shipments-page .fi-ta-header-cell-status,
.vnex-shipments-page .fi-ta-cell-status {
    width: 7rem !important;
    max-width: 8rem;
}

.vnex-shipments-page .fi-ta-header-cell-payment-collected,
.vnex-shipments-page .fi-ta-cell-payment-collected {
    width: 4.5rem !important;
    max-width: 5rem;
}

/* —— CRM Customer Board —— */
.vnex-crm-dash-page .fi-header {
    margin-bottom: 0.35rem;
}
.vnex-crm-dash-page .fi-header-subheading {
    display: none;
}
.vnex-crm-board {
    --crm-gap: 0.85rem;
    --crm-radius: 12px;
    --crm-border: color-mix(in srgb, var(--vnex-border) 92%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--crm-gap);
}
.vnex-crm-board__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.vnex-crm-board__eyebrow {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-crm-board__scope {
    margin-top: 0.2rem;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--vnex-text);
}
.vnex-crm-board__top-actions {
    display: flex;
    gap: 0.45rem;
}
.vnex-crm-board__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--crm-border);
    background: var(--vnex-card);
    color: var(--vnex-text);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.vnex-crm-board__btn.is-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff !important;
}
.vnex-crm-board__btn:hover {
    border-color: color-mix(in srgb, #60a5fa 45%, var(--vnex-border));
}

.vnex-crm-board__kpis {
    padding: 0.85rem;
    border-radius: calc(var(--crm-radius) + 2px);
    border: 1px solid var(--crm-border);
    background: var(--vnex-card);
}
.vnex-crm-board__kpis .vnex-stat-grid {
    margin: 0 !important;
    gap: 0.55rem;
}
.vnex-crm-board__kpis .vnex-stat-grid.is-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1180px) {
    .vnex-crm-board__kpis .vnex-stat-grid.is-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .vnex-crm-board__kpis .vnex-stat-grid.is-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.vnex-crm-board__kpis .vnex-stat-card {
    min-height: 0;
    padding: 0.75rem 0.8rem;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card)) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
.vnex-crm-board__kpis .vnex-stat-card:hover {
    transform: none;
    border-color: color-mix(in srgb, #60a5fa 35%, transparent) !important;
    background: color-mix(in srgb, #60a5fa 8%, var(--vnex-card)) !important;
}
.vnex-crm-board__kpis .vnex-stat-card::after,
.vnex-crm-board__kpis .vnex-stat-card::before {
    display: none !important;
}
.vnex-crm-board__kpis .vnex-stat-card__label {
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-crm-board__kpis .vnex-stat-card__value {
    margin-top: 0.25rem;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--vnex-text);
}
.vnex-crm-board__kpis .vnex-stat-card__desc {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--vnex-muted);
    -webkit-line-clamp: 1;
}
.vnex-crm-board__kpis .vnex-stat-card__icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
}
.vnex-crm-board__kpis .vnex-stat-card.is-warning .vnex-stat-card__value { color: #fbbf24; }
.vnex-crm-board__kpis .vnex-stat-card.is-success .vnex-stat-card__value { color: #6ee7b7; }
.vnex-crm-board__kpis .vnex-stat-card.is-info .vnex-stat-card__value { color: #7dd3fc; }

.vnex-crm-board__alerts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
@media (max-width: 900px) {
    .vnex-crm-board__alerts {
        grid-template-columns: 1fr;
    }
}
.vnex-crm-board__alert {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--crm-border);
    background: var(--vnex-card);
    text-decoration: none;
    color: inherit;
    min-height: 3.4rem;
}
.vnex-crm-board__alert strong {
    font-size: 0.8rem;
    font-weight: 750;
}
.vnex-crm-board__alert span {
    font-size: 0.72rem;
    color: var(--vnex-muted);
    line-height: 1.35;
}
.vnex-crm-board__alert.is-warning {
    border-color: color-mix(in srgb, #fbbf24 28%, var(--vnex-border));
    background: color-mix(in srgb, #fbbf24 6%, var(--vnex-card));
}
.vnex-crm-board__alert.is-info {
    border-color: color-mix(in srgb, #38bdf8 24%, var(--vnex-border));
    background: color-mix(in srgb, #38bdf8 5%, var(--vnex-card));
}

.vnex-crm-board__main {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--crm-gap);
    align-items: start;
}
.vnex-crm-board__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-gap);
    align-items: start;
}
@media (max-width: 980px) {
    .vnex-crm-board__main,
    .vnex-crm-board__side {
        grid-template-columns: 1fr;
    }
}

.vnex-crm-board__card {
    min-width: 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: var(--crm-radius);
    border: 1px solid var(--crm-border);
    background: var(--vnex-card);
}
.vnex-crm-board__card.is-priority {
    border-color: color-mix(in srgb, #fbbf24 22%, var(--vnex-border));
}
.vnex-crm-board__card.is-full {
    width: 100%;
}
.vnex-crm-board__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 70%, transparent);
}
.vnex-crm-board__card-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}
.vnex-crm-board__card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--vnex-muted);
}
.vnex-crm-board__count {
    flex-shrink: 0;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: color-mix(in srgb, #60a5fa 14%, transparent);
    color: #93c5fd;
}
.vnex-crm-board__empty {
    padding: 0.85rem 0.15rem;
    font-size: 0.82rem;
    color: var(--vnex-muted);
}
.vnex-crm-board__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.vnex-crm-board__list > li + li {
    border-top: 1px solid color-mix(in srgb, var(--vnex-border) 55%, transparent);
}
.vnex-crm-board__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.15rem;
    text-decoration: none;
    color: inherit;
}
.vnex-crm-board__item:hover .vnex-crm-board__item-title {
    color: #93c5fd;
}
.vnex-crm-board__item-main {
    min-width: 0;
    flex: 1;
}
.vnex-crm-board__item-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnex-crm-board__item-sub {
    margin-top: 0.18rem;
    font-size: 0.72rem;
    color: var(--vnex-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnex-crm-board__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.vnex-crm-board__tags span {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 750;
    background: color-mix(in srgb, #fbbf24 10%, transparent);
    color: #fcd34d;
    border: 1px solid color-mix(in srgb, #fbbf24 22%, transparent);
}
.vnex-crm-board__badge {
    flex-shrink: 0;
    margin-top: 0.1rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 750;
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #cbd5e1;
}
.vnex-crm-board__badge.is-customer {
    background: color-mix(in srgb, #34d399 12%, transparent);
    color: #6ee7b7;
}
.vnex-crm-board__badge.is-prospect {
    background: color-mix(in srgb, #a78bfa 12%, transparent);
    color: #c4b5fd;
}
.vnex-crm-board__kind {
    flex-shrink: 0;
    min-width: 3rem;
    text-align: center;
    padding: 0.18rem 0.35rem;
    border-radius: 0.4rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #cbd5e1;
}
.vnex-crm-board__kind.is-call { color: #7dd3fc; }
.vnex-crm-board__kind.is-meeting { color: #c4b5fd; }
.vnex-crm-board__kind.is-email { color: #6ee7b7; }
.vnex-crm-board__kind.is-note { color: #fcd34d; }

.vnex-crm-board__owners {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.vnex-crm-board__owner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
}
.vnex-crm-board__owner-row strong {
    font-variant-numeric: tabular-nums;
    color: #93c5fd;
}
.vnex-crm-board__owner.is-warn .vnex-crm-board__owner-row span {
    color: #fbbf24;
}
.vnex-crm-board__owner-bar {
    margin-top: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-border) 80%, transparent);
    overflow: hidden;
}
.vnex-crm-board__owner-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.vnex-crm-board__table-wrap {
    overflow-x: auto;
}
.vnex-crm-board__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.vnex-crm-board__table th,
.vnex-crm-board__table td {
    padding: 0.55rem 0.35rem;
    text-align: start;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 60%, transparent);
}
.vnex-crm-board__table th {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-crm-board__table tr:last-child td {
    border-bottom: 0;
}
.vnex-crm-board__table td.is-action {
    text-align: end;
}
.vnex-crm-board__link {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}
.vnex-crm-board__link:hover {
    color: #93c5fd;
}
.vnex-crm-board__mini {
    appearance: none;
    border: 0;
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    border-radius: 0.45rem;
    padding: 0.32rem 0.6rem;
    cursor: pointer;
}

/* Export dashboard board */
.vnex-export-board__main {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: var(--crm-gap, 0.85rem);
    align-items: start;
}
.vnex-export-board__table {
    table-layout: fixed;
    width: 100%;
}
.vnex-export-board__table th:nth-child(1),
.vnex-export-board__table td:nth-child(1) { width: 22%; }
.vnex-export-board__table th:nth-child(2),
.vnex-export-board__table td:nth-child(2) { width: 18%; }
.vnex-export-board__table th:nth-child(3),
.vnex-export-board__table td:nth-child(3) { width: 16%; }
.vnex-export-board__table th:nth-child(4),
.vnex-export-board__table td:nth-child(4) { width: 28%; }
.vnex-export-board__table th:nth-child(5),
.vnex-export-board__table td:nth-child(5) { width: 16%; }
.vnex-export-board__table td.is-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}
.vnex-export-board__table tr.is-hot td {
    background: color-mix(in srgb, #f87171 6%, transparent);
}
.vnex-export-board__table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnex-export-board__table td.is-action {
    white-space: nowrap;
    overflow: visible;
}
.vnex-export-board .vnex-crm-board__alert.is-danger {
    border-color: color-mix(in srgb, #f87171 30%, var(--vnex-border));
    background: color-mix(in srgb, #f87171 7%, var(--vnex-card));
}
.vnex-export-board__mix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-gap, 0.85rem);
}
.vnex-export-board__bars {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.vnex-export-board__bar-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 2rem;
    gap: 0.55rem;
    align-items: center;
}
.vnex-export-board__bar-label {
    font-size: 0.74rem;
    color: var(--vnex-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnex-export-board__bar-track {
    height: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-border) 75%, transparent);
    overflow: hidden;
}
.vnex-export-board__bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.vnex-export-board__bar-track span.is-variety {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.vnex-export-board__bar-track span.is-pod {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.vnex-export-board__bar-val {
    font-size: 0.74rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: end;
}
@media (max-width: 980px) {
    .vnex-export-board__main,
    .vnex-export-board__mix {
        grid-template-columns: 1fr;
    }
}

/* Account 360 - shipment search (theme-aware) */
.vnex-ship-search {
    margin: 0 0 1rem;
    color-scheme: light;
    position: relative;
    z-index: 20;
}
html.dark .vnex-ship-search,
.dark .vnex-ship-search {
    color-scheme: dark;
}
.vnex-ship-search__shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 1rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: 0 1px 2px color-mix(in srgb, #0f172a 6%, transparent);
    overflow: visible;
}
html.dark .vnex-ship-search__shell,
.dark .vnex-ship-search__shell {
    border-color: color-mix(in srgb, #60a5fa 18%, var(--vnex-border));
    box-shadow:
        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
        0 12px 28px color-mix(in srgb, #000 28%, transparent);
}
.vnex-ship-search__row {
    display: grid;
    align-items: stretch;
    gap: 0;
    position: relative;
}
.vnex-ship-search__row.is-catalog {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    border-radius: 1rem 1rem 0 0;
    z-index: 2;
}
.vnex-ship-search__row.is-timing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding-inline-end: 0.45rem;
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
    border-radius: 0 0 1rem 1rem;
    z-index: 1;
}
html.dark .vnex-ship-search__row.is-timing,
.dark .vnex-ship-search__row.is-timing {
    background: color-mix(in srgb, #0b1220 35%, var(--vnex-card));
}
.vnex-ship-search__seg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border-inline-end: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
    position: relative;
    transition: background 0.15s ease;
}
.vnex-ship-search__row.is-catalog .vnex-ship-search__seg:last-child,
.vnex-ship-search__row.is-timing .vnex-ship-search__seg.is-date:last-of-type {
    border-inline-end: 0;
}
.vnex-ship-search__seg:hover {
    background: color-mix(in srgb, #3b82f6 7%, transparent);
}
.vnex-ship-search__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

/* Themed custom dropdown (replaces native select popup) */
.vnex-dd {
    z-index: 1;
}
.vnex-dd.is-open {
    z-index: 60;
    background: color-mix(in srgb, #3b82f6 8%, transparent);
}
.vnex-dd__trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vnex-text);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.3;
    min-height: 1.4rem;
    text-align: start;
    cursor: pointer;
}
.vnex-dd__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnex-dd__value.is-placeholder {
    color: var(--vnex-muted);
    font-weight: 600;
}
.vnex-dd__chevron {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--vnex-muted);
    transition: transform 0.15s ease;
}
.vnex-dd.is-open .vnex-dd__chevron {
    transform: rotate(180deg);
    color: #60a5fa;
}
.vnex-dd__panel {
    position: absolute;
    top: calc(100% + 0.2rem);
    inset-inline: 0.3rem;
    max-height: 14rem;
    overflow: auto;
    padding: 0.3rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    background: var(--vnex-card);
    box-shadow:
        0 10px 28px color-mix(in srgb, #0f172a 18%, transparent),
        0 1px 0 color-mix(in srgb, white 4%, transparent) inset;
    z-index: 70;
}
html.dark .vnex-dd__panel,
.dark .vnex-dd__panel {
    border-color: color-mix(in srgb, #60a5fa 22%, var(--vnex-border));
    background: color-mix(in srgb, #18181b 92%, #0b1220);
    box-shadow:
        0 16px 36px color-mix(in srgb, #000 55%, transparent),
        0 0 0 1px color-mix(in srgb, #60a5fa 8%, transparent);
}
.vnex-dd__option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--vnex-text);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}
.vnex-dd__option:hover {
    background: color-mix(in srgb, #3b82f6 12%, transparent);
}
.vnex-dd__option.is-on {
    background: color-mix(in srgb, #2563eb 18%, transparent);
    color: #93c5fd;
    font-weight: 750;
}
html:not(.dark) .vnex-dd__option.is-on {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}

/* Themed date field — hide native black calendar icon */
.vnex-date-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.4rem;
}
.vnex-date-field input[type="date"] {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--vnex-text);
    font-size: 0.9rem;
    font-weight: 650;
    padding: 0 1.35rem 0 0;
    min-height: 1.4rem;
    line-height: 1.3;
    color-scheme: inherit;
}
.vnex-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.vnex-date-field__icon {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--vnex-muted);
    pointer-events: none;
    z-index: 1;
}
.vnex-date-field:hover .vnex-date-field__icon {
    color: #60a5fa;
}
html:not(.dark) .vnex-date-field:hover .vnex-date-field__icon {
    color: #2563eb;
}

.vnex-ship-search__arrow {
    display: grid;
    place-items: center;
    width: 1.35rem;
    color: var(--vnex-muted);
    font-weight: 700;
    opacity: 0.65;
    flex: 0 0 auto;
}
.vnex-ship-search__seg.is-date {
    min-width: 9.5rem;
    flex: 0 0 auto;
}
.vnex-ship-search__paid {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0.55rem 0.35rem 0.55rem auto;
    padding: 0.18rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
}
.vnex-ship-search__paid button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--vnex-muted);
    font-size: 0.74rem;
    font-weight: 750;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.vnex-ship-search__paid button:hover {
    color: var(--vnex-text);
}
.vnex-ship-search__paid button.is-on {
    background: #2563eb;
    color: #fff;
}
.vnex-ship-search__clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 750;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}
html.dark .vnex-ship-search__clear,
.dark .vnex-ship-search__clear {
    color: #93c5fd;
}
.vnex-ship-search__clear:hover {
    text-decoration: underline;
}
.vnex-ship-search__lens {
    margin: 0 0 0.55rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: color-mix(in srgb, #2563eb 75%, var(--vnex-text));
    background: color-mix(in srgb, #2563eb 8%, var(--vnex-card));
    border: 1px solid color-mix(in srgb, #2563eb 18%, var(--vnex-border));
}
html.dark .vnex-ship-search__lens,
.dark .vnex-ship-search__lens {
    color: #93c5fd;
    background: color-mix(in srgb, #2563eb 12%, var(--vnex-card));
    border-color: color-mix(in srgb, #60a5fa 22%, var(--vnex-border));
}
.vnex-ship-track {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vnex-ship-track__table .fi-section {
    border-radius: 1rem;
}
.vnex-shipments-page .vnex-ship-search {
    margin-bottom: 0;
}
.vnex-ship-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.vnex-ship-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    background: var(--vnex-card);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vnex-ship-card:hover {
    border-color: color-mix(in srgb, #60a5fa 28%, var(--vnex-border));
}
.vnex-ship-card.is-hot {
    border-color: color-mix(in srgb, #f87171 35%, var(--vnex-border));
    background: color-mix(in srgb, #f87171 5%, var(--vnex-card));
}
.vnex-ship-card.is-paid {
    border-color: color-mix(in srgb, #34d399 22%, var(--vnex-border));
}
.vnex-ship-card__hit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.vnex-ship-card__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
    background: color-mix(in srgb, #60a5fa 14%, transparent);
    color: #60a5fa;
}
.vnex-ship-card__icon.is-success {
    background: color-mix(in srgb, #34d399 16%, transparent);
    color: #34d399;
}
.vnex-ship-card__icon.is-danger {
    background: color-mix(in srgb, #f87171 16%, transparent);
    color: #f87171;
}
.vnex-ship-card__icon.is-info {
    background: color-mix(in srgb, #60a5fa 14%, transparent);
    color: #60a5fa;
}
.vnex-ship-card__body {
    min-width: 0;
    flex: 1;
}
.vnex-ship-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}
.vnex-ship-card__title {
    font-size: 0.95rem;
    font-weight: 780;
    color: var(--vnex-text);
}
.vnex-ship-card__hit:hover .vnex-ship-card__title {
    color: #93c5fd;
}
html:not(.dark) .vnex-ship-card__hit:hover .vnex-ship-card__title {
    color: #2563eb;
}
.vnex-ship-card__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.vnex-ship-card__facts {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--vnex-text);
    opacity: 0.92;
}
.vnex-ship-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.28rem;
    font-size: 0.74rem;
    color: var(--vnex-muted);
}
.vnex-ship-card__money {
    font-weight: 750;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-ship-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .vnex-ship-card {
        flex-direction: column;
        align-items: stretch;
    }
    .vnex-ship-card__actions {
        justify-content: stretch;
    }
    .vnex-ship-card__actions .vnex-ep-mini-btn {
        flex: 1;
    }
}
.vnex-export-catalog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vnex-export-catalog__nav {
    padding: 0.35rem;
}
.vnex-export-catalog__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem;
}
.vnex-export-catalog__tabs .vnex-hub-tabs__tab {
    border-radius: 0.7rem;
    border: 0;
    background: transparent;
    color: var(--vnex-muted);
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
}
.vnex-export-catalog__tabs .vnex-hub-tabs__tab:hover {
    color: var(--vnex-text);
    background: color-mix(in srgb, #3b82f6 7%, transparent);
}
.vnex-export-catalog__tabs .vnex-hub-tabs__tab.is-on {
    background: #2563eb;
    color: #fff;
}
@media (max-width: 1200px) {
    .vnex-ship-search__row.is-catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .vnex-ship-search__row.is-catalog .vnex-ship-search__seg:nth-child(3n) {
        border-inline-end: 0;
    }
    .vnex-ship-search__row.is-catalog .vnex-ship-search__seg:nth-child(n+4) {
        border-top: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
    }
}
@media (max-width: 720px) {
    .vnex-ship-search__row.is-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vnex-ship-search__row.is-catalog .vnex-ship-search__seg:nth-child(3n) {
        border-inline-end: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
    }
    .vnex-ship-search__row.is-catalog .vnex-ship-search__seg:nth-child(2n) {
        border-inline-end: 0;
    }
    .vnex-ship-search__row.is-catalog .vnex-ship-search__seg:nth-child(n+3) {
        border-top: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
    }
    .vnex-ship-search__arrow {
        display: none;
    }
    .vnex-ship-search__seg.is-date {
        flex: 1 1 calc(50% - 0.2rem);
        min-width: 0;
    }
    .vnex-ship-search__paid {
        margin: 0.45rem;
        width: calc(100% - 0.9rem);
        justify-content: center;
    }
}

.vnex-ep-row--ship {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.vnex-ep-row__hit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}
.vnex-ep-row__hit:hover .vnex-ep-row__title {
    color: #7dd3fc;
}
.vnex-ep-row__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .vnex-ep-row--ship {
        flex-direction: column;
        align-items: stretch;
    }
    .vnex-ep-row__actions {
        justify-content: stretch;
    }
    .vnex-ep-row__actions .vnex-ep-mini-btn {
        flex: 1;
    }
}

/* —— SaaS Billing pay chooser (ADR-055) —— */
.vnex-pay-inv {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
.vnex-pay-inv:last-child { border-bottom: 0; }
.vnex-pay-inv__main {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.8fr 0.9fr;
    gap: 0.75rem;
}
.vnex-pay-inv__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.vnex-pay-status {
    font-weight: 750;
    font-size: 0.86rem;
}
.vnex-pay-status.is-paid { color: #6ee7b7; }
.vnex-pay-status.is-payment_submitted { color: #fbbf24; }
.vnex-pay-status.is-sent { color: #93c5fd; }
.vnex-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.15rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, #60a5fa 40%, transparent);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 3px 12px color-mix(in srgb, #3b82f6 28%, transparent);
}
.vnex-pay-btn:hover { filter: brightness(1.06); }
.vnex-pay-btn.is-ghost {
    background: color-mix(in srgb, var(--vnex-card) 80%, transparent);
    color: color-mix(in srgb, #93c5fd 85%, white) !important;
    border-color: color-mix(in srgb, #60a5fa 28%, var(--vnex-border));
    box-shadow: none;
}
.vnex-pay-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    background: color-mix(in srgb, #020617 72%, transparent);
    backdrop-filter: blur(10px);
}
.vnex-pay-sheet {
    width: min(720px, 100%);
    max-height: min(94vh, 900px);
    overflow: auto;
    border-radius: 1.35rem;
    border: 1px solid color-mix(in srgb, #64748b 28%, var(--vnex-border));
    background:
        radial-gradient(520px 180px at 0% 0%, color-mix(in srgb, #38bdf8 10%, transparent), transparent 58%),
        radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, #34d399 8%, transparent), transparent 55%),
        linear-gradient(165deg, color-mix(in srgb, var(--vnex-card) 92%, #0f172a), var(--vnex-card));
    box-shadow:
        0 30px 80px color-mix(in srgb, black 50%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
    padding: 1.25rem 1.3rem 1.35rem;
}
.vnex-pay-sheet__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: start;
    margin-bottom: 1rem;
}
.vnex-pay-sheet__brand {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    color: #7dd3fc;
    background: linear-gradient(145deg, color-mix(in srgb, #38bdf8 22%, transparent), color-mix(in srgb, #0ea5e9 8%, transparent));
    border: 1px solid color-mix(in srgb, #38bdf8 30%, transparent);
}
.vnex-pay-sheet__eyebrow {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, #7dd3fc 70%, var(--vnex-muted));
}
.vnex-pay-sheet__titles h3 {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.vnex-pay-sheet__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--vnex-muted);
    line-height: 1.45;
}
.vnex-pay-sheet__close {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    background: color-mix(in srgb, var(--vnex-main) 50%, transparent);
    color: var(--vnex-muted);
    cursor: pointer;
}
.vnex-pay-sheet__close:hover {
    color: #fff;
    border-color: color-mix(in srgb, #94a3b8 40%, var(--vnex-border));
}
.vnex-pay-steps {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.45rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-main) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
.vnex-pay-steps__item {
    font-size: 0.68rem;
    font-weight: 750;
    color: var(--vnex-muted);
    white-space: nowrap;
    padding: 0.2rem 0.45rem;
}
.vnex-pay-steps__item.is-on {
    color: #e2e8f0;
    background: color-mix(in srgb, #38bdf8 14%, transparent);
    border-radius: 999px;
}
.vnex-pay-steps__line {
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--vnex-border) 90%, transparent);
}
.vnex-pay-tiles {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.95rem;
}
.vnex-pay-tiles.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vnex-pay-tiles.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vnex-pay-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 8.2rem;
    padding: 1rem 0.95rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 88%, transparent);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--vnex-card) 88%, white 4%), color-mix(in srgb, var(--vnex-main) 70%, var(--vnex-card)));
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.vnex-pay-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, #38bdf8 35%, var(--vnex-border));
    box-shadow: 0 12px 28px color-mix(in srgb, #0ea5e9 10%, transparent);
}
.vnex-pay-tile.is-active {
    border-color: color-mix(in srgb, #38bdf8 55%, var(--vnex-border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, #38bdf8 35%, transparent),
        0 14px 30px color-mix(in srgb, #0ea5e9 12%, transparent);
}
.vnex-pay-tile__icon {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.8rem;
    margin-bottom: 0.15rem;
}
.vnex-pay-tile.is-visa .vnex-pay-tile__icon {
    background: color-mix(in srgb, #818cf8 16%, transparent);
    color: #a5b4fc;
}
.vnex-pay-tile.is-bank .vnex-pay-tile__icon {
    background: color-mix(in srgb, #34d399 14%, transparent);
    color: #6ee7b7;
}
.vnex-pay-tile.is-instapay .vnex-pay-tile__icon {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #fbbf24;
}
.vnex-pay-tile__title {
    font-weight: 800;
    font-size: 0.95rem;
}
.vnex-pay-tile__desc {
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}
.vnex-pay-tile__badge {
    position: absolute;
    inset-inline-end: 0.7rem;
    top: 0.7rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: color-mix(in srgb, #818cf8 16%, transparent);
    color: #c7d2fe;
    border: 1px solid color-mix(in srgb, #818cf8 28%, transparent);
}
.vnex-pay-desk {
    margin: 0 0 0.9rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, #34d399 22%, var(--vnex-border));
    background: color-mix(in srgb, #064e3b 8%, var(--vnex-card));
    overflow: hidden;
}
.vnex-pay-desk.is-instapay {
    border-color: color-mix(in srgb, #f59e0b 24%, var(--vnex-border));
    background: color-mix(in srgb, #78350f 8%, var(--vnex-card));
}
.vnex-pay-desk__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.95rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border-bottom: 1px solid color-mix(in srgb, var(--vnex-border) 75%, transparent);
    color: color-mix(in srgb, #a7f3d0 80%, white);
}
.vnex-pay-desk.is-instapay .vnex-pay-desk__head {
    color: color-mix(in srgb, #fcd34d 80%, white);
}
.vnex-pay-desk__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 0.95rem;
    align-items: start;
}
.vnex-pay-fact {
    margin-bottom: 0.7rem;
}
.vnex-pay-fact > span {
    display: block;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    margin-bottom: 0.2rem;
}
.vnex-pay-fact strong {
    font-size: 0.98rem;
    font-weight: 750;
}
.vnex-pay-fact__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.vnex-pay-copy {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    background: color-mix(in srgb, var(--vnex-main) 45%, transparent);
    color: #93c5fd;
    cursor: pointer;
}
.vnex-pay-copy:hover {
    border-color: color-mix(in srgb, #38bdf8 40%, var(--vnex-border));
    color: #e0f2fe;
}
.vnex-pay-desk__note {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--vnex-muted);
    line-height: 1.45;
}
.vnex-pay-qrframe {
    margin: 0;
    padding: 0.65rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, #cbd5e1 70%, transparent);
    text-align: center;
}
.vnex-pay-qrframe img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
}
.vnex-pay-qrframe figcaption {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    font-weight: 750;
    color: #334155;
}
.vnex-pay-proof {
    border-radius: 1rem;
    border: 1px dashed color-mix(in srgb, #38bdf8 30%, var(--vnex-border));
    background: color-mix(in srgb, #0c4a6e 8%, var(--vnex-card));
    padding: 0.95rem;
}
.vnex-pay-proof__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    color: #7dd3fc;
}
.vnex-pay-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 7.2rem;
    padding: 1rem;
    border-radius: 0.9rem;
    border: 1px dashed color-mix(in srgb, #38bdf8 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-main) 40%, transparent);
    color: #93c5fd;
    cursor: pointer;
    text-align: center;
}
.vnex-pay-drop:hover {
    border-color: color-mix(in srgb, #38bdf8 55%, var(--vnex-border));
    background: color-mix(in srgb, #0ea5e9 8%, transparent);
}
.vnex-pay-drop__title {
    font-size: 0.88rem;
    font-weight: 750;
    color: #e2e8f0;
}
.vnex-pay-drop__hint {
    font-size: 0.72rem;
    color: var(--vnex-muted);
}
.vnex-pay-drop__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.vnex-pay-proof__note {
    width: 100%;
    margin-top: 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 90%, transparent);
    background: color-mix(in srgb, var(--vnex-main) 70%, var(--vnex-card));
    color: inherit;
    padding: 0.6rem 0.8rem;
}
.vnex-pay-proof__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.vnex-pay-upload__error {
    margin-top: 0.4rem;
    color: #f87171;
    font-size: 0.78rem;
}
.vnex-pay-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.9rem;
    border: 1px dashed color-mix(in srgb, var(--vnex-border) 85%, transparent);
    color: var(--vnex-muted);
    font-size: 0.84rem;
}
@media (max-width: 720px) {
    .vnex-pay-inv__main { grid-template-columns: 1fr 1fr; }
    .vnex-pay-tiles.is-2,
    .vnex-pay-tiles.is-3 { grid-template-columns: 1fr; }
    .vnex-pay-desk__body { grid-template-columns: 1fr; }
    .vnex-pay-steps { flex-wrap: wrap; border-radius: 0.9rem; }
    .vnex-pay-steps__line { display: none; }
}

/* —— Checkout-style billing pay (theme tokens) —— */
.vnex-checkout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--vnex-main) 58%, transparent);
    backdrop-filter: blur(12px) saturate(1.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
}
html:not(.dark) .vnex-checkout-backdrop {
    /* Soft zinc veil over light portal — keeps page readable, not milky */
    background: color-mix(in srgb, #18181b 42%, transparent);
}
.dark .vnex-checkout-backdrop,
html.dark .vnex-checkout-backdrop {
    /* Same family as dark --vnex-main so blur matches midnight theme */
    background: color-mix(in srgb, #09090b 78%, transparent);
}
.vnex-checkout {
    position: relative;
    width: min(860px, 100%);
    max-height: min(92vh, 820px);
    overflow: auto;
    border-radius: var(--vnex-radius, 1rem);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: var(--vnex-shadow);
    color: var(--vnex-text);
}
.vnex-checkout__x {
    position: absolute;
    top: 0.85rem;
    inset-inline-end: 0.85rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--vnex-muted);
    cursor: pointer;
}
.vnex-checkout__x:hover {
    color: var(--vnex-text);
    background: color-mix(in srgb, var(--vnex-muted) 16%, transparent);
}
.vnex-checkout__layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.25fr);
    min-height: 520px;
}
.vnex-checkout__summary {
    padding: 1.75rem 1.5rem;
    background: color-mix(in srgb, var(--vnex-main) 70%, var(--vnex-card));
    border-inline-end: 1px solid var(--vnex-border);
}
.vnex-checkout__merchant {
    margin: 0 0 1.25rem;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--vnex-muted);
}
.vnex-checkout__amount {
    margin: 0;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-checkout__invoice {
    margin: 0.4rem 0 1.4rem;
    font-size: 0.82rem;
    color: var(--vnex-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vnex-checkout__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}
.vnex-checkout__meta li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
}
.vnex-checkout__meta span { color: var(--vnex-muted); }
.vnex-checkout__meta strong { color: var(--vnex-text); font-weight: 600; text-align: end; }
.vnex-checkout__trust {
    margin: 1.6rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--vnex-muted);
}
.vnex-checkout__panel {
    padding: 1.75rem 1.5rem 1.5rem;
}
.vnex-checkout__panel-title {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--vnex-text);
}
.vnex-checkout-methods {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.vnex-checkout-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: start;
    padding: 0.8rem 0.9rem;
    border-radius: var(--vnex-radius-sm, 0.75rem);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vnex-checkout-method:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
}
.vnex-checkout-method.is-on {
    border-color: color-mix(in srgb, var(--vnex-blue) 65%, var(--vnex-border));
    background: var(--vnex-blue-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vnex-blue) 25%, transparent);
}
.vnex-checkout-method.is-visa {
    opacity: 0.78;
}
.vnex-checkout-method__radio {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--vnex-muted) 70%, var(--vnex-border));
    flex-shrink: 0;
    background: var(--vnex-card);
}
.vnex-checkout-method.is-on .vnex-checkout-method__radio {
    border-color: var(--vnex-blue);
    box-shadow: inset 0 0 0 3px var(--vnex-card), inset 0 0 0 6px var(--vnex-blue);
}
.vnex-checkout-method__body { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.vnex-checkout-method__name { font-size: 0.9rem; font-weight: 650; color: var(--vnex-text); }
.vnex-checkout-method__sub { font-size: 0.75rem; color: var(--vnex-muted); }
.vnex-checkout-method__aside {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    margin-inline-start: auto;
}
.vnex-pay-brands {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.vnex-pay-brand {
    display: inline-grid;
    place-items: center;
    min-height: 1.55rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.4rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    line-height: 0;
}
/* Brand marks need a light chip so navy/blue logos stay readable on dark UI */
.vnex-pay-brand.is-visa,
.vnex-pay-brand.is-mc {
    background: #fff;
    border-color: color-mix(in srgb, #cbd5e1 70%, transparent);
}
.vnex-pay-brand.is-visa {
    padding: 0.2rem 0.4rem;
}
.vnex-pay-brand.is-visa svg path {
    fill: #1A1F71;
}
.dark .vnex-pay-brand.is-visa,
html.dark .vnex-pay-brand.is-visa,
.dark .vnex-pay-brand.is-mc,
html.dark .vnex-pay-brand.is-mc {
    background: #f8fafc;
    border-color: color-mix(in srgb, #94a3b8 35%, transparent);
}
.vnex-pay-brand.is-bank {
    color: var(--vnex-muted);
    width: 2rem;
    height: 2rem;
    padding: 0;
}
.vnex-pay-brand svg { display: block; }
.vnex-pay-brand img {
    display: block;
    max-height: 1.35rem;
    max-width: 3.4rem;
    width: auto;
    height: auto;
    object-fit: contain;
}
.vnex-pay-brand.is-bank img {
    max-height: 1.45rem;
    max-width: 1.6rem;
}
.vnex-pay-brand.is-instapay img {
    max-width: 4.2rem;
}
.vnex-checkout-method__tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
    border: 1px solid var(--vnex-border);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    background: color-mix(in srgb, var(--vnex-main) 40%, var(--vnex-card));
}
.vnex-checkout-pay {
    margin: 0 0 1rem;
    padding: 0.95rem;
    border-radius: var(--vnex-radius-sm, 0.75rem);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 45%, var(--vnex-card));
}
.vnex-checkout-pay__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}
.vnex-checkout-field { margin-bottom: 0.75rem; }
.vnex-checkout-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--vnex-muted);
}
.vnex-checkout-field__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.vnex-checkout-field__value code {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--vnex-text);
    background: transparent;
}
.vnex-checkout-field__value button {
    border: 0;
    background: transparent;
    color: var(--vnex-blue);
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
}
.vnex-checkout-field__value button:hover { text-decoration: underline; }
.vnex-checkout-pay__help {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--vnex-muted);
}
.vnex-checkout-qr {
    margin: 0;
    padding: 0.5rem;
    border-radius: 0.65rem;
    background: #fff;
    border: 1px solid var(--vnex-border);
}
.vnex-checkout-qr img {
    display: block;
    width: 124px;
    height: 124px;
    object-fit: contain;
}
.vnex-checkout-confirm__label {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vnex-text);
}
.vnex-checkout-file {
    position: relative;
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--vnex-radius-sm, 0.7rem);
    border: 1px dashed color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-main) 40%, var(--vnex-card));
    cursor: pointer;
}
.vnex-checkout-file span { font-size: 0.86rem; color: var(--vnex-text); font-weight: 600; }
.vnex-checkout-file em { font-style: normal; font-size: 0.72rem; color: var(--vnex-muted); }
.vnex-checkout-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.vnex-checkout-input {
    width: 100%;
    margin-top: 0.65rem;
    border-radius: var(--vnex-radius-sm, 0.65rem);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    color: var(--vnex-text);
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
}
.vnex-checkout-cta {
    width: 100%;
    margin-top: 0.85rem;
    min-height: 2.7rem;
    border: 0;
    border-radius: var(--vnex-radius-sm, 0.7rem);
    background: var(--vnex-blue);
    color: var(--vnex-on-accent, #fff);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
.vnex-checkout-cta:hover {
    filter: brightness(1.05);
}
.vnex-checkout-confirm__fine,
.vnex-checkout-confirm__loading {
    margin: 0.65rem 0 0;
    font-size: 0.72rem;
    color: var(--vnex-muted);
    text-align: center;
}
@media (max-width: 760px) {
    .vnex-checkout__layout { grid-template-columns: 1fr; }
    .vnex-checkout__summary {
        border-inline-end: 0;
        border-bottom: 1px solid var(--vnex-border);
        padding-bottom: 1.2rem;
    }
    .vnex-checkout-pay__cols { grid-template-columns: 1fr; }
    .vnex-checkout-qr { justify-self: center; }
    .vnex-checkout-method__aside { max-width: 42%; flex-wrap: wrap; justify-content: flex-end; }
}

/* �� Billing KPI cards �� */
.vnex-bill {
    display: grid;
    gap: 1rem;
}
.vnex-bill__stack {
    display: grid;
    gap: 1rem;
}
.vnex-bill__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.vnex-bill-kpi {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    box-shadow: none;
}
.vnex-bill-kpi::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    background: var(--vnex-blue);
    opacity: 0.85;
}
.vnex-bill-kpi.is-success::after { background: var(--vnex-ok); }
.vnex-bill-kpi.is-warning::after { background: var(--vnex-warn); }
.vnex-bill-kpi.is-danger::after { background: var(--vnex-bad); }
.vnex-bill-kpi.is-info::after { background: #38bdf8; }
.vnex-bill-kpi.is-gray::after { background: var(--vnex-muted); }
.vnex-bill-kpi__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.vnex-bill-kpi__label {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-bill-kpi__value {
    margin-top: 0.35rem;
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-bill-kpi__desc {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--vnex-muted);
}
.vnex-bill-kpi__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}
.vnex-bill-kpi.is-success .vnex-bill-kpi__icon { background: var(--vnex-ok-soft); color: var(--vnex-ok); }
.vnex-bill-kpi.is-warning .vnex-bill-kpi__icon { background: var(--vnex-warn-soft); color: var(--vnex-warn); }
.vnex-bill-kpi.is-danger .vnex-bill-kpi__icon { background: var(--vnex-bad-soft); color: var(--vnex-bad); }
.vnex-bill-kpi.is-info .vnex-bill-kpi__icon { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.vnex-bill-kpi.is-gray .vnex-bill-kpi__icon { background: color-mix(in srgb, var(--vnex-muted) 18%, transparent); color: var(--vnex-muted); }
.vnex-bill-kpi__meter {
    height: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-border) 80%, transparent);
    overflow: hidden;
}
.vnex-bill-kpi__meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vnex-blue), var(--vnex-blue-bright));
}
.vnex-bill-kpi.is-success .vnex-bill-kpi__meter > span { background: linear-gradient(90deg, var(--vnex-ok), color-mix(in srgb, var(--vnex-ok) 70%, #fff)); }
.vnex-bill-kpi.is-warning .vnex-bill-kpi__meter > span { background: linear-gradient(90deg, var(--vnex-warn), color-mix(in srgb, var(--vnex-warn) 70%, #fff)); }
.vnex-bill-kpi.is-danger .vnex-bill-kpi__meter > span { background: linear-gradient(90deg, var(--vnex-bad), color-mix(in srgb, var(--vnex-bad) 70%, #fff)); }
.vnex-bill-kpi.is-info .vnex-bill-kpi__meter > span { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.vnex-ep-chip.is-off {
    color: var(--vnex-muted);
    background: rgba(161, 161, 170, 0.08);
    border-color: rgba(161, 161, 170, 0.16);
    opacity: 0.72;
}

/* Subscription section */
.vnex-sub {
    display: grid;
    gap: 0.75rem;
}
.vnex-sub-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1.15rem 1.2rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid color-mix(in srgb, var(--vnex-blue) 28%, var(--vnex-border));
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--vnex-blue) 16%, transparent), transparent 55%),
        color-mix(in srgb, var(--vnex-main) 42%, var(--vnex-card));
    overflow: hidden;
}
.vnex-sub-hero.is-success {
    border-color: color-mix(in srgb, var(--vnex-ok) 28%, var(--vnex-border));
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--vnex-ok) 14%, transparent), transparent 55%),
        color-mix(in srgb, var(--vnex-main) 42%, var(--vnex-card));
}
.vnex-sub-hero.is-warning {
    border-color: color-mix(in srgb, var(--vnex-warn) 28%, var(--vnex-border));
}
.vnex-sub-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin-top: 0.25rem;
}
.vnex-sub-hero__title-row .vnex-sub-card__title {
    margin: 0;
}
.vnex-sub-hero__aside {
    min-width: 11rem;
}
.vnex-sub-hero__renewal {
    padding: 0.8rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
}
.vnex-sub-hero__renewal-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-sub-hero__renewal-date {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--vnex-text);
}
.vnex-sub-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}
.vnex-sub-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 38%, var(--vnex-card));
}
.vnex-sub-stat__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    flex-shrink: 0;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}
.vnex-sub-stat__label {
    display: block;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-sub-stat__value {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.92rem;
    font-weight: 750;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-sub__lower {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.vnex-sub-card {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 38%, var(--vnex-card));
    overflow: hidden;
}
.vnex-sub-card::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    background: var(--vnex-blue);
    opacity: 0.8;
}
.vnex-sub-card--modules::after { background: #a78bfa; }
.vnex-sub-card--lifecycle.is-success::after { background: var(--vnex-ok); }
.vnex-sub-card--lifecycle.is-warning::after { background: var(--vnex-warn); }
.vnex-sub-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.vnex-sub-card__head-copy {
    flex: 1;
    min-width: 0;
}
.vnex-sub-card__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}
.vnex-sub-card--modules .vnex-sub-card__icon {
    background: rgba(167, 139, 250, 0.16);
    color: #a78bfa;
}
.vnex-sub-card--lifecycle.is-success .vnex-sub-card__icon {
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
}
.vnex-sub-card--lifecycle.is-warning .vnex-sub-card__icon {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
}
.vnex-sub-pill {
    margin-inline-start: auto;
    flex-shrink: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-border) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
}
.vnex-sub-pill.is-success {
    color: var(--vnex-ok);
    background: var(--vnex-ok-soft);
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
}
.vnex-sub-pill.is-warning {
    color: var(--vnex-warn);
    background: var(--vnex-warn-soft);
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
}
.vnex-sub-card__eyebrow {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-sub-card__title {
    margin: 0.3rem 0 0;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--vnex-text);
}
.vnex-sub-card__price {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vnex-blue-bright, #7B94F8);
}
.vnex-sub-card__meta {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--vnex-muted);
}
.vnex-sub-card__help {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}
.vnex-sub-card__note {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-border) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--vnex-border) 80%, transparent);
}
.vnex-sub-lc-kpi {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vnex-ok) 28%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok-soft) 45%, var(--vnex-card));
}
.vnex-sub-lc-kpi.is-muted {
    border-color: color-mix(in srgb, var(--vnex-warn) 28%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn-soft) 35%, var(--vnex-card));
}
.vnex-sub-lc-kpi__num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-sub-lc-kpi__unit {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vnex-text);
}
.vnex-sub-lc-kpi__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--vnex-muted);
}
.vnex-sub-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 0.55rem;
}
.vnex-sub-mod {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vnex-sub-mod.is-on {
    border-color: color-mix(in srgb, var(--vnex-ok) 42%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-ok-soft) 50%, var(--vnex-card));
}
.vnex-sub-mod.is-off {
    border-color: color-mix(in srgb, var(--vnex-muted) 22%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-main) 55%, var(--vnex-card));
    opacity: 0.86;
}
.vnex-sub-mod__icon {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--vnex-border) 45%, transparent);
    color: var(--vnex-muted);
}
.vnex-sub-mod.is-on .vnex-sub-mod__icon {
    background: color-mix(in srgb, var(--vnex-ok) 22%, transparent);
    color: var(--vnex-ok);
}
.vnex-sub-mod__copy {
    min-width: 0;
}
.vnex-sub-mod__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vnex-text);
}
.vnex-sub-mod__state {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--vnex-muted);
}
.vnex-sub-mod.is-on .vnex-sub-mod__state { color: var(--vnex-ok); }
.vnex-sub-mod__check {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    color: var(--vnex-muted);
    background: color-mix(in srgb, var(--vnex-border) 50%, transparent);
}
.vnex-sub-mod.is-on .vnex-sub-mod__check {
    color: var(--vnex-ok);
    background: color-mix(in srgb, var(--vnex-ok) 18%, transparent);
}
.vnex-sub-facts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}
.vnex-sub-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 85%, transparent);
    background: color-mix(in srgb, var(--vnex-card) 90%, var(--vnex-main));
}
.vnex-sub-fact__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}
.vnex-sub-fact__value {
    font-size: 0.84rem;
    font-weight: 650;
    color: var(--vnex-text);
    text-align: end;
}
.vnex-sub-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.8rem 0.95rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--vnex-muted);
    border: 1px dashed color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
    background: color-mix(in srgb, var(--vnex-warn-soft) 35%, transparent);
}
.vnex-sub-callout > svg { flex-shrink: 0; margin-top: 0.1rem; color: var(--vnex-warn); }
.vnex-sub-callout p { margin: 0; }
.vnex-sub-callout__link {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vnex-blue-bright);
    text-decoration: none;
}
.vnex-sub-callout__link:hover { text-decoration: underline; }
@media (max-width: 960px) {
    .vnex-sub-hero { grid-template-columns: 1fr; }
    .vnex-sub-hero__aside { min-width: 0; }
    .vnex-sub-stats { grid-template-columns: 1fr; }
    .vnex-sub__lower { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .vnex-sub-mod-grid { grid-template-columns: 1fr; }
    .vnex-sub-card__head { flex-wrap: wrap; }
    .vnex-sub-pill { margin-inline-start: 0; }
}
@media (max-width: 1100px) {
    .vnex-bill__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .vnex-bill__kpis { grid-template-columns: 1fr; }
}

/* �� Billing invoice cards �� */
.vnex-inv-list {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.15rem 0.35rem;
}
.vnex-inv-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-radius: var(--vnex-radius-sm, 12px);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 45%, var(--vnex-card));
}
.vnex-inv-card.is-sent,
.vnex-inv-card.is-payment_submitted {
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
}
.vnex-inv-card.is-paid {
    border-color: color-mix(in srgb, var(--vnex-ok) 28%, var(--vnex-border));
}
.vnex-inv-card__main {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}
.vnex-inv-card__amount {
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--vnex-text);
    font-variant-numeric: tabular-nums;
}
.vnex-inv-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    font-size: 0.78rem;
}
.vnex-inv-card__number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 650;
    color: var(--vnex-blue-bright);
    text-decoration: none;
}
.vnex-inv-card__number:hover { text-decoration: underline; }
.vnex-inv-card__date { color: var(--vnex-muted); }
.vnex-inv-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    flex-shrink: 0;
}
.vnex-inv-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    border: 1px solid var(--vnex-border);
    color: var(--vnex-muted);
    background: var(--vnex-card);
}
.vnex-inv-status.is-paid {
    color: var(--vnex-ok-text, var(--vnex-ok));
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
    background: var(--vnex-ok-soft);
}
.vnex-inv-status.is-sent {
    color: var(--vnex-blue-bright);
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
    background: var(--vnex-blue-soft);
}
.vnex-inv-status.is-payment_submitted {
    color: var(--vnex-warn-text, var(--vnex-warn));
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
    background: var(--vnex-warn-soft);
}
.vnex-inv-status.is-draft {
    color: var(--vnex-muted);
}
.vnex-inv-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}
.vnex-inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--vnex-border);
    background: var(--vnex-card);
    color: var(--vnex-text);
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}
.vnex-inv-btn:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
}
.vnex-inv-btn.is-primary {
    border-color: transparent;
    background: var(--vnex-blue);
    color: var(--vnex-on-accent, #fff);
}
.vnex-inv-btn.is-primary:hover { filter: brightness(1.05); }
@media (max-width: 640px) {
    .vnex-inv-card {
        flex-direction: column;
        align-items: stretch;
    }
    .vnex-inv-card__side { align-items: stretch; }
    .vnex-inv-card__actions { justify-content: stretch; }
    .vnex-inv-btn { justify-content: center; flex: 1; }
}


/* ===== ADR-056: Customer Help Center + contextual drawer ===== */
.vnex-help-chrome {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-end: 0.45rem;
}

.vnex-help-chrome__docs,
.vnex-help-chrome__q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e4e4e7;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.dark .vnex-help-chrome__docs,
.dark .vnex-help-chrome__q,
html.dark .vnex-help-chrome__docs,
html.dark .vnex-help-chrome__q {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e4e4e7;
}

html:not(.dark) .vnex-help-chrome__docs,
html:not(.dark) .vnex-help-chrome__q {
    border-color: var(--vnex-border, #e4e4e7);
    background: var(--vnex-card, #fff);
    color: var(--vnex-text, #1b2539);
}

.vnex-help-chrome__docs:hover,
.vnex-help-chrome__q:hover {
    border-color: var(--vnex-blue, #4F6EF5);
    color: var(--vnex-blue, #4F6EF5);
}

.vnex-help-chrome__docs-label {
    display: none;
}

@media (min-width: 900px) {
    .vnex-help-chrome__docs-label {
        display: inline;
    }
}

.vnex-help-drawer {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
}

.vnex-help-drawer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(9, 9, 11, 0.45);
    cursor: pointer;
}

.vnex-help-drawer__panel {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: min(26rem, 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--vnex-card, #fff);
    color: var(--vnex-text, #1b2539);
    border-inline-start: 1px solid var(--vnex-border, #e4e4e7);
    box-shadow: var(--vnex-shadow, 0 10px 30px rgba(0,0,0,.12));
}

.dark .vnex-help-drawer__panel,
html.dark .vnex-help-drawer__panel {
    background: #18181b;
    color: #fafafa;
    border-color: #27272a;
}

.vnex-help-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--vnex-border, #e4e4e7);
}

.vnex-help-drawer__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted, #6e7e83);
}

.vnex-help-drawer__head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.vnex-help-drawer__x {
    border: 0;
    background: transparent;
    color: var(--vnex-muted, #6e7e83);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.vnex-help-drawer__body {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.1rem;
}

.vnex-help-drawer__summary,
.vnex-help-drawer__note,
.vnex-help-drawer__section p {
    color: var(--vnex-muted, #6e7e83);
    line-height: 1.5;
}

.vnex-help-drawer__section {
    margin-top: 1rem;
}

.vnex-help-drawer__section h3 {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 800;
}

.vnex-help-drawer__link {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--vnex-blue, #4F6EF5);
    font-weight: 700;
    text-decoration: none;
}

.vnex-help-drawer__foot {
    padding: 0.9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--vnex-border, #e4e4e7);
}

.vnex-help-drawer__foot p {
    margin: 0 0 0.55rem;
    color: var(--vnex-muted, #6e7e83);
    font-size: 0.8125rem;
}

.vnex-help {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0.5rem 0 2rem;
}

.vnex-help__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vnex-help__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted, #6e7e83);
}

.vnex-help__title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--vnex-text, #1b2539);
}

.dark .vnex-help__title,
html.dark .vnex-help__title {
    color: #fafafa;
}

.vnex-help__sub {
    margin: 0.4rem 0 0;
    color: var(--vnex-muted, #6e7e83);
    max-width: 38rem;
    line-height: 1.5;
}

.vnex-help__ask {
    appearance: none;
    border: 1px solid var(--vnex-blue, #4F6EF5);
    background: var(--vnex-blue, #4F6EF5);
    color: #fff;
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.vnex-help__search {
    margin-bottom: 1rem;
}

.vnex-help__search-tip {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    color: var(--vnex-muted, #6e7e83);
}

.vnex-help__input {
    width: 100%;
    border: 1px solid var(--vnex-border, #e4e4e7);
    background: var(--vnex-card, #fff);
    color: var(--vnex-text, #1b2539);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
}

.dark .vnex-help__input,
html.dark .vnex-help__input {
    background: #18181b;
    border-color: #27272a;
    color: #fafafa;
}

.vnex-help__group {
    margin-top: 1.35rem;
}

.vnex-help__group-title {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--vnex-muted, #6e7e83);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vnex-help__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.vnex-help__card {
    width: 100%;
    text-align: start;
    border: 1px solid var(--vnex-border, #e4e4e7);
    background: var(--vnex-card, #fff);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dark .vnex-help__card,
html.dark .vnex-help__card {
    background: #18181b;
    border-color: #27272a;
}

.vnex-help__card:hover {
    border-color: var(--vnex-blue, #4F6EF5);
}

.vnex-help__card-title {
    font-weight: 800;
    color: var(--vnex-text, #1b2539);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.dark .vnex-help__card-title,
html.dark .vnex-help__card-title {
    color: #fafafa;
}

.vnex-help__card-sum {
    color: var(--vnex-muted, #6e7e83);
    font-size: 0.875rem;
    line-height: 1.45;
}

.vnex-help__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--vnex-blue-soft, rgba(79,110,245,.14));
    color: var(--vnex-blue, #4F6EF5);
}

.vnex-help__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.vnex-help__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.vnex-help__copy {
    border: 1px solid var(--vnex-border, #e4e4e7);
    background: transparent;
    color: var(--vnex-ink, #18181b);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.vnex-help__copy:hover {
    border-color: var(--vnex-blue, #2563eb);
    color: var(--vnex-blue, #2563eb);
}

.vnex-help__featured {
    margin: 0 0 1.25rem;
}

.vnex-help__featured-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted, #6e7e83);
}

.vnex-help__featured-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vnex-help__featured-chip {
    border: 1px solid var(--vnex-border, #e4e4e7);
    background: var(--vnex-surface, #fff);
    color: var(--vnex-ink, #18181b);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.3;
    cursor: pointer;
    text-align: start;
}

.vnex-help__featured-chip:hover {
    border-color: var(--vnex-blue, #2563eb);
    color: var(--vnex-blue, #2563eb);
}

.dark .vnex-help__featured-chip,
html.dark .vnex-help__featured-chip {
    background: var(--vnex-surface-2, #27272a);
    color: var(--vnex-ink, #f4f4f5);
}

.vnex-help__back {
    border: 0;
    background: transparent;
    color: var(--vnex-blue, #4F6EF5);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.vnex-help__article {
    display: grid;
    gap: 1.1rem;
}

.vnex-help__section h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.vnex-help__section p,
.vnex-help__note,
.vnex-help__empty {
    margin: 0;
    color: var(--vnex-muted, #6e7e83);
    line-height: 1.55;
}

.vnex-help__controls-label {
    margin: 0.75rem 0 0.4rem !important;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vnex-help__controls {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.vnex-help__controls li {
    border: 1px solid var(--vnex-border, #e4e4e7);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    background: var(--vnex-main, #f4f4f5);
    display: grid;
    gap: 0.2rem;
}

.dark .vnex-help__controls li,
html.dark .vnex-help__controls li {
    background: #09090b;
    border-color: #27272a;
}

.vnex-help__controls strong {
    color: var(--vnex-text, #1b2539);
}

.dark .vnex-help__controls strong,
html.dark .vnex-help__controls strong {
    color: #fafafa;
}

.vnex-help__controls span {
    color: var(--vnex-muted, #6e7e83);
    font-size: 0.875rem;
    line-height: 1.45;
}

.vnex-help__footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vnex-border, #e4e4e7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vnex-help__footer p {
    margin: 0;
    color: var(--vnex-muted, #6e7e83);
}

.vnex-help__related {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vnex-border, #e4e4e7);
}

.vnex-help__related--drawer {
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.vnex-help__related-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-muted, #6e7e83);
}

.vnex-help__related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vnex-help__related-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vnex-border, #e4e4e7);
    background: var(--vnex-surface, #fff);
    color: var(--vnex-ink, #18181b);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.vnex-help__related-link:hover {
    border-color: var(--vnex-blue, #2563eb);
    color: var(--vnex-blue, #2563eb);
}

.dark .vnex-help__related-link,
html.dark .vnex-help__related-link {
    background: var(--vnex-surface-2, #27272a);
    color: var(--vnex-ink, #f4f4f5);
}

.vnex-inv-card__await {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-warn-text, var(--vnex-warn));
}
.vnex-inv-card__hint {
    font-size: 0.75rem;
    color: var(--vnex-muted);
    align-self: center;
}
.vnex-checkout-empty {
    padding: 1rem 0.25rem 0.5rem;
}
.vnex-checkout-empty p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--vnex-muted);
}
.vnex-bill-kpi.is-primary::after { background: var(--vnex-blue); }
.vnex-bill-kpi.is-primary .vnex-bill-kpi__icon {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue-bright);
}
.vnex-bill-kpi.is-primary .vnex-bill-kpi__meter > span {
    background: linear-gradient(90deg, var(--vnex-blue), var(--vnex-blue-bright));
}

/* Top-bar A+ / A- text scale (accessibility) */
.vnex-font-scale {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-inline-end: 0.45rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.vnex-font-scale__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    min-width: 2rem;
    padding: 0.35rem 0.55rem;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #a1a1aa;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.vnex-font-scale__btn:hover:not(:disabled) {
    color: #fafafa;
    background: rgba(255, 255, 255, 0.06);
}
.vnex-font-scale__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Security / Storage hub cards — light + dark via tokens */
.vnex-gov .vnex-ui__card,
.vnex-gov details.vnex-ui__card {
    box-shadow: var(--vnex-shadow);
}

.vnex-gov .vnex-ui__input,
.vnex-gov select.vnex-ui__input,
.vnex-gov textarea.vnex-ui__input {
    width: 100%;
    background: color-mix(in srgb, var(--vnex-main) 72%, var(--vnex-card));
    color: var(--vnex-text);
    border-color: var(--vnex-border);
}

.vnex-gov .vnex-ui__input:disabled,
.vnex-gov select.vnex-ui__input:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.vnex-gov-note {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.vnex-gov-note + .vnex-gov-note,
.vnex-gov-note + .vnex-policy-settings__fields,
.vnex-gov-note + .vnex-gov-facts,
.vnex-gov-note + .vnex-signin__langs {
    margin-top: 0.85rem;
}

.vnex-gov-toggles {
    display: grid;
    gap: 0.65rem;
}

.vnex-gov-toggle {
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--vnex-border);
    border-radius: var(--vnex-radius-sm, 12px);
    background: color-mix(in srgb, var(--vnex-main) 42%, var(--vnex-card));
}

.vnex-gov-toggle input[type="checkbox"] {
    appearance: none;
    width: 2.45rem;
    height: 1.38rem;
    margin-top: 0.2rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vnex-border) 80%, var(--vnex-muted));
    background: color-mix(in srgb, var(--vnex-muted) 28%, var(--vnex-border));
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vnex-gov-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 0.12rem;
    inset-inline-start: 0.14rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.vnex-gov-toggle input[type="checkbox"]:checked {
    background: var(--vnex-blue);
    border-color: color-mix(in srgb, var(--vnex-blue) 70%, transparent);
}

.vnex-gov-toggle input[type="checkbox"]:checked::after {
    transform: translateX(1.05rem);
}

html[dir="rtl"] .vnex-gov-toggle input[type="checkbox"]:checked::after {
    transform: translateX(-1.05rem);
}

.vnex-gov-toggle input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vnex-pack:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
}

.vnex-pack__icon {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}

.vnex-pack__copy {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.vnex-pack__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.vnex-pack__chips em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnex-blue) 10%, var(--vnex-card));
    color: var(--vnex-muted);
}

.vnex-pack__badge {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vnex-blue);
}

.vnex-gov-facts {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .vnex-gov-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .vnex-gov-facts:not(.is-2) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vnex-gov-facts.is-2 {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .vnex-gov-facts.is-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vnex-gov-fact {
    padding: 0.9rem 1rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vnex-main) 42%, var(--vnex-card));
    min-width: 0;
}

.vnex-gov-fact small {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vnex-muted);
}

.vnex-gov-fact strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--vnex-text);
    line-height: 1.35;
}

.vnex-gov-fact strong.is-ok {
    color: var(--vnex-ok-text);
}

.vnex-gov-fact strong.is-bad {
    color: var(--vnex-bad-text);
}

.vnex-gov-fact__meta {
    font-weight: 600;
    color: var(--vnex-muted);
}

.vnex-gov-fact.is-stack h3 {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 750;
}

.vnex-gov-fact.is-stack ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--vnex-muted);
}

.vnex-gov-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.vnex-gov-chip {
    display: inline-flex;
    align-items: flex-start;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-main) 40%, var(--vnex-card));
    color: var(--vnex-text);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.4;
}

.vnex-gov-chip.is-ok {
    color: var(--vnex-ok-text);
    background: var(--vnex-ok-soft);
    border-color: color-mix(in srgb, var(--vnex-ok) 35%, var(--vnex-border));
}

.vnex-gov-chip.is-info {
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border-color: color-mix(in srgb, var(--vnex-blue) 30%, var(--vnex-border));
}

.vnex-gov-chip.is-warn {
    color: var(--vnex-warn-text);
    background: var(--vnex-warn-soft);
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
}

.vnex-gov-status.is-warn {
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border));
}

.vnex-gov-status.is-info {
    border-color: color-mix(in srgb, var(--vnex-blue) 32%, var(--vnex-border));
}

.vnex-gov-list {
    margin: 0.7rem 0 0;
    padding-inline-start: 1.15rem;
    color: var(--vnex-text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vnex-gov-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.vnex-signin__langs {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .vnex-signin__langs {
        grid-template-columns: 1fr 1fr;
    }
}

.vnex-signin__lang {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vnex-main) 42%, var(--vnex-card));
}

.vnex-signin__lang h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    color: var(--vnex-text);
}

.vnex-signin__field {
    display: grid;
    gap: 0.35rem;
}

.vnex-signin__field strong {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vnex-muted);
}

.vnex-signin__field textarea.vnex-ui__input {
    min-height: 10.5rem;
    resize: vertical;
}

.vnex-lifecycle-diff {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin: 1rem 0;
}

@media (min-width: 800px) {
    .vnex-lifecycle-diff {
        grid-template-columns: 1fr 1fr;
    }
}

.vnex-lifecycle-highlights {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.vnex-lifecycle-highlights li {
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    border: 1px solid var(--vnex-border);
}

.vnex-lifecycle-highlights li.is-warn {
    color: var(--vnex-warn-text);
    background: var(--vnex-warn-soft);
    border-color: color-mix(in srgb, var(--vnex-warn) 35%, var(--vnex-border));
}

.vnex-lifecycle-highlights li.is-info {
    color: var(--vnex-blue);
    background: var(--vnex-blue-soft);
    border-color: color-mix(in srgb, var(--vnex-blue) 30%, var(--vnex-border));
}

.vnex-lifecycle-error {
    margin: 0.75rem 0 0;
    color: var(--vnex-bad-text);
    font-size: 0.84rem;
    font-weight: 700;
}

.vnex-lifecycle-wip-catalog .vnex-review__table-wrap {
    max-height: none;
    margin-top: 0.85rem;
    border: 1px solid var(--vnex-border);
    border-radius: 12px;
}

.vnex-gov-table .fi-section,
.vnex-gov-table .fi-section-content-ctn,
.vnex-gov-table .fi-ta-ctn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.vnex-gov-table .fi-ta-header-toolbar {
    padding: 0.7rem 1rem 0.35rem;
}

.vnex-gov-table .fi-pagination {
    padding: 0.65rem 1rem 1rem;
}

.vnex-gov-table .fi-ta-empty-state {
    padding: 2.5rem 1.25rem 2.75rem;
}

.vnex-gov .vnex-ui__stat {
    background: color-mix(in srgb, var(--vnex-main) 38%, var(--vnex-card));
    border: 1px solid var(--vnex-border);
}

.vnex-gov .vnex-review__stat-btn.is-on {
    background: var(--vnex-blue-soft);
    border-color: color-mix(in srgb, var(--vnex-blue) 50%, var(--vnex-border));
}

/* HR employee create/edit — tabbed form, VNex tokens */
.vnex-hr-emp-form {
    background: var(--vnex-card);
    border: 1px solid var(--vnex-border);
    border-radius: 14px;
    padding: 0.15rem 0.1rem 0.45rem;
}

.vnex-hr-emp-form .fi-tabs,
.vnex-hr-emp-form .fi-fo-tabs-tab-list,
.vnex-hr-emp-form [role="tablist"] {
    border-bottom: 1px solid var(--vnex-border);
    gap: 0.15rem;
}

.vnex-hr-emp-form .fi-fo-tabs-tab,
.vnex-hr-emp-form .fi-tabs-item {
    color: var(--vnex-muted);
    font-weight: 650;
    border-radius: 0;
}

.vnex-hr-emp-form .fi-fo-tabs-tab.fi-active,
.vnex-hr-emp-form .fi-tabs-item.fi-active,
.vnex-hr-emp-form [role="tab"][aria-selected="true"] {
    color: var(--vnex-blue);
    box-shadow: inset 0 -2px 0 var(--vnex-blue);
}

.vnex-hr-emp-form .fi-fo-tabs-tab:focus-visible,
.vnex-hr-emp-form .fi-tabs-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vnex-blue) 55%, transparent);
    outline-offset: 2px;
}

.vnex-hr-emp-form .fi-sc-tabs-tab,
.vnex-hr-emp-form .fi-fo-tabs-tab-panel {
    padding-top: 1rem;
}

.vnex-hr-emp-form .fi-input,
.vnex-hr-emp-form .fi-select-input,
.vnex-hr-emp-form .fi-textarea,
.vnex-hr-emp-form .fi-fo-toggle-buttons-btn-ctn > .fi-btn {
    border-radius: 10px !important;
}

/* Filament v4: input:checked + label.fi-btn — selected = solid green like Full Time */
.vnex-hr-emp-form .fi-fo-toggle-buttons input:checked + label.fi-btn {
    background: var(--vnex-ok) !important;
    color: var(--vnex-on-accent) !important;
    border-color: var(--vnex-ok) !important;
}

.vnex-lifecycle-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

@media (min-width: 768px) {
    .vnex-lifecycle-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .vnex-lifecycle-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.vnex-lifecycle-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: var(--vnex-radius, 14px);
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 92%, var(--vnex-main));
    box-shadow: var(--vnex-shadow, 0 1px 2px rgba(15, 23, 42, 0.06));
    min-height: 5.25rem;
}

.vnex-lifecycle-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}

.vnex-lifecycle-kpi__body {
    min-width: 0;
}

.vnex-lifecycle-kpi__body small {
    display: block;
    color: var(--vnex-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.vnex-lifecycle-kpi__body strong {
    display: block;
    color: var(--vnex-text);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.35;
}

.vnex-lifecycle-kpi--trash .vnex-lifecycle-kpi__icon {
    background: color-mix(in srgb, #ef4444 14%, var(--vnex-card));
    color: #ef4444;
}

.vnex-lifecycle-kpi--versions .vnex-lifecycle-kpi__icon {
    background: color-mix(in srgb, var(--vnex-blue) 14%, var(--vnex-card));
}

.vnex-lifecycle-kpi--wip .vnex-lifecycle-kpi__icon {
    background: color-mix(in srgb, #f59e0b 14%, var(--vnex-card));
    color: #d97706;
}

.vnex-lifecycle-kpi--ceiling .vnex-lifecycle-kpi__icon {
    background: color-mix(in srgb, #8b5cf6 14%, var(--vnex-card));
    color: #7c3aed;
}

.vnex-lifecycle-kpi--ok .vnex-lifecycle-kpi__icon {
    background: color-mix(in srgb, var(--vnex-ok, #16a34a) 16%, var(--vnex-card));
    color: var(--vnex-ok, #16a34a);
}

.vnex-lifecycle-kpi--bad {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--vnex-border));
}

.vnex-lifecycle-kpi--bad .vnex-lifecycle-kpi__icon {
    background: color-mix(in srgb, #f59e0b 16%, var(--vnex-card));
    color: #d97706;
}

html[dir="rtl"] .vnex-lifecycle-kpi {
    text-align: start;
}

.vnex-module-access-form .vnex-module-access-grants {
    row-gap: 0.85rem;
}

.vnex-module-access-form .fi-fo-field-wrp-helper-text {
    font-size: 0.75rem;
    line-height: 1.35;
}

.vnex-people-accent {
    --vnex-blue: #e3094b;
    --vnex-blue-bright: #ff4d7a;
    --vnex-blue-soft: rgba(227, 9, 75, 0.14);
}

.vnex-signin__split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1080px) {
    .vnex-signin__split {
        grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
        align-items: start;
    }
}

.vnex-lifecycle-enforcement {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.vnex-lifecycle-enforcement__intro h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--vnex-text);
}

.vnex-lifecycle-enforcement__intro p {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vnex-lifecycle-enforcement__kpis {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 800px) {
    .vnex-lifecycle-enforcement__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .vnex-lifecycle-enforcement__kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vnex-lifecycle-enforcement__kpis .vnex-lifecycle-kpi {
    flex-direction: column;
    gap: 0.4rem;
}

.vnex-lifecycle-enforcement__kpis .vnex-lifecycle-kpi small {
    color: var(--vnex-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vnex-lifecycle-enforcement__kpis .vnex-lifecycle-kpi strong {
    color: var(--vnex-text);
    font-size: 1.02rem;
}

.vnex-lifecycle-enforcement__kpis .vnex-lifecycle-kpi p {
    margin: 0;
    color: var(--vnex-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.vnex-lifecycle-kpi.is-ok {
    border-color: color-mix(in srgb, var(--vnex-ok) 40%, var(--vnex-border));
}

.vnex-lifecycle-kpi.is-info {
    border-color: color-mix(in srgb, var(--vnex-blue) 35%, var(--vnex-border));
}

.vnex-lifecycle-kpi.is-warn {
    border-color: color-mix(in srgb, var(--vnex-warn) 40%, var(--vnex-border));
}

.vnex-hub-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.3rem;
    border: 1px solid var(--vnex-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vnex-card) 88%, var(--vnex-main));
}

.vnex-hub-tab {
    border: 0;
    background: transparent;
    color: var(--vnex-muted);
    font: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.6rem;
    cursor: pointer;
}

.vnex-hub-tab:hover {
    color: var(--vnex-text);
}

.vnex-hub-tab.is-on {
    background: var(--vnex-blue-soft);
    color: var(--vnex-blue);
}

.vnex-audit__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0 1rem 0.75rem;
}

.vnex-audit__search {
    min-width: min(100%, 16rem);
    flex: 1 1 14rem;
}

.vnex-audit__kind {
    min-width: 9rem;
}

.vnex-audit__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-inline-start: auto;
}

/* Account help desk: Contact / Data rights / Digests */
.fi-page:has(.vnex-account-desk) .fi-header {
    display: none !important;
}

.vnex-account-desk {
    display: grid;
    gap: 0.85rem;
}

.vnex-account:has(.vnex-account-desk) {
    gap: 0.75rem;
}

.vnex-account:has(.vnex-account-desk) .vnex-account__identity {
    padding: 0.85rem 1rem 0.7rem;
    gap: 0.75rem;
}

.vnex-account:has(.vnex-account-desk) .vnex-account__avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.vnex-account:has(.vnex-account-desk) .vnex-account__name {
    font-size: 1.05rem;
}

.vnex-account:has(.vnex-account-desk) .vnex-account__tab {
    padding: 0.7rem 0.85rem;
}

.vnex-account-desk .vnex-stat-grid {
    margin-bottom: 0;
    gap: 0.7rem;
}

.vnex-account-desk .vnex-stat-card {
    padding: 0.85rem 0.95rem;
}

.vnex-account-desk .vnex-stat-card__value {
    margin-top: 0.22rem;
    font-size: 1.12rem;
    overflow-wrap: anywhere;
}

.vnex-account-desk .vnex-stat-card__desc {
    margin-top: 0.2rem;
}

.vnex-account-desk.vnex-digest-admin {
    gap: 1rem;
}

.vnex-account-desk .vnex-digest-admin__section {
    gap: 0.7rem;
}

.vnex-account-desk__lead {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--vnex-muted);
}

.vnex-account-desk__grid {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 840px) {
    .vnex-account-desk__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vnex-account-desk__card {
    padding: 0.95rem 1rem 1rem;
    border: 1px solid var(--vnex-border);
    border-radius: 1rem;
    background: var(--vnex-card);
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.vnex-account-desk__card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.vnex-account-desk__card-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--vnex-text);
}

.vnex-account-desk__card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}

.vnex-account-desk__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(161, 161, 170, 0.14);
    color: #a1a1aa;
}

.vnex-account-desk__icon.is-info {
    background: var(--vnex-mod-storage-soft);
    color: var(--vnex-nav-storage);
}

.vnex-account-desk__icon.is-success {
    background: var(--vnex-ok-soft);
    color: var(--vnex-ok);
}

.vnex-account-desk__icon.is-warning {
    background: var(--vnex-warn-soft);
    color: var(--vnex-warn);
}

.vnex-account-desk__email {
    display: inline-flex;
    align-items: center;
    font-weight: 750;
    color: var(--vnex-blue-bright);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.vnex-account-desk__email:hover {
    text-decoration: underline;
}

.vnex-account-desk__note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vnex-muted);
}

.vnex-account-desk__links {
    display: grid;
    gap: 0.45rem;
}

.vnex-account-desk__links a {
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.7rem;
    border: 1px solid var(--vnex-border);
    background: color-mix(in srgb, var(--vnex-card) 80%, var(--vnex-main));
    color: var(--vnex-text);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.vnex-account-desk__links a:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
}

.vnex-account-desk__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.vnex-account-desk__chips span {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    background: color-mix(in srgb, var(--vnex-blue) 10%, transparent);
    color: var(--vnex-text);
}

.vnex-account-desk__btn {
    justify-self: start;
    border: 1px solid var(--vnex-border);
    background: transparent;
    color: var(--vnex-text);
    border-radius: 0.7rem;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.vnex-account-desk__btn:hover {
    border-color: color-mix(in srgb, var(--vnex-blue) 40%, var(--vnex-border));
}

.vnex-account-desk__btn.is-primary {
    background: var(--vnex-blue);
    border-color: transparent;
    color: #fff;
}

html[dir="rtl"] .vnex-account-desk__card,
html[dir="rtl"] .vnex-account-desk__card-head {
    text-align: start;
}