/* --- resources/views/app/open-finance/index.blade.php --- */
/* ══════════════════════════════════════════════════════════════
           OPEN FINANCE — ITEMS VIEW
           Mobile-first · Nubank-style brand (#E8601C) · Desktop overlay
           Namespaces: of-mob-* (mobile)  of-desk-* (desktop)
        ══════════════════════════════════════════════════════════════ */

        /* ── Shimmer base ─────────────────────────────────────────── */
        @keyframes of-shimmer {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .of-shimmer {
            background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.06) 25%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.06) 75%);
            background-size: 200% auto;
            animation: of-shimmer 1.5s linear infinite;
            border-radius: 6px;
            color: transparent !important;
            pointer-events: none;
        }

        /* ══════════════════════════════════════════════════════════════
           MOBILE STYLES
        ══════════════════════════════════════════════════════════════ */

        /* ── Hero ─────────────────────────────────────────────────── */
        .of-hero {
            background: var(--brand);
            padding: 1.1rem 1rem 3.2rem;
            position: relative;
            overflow: hidden;
        }

        .of-hero::before {
            content: '';
            position: absolute;
            top: -40px;
            right: -40px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
            pointer-events: none;
        }

        .of-hero::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: -20px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            pointer-events: none;
        }

        .of-hero-inner {
            position: relative;
            z-index: 1;
        }

        .of-hero-title {
            font-size: 21px;
            font-weight: 900;
            color: #fff;
            letter-spacing: -0.5px;
            line-height: 1.1;
        }

        .of-hero-sub {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.72);
            font-weight: 500;
            margin-top: 3px;
        }

        .of-hero-connect-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #fff;
            color: var(--brand);
            font-size: 13px;
            font-weight: 800;
            border: none;
            border-radius: 100px;
            padding: 9px 18px;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
            transition: transform .15s, box-shadow .15s;
            margin-top: 14px;
        }

        .of-hero-connect-btn:active {
            transform: scale(0.97);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* ── Status alert bar ─────────────────────────────────────── */
        .of-status-bar {
            margin: -1.4rem 0 0;
            padding: 0 1rem;
            position: relative;
            z-index: 10;
        }

        .of-status-alert {
            display: none;
            border-radius: 14px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid transparent;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
            background: var(--surface);
        }

        .of-status-alert.visible {
            display: block;
        }

        .of-status-alert.success {
            border-color: rgba(34, 197, 94, 0.3);
            color: #22c55e;
            background: rgba(34, 197, 94, 0.08);
        }

        .of-status-alert.warn {
            border-color: rgba(234, 179, 8, 0.3);
            color: #ca8a04;
            background: rgba(234, 179, 8, 0.08);
        }

        .of-status-alert.error {
            border-color: rgba(239, 68, 68, 0.3);
            color: #ef4444;
            background: rgba(239, 68, 68, 0.08);
        }

        /* ── Section wrapper ──────────────────────────────────────── */
        .of-body {
            padding: 1.2rem 1rem 5rem;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        /* ── Card base ────────────────────────────────────────────── */
        .of-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .of-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 0;
            gap: 10px;
        }

        .of-card-title {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--t1);
            letter-spacing: -0.2px;
        }

        .of-card-sub {
            font-size: 11px;
            color: var(--t3);
            font-weight: 500;
            margin-top: 1px;
        }

        /* ── KPI pills row ────────────────────────────────────────── */
        .of-kpi-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 12px 16px 16px;
        }

        .of-kpi-cell {
            background: var(--surface2);
            border-radius: 14px;
            padding: 10px 12px;
            border: 1px solid var(--border);
        }

        .of-kpi-cell-lbl {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--t3);
            text-transform: uppercase;
            letter-spacing: 0.7px;
            margin-bottom: 3px;
        }

        .of-kpi-cell-val {
            font-size: 18px;
            font-weight: 900;
            color: var(--t1);
            letter-spacing: -0.5px;
            font-variant-numeric: tabular-nums;
        }

        .of-kpi-cell.critical .of-kpi-cell-val {
            color: #ef4444;
        }

        .of-kpi-cell.warning .of-kpi-cell-val {
            color: #f59e0b;
        }

        .of-kpi-cell.ok .of-kpi-cell-val {
            color: #22c55e;
        }

        /* ── Issues list ──────────────────────────────────────────── */
        .of-issues-list {
            padding: 0 16px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .of-issue-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid transparent;
        }

        .of-issue-row.critical {
            background: rgba(239, 68, 68, 0.07);
            border-color: rgba(239, 68, 68, 0.18);
            color: #ef4444;
        }

        .of-issue-row.warning {
            background: rgba(245, 158, 11, 0.07);
            border-color: rgba(245, 158, 11, 0.18);
            color: #d97706;
        }

        .of-issue-row.ok {
            background: rgba(34, 197, 94, 0.07);
            border-color: rgba(34, 197, 94, 0.18);
            color: #16a34a;
        }

        .of-issue-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-top: 4px;
            flex-shrink: 0;
            background: currentColor;
        }

        /* ── Timeline bar ─────────────────────────────────────────── */
        .of-timeline-filters {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 16px 10px;
            flex-wrap: wrap;
        }

        .of-select {
            font-size: 11px;
            font-weight: 600;
            color: var(--t1);
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 5px 10px;
            appearance: none;
            cursor: pointer;
        }

        .of-btn-ghost {
            font-size: 11px;
            font-weight: 700;
            color: var(--t2);
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 5px 10px;
            cursor: pointer;
            transition: background .15s;
            white-space: nowrap;
        }

        .of-btn-ghost:hover {
            background: var(--surface);
            color: var(--t1);
        }

        .of-timeline-kpis {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding: 0 16px 12px;
            scrollbar-width: none;
        }

        .of-timeline-kpis::-webkit-scrollbar {
            display: none;
        }

        .of-tl-kpi {
            flex-shrink: 0;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }

        .of-tl-kpi span {
            font-size: 14px;
            font-weight: 900;
            color: var(--t1);
            display: block;
            margin-bottom: 1px;
        }

        .of-tl-kpi.success span {
            color: #22c55e;
        }

        .of-tl-kpi.error span {
            color: #ef4444;
        }

        .of-tl-kpi.latency span {
            color: #0ea5e9;
        }

        .of-tl-kpi.p95 span {
            color: #8b5cf6;
        }

        .of-timeline-series {
            padding: 0 16px 14px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .of-tl-row {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 10px;
        }

        .of-tl-row-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            font-weight: 600;
            color: var(--t2);
            margin-bottom: 5px;
        }

        .of-tl-row-head strong {
            color: var(--t1);
            font-size: 12px;
        }

        .of-tl-bar-track {
            height: 4px;
            background: var(--border);
            border-radius: 100px;
            overflow: hidden;
        }

        .of-tl-bar-fill {
            height: 100%;
            border-radius: 100px;
            background: linear-gradient(90deg, #22c55e, #0ea5e9);
            transition: width .6s cubic-bezier(.4, 0, .2, 1);
        }

        /* ── Go-live gate ─────────────────────────────────────────── */
        .of-golive-badge {
            padding: 4px 10px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.3px;
        }

        .of-golive-badge.go {
            background: rgba(34, 197, 94, 0.12);
            color: #16a34a;
        }

        .of-golive-badge.nogo {
            background: rgba(239, 68, 68, 0.12);
            color: #dc2626;
        }

        .of-golive-badge.wait {
            background: rgba(148, 163, 184, 0.1);
            color: var(--t3);
        }

        .of-checklist {
            padding: 0 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .of-check-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: var(--t2);
            padding: 7px 10px;
            border-radius: 10px;
            background: var(--surface2);
            border: 1px solid var(--border);
        }

        .of-check-item.ok {
            color: #16a34a;
            background: rgba(34, 197, 94, 0.06);
            border-color: rgba(34, 197, 94, 0.15);
        }

        .of-check-item.fail {
            color: #d97706;
            background: rgba(245, 158, 11, 0.06);
            border-color: rgba(245, 158, 11, 0.15);
        }

        .of-check-icon {
            font-size: 13px;
            flex-shrink: 0;
        }

        /* ── Connection card ──────────────────────────────────────── */
        .of-conn-list {
            padding: 10px 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .of-conn-card {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 12px 14px;
            transition: border-color .2s;
        }

        .of-conn-card:hover {
            border-color: var(--brand);
        }

        .of-conn-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .of-conn-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--brand), #F4874B);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 800;
            color: #fff;
            flex-shrink: 0;
            letter-spacing: -0.5px;
        }

        .of-conn-name {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--t1);
        }

        .of-conn-id {
            font-size: 10.5px;
            color: var(--t3);
            font-weight: 500;
            margin-top: 1px;
            font-family: 'Courier New', monospace;
        }

        .of-conn-badge {
            padding: 3px 9px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 800;
            flex-shrink: 0;
            letter-spacing: 0.3px;
        }

        .of-conn-badge.synced {
            background: rgba(34, 197, 94, 0.12);
            color: #16a34a;
        }

        .of-conn-badge.connected {
            background: rgba(14, 165, 233, 0.12);
            color: #0284c7;
        }

        .of-conn-badge.error {
            background: rgba(245, 158, 11, 0.12);
            color: #d97706;
        }

        .of-conn-badge.disconnected {
            background: rgba(148, 163, 184, 0.1);
            color: var(--t3);
        }

        .of-conn-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px 10px;
            font-size: 11px;
            color: var(--t2);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .of-conn-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .of-conn-meta-item i {
            color: var(--t3);
            font-size: 10px;
        }

        .of-conn-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px;
        }

        .of-conn-tag {
            font-size: 10.5px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 7px;
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--t2);
        }

        .of-conn-tag.health-ok {
            background: rgba(34, 197, 94, 0.07);
            border-color: rgba(34, 197, 94, 0.2);
            color: #16a34a;
        }

        .of-conn-tag.health-fail {
            background: rgba(239, 68, 68, 0.07);
            border-color: rgba(239, 68, 68, 0.2);
            color: #dc2626;
        }

        .of-conn-tag.health-warn {
            background: rgba(245, 158, 11, 0.07);
            border-color: rgba(245, 158, 11, 0.2);
            color: #d97706;
        }

        .of-conn-summary {
            font-size: 11px;
            color: var(--t3);
            font-weight: 600;
            margin-bottom: 8px;
            padding: 6px 8px;
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .of-conn-error-box {
            font-size: 11px;
            color: #d97706;
            background: rgba(245, 158, 11, 0.06);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 8px;
            padding: 6px 10px;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .of-conn-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .of-conn-action-btn {
            font-size: 11.5px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 9px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--t1);
            cursor: pointer;
            transition: background .15s, border-color .15s;
        }

        .of-conn-action-btn:hover {
            background: var(--surface2);
            border-color: var(--brand);
            color: var(--brand);
        }

        .of-conn-action-btn.danger {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.3);
        }

        .of-conn-action-btn.danger:hover {
            background: rgba(239, 68, 68, 0.07);
            border-color: #ef4444;
        }


        .of-disconnect-modal {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(2px);
        }

        .of-disconnect-modal.show {
            display: flex;
        }

        .of-disconnect-card {
            width: min(560px, 100%);
            border-radius: 18px;
            background: var(--surface);
            border: 1px solid var(--border);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
            padding: 16px;
        }

        .of-disconnect-option {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 11px;
            cursor: pointer;
        }

        .of-disconnect-option input {
            margin-top: 2px;
        }

        /* ── Security card ────────────────────────────────────────── */
        .of-security-list {
            padding: 0 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .of-security-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 12px;
            font-weight: 600;
            color: var(--t2);
        }

        .of-security-icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: rgba(232, 96, 28, 0.08);
            border: 1px solid rgba(232, 96, 28, 0.14);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--brand);
            font-size: 11px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        /* ── OF Transactions ──────────────────────────────────────── */
        .of-tx-controls {
            display: flex;
            gap: 6px;
            padding: 0 16px 10px;
            flex-wrap: wrap;
        }

        .of-tx-list {
            padding: 0 16px 14px;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .of-tx-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 13px;
            transition: border-color .15s;
        }

        .of-tx-row:hover {
            border-color: rgba(232, 96, 28, 0.25);
        }

        .of-tx-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--t1);
        }

        .of-tx-meta {
            font-size: 10.5px;
            color: var(--t3);
            font-weight: 500;
            margin-top: 2px;
        }

        .of-tx-right {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-shrink: 0;
        }

        .of-tx-save-btn {
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--brand);
            cursor: pointer;
            transition: background .15s;
        }

        .of-tx-save-btn:hover {
            background: rgba(232, 96, 28, 0.08);
            border-color: var(--brand);
        }

        .of-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 16px 16px;
            font-size: 11px;
            font-weight: 600;
            color: var(--t2);
            gap: 8px;
        }

        .of-pagination-btns {
            display: flex;
            gap: 6px;
        }

        .of-page-btn {
            font-size: 11px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--t1);
            cursor: pointer;
        }

        .of-page-btn:disabled {
            opacity: 0.4;
            cursor: default;
        }

        /* ══════════════════════════════════════════════════════════════
           DESKTOP STYLES  (min-width: 1024px)
        ══════════════════════════════════════════════════════════════ */

        .of-mobile-wrap {
            display: block;
        }

        .of-desktop-wrap {
            display: none;
        }

        @media (min-width: 1024px) {
            .of-mobile-wrap {
                display: none;
            }

            .of-desktop-wrap {
                display: block;
            }

            /* ── Navbar ──────────────────────────────────────────── */
            .ofd-navbar {
                position: sticky;
                top: 0;
                z-index: 100;
                background: var(--brand);
                height: 54px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 28px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
            }

            .ofd-navbar-left {
                display: flex;
                align-items: center;
                gap: 22px;
            }

            .ofd-navbar-right {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .ofd-logo {
                font-size: 17px;
                font-weight: 900;
                color: #fff;
                letter-spacing: -0.5px;
                text-decoration: none;
            }

            .ofd-logo span {
                display: inline-block;
                width: 26px;
                height: 26px;
                background: rgba(255, 255, 255, 0.22);
                border-radius: 8px;
                line-height: 26px;
                text-align: center;
                font-size: 14px;
                margin-right: 6px;
            }

            .ofd-nav-link {
                font-size: 12.5px;
                font-weight: 700;
                color: rgba(255, 255, 255, 0.72);
                text-decoration: none;
                transition: color .15s;
                padding-bottom: 2px;
            }

            .ofd-nav-link:hover, .ofd-nav-link.active {
                color: #fff;
            }

            .ofd-nav-link.active {
                border-bottom: 2px solid rgba(255, 255, 255, 0.6);
            }

            .ofd-connect-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: #fff;
                color: var(--brand);
                font-size: 12px;
                font-weight: 800;
                border: none;
                border-radius: 100px;
                padding: 7px 16px;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                transition: transform .15s, box-shadow .15s;
            }

            .ofd-connect-btn:hover {
                transform: scale(1.02);
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
            }

            /* ── Status bar ──────────────────────────────────────── */
            .ofd-status-bar {
                min-height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 28px;
                background: var(--surface);
                border-bottom: 1px solid var(--border);
            }

            .ofd-status-inner {
                display: none;
                align-items: center;
                gap: 8px;
                font-size: 12px;
                font-weight: 700;
                padding: 8px 14px;
                border-radius: 100px;
                border: 1px solid transparent;
            }

            .ofd-status-inner.visible {
                display: flex;
            }

            .ofd-status-inner.success {
                background: rgba(34, 197, 94, 0.08);
                border-color: rgba(34, 197, 94, 0.25);
                color: #16a34a;
            }

            .ofd-status-inner.warn {
                background: rgba(234, 179, 8, 0.08);
                border-color: rgba(234, 179, 8, 0.25);
                color: #ca8a04;
            }

            .ofd-status-inner.error {
                background: rgba(239, 68, 68, 0.08);
                border-color: rgba(239, 68, 68, 0.25);
                color: #ef4444;
            }

            /* ── Container ───────────────────────────────────────── */
            .ofd-container {
                max-width: 1380px;
                margin: 0 auto;
                padding: 24px 28px 60px;
            }

            /* ── Page header ─────────────────────────────────────── */
            .ofd-page-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                gap: 16px;
            }

            .ofd-page-title {
                font-size: 22px;
                font-weight: 900;
                color: var(--t1);
                letter-spacing: -0.6px;
            }

            .ofd-page-sub {
                font-size: 12px;
                color: var(--t3);
                font-weight: 500;
                margin-top: 2px;
            }

            /* ── 4 KPI stat cards ────────────────────────────────── */
            .ofd-stats-row {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 14px;
                margin-bottom: 20px;
            }

            .ofd-stat-card {
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 18px;
                padding: 16px 18px;
                box-shadow: var(--shadow-sm);
                position: relative;
                transition: border-color .2s, transform .2s;
            }

            .ofd-stat-card:hover {
                border-color: var(--brand);
                transform: translateY(-1px);
            }

            .ofd-stat-lbl {
                font-size: 9.5px;
                font-weight: 700;
                color: var(--t3);
                text-transform: uppercase;
                letter-spacing: 0.8px;
                margin-bottom: 6px;
            }

            .ofd-stat-val {
                font-size: 28px;
                font-weight: 900;
                color: var(--t1);
                letter-spacing: -1px;
                line-height: 1;
                font-variant-numeric: tabular-nums;
            }

            .ofd-stat-card.critical .ofd-stat-val {
                color: #ef4444;
            }

            .ofd-stat-card.warning .ofd-stat-val {
                color: #f59e0b;
            }

            .ofd-stat-card.ok .ofd-stat-val {
                color: #22c55e;
            }

            .ofd-stat-icon {
                position: absolute;
                top: 14px;
                right: 16px;
                width: 32px;
                height: 32px;
                border-radius: 9px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
            }

            .ofd-stat-icon.brand {
                background: rgba(232, 96, 28, 0.08);
                color: var(--brand);
            }

            .ofd-stat-icon.red {
                background: rgba(239, 68, 68, 0.08);
                color: #ef4444;
            }

            .ofd-stat-icon.amber {
                background: rgba(245, 158, 11, 0.08);
                color: #f59e0b;
            }

            .ofd-stat-icon.green {
                background: rgba(34, 197, 94, 0.08);
                color: #22c55e;
            }

            /* ── Main grid 3/2 ───────────────────────────────────── */
            .ofd-main-grid {
                display: grid;
                grid-template-columns: 3fr 2fr;
                gap: 18px;
                align-items: start;
            }

            /* ── Card base ───────────────────────────────────────── */
            .ofd-card {
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 20px;
                box-shadow: var(--shadow-sm);
                overflow: hidden;
                margin-bottom: 18px;
            }

            .ofd-card:last-child {
                margin-bottom: 0;
            }

            .ofd-card-header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                padding: 16px 18px 0;
                gap: 10px;
            }

            .ofd-card-title {
                font-size: 14px;
                font-weight: 800;
                color: var(--t1);
                letter-spacing: -0.2px;
            }

            .ofd-card-sub {
                font-size: 11px;
                color: var(--t3);
                font-weight: 500;
                margin-top: 2px;
            }

            .ofd-card-body {
                padding: 12px 18px 18px;
            }

            /* ── Connection cards (desktop) ──────────────────────── */
            .ofd-conn-desk-card {
                background: var(--surface2);
                border: 1px solid var(--border);
                border-radius: 16px;
                padding: 14px 16px;
                margin-bottom: 10px;
                transition: border-color .2s;
            }

            .ofd-conn-desk-card:hover {
                border-color: var(--brand);
            }

            .ofd-conn-desk-card:last-child {
                margin-bottom: 0;
            }

            .ofd-conn-desk-top {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 12px;
            }

            .ofd-conn-desk-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--brand), #F4874B);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 900;
                color: #fff;
                flex-shrink: 0;
                letter-spacing: -0.5px;
            }

            .ofd-conn-desk-info {
                flex: 1;
                min-width: 0;
            }

            .ofd-conn-desk-name {
                font-size: 14px;
                font-weight: 800;
                color: var(--t1);
                letter-spacing: -0.2px;
            }

            .ofd-conn-desk-id {
                font-size: 10.5px;
                color: var(--t3);
                font-weight: 500;
                font-family: 'Courier New', monospace;
                margin-top: 2px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .ofd-conn-desk-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
                margin-bottom: 12px;
            }

            .ofd-conn-desk-stat {
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 7px 10px;
            }

            .ofd-conn-desk-stat-lbl {
                font-size: 9.5px;
                font-weight: 700;
                color: var(--t3);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 2px;
            }

            .ofd-conn-desk-stat-val {
                font-size: 12.5px;
                font-weight: 800;
                color: var(--t1);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* ── Timeline desktop ────────────────────────────────── */
            .ofd-tl-kpis-desk {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 8px;
                margin-bottom: 14px;
            }

            .ofd-tl-kpi-desk {
                background: var(--surface2);
                border: 1px solid var(--border);
                border-radius: 12px;
                padding: 10px 12px;
                font-size: 10.5px;
                font-weight: 700;
                color: var(--t2);
                text-transform: uppercase;
                letter-spacing: 0.4px;
            }

            .ofd-tl-kpi-desk span {
                font-size: 18px;
                font-weight: 900;
                color: var(--t1);
                display: block;
                margin-bottom: 2px;
                letter-spacing: -0.5px;
                text-transform: none;
            }

            .ofd-tl-kpi-desk.success span {
                color: #22c55e;
            }

            .ofd-tl-kpi-desk.error span {
                color: #ef4444;
            }

            .ofd-tl-kpi-desk.latency span {
                color: #0ea5e9;
            }

            .ofd-tl-kpi-desk.p95 span {
                color: #8b5cf6;
            }

            /* ── Issues compact ──────────────────────────────────── */
            .ofd-issues-desk {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .ofd-issue-desk-row {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 9px 12px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 600;
                border: 1px solid transparent;
            }

            .ofd-issue-desk-row.critical {
                background: rgba(239, 68, 68, 0.06);
                border-color: rgba(239, 68, 68, 0.15);
                color: #ef4444;
            }

            .ofd-issue-desk-row.warning {
                background: rgba(245, 158, 11, 0.06);
                border-color: rgba(245, 158, 11, 0.15);
                color: #d97706;
            }

            .ofd-issue-desk-row.ok {
                background: rgba(34, 197, 94, 0.06);
                border-color: rgba(34, 197, 94, 0.15);
                color: #16a34a;
            }

            /* ── OF Transactions desktop ─────────────────────────── */
            .ofd-tx-table-row {
                display: grid;
                grid-template-columns: 2fr 1fr 2fr auto;
                align-items: center;
                gap: 12px;
                padding: 10px 12px;
                background: var(--surface2);
                border: 1px solid var(--border);
                border-radius: 12px;
                margin-bottom: 6px;
                transition: border-color .15s;
            }

            .ofd-tx-table-row:hover {
                border-color: rgba(232, 96, 28, 0.25);
            }

            .ofd-tx-table-row:last-child {
                margin-bottom: 0;
            }
        }


/* --- resources/views/app/accounts/account_index.blade.php --- */
/* ══════════════════════════════════════════════════════════════
   CONTAS BANCÁRIAS — FinFlow design system
   Tokens: --brand, --surface, --bg2, --border, --ok, --err, etc.
   Namespace: av-* (account view)
══════════════════════════════════════════════════════════════ */

/* ── Skeleton ─────────────────────────────────────────────── */
@keyframes av-skel { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.av-skel { position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg2); }
.dark .av-skel { background:var(--surface2); }
.av-skel::after { content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:av-skel 1.1s infinite; }
.dark .av-skel::after { background:linear-gradient(90deg,transparent,rgba(155,128,255,.06),transparent); }

/* ── Responsive wrappers ── */
.av-mobile-wrap  { display:block; }
.av-desktop-wrap { display:none;  }
@media (min-width:1024px) { .av-mobile-wrap{display:none;} .av-desktop-wrap{display:block;} }


/* ══ MOBILE ══ */

/* ── Hero ── */
.av-hero {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--brand) 28%, #1e1b4b 72%) 0%,
        color-mix(in srgb, var(--brand) 72%, #251a64 28%) 52%,
        color-mix(in srgb, var(--brand) 46%, #fff 54%) 100%);
    position:relative; overflow:hidden;
}
.av-hero::before { content:'';position:absolute;top:-56px;right:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none; }
.av-hero::after  { content:'';position:absolute;bottom:-40px;left:-28px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none; }
.av-hero-inner   { position:relative;z-index:1;padding:0 18px 22px; }
.av-hero-topbar  { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding-top:6px; }
.av-hero-left    { display:flex;align-items:center;gap:10px; }
.av-icon-btn {
    width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
    display:grid;place-items:center;color:rgba(255,255,255,.9);text-decoration:none;cursor:pointer;
    transition:background .14s,transform .12s;-webkit-tap-highlight-color:transparent;
}
.av-icon-btn:hover  { background:rgba(255,255,255,.24); }
.av-icon-btn:active { transform:scale(.90); }
.av-hero-title-text { font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px; }

.av-hero-kpi { margin-top:20px; }
.av-hero-kpi-lbl { font-size:9px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.9px;margin-bottom:4px; }
.av-hero-kpi-val { font-size:28px;font-weight:900;color:#fff;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1; }

.av-hero-pills { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px; }
.av-hero-pill {
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    border-radius:var(--r-lg);padding:10px 12px;
}
.av-hero-pill-lbl { font-size:9px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px; }
.av-hero-pill-val { font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums; }

/* ── Body ── */
.av-body { padding:12px 14px calc(6rem + env(safe-area-inset-bottom));background:var(--bg);margin-top:-2px; }

/* ── Section head ── */
.av-section-head  { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px; }
.av-section-title { font-size:10px;font-weight:800;color:var(--t4);text-transform:uppercase;letter-spacing:.7px; }
.av-section-link  { font-size:11px;font-weight:700;color:var(--brand);text-decoration:none;padding:4px 10px;border-radius:var(--r);border:1px solid var(--brand-border);background:var(--brand-50);transition:background .13s; }
.av-section-link:hover { background:var(--brand-100); }

/* ── Account card (mobile) ── */
.av-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
    overflow:hidden;box-shadow:var(--sh);margin-bottom:10px;
    transition:border-color .18s,box-shadow .18s;
}
.dark .av-card { box-shadow:var(--neon-card); }
.av-card:hover { border-color:var(--border-mid); }

.av-card-stripe { height:4px; }
.av-card-stripe--brand   { background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#fff 40%)); }
.av-card-stripe--emerald { background:linear-gradient(90deg,var(--ok),#059669); }
.av-card-stripe--violet  { background:linear-gradient(90deg,#8B5CF6,#6D28D9); }
.av-card-stripe--blue    { background:linear-gradient(90deg,#2E90FA,#0284C7); }

.av-card-inner { padding:14px 14px 0; }
.av-card-top   { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.av-card-left  { display:flex;align-items:center;gap:10px;min-width:0;flex:1; }

.av-card-avatar {
    width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.av-card-avatar--brand   { background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#fff 40%)); }
.av-card-avatar--emerald { background:linear-gradient(135deg,#10B981,#059669); }
.av-card-avatar--violet  { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.av-card-avatar--blue    { background:linear-gradient(135deg,#2E90FA,#0284C7); }

.av-card-name { font-size:13.5px;font-weight:800;color:var(--t1);letter-spacing:-.2px; }
.av-card-type { font-size:10px;font-weight:600;color:var(--t3);margin-top:2px; }

.av-of-badge {
    display:inline-flex;align-items:center;gap:4px;
    font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;
    background:var(--sky-light,rgba(46,144,250,.1));color:#2E90FA;
    border:1px solid rgba(46,144,250,.2);
}

.av-more-btn {
    width:30px;height:30px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);
    display:grid;place-items:center;cursor:pointer;color:var(--t3);flex-shrink:0;
    transition:all .12s;-webkit-tap-highlight-color:transparent;
}
.av-more-btn:hover { border-color:var(--brand-border);color:var(--brand); }

.av-card-balance { padding:12px 14px 0; }
.av-card-balance-lbl { font-size:9.5px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px; }
.av-card-balance-val { font-size:22px;font-weight:900;color:var(--t1);letter-spacing:-.7px;font-variant-numeric:tabular-nums; }

.av-card-stats { display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-2);margin-top:12px; }
.av-card-stat  { padding:9px 14px;border-right:1px solid var(--border-2); }
.av-card-stat:last-child { border-right:none; }
.av-card-stat-lbl { font-size:9.5px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.4px; }
.av-card-stat-val { font-size:13.5px;font-weight:800;color:var(--t1);margin-top:2px;font-variant-numeric:tabular-nums; }

/* ── Bottom sheet ── */
.av-sheet-btn { width:100%;text-align:left;padding:12px 16px;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--t1);background:none;border:none;cursor:pointer;transition:background .11s;font-family:inherit;display:flex;align-items:center;gap:10px; }
.av-sheet-btn:hover { background:var(--bg2); }
.av-sheet-btn--red  { color:var(--err); }
.av-sheet-btn--red:hover { background:var(--err-bg); }
.av-sheet-icon { width:32px;height:32px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);display:grid;place-items:center;font-size:12px;flex-shrink:0;color:var(--t2); }
.av-sheet-btn--red .av-sheet-icon { background:var(--err-bg);border-color:rgba(240,68,56,.2);color:var(--err); }

/* ══ DESKTOP ══ */
@media (min-width:1024px) {

    /* ── Summary strip ── */
    .avd-strip { background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh);margin:-1.5rem -1.5rem 0; }
    .avd-strip-inner { max-width:100%;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr); }
    .avd-strip-cell  { display:flex;align-items:center;gap:12px;padding:16px 0;border-right:1px solid var(--border-2); }
    .avd-strip-cell:last-child    { border-right:none;padding-left:24px; }
    .avd-strip-cell:not(:first-child) { padding-left:24px; }
    .avd-strip-icon { width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;font-size:15px;flex-shrink:0; }
    .avd-strip-lbl  { font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px; }
    .avd-strip-val  { font-size:18px;font-weight:900;color:var(--t1);letter-spacing:-.4px;font-variant-numeric:tabular-nums;margin-top:1px; }
    .avd-strip-sub  { font-size:11px;color:var(--t3);font-weight:500;margin-top:1px; }

    /* ── Page header ── */
    .avd-page-header { display:flex;align-items:center;justify-content:space-between;margin-top:22px;margin-bottom:18px; }
    .avd-page-title  { font-size:20px;font-weight:800;color:var(--t1);letter-spacing:-.4px; }
    .avd-page-sub    { font-size:12px;font-weight:500;color:var(--t3);margin-top:3px; }

    .avd-cta-btn {
        display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;
        font-size:13px;font-weight:700;border:none;border-radius:var(--r);padding:8px 16px;
        cursor:pointer;box-shadow:var(--sh);transition:background .13s,transform .1s;font-family:inherit;
    }
    .avd-cta-btn:hover  { background:var(--brand-700); }
    .avd-cta-btn:active { transform:scale(.97); }
    .avd-cta-btn--ghost { background:var(--surface2);color:var(--t2);border:1px solid var(--border);box-shadow:var(--sh); }
    .avd-cta-btn--ghost:hover { color:var(--brand);border-color:var(--brand-border); }

    /* ── Section ── */
    .avd-section-head  { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
    .avd-section-title { font-size:13px;font-weight:800;color:var(--t1); }
    .avd-section-badge { font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);color:var(--t3);margin-left:8px; }
    .avd-section-link  { font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;padding:6px 12px;border-radius:var(--r);border:1px solid var(--brand-border);background:var(--brand-50);transition:background .13s; }
    .avd-section-link:hover { background:var(--brand-100); }

    /* ── Cards grid ── */
    .avd-cards-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px; }

    /* ── Desktop card ── */
    .avd-card {
        background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
        overflow:hidden;box-shadow:var(--sh);transition:border-color .18s,transform .18s,box-shadow .18s;
    }
    .dark .avd-card { box-shadow:var(--neon-card); }
    .avd-card:hover { border-color:var(--border-mid);transform:translateY(-2px);box-shadow:var(--shm); }
    .dark .avd-card:hover { box-shadow:var(--neon-md); }

    .avd-card-stripe { height:4px; }
    .avd-card-stripe--brand   { background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#fff 40%)); }
    .avd-card-stripe--emerald { background:linear-gradient(90deg,var(--ok),#059669); }
    .avd-card-stripe--violet  { background:linear-gradient(90deg,#8B5CF6,#6D28D9); }
    .avd-card-stripe--blue    { background:linear-gradient(90deg,#2E90FA,#0284C7); }

    .avd-card-body { padding:18px 18px 16px; }

    .avd-card-top-row { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px; }
    .avd-card-avatar {
        width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
        flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.14);
    }
    .avd-card-avatar--brand   { background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#fff 40%)); }
    .avd-card-avatar--emerald { background:linear-gradient(135deg,#10B981,#059669); }
    .avd-card-avatar--violet  { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
    .avd-card-avatar--blue    { background:linear-gradient(135deg,#2E90FA,#0284C7); }
    .avd-card-name { font-size:14px;font-weight:800;color:var(--t1);letter-spacing:-.2px; }
    .avd-card-type-lbl { font-size:11px;color:var(--t3);font-weight:500;margin-top:2px; }

    .avd-card-balance-box {
        background:var(--bg2);border:1px solid var(--border-2);border-radius:var(--r-lg);
        padding:12px 14px;margin-bottom:10px;
    }
    .avd-card-balance-lbl { font-size:9.5px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px; }
    .avd-card-balance-val { font-size:22px;font-weight:900;color:var(--t1);letter-spacing:-.7px;font-variant-numeric:tabular-nums; }

    .avd-card-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px; }
    .avd-card-stat  { background:var(--bg2);border:1px solid var(--border-2);border-radius:var(--r);padding:9px 12px; }
    .avd-card-stat-lbl { font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px; }
    .avd-card-stat-val { font-size:13px;font-weight:800;color:var(--t1);margin-top:2px;font-variant-numeric:tabular-nums; }

    .avd-card-actions { display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
    .avd-action-pill {
        display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
        padding:6px 12px;border-radius:var(--r);border:1px solid var(--border);
        background:var(--surface2);color:var(--t2);cursor:pointer;
        transition:all .12s;font-family:inherit;
    }
    .avd-action-pill:hover { border-color:var(--brand-border);color:var(--brand);background:var(--brand-50); }
    .avd-action-pill--red:hover { border-color:var(--err);color:var(--err);background:var(--err-bg); }

    /* ── Empty state ── */
    .avd-empty { padding:48px 20px;text-align:center;color:var(--t3);grid-column:1/-1; }
    .avd-empty-icon { font-size:32px;color:var(--t4);margin-bottom:10px;display:block; }
}

/* ── Modal form ── */
.av-modal-input {
    width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);
    padding:8px 11px;font-size:12.5px;color:var(--t1);outline:none;font-family:inherit;
    transition:border-color .13s,box-shadow .13s;
}
.av-modal-input:focus { border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100);background:var(--surface); }
.av-modal-input::placeholder { color:var(--t4); }
.av-modal-label { display:block;font-size:11px;font-weight:600;color:var(--t3);margin-bottom:4px; }

.av-btn-primary { background:var(--brand);color:#fff;border:none;border-radius:var(--r);padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(124,92,252,.3);transition:background .13s,transform .1s;font-family:inherit; }
.av-btn-primary:hover  { background:var(--brand-700); }
.av-btn-primary:active { transform:scale(.97); }
.av-btn-ghost  { background:var(--surface2);color:var(--t2);border:1.5px solid var(--border);border-radius:var(--r);padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;font-family:inherit; }
.av-btn-ghost:hover { color:var(--t1);border-color:var(--border-mid); }


/* --- resources/views/app/invoices/invoice/invoice_index.blade.php --- */
/* ══════════════════════════════════════════════════════
           INVOICE — Nubank-style | orange hero (light-mode clean)
        ══════════════════════════════════════════════════════ */

        /* ── Hero: orange brand (matches cards/statement pages) ── */
        .inv-hero {
            background: var(--brand, #E8601C);
            position: relative;
            overflow: hidden;
            margin: -1rem -1rem 0;
            padding-bottom: 0;
            padding-top: 15px;
        }

        /* Decorative circles */
        .inv-hero::before {
            content:'';
            position:absolute;
            top:-80px; right:-80px;
            width:260px; height:260px;
            border-radius:50%;
            background:rgba(255,255,255,0.07);
            pointer-events:none;
        }
        .inv-hero::after {
            content:'';
            position:absolute;
            top:60px; right:-40px;
            width:140px; height:140px;
            border-radius:50%;
            background:rgba(255,255,255,0.05);
            pointer-events:none;
        }

        /* ── Top bar ──────────────────────────────────────── */
        .inv-topbar {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding: 20px 20px 0;
            position:relative;
            z-index:2;
        }

        /* ── Invoice info ─────────────────────────────────── */
        .inv-info-panel {
            position:relative;
            z-index:2;
            padding: 22px 20px 0;
        }

        .inv-status-label {
            font-size:11px;
            font-weight:700;
            text-transform:uppercase;
            letter-spacing:1px;
            margin-bottom:6px;
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding: 4px 12px;
            border-radius:100px;
            background:rgba(255,255,255,0.15);
            color:#fff;
        }
        /* dot indicator per status */
        .inv-status-label::before {
            content:'';
            width:6px; height:6px;
            border-radius:50%;
            flex-shrink:0;
            background:#fff;
        }
        .inv-status-label.paid::before    { background:#86EFAC; }
        .inv-status-label.overdue::before { background:#FCA5A5; }
        .inv-status-label.pending::before { background:#FDE68A; }

        .inv-total {
            font-size:38px;
            font-weight:900;
            color:#fff;
            letter-spacing:-1.5px;
            line-height:1;
            margin: 10px 0 10px;
            transition: all .3s ease;
            text-shadow: 0 2px 12px rgba(0,0,0,0.12);
        }

        .inv-meta {
            display:flex;
            flex-direction:column;
            gap:4px;
            margin-bottom:18px;
        }
        .inv-meta-row {
            font-size:13px;
            font-weight:500;
            color:rgba(255,255,255,0.65);
            display:flex;
            align-items:center;
            gap:6px;
        }
        .inv-meta-row b { color:#fff; font-weight:700; }

        /* ── Action buttons ───────────────────────────────── */
        .inv-actions-row {
            display:flex;
            align-items:center;
            gap:10px;
            padding-bottom:18px;
        }
        .inv-pay-btn {
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:10px 20px;
            border-radius:100px;
            border:none;
            background:#fff;
            color:var(--brand,#E8601C);
            font-family:'Nunito',sans-serif;
            font-size:13px;
            font-weight:800;
            cursor:pointer;
            transition:opacity .15s;
            box-shadow:0 4px 14px rgba(0,0,0,0.15);
        }
        .inv-pay-btn:hover { opacity:.88; }
        .inv-add-btn {
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:10px 18px;
            border-radius:100px;
            border:1px solid rgba(255,255,255,0.3);
            background:rgba(255,255,255,0.12);
            color:#fff;
            font-family:'Nunito',sans-serif;
            font-size:13px;
            font-weight:700;
            cursor:pointer;
            transition:all .15s;
            backdrop-filter:blur(4px);
        }
        .inv-add-btn:hover { background:rgba(255,255,255,0.2); }

        /* ── Bar chart ────────────────────────────────────── */
        .inv-chart-area {
            position:relative;
            z-index:2;
        }

        /* Sparkline wave separator (like cards/statement) */
        .inv-chart-wave {
            width:100%; height:28px;
            display:block;
            opacity:0.3;
            margin-top:4px;
            pointer-events:none;
        }

        .inv-chart-wrap {
            /* sits on top of the wave, pulled up */
            margin-top:-28px;
            padding: 0 12px 0;
            position:relative;
            z-index:3;
        }
        .inv-chart-scroll {
            display:flex;
            gap:8px;
            overflow-x:auto;
            scroll-snap-type:x mandatory;
            scrollbar-width:none;
            padding: 8px 4px 0;
            align-items:flex-end;
        }
        .inv-chart-scroll::-webkit-scrollbar { display:none; }

        .inv-bar-col {
            flex:0 0 auto;
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:6px;
            cursor:pointer;
            scroll-snap-align:center;
            min-width:46px;
            transition:opacity .15s;
        }
        .inv-bar-col:hover { opacity:.8; }

        .inv-bar-track {
            width:30px;
            border-radius:8px 8px 4px 4px;
            position:relative;
            display:flex;
            align-items:flex-end;
            overflow:visible;
            /* track container — height set in JS */
        }
        .inv-bar-fill {
            width:100%;
            border-radius:8px 8px 4px 4px;
            transition: height .5s cubic-bezier(.4,0,.2,1), background .2s;
            min-height:5px;
            position:relative;
        }

        /* Bar colors per status */
        .inv-bar-col.is-paid    .inv-bar-fill { background: rgba(255,255,255,0.45); }
        .inv-bar-col.is-pending .inv-bar-fill { background: rgba(255,255,255,0.3);  }
        .inv-bar-col.is-overdue .inv-bar-fill { background: rgba(253,186,116,0.7);  }
        .inv-bar-col.is-future  .inv-bar-fill { background: rgba(255,255,255,0.15); }

        /* Active bar: white with glow */
        .inv-bar-col.is-active .inv-bar-fill {
            background: #fff !important;
            box-shadow: 0 0 16px rgba(255,255,255,0.45);
        }
        .inv-bar-col.is-active .inv-bar-label { color:#fff; font-weight:800; }

        .inv-bar-label {
            font-size:9.5px;
            font-weight:600;
            color:rgba(255,255,255,0.5);
            text-transform:uppercase;
            letter-spacing:0.3px;
            white-space:nowrap;
            padding-bottom:4px;
        }

        /* ── Content lifted card ──────────────────────────── */
        .inv-content {
            background: var(--bg,#FAF6F3);
            border-radius:24px 24px 0 0;
            margin: 0 -1rem;
            position:relative;
            z-index:4;
            padding:20px 16px 120px;
            /* small shadow line to separate from hero */
            box-shadow: 0 -1px 0 rgba(0,0,0,0.06);
        }

        /* ── Section head ─────────────────────────────────── */
        .inv-section-head {
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:14px;
        }
        .inv-section-title {
            font-size:14px;
            font-weight:800;
            color:var(--t1);
            letter-spacing:-0.2px;
        }
        .inv-item-count {
            font-size:11px;
            font-weight:700;
            padding:3px 10px;
            border-radius:100px;
            background:var(--surface2);
            color:var(--t3);
            border:1px solid var(--border);
        }

        /* ── Invoice item card ────────────────────────────── */
        .inv-item {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:12px 14px;
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:16px;
            cursor:pointer;
            transition:transform .18s, box-shadow .18s;
            margin-bottom:8px;
        }
        .inv-item:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
        .inv-item:last-child { margin-bottom:0; }

        .inv-item-icon {
            width:40px; height:40px;
            border-radius:12px;
            display:grid;
            place-items:center;
            font-size:15px;
            color:#fff;
            flex-shrink:0;
        }
        .inv-item-info { flex:1; min-width:0; }
        .inv-item-title {
            font-size:13px;
            font-weight:700;
            color:var(--t1);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            text-transform:capitalize;
        }
        .inv-item-meta {
            font-size:11px;
            color:var(--t3);
            margin-top:2px;
            font-weight:600;
        }
        .inv-item-right { text-align:right; flex-shrink:0; }
        .inv-item-amount {
            font-size:14px;
            font-weight:800;
            color:var(--brand);
            letter-spacing:-0.3px;
            display:block;
        }
        .inv-item-actions {
            display:flex;
            gap:4px;
            margin-top:4px;
            justify-content:flex-end;
        }
        .inv-item-action-btn {
            width:26px; height:26px;
            border-radius:8px;
            border:none;
            background:var(--surface2);
            color:var(--t3);
            display:grid;
            place-items:center;
            cursor:pointer;
            font-size:11px;
            transition:all .15s;
        }
        .inv-item-action-btn:hover     { background:rgba(232,96,28,0.1); color:var(--brand); }
        .inv-item-action-btn.del:hover { background:rgba(239,68,68,0.1); color:#EF4444; }

        /* ── Empty state ──────────────────────────────────── */
        .inv-empty {
            display:flex;
            flex-direction:column;
            align-items:center;
            padding:36px 20px;
            text-align:center;
            gap:10px;
        }
        .inv-empty-icon {
            width:52px; height:52px;
            border-radius:16px;
            background:var(--surface2);
            display:grid;
            place-items:center;
            font-size:20px;
            color:var(--t3);
        }

        /* ── Skeleton ─────────────────────────────────────── */
        .skel { position:relative; overflow:hidden; border-radius:.75rem; background:var(--surface2,#f1ece8); }
        .dark .skel { background:#262626; }
        .skel::after {
            content:""; position:absolute; inset:0; transform:translateX(-100%);
            background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
            animation:skel 1.1s infinite;
        }
        @keyframes skel { 100%{ transform:translateX(100%); } }

        /* ── ff-input ─────────────────────────────────────── */
        .ff-input {
            margin-top:4px; width:100%;
            border-radius:14px; border:1px solid var(--border);
            background:var(--surface2); color:var(--t1);
            font-family:'Nunito',sans-serif; font-size:13px; font-weight:600;
            padding:10px 14px; outline:none; transition:border-color .15s;
        }
        .ff-input:focus { border-color:var(--brand); }
        .ff-label {
            font-size:11px; font-weight:700;
            text-transform:uppercase; letter-spacing:0.5px; color:var(--t3);
        }

        /* ── Loading state ────────────────────────────────── */
        #invoiceItems { transition:opacity .2s ease; }
        #invoiceItems.loading { opacity:0.4; pointer-events:none; }


/* --- resources/views/app/cards/card_index.blade.php --- */
/* ══════════════════════════════════════════════════════════════
   CARTÕES — FinFlow design system
   Namespace: cv-* (card view)
   Tokens: --brand, --surface, --bg2, --border, --ok, --err, etc.
══════════════════════════════════════════════════════════════ */

/* ── Skeleton ─────────────────────────────────────────────── */
@keyframes cv-skel { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.cv-skel { position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg2); }
.dark .cv-skel { background:var(--surface2); }
.cv-skel::after { content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:cv-skel 1.1s infinite; }
.dark .cv-skel::after { background:linear-gradient(90deg,transparent,rgba(155,128,255,.06),transparent); }

/* ── Responsive wrappers ── */
.cv-mobile-wrap  { display:block; }
.cv-desktop-wrap { display:none; }
@media (min-width:1024px) { .cv-mobile-wrap{display:none;} .cv-desktop-wrap{display:block;} }


/* ══ MOBILE ══ */

/* ── Hero ── */
.cv-hero {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--brand) 28%, #1e1b4b 72%) 0%,
        color-mix(in srgb, var(--brand) 72%, #251a64 28%) 52%,
        color-mix(in srgb, var(--brand) 46%, #fff 54%) 100%);
    position:relative;overflow:hidden;
}
.cv-hero::before { content:'';position:absolute;top:-60px;right:-50px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none; }
.cv-hero::after  { content:'';position:absolute;bottom:-40px;left:-28px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none; }
.cv-hero-inner   { position:relative;z-index:1;padding:0 18px 22px; }
.cv-hero-topbar  { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding-top:6px; }
.cv-hero-left    { display:flex;align-items:center;gap:10px; }

.cv-icon-btn {
    width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
    display:grid;place-items:center;color:rgba(255,255,255,.9);text-decoration:none;cursor:pointer;
    transition:background .14s,transform .12s;-webkit-tap-highlight-color:transparent;
}
.cv-icon-btn:hover  { background:rgba(255,255,255,.24); }
.cv-icon-btn:active { transform:scale(.9); }
.cv-hero-title-text { font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px; }

.cv-hero-kpi { margin-top:20px; }
.cv-hero-kpi-lbl { font-size:9px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.9px;margin-bottom:4px; }
.cv-hero-kpi-val { font-size:28px;font-weight:900;color:#fff;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1; }

.cv-hero-pills { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px; }
.cv-hero-pill {
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    border-radius:var(--r-lg);padding:9px 10px;
}
.cv-hero-pill-lbl { font-size:8.5px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px; }
.cv-hero-pill-val { font-size:13px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ── Body ── */
.cv-body { padding:12px 14px calc(6rem + env(safe-area-inset-bottom));background:var(--bg);margin-top:-2px; }

/* ── Section head ── */
.cv-section-head  { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px; }
.cv-section-title { font-size:13px;font-weight:800;color:var(--t1);letter-spacing:-.2px; }

/* ── Load notice ── */
.cv-notice { display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r);border:1px solid rgba(245,158,11,.28);background:rgba(245,158,11,.08);color:var(--t1);font-size:12px;font-weight:600;margin-bottom:12px; }

/* ── Credit card visual ── */
.cv-card-wrap {
    border-radius:20px;overflow:hidden;cursor:pointer;position:relative;
    transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;
    margin-bottom:0;
}
.cv-card-wrap:hover { transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.2); }
.cv-card-wrap:active { transform:translateY(-1px); }

.cv-card-face {
    aspect-ratio:16/10;padding:18px 20px;
    display:flex;flex-direction:column;justify-content:space-between;
    position:relative;overflow:hidden;
}
.cv-card-face::before { content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);top:-60px;right:-60px;pointer-events:none; }
.cv-card-face::after  { content:'';position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.05);bottom:-40px;left:60px;pointer-events:none; }

.cv-card-info {
    background:var(--surface);border:1px solid var(--border);border-top:none;
    padding:10px 16px;border-radius:0 0 20px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
}

.cv-menu-btn {
    width:30px;height:30px;border-radius:9px;border:none;background:rgba(255,255,255,.15);
    color:#fff;display:grid;place-items:center;cursor:pointer;
    transition:background .13s;backdrop-filter:blur(4px);flex-shrink:0;
}
.cv-menu-btn:hover { background:rgba(255,255,255,.26); }

/* ── Bottom sheet ── */
.cv-sheet-btn { width:100%;text-align:left;padding:12px 14px;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--t1);background:none;border:none;cursor:pointer;transition:background .11s;font-family:inherit;display:flex;align-items:center;gap:10px; }
.cv-sheet-btn:hover { background:var(--bg2); }
.cv-sheet-btn--red  { color:var(--err); }
.cv-sheet-btn--red:hover { background:var(--err-bg); }
.cv-sheet-icon { width:32px;height:32px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);display:grid;place-items:center;font-size:12px;flex-shrink:0;color:var(--t2); }
.cv-sheet-btn--red .cv-sheet-icon { background:var(--err-bg);border-color:rgba(240,68,56,.2);color:var(--err); }

/* ══ DESKTOP ══ */
@media (min-width:1024px) {

    /* ── Summary strip ── */
    .cvd-strip { background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh);margin:-1.5rem -1.5rem 0; }
    .cvd-strip-inner { max-width:100%;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr); }
    .cvd-strip-cell  { display:flex;align-items:center;gap:12px;padding:16px 0;border-right:1px solid var(--border-2); }
    .cvd-strip-cell:last-child { border-right:none;padding-left:24px; }
    .cvd-strip-cell:not(:first-child) { padding-left:24px; }
    .cvd-strip-icon { width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;font-size:15px;flex-shrink:0; }
    .cvd-strip-lbl  { font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px; }
    .cvd-strip-val  { font-size:18px;font-weight:900;color:var(--t1);letter-spacing:-.4px;font-variant-numeric:tabular-nums;margin-top:1px; }
    .cvd-strip-sub  { font-size:11px;color:var(--t3);font-weight:500;margin-top:1px; }

    /* ── Page header ── */
    .cvd-page-header { display:flex;align-items:center;justify-content:space-between;margin-top:22px;margin-bottom:18px; }
    .cvd-page-title  { font-size:20px;font-weight:800;color:var(--t1);letter-spacing:-.4px; }
    .cvd-page-sub    { font-size:12px;font-weight:500;color:var(--t3);margin-top:3px; }

    .cvd-cta-btn {
        display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;
        font-size:13px;font-weight:700;border:none;border-radius:var(--r);padding:8px 16px;
        cursor:pointer;box-shadow:var(--sh);transition:background .13s,transform .1s;font-family:inherit;
    }
    .cvd-cta-btn:hover  { background:var(--brand-700); }
    .cvd-cta-btn:active { transform:scale(.97); }

    /* ── Section ── */
    .cvd-section-head  { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
    .cvd-section-title { font-size:13px;font-weight:800;color:var(--t1); }
    .cvd-section-badge { font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);color:var(--t3);margin-left:8px; }

    /* ── Cards grid ── */
    .cvd-cards-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px; }

    /* ── Desktop card outer ── */
    .cvd-card-outer {
        background:var(--surface);border:1px solid var(--border);border-radius:22px;
        overflow:hidden;box-shadow:var(--sh);transition:border-color .18s,transform .18s,box-shadow .18s;
    }
    .dark .cvd-card-outer { box-shadow:var(--neon-card); }
    .cvd-card-outer:hover { border-color:var(--border-mid);transform:translateY(-2px);box-shadow:var(--shm); }
    .dark .cvd-card-outer:hover { box-shadow:var(--neon-md); }

    .cvd-card-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 18px 10px; }
    .cvd-card-stat  { background:var(--bg2);border:1px solid var(--border-2);border-radius:var(--r);padding:9px 12px; }
    .cvd-card-stat-lbl { font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px; }
    .cvd-card-stat-val { font-size:13px;font-weight:800;color:var(--t1);margin-top:2px;font-variant-numeric:tabular-nums; }

    .cvd-card-actions { display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:0 18px 16px; }
    .cvd-action-pill {
        display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
        padding:6px 12px;border-radius:var(--r);border:1px solid var(--border);
        background:var(--surface2);color:var(--t2);cursor:pointer;
        transition:all .12s;font-family:inherit;
    }
    .cvd-action-pill:hover { border-color:var(--brand-border);color:var(--brand);background:var(--brand-50); }
    .cvd-action-pill--red:hover { border-color:var(--err);color:var(--err);background:var(--err-bg); }

    /* ── Limit bar ── */
    .cvd-limit-bar  { height:3px;background:var(--border-2);border-radius:100px;overflow:hidden;margin-top:6px; }
    .cvd-limit-fill { height:100%;border-radius:100px;background:var(--brand);transition:width .5s; }

    /* ── Empty state ── */
    .cvd-empty { padding:48px 20px;text-align:center;color:var(--t3);grid-column:1/-1; }
    .cvd-empty-icon { font-size:32px;color:var(--t4);margin-bottom:10px;display:block; }
}

/* ── Modal shared ── */
.cv-modal-input {
    width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);
    padding:8px 11px;font-size:12.5px;color:var(--t1);outline:none;font-family:inherit;
    transition:border-color .13s,box-shadow .13s;
}
.cv-modal-input:focus { border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100);background:var(--surface); }
.cv-modal-input::placeholder { color:var(--t4); }
.cv-modal-label { display:block;font-size:11px;font-weight:600;color:var(--t3);margin-bottom:4px; }

.cv-btn-primary { background:var(--brand);color:#fff;border:none;border-radius:var(--r);padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(124,92,252,.3);transition:background .13s,transform .1s;font-family:inherit; }
.cv-btn-primary:hover  { background:var(--brand-700); }
.cv-btn-primary:active { transform:scale(.97); }
.cv-btn-ghost  { background:var(--surface2);color:var(--t2);border:1.5px solid var(--border);border-radius:var(--r);padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;font-family:inherit; }
.cv-btn-ghost:hover { color:var(--t1);border-color:var(--border-mid); }


/* --- resources/views/app/dashboard.blade.php --- */
.dashboard-month-input {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            opacity: 0;
        }

        .tx-table-wrap table td:last-child,
        .tx-table-wrap table th:last-child {
            text-align: right;
        }

        .full-cal-add-link {
            text-decoration: none;
        }

        .mc-ev-add-btn a,
        .mc-ev-add-btn button {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            justify-content: center;
            border: none;
            background: transparent;
            font: inherit;
            cursor: pointer;
        }

        .full-cal-add-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 36px;
            padding: 0 12px;
            border: 0;
            border-radius: 12px;
            background: var(--brand-600, #7c3aed);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .full-cal-add-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .cah {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
            }

            .cahgap {
                display: none;
            }

            .vts {
                order: 20;
            }

            .full-cal-add-btn {
                order: 30;
            }

            .ccl {
                order: 40;
            }
        }

        .full-cal-fab {
            position: absolute;
            right: 16px;
            bottom: 16px;
            width: 52px;
            height: 52px;
            border: 0;
            border-radius: 999px;
            background: var(--brand-600, #7c3aed);
            color: #fff;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
            z-index: 20;
        }

        .full-cal-fab svg {
            width: 22px;
            height: 22px;
        }

        @media (max-width: 768px) {
            .full-cal-fab {
                display: inline-flex;
            }

            .full-cal-add-btn {
                display: none;
            }

            .cal-m {
                position: relative;
            }
        }

        .kpi-top-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .kpi-badge--top {
            font-size: 10px;
            line-height: 1;
            white-space: nowrap;
        }

        .kpi-footer {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .kpi-footer .kpi-sub {
            display: block;
            min-width: 0;
        }

        .kpi-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--t1);
            margin: 6px 0 5px;
        }

        .result-month-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .result-month-stats .rci {
            width: 100%;
        }

        .result-month-stats .rci.hl {
            grid-column: 1 / -1;
        }

        .expense-donut-layout {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 14px;
        }

        .expense-donut-chart {
            position: relative;
            width: 140px;
            height: 140px;
            flex-shrink: 0;
        }

        .expense-donut-center {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            pointer-events: none;
            text-align: center;
        }

        .expense-donut-total {
            font-size: 14px;
            font-weight: 800;
            color: var(--t1);
        }

        .expense-donut-label {
            font-size: 10px;
            color: var(--t3);
        }

        .expense-donut-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            min-width: 0;
        }

        .expense-categories-card .legend-item-btn {
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 2px 0;
        }

        .expense-categories-card .legend-item-icon {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            display: grid;
            place-items: center;
            flex: 0 0 26px;
            font-size: 12px;
        }

        .expense-categories-card .legend-item-label {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--t2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .expense-categories-card .legend-item-pct {
            font-size: 12px;
            font-weight: 700;
            color: var(--t4);
            white-space: nowrap;
        }

        .expense-categories-card .legend-item-value {
            font-size: 13px;
            font-weight: 800;
            color: var(--t1);
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .result-month-stats {
                grid-template-columns: 1fr 1fr;
            }

            .expense-donut-chart {
                width: 124px;
                height: 124px;
            }
        }

        @media (max-width: 640px) {
            .result-month-stats {
                grid-template-columns: 1fr;
            }

            .result-month-stats .rci.hl {
                grid-column: auto;
            }

            .kpi-top {
                align-items: flex-start;
            }

            .kpi-top-right {
                gap: 6px;
            }

            .expense-donut-list {
                gap: 10px;
            }

            .expense-categories-card .legend-item-btn {
                display: grid;
                grid-template-columns: 26px minmax(0, 1fr) auto auto;
                align-items: center;
            }
        }

        .qa-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 18px;
        }

        @media (max-width: 640px) {
            .qa-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
        }

        .qa-card {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-lg, 14px);
            padding: 14px 14px 12px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            text-decoration: none;
            transition: border-color .15s, box-shadow .15s, transform .12s;
            overflow: hidden;
        }

        .qa-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .04) 100%);
            pointer-events: none;
        }

        .qa-card:hover {
            border-color: var(--brand-200, #c4b5fd);
            box-shadow: 0 4px 16px rgba(124, 92, 252, .10);
            transform: translateY(-1px);
        }

        .dark .qa-card:hover {
            box-shadow: 0 4px 16px rgba(124, 92, 252, .18);
        }

        .qa-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            margin-bottom: 4px;
            flex-shrink: 0;
        }

        .qa-icon svg {
            width: 20px;
            height: 20px;
        }

        .qa-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--t1);
            letter-spacing: -.2px;
            line-height: 1.2;
        }

        .qa-sub {
            font-size: 11px;
            color: var(--t3);
            font-weight: 500;
        }

        .qa-arrow {
            position: absolute;
            top: 14px;
            right: 12px;
            width: 14px;
            height: 14px;
            color: var(--t4);
            transition: color .15s, transform .15s;
        }

        .qa-card:hover .qa-arrow {
            color: var(--brand-600, #7c3aed);
            transform: translateX(2px);
        }

        .qa-card--whatsapp:hover {
            border-color: #86EFAC;
            box-shadow: 0 4px 16px rgba(22, 163, 74, .12);
        }

        .breakdown-section {
            width: 100%;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }

        .breakdown-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--t1);
            letter-spacing: -0.01em;
            margin-bottom: 10px;
        }

        .breakdown-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }

        .breakdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            min-width: 0;
            background: var(--surface);
        }

        .breakdown-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }

        .breakdown-icon {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            flex: 0 0 32px;
            background: var(--surface-2, #f8fafc);
            color: var(--t2);
            font-size: 13px;
        }

        .breakdown-text {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
            text-align: left;
        }

        .breakdown-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--t1);
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .breakdown-meta {
            font-size: 11px;
            color: var(--t4);
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .breakdown-value {
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 800;
            color: var(--t1);
            white-space: nowrap;
        }

        .legend-item-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            min-width: 0;
            background: transparent;
            border: 0;
            padding: 0;
            text-align: left;
            font: inherit;
            cursor: pointer;
        }

        .legend-item-icon {
            width: 22px;
            height: 22px;
            border-radius: 8px;
            display: grid;
            place-items: center;
            flex: 0 0 22px;
            font-size: 11px;
        }

        .legend-item-label {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--t2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .legend-item-pct {
            font-size: 11px;
            font-weight: 600;
            color: var(--t4);
            white-space: nowrap;
        }

        .legend-item-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--t1);
            white-space: nowrap;
        }

        .mc-ev-info {
            min-width: 0;
            flex: 1;
        }

        .mc-ev-name {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .mc-ev-icon {
            width: 22px;
            height: 22px;
            border-radius: 8px;
            display: grid;
            place-items: center;
            flex: 0 0 22px;
            background: rgba(127, 86, 217, .10);
            color: var(--t2);
            font-size: 11px;
        }

        .mc-ev-title {
            min-width: 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--t1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mvei {
            font-size: 10px;
            color: var(--t2);
            margin-right: 4px;
        }

        @media (max-width: 640px) {
            .breakdown-item {
                padding: 10px 12px;
                align-items: flex-start;
            }

            .breakdown-label {
                white-space: normal;
            }

            .breakdown-value {
                font-size: 12px;
            }

            .legend-item-label {
                font-size: 12px;
            }
        }

        .reserve-goals-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .reserve-goals-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .reserve-goals-create-btn {
            border: 0;
            background: transparent;
            color: var(--brand-600, #7c3aed);
            font-size: 13px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            padding: 0;
        }

        .reserve-goals-create-btn svg {
            width: 14px;
            height: 14px;
        }

        .reserve-goals-grid {
            margin-top: 14px;
            display: grid;
            gap: 10px;
        }

        .reserve-goal-item {
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--surface);
            padding: 14px;
            display: grid;
            gap: 10px;
        }

        .reserve-goal-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .reserve-goal-name {
            margin: 0;
            font-size: 14px;
            font-weight: 800;
            color: var(--t1);
            text-transform: uppercase;
            letter-spacing: -.01em;
        }

        .reserve-goal-caption {
            margin-top: 4px;
            font-size: 11px;
            color: var(--t3);
        }

        .reserve-goal-value {
            font-size: 20px;
            font-weight: 800;
            color: var(--t1);
            white-space: nowrap;
        }

        .reserve-goal-progress-row {
            display: grid;
            gap: 6px;
        }

        .reserve-goal-progress-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            font-size: 12px;
            color: var(--t2);
            font-weight: 600;
        }

        .reserve-goal-progress-bar {
            width: 100%;
            height: 8px;
            border-radius: 999px;
            background: #eceff5;
            overflow: hidden;
        }

        .reserve-goal-progress-fill {
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #7c3aed, #9f67ff);
        }

        .reserve-goals-empty {
            margin-top: 14px;
            border: 1px dashed rgba(124, 58, 237, .16);
            border-radius: 18px;
            padding: 16px;
            text-align: center;
            color: var(--t3);
            background: rgba(124, 58, 237, .02);
        }

        .reserve-goals-empty strong {
            display: block;
            margin-bottom: 6px;
            color: var(--t2);
        }

        .reserve-goal-feedback {
            display: none;
            margin-bottom: 12px;
            border-radius: 14px;
            padding: 12px 14px;
            font-size: 13px;
        }

        .reserve-goal-feedback.is-visible {
            display: block;
        }

        .reserve-goal-feedback.is-error {
            background: #fef2f2;
            color: #b42318;
        }

        @media (max-width: 768px) {
            .reserve-goals-head,
            .reserve-goal-head {
                flex-direction: column;
            }

            .reserve-goals-actions {
                width: 100%;
                justify-content: space-between;
            }

            .reserve-goal-form-row {
                grid-template-columns: 1fr;
            }

            .reserve-goal-modal__dialog {
                margin: 0;
                min-height: 100vh;
                max-height: 100vh;
                border-radius: 24px 24px 0 0;
                inset: auto 0 0 0;
            }
        }


/* --- resources/views/app/projection/projection_index.blade.php --- */
/* ══════════════════════════════════════════════════════
   PROJECTION STATEMENT — Nubank-style layout
   Matching dashboard aesthetic (orange brand, Nunito)
══════════════════════════════════════════════════════ */

/* ── Skeleton ─────────────────────────────────────── */
.skel { position:relative; overflow:hidden; border-radius:.75rem; background:var(--surface2,#f1ece8); }
.dark .skel { background:#262626; }
.skel::after {
    content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    animation:skel 1.1s infinite;
}
@keyframes skel { 100%{ transform:translateX(100%); } }

/* ── Hero ─────────────────────────────────────────── */
.proj-hero {
    background: var(--brand, #E8601C);
    position: relative;
    overflow: hidden;
    margin: -1px;
}
.proj-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}
.proj-hero::after {
    content: '';
    position: absolute;
    top: 60px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}
.proj-hero-inner {
    position: relative;
    z-index: 1;
    padding: 20px 20px 0;
}
.proj-sparkline {
    width: 100%; height: 44px;
    display: block; opacity: 0.45; margin-top: 8px;
}

/* ── Content area ─────────────────────────────────── */
.proj-content {
    background: var(--bg, #FAF6F3);
    border-radius: 24px 24px 0 0;
    margin-top: -16px;
    position: relative;
    z-index: 2;
    padding: 20px 16px 120px;
}

/* ── Filters card ─────────────────────────────────── */
.proj-filter-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

/* ── Range chips ──────────────────────────────────── */
.range-chip {
    padding: 7px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--t2);
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.range-chip:hover { border-color: var(--brand); color: var(--brand); background: rgba(232,96,28,0.06); }
.range-chip.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 4px 12px rgba(232,96,28,0.35);
}

/* ── Summary row ──────────────────────────────────── */
.proj-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media(min-width:640px){
    .proj-summary { grid-template-columns: repeat(4, 1fr); }
}
.proj-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--t3);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.proj-stat-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--t1);
    letter-spacing: -0.3px;
}

/* ── Month block ──────────────────────────────────── */
.proj-month-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
}
.proj-month-header {
    background: var(--brand);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.proj-month-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
}
.proj-month-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.proj-mbadge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* ── Month summary bar ────────────────────────────── */
.proj-month-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
}
.proj-ms-cell {
    padding: 10px 14px;
    border-right: 1px solid var(--border);
}
.proj-ms-cell:last-child { border-right: none; }
.proj-ms-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--t3);
    margin-bottom: 3px;
}
.proj-ms-value {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* ── Table header ─────────────────────────────────── */
.proj-table-head {
    display: grid;
    grid-template-columns: 90px 1fr 110px;
    align-items: center;
    padding: 8px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
@media(max-width:479px){
    .proj-table-head { grid-template-columns: 1fr 100px; }
    .proj-table-head .proj-th-date { display: none; }
}
.proj-th {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--t3);
}

/* ── Transaction row ──────────────────────────────── */
.proj-tx-row {
    display: grid;
    grid-template-columns: 90px 1fr 110px;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.proj-tx-row:hover { background: var(--surface2); }
@media(max-width:479px){
    .proj-tx-row { grid-template-columns: 1fr 100px; }
    .proj-tx-row .proj-td-date { display: none; }
}
.proj-tx-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
}
.proj-tx-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 3px;
}
.proj-tx-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.proj-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 100px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--t3);
}
.proj-tx-amount {
    text-align: right;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.proj-tx-amount .sign-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 5px;
}

/* ── Balance row ──────────────────────────────────── */
.proj-balance-row {
    display: grid;
    grid-template-columns: 90px 1fr 110px;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.015);
}
.dark .proj-balance-row { background: rgba(255,255,255,0.02); }
@media(max-width:479px){
    .proj-balance-row { grid-template-columns: 1fr 100px; }
    .proj-balance-row .proj-td-date { display: none; }
}

/* ── Month footer ─────────────────────────────────── */
.proj-month-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    background: var(--surface2);
}
.proj-month-footer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.proj-month-footer-value {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.4px;
}

/* ── Toggle switch ────────────────────────────────── */
.ff-toggle {
    position: relative;
    width: 44px; height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.ff-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ff-toggle-track {
    position: absolute; inset: 0;
    border-radius: 100px;
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: all .2s;
}
.ff-toggle input:checked + .ff-toggle-track {
    background: var(--brand);
    border-color: var(--brand);
}
.ff-toggle-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.ff-toggle input:checked ~ .ff-toggle-knob { transform: translateX(20px); }

/* ── Savings item ─────────────────────────────────── */
.saving-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface2);
    transition: border-color .15s;
}
.saving-row.selected { border-color: var(--brand); background: rgba(232,96,28,0.04); }

/* ── ff-input ─────────────────────────────────────── */
.ff-input {
    margin-top: 4px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--t1);
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    outline: none;
    transition: border-color .15s;
}
.ff-input:focus { border-color: var(--brand); }
.ff-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--t3);
}

/* ── Color tokens ─────────────────────────────────── */
.amt-pos { color: #1D4ED8; }
.amt-neg { color: #DC2626; }
.amt-zero { color: var(--t3); }

/* ── Animations ───────────────────────────────────── */
.anim-up { animation: ff-fade-up 0.45s cubic-bezier(0.4,0,0.2,1) both; }
.d1 { animation-delay: .06s; }
.d2 { animation-delay: .12s; }
.d3 { animation-delay: .18s; }


/* --- resources/views/app/users/user_index.blade.php --- */
/* ══════════════════════════════════════════════════════════════
   MEU PERFIL — Namespace: prof-* (mobile) | profd-* (desktop)
══════════════════════════════════════════════════════════════ */

/* ── Responsive wrappers ───────────────────────────────────── */
.prof-mobile-wrap  { display: block; }
.prof-desktop-wrap { display: none;  }

@media (min-width: 1024px) {
    .prof-mobile-wrap  { display: none;  }
    .prof-desktop-wrap { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════════════ */

/* ── Hero (avatar flutuando) ───────────────────────────────── */
.prof-hero {
    background: var(--brand);
    padding-top: max(18px, calc(env(safe-area-inset-top) + 14px));
    position: relative;
    overflow: visible;
}
.prof-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -50px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}
.prof-hero::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -30px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

/* top bar */
.prof-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    min-height: 44px;
    position: relative;
    z-index: 1;
}
.prof-topbar-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
}
.prof-hero-icon-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}
.prof-hero-icon-btn:hover  { background: rgba(255,255,255,0.25); }
.prof-hero-icon-btn:active { transform: scale(0.90); }

/* avatar bump zone */
.prof-avatar-bump {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 0;
    position: relative;
    z-index: 1;
}
.prof-avatar-ring {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 3px solid rgba(255,255,255,0.55);
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    overflow: hidden;
}
.prof-avatar-ring img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.prof-avatar-initials {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}
.prof-avatar-cam {
    position: absolute;
    right: 0; bottom: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* wave divider */
.prof-wave {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 16px;
}

/* ── Identity card ─────────────────────────────────────────── */
.prof-identity {
    text-align: center;
    padding: 0 20px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.prof-identity-name {
    font-size: 18px;
    font-weight: 900;
    color: var(--t1);
    letter-spacing: -0.4px;
    margin-bottom: 2px;
}
.prof-identity-email {
    font-size: 12px;
    color: var(--t2);
    font-weight: 500;
}
.prof-actions-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.prof-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.prof-action-btn--ghost {
    background: var(--surface2);
    color: var(--t1);
    border: 1px solid var(--border);
}
.prof-action-btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.prof-action-btn--brand {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 3px 10px rgba(232,96,28,0.35);
}
.prof-action-btn--brand:hover { filter: brightness(1.06); }
.prof-action-btn--danger {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.18);
}
.prof-action-btn--danger:hover { background: rgba(239,68,68,0.14); }

/* ── Generic section card ──────────────────────────────────── */
.prof-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
}
.prof-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.prof-card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1);
    letter-spacing: -0.2px;
}
.prof-card-desc {
    font-size: 11px;
    color: var(--t2);
    margin-top: 2px;
    line-height: 1.4;
}
.prof-card-body { padding: 14px 16px 16px; }

