:root {
    --zx-bg: #050713;
    --zx-bg-2: #090c1f;
    --zx-panel: rgba(15, 19, 45, .78);
    --zx-panel-solid: #11162f;
    --zx-panel-hover: rgba(25, 31, 70, .88);
    --zx-text: #f5f7ff;
    --zx-muted: #a5abc4;
    --zx-subtle: #727b9c;
    --zx-border: rgba(153, 121, 255, .18);
    --zx-border-strong: rgba(153, 121, 255, .42);
    --zx-purple: #8b5cf6;
    --zx-purple-2: #6d28d9;
    --zx-blue: #4f8cff;
    --zx-cyan: #4de7ff;
    --zx-pink: #d95cff;
    --zx-green: #35d59a;
    --zx-yellow: #f5c451;
    --zx-red: #ff647c;
    --zx-shadow: 0 28px 90px rgba(0, 0, 0, .42);
    --zx-radius: 18px;
    --zx-sidebar: 278px;
}

html {
    scroll-behavior: smooth;
}

body.zx-v2 {
    min-height: 100vh;
    margin: 0;
    color: var(--zx-text) !important;
    background:
        radial-gradient(circle at 84% 0%, rgba(79, 70, 229, .18), transparent 30rem),
        radial-gradient(circle at 5% 36%, rgba(139, 92, 246, .12), transparent 28rem),
        linear-gradient(180deg, var(--zx-bg), var(--zx-bg-2) 52%, var(--zx-bg));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.zx-v2::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

body.zx-v2::after {
    content: "";
    position: fixed;
    width: 700px;
    height: 700px;
    right: -260px;
    top: -280px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.18), transparent 68%);
    filter: blur(14px);
}

body.zx-v2 *,
body.zx-v2 *::before,
body.zx-v2 *::after {
    box-sizing: border-box;
}

body.zx-v2 a {
    color: #bfaaff;
}

body.zx-v2 > .zx-app-shell {
    min-height: 100vh;
}

.zx-v2-header {
    position: fixed;
    inset: 0 0 auto var(--zx-sidebar);
    z-index: 9000;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 26px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    background: rgba(5, 7, 19, .74);
    backdrop-filter: blur(24px);
}

.zx-v2-header-title {
    min-width: 0;
    flex: 1;
}

.zx-v2-header-title strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.zx-v2-header-title span {
    display: block;
    margin-top: 3px;
    color: var(--zx-subtle);
    font-size: 12px;
}

.zx-v2-search {
    width: min(410px, 38vw);
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--zx-border);
    border-radius: 12px;
    color: var(--zx-muted);
    background: rgba(255,255,255,.035);
}

.zx-v2-search input {
    min-width: 0;
    flex: 1;
    border: 0 !important;
    outline: 0;
    color: var(--zx-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.zx-v2-search input::placeholder {
    color: #737c9e;
}

.zx-v2-header-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--zx-border);
    border-radius: 12px;
    color: #e9e6ff !important;
    background: rgba(255,255,255,.035);
    text-decoration: none;
    font-weight: 750;
}

.zx-v2-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 9100;
    width: var(--zx-sidebar);
    overflow-y: auto;
    padding: 18px 16px 24px;
    border-right: 1px solid rgba(255,255,255,.065);
    background:
        linear-gradient(180deg, rgba(8, 10, 28, .98), rgba(5, 7, 19, .96));
    backdrop-filter: blur(24px);
}

.zx-v2-brand {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 9px 18px;
    color: white !important;
    text-decoration: none;
}

.zx-v2-core {
    width: 45px;
    height: 45px;
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(139,92,246,.62);
    border-radius: 15px;
    color: #fff;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.45), transparent 18%),
        linear-gradient(135deg, #a764ff, #5f21da 55%, #3e71ff);
    box-shadow:
        0 0 35px rgba(139,92,246,.34),
        inset 0 1px rgba(255,255,255,.3);
    font-size: 25px;
    font-weight: 1000;
    transform-style: preserve-3d;
    animation: zxCoreSpin 26s infinite;
}

.zx-v2-core::before,
.zx-v2-core::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(139,92,246,.22);
    border-radius: 18px;
    animation: zxCorePulse 4.5s ease-in-out infinite;
}

