:root {
    --bg-primary: #020617;
    --bg-secondary: #0f172a;
    --bg-card: rgba(15, 23, 42, 0.8);
    --border: rgba(0, 212, 255, 0.1);
    --accent: #00d4ff; /* Cyan from Logo */
    --accent-glow: rgba(0, 212, 255, 0.2);
    --accent-purple: #decaff; /* Lavender from Logo */
    --accent-red: #ff3b5c;
    --text-primary: #ffffff;
    --text-muted: #94a3b8;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Cairo', sans-serif;
}

/* Glassmorphism Cards */
.kpi-card, .chart-card, .modal {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.btn {
    background: linear-gradient(90deg, var(--accent), var(--accent-purple));
    color: var(--bg-primary);
    font-weight: bold;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
}

.nav-item.active {
    background: rgba(0, 212, 255, 0.15);
    border-right: 4px solid var(--accent);
}

.amount-pos { color: var(--accent); }
.amount-neg { color: var(--accent-red); }

.badge-green { background: rgba(0, 212, 255, 0.2); color: var(--accent); }