/* ── Badge ─────────────────────────────────────────────────── */
.prof-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
}
.prof-badge--active   { background: rgba(16,185,129,0.12); color: #059669; }
.prof-badge--inactive { background: rgba(239,68,68,0.10);  color: #ef4444; }
.prof-badge--warning  { background: rgba(245,158,11,0.12); color: #d97706; }

/* ── Form elements ─────────────────────────────────────────── */
.prof-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.prof-input {
    width: 100%;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--t1);
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
}
.prof-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,96,28,0.1); }
.prof-input::placeholder { color: var(--t3); }

/* ── Subscription status block ─────────────────────────────── */
.prof-sub-status {
    font-size: 12px;
    color: var(--t2);
    line-height: 1.5;
}
.prof-sub-status strong { color: var(--t1); font-weight: 700; }

/* ── PIX result ────────────────────────────────────────────── */
.prof-pix-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-top: 12px;
}
.prof-pix-textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    font-size: 10.5px;
    color: var(--t2);
    resize: none;
    outline: none;
    font-family: 'Courier New', monospace;
}
.prof-pix-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* ── User row cards ────────────────────────────────────────── */
.prof-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.prof-user-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.prof-user-name  { font-size: 13px; font-weight: 700; color: var(--t1); }
.prof-user-email { font-size: 11px; color: var(--t2); margin-top: 1px; }