.zx-v2-core::after {
    inset: -14px;
    opacity: .42;
    animation-delay: -2.2s;
}

@keyframes zxCoreSpin {
    0%, 7% {
        transform: rotateY(0deg) rotateZ(0deg) translateY(0);
        animation-timing-function: cubic-bezier(.42,0,.58,1);
    }
    20% {
        transform: rotateY(45deg) rotateZ(55deg) translateY(-3px);
        animation-timing-function: cubic-bezier(.18,.76,.25,1);
    }
    34% {
        transform: rotateY(410deg) rotateZ(420deg) translateY(-7px);
        animation-timing-function: cubic-bezier(.16,.84,.22,1);
    }
    46%, 54% {
        transform: rotateY(540deg) rotateZ(540deg) translateY(0);
        animation-timing-function: cubic-bezier(.42,0,.58,1);
    }
    67% {
        transform: rotateY(495deg) rotateZ(485deg) translateY(-3px);
        animation-timing-function: cubic-bezier(.18,.76,.25,1);
    }
    82% {
        transform: rotateY(-120deg) rotateZ(-220deg) translateY(-7px);
        animation-timing-function: cubic-bezier(.16,.84,.22,1);
    }
    96%, 100% {
        transform: rotateY(-360deg) rotateZ(-360deg) translateY(0);
    }
}

@keyframes zxCorePulse {
    0%, 100% {
        transform: scale(.92);
        opacity: .22;
        box-shadow: 0 0 0 rgba(139,92,246,0);
    }
    50% {
        transform: scale(1.08);
        opacity: .62;
        box-shadow: 0 0 26px rgba(139,92,246,.38);
    }
}

.zx-v2-brand-copy strong {
    display: block;
    letter-spacing: .18em;
    font-size: 13px;
}

.zx-v2-brand-copy span {
    display: block;
    margin-top: 4px;
    color: var(--zx-subtle);
    letter-spacing: .17em;
    font-size: 9px;
}

.zx-v2-nav-section {
    margin-top: 21px;
}

.zx-v2-nav-label {
    margin: 0 12px 9px;
    color: #626b8d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.zx-v2-nav-link {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #aeb5cc !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 720;
    transition: .2s ease;
}

.zx-v2-nav-link:hover,
.zx-v2-nav-link.active {
    color: #fff !important;
    border-color: var(--zx-border);
    background:
        linear-gradient(90deg, rgba(139,92,246,.17), rgba(79,140,255,.06));
    box-shadow: inset 3px 0 #8b5cf6;
    transform: translateX(2px);
}

.zx-v2-nav-icon {
    width: 27px;
    text-align: center;
    color: #a88bff;
    font-size: 17px;
}

.zx-v2-agent-status {
    margin: 24px 4px 0;
    padding: 15px;
    border: 1px solid var(--zx-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(25,29,64,.76), rgba(10,13,34,.8));
}

.zx-v2-agent-status strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.zx-v2-agent-status strong::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zx-green);
    box-shadow: 0 0 14px var(--zx-green);
}

.zx-v2-agent-status p {
    margin: 8px 0 0;
    color: var(--zx-muted);
    font-size: 11px;
    line-height: 1.5;
}

body.zx-v2 .zx-v2-content {
    min-height: 100vh;
    margin-left: var(--zx-sidebar);
    padding: 96px 28px 48px;
}

