/* style.css - FINAL STABLE */
:root { 
    --p-blue: #2196F3; --bg: #f8f9fa; --card-bg: #ffffff;
    --text-main: #333; --text-muted: #888; --nav-bg: #ffffff;
    --border: #eeeeee; --info-bg: #e3f2fd; --info-border: #bbdefb;
    --admin-red: #e53935;
}

.dark-mode { 
    --bg: #121212; --card-bg: #1e1e1e; --text-main: #e0e0e0;
    --text-muted: #aaa; --nav-bg: #1e1e1e; --border: #333;
    --info-bg: rgba(33, 150, 243, 0.1); --info-border: #1565c0;
}

body { 
    margin: 0; font-family: 'Segoe UI', sans-serif; 
    background: var(--bg); color: var(--text-main);
    padding-top: 80px; transition: 0.3s;
}

.navbar { 
    position: fixed; top: 0; width: 100%; background: var(--nav-bg); 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 10px 20px; box-sizing: border-box; z-index: 1000; 
    border-bottom: 1px solid var(--border);
}

.container { max-width: 480px; margin: 0 auto; padding: 0 15px; }

/* Dashboard Cards Fix */
.card { 
    background: var(--card-bg); padding: 25px; border-radius: 28px; 
    text-align: center; border: 1px solid var(--border); 
    margin-bottom: 20px; display: block; text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.icon-box { 
    width: 60px; height: 60px; background: var(--info-bg); 
    color: var(--p-blue); border-radius: 20px; 
    display: flex; align-items: center; justify-content: center; 
    margin: 0 auto 15px; font-size: 1.5rem; 
}

h2 { color: var(--text-main); margin: 5px 0; font-size: 1.4rem; font-weight: 800; }
small { color: var(--text-muted); font-weight: bold; text-transform: uppercase; font-size: 0.75rem; display: block; }