/* ── Divider ───────────────────────────────────────────────── */
.prof-divider { height: 1px; background: var(--border); margin: 12px 0; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* ── Navbar ────────────────────────────────────────────── */
    .profd-navbar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--brand);
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    }
    .profd-navbar-left  { display: flex; align-items: center; gap: 22px; }
    .profd-navbar-right { display: flex; align-items: center; gap: 12px; }
    .profd-logo {
        font-size: 17px; font-weight: 900;
        color: #fff; letter-spacing: -0.5px;
        text-decoration: none;
    }
    .profd-logo span {
        display: inline-block;
        width: 26px; height: 26px;
        background: rgba(255,255,255,0.22);
        border-radius: 8px;
        line-height: 26px; text-align: center;
        font-size: 14px; margin-right: 6px;
    }
    .profd-nav-link {
        font-size: 12.5px; font-weight: 700;
        color: rgba(255,255,255,0.72);
        text-decoration: none; transition: color .15s;
        padding-bottom: 2px;
    }
    .profd-nav-link:hover { color: #fff; }
    .profd-nav-link.active { color: #fff; border-bottom: 2px solid rgba(255,255,255,0.6); }
    .profd-logout-btn {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        font-size: 12px; font-weight: 700;
        border-radius: 100px;
        padding: 6px 14px;
        cursor: pointer;
        text-decoration: none;
        transition: background .15s;
    }
    .profd-logout-btn:hover { background: rgba(255,255,255,0.25); }

    /* ── Container & grid ──────────────────────────────────── */
    .profd-container {
        max-width: 1380px;
        margin: 0 auto;
        padding: 32px 28px 60px;
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 24px;
        align-items: start;
    }

    /* ── Left: profile panel ───────────────────────────────── */
    .profd-profile-panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        position: sticky;
        top: 78px;
    }
    .profd-panel-hero {
        background: var(--brand);
        height: 90px;
        position: relative;
        overflow: hidden;
    }
    .profd-panel-hero::before {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 140px; height: 140px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        pointer-events: none;
    }
    .profd-avatar-wrap {
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: -46px;
        z-index: 1;
    }
    .profd-avatar-ring {
        width: 92px; height: 92px;
        border-radius: 50%;
        background: var(--surface2);
        border: 4px solid var(--surface);
        display: grid;
        place-items: center;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        position: relative;
    }
    .profd-avatar-ring img {
        width: 100%; height: 100%;
        object-fit: cover; display: block;
    }
    .profd-avatar-initials {
        font-size: 30px; font-weight: 900;
        color: var(--brand); letter-spacing: -0.5px;
    }
    .profd-avatar-cam {
        position: absolute;
        right: 0; bottom: 0;
        width: 28px; height: 28px;
        border-radius: 50%;
        background: var(--brand);
        border: 2px solid var(--surface);
        display: grid; place-items: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    .profd-panel-info {
        text-align: center;
        padding: 10px 20px 20px;
    }
    .profd-panel-name {
        font-size: 17px; font-weight: 900;
        color: var(--t1); letter-spacing: -0.4px;
        margin-bottom: 2px;
    }
    .profd-panel-email {
        font-size: 12px; color: var(--t2); font-weight: 500;
    }
    .profd-panel-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 16px 16px;
        border-top: 1px solid var(--border);
        padding-top: 16px;
        margin-top: 4px;
    }
    .profd-panel-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--t1);
        text-decoration: none;
        border: none;
        cursor: pointer;
        background: var(--surface2);
        border: 1px solid var(--border);
        transition: all .15s;
        text-align: left;
        width: 100%;
    }
    .profd-panel-btn:hover { border-color: var(--brand); color: var(--brand); }
    .profd-panel-btn:hover .profd-panel-btn-icon { background: rgba(232,96,28,0.12); color: var(--brand); }
    .profd-panel-btn--brand { background: var(--brand); color: #fff; border-color: var(--brand); }
    .profd-panel-btn--brand:hover { filter: brightness(1.06); color: #fff; }
    .profd-panel-btn--danger { color: #ef4444; }
    .profd-panel-btn--danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.06); color: #ef4444; }
    .profd-panel-btn-icon {
        width: 30px; height: 30px;
        border-radius: 9px;
        background: var(--surface);
        display: grid; place-items: center;
        font-size: 12px;
        flex-shrink: 0;
        transition: all .15s;
    }

    /* ── Right: sections ───────────────────────────────────── */
    .profd-right { display: flex; flex-direction: column; gap: 18px; }

    .profd-section {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .profd-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 20px;
        border-bottom: 1px solid var(--border);
    }
    .profd-section-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        display: grid; place-items: center;
        font-size: 15px;
        flex-shrink: 0;
    }
    .profd-section-title {
        font-size: 14px; font-weight: 800;
        color: var(--t1); letter-spacing: -0.2px;
    }
    .profd-section-desc {
        font-size: 11.5px; color: var(--t2);
        margin-top: 2px; line-height: 1.4;
    }
    .profd-section-body { padding: 18px 20px; }

    .profd-field-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 12px;
    }

    /* Users grid */
    .profd-users-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
        padding: 16px 20px;
    }

    /* PIX box */
    .profd-pix-box {
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
    }
    .profd-pix-textarea {
        width: 100%;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        font-size: 11px;
        color: var(--t2);
        resize: none;
        outline: none;
        font-family: 'Courier New', monospace;
    }

    /* Badge */
    .profd-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 4px 10px; border-radius: 100px;
        font-size: 11px; font-weight: 800; flex-shrink: 0;
    }
    .profd-badge--active   { background: rgba(16,185,129,0.12); color: #059669; }
    .profd-badge--inactive { background: rgba(239,68,68,0.10);  color: #ef4444; }
    .profd-badge--warning  { background: rgba(245,158,11,0.12); color: #d97706; }

    /* Buttons */
    .profd-btn {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 9px 18px; border-radius: 100px;
        font-size: 12px; font-weight: 700;
        border: none; cursor: pointer;
        transition: all .15s; text-decoration: none;
    }
    .profd-btn--brand  { background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(232,96,28,0.3); }
    .profd-btn--brand:hover { filter: brightness(1.06); }
    .profd-btn--ghost  { background: var(--surface2); color: var(--t1); border: 1px solid var(--border); }
    .profd-btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
    .profd-btn--green  { background: #10B981; color: #fff; box-shadow: 0 3px 10px rgba(16,185,129,0.3); }
    .profd-btn--green:hover { filter: brightness(1.06); }

    /* Input */
    .profd-input {
        width: 100%;
        background: var(--surface2);
        border: 1.5px solid var(--border);
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 13px;
        color: var(--t1);
        outline: none;
        transition: border-color .15s;
        font-family: inherit;
    }
    .profd-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,96,28,0.1); }
    .profd-input::placeholder { color: var(--t3); }
    .profd-label {
        display: block;
        font-size: 10.5px; font-weight: 700;
        color: var(--t2);
        text-transform: uppercase; letter-spacing: 0.6px;
        margin-bottom: 6px;
    }
}


/* --- resources/views/app/transactions/transaction/transaction_index.blade.php --- */
/* ── Skeleton ─────────────────────────────────────────────── */
        @keyframes txv-skel { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
        .txv-skel { position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg2); }
        .dark .txv-skel { background:var(--surface2); }
        .txv-skel::after { content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:txv-skel 1.1s infinite; }
        .dark .txv-skel::after { background:linear-gradient(90deg,transparent,rgba(155,128,255,.06),transparent); }

        /* ── Responsive wrappers ── */
        .txv-mobile-wrap  { display:block; }
        .txv-desktop-wrap { display:none; }
        @media (min-width:1024px) { .txv-mobile-wrap{display:none;} .txv-desktop-wrap{display:block;} }

        body.ui-modal-open #txFab, body.ui-sheet-open #txFab { z-index:40;pointer-events:none; }

        /* ══ MOBILE ══ */
        .txv-hero {
            background:linear-gradient(140deg, color-mix(in srgb,var(--brand) 28%,#1e1b4b 72%) 0%, color-mix(in srgb,var(--brand) 72%,#251a64 28%) 52%, color-mix(in srgb,var(--brand) 46%,#fff 54%) 100%);
            position:relative; overflow:hidden;
        }
        .txv-hero::before { content:'';position:absolute;top:-56px;right:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none; }
        .txv-hero::after  { content:'';position:absolute;bottom:-40px;left:-28px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none; }
        .txv-hero-inner   { position:relative;z-index:1;padding:0 18px 20px; }
        .txv-topbar       { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding-top:6px; }
        .txv-topbar-left  { display:flex;align-items:center;gap:10px; }
        .txv-topbar-title { font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px; }
        .txv-icon-btn {
            width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);
            display:grid;place-items:center;color:rgba(255,255,255,.9);text-decoration:none;cursor:pointer;
            transition:background .14s,transform .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
        }
        .txv-icon-btn:hover  { background:rgba(255,255,255,.24); }
        .txv-icon-btn:active { transform:scale(.90); }
        .txv-hero-stats { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px; }
        .txv-stat-pill  { background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:10px 11px;display:flex;flex-direction:column;gap:3px; }
        .txv-stat-lbl   { font-size:9px;font-weight:700;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:4px; }
        .txv-stat-val   { font-size:13px;font-weight:900;color:#fff;letter-spacing:-.3px;font-variant-numeric:tabular-nums; }

        /* Filter panel */
        .txv-filter-panel  { background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);margin-bottom:12px; }
        .dark .txv-filter-panel { box-shadow:var(--neon-card); }
        .txv-filter-header { display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent; }
        .txv-filter-title  { font-size:13px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px; }
        .txv-filter-badge  { display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--brand);color:#fff;font-size:9px;font-weight:800; }
        .txv-filter-body   { padding:13px 16px;display:flex;flex-direction:column;gap:12px; }
        .txv-date-row      { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
        .txv-date-label    { display:block;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px; }
        .txv-date-input    { width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:8px 11px;font-size:12.5px;color:var(--t1);outline:none;font-family:inherit;transition:border-color .14s,box-shadow .14s; }
        .txv-date-input:focus { border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100); }

        /* Type tabs */
        .txv-type-tabs { display:flex;gap:6px;overflow-x:auto;padding-bottom:2px; }
        .txv-type-tabs::-webkit-scrollbar { display:none; }
        .txv-tab { display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface2);color:var(--t2);border:1.5px solid var(--border);cursor:pointer;transition:all .14s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:inherit; }
        .txv-tab.active             { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 12px rgba(124,92,252,.32); }
        .txv-tab.active-entrada     { background:var(--ok);color:#fff;border-color:var(--ok);box-shadow:0 3px 10px rgba(18,183,106,.28); }
        .txv-tab.active-despesa     { background:var(--err);color:#fff;border-color:var(--err);box-shadow:0 3px 10px rgba(240,68,56,.28); }
        .txv-tab.active-investimento{ background:#8B5CF6;color:#fff;border-color:#8B5CF6;box-shadow:0 3px 10px rgba(139,92,246,.28); }
        .dark .txv-tab.active       { box-shadow:0 3px 12px rgba(124,92,252,.32),var(--neon-sm); }

        /* Subcategory chips */
        .txv-subcat-wrap  { display:flex;gap:6px;flex-wrap:wrap; }
        .txv-subcat-chip  { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;background:var(--surface2);color:var(--t2);border:1px solid var(--border);cursor:pointer;transition:all .12s;-webkit-tap-highlight-color:transparent;font-family:inherit; }
        .txv-subcat-chip.active { background:var(--brand-50);color:var(--brand);border-color:var(--brand-border); }
        .txv-subcat-chip .txv-chip-dot { width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0; }

        /* Apply btn */
        .txv-apply-btn { display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;border-radius:var(--r);background:var(--brand);color:#fff;font-size:13px;font-weight:700;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(124,92,252,.32);transition:filter .14s;touch-action:manipulation;font-family:inherit; }
        .txv-apply-btn:hover { filter:brightness(1.06); }
        .dark .txv-apply-btn { box-shadow:0 4px 14px rgba(124,92,252,.32),var(--neon-btn); }

        /* Transaction cards */
        .txv-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);margin-bottom:10px;transition:box-shadow .18s,border-color .18s; }
        .txv-card:hover { border-color:var(--border-mid); }
        .dark .txv-card { box-shadow:var(--neon-card); }
        .dark .txv-card:hover { box-shadow:var(--neon-md); }
        .txv-card-top   { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 13px 10px; }
        .txv-card-left  { display:flex;align-items:center;gap:11px;min-width:0; }
        .txv-card-icon  { width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0;font-size:15px; }
        .txv-card-title { font-size:13px;font-weight:700;color:var(--t1);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
        .txv-card-meta  { font-size:11px;color:var(--t3);margin-top:1px; }
        .txv-card-right { display:flex;align-items:center;gap:8px;flex-shrink:0; }
        .txv-type-pill  { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;border:1px solid currentColor; }
        .txv-more-btn   { width:30px;height:30px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--t3);transition:all .13s;-webkit-tap-highlight-color:transparent; }
        .txv-more-btn:hover { border-color:var(--brand);color:var(--brand); }
        .txv-card-stats { display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-2); }
        .txv-stat-cell  { padding:9px 13px;border-right:1px solid var(--border-2); }
        .txv-stat-cell:last-child { border-right:none; }
        .txv-stat-cell-lbl { font-size:10px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.4px; }
        .txv-stat-cell-val { font-size:14px;font-weight:800;color:var(--t1);margin-top:1px;font-variant-numeric:tabular-nums; }

        /* Bottom sheet */
        .txv-sheet-btn { width:100%;text-align:left;padding:12px 16px;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--t1);background:none;border:none;cursor:pointer;transition:background .11s;font-family:inherit; }
        .txv-sheet-btn:hover { background:var(--bg2); }
        .txv-sheet-btn--red { color:var(--err); }
        .txv-sheet-btn--red:hover { background:var(--err-bg); }

        /* ══ DESKTOP ══ */
        @media (min-width:1024px) {
            .txvd-strip { background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh);margin:-1.5rem -1.5rem 0; }
            .txvd-strip-inner { max-width:100%;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr); }
            .txvd-strip-cell { display:flex;align-items:center;gap:12px;padding:14px 0;border-right:1px solid var(--border-2); }
            .txvd-strip-cell:last-child { border-right:none;padding-left:24px; }
            .txvd-strip-cell:not(:first-child) { padding-left:24px; }
            .txvd-strip-icon { width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;font-size:14px;flex-shrink:0; }
            .txvd-strip-lbl  { font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px; }
            .txvd-strip-val  { font-size:17px;font-weight:900;color:var(--t1);letter-spacing:-.4px;font-variant-numeric:tabular-nums;margin-top:1px; }

            .txvd-page-header { display:flex;align-items:center;justify-content:space-between;margin-top:20px;margin-bottom:16px; }
            .txvd-page-title  { font-size:20px;font-weight:800;color:var(--t1);letter-spacing:-.4px; }
            .txvd-page-sub    { font-size:12px;font-weight:500;color:var(--t3);margin-top:2px; }

            .txvd-cta-btn { display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;border:none;border-radius:var(--r);padding:8px 16px;cursor:pointer;box-shadow:var(--sh);transition:background .13s,transform .1s;text-decoration:none;font-family:inherit; }
            .txvd-cta-btn:hover  { background:var(--brand-700); }
            .txvd-cta-btn:active { transform:scale(.97); }
            .txvd-cta-btn--ghost { background:var(--surface2);color:var(--t2);border:1px solid var(--border);box-shadow:var(--sh); }
            .txvd-cta-btn--ghost:hover { background:var(--bg2);color:var(--brand);border-color:var(--brand-border); }

            .txvd-container { display:grid;grid-template-columns:264px 1fr;gap:18px;align-items:start; }

            .txvd-sidebar { background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);position:sticky;top:82px; }
            .dark .txvd-sidebar { box-shadow:var(--neon-card); }
            .txvd-sidebar-header { padding:14px 16px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:8px; }
            .txvd-sidebar-title  { font-size:13px;font-weight:700;color:var(--t1); }
            .txvd-sidebar-body   { padding:14px 16px;display:flex;flex-direction:column;gap:13px; }
            .txvd-field-label    { display:block;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px; }
            .txvd-field-input    { width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:8px 11px;font-size:12.5px;color:var(--t1);outline:none;font-family:inherit;transition:border-color .14s,box-shadow .14s; }
            .txvd-field-input:focus { border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100); }

            .txvd-type-group { display:flex;flex-direction:column;gap:4px; }
            .txvd-type-btn   { display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--r);font-size:12px;font-weight:600;color:var(--t2);background:var(--surface2);border:1.5px solid var(--border);cursor:pointer;transition:all .13s;width:100%;text-align:left;font-family:inherit; }
            .txvd-type-dot   { width:9px;height:9px;border-radius:50%;flex-shrink:0; }
            .txvd-type-btn.active             { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 10px rgba(124,92,252,.28); }
            .txvd-type-btn.active-entrada     { background:var(--ok);color:#fff;border-color:var(--ok);box-shadow:0 3px 8px rgba(18,183,106,.24); }
            .txvd-type-btn.active-despesa     { background:var(--err);color:#fff;border-color:var(--err);box-shadow:0 3px 8px rgba(240,68,56,.24); }
            .txvd-type-btn.active-investimento{ background:#8B5CF6;color:#fff;border-color:#8B5CF6;box-shadow:0 3px 8px rgba(139,92,246,.24); }
            .dark .txvd-type-btn.active { box-shadow:0 3px 10px rgba(124,92,252,.28),var(--neon-sm); }

            .txvd-subcat-group { display:flex;flex-direction:column;gap:3px; }
            .txvd-subcat-item  { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .11s;border:1px solid transparent;font-family:inherit; }
            .txvd-subcat-item:hover  { background:var(--bg2); }
            .txvd-subcat-item.active { background:var(--brand-50);color:var(--brand);border-color:var(--brand-border); }
            .txvd-subcat-dot { width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0; }

            .txvd-apply-btn { display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border-radius:var(--r);background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(124,92,252,.28);transition:filter .13s;font-family:inherit; }
            .txvd-apply-btn:hover { filter:brightness(1.06); }
            .dark .txvd-apply-btn { box-shadow:0 4px 12px rgba(124,92,252,.28),var(--neon-btn); }

            .txvd-main  { display:flex;flex-direction:column; }
            .txvd-table { background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh); }
            .dark .txvd-table { box-shadow:var(--neon-card); }
            .txvd-table-head { display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr 80px;padding:9px 18px;border-bottom:1px solid var(--border-2);background:var(--bg2); }
            .txvd-th { font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.7px; }
            .txvd-table-row { display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr 80px;padding:12px 18px;border-bottom:1px solid var(--border-2);align-items:center;transition:background .11s;cursor:default; }
            .txvd-table-row:last-child { border-bottom:none; }
            .txvd-table-row:hover { background:var(--bg2); }
            .txvd-row-name    { display:flex;align-items:center;gap:10px;min-width:0; }
            .txvd-row-icon    { width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;font-size:13px;flex-shrink:0; }
            .txvd-row-title   { font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
            .txvd-row-text    { font-size:13px;font-weight:500;color:var(--t2); }
            .txvd-row-amount  { font-size:13.5px;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums; }
            .txvd-row-pill    { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700; }
            .txvd-row-actions { display:flex;align-items:center;justify-content:flex-end;gap:4px; }
            .txvd-action-btn  { width:28px;height:28px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--t3);font-size:10px;transition:all .12s; }
            .txvd-action-btn:hover { border-color:var(--brand);color:var(--brand);background:var(--brand-50); }
            .dark .txvd-action-btn:hover { box-shadow:var(--neon-sm); }
            .txvd-action-btn--red:hover { border-color:var(--err);color:var(--err);background:var(--err-bg);box-shadow:none!important; }
            .txvd-empty { padding:56px 20px;text-align:center;color:var(--t3); }
        }

        /* ── Context menu ── */
        #txMenu { border-radius:var(--r-lg)!important;background:var(--surface)!important;border-color:var(--border)!important;box-shadow:var(--shm)!important; }
        .dark #txMenu { box-shadow:var(--neon-md)!important; }

        /* ── tx-chip ── */
        .tx-chip { display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .68rem;border:1px solid var(--border);border-radius:14px;background:transparent;color:inherit;transition:all .15s;font-family:inherit;font-size:12px;line-height:1.2; }
        .tx-chip .size-4 { width:12px!important;height:12px!important;border-radius:50%!important;border:1.75px solid currentColor!important;flex-shrink:0; }
        .tx-chip:has(input:checked) { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 12px rgba(124,92,252,.28); }
        .tx-chip:has(input:checked) .size-4 { border-color:#fff!important;background:#fff!important; }
        .dark .tx-chip:has(input:checked) { box-shadow:0 3px 12px rgba(124,92,252,.28),var(--neon-sm); }

        /* ── TYPE PICKER ── */
        .tx-type-picker { position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shm);padding:8px;min-width:240px; }
        .dark .tx-type-picker { box-shadow:var(--neon-md); }
        .tx-type-picker-header { font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.6px;padding:4px 10px 8px; }
        .tx-type-opt { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);cursor:pointer;transition:background .11s;border:none;background:none;width:100%;text-align:left;font-family:inherit;-webkit-tap-highlight-color:transparent; }
        .tx-type-opt:hover { background:var(--bg2); }
        .tx-type-opt:active { transform:scale(.97); }
        .tx-type-opt-icon { width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;flex-shrink:0;font-size:15px;transition:transform .15s; }
        .tx-type-opt:hover .tx-type-opt-icon { transform:scale(1.08); }
        .tx-type-opt-name { font-size:13px;font-weight:700; }
        .tx-type-opt-desc { font-size:11px;color:var(--t3);margin-top:1px; }

        /* ── MODAL REDESIGN ── */
        #txModal > div:last-child > div {
            background:var(--surface)!important;border:none!important;
            border-radius:24px 24px 0 0!important;box-shadow:none!important;padding:0!important;
            display:flex;flex-direction:column;max-height:95svh;
        }
        @media (min-width:768px) {
            #txModal > div:last-child > div { border-radius:20px!important;max-height:90vh; }
        }
        .tx-modal-header {
            padding:14px 18px 12px;border-bottom:1px solid var(--border-2);
            display:flex;align-items:center;justify-content:space-between;gap:12px;
            background:var(--bg2);border-radius:24px 24px 0 0;flex-shrink:0;
        }
        @media (min-width:768px) { .tx-modal-header { border-radius:20px 20px 0 0; } }
        .tx-modal-type-tag { display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700; }
        .tx-modal-title   { font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.3px;margin-top:4px; }
        .tx-modal-close   { width:28px;height:28px;border-radius:999px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--t3);transition:all .12s;flex-shrink:0; }
        .tx-modal-close:hover { color:var(--err);border-color:var(--err);background:var(--err-bg); }
        .tx-modal-body { padding:16px 18px;overflow-y:auto;flex:1;min-height:0; }
        .tx-modal-footer { padding:12px 18px;border-top:1px solid var(--border-2);flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:8px; }

        /* Category chips */
        .tx-cat-strip { display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;margin-bottom:10px; }
        .tx-cat-strip::-webkit-scrollbar { display:none; }
        .tx-cat-chip { display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;white-space:nowrap;font-size:11px;font-weight:600;cursor:pointer;background:var(--surface2);color:var(--t2);border:1.5px solid var(--border);transition:all .12s;font-family:inherit; }
        .tx-cat-chip.active { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(124,92,252,.28); }
        .tx-cat-chip:not(.active):hover { border-color:var(--brand-border);color:var(--brand); }

        /* Inputs inside txModal */
        #txModal input[type=text],#txModal input[type=number],#txModal input[type=date],
        #txModal input[inputmode=decimal],#txModal select {
            background:var(--bg2)!important;border:1.5px solid var(--border)!important;
            border-radius:14px!important;color:var(--t1)!important;font-family:'Poppins',sans-serif!important;
            font-size:12.5px!important;padding:8px 11px!important;outline:none!important;
            transition:border-color .13s,box-shadow .13s!important;
        }
        #txModal input:focus,#txModal select:focus { border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-100)!important;background:var(--surface)!important; }
        #txModal input::placeholder { color:var(--t4)!important; }

        /* Quick-add pills */
        .tx-quick-add { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-50);border:1px solid var(--brand-border);border-radius:999px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:all .12s; }
        .tx-quick-add:hover { background:var(--brand-100); }

        /* Submit / cancel inside modal */
        #txModal button[type="submit"] { background:var(--brand)!important;color:#fff!important;border:none!important;border-radius:14px!important;font-weight:700!important;font-family:'Poppins',sans-serif!important;padding:9px 18px!important;box-shadow:0 4px 14px rgba(124,92,252,.3)!important;transition:background .13s,transform .1s!important;font-size:12.5px!important; }
        #txModal button[type="submit"]:hover  { background:var(--brand-700)!important; }
        #txModal button[type="submit"]:active { transform:scale(.97)!important; }
        #txModal [data-crud-cancel],[data-crud-close] { background:var(--surface2)!important;color:var(--t2)!important;border:1px solid var(--border)!important;border-radius:14px!important;font-family:'Poppins',sans-serif!important;font-size:12px!important;font-weight:600!important;padding:8px 14px!important;cursor:pointer!important;transition:all .12s!important; }
        #txModal [data-crud-cancel]:hover { color:var(--err)!important;border-color:var(--err)!important; }
        #txModal input[type=checkbox],#txModal input[type=radio] { width:14px;height:14px;accent-color:var(--brand); }
        @media (max-width:768px) {
            .tx-chip { padding:.42rem .62rem;font-size:11.5px; }
            .tx-cat-chip { padding:4px 9px;font-size:10.5px; }
            #txModal input[type=text],#txModal input[type=number],#txModal input[type=date],#txModal input[inputmode=decimal],#txModal select { font-size:12px!important;padding:8px 10px!important; }
            .qcm-header { margin:-.5rem -.5rem 12px;padding:13px 14px 12px;border-radius:14px 14px 0 0; }
            .qcm-icon { width:34px;height:34px;border-radius:10px;margin-bottom:8px; }
            .qcm-title { font-size:14px; }
            .qcm-sub { font-size:11px; }
            .qcm-input { padding:8px 10px;font-size:12px; }
            .qcm-type-btn { padding:5px 10px;font-size:11px; }
        }

        /* ── QUICK CREATE MODAL ── */
        .qcm-header { margin:-1rem -1rem 14px;padding:16px 18px 14px;background:var(--bg2);border-bottom:1px solid var(--border-2);border-radius:16px 16px 0 0; }
        .qcm-icon   { width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;border:1px solid; }
        .qcm-title  { font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.3px; }
        .qcm-sub    { font-size:12px;color:var(--t3);margin-top:2px; }
        .qcm-label  { display:block;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px; }
        .qcm-input  { width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:9px 12px;font-size:13px;color:var(--t1);outline:none;font-family:inherit;transition:border-color .13s,box-shadow .13s; }
        .qcm-input:focus { border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100);background:var(--surface); }
        .qcm-input::placeholder { color:var(--t4); }
        .qcm-type-group { display:flex;gap:5px; }
        .qcm-type-btn   { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface2);color:var(--t2);border:1.5px solid var(--border);cursor:pointer;font-family:inherit;transition:all .12s;flex:1;justify-content:center; }
        .qcm-type-btn.active { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(124,92,252,.28); }

        /* ── Fix bottom nav sobrepondo modal ── */
        #txModal {
            padding: 0 15px !important;
        }

        #txModalForm {
            padding: 0 15px !important;
        }


