:root {
    --bg-color: #F8FAFC;
    --card-bg: #FFFFFF;
    --primary: #0EA5E9;
    --text-dark: #0F172A;
    --text-light: #64748B;
    --border: #E2E8F0;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }

body { background: var(--bg-color); color: var(--text-dark); }

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.logo { font-size: 1.5rem; font-weight: 800; }
.logo span { color: var(--primary); }
.user-profile { display: flex; align-items: center; gap: 1rem; font-weight: 600; }
.user-profile img { width: 40px; height: 40px; border-radius: 50%; }

.container { max-width: 1000px; margin: 3rem auto; padding: 0 2rem; }

.welcome { text-align: left; margin-bottom: 3rem; animation: fadeIn 0.8s ease; }
.welcome h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.welcome p { color: var(--text-light); font-size: 1.1rem; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.metric-card { background: var(--card-bg); padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid var(--border); animation: slideUp 0.6s ease; }
.metric-card h3 { color: var(--text-light); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.metric-card p { font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.status-ok { color: #10B981 !important; }

.data-section { animation: slideUp 0.8s ease; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05)); }
.card { background: var(--card-bg); border-radius: 1rem; padding: 2.5rem; }
.card h2 { margin-bottom: 2rem; font-size: 1.5rem; }

.user-list { list-style: none; }
.user-list li { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.user-list li:last-child { border-bottom: none; }
.user-list li span { font-weight: 600; }
.user-list li small { color: var(--text-light); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }