/* ================================
       Modern Dashboard Theme + Insights
       ============================ */
        :root {
            --bg: #0f172a;
            /* slate-900 */
            --surface: #111827;
            /* gray-900 */
            --surface-2: #0b1222;
            /* deep card */
            --text: #e5e7eb;
            /* gray-200 */
            --muted: #9ca3af;
            /* gray-400 */
            --accent: #7c3aed;
            /* violet-600 */
            --accent-2: #22d3ee;
            /* cyan-400 */
            --ok: #22c55e;
            /* green-500 */
            --warn: #f59e0b;
            /* amber-500 */
            --bad: #ef4444;
            /* red-500 */
            --chip: #1f2937;
            /* gray-800 */
            --ring: 0 0 0 3px rgba(124, 58, 237, .25);
            --radius: 14px;
            --shadow: 0 10px 30px rgba(0, 0, 0, .35);
            --month-progress: 0%;
        }

        @media (prefers-color-scheme: light) {
            :root {
                --bg: #f6f7fb;
                --surface: #ffffff;
                --surface-2: #ffffff;
                --text: #0b1020;
                --muted: #637089;
                --accent: #6d28d9;
                --accent-2: #0891b2;
                --chip: #eef2ff;
                --shadow: 0 10px 25px rgba(2, 6, 23, .08);
            }
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            background: radial-gradient(1200px 600px at 20% -10%, rgba(124, 58, 237, .12), transparent 60%),
                radial-gradient(900px 450px at 100% 0%, rgba(34, 211, 238, .12), transparent 55%), var(--bg);
            color: var(--text);
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
        }

        .app {
            max-width: 1240px;
            margin: 40px auto;
            padding: 0 24px
        }

        /* -------- Top toolbar -------- */
        .toolbar {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 22px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .brand h1 {
            margin: 0;
            font-size: 1.4rem;
            letter-spacing: .2px
        }

        .badge-app {
            display: inline-grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow: var(--shadow)
        }

        .badge-app span {
            font-weight: 800;
            color: white
        }

        .toolbar .spacer {
            flex: 1
        }

        .search {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--surface);
            border: 1px solid rgba(255, 255, 255, .07);
            border-radius: 10px;
            padding: 6px 10px
        }

        .search input {
            background: transparent;
            border: none;
            outline: none;
            color: var(--text)
        }

        .btn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, .1);
            background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .15));
            color: var(--text);
            padding: .55rem .9rem;
            border-radius: 10px;
            cursor: pointer
        }

        .btn:hover {
            box-shadow: var(--ring)
        }

        label {
            opacity: .9
        }

        select {
            appearance: none;
            padding: .55rem .9rem;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 10px;
            background: var(--surface);
            color: var(--text);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
        }

        select:focus {
            outline: none;
            box-shadow: var(--ring)
        }

        #loader {
            opacity: .8
        }

        /* -------- Cards & Grid -------- */
        section {
            margin-bottom: 28px
        }

        .card {
            background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .08)), var(--surface);
            border: 1px solid rgba(255, 255, 255, .07);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 18px
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px
        }

        @media (min-width: 1024px) {
            .grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* -------- Accordion headers -------- */
        .accordion {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: .75rem;
            user-select: none;
            padding: 4px 4px 10px
        }

        .section-title {
            font-size: 1.05rem;
            font-weight: 700
        }

        .badge {
            margin-left: 8px;
            padding: .25rem .5rem;
            border-radius: 999px;
            background: var(--chip);
            color: var(--muted);
            font-weight: 600
        }

        .caret {
            margin-left: auto;
            transition: transform .2s ease;
            opacity: .8
        }

        .collapsed .caret {
            transform: rotate(-90deg)
        }

        /* -------- Progress bars -------- */
        .overall {
            margin: .35rem 2px 1rem
        }

        .progress-bar {
            position: relative;
            flex: 1;
            height: 12px;
            background: rgba(255, 255, 255, .08);
            border-radius: 8px;
            overflow: hidden
        }

        .progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            transition: width .35s ease, background .35s ease
        }

        .progress-bar::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: var(--month-progress);
            width: 2px;
            background: currentColor;
            opacity: .35;
            pointer-events: none
        }

        /* -------- Category rows -------- */
        .cat-progress {
            margin: 10px 2px 14px;
            border-radius: 12px;
            padding: 10px 12px;
            background: var(--surface-2);
            border: 1px solid rgba(255, 255, 255, .06)
        }

        .cat-title {
            display: flex;
            align-items: center;
            gap: .5rem;
            justify-content: space-between;
            font-weight: 700;
            margin-bottom: .35rem;
            cursor: pointer
        }

        .cat-left {
            display: flex;
            align-items: center;
            gap: .6rem;
            color: var(--text)
        }

        .tx-caret {
            transition: transform .2s ease;
            opacity: .85
        }

        .cat-progress.closed .tx-caret {
            transform: rotate(-90deg)
        }

        .cat-title .plan {
            font-weight: 600;
            color: var(--muted)
        }

        .progress-row {
            display: flex;
            align-items: center;
            gap: .6rem
        }

        .progress-info {
            font-size: .85rem;
            color: var(--muted);
            margin-top: .35rem
        }

        .neg {
            color: var(--bad);
            font-weight: 700
        }

        .pos {
            color: var(--ok);
            font-weight: 700
        }

        /* -------- Transaction list -------- */
        .accordion-body {
            display: none
        }

        .tx-list {
            display: none;
            margin: .55rem 0 0 .25rem;
            border-left: 2px solid rgba(255, 255, 255, .06);
            padding-left: .85rem
        }

        .tx {
            display: flex;
            gap: .75rem;
            justify-content: space-between;
            padding: .35rem 0;
            border-bottom: 1px dashed rgba(255, 255, 255, .08)
        }

        .tx:last-child {
            border-bottom: none
        }

        .tx .left {
            display: flex;
            gap: .6rem;
            color: var(--text);
            opacity: .95
        }

        .tx .date {
            min-width: 6ch;
            color: var(--muted)
        }

        .tx .amt {
            background: var(--chip);
            padding: .05rem .45rem;
            border-radius: 999px
        }

        /* -------- Insights (KPIs, lists, sparkline) -------- */
        .kpis {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px
        }

        @media (min-width: 860px) {
            .kpis {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .kpi {
            background: var(--surface-2);
            border: 1px solid rgba(255, 255, 255, .06);
            border-radius: 12px;
            padding: 12px
        }

        .kpi .label {
            color: var(--muted);
            font-size: .85rem
        }

        .kpi .value {
            font-size: 1.15rem;
            font-weight: 800;
            margin-top: 4px
        }

        .kpi .sub {
            color: var(--muted);
            font-size: .8rem;
            margin-top: 2px
        }

        .list {
            display: grid;
            gap: 8px;
            margin-top: 12px
        }

        .list-item {
            display: flex;
            justify-content: space-between;
            background: var(--surface-2);
            border: 1px solid rgba(255, 255, 255, .06);
            border-radius: 10px;
            padding: 8px 10px
        }

        .positiveNumber{
            color: #22c55e;
        }

        .negativeNumber{
            color: #ef4444;
        }