/* --- resources/views/app/transactions/transaction_category/transaction_category_form.blade.php --- */
.form-switch {
            padding-left: 50px;
            padding-bottom: 15px;
        }

        .form-check.form-switch .form-check-input {
            -webkit-appearance: none !important;
            appearance: none !important;
            width: 44px !important;
            height: 22px !important;
            background-color: #f1f1f1 !important;
            background-image: none !important;
            border-radius: 14px !important;
            position: relative !important;
            cursor: pointer !important;
            transition: background-color .3s !important;
        }

        /* Bolinha */
        .form-check.form-switch .form-check-input::after {
            content: "" !important;
            width: 16px !important;
            height: 16px !important;
            background-color: #fff !important;
            border-radius: 50% !important;
            position: absolute !important;
            left: 2px !important;
            top: 2px !important;
            transition: left .3s !important;
        }

        /* Estado ON */
        .form-check.form-switch .form-check-input:checked {
            background-color: #00c779 !important; /* fundo ON */
        }

        /* Move bolinha pra direita */
        .form-check.form-switch .form-check-input:checked::after {
            left: calc(100% - 26px) !important;
        }

#iconPickerWrap {
            overflow: visible !important;
        }

        #iconPreview {
            display: none !important;
        }

        .icon-dd {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            padding: 10px;
            margin-top: 6px;
            z-index: 11000;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
            max-height: 260px;
            overflow: auto;
        }

        .icon-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
        }

        .icon-item i {
            font-size: 16px;
        }

        @media (max-width: 480px) {
            .icon-grid {
                grid-template-columns: repeat(10, 1fr);
            }
        }

        .icon-dd {
            position: absolute;
            bottom: 100%; /* abre pra cima */
            top: auto;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 6px; /* espaço entre o input e o dropdown */
            z-index: 11000;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
            max-height: 200px;
            overflow: auto;
        }


