@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800&display=swap');

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg:              #f1f4f9;
            --surface:         #ffffff;
            --surface-2:       #f8fafc;
            --surface-3:       #f1f5f9;
            --border:          rgba(15,23,42,0.08);
            --border-strong:   rgba(15,23,42,0.13);
            --text:            #0f172a;
            --text-muted:      #64748b;
            --text-faint:      #94a3b8;
            --accent:          #2563eb;
            --accent-hover:    #1d4ed8;
            --accent-light:    #eff6ff;
            --accent-text:     #1e40af;
            --shadow-sm:       0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
            --shadow-md:       0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
            --shadow-lg:       0 20px 48px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
            --radius-sm:       6px;
            --radius-md:       10px;
            --radius-lg:       14px;
            --radius-xl:       20px;
            --font:            'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --ease:            cubic-bezier(0.16,1,0.3,1);
            --transition:      160ms var(--ease);
        }

        html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
            min-height: 100vh;
            padding: 20px;
        }
        @keyframes fadeIn   { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        @keyframes slideDown{ from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
        @keyframes spin     { to { transform:rotate(360deg); } }
        @keyframes shimmer  { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
        @keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(0.6);opacity:0.45;} }
        @keyframes livePulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

        /* ── Container ── */
        .dashboard-container {
            max-width: 1540px;
            margin: 0 auto;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            animation: fadeIn 0.4s var(--ease) both;
        }

        /* ── Header ── */
        .dashboard-header {
            background: #0f172a;
            color: #fff;
            padding: 22px 32px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            animation: slideDown 0.4s var(--ease) both;
        }
        .dashboard-header-left { display:flex; align-items:center; gap:14px; }
        .header-logo {
            width:42px; height:42px; border-radius:11px;
            background: linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
            display:flex; align-items:center; justify-content:center;
            font-size:20px; flex-shrink:0;
            box-shadow: 0 4px 12px rgba(99,102,241,0.4);
        }
        .dashboard-header h1 { font-size:17px; font-weight:700; letter-spacing:-0.3px; }
        .dashboard-header p  { font-size:12px; color:rgba(255,255,255,0.45); margin-top:2px; font-weight:500; }
        .header-badge {
            display:inline-flex; align-items:center; gap:7px;
            background:rgba(255,255,255,0.07);
            border:1px solid rgba(255,255,255,0.11);
            padding:5px 12px; border-radius:999px;
            font-size:11px; font-weight:600; color:rgba(255,255,255,0.65);
        }
        .live-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:livePulse 2s ease-in-out infinite; }

        /* ── Nav ── */
        .main-nav {
            display: flex;
            background: var(--surface-2);
            border-bottom: 1px solid var(--border);
            padding: 0 28px;
            gap: 0;
            overflow-x: auto;
        }
        .main-nav::-webkit-scrollbar { display:none; }
        .nav-btn {
            padding: 14px 22px;
            font-size: 13px;
            font-weight: 600;
            font-family: var(--font);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            color: var(--text-muted);
            transition: color var(--transition), border-color var(--transition);
            white-space: nowrap;
            position: relative;
        }
        .nav-btn:hover { color: var(--text); }
        .nav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
        .nav-btn.stale::after {
            content:''; position:absolute; top:11px; right:9px;
            width:6px; height:6px; border-radius:50%; background:#f59e0b;
        }

        /* ── Filter Bar ── */
        .filter-bar {
            display: flex;
            gap: 14px;
            padding: 14px 28px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            align-items: flex-end;
            flex-wrap: wrap;
        }
        .filter-group { display:flex; flex-direction:column; gap:5px; }
        .filter-group label {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-faint);
            text-transform: uppercase;
            letter-spacing: 0.7px;
        }
        .filter-input, .filter-select {
            padding: 8px 32px 8px 12px;
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-family: var(--font);
            font-weight: 500;
            background: var(--surface-2);
            color: var(--text);
            cursor: pointer;
            transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
            appearance: none;
            -webkit-appearance: none;
            min-width: 180px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }
        .filter-select:hover, .filter-input:hover { border-color: rgba(37,99,235,0.4); background: var(--surface); }
        .filter-select:focus, .filter-input:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--surface);
            box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
        }
        #entityFilter { min-width: 260px; max-width: 380px; width: 100%; }
        .entity-filter-group { flex: 0 0 auto; }
        .entity-select-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .entity-select-icon {
            position: absolute;
            left: 12px;
            color: var(--text-faint);
            pointer-events: none;
            z-index: 1;
            flex-shrink: 0;
        }
        .entity-select {
            padding-left: 34px !important;
            min-width: 260px;
            max-width: 380px;
            width: 100%;
            font-weight: 600 !important;
            color: var(--text) !important;
            background-color: var(--surface) !important;
            border-color: var(--border-strong) !important;
            height: 38px;
        }
        .entity-select:hover {
            border-color: var(--accent) !important;
            background: var(--surface) !important;
        }
        .entity-select:focus {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.13) !important;
        }
        /* Selected non-all entity: highlight */
        .entity-select.has-selection {
            border-color: var(--accent) !important;
            background: var(--accent-light) !important;
            color: var(--accent-text) !important;
        }

        /* ── Panel ── */
        .dashboard-panel { display:none; padding:28px 32px; }
        .dashboard-panel.active { display:block; animation:fadeIn 0.25s var(--ease) both; }
        .panel-loading-soft { opacity:0.6; pointer-events:none; transition:opacity 0.25s ease; }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 22px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            gap: 12px;
        }
        .panel-header h2 { font-size:15px; font-weight:700; color:var(--text); letter-spacing:-0.2px; }
        .panel-header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

        .panel-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 12px;
            border-radius: 999px;
            background: var(--accent-light);
            color: var(--accent-text);
            font-size: 11.5px;
            font-weight: 600;
            border: 1px solid rgba(37,99,235,0.14);
        }
        .panel-status .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulseDot 1s ease-in-out infinite; }
        .panel-status.hidden { display:none; }

        /* ── Refresh button ── */
        .btn-refresh {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 14px;
            background: var(--surface-2);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 12.5px;
            font-family: var(--font);
            font-weight: 600;
            color: var(--text-muted);
            transition: all var(--transition);
        }
        .btn-refresh:hover { background:var(--surface-3); color:var(--text); border-color:rgba(37,99,235,0.4); }
        .btn-refresh.spinning span { display:inline-block; animation:spin 0.7s linear infinite; }

        /* ── KPI Cards ── */
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 16px;
            margin-bottom: 28px;
        }
        .kpi-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px 22px;
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition), box-shadow var(--transition);
            position: relative;
            overflow: hidden;
        }
        .kpi-card::before {
            content:'';
            position:absolute; top:0; left:0; right:0; height:3px;
            background: var(--kpi-accent, var(--accent));
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        .kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
        .kpi-card:nth-child(1)  { --kpi-accent:#3b82f6; }
        .kpi-card:nth-child(2)  { --kpi-accent:#8b5cf6; }
        .kpi-card:nth-child(3)  { --kpi-accent:#10b981; }
        .kpi-card:nth-child(4)  { --kpi-accent:#f59e0b; }
        .kpi-card:nth-child(5)  { --kpi-accent:#ef4444; }
        .kpi-card:nth-child(6)  { --kpi-accent:#06b6d4; }
        .kpi-card:nth-child(7)  { --kpi-accent:#ec4899; }
        .kpi-card:nth-child(8)  { --kpi-accent:#22c55e; }
        .kpi-card .kpi-label {
            font-size: 10.5px; font-weight:700; color:var(--text-faint);
            text-transform:uppercase; letter-spacing:0.65px; margin-bottom:10px;
        }
        .kpi-card .kpi-value {
            font-size: 34px; font-weight:800; color:var(--text);
            letter-spacing:-1.5px; line-height:1;
            font-variant-numeric: tabular-nums lining-nums;
            transition: opacity 0.3s ease;
        }
        .kpi-card .kpi-sub { font-size:12px; color:var(--text-muted); margin-top:8px; font-weight:500; }
        .kpi-sub-row { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
        .kpi-sub-row .kpi-sub-label { font-size:10px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.6px; display:block; margin-bottom:4px; }
        .kpi-sub-row .kpi-sub-value { font-size:22px; font-weight:700; color:var(--kpi-accent, var(--accent)); font-variant-numeric:tabular-nums; display:block; letter-spacing:-0.5px; }

        /* ── Skeleton ── */
        .skeleton { background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite; border-color:transparent !important; box-shadow:none !important; }
        .skeleton::before { display:none; }
        .skeleton .kpi-label,.skeleton .kpi-value { color:transparent; }

        /* ── Charts ── */
        .charts-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px,1fr)); gap:20px; margin-bottom:28px; }
        .chart-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 22px 24px;
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--transition);
        }
        .chart-card:hover { box-shadow:var(--shadow-md); }
        .chart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
        .chart-header h3 { font-size:13px; font-weight:700; color:var(--text); letter-spacing:-0.1px; }
        .chart-select {
            padding: 5px 26px 5px 10px;
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-family: var(--font);
            font-weight: 600;
            background: var(--surface-2);
            color: var(--text-muted);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            transition: border-color var(--transition), box-shadow var(--transition);
        }
        .chart-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.10); }
        .chart-canvas { max-height: 280px; }

        /* ── Recent table filters ── */
        .recent-filters {
            display: flex;
            gap: 10px;
            padding: 14px 20px;
            background: var(--surface-2);
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            align-items: flex-end;
        }
        .recent-filters .filter-group { flex:1; min-width:130px; max-width:190px; }
        .recent-filters .filter-select, .recent-filters .filter-input { min-width:unset; width:100%; }

        /* ── Table ── */
        .table-wrapper { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
        .table-meta { display:flex; justify-content:space-between; align-items:center; padding:13px 20px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; background:var(--surface-2); }
        .table-meta h3 { font-size:13px; font-weight:700; color:var(--text); }
        .record-count { font-size:12px; color:var(--text-muted); font-weight:600; background:var(--surface-3); padding:3px 10px; border-radius:999px; border:1px solid var(--border); }
        .data-table { width:100%; border-collapse:collapse; font-size:12.5px; }
        .data-table thead tr { background:var(--surface-2); border-bottom:1px solid var(--border-strong); }
        .data-table th { padding:10px 14px; text-align:left; font-size:10.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
        .data-table td { padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); font-variant-numeric:tabular-nums; }
        .data-table tr:last-child td { border-bottom:none; }
        .data-table tbody tr { transition:background var(--transition); }
        .data-table tbody tr:hover { background:var(--surface-2); }

        /* ── Badges ── */
        .badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
        .badge-form1 { background:#eff6ff; color:#1d4ed8; }
        .badge-form2 { background:#f0fdf4; color:#15803d; }
        .badge-pending { background:#fffbeb; color:#b45309; }
        .badge-complete { background:#f0fdf4; color:#15803d; }
        .badge-default { background:var(--surface-3); color:var(--text-muted); }

        /* ── Pagination ── */
        .pagination { display:flex; justify-content:center; align-items:center; gap:8px; padding:16px; border-top:1px solid var(--border); }
        .page-btn { padding:6px 14px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-muted); font-size:12px; font-weight:600; font-family:var(--font); cursor:pointer; transition:all var(--transition); }
        .page-btn:hover:not(:disabled) { background:var(--accent); color:white; border-color:var(--accent); }
        .page-btn:disabled { opacity:0.35; cursor:not-allowed; }
        .page-info { font-size:12px; color:var(--text-muted); font-weight:600; padding:0 8px; }

        /* ── Error ── */
        .error-message { background:#fef2f2; color:#dc2626; border:1px solid rgba(220,38,38,0.18); border-radius:var(--radius-md); padding:12px 16px; font-size:13px; font-weight:600; margin-bottom:20px; }

        /* ── Buttons (recent panel apply/clear) ── */
        .btn { padding:8px 18px; border:none; border-radius:var(--radius-sm); font-weight:600; font-family:var(--font); cursor:pointer; font-size:13px; transition:all var(--transition); }
        .btn-primary { background:var(--accent); color:white; }
        .btn-primary:hover { background:var(--accent-hover); }
        .btn-secondary { background:var(--surface-3); color:var(--text-muted); border:1px solid var(--border-strong); }
        .btn-secondary:hover { background:var(--surface-2); color:var(--text); }

        /* ── Loading Modal ── */
        .loading-modal { display:none; position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; }
        .loading-modal.show { display:flex; animation:fadeIn 0.2s ease; }
        .loading-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 44px; text-align:center; box-shadow:var(--shadow-lg); min-width:300px; }
        .loading-spinner { width:36px; height:36px; border:3px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:spin 0.75s linear infinite; margin:0 auto 18px; }
        .loading-box h3 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
        .loading-box p  { font-size:13px; color:var(--text-muted); max-width:260px; line-height:1.6; }

        /* ── Toast ── */
        #toast { position:fixed; bottom:24px; right:24px; background:#0f172a; color:white; padding:10px 18px; border-radius:var(--radius-md); font-size:13px; font-weight:600; opacity:0; transition:opacity 0.3s ease; pointer-events:none; z-index:10000; box-shadow:var(--shadow-lg); max-width:320px; }
        #toast.show { opacity:1; }

        /* ── Responsive ── */
        @media (max-width:768px) {
            body { padding:10px; }
            .dashboard-header { padding:18px 20px; }
            .dashboard-panel { padding:16px 18px; }
            .filter-bar { padding:12px 16px; }
            .main-nav { padding:0 12px; }
            .charts-grid { grid-template-columns:1fr; }
            .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
            #entityFilter { min-width:180px; max-width:100%; }
        }