body.zx-v2 .zx-v2-content > * {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

body.zx-v2 h1,
body.zx-v2 h2,
body.zx-v2 h3,
body.zx-v2 h4 {
    color: var(--zx-text) !important;
    letter-spacing: -.025em;
}

body.zx-v2 h1 {
    font-size: clamp(32px, 4vw, 54px) !important;
}

body.zx-v2 p,
body.zx-v2 label,
body.zx-v2 li,
body.zx-v2 td,
body.zx-v2 th {
    color: inherit;
}

body.zx-v2 .container,
body.zx-v2 .card,
body.zx-v2 .panel,
body.zx-v2 .box,
body.zx-v2 .section,
body.zx-v2 form,
body.zx-v2 table {
    border-color: var(--zx-border) !important;
}

body.zx-v2 .card,
body.zx-v2 .panel,
body.zx-v2 .box,
body.zx-v2 .dashboard-card,
body.zx-v2 .stat-card,
body.zx-v2 section:not(.zx-v2-native) {
    color: var(--zx-text);
}

body.zx-v2 .card,
body.zx-v2 .panel,
body.zx-v2 .box,
body.zx-v2 .dashboard-card,
body.zx-v2 .stat-card {
    border: 1px solid var(--zx-border) !important;
    border-radius: var(--zx-radius) !important;
    background:
        linear-gradient(145deg, rgba(18,22,52,.82), rgba(8,11,29,.84)) !important;
    box-shadow: 0 18px 65px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(18px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.zx-v2 .card:hover,
body.zx-v2 .panel:hover,
body.zx-v2 .dashboard-card:hover,
body.zx-v2 .stat-card:hover {
    border-color: var(--zx-border-strong) !important;
    box-shadow: 0 25px 80px rgba(0,0,0,.34), 0 0 35px rgba(109,40,217,.1) !important;
}

body.zx-v2 input:not([type="checkbox"]):not([type="radio"]),
body.zx-v2 select,
body.zx-v2 textarea {
    min-height: 44px;
    border: 1px solid rgba(153,121,255,.26) !important;
    border-radius: 11px !important;
    color: var(--zx-text) !important;
    background: rgba(5,8,24,.72) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.zx-v2 input:focus,
body.zx-v2 select:focus,
body.zx-v2 textarea:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,.13) !important;
}

body.zx-v2 button,
body.zx-v2 input[type="submit"],
body.zx-v2 .button,
body.zx-v2 .btn {
    min-height: 43px;
    border: 1px solid rgba(154,115,255,.5) !important;
    border-radius: 11px !important;
    color: #fff !important;
    background:
        linear-gradient(135deg, #935dff, #6d28d9 52%, #496fff) !important;
    box-shadow:
        0 13px 34px rgba(109,40,217,.25),
        inset 0 1px rgba(255,255,255,.24) !important;
    font-weight: 800 !important;
    transition: transform .18s ease, filter .18s ease !important;
}

body.zx-v2 button:hover,
body.zx-v2 input[type="submit"]:hover,
body.zx-v2 .button:hover,
body.zx-v2 .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.09);
}

body.zx-v2 table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--zx-border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 16px;
    background: rgba(8,11,29,.68) !important;
}