/* --- resources/views/app/transactions/transaction_category/transaction_category_index.blade.php --- */
/* ══════════════════════════════════════════════════════════════
   CATEGORIAS — Namespace: tcat-* (mobile) | tcatd-* (desktop)
   Mobile-first · Brand #E8601C · Responsive at 1024px
══════════════════════════════════════════════════════════════ */

/* ── Skeleton ─────────────────────────────────────────────── */
@keyframes tcat-skel {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
}
.tcat-skel {
    position: relative; overflow: hidden;
    border-radius: 10px; background: #e5e7eb;
}
.dark .tcat-skel { background: #262626; }
.tcat-skel::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    animation: tcat-skel 1.1s infinite;
}
.dark .tcat-skel::after {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.tcat-grid-loading { position: relative; }
.tcat-grid-loading::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    animation: tcat-skel 1.1s infinite; opacity: .35; border-radius: inherit;
}
.dark .tcat-grid-loading::after {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); opacity: .6;
}

/* ── Responsive wrappers ──────────────────────────────────── */
.tcat-mobile-wrap  { display: block; }
.tcat-desktop-wrap { display: none;  }
@media (min-width: 1024px) {
    .tcat-mobile-wrap  { display: none;  }
    .tcat-desktop-wrap { display: block; }
}

