/* ═══════════════ DASHBOARD CONTAINER ═══════════════ */
        .ap-db-wrap {
            position: relative;
            max-width: 1140px;
            margin: 0 auto;
            animation: apFadeUp .65s .32s ease both;
            height: 55vh;
        }

        /* bottom glow */
        .ap-db-wrap::before {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 72%;
            height: 70px;
            background: radial-gradient(ellipse, rgba(79, 70, 229, .5), transparent 70%);
            filter: blur(22px);
            pointer-events: none;
        }

        /* bottom page fade */
        .ap-db-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 140px;
            background: linear-gradient(to bottom, transparent, var(--bg));
            pointer-events: none;
            z-index: 10;
        }

        /* The scale trick: render full dashboard at natural size, then CSS scale it */
        .ap-db-scaler {
            transform-origin: top center;
            transform: scale(0.70);
            /* undo the width shrinkage so it fills the container */
            width: 142.85%;
            /* = 100% / 0.70 */
            margin-left: -21.43%;
            /* = (142.85 - 100) / 2 */
            /* clip the height */
            max-height: 740px;
            overflow: hidden;
            border-radius: 18px;
            
        }

        /* ═══════════════ FULL DASHBOARD CSS (all prefixed .db-root) ═══════════════ */
        .db-root {
            font-family: var(--font);
            color: rgba(255, 255, 255, .92);
            background:
                radial-gradient(1200px 800px at 10% 10%, rgba(79, 70, 229, .35), transparent 55%),
                radial-gradient(900px 700px at 90% 15%, rgba(6, 182, 212, .28), transparent 55%),
                radial-gradient(900px 700px at 30% 95%, rgba(16, 185, 129, .22), transparent 55%),
                radial-gradient(1100px 800px at 85% 95%, rgba(249, 115, 22, .18), transparent 55%),
                #0b1020;
            border-radius: 18px;
            overflow: hidden;
            position: relative;
        }

        /* map original CSS vars inside .db-root */
        .db-root {
            --bg: #0b1020;
            --panel: rgba(255, 255, 255, .06);
            --border: rgba(255, 255, 255, .10);
            --text: rgba(255, 255, 255, .92);
            --muted: rgba(255, 255, 255, .68);
            --muted2: rgba(255, 255, 255, .55);
            --good: #22c55e;
            --p1: #4f46e5;
            --p2: #06b6d4;
            --p3: #10b981;
            --p4: #f97316;
            --p5: #e11d48;
            --p6: #a855f7;
            --radius: 16px;
            --shadow: 0 10px 30px rgba(0, 0, 0, .35);
            --shadow2: 0 6px 18px rgba(0, 0, 0, .25);
        }

        .db-root .wrap {
            padding: 18px 18px 28px
        }

        .db-root .topbar {
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            flex-wrap: wrap
        }

        .db-root .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
            border-radius: 14px;
            box-shadow: var(--shadow2);
        }

        .db-root .logo {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            background: conic-gradient(from 210deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6), var(--p1));
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
            position: relative;
        }

        .db-root .logo::after {
            content: "";
            position: absolute;
            inset: 9px;
            border-radius: 10px;
            background: rgba(0, 0, 0, .35);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12)
        }

        .db-root .brand h1 {
            margin: 0;
            font-size: 15px;
            font-weight: 800
        }

        .db-root .brand p {
            margin: 1px 0 0;
            font-size: 12px;
            color: var(--muted)
        }

        .db-root .controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end
        }

        .db-root .pill {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .05);
            border-radius: 999px;
            box-shadow: var(--shadow2);
            min-height: 40px;
        }

        .db-root .dot {
            width: 8px;
            height: 8px;
            border-radius: 99px;
            background: var(--good);
            box-shadow: 0 0 0 3px rgba(34, 197, 94, .18)
        }

        .db-root .pill small {
            color: var(--muted)
        }

        .db-root .btn {
            appearance: none;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
            color: var(--text);
            padding: 10px 12px;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 700;
            box-shadow: var(--shadow2);
            transition: transform .08s ease;
            font-family: var(--font);
        }

        .db-root .btn:hover {
            transform: translateY(-1px)
        }

        .db-root .btn.primary {
            border-color: rgba(79, 70, 229, .55);
            background: linear-gradient(180deg, rgba(79, 70, 229, .45), rgba(79, 70, 229, .15))
        }

        .db-root .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px
        }

        .db-root .col {
            border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .db-root .colHeader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 14px 10px;
            border-bottom: 1px solid var(--border);
            background: rgba(0, 0, 0, .12);
        }

        .db-root .colHeader .title {
            display: flex;
            flex-direction: column;
            gap: 2px;
            align-items: start;
        }

        .db-root .colHeader .title b {
            font-size: 14px;
            font-weight: 800
        }

        .db-root .colHeader .title span {
            font-size: 12px;
            color: var(--muted)
        }

        .db-root .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .05);
            color: var(--muted);
            font-size: 12px;
        }

        .db-root .section {
            padding: 14px
        }

        .db-root .loginRow {
            display: grid;
            grid-template-columns: 1.35fr .65fr;
            gap: 12px;
            align-items: stretch;
            margin-bottom: 14px
        }

        .db-root .card {
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .05);
            border-radius: 14px;
            box-shadow: var(--shadow2);
            overflow: hidden;
        }

        .db-root .cardHeader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            background: rgba(0, 0, 0, .10);
            font-weight: 900;
            letter-spacing: .15px;
                color: white;
        }

        .db-root .cardHeader small {
            font-weight: 700;
            color: var(--muted)
        }

        .db-root .cardBody {
            padding: 10px 12px
        }

        .db-root .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12.5px
        }

        .db-root .table th,
        .db-root .table td {
            padding: 8px 8px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            color: white;
        }

        .db-root .table th {
            text-align: left;
            color: rgba(255, 255, 255, .78);
            font-size: 12px;
            font-weight: 900
        }

        .db-root .table tr:last-child td {
            border-bottom: none
        }

        .db-root .right {
            text-align: right
        }

        .db-root .muted {
            color: var(--muted)
        }

        .db-root .muted2 {
            color: var(--muted2)
        }

        .db-root .modulesGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .db-root .moduleHead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px
        }

        .db-root .moduleName {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 950
        }

        .db-root .icon {
            width: 28px;
            height: 28px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .10);
        }

        .db-root .miniChartWrap {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .db-root .miniStats {
            display: flex;
            flex-direction: column;
            gap: 2px;
            text-align: right
        }

        .db-root .miniStats b {
            font-size: 13px
        }

        .db-root .miniStats span {
            font-size: 11px;
            color: var(--muted)
        }

        .db-root .bigChartWrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 10px 0 0;
            gap: 6px;
                color: white;
        }

        .db-root .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            padding: 0 10px 10px
        }

        .db-root .legendItem {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11.5px;
            color: var(--muted);
            border: 1px solid rgba(255, 255, 255, .08);
            background: rgba(255, 255, 255, .03);
            padding: 6px 8px;
            border-radius: 999px;
        }

        .db-root .legendSw {
            width: 10px;
            height: 10px;
            border-radius: 3px
        }

        .db-root .legendItem strong {
            color: rgba(255, 255, 255, .82);
            font-weight: 900
        }

        .db-root .footerNote {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-top: 12px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 14px;
            background: rgba(255, 255, 255, .04);
            color: var(--muted);
            font-size: 12px;
            flex-wrap: wrap;
        }

        .db-root .pillTag {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 11px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            color: rgba(255, 255, 255, .80);
        }

        .db-root .err {
            color: rgba(239, 68, 68, .95);
            font-weight: 900
        }

        .db-root canvas {
            display: block
        }

        /* overlay */
        .db-root .overlay {
            position: absolute;
            inset: 0;
            background: rgba(10, 14, 28, .55);
            backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .db-root .overlay.on {
            display: flex
        }

        .db-root .loader {
            width: 90px;
            height: 90px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .06);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px;
        }

        .db-root .spinner {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            border: 3px solid rgba(255, 255, 255, .18);
            border-top-color: rgba(255, 255, 255, .88);
            animation: dbSpin .9s linear infinite;
        }

        @keyframes dbSpin {
            to {
                transform: rotate(360deg)
            }
        }

        .db-root .loader span {
            font-size: 12px;
            color: var(--muted);
            text-align: center
        }

        /* modal */
        .db-root .modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(10, 14, 28, .55);
            backdrop-filter: blur(6px);
        }

        .db-root .modal.on {
            display: flex
        }

        .db-root .modalBox {
            width: min(980px, 100%);
            max-height: calc(100vh - 36px);
            overflow: auto;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
            border-radius: 18px;
            box-shadow: var(--shadow);
        }

        .db-root .modalHeader {
            position: sticky;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            background: rgba(0, 0, 0, .18);
        }

        .db-root .modalHeader b {
            font-size: 14px
        }

        .db-root .modalHeader .sub {
            font-size: 12px;
            color: var(--muted)
        }

        .db-root .modalClose {
            appearance: none;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .06);
            color: var(--text);
            padding: 8px 10px;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 900;
            font-family: var(--font);
        }

        .db-root .modalBody {
            padding: 14px
        }

        .db-root .modalGrid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 12px
        }

        .db-root .kpis {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .db-root .kpi {
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            min-width: 150px
        }

        .db-root .kpi span {
            display: block;
            font-size: 11px;
            color: var(--muted)
        }

        .db-root .kpi b {
            display: block;
            font-size: 16px;
            margin-top: 2px
        }

        .db-root .select {
            width: 100%;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(0, 0, 0, .20);
            color: rgba(255, 255, 255, .90);
            outline: none;
            font-family: var(--font);
        }

        .db-root .ghostBtn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(255, 255, 255, .03);
            color: rgba(255, 255, 255, .86);
            padding: 6px 10px;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 900;
            font-size: 12px;
            font-family: var(--font);
        }

        .db-root .filterRow {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 14px;
            background: rgba(255, 255, 255, .04);
            box-shadow: var(--shadow2);
        }

        .db-root .filterRow .group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center
        }

        .db-root .inp {
            width: 240px;
            max-width: 100%;
            padding: 10px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(0, 0, 0, .20);
            color: rgba(255, 255, 255, .90);
            outline: none;
            font-family: var(--font);
        }

        .db-root .inp::placeholder {
            color: rgba(255, 255, 255, .45)
        }

        .db-root .pager {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 10px
        }

        .db-root .pager .meta {
            color: var(--muted2);
            font-size: 12px;
            margin-right: auto
        }

        .db-root .pgbtn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(255, 255, 255, .03);
            color: rgba(255, 255, 255, .88);
            padding: 6px 10px;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 900;
            font-size: 12px;
            font-family: var(--font);
        }

        .db-root .pgbtn:disabled {
            opacity: .45;
            cursor: not-allowed
        }

        .db-root .pglabel {
            color: var(--muted);
            font-size: 12px;
            padding: 0 4px
        }

        /* Transparent dashboard tables */
        .transparent-table {
            background: transparent !important;
        }

        .transparent-table th,
        .transparent-table td {
            background: transparent !important;
        }

        .transparent-table tr {
            background: transparent !important;
        }