body.zx-v2 th {
    /* No position: sticky here.
       `body.zx-v2 table` above sets overflow: hidden (for the 16px radius
       clipping), which makes every table its own scroll container. A sticky
       th resolves `top` against that container, so `top: 72px` pushed the
       header row 72px DOWN into the table, permanently overlapping the first
       data rows -- on every zx-v2 table, scrolled or not. Nested wrappers
       (.table-wrapper { overflow-x: auto }) did the same thing.
       Sticky headers could never work while the table clips its own overflow,
       so the rule is gone rather than fought with per-page overrides. */
    padding: 14px !important;
    border-bottom: 1px solid var(--zx-border) !important;
    color: #dcd5ff !important;
    background: rgba(18,22,52,.96) !important;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.zx-v2 td {
    padding: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    color: #c4cadf !important;
}

/* Row hover has ONE owner on zx-v2 pages.
   Legacy page CSS still paints the ROW near-white on hover
   (.crm-table tbody tr:hover { background: #f8fafc } and five siblings in
   main.py, plus base.html / zexora_base.html / sales_activity.html). The td
   is transparent, so that white showed through under this theme's light text
   and made the hovered row unreadable. Claim the row itself, and keep the
   cell transparent so the two never stack. */
body.zx-v2 tbody tr:hover {
    background: rgba(139,92,246,.10) !important;
}

body.zx-v2 tbody tr:hover td {
    background: transparent !important;
}

body.zx-v2 pre,
body.zx-v2 code {
    border-color: var(--zx-border) !important;
    color: #d6e4ff !important;
    background: #070b1c !important;
}

body.zx-v2 .alert,
body.zx-v2 .notice,
body.zx-v2 .message {
    border: 1px solid var(--zx-border) !important;
    border-radius: 13px !important;
    color: #d9def2 !important;
    background: rgba(79,70,229,.11) !important;
}

body.zx-v2 #zexora-universal-knowledge-button {
    right: 24px !important;
    bottom: 24px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(77,231,255,.4) !important;
    color: white !important;
    background:
        linear-gradient(135deg, #6d28d9, #4f8cff) !important;
    box-shadow: 0 18px 45px rgba(79,70,229,.35) !important;
}

.zx-v2-page-enter {
    animation: none !important;
}

@keyframes zxPageEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.zx-command-hero {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid var(--zx-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 83% 20%, rgba(139,92,246,.27), transparent 23rem),
        linear-gradient(135deg, rgba(31,26,75,.84), rgba(10,14,36,.9));
    box-shadow: var(--zx-shadow);
}

.zx-command-hero h1 {
    max-width: 850px;
    margin: 10px 0 14px;
}

.zx-command-hero p {
    max-width: 760px;
    color: var(--zx-muted);
    font-size: 17px;
    line-height: 1.65;
}

.zx-command-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.zx-command-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid var(--zx-border);
    border-radius: 17px;
    background: rgba(9,12,31,.7);
}

.zx-command-card b {
    font-size: 23px;
}

.zx-command-card span {
    color: var(--zx-muted);
    font-size: 12px;
}

.zx-agent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 17px;
    margin-top: 24px;
}

.zx-agent-card {
    padding: 22px;
    border: 1px solid var(--zx-border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18,22,52,.78), rgba(8,11,29,.82));
}

.zx-agent-card h3 {
    margin-bottom: 8px;
}

.zx-agent-card p {
    color: var(--zx-muted);
    line-height: 1.55;
}

.zx-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #c9ffe9;
    background: rgba(53,213,154,.12);
    font-size: 11px;
    font-weight: 800;
}

.zx-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zx-green);
    box-shadow: 0 0 10px var(--zx-green);
}

