:root {
            --dash-red: #d00000;
            --dash-black: #101010;
            --dash-cream: #f3efe7;
            --dash-white: #ffffff;
            --dash-muted: #667085;
            --dash-border: #ded8ce;
            --dash-green: #16845b;
            --dash-gold: #e3a008;
            --dash-blue: #2f6fed;
            --dash-purple: #7557c7;
            --dash-coral: #ef6c57;
            --dash-max: 1440px;
        }

        * {
            box-sizing: border-box;
        }

        body.dashboard-page {
            margin: 0;

            color: var(--dash-black);
            background: #eee9df;

            font-family: Arial, Helvetica, sans-serif;
        }

        .dashboard-shell {
            width: min(
                var(--dash-max),
                calc(100% - 48px)
            );

            margin: 0 auto;
        }

        /* ========================================
           HERO
           ======================================== */

        .dashboard-hero {
            padding: 52px 0 44px;

            color: #ffffff;

            background:
                radial-gradient(
                    circle at 84% 30%,
                    rgba(208, 0, 0, 0.42),
                    transparent 28%
                ),
                linear-gradient(
                    120deg,
                    #101010 0%,
                    #191919 65%,
                    #340000 100%
                );

            border-bottom: 7px solid var(--dash-red);
        }

        .dashboard-hero-grid {
            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                auto;

            align-items: end;

            gap: 34px;
        }

        .dashboard-kicker,
        .dashboard-section-kicker {
            margin-bottom: 12px;

            color: #ff4b4b;

            font-size: 11px;
            font-weight: 900;
            font-style: italic;

            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .dashboard-hero h1 {
            max-width: 850px;

            margin: 0;

            font-size: clamp(
                45px,
                6vw,
                82px
            );

            font-weight: 950;
            line-height: 0.88;
            letter-spacing: -4px;

            text-transform: uppercase;
        }

        .dashboard-hero h1 span {
            color: #ff4040;
        }

        .dashboard-hero p {
            max-width: 690px;

            margin: 22px 0 0;

            color: #d8d8d8;

            font-size: 15px;
            line-height: 1.55;
        }

        .dashboard-hero-actions {
            display: flex;
            flex-direction: column;
            align-items: stretch;

            gap: 10px;

            min-width: 220px;
        }

        .dashboard-back {
            min-height: 47px;

            padding: 12px 15px;

            border: 1px solid rgba(
                255,
                255,
                255,
                0.65
            );

            color: #ffffff;
            background: transparent;

            font: inherit;
            font-size: 12px;
            font-weight: 900;

            text-decoration: none;
        }

        /* ========================================
           FILTERS
           ======================================== */

        .dashboard-filters-wrap {
            position: sticky;
            top: 0;
            z-index: 20;

            padding: 20px 0;

            background: rgba(
                238,
                233,
                223,
                0.95
            );

            backdrop-filter: blur(10px);

            border-bottom: 1px solid rgba(
                16,
                16,
                16,
                0.08
            );
        }

        .dashboard-filters {
            padding: 18px;

            display: grid;

            grid-template-columns:
                1.4fr
                1.2fr
                1fr
                0.8fr
                0.8fr
                1fr
                auto;

            align-items: end;

            gap: 11px;

            background: #ffffff;

            box-shadow:
                0 10px 30px
                rgba(16, 16, 16, 0.07);
        }

        .dashboard-filter {
            display: grid;

            gap: 6px;

            min-width: 0;
        }

        .dashboard-filter label {
            font-size: 8px;
            font-weight: 900;

            letter-spacing: 1.1px;
            text-transform: uppercase;
        }

        .dashboard-filter input,
        .dashboard-filter select {
            width: 100%;
            min-height: 42px;

            padding: 0 11px;

            border: 1px solid var(--dash-border);

            color: var(--dash-black);
            background: #faf8f3;

            font: inherit;
            font-size: 12px;
        }

        .dashboard-reset {
            min-height: 42px;

            padding: 10px 15px;

            border: 0;

            color: #ffffff;
            background: var(--dash-black);

            font: inherit;
            font-size: 11px;
            font-weight: 900;

            cursor: pointer;
        }

        /* ========================================
           DASHBOARD CONTENT
           ======================================== */

        .dashboard-main {
            padding: 34px 0 80px;
        }

        .dashboard-section-heading {
            margin-bottom: 18px;

            display: flex;
            justify-content: space-between;
            align-items: end;

            gap: 18px;
        }

        .dashboard-section-heading h2 {
            margin: 0;

            font-size: clamp(
                27px,
                4vw,
                43px
            );

            line-height: 0.95;
            letter-spacing: -1.7px;

            text-transform: uppercase;
        }

        .dashboard-result-count {
            color: var(--dash-muted);

            font-size: 12px;
            font-weight: 700;
        }

        /* ========================================
           KPI CARDS
           ======================================== */

        .dashboard-kpis {
            display: grid;

            grid-template-columns:
                repeat(
                    5,
                    minmax(0, 1fr)
                );

            gap: 13px;
        }

        .dashboard-kpi {
            position: relative;

            min-height: 156px;

            padding: 24px 21px;

            overflow: hidden;

            background: #ffffff;

            border-top:
                5px solid
                var(--dash-red);

            box-shadow:
                0 11px 28px
                rgba(16, 16, 16, 0.06);
        }

        .dashboard-kpi::after {
            content: "";

            position: absolute;

            right: -38px;
            bottom: -45px;

            width: 105px;
            height: 105px;

            border-radius: 50%;

            background:
                rgba(208, 0, 0, 0.055);
        }

        .dashboard-kpi-label {
            display: block;

            color: var(--dash-muted);

            font-size: 9px;
            font-weight: 900;

            letter-spacing: 1.1px;
            text-transform: uppercase;
        }

        .dashboard-kpi strong {
            display: block;

            margin-top: 13px;

            font-size: clamp(
                33px,
                4vw,
                49px
            );

            line-height: 1;
            letter-spacing: -2px;
        }

        .dashboard-kpi small {
            display: block;

            margin-top: 10px;

            color: var(--dash-muted);

            font-size: 11px;
            line-height: 1.35;
        }

        /* ========================================
           DASHBOARD GRID
           ======================================== */

        .dashboard-grid {
            margin-top: 17px;

            display: grid;

            grid-template-columns:
                repeat(
                    12,
                    minmax(0, 1fr)
                );

            gap: 17px;
        }

        .dashboard-panel {
            padding: 24px;

            background: #ffffff;

            box-shadow:
                0 11px 28px
                rgba(16, 16, 16, 0.055);
        }

        .dashboard-panel-wide {
            grid-column: span 8;
        }

        .dashboard-panel-small {
            grid-column: span 4;
        }

        .dashboard-panel-half {
            grid-column: span 6;
        }

        .dashboard-panel-third {
            grid-column: span 3;
        }

        .dashboard-panel-donut-compact .dashboard-panel-heading {
            min-height: 72px;
        }

        .dashboard-panel-donut-compact .donut-layout {
            grid-template-columns: 1fr;
            justify-items: center;
            gap: 18px;
        }

        .dashboard-panel-donut-compact .dashboard-donut {
            width: 150px;
        }

        .dashboard-panel-donut-compact .donut-legend {
            width: 100%;
        }

        .dashboard-panel-full {
            grid-column: 1 / -1;
        }

        .dashboard-panel-heading {
            margin-bottom: 22px;

            display: flex;
            justify-content: space-between;
            align-items: start;

            gap: 16px;
        }

        .dashboard-panel-heading h3 {
            margin: 0;

            font-size: 20px;
            letter-spacing: -0.7px;
        }

        .dashboard-panel-heading p {
            margin: 6px 0 0;

            color: var(--dash-muted);

            font-size: 11px;
        }

        .dashboard-panel-badge {
            padding: 6px 9px;

            color: #8c0000;
            background: #ffe4e1;

            border-radius: 999px;

            font-size: 8px;
            font-weight: 900;

            letter-spacing: 0.8px;
            text-transform: uppercase;

            white-space: nowrap;
        }

        /* ========================================
           MONTHLY CHART
           ======================================== */

        .monthly-chart {
            min-height: 250px;

            display: flex;
            align-items: end;

            gap: 10px;

            border-bottom:
                1px solid
                #d8d2c8;
        }

        .monthly-column {
            height: 230px;

            flex: 1;

            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;

            gap: 7px;
        }

        .monthly-value {
            font-size: 10px;
            font-weight: 900;
        }

        .monthly-bar {
            width: min(
                48px,
                70%
            );

            min-height: 3px;

            background:
                linear-gradient(
                    180deg,
                    #ef2525,
                    #b60000
                );

            border-radius:
                5px 5px 0 0;

            transition:
                height 0.35s ease;
        }

        .monthly-label {
            padding-bottom: 8px;

            color: var(--dash-muted);

            font-size: 8px;
            font-weight: 900;

            letter-spacing: 0.7px;
            text-transform: uppercase;
        }

        /* ========================================
           AREA TREND
           ======================================== */

        .area-trend {
            display: grid;

            gap: 14px;
        }

        .area-trend-row {
            display: grid;

            grid-template-columns:
                35px
                minmax(0, 1fr)
                38px;

            align-items: center;

            gap: 10px;
        }

        .area-trend-month,
        .area-trend-total {
            color: var(--dash-muted);

            font-size: 9px;
            font-weight: 900;

            text-transform: uppercase;
        }

        .area-trend-total {
            color: var(--dash-black);

            text-align: right;
        }

        .area-stack {
            height: 18px;

            display: flex;

            overflow: hidden;

            background: #eeeae3;

            border-radius: 999px;
        }

        .area-stack-segment {
            height: 100%;

            min-width: 0;
        }

        .area-legend {
            margin-top: 18px;

            display: flex;
            flex-wrap: wrap;

            gap: 10px 15px;
        }

        .area-legend-item {
            display: inline-flex;
            align-items: center;

            gap: 6px;

            color: var(--dash-muted);

            font-size: 9px;
            font-weight: 700;
        }

        .area-legend-dot {
            width: 8px;
            height: 8px;

            border-radius: 50%;
        }

        /* ========================================
           DONUT CHART
           ======================================== */

        .donut-layout {
            display: grid;

            grid-template-columns:
                180px
                minmax(0, 1fr);

            align-items: center;

            gap: 24px;
        }

        .dashboard-donut {
            width: 175px;

            aspect-ratio: 1;

            padding: 26px;

            display: grid;
            place-items: center;

            border-radius: 50%;

            background:
                conic-gradient(
                    #dddddd 0 100%
                );
        }

        .dashboard-donut-center {
            width: 100%;
            height: 100%;

            display: grid;
            place-items: center;
            align-content: center;

            border-radius: 50%;

            background: #ffffff;

            text-align: center;
        }

        .dashboard-donut-center strong {
            font-size: 30px;
            line-height: 1;
        }

        .dashboard-donut-center span {
            margin-top: 4px;

            color: var(--dash-muted);

            font-size: 8px;
            font-weight: 900;

            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .donut-legend {
            display: grid;

            gap: 10px;
        }

        .donut-legend-row {
            display: grid;

            grid-template-columns:
                9px
                minmax(0, 1fr)
                auto;

            align-items: center;

            gap: 8px;

            font-size: 10px;
        }

        .donut-legend-row strong {
            font-size: 11px;
        }

        /* ========================================
           RANKINGS
           ======================================== */

        .ranking-list {
            display: grid;

            gap: 15px;
        }

        .ranking-row {
            display: grid;

            gap: 7px;
        }

        .ranking-heading {
            display: flex;
            justify-content: space-between;

            gap: 15px;

            font-size: 10px;
            font-weight: 800;
        }

        .ranking-heading span:first-child {
            overflow: hidden;

            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ranking-track {
            height: 8px;

            overflow: hidden;

            background: #eeeae3;

            border-radius: 999px;
        }

        .ranking-fill {
            height: 100%;

            min-width: 3px;

            background:
                linear-gradient(
                    90deg,
                    var(--dash-red),
                    #ff4747
                );

            border-radius: 999px;
        }

        /* ========================================
           RETENTION
           ======================================== */

        .retention-grid {
            display: grid;

            grid-template-columns:
                repeat(
                    3,
                    1fr
                );

            gap: 12px;
        }

        .retention-card {
            padding: 18px 12px;

            background: #f7f4ed;

            border-top:
                3px solid
                var(--dash-red);

            text-align: center;
        }

        .retention-card strong {
            display: block;

            font-size: 27px;
        }

        .retention-card span {
            display: block;

            margin-top: 5px;

            color: var(--dash-muted);

            font-size: 8px;
            font-weight: 900;

            letter-spacing: 0.7px;
            text-transform: uppercase;
        }

        /* ========================================
           RECENT ACTIVITY TABLE
           ======================================== */

        .dashboard-table-wrap {
            overflow-x: auto;
        }

        .dashboard-table {
            width: 100%;

            border-collapse: collapse;

            font-size: 11px;
        }

        .dashboard-table th {
            padding: 12px;

            color: #ffffff;
            background: var(--dash-black);

            text-align: left;

            font-size: 8px;

            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .dashboard-table td {
            padding: 13px 12px;

            border-bottom:
                1px solid
                #e5e0d7;
        }

        .dashboard-table tbody tr:nth-child(even) {
            background: #faf8f3;
        }

        .dashboard-empty {
            padding: 34px;

            color: var(--dash-muted);
            background: #f7f4ed;

            text-align: center;

            font-size: 13px;
        }

        /* ========================================
           TABLET
           ======================================== */

        @media (max-width: 1120px) {

            .dashboard-filters {
                grid-template-columns:
                    repeat(
                        3,
                        1fr
                    );
            }

            .dashboard-kpis {
                grid-template-columns:
                    repeat(
                        3,
                        1fr
                    );
            }

            .dashboard-panel-wide,
            .dashboard-panel-small,
            .dashboard-panel-half {
                grid-column: span 6;
            }
        }

        /* ========================================
           MOBILE
           ======================================== */

        @media (max-width: 760px) {

            .dashboard-shell {
                width: min(
                    calc(100% - 28px),
                    var(--dash-max)
                );
            }

            .dashboard-hero {
                padding: 34px 0 30px;
            }

            .dashboard-hero-grid {
                grid-template-columns: 1fr;

                gap: 25px;
            }

            .dashboard-hero h1 {
                font-size: clamp(
                    39px,
                    13vw,
                    58px
                );

                letter-spacing: -3px;
            }

            .dashboard-hero-actions {
                min-width: 0;
            }

            .dashboard-filters-wrap {
                position: static;

                padding: 14px 0;
            }

            .dashboard-filters {
                grid-template-columns:
                    1fr 1fr;

                padding: 14px;
            }

            .dashboard-reset {
                grid-column: 1 / -1;
            }

            .dashboard-main {
                padding-top: 24px;
            }

            .dashboard-kpis {
                grid-template-columns:
                    1fr 1fr;
            }

            .dashboard-kpi {
                min-height: 132px;

                padding: 19px 17px;
            }

            .dashboard-grid {
                display: grid;

                grid-template-columns: 1fr;
            }

            .dashboard-panel-wide,
            .dashboard-panel-small,
            .dashboard-panel-half,
            .dashboard-panel-full {
                grid-column: 1;
            }

            .dashboard-panel {
                padding: 19px 16px;
            }

            .monthly-chart {
                gap: 4px;

                min-height: 220px;
            }

            .monthly-column {
                height: 200px;
            }

            .monthly-value {
                font-size: 8px;
            }

            .monthly-label {
                font-size: 7px;
            }

            .donut-layout {
                grid-template-columns: 1fr;

                justify-items: center;
            }
        }



        /* CHAT 6 — dashboard viewport containment */
        .dashboard-page,
        .dashboard-page main,
        .dashboard-page section,
        .dashboard-page article,
        .dashboard-page .topbar,
        .dashboard-shell,
        .dashboard-hero-grid,
        .dashboard-filters,
        .dashboard-kpis,
        .dashboard-grid,
        .dashboard-panel,
        .dashboard-panel-heading,
        .donut-layout,
        .area-trend,
        .ranking-list,
        .retention-grid {
            min-width: 0;
            max-width: 100%;
        }

        .dashboard-page img,
        .dashboard-page svg,
        .dashboard-page canvas {
            max-width: 100%;
        }

        .dashboard-panel > *,
        .dashboard-panel-heading > *,
        .dashboard-hero-grid > *,
        .dashboard-filters > *,
        .dashboard-kpis > *,
        .dashboard-grid > *,
        .donut-layout > * {
            min-width: 0;
        }

        .dashboard-table-wrap {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
        }

        .dashboard-table {
            min-width: 680px;
        }

        .dashboard-table th,
        .dashboard-table td {
            white-space: nowrap;
        }

        @media (max-width: 760px) {
            body.dashboard-page {
                width: 100%;
                max-width: 100%;
                overflow-x: clip;
            }

            .dashboard-shell {
                width: calc(100% - 28px);
                max-width: var(--dash-max);
            }

            .dashboard-page .topbar {
                width: 100%;
                max-width: 100%;
                padding-left: 14px;
                padding-right: 14px;
                gap: 10px;
            }

            .dashboard-page .brand {
                min-width: 0;
                max-width: calc(100% - 112px);
            }

            .dashboard-page nav {
                min-width: 0;
                max-width: 102px;
            }

            .dashboard-hero h1,
            .dashboard-panel-heading h3,
            .dashboard-section-heading h2 {
                max-width: 100%;
                overflow-wrap: anywhere;
            }

            .dashboard-section-heading,
            .dashboard-panel-heading {
                flex-wrap: wrap;
            }

            .dashboard-panel-badge {
                max-width: 100%;
                white-space: normal;
            }

            .dashboard-donut {
                width: min(175px, 100%);
            }

            .area-trend-row {
                grid-template-columns: 30px minmax(0, 1fr) 34px;
                gap: 7px;
            }

            .dashboard-table {
                min-width: 620px;
            }
        }

        @media (max-width: 480px) {

            .dashboard-filters {
                grid-template-columns: 1fr;
            }

            .dashboard-reset {
                grid-column: auto;
            }

            .dashboard-kpis {
                grid-template-columns:
                    1fr 1fr;

                gap: 9px;
            }

            .dashboard-kpi strong {
                font-size: 32px;
            }

            .dashboard-kpi:last-child {
                grid-column: 1 / -1;
            }

            .retention-grid {
                grid-template-columns: 1fr;
            }
        }


/* ========================================
   OPERATIONS + REGISTRATION ANALYTICS
   ======================================== */
.dashboard-kpis-operations { margin-top: 13px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-kpi-dark { background: #171717; color: #fff; border-top-color: #ff4141; }
.dashboard-kpi-dark .dashboard-kpi-label,.dashboard-kpi-dark small { color: #c9c9c9; }
.location-performance { display:grid; gap:22px; }
.location-row { padding:18px; background:#f7f4ed; border-left:5px solid var(--dash-red); }
.location-row-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:14px; }
.location-row-heading strong { font-size:14px; }
.location-row-heading span { color:var(--dash-muted); font-size:10px; font-weight:700; }
.location-bars { display:grid; gap:8px; }
.location-bar-row { display:grid; grid-template-columns:80px minmax(0,1fr) 42px; gap:10px; align-items:center; font-size:9px; font-weight:900; text-transform:uppercase; }
.location-bar-row > div { height:10px; background:#e4ded4; border-radius:999px; overflow:hidden; }
.location-bar-row i { display:block; height:100%; background:var(--dash-red); border-radius:999px; }
.location-bar-row i.checked { background:#16845b; }
.location-bar-row strong { text-align:right; font-size:11px; }
@media (max-width:1120px){ .dashboard-kpis-operations{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .dashboard-kpis-operations{grid-template-columns:1fr;} .location-row-heading{flex-direction:column;gap:5px;} .location-bar-row{grid-template-columns:68px minmax(0,1fr) 34px;} }


        /* DASHBOARD V3 RESPONSIVE */
        @media (max-width: 1120px) {
            .dashboard-panel-third {
                grid-column: span 6;
            }
        }

        @media (max-width: 760px) {
            .dashboard-panel-third {
                grid-column: 1 / -1;
            }

            .dashboard-panel-donut-compact .dashboard-donut {
                width: 175px;
            }
        }