/* ── FAB z-index fix ──────────────────────────────────────── */

/* ── Icon picker ──────────────────────────────────────────── */
#iconPickerWrap  { position: relative; }
.tcat-icon-dd {
    position: absolute; z-index: 11000;
    inset: auto 0 auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: 12px;
    max-height: 260px;
    overflow: auto;
}
.tcat-icon-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.tcat-icon-item {
    display: grid; place-items: center;
    height: 34px; border-radius: 9px;
    cursor: pointer; transition: background .12s;
    color: var(--brand);
}
.tcat-icon-item:hover { background: rgba(232,96,28,.1); }

/* ══════════════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.tcat-hero {
    background: var(--brand);
    padding-top: max(18px, calc(env(safe-area-inset-top) + 14px));
    position: relative; overflow: hidden;
}
.tcat-hero::before {
    content: '';
    position: absolute; top: -60px; right: -50px;
    width: 210px; height: 210px; border-radius: 50%;
    background: rgba(255,255,255,.07); pointer-events: none;
}
.tcat-hero::after {
    content: '';
    position: absolute; bottom: -40px; left: -30px;
    width: 150px; height: 150px; border-radius: 50%;
    background: rgba(255,255,255,.05); pointer-events: none;
}
.tcat-hero-inner { position: relative; z-index: 1; padding: 0 20px 20px; }

/* topbar */
.tcat-topbar {
    display: flex; align-items: center;
    justify-content: space-between;
    min-height: 44px; gap: 10px;
}
.tcat-topbar-left { display: flex; align-items: center; gap: 10px; }
.tcat-topbar-title { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.tcat-icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    display: grid; place-items: center;
    color: rgba(255,255,255,.88);
    text-decoration: none; cursor: pointer;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tcat-icon-btn:hover  { background: rgba(255,255,255,.25); }
.tcat-icon-btn:active { transform: scale(.90); }

/* hero summary pills */
.tcat-hero-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 16px;
}
.tcat-hero-pill {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 8px 12px;
    flex: 1; min-width: 0;
}
.tcat-hero-pill-icon {
    width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 12px; flex-shrink: 0;
}
.tcat-hero-pill-lbl {
    font-size: 9.5px; font-weight: 700;
    color: rgba(255,255,255,.65);
    text-transform: uppercase; letter-spacing: .6px;
}
.tcat-hero-pill-val {
    font-size: 15px; font-weight: 900; color: #fff;
    letter-spacing: -.3px; font-variant-numeric: tabular-nums;
}

