:root {
            --primary-color: #0f4c81;
            --primary-dark: #0b3c66;
            --secondary-color: #f59e0b;
            --bg-color: #f3f6fb;
            --surface-soft: #f8fbff;
            --text-color: #1f2937;
            --text-muted: #6b7280;
            --header-height: 70px;
            --success: #15803d;
            --danger: #b91c1c;
            --warning: #d97706;
            --info: #0e7490;
            --white: #ffffff;
            --gray-light: #e5e7eb;
            --shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
            --shadow-soft: 0 6px 18px rgba(16, 24, 40, 0.06);
            --radius: 14px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Sora', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body {
            background:
                radial-gradient(circle at 10% 10%, #e6eef9 0%, transparent 35%),
                radial-gradient(circle at 90% 15%, #f8ecd3 0%, transparent 28%),
                var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            overflow: auto;
            display: flex;
            flex-direction: column;
        }

        .hidden { display: none !important; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .gap-2 { gap: 0.5rem; }
        .gap-4 { gap: 1rem; }
        .mt-4 { margin-top: 1rem; }
        .mb-4 { margin-bottom: 1rem; }
        .p-4 { padding: 1rem; }
        .text-center { text-align: center; }
        .w-full { width: 100%; }
        .text-muted { color: var(--text-muted); }
        .no-print { display: block; }
        
        .card {
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            padding: 1.5rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow-soft);
            margin-bottom: 1rem;
            border: 1px solid #e7eef8;
        }
        .border-bottom { border-bottom: 1px solid #e6edf6; padding-bottom: 1rem; margin-bottom: 1rem; }
        .border-top { border-top: 1px solid #e6edf6; }

        .btn {
            position: relative;
            overflow: hidden;
            padding: 0.65rem 1.4rem;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 700;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.95rem;
        }
        .btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
            transform: translateX(-110%);
            transition: transform 0.32s ease;
            pointer-events: none;
        }
        .btn:hover::before {
            transform: translateX(0);
        }
        .btn:hover {
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 16px 28px rgba(15, 76, 129, 0.18);
        }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-primary:hover { background-color: var(--primary-dark); }
        .btn-secondary { background-color: var(--secondary-color); color: white; }
        .btn-secondary:hover { background-color: #d97706; }
        .btn-danger { background-color: var(--danger); color: white; }
        .btn-danger:hover { background-color: #b02a37; }
        .btn-success { background-color: var(--success); color: white; }
        .btn-info { background-color: var(--info); color: white; }
        .btn-info:hover { background-color: #138496; }
        .btn-outline { background: #f1f7ff; border: 1px solid #bdd4f0; color: var(--primary-color); }
        .btn-outline:hover { background: var(--primary-color); color: white; }
        .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
        .btn:disabled { opacity: 0.55; cursor: not-allowed; background-color: #cbd5e1; color: #fff; }

        input, select, textarea {
            width: 100%;
            padding: 0.65rem 0.75rem;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            margin-bottom: 0.5rem;
            font-size: 0.94rem;
            background: #ffffff;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        input:focus, select:focus {
            outline: none;
            border-color: #7aa8db;
            box-shadow: 0 0 0 4px rgba(24, 119, 242, 0.12);
        }
        label { font-weight: 600; margin-bottom: 0.2rem; display: block; font-size: 0.84rem; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; }

        #login-page { position: fixed; inset: 0; background: radial-gradient(circle at top left, rgba(59,130,246,0.28), transparent 22%), radial-gradient(circle at bottom right, rgba(249,115,22,0.20), transparent 26%), linear-gradient(135deg, #0f4c81 0%, #0b3c66 48%, #071b33 100%); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem 1.5rem; overflow: auto; }
        .login-card { background: rgba(255,255,255,0.94); width: 100%; max-width: 960px; padding: 1.9rem 1.8rem 1.5rem; border-radius: 28px; box-shadow: 0 30px 90px rgba(5, 31, 70, 0.24); text-align: left; border: 1px solid rgba(255,255,255,0.7); backdrop-filter: blur(18px); display:flex; align-items:flex-start; justify-content:center; margin-top: 0; }
        .login-card-layout { display:flex; gap: 2rem; width:100%; flex-wrap: wrap; align-items:flex-start; }
        .login-card-panel { flex:1; min-width: 260px; }
        .login-card-panel.info-panel { max-width: 300px; display:flex; flex-direction:column; gap:1rem; align-items:center; }
        .logo-panel { width:100%; display:flex; justify-content:center; padding-bottom: 0.75rem; }
        .login-card-panel.form-panel { min-width: 320px; display:flex; flex-direction:column; justify-content:flex-start; }
        .form-card { position: relative; display:flex; flex-direction:column; justify-content:flex-start; margin-top: 0; }
        .login-card-panel.form-panel #login-form,
        .login-card-panel.form-panel #register-form { width:100%; }
        .login-brand { text-align:left; }
        .brand-title { font-weight:800; color:var(--primary-color); font-size:1.4rem; }
        .brand-subtitle { font-size:0.95rem; color:#475569; margin-top:0.5rem; }
        .login-info-grid { margin-bottom: 1.6rem; }
        .login-notice { display:flex; align-items:flex-start; gap:10px; }
        .notice-content { flex:1; background:linear-gradient(90deg,#fff7ed,#fff3e0); border-left:4px solid var(--warning); padding:10px 12px; border-radius:8px; }
        .notice-content strong { display:block; color:#92400e; margin-bottom:6px; }
        .btn-small { padding: 0.55rem 0.95rem; font-size: 0.85rem; }

        .form-card { position: relative; margin-top: 0; }
        .form-pane { opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; }
        .active-pane { opacity: 1; transform: translateY(0); }
        .hidden-pane { position: absolute; inset: 0; pointer-events: none; }
        .icon-placeholder { display:flex; justify-content:center; color:var(--secondary-color); margin-bottom:18px; }
        .hint-box { background:#f0f0f0; font-size:0.8rem; text-align:left; border-radius:4px; }
        .switch-panel { border-top:1px solid #e0e0e0; padding-top:16px; }
        .switch-panel p { font-size:0.92rem; margin-bottom:10px; color:#475569; }
        .form-footer { margin-top:1.6rem; font-size:0.8rem; color:#888; text-align:center; }
        .error-box { background:#fee; color:#c33; border-radius:4px; font-size:0.9rem; }

        @media (max-width: 900px) {
            #login-page { padding: 1.5rem; }
            .login-card { padding: 2.2rem 1.8rem; }
        }

        @media (max-width: 780px) {
            #login-page { align-items: flex-start; justify-content: center; padding: 1rem 0.9rem; }
            .login-card { flex-direction: column; margin-top: 0; padding: 1.6rem 1.2rem; border-radius: 22px; max-width: 100%; }
            .login-card-panel { max-width: 100%; }
            .login-card .login-logo { width: 120px; height: 120px; margin-bottom: 16px; }
        .login-card-panel.form-panel .login-header { margin-top: 0; }
            .login-header h2 { font-size: 1.7rem; }
            .login-header p { font-size: 0.92rem; }
            .login-info-grid { grid-template-columns: 1fr; gap: 0.75rem; }
            .login-info-grid .info-item { font-size: 0.84rem; padding: 0.8rem 0.9rem; min-height: auto; }
            .login-notice { font-size: 0.9rem; padding: 0.85rem 0.95rem; }
            .login-form-field label { font-size: 0.78rem; letter-spacing: 0.04em; }
            input, select, textarea { border-radius: 14px; font-size: 0.94rem; }
            .btn { width: 100%; }
            .login-footer-note { font-size: 0.82rem; }
            .login-card { max-height: none; overflow-y: visible; }
        }

        @media (orientation: portrait) and (max-width: 800px) {
            #login-page { align-items: flex-start; padding-top: 0.8rem; padding-bottom: 0.8rem; }
            .login-card { margin-top: 0.8rem; padding: 1.4rem 1rem; }
            .login-info-grid { display: none; }
            .login-notice { margin-top: 1rem; }
        }
        
        @media (max-height: 700px) {
            .login-card { max-height: calc(100vh - 1.5rem); overflow-y: auto; }
            .login-card-panel.info-panel { display: none; }
            .login-card-panel.form-panel { max-width: 100%; }
        }
        .login-header h2 { color: var(--primary-color); margin-bottom: 0.5rem; font-size: 2rem; letter-spacing: 0.02em; }
        .login-header p { color: #475569; margin-bottom: 1.5rem; font-size: 0.95rem; }
        .login-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1.6rem; }
        .login-info-grid .info-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-height: 96px; padding: 0.95rem 1rem; border-radius: 16px; background: #f8fbff; border: 1px solid rgba(103, 128, 255, 0.12); color: #334155; text-align: left; font-size: 0.88rem; line-height: 1.4; word-wrap: break-word; word-break: break-word; }
        .login-info-grid .info-item i { font-size: 1.1rem; color: var(--secondary-color); }
        .login-brand { margin-bottom: 18px; }
        .login-brand div { margin: 0 auto; max-width: 320px; }
        .login-brand span { display: block; color: #475569; font-size: 0.95rem; margin-top: 0.5rem; }
        .login-notice { text-align: left; padding: 1rem 1.1rem; border-radius: 16px; margin-top: 1rem; background: rgba(253, 242, 233, 0.95); border: 1px solid rgba(245, 158, 11, 0.18); }
        .login-notice strong { color: #92400e; display:block; margin-bottom:8px; font-size:1rem; }
        #report-deadline-notice { margin-bottom: 18px; }
        #btn-dismiss-report-notice { border-radius: 12px; padding: 0.55rem 1rem; height:42px; font-size:0.88rem; }
        .login-logo { width:180px; height:180px; object-fit:contain; display:block; margin:0 auto 24px auto; padding: 16px; border: 1px solid rgba(15, 76, 129, 0.18); border-radius: 22px; background: rgba(255,255,255,0.96); box-shadow: 0 18px 50px rgba(15, 76, 129, 0.16); }
.login-icon i { display: inline-flex; width: 100%; justify-content: center; color: var(--secondary-color); margin-bottom: 22px; }
.login-form-field { margin-bottom: 1rem; }
input, select, textarea { width: 100%; padding: 1rem 1rem; border: 1px solid rgba(148, 163, 184, 0.5); border-radius: 16px; margin-bottom: 0.9rem; font-size: 1rem; background: rgba(255,255,255,0.9); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
input:focus, select:focus { outline: none; border-color: rgba(59,130,246,0.85); box-shadow: 0 0 0 6px rgba(59,130,246,0.14); transform: translateY(-1px); }
.btn-primary { padding: 0.95rem 1.35rem; font-size: 1rem; border-radius: 14px; box-shadow: 0 14px 28px rgba(15, 76, 129, 0.15); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-secondary { padding: 0.95rem 1.35rem; font-size: 1rem; border-radius: 14px; box-shadow: 0 14px 28px rgba(245, 158, 11, 0.14); }
.btn-secondary:hover { transform: translateY(-1px); }
        header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2rem; min-height: 70px; }
        .header-brand { max-width: 65%; }
        .header-brand h1 { font-size: 1.1rem; margin-bottom: 0.25rem; line-height: 1.2; }
        .header-brand small { color: #64748b; font-size: 0.8rem; display: block; }
        .user-profile { display: flex; align-items: center; gap: 0.9rem; }
        .user-profile .text-right { text-align: right; line-height: 1.1; }
        .user-profile .text-right strong { display: block; font-size: 0.95rem; color: #102a43; }
        .user-profile .text-right small { color: #475569; font-size: 0.78rem; display: block; }
        .user-avatar { width: 44px; height: 44px; background: linear-gradient(160deg, #f59e0b, #d97706); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; box-shadow: 0 6px 15px rgba(217, 119, 6, 0.35); }
        #btn-logout { white-space: nowrap; }

        nav { background: linear-gradient(90deg, #0f4c81, #1a5f99); padding: 0 1rem; flex-shrink: 0; position: relative; z-index: 20; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); }
        .nav-tabs { display: flex; list-style: none; overflow-x: auto; }
        .nav-item { margin-right: 0.5rem; white-space: nowrap; }
        .nav-link { color: rgba(255,255,255,0.84); text-decoration: none; display: flex; align-items: center; padding: 1rem 1.5rem; height: 100%; border-bottom: 3px solid transparent; font-weight: 500; cursor: pointer; transition: 0.25s; font-size: 0.9rem; position: relative; z-index: 21; }
        .nav-link:hover { color: white; background: rgba(255,255,255,0.1); }
        .nav-link.active { color: white; border-bottom-color: var(--secondary-color); background: rgba(255,255,255,0.16); }

        main { flex: 1; overflow-y: auto; padding: 2rem; position: relative; background: transparent; }
        .section-view { display: none; animation: fadeIn 0.3s ease; }
        .section-view.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .executive-hero {
            background: linear-gradient(135deg, #0f4c81 0%, #1d6faf 60%, #2a8ac7 100%);
            color: #ffffff;
            border-radius: 16px;
            padding: 1.2rem 1.3rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            box-shadow: var(--shadow);
        }

        .executive-hero h2 {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }

        .executive-hero p {
            opacity: 0.9;
            font-size: 0.88rem;
        }

        .hero-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .dashboard-filter-panel {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid #dce8f7;
            border-radius: 14px;
            padding: 0.9rem 1rem;
            box-shadow: var(--shadow-soft);
            margin-bottom: 1rem;
        }

        .dashboard-filter-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.8rem;
        }

        .dashboard-filter-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 0.8rem;
            justify-content: flex-end;
        }

        .executive-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 0.9rem;
            margin-bottom: 1rem;
        }

        .executive-kpi-card {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid #dce8f7;
            border-radius: 14px;
            padding: 0.9rem 1rem;
            box-shadow: var(--shadow-soft);
        }

        .executive-kpi-card span {
            display: block;
            font-size: 0.73rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #64748b;
            margin-bottom: 6px;
        }

        .executive-kpi-card strong {
            font-size: 1.35rem;
            color: #0f4c81;
        }

        .executive-insight-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .insight-card {
            background: #ffffff;
            border: 1px solid #e3edf9;
            border-radius: 14px;
            padding: 1rem;
            box-shadow: var(--shadow-soft);
        }

        .insight-span-2 {
            grid-column: span 2;
        }

        .insight-card h4 {
            color: #0f4c81;
            margin-bottom: 0.8rem;
            font-size: 0.95rem;
        }

        .insight-list {
            display: grid;
            gap: 0.55rem;
        }

        .insight-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.86rem;
            border-bottom: 1px dashed #dbe6f5;
            padding-bottom: 6px;
            gap: 0.6rem;
        }

        .insight-list-item .item-label {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            min-width: 0;
            flex: 1;
        }

        .insight-list-item .item-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            flex-shrink: 0;
            background: #cbd5e1;
        }

        .insight-list-item .item-dot.reported {
            background: #16a34a;
        }

        .insight-list-item .item-dot.pending {
            background: #f59e0b;
        }

        .insight-list-item .item-meta {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
        }

        .insight-list-item .item-status {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 2px 6px;
            border-radius: 999px;
            background: #e2e8f0;
            color: #475569;
        }

        .insight-list-item .item-status.reported {
            background: #dcfce7;
            color: #166534;
        }

        .insight-list-item .item-status.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .insight-list-item .item-value {
            font-weight: 700;
            white-space: nowrap;
        }

        .insight-list-item .item-value.reported {
            color: #15803d;
        }

        .insight-list-item .item-value.pending {
            color: #b45309;
        }

        .insight-list-item.item-anom { background: linear-gradient(90deg, rgba(249,115,22,0.03), rgba(255,255,255,0)); }
        .insight-list-item.item-anom .item-value { color: var(--danger); }

        .insight-list-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .trend-bars {
            display: grid;
            gap: 0.6rem;
        }

        .trend-row {
            display: grid;
            grid-template-columns: 72px 1fr 90px;
            gap: 0.6rem;
            align-items: center;
            font-size: 0.82rem;
        }

        .trend-track {
            height: 10px;
            border-radius: 999px;
            background: #e5edf7;
            overflow: hidden;
        }

        .trend-fill {
            height: 100%;
            background: linear-gradient(90deg, #1d6faf, #f59e0b);
            border-radius: 999px;
        }

        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .dashboard-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
            border: 1px solid #dbe7f5;
            border-radius: 12px;
            padding: 0.8rem 1rem;
            margin-bottom: 1rem;
            box-shadow: var(--shadow-soft);
        }

        .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #334155;
            font-size: 0.86rem;
        }

        .dashboard-meta-actions {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .meta-label {
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #64748b;
            font-weight: 700;
            font-size: 0.72rem;
        }

        .connection-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.05em;
        }

        .connection-online {
            background: #ecfdf3;
            color: #166534;
            border-color: #86efac;
        }

        .connection-loading {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #93c5fd;
        }

        .connection-slow {
            background: #fff7ed;
            color: #9a3412;
            border-color: #fdba74;
        }

        .connection-error {
            background: #fef2f2;
            color: #991b1b;
            border-color: #fca5a5;
        }

        .connection-idle {
            background: #f8fafc;
            color: #334155;
            border-color: #cbd5e1;
        }

        .recovery-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 3px 10px;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            border: 1px solid #86efac;
            background: #dcfce7;
            color: #166534;
            animation: recoveryPop 0.25s ease;
        }

        @keyframes recoveryPop {
            from { transform: scale(0.93); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .stat-card { display: flex; align-items: center; padding: 1.5rem; border-radius: 8px; color: white; box-shadow: var(--shadow); position: relative; overflow: hidden; }
        .stat-card::after { content:''; position: absolute; right: -10px; bottom: -10px; width: 80px; height: 80px; background: rgba(255,255,255,0.1); border-radius: 50%; }
        .stat-card.blue { background: linear-gradient(45deg, #0056b3, #007bff); }
        .stat-card.green { background: linear-gradient(45deg, #28a745, #20c997); }
        .stat-card.orange { background: linear-gradient(45deg, #ff9800, #ffc107); }
        .stat-card.purple { background: linear-gradient(45deg, #6f42c1, #e83e8c); }
        .stat-icon { font-size: 2.5rem; opacity: 0.9; margin-right: 1.5rem; width: 50px; text-align: center; }
        .stat-info h3 { font-size: 2rem; margin-bottom: 0; line-height: 1; }
        .stat-info p { font-size: 0.9rem; opacity: 0.9; margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }
        .stat-info h3 { transition: transform 0.3s ease, opacity 0.3s ease; }
        .stat-info h3.stat-pop { transform: translateY(-1px) scale(1.015); opacity: 0.98; }

        .stat-value-loading {
            color: transparent !important;
            border-radius: 10px;
            min-width: 72px;
            min-height: 32px;
            display: inline-block;
            background: linear-gradient(90deg, rgba(255,255,255,0.16) 20%, rgba(255,255,255,0.36) 50%, rgba(255,255,255,0.16) 80%);
            background-size: 250% 100%;
            animation: skeletonShift 1.2s ease-in-out infinite;
        }

        .search-panel { background: linear-gradient(180deg, #ffffff 0%, #fafdff 100%); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: 1.5rem; border: 1px solid #e4edf9; }
        .search-panel h4 { margin-bottom: 1rem; color: var(--primary-color); border-bottom: 1px solid #e7edf7; padding-bottom: 0.7rem; }
        .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
        .action-bar { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee; align-items: center; justify-content: space-between; }
        .toolbar-group { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
        .toolbar-group .btn { min-width: 140px; }
        .toolbar-note {
            padding: 0.85rem 1rem;
            background: #f0f7ff;
            border-left: 4px solid #2196f3;
            border-radius: 8px;
            font-size: 0.92rem;
            color: #1f2937;
            line-height: 1.45;
            max-width: 100%;
            flex: 1 1 100%;
        }
        .toolbar-note i { color: #0f63c0; margin-right: 0.35rem; }
        .toolbar-note strong { font-weight: 700; }
        @media (max-width: 980px) {
            .action-bar { flex-direction: column; align-items: stretch; }
            .toolbar-group { justify-content: flex-start; width: 100%; }
        }

        .table-container { background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; margin-bottom: 1.5rem; border: 1px solid #e7eef8; }
        .table-responsive { overflow-x: auto; width: 100%; }
        table { width: 100%; border-collapse: collapse; min-width: 1200px; }
        .thead { background: #f8f9fa; border-bottom: 2px solid #dee2e6; }
        th, td { padding: 0.8rem 1rem; text-align: left; font-size: 0.9rem; border-bottom: 1px solid #edf2f7; white-space: nowrap; }
        th { font-weight: 700; color: #334155; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; background: #f6f9fe; position: sticky; top: 0; z-index: 1; }
        tr:hover { background-color: var(--surface-soft); }
        .action-buttons { display: flex; gap: 5px; }
        
        .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
        .user-card, .pt-card { background: white; padding: 1.5rem; border-radius: 8px; border-left: 5px solid var(--primary-color); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
        .pt-card { border-left-color: var(--secondary-color); }
        .card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
        .card-avatar { width: 50px; height: 50px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #666; }
        .card-body small { color: #777; display: block; margin-bottom: 0.2rem; }
        .card-actions { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: flex-end; }

        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .modal { background: white; padding: 1.5rem; border-radius: 18px; width: 100%; max-width: 760px; box-shadow: 0 20px 45px rgba(0,0,0,0.25); animation: slideDown 0.3s ease; max-height: 90vh; overflow-y: auto; }
        .monitor-modal { display: flex; flex-direction: column; gap: 1rem; }
        .monitor-modal-title { display: flex; align-items: center; gap: 0.6rem; color: var(--primary-color); font-size: 1.1rem; margin-bottom: 0.2rem; }
        .monitor-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 180px; padding: 1rem; border-radius: 14px; background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%); border: 1px solid #dce8f7; text-align: center; color: var(--text-color); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); }
        .monitor-spinner i { color: var(--primary-color); animation: spin 1s linear infinite; }
        .monitor-spinner small { color: var(--text-muted); }
        .monitor-progress-bar { width: min(320px, 100%); height: 10px; background: #e8f0fb; border-radius: 999px; overflow: hidden; margin-top: 0.2rem; }
        .monitor-progress-bar span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-color), #4f95e0); transition: width 0.25s ease; }
        .monitor-progress-text { font-size: 0.9rem; font-weight: 700; color: var(--primary-color); }
        .monitor-step-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 0.25rem; }
        .monitor-step { padding: 0.3rem 0.6rem; border-radius: 999px; background: #eef5ff; color: #64748b; font-size: 0.75rem; font-weight: 600; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.35rem; }
        .monitor-step.active { color: white; }
        .monitor-step.active[data-step="0"] { background: #2563eb; }
        .monitor-step.active[data-step="1"] { background: #f59e0b; }
        .monitor-step.active[data-step="2"] { background: #7c3aed; }
        .monitor-step.active[data-step="3"] { background: #10b981; }
        .monitor-step.done { background: #e8f8ef; color: var(--success); }
        .monitor-step i { font-size: 0.7rem; }
        .monitor-modal-body { display: flex; flex-direction: column; gap: 0.9rem; animation: monitorReveal 0.35s ease; }
        .monitor-status-card { background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); border: 1px solid #dce8f7; border-left: 5px solid var(--success); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .monitor-status-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 76, 129, 0.08); }
        .monitor-status-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; }
        .monitor-status-title { display: flex; align-items: center; gap: 0.6rem; }
        .monitor-status-title h4 { margin-bottom: 0; }
        .monitor-status-title i { font-size: 1.05rem; color: var(--success); transition: color 0.2s ease, transform 0.2s ease; }
        .monitor-status-card.is-warning { border-left-color: var(--warning); }
        .monitor-status-card.is-warning .monitor-status-title i { color: var(--warning); }
        .monitor-status-card.is-warning #monitor-status-badge { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
        .monitor-status-card.is-error { border-left-color: var(--danger); }
        .monitor-status-card.is-error .monitor-status-title i { color: var(--danger); }
        .monitor-status-card.is-error #monitor-status-badge { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
        .monitor-status-card h4 { color: var(--primary-color); margin-bottom: 0.8rem; }
        .monitor-status-card h4 span { color: var(--success); }
        .monitor-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
        .monitor-metric { background: #f8fbff; border: 1px solid #e3ecf7; border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
        .monitor-metric small { color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
        .monitor-metric strong { font-size: 1.2rem; color: var(--primary-color); }
        .monitor-metric strong#mon-success { color: var(--success); }
        .monitor-metric strong#mon-failed { color: var(--danger); }
        .monitor-message { background: linear-gradient(90deg, #f8fbff 0%, #f4f8ff 100%); border: 1px solid #e3ecf7; border-left: 4px solid var(--info); border-radius: 12px; padding: 0.85rem 1rem; color: #334155; font-size: 0.92rem; line-height: 1.45; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
        .monitor-section-title { font-weight: 700; color: #334155; font-size: 0.92rem; }
        .monitor-errors { max-height: 300px; overflow-y: auto; border: 1px solid #e3ecf7; background: #ffffff; border-radius: 12px; padding: 0.7rem; box-shadow: inset 0 1px 2px rgba(15, 76, 129, 0.04); display: flex; flex-direction: column; gap: 0.5rem; }
        .monitor-valid-rows { max-height: 240px; overflow-y: auto; border: 1px solid #e3ecf7; background: #ffffff; border-radius: 12px; padding: 0.7rem; box-shadow: inset 0 1px 2px rgba(15, 76, 129, 0.04); display: flex; flex-direction: column; gap: 0.5rem; }
        .monitor-spinner i { animation: spin 1s linear infinite, pulse 1.2s ease-in-out infinite; }
        .monitor-errors .empty-state, .monitor-valid-rows .empty-state { min-height: 110px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: 0.92rem; padding: 0.8rem; }
        .monitor-error-item { padding: 0.65rem 0.75rem; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a2c00; font-size: 0.86rem; line-height: 1.4; }
        .monitor-success-item { padding: 0.65rem 0.75rem; border-radius: 10px; background: #ecfdf3; border: 1px solid #a7f3d0; color: #166534; font-size: 0.86rem; line-height: 1.4; }
        .monitor-modal-actions { margin-top: 0.2rem; }
        @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
        @keyframes monitorReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 700px) {
            .modal { padding: 1.1rem; }
            .monitor-metric-grid { grid-template-columns: 1fr; }
        }

        #toast-container { position: fixed; top: 20px; right: 20px; z-index: 3000; }
        .toast { background: white; padding: 1rem 1.5rem; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-bottom: 10px; border-left: 4px solid var(--primary-color); display: flex; align-items: center; justify-content: space-between; min-width: 300px; animation: slideIn 0.3s; }
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .toast.success { border-left-color: var(--success); }
        .toast.error { border-left-color: var(--danger); }
        .toast.info { border-left-color: var(--info); }
        .toast.warning { border-left-color: var(--danger); background: #fff3cd; }

        #storage-mode-badge,
        #session-expiry-badge {
            border: 1px solid rgba(255,255,255,0.32);
            box-shadow: 0 4px 10px rgba(15, 76, 129, 0.18);
            letter-spacing: 0.04em;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 3px 10px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            border: 1px solid transparent;
        }

        .status-success {
            background: #ecfdf3;
            color: #166534;
            border-color: #86efac;
        }

        .status-failed,
        .status-error,
        .status-blocked {
            background: #fef2f2;
            color: #991b1b;
            border-color: #fca5a5;
        }

        .status-pending,
        .status-warning {
            background: #fffbeb;
            color: #92400e;
            border-color: #fcd34d;
        }

        .skeleton-line {
            width: 100%;
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, #edf2f7 20%, #f8fafc 50%, #edf2f7 80%);
            background-size: 250% 100%;
            animation: skeletonShift 1.2s ease-in-out infinite;
        }

        @keyframes skeletonShift {
            0% { background-position: 100% 50%; }
            100% { background-position: 0 50%; }
        }

        .empty-state-cell {
            background: linear-gradient(180deg, #fcfdff 0%, #f6f9fe 100%);
            border-top: 1px dashed #c8d8ec;
            border-bottom: 1px dashed #c8d8ec;
            color: #334155;
        }

        .realisasi-summary-bar {
            background-color: var(--primary-color); 
            color: #ffffff;
            padding: 15px 20px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.15);
            margin-bottom: 15px;
            font-weight: bold;
            flex-wrap: wrap; 
        }

        .summary-item {
            display: flex;
            gap:5px;
            align-items: center;
            font-size: 1rem;
        }

        .summary-label {
            opacity: 0.9;
            font-weight: normal;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .summary-value {
            font-weight: 800; 
            letter-spacing: 1px;
            font-size: 1.1rem;
        }

        .audit-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            margin-top: 0.75rem;
            flex-wrap: wrap;
        }

        #summary-realisasi-table {
            width: 100%;
            border: 1px solid #dee2e6;
            border-collapse: collapse;
            font-size: 0.9rem;
            table-layout: auto;
        }

        #summary-realisasi-table th, #summary-realisasi-table td {
            padding: 0.75rem;
            text-align: center;
            border: 1px solid #dee2e6;
            vertical-align: middle;
        }

        #summary-realisasi-table th {
            background-color: var(--primary-color) !important; 
            color: #ffffff !important; 
            font-weight: bold !important; 
            text-transform: uppercase;
            -webkit-print-color-adjust: exact;
        }

        #search-result-table th {
            background-color: #0056b3 !important; 
            color: #ffffff !important;
            font-weight: bold !important;
            text-transform: uppercase;
            text-align: center !important;
            border-bottom: 2px solid #004494 !important;
        }

        /* CSS UNTUK HIGHLIGHT ANOMALY DATA */
        .data-anomaly {
            color: #dc3545 !important; /* Merah Text */
            font-weight: bold !important;
            background-color: #ffebee !important; /* Background Merah Muda */
            border: 1px solid #f5c6cb !important;
            position: relative;
        }
        
        /* CSS UNTUK DISPLAY (ADMIN/STAF) - GREEN & RED CHECKMARK */
        .display-val-green {
            color: #006400 !important; /* Deep Green */
            font-weight: bold !important;
            background-color: #e8f5e9 !important; /* Light Green BG */
        }

        .display-val-red {
            color: #dc3545 !important; /* Deep Red */
            font-weight: bold !important;
            background-color: #ffebee !important; /* Light Red BG */
        }

        @media (max-width: 768px) {
            .dashboard-meta {
                align-items: flex-start;
                flex-direction: column;
            }

            .executive-insight-grid {
                grid-template-columns: 1fr;
            }

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

            .dashboard-filter-actions {
                justify-content: flex-start;
            }

            .insight-span-2 {
                grid-column: span 1;
            }

            .trend-row {
                grid-template-columns: 56px 1fr 78px;
            }

            .dashboard-meta-actions {
                margin-left: 0;
                width: 100%;
            }
        }

        @media print {
            @page { margin: 12mm 10mm 12mm 10mm !important; size: A4 landscape; }
            body { background: white; height: auto; overflow: visible; font-size: 8.9pt; color: black; -webkit-print-color-adjust: exact; print-color-adjust: exact; width: 100%; margin: 0; padding: 0; }
            header, nav, .search-panel, .pagination, .action-bar, .btn-section, #toast-container, .no-print, .stats-grid, .modern-stats-grid { display: none !important; }
            main { padding: 0; margin: 0; overflow: visible; display: block !important; }
            .section-view { display: none !important; }
            .section-view.active { display: block !important; }
            .card, .table-container { box-shadow: none; border: none; padding: 0; margin: 0; }
            .table-responsive { overflow: visible !important; width: 100%; }
            .print-only { display: block !important; margin-bottom: 10px; border-bottom: 2px solid #000; padding-bottom: 10px; }
            #print-header { width: 100%; margin-bottom: 10px; }
            .print-snapshot-root, .print-snapshot-panel { display: none; }
            body.print-snapshot-active > *:not(#print-snapshot-root) { display: none !important; }
            body.print-snapshot-active #print-snapshot-root { display: block !important; visibility: visible !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
            body.print-snapshot-active #print-snapshot-root .print-snapshot-panel { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
            body.print-snapshot-active #print-snapshot-root .print-snapshot-table { display: block !important; margin-top: 10px; width: 100% !important; background: white !important; }
            body.print-snapshot-active #print-snapshot-root .print-page { display: block !important; width: 100% !important; page-break-after: always !important; break-after: page !important; page-break-inside: avoid !important; break-inside: avoid-page !important; margin: 0 0 15px 0; padding: 0 !important; }
            body.print-snapshot-active #print-snapshot-root .print-page:last-child { page-break-after: auto !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table { display: table !important; width: 100% !important; border-spacing: 0 !important; border-collapse: collapse !important; font-size: 8.8pt !important; color: #0f172a !important; table-layout: fixed !important; margin: 0 !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table thead { display: table-header-group !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table tfoot { display: table-footer-group !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table tbody { display: table-row-group !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table tr { display: table-row !important; page-break-inside: avoid !important; break-inside: avoid-page !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table th,
            body.print-snapshot-active #print-snapshot-root .print-page-table td { display: table-cell !important; border: 0.75px solid rgba(13,59,102,0.18) !important; padding: 7px 8px !important; color: #0f172a !important; vertical-align: middle !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table th { background-color: #0d3b66 !important; color: #ffffff !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; text-align: center !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table td { font-weight: 500 !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table th:nth-child(1), body.print-snapshot-active #print-snapshot-root .print-page-table td:nth-child(1) { width: 4% !important; text-align: center !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table th:nth-child(2), body.print-snapshot-active #print-snapshot-root .print-page-table td:nth-child(2) { width: 18% !important; text-align: left !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table th:nth-child(3), body.print-snapshot-active #print-snapshot-root .print-page-table td:nth-child(3) { width: 12% !important; text-align: left !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-table th:nth-child(n+4), body.print-snapshot-active #print-snapshot-root .print-page-table td:nth-child(n+4) { width: 5% !important; text-align: right !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 8pt !important; color: #444 !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid rgba(0,0,0,0.12) !important; gap: 10px !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-footer span { display: inline-block; }
            body.print-snapshot-active #print-snapshot-root .print-page-footer .footer-page-number { font-weight: 700 !important; }
            body.print-snapshot-active #print-snapshot-root .print-snapshot-header { margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; }
            body.print-snapshot-active #print-snapshot-root .print-snapshot-header h1 { margin-bottom: 6px !important; letter-spacing: 0.05em !important; font-size: 16pt !important; }
            body.print-snapshot-active #print-snapshot-root .print-meta-real-bottom { margin-bottom: 8px !important; font-size: 8pt !important; line-height: 1.4 !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-subheader { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important; padding: 0 0 6px 0 !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; font-size: 8.5pt !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-subheader .subheader-title { font-weight: 700 !important; color: #0f172a !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-subheader .subheader-details { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; color: #4b5563 !important; font-size: 8pt !important; }
            body.print-snapshot-active #print-snapshot-root #print-title-main { font-size: 16pt !important; margin: 0 0 8px 0 !important; text-transform: uppercase; color: #000; font-weight: bold; text-align: center !important; width: 100%; }
            body.print-snapshot-active #print-snapshot-root #print-meta-real-bottom { display: block !important; width: 100% !important; font-size: 8pt !important; line-height: 1.4 !important; margin-bottom: 10px !important; padding-top: 5px !important; border-top: 1px dotted #ccc !important; }
            body.print-snapshot-active #print-snapshot-root .print-meta-grid { display: grid !important; grid-template-columns: 80px 1fr 80px 1fr; gap: 5px; margin-bottom: 5px !important; }
            body.print-snapshot-active #print-snapshot-root .print-meta-label { font-weight: bold !important; text-align: left !important; padding-right: 5px !important; }
            body.print-snapshot-active #print-snapshot-root #print-timestamp { font-size: 8pt !important; color: #555 !important; text-align: left !important; margin-top: 5px !important; }
            body.print-snapshot-active #print-snapshot-root .print-logo { display: none !important; }
            body.print-snapshot-active #print-snapshot-root #print-realisasi-meta { display: block !important; margin-top: 10px !important; padding-top: 10px !important; border-top:1px dotted #ccc !important; font-size: 9pt !important; line-height: 1.6 !important; text-align: center !important; }
            body.print-snapshot-active #print-snapshot-root .print-meta-row { display: flex !important; justify-content: center !important; gap: 10px !important; margin-bottom: 2px !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-subheader { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important; padding: 0 0 6px 0 !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; font-size: 8.5pt !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-subheader .subheader-title { font-weight: 700 !important; color: #0f172a !important; }
            body.print-snapshot-active #print-snapshot-root .print-page-subheader .subheader-meta { color: #4b5563 !important; }

            /* Ensure headers repeat and rows paginate properly */
            table { page-break-inside: auto !important; }
            thead { display: table-header-group !important; }
            tfoot { display: table-footer-group !important; }
            tbody { display: table-row-group !important; }
            tr { page-break-inside: avoid !important; page-break-after: auto !important; }
        }