@media (max-width: 1050px) {
    :root {
        --zx-sidebar: 82px;
    }

    .zx-v2-brand-copy,
    .zx-v2-nav-label,
    .zx-v2-nav-link span:not(.zx-v2-nav-icon),
    .zx-v2-agent-status {
        display: none;
    }

    .zx-v2-brand {
        justify-content: center;
    }

    .zx-v2-nav-link {
        justify-content: center;
        padding: 0;
    }

    .zx-command-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zx-agent-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    :root {
        --zx-sidebar: 0px;
    }

    .zx-v2-sidebar {
        width: 100%;
        height: 68px;
        inset: auto 0 0;
        display: flex;
        align-items: center;
        gap: 3px;
        overflow-x: auto;
        padding: 8px;
        border-top: 1px solid rgba(255,255,255,.08);
        border-right: 0;
    }

    .zx-v2-brand,
    .zx-v2-nav-section:not(:first-of-type),
    .zx-v2-nav-label,
    .zx-v2-agent-status {
        display: none;
    }

    .zx-v2-nav-section {
        display: contents;
    }

    .zx-v2-nav-link {
        min-width: 59px;
        height: 52px;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        margin: 0;
        font-size: 8px;
    }

    .zx-v2-nav-link span:not(.zx-v2-nav-icon) {
        display: block;
    }

    .zx-v2-nav-icon {
        font-size: 17px;
    }

    .zx-v2-header {
        left: 0;
        padding: 0 12px;
    }

    .zx-v2-search {
        display: none;
    }

    .zx-v2-header-title span {
        display: none;
    }

    body.zx-v2 .zx-v2-content {
        margin-left: 0;
        padding: 88px 12px 88px;
    }

    .zx-command-grid,
    .zx-agent-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   ZEXORA V2 CONTRAST AND LEGACY-PAGE NORMALIZATION
   ========================================================== */

body.zx-v2 {
    --zx-legacy-surface: rgba(15, 19, 45, .88);
    --zx-legacy-surface-2: rgba(8, 11, 29, .9);
}

body.zx-v2 .zx-light-surface,
body.zx-v2 [style*="background: white"],
body.zx-v2 [style*="background:white"],
body.zx-v2 [style*="background-color: white"],
body.zx-v2 [style*="background-color:white"],
body.zx-v2 [style*="background: #fff"],
body.zx-v2 [style*="background:#fff"],
body.zx-v2 [style*="background-color: #fff"],
body.zx-v2 [style*="background-color:#fff"],
body.zx-v2 [style*="background: rgb(255"],
body.zx-v2 [style*="background-color: rgb(255"] {
    color: var(--zx-text) !important;
    border-color: var(--zx-border) !important;
    background:
        linear-gradient(
            145deg,
            var(--zx-legacy-surface),
            var(--zx-legacy-surface-2)
        ) !important;
    box-shadow: 0 18px 65px rgba(0,0,0,.24) !important;
}

/* When a near-white legacy surface is repainted dark (above), its children
   have to follow or they stay dark-on-dark. But this sweep is (0,2,1) and used
   to beat a badge's own (0,1,0) color, so every status pill
   (.status-new { background:#dbeafe; color:#1d4ed8 }) lost its text color and
   inherited the light theme text -- white letters on a pale pill, i.e. the
   word "New" disappeared.

   Small self-coloured chips are excluded. They already carry an intentional
   text/background pair, and a chip that has no colour of its own still
   inherits from its parent exactly as before -- the exclusion only stops us
   overwriting an explicit one. */
body.zx-v2 .zx-light-surface *:not([class*="status-"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]),
body.zx-v2 [style*="background: white"] *:not([class*="status-"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]),
body.zx-v2 [style*="background-color: white"] *:not([class*="status-"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]),
body.zx-v2 [style*="background: #fff"] *:not([class*="status-"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]),
body.zx-v2 [style*="background-color: #fff"] *:not([class*="status-"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]) {
    color: inherit;
}

/* A legacy control written for a white page: .quick-action (#eff6ff),
   .clear-filter-button (white), and their kin. platform-v2.js tags them
   .zx-light-control. They keep their own size, padding and radius -- only the
   colours change -- because the page's layout around them is already right.
   Without this they rendered as white blocks with the theme's pale link colour
   on top: legible only by guessing. */
body.zx-v2 .zx-light-control {
    color: #ddd6ff !important;
    border: 1px solid var(--zx-border-strong) !important;
    background: rgba(139, 92, 246, .15) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

body.zx-v2 .zx-light-control:hover {
    color: #f4f1ff !important;
    border-color: rgba(153, 121, 255, .62) !important;
    background: rgba(139, 92, 246, .26) !important;
}

body.zx-v2 .zx-light-control * {
    color: inherit !important;
}

/* The mirror image: a link painted onto a strong colour, which the page wrote
   as a button with white text (.small-button { background:#2563eb; color:white }).
   The content-link colour below outranks that `color` and left "Open Lead"
   pale lavender on blue, about 2.5:1. platform-v2.js tags these
   .zx-solid-control; only the text colour is restored, the page keeps its own
   background and shape. */
body.zx-v2 .zx-solid-control,
body.zx-v2 .zx-solid-control * {
    color: #ffffff !important;
}

body.zx-v2 .zx-light-text,
body.zx-v2 [style*="color: white"],
body.zx-v2 [style*="color:white"],
body.zx-v2 [style*="color: #fff"],
body.zx-v2 [style*="color:#fff"] {
    color: var(--zx-text) !important;
}

body.zx-v2 .zx-dark-text,
body.zx-v2 [style*="color: black"],
body.zx-v2 [style*="color:black"],
body.zx-v2 [style*="color: #000"],
body.zx-v2 [style*="color:#000"],
body.zx-v2 [style*="color: #172033"] {
    color: var(--zx-text) !important;
}

body.zx-v2 .zx-v2-content {
    color: var(--zx-text);
}

body.zx-v2 .zx-v2-content > .container,
body.zx-v2 .zx-v2-content > main,
body.zx-v2 .zx-v2-content > section,
body.zx-v2 .zx-v2-content > div {
    width: 100%;
}

body.zx-v2 .zx-v2-content .container {
    max-width: 1500px !important;
}

body.zx-v2 .dashboard-grid,
body.zx-v2 .stats-grid,
body.zx-v2 .analytics-grid {
    gap: 18px !important;
}

body.zx-v2 canvas {
    max-width: 100% !important;
    filter: saturate(.92) brightness(.94);
}

body.zx-v2 .chart-container,
body.zx-v2 .chart-card,
body.zx-v2 .analytics-card,
body.zx-v2 .metric-box {
    color: var(--zx-text) !important;
    border: 1px solid var(--zx-border) !important;
    border-radius: var(--zx-radius) !important;
    background:
        linear-gradient(
            145deg,
            rgba(18,22,52,.86),
            rgba(8,11,29,.9)
        ) !important;
    box-shadow: 0 18px 65px rgba(0,0,0,.24) !important;
}

body.zx-v2 .chart-container h1,
body.zx-v2 .chart-container h2,
body.zx-v2 .chart-container h3,
body.zx-v2 .chart-card h1,
body.zx-v2 .chart-card h2,
body.zx-v2 .chart-card h3 {
    color: var(--zx-text) !important;
}

body.zx-v2 .chart-container p,
body.zx-v2 .chart-card p,
body.zx-v2 .analytics-card p {
    color: var(--zx-muted) !important;
}

body.zx-v2 .zx-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--zx-border);
    border-radius: 16px;
    background: rgba(8,11,29,.72);
}

