:root{
    /* New blue-cyan palette */
    --accent-1: #3D45FF; /* indigo blue */
    --accent-2: #386DE8; /* vivid blue */
    --accent-3: #49AFFE; /* light blue */
    --accent-4: #38CAE8; /* cyan */
    --accent-5: #3DFFEC; /* bright cyan */
    --muted: #6b7280; /* neutral grey */
    --card-bg: rgba(255,255,255,0.96);
}
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.app-header{ box-shadow: 0 6px 20px rgba(20,20,50,0.06); }
.app-header .brand { font-weight: 700; letter-spacing: -0.02em; }
.app-header .username { color: var(--muted); font-size: .95rem; }
.card-gradient {
    background: linear-gradient(180deg, rgba(61,255,236,0.06) 0%, rgba(255,255,255,0.98) 100%);
    border-radius: 1rem;
    border: 1px solid rgba(61,69,255,0.08);
    box-shadow: 0 10px 30px rgba(56,109,232,0.08);
}
.login-card { border-radius: 1rem; }
.btn-gradient {
    background-image: linear-gradient(90deg,var(--accent-2),var(--accent-3));
    color: white;
    border: none;
}
.btn-gradient:hover { background-image: linear-gradient(90deg,var(--accent-3),var(--accent-2)); transform: translateY(-2px); }
.gradient-bg { background: linear-gradient(180deg, var(--accent-5) 0%, #ffffff 100%); }
.gradient-header { background: linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 100%); }
.enhanced-table { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: .75rem; }
.enhanced-table thead th { background: linear-gradient(90deg,var(--accent-2), var(--accent-3)); color: white; font-weight: 600; position: sticky; top: 0; z-index: 10; }
.enhanced-table tbody tr { transition: transform .18s ease, box-shadow .18s ease; }
.enhanced-table tbody tr:hover { transform: translateX(6px); box-shadow: 0 12px 30px rgba(16,24,40,0.06); }
.enhanced-table td, .enhanced-table th { padding: .75rem 1rem; }
.input:focus, .select:focus { box-shadow: 0 8px 26px rgba(56,109,232,0.15); border-color: var(--accent-2); }
.muted { color: var(--muted); }
.glass { background: rgba(255,255,255,0.6); backdrop-filter: blur(6px); }
@media (max-width: 640px){ .app-header .brand{ font-size: 14px; } }

/* Badges and special UI */
.badge-biasa { background: linear-gradient(90deg,var(--accent-2), var(--accent-3)); color: white; }
.badge-rahasia { background: var(--accent-1); color: white; }
.btn-outline { border: 1px solid rgba(56,109,232,0.2); color: var(--accent-1); background: transparent; }
.card-highlight { background: linear-gradient(90deg, rgba(73,175,254,0.12), rgba(61,255,236,0.08)); border-radius: .75rem; padding: .75rem; }

/* Links */
a { color: var(--accent-2); }

/* Small utility for muted table rows */
.row-muted { background: rgba(61,255,236,0.04); }

/* Override common utility color tokens to enforce project palette */
.text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400,
.text-slate-700, .text-slate-600, .text-slate-500, .text-slate-400,
.text-blue-600, .text-blue-500, .text-blue-100, .text-green-400, .text-yellow-600,
.text-purple-500 {
    color: var(--accent-2) !important;
}

.bg-blue-50, .bg-slate-50, .bg-green-50, .from-blue-50, .to-cyan-50 {
    background: linear-gradient(180deg, rgba(56,109,232,0.06), rgba(61,255,236,0.02)) !important;
}

.border-blue-200, .border-slate-200, .border-blue-100 {
    border-color: rgba(56,109,232,0.12) !important;
}

.bg-gradient-to-r.from-blue-600, .from-blue-600, .via-cyan-500, .to-cyan-400, .from-blue-500, .to-cyan-400 {
    background-image: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Buttons for dangerous / warning use palette variants */
.btn-error { background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important; color: white !important; }
.btn-warning { background: linear-gradient(90deg, var(--accent-3), var(--accent-4)) !important; color: white !important; }

/* Action button sizing to avoid label wrap */
.action-btn { white-space:nowrap; min-width:90px; }

/* Tooltip overrides to use dark theme with accent focus */
.tooltip { background: rgba(7, 12, 48, 0.9); }