:root {
    --primary-color: #005A9E; --accent-color: #3498DB; --background-color: #F4F7FC; --card-background: #FFFFFF; --sidebar-bg: #2C3E50; --sidebar-text: #ECF0F1; --text-primary: #1D2D35; --text-secondary: #6c757d; --risk-color: #E74C3C; --success-color: #2ECC71; --warning-color: #F1C40F; --font-family: 'Inter', system-ui, sans-serif; --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12); --border-radius: 16px; --transition-speed: 0.3s ease; --border-color: #E9ECEF;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body { background-color: var(--background-color); color: var(--text-primary); font-family: var(--font-family); transition: background-color var(--transition-speed), color var(--transition-speed); }
body.font-size-s { font-size: 14px; }
body.font-size-m { font-size: 16px; }
body.font-size-l { font-size: 18px; }
.app-container { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background-color: var(--sidebar-bg); color: var(--sidebar-text); position: fixed; height: 100%; top: 0; left: 0; transform: translateX(0); transition: transform var(--transition-speed); z-index: 1000; }
.sidebar-header { display: flex; align-items: center; justify-content: center; padding: 1.5rem; font-size: 1.5rem; font-weight: 700; }
.sidebar-header i { margin-right: 0.75rem; }
.sidebar-menu { list-style-type: none; }
.sidebar-menu li a { display: flex; align-items: center; padding: 1rem 1.5rem; color: var(--sidebar-text); text-decoration: none; font-weight: 500; border-left: 4px solid transparent; transition: all var(--transition-speed); }
.sidebar-menu li a i { margin-right: 1rem; width: 22px; text-align: center; }
.sidebar-menu li.active a, .sidebar-menu li a:hover { background-color: var(--primary-color); }
.main-content { flex-grow: 1; margin-left: 260px; padding: 1.5rem 2rem; transition: margin-left var(--transition-speed); }
.main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.header-left { display: flex; align-items: center; gap: 1rem; }
.header-left h1 { font-size: 1.8rem; font-weight: 700; }
.menu-button { display: none; background: transparent; border: none; font-size: 1.6rem; color: var(--text-secondary); cursor: pointer; }
.header-right { display: flex; align-items: center; gap: 1.5rem; }
.notification-icon { font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; }
.user-profile { display: flex; align-items: center; gap: 0.75rem; }
.user-profile img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.user-profile span { font-weight: 600; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.card { background-color: var(--card-background); border-radius: var(--border-radius); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-soft); transition: transform var(--transition-speed), box-shadow var(--transition-speed); border: 1px solid var(--border-color); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.card-icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; color: white; }
.card-icon.students { background-color: var(--accent-color); } .card-icon.subjects { background-color: var(--success-color); } .card-icon.institutions { background-color: var(--warning-color); } .card-icon.risk { background-color: var(--risk-color); }
.card-info h3 { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.5rem; }
.card-info p { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); }
.data-section-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
.chart-container, .activity-feed { background-color: var(--card-background); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); border: 1px solid var(--border-color); }
.chart-container h3, .activity-feed h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.25rem; }
.placeholder-chart { height: 300px; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; border-radius: 12px; color: var(--text-secondary); border: 1px dashed var(--border-color); }
.activity-feed ul { list-style: none; max-height: 300px; overflow-y: auto; }
.activity-feed li { padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); display: flex; align-items: flex-start; gap: 1rem; font-size: 0.95rem; line-height: 1.4; }
.activity-feed li:last-child { border-bottom: none; }
.activity-feed li i { margin-top: 4px; color: var(--accent-color); }
@media (max-width: 1200px) { .data-section-wrapper { grid-template-columns: 1fr; } }
@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .menu-button { display: block; }
    .user-profile span { display: none; }
}
@media (max-width: 768px) { .main-content { padding: 1rem; } .header-left h1 { font-size: 1.5rem; } .card-info p { font-size: 2.2rem; } }
@media (max-width: 480px) { :root { --border-radius: 12px; } .summary-cards { grid-template-columns: 1fr; } .card { flex-direction: row; text-align: left; } }
body[data-theme="dark"] { --background-color: #1A202C; --card-background: #2D3748; --sidebar-bg: #222B3C; --text-primary: #F7FAFC; --text-secondary: #A0AEC0; --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35); --border-color: #4A5568; }
body[data-theme="dark"] .user-profile img { border-color: var(--card-background); }
.theme-switcher { position: relative; display: inline-block; width: 50px; height: 28px; }
.theme-switcher input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(22px); }