body.zx-v2 .zx-table-wrap table {
    min-width: 760px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.zx-v2 form {
    color: var(--zx-text);
}

body.zx-v2 form:not(.zx-v2-header form) {
    border-radius: 16px;
}

body.zx-v2 select option {
    color: var(--zx-text);
    background: #10142d;
}

body.zx-v2 input::placeholder,
body.zx-v2 textarea::placeholder {
    color: #747d9c !important;
}

body.zx-v2 hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

body.zx-v2 .badge,
body.zx-v2 .status,
body.zx-v2 [class*="status-"] {
    border-color: rgba(154,121,255,.25) !important;
}

body.zx-v2 .modal,
body.zx-v2 .modal-content,
body.zx-v2 dialog {
    color: var(--zx-text) !important;
    border-color: var(--zx-border) !important;
    background: #11152f !important;
}

body.zx-v2 .zx-v2-content a:not(.button):not(.btn):not(.zx-v2-nav-link) {
    color: #bca8ff;
}

body.zx-v2 .zx-v2-content a:hover {
    color: #e1d8ff;
}

/* Page-entry animation removed: the shell is server-rendered, so content is
   painted in its final position with no fade/translate that could read as a
   flash. */
body.zx-v2 .zx-v2-content > * {
    animation: none;
}

@media (max-width: 900px) {
    body.zx-v2 .zx-v2-header-action {
        display: none;
    }
}