body { font-family: 'Inter', sans-serif; transition: background-color 0.3s, color 0.3s; }
.glass-panel { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 40px 0 rgba(5, 31, 32, 0.08); }
.dark .glass-panel { background: rgba(11, 43, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5); color: #e2e8f0; }
.page-section { display: none; opacity: 0; transition: opacity 0.4s ease; }
.page-section.active { display: flex; opacity: 1; }
.sub-page { display: none; animation: fadeInUp 0.4s ease forwards; }
.sub-page.active { display: block; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(35, 83, 71, 0.3); border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(142, 182, 155, 0.3); }
.table-input { width: 100%; padding: 0.5rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; outline: none; transition: all 0.2s; }
.dark .table-input { background-color: #163832; border-color: #235347; color: white; }
.table-input:focus { border-color: #235347; box-shadow: 0 0 0 2px rgba(35,83,71,0.2); }
#tes-submenu-container {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: block;
}
#tes-submenu-container.tes-open {
    max-height: 500px;
    overflow: visible;
}
.role-superadmin-only, .role-admin-only, .role-guru-only, .role-writable { display: none !important; }
#pdf-sertifikat-container { background-color: #FEFCF5; background-image: radial-gradient(#F5EEDB 1px, transparent 1px); background-size: 20px 20px; }
#view-login { overflow-y: auto; padding: 1rem 0; }
#btn-lupa-password { border: 1px solid rgba(35, 83, 71, 0.2); border-radius: 0.75rem; padding: 0.65rem 1rem; text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
#btn-lupa-password:hover { background-color: rgba(142, 182, 155, 0.15); border-color: rgba(35, 83, 71, 0.45); }
@media (max-width: 640px) {
    #view-login > div { padding: 1.5rem; }
    #view-login .text-center { margin-bottom: 1.25rem; }
    #view-login form { gap: 0.75rem; }
}