/* ── Category cards (mobile) ──────────────────────────────── */
.tcat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .15s;
}
.tcat-card:active { box-shadow: none; }
.tcat-card-top {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 12px; padding: 14px 14px 10px;
}
.tcat-card-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tcat-card-icon {
    width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; flex-shrink: 0;
    font-size: 16px;
}
.tcat-card-name {
    font-size: 13.5px; font-weight: 800; color: var(--t1);
    letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcat-card-sub { font-size: 11px; color: var(--t2); margin-top: 1px; }
.tcat-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tcat-type-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 100px;
    font-size: 10.5px; font-weight: 800;
    border: 1px solid currentColor; flex-shrink: 0;
}
.tcat-more-btn {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--surface2); border: 1px solid var(--border);
    display: grid; place-items: center; cursor: pointer;
    color: var(--t2); transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.tcat-more-btn:hover { border-color: var(--brand); color: var(--brand); }
.tcat-card-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
}
.tcat-stat-cell {
    padding: 10px 14px;
    border-right: 1px solid var(--border);
}
.tcat-stat-cell:last-child { border-right: none; }
.tcat-stat-lbl { font-size: 10px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .5px; }
.tcat-stat-val { font-size: 13.5px; font-weight: 800; color: var(--t1); margin-top: 1px; }

/* ── Filter tabs (mobile) ─────────────────────────────────── */
.tcat-filter-bar {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 0 0 2px; margin-bottom: 12px;
}
.tcat-filter-bar::-webkit-scrollbar { display: none; }
.tcat-filter-tab {
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
    padding: 6px 13px; border-radius: 100px;
    font-size: 11.5px; font-weight: 700;
    background: var(--surface); color: var(--t2);
    border: 1.5px solid var(--border);
    cursor: pointer; transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.tcat-filter-tab.active {
    background: var(--brand); color: #fff;
    border-color: var(--brand);
    box-shadow: 0 3px 10px rgba(232,96,28,.3);
}
.tcat-filter-tab.active-entrada   { background:#10B981;border-color:#10B981;color:#fff; }
.tcat-filter-tab.active-despesa    { background:#ef4444;border-color:#ef4444;color:#fff; }
.tcat-filter-tab.active-investimento { background:#8B5CF6;border-color:#8B5CF6;color:#fff; }

/* ── Bottom sheet ─────────────────────────────────────────── */
.tcat-sheet-btn {
    width: 100%; text-align: left;
    padding: 13px 18px; border-radius: 12px;
    font-size: 13px; font-weight: 700; color: var(--t1);
    background: none; border: none; cursor: pointer;
    transition: background .12s;
}
.tcat-sheet-btn:hover  { background: var(--surface2); }
.tcat-sheet-btn--red   { color: #ef4444; }
.tcat-sheet-btn--red:hover { background: rgba(239,68,68,.07); }

/* ── Form shared ──────────────────────────────────────────── */
.tcat-form-label {
    display: block; font-size: 10px; font-weight: 700;
    color: var(--t2); text-transform: uppercase;
    letter-spacing: .6px; margin-bottom: 5px;
}
.tcat-form-input {
    width: 100%;
    background: var(--surface2); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 10px 14px;
    font-size: 13px; color: var(--t1);
    outline: none; font-family: inherit; transition: border-color .15s;
}
.tcat-form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,96,28,.1); }
.tcat-form-input::placeholder { color: var(--t3); }

/* type toggle pills */
.tcat-type-toggle {
    display: flex; gap: 5px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 13px; padding: 4px;
}
.tcat-type-radio { display: none; }
.tcat-type-lbl {
    flex: 1; text-align: center;
    padding: 7px 10px; border-radius: 9px;
    font-size: 11.5px; font-weight: 700; color: var(--t2);
    cursor: pointer; transition: all .15s;
    user-select: none;
}
.tcat-type-radio:checked + .tcat-type-lbl {
    background: var(--surface); color: var(--t1);
    box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
#ctEnt:checked  + .tcat-type-lbl { color: #10B981; }
#ctDesp:checked + .tcat-type-lbl { color: #ef4444; }
#ctInv:checked  + .tcat-type-lbl { color: #8B5CF6; }

/* limit wrap */
.tcat-limit-wrap {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px;
}

/* submit + cancel buttons */
.tcat-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 100px;
    background: var(--brand); color: #fff;
    font-size: 12.5px; font-weight: 800;
    border: none; cursor: pointer;
    box-shadow: 0 3px 10px rgba(232,96,28,.3);
    transition: filter .15s;
}
.tcat-btn-primary:hover { filter: brightness(1.06); }
.tcat-btn-ghost {
    display: inline-flex; align-items: center;
    padding: 10px 18px; border-radius: 100px;
    background: var(--surface2); color: var(--t1);
    border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.tcat-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ══════════════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* ── Navbar ────────────────────────────────────────────── */
    .tcatd-navbar {
        position: sticky; top: 0; z-index: 100;
        background: var(--brand); height: 54px;
        display: flex; align-items: center;
        justify-content: space-between; padding: 0 28px;
        box-shadow: 0 1px 0 rgba(0,0,0,.1);
    }
    .tcatd-navbar-left  { display: flex; align-items: center; gap: 22px; }
    .tcatd-navbar-right { display: flex; align-items: center; gap: 10px; }
    .tcatd-logo { font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.5px; text-decoration: none; }
    .tcatd-logo span {
        display: inline-block; width: 26px; height: 26px;
        background: rgba(255,255,255,.22); border-radius: 8px;
        line-height: 26px; text-align: center; font-size: 14px; margin-right: 6px;
    }
    .tcatd-nav-link {
        font-size: 12.5px; font-weight: 700;
        color: rgba(255,255,255,.72);
        text-decoration: none; transition: color .15s; padding-bottom: 2px;
    }
    .tcatd-nav-link:hover { color: #fff; }
    .tcatd-nav-link.active { color: #fff; border-bottom: 2px solid rgba(255,255,255,.6); }
    .tcatd-cta-btn {
        display: inline-flex; align-items: center; gap: 6px;
        background: #fff; color: var(--brand);
        font-size: 12px; font-weight: 800;
        border: none; border-radius: 100px;
        padding: 7px 16px; cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        transition: transform .15s, box-shadow .15s; text-decoration: none;
    }
    .tcatd-cta-btn:hover { transform: scale(1.02); box-shadow: 0 4px 14px rgba(0,0,0,.2); }

    /* ── Summary strip ─────────────────────────────────────── */
    .tcatd-strip {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
    }
    .tcatd-strip-inner {
        max-width: 1380px; margin: 0 auto; padding: 0 28px;
        display: grid; grid-template-columns: repeat(3, 1fr);
    }
    .tcatd-strip-cell {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 0; border-right: 1px solid var(--border);
    }
    .tcatd-strip-cell:last-child { border-right: none; padding-left: 24px; }
    .tcatd-strip-cell:not(:first-child) { padding-left: 24px; }
    .tcatd-strip-icon {
        width: 36px; height: 36px; border-radius: 11px;
        display: grid; place-items: center; font-size: 14px; flex-shrink: 0;
    }
    .tcatd-strip-lbl  { font-size: 10.5px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .6px; }
    .tcatd-strip-val  { font-size: 16px; font-weight: 900; color: var(--t1); letter-spacing: -.4px; font-variant-numeric: tabular-nums; margin-top: 1px; }

    /* ── Container & grid ──────────────────────────────────── */
    .tcatd-container {
        max-width: 1380px; margin: 0 auto;
        padding: 24px 28px 60px;
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 20px; align-items: start;
    }

    /* ── Sidebar form ──────────────────────────────────────── */
    .tcatd-sidebar {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px; overflow: hidden;
        box-shadow: var(--shadow-sm);
        position: sticky; top: 78px;
    }
    .tcatd-sidebar-header {
        padding: 16px 18px; border-bottom: 1px solid var(--border);
        display: flex; align-items: center; gap: 8px;
    }
    .tcatd-sidebar-title { font-size: 13px; font-weight: 800; color: var(--t1); }
    .tcatd-sidebar-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

    /* ── Main table ────────────────────────────────────────── */
    .tcatd-main-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 14px;
    }
    .tcatd-main-title { font-size: 18px; font-weight: 900; color: var(--t1); letter-spacing: -.4px; }
    .tcatd-main-count { font-size: 11.5px; font-weight: 700; color: var(--t2); margin-top: 2px; }

    /* filter tabs (desktop) */
    .tcatd-filter-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .tcatd-filter-tab {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 6px 14px; border-radius: 100px;
        font-size: 11.5px; font-weight: 700;
        background: var(--surface); color: var(--t2);
        border: 1.5px solid var(--border);
        cursor: pointer; transition: all .15s;
    }
    .tcatd-filter-tab.active { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 10px rgba(232,96,28,.3); }
    .tcatd-filter-tab.active-entrada   { background:#10B981;border-color:#10B981;color:#fff; }
    .tcatd-filter-tab.active-despesa    { background:#ef4444;border-color:#ef4444;color:#fff; }
    .tcatd-filter-tab.active-investimento { background:#8B5CF6;border-color:#8B5CF6;color:#fff; }

    .tcatd-table {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 18px; overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .tcatd-table-head {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1fr 1fr 90px;
        padding: 10px 18px;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
    }
    .tcatd-th {
        font-size: 10px; font-weight: 800;
        color: var(--t3); text-transform: uppercase; letter-spacing: .7px;
    }
    .tcatd-table-row {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1fr 1fr 90px;
        padding: 13px 18px;
        border-bottom: 1px solid var(--border);
        align-items: center;
        transition: background .12s; cursor: default;
    }
    .tcatd-table-row:last-child { border-bottom: none; }
    .tcatd-table-row:hover { background: var(--surface2); }

    .tcatd-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .tcatd-row-icon {
        width: 36px; height: 36px; border-radius: 10px;
        display: grid; place-items: center; font-size: 13px; flex-shrink: 0;
    }
    .tcatd-row-title { font-size: 13px; font-weight: 700; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tcatd-row-text  { font-size: 12.5px; font-weight: 600; color: var(--t2); }
    .tcatd-row-pill {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 9px; border-radius: 100px;
        font-size: 10.5px; font-weight: 800;
        border: 1px solid currentColor;
    }
    .tcatd-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
    .tcatd-action-btn {
        width: 28px; height: 28px; border-radius: 8px;
        background: var(--surface2); border: 1px solid var(--border);
        display: grid; place-items: center; cursor: pointer;
        color: var(--t2); font-size: 10px; transition: all .12s;
    }
    .tcatd-action-btn:hover { border-color: var(--brand); color: var(--brand); background: rgba(232,96,28,.06); }
    .tcatd-action-btn--red:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

    .tcatd-empty {
        padding: 60px 20px; text-align: center; color: var(--t2);
    }
}