@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--primary:#6366f1;--primary-rgb:99, 102, 241;--primary-hover:#4f46e5;--secondary:#8b5cf6;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--dark:#0f172a;--sidebar-width:260px;--glass-bg:#ffffffb3;--glass-border:#fff6;--card-shadow:0 10px 15px -3px #0000000d, 0 4px 6px -4px #0000000d;--card-hover-shadow:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}body{color:#334155;background-color:#f1f5f9;font-family:Outfit,sans-serif;overflow-x:hidden}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--card-shadow);transition:var(--transition-smooth);border-radius:16px}.glass-card:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.app-wrapper{width:100vw;min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);color:#f8fafc;z-index:100;transition:var(--transition-smooth);scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;background:linear-gradient(#0f172a 0%,#1e293b 100%);position:fixed;top:0;bottom:0;left:0;overflow-y:auto;box-shadow:4px 0 10px #0000001a}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.sidebar .brand{border-bottom:1px solid #ffffff14;align-items:center;height:70px;padding:0 24px;display:flex}.sidebar .brand-title{background:linear-gradient(90deg,#818cf8,#a78bfa);-webkit-text-fill-color:transparent;letter-spacing:.5px;-webkit-background-clip:text;font-size:1.25rem;font-weight:700}.sidebar-nav{margin:0;padding:20px 16px;list-style:none}.sidebar-nav .nav-header{text-transform:uppercase;letter-spacing:1px;color:#64748b;margin-top:15px;margin-bottom:8px;padding-left:12px;font-size:.75rem;font-weight:600}.sidebar-nav .nav-item{margin-bottom:4px}.sidebar-nav .nav-link{color:#94a3b8;transition:var(--transition-smooth);border-radius:10px;align-items:center;padding:12px 16px;font-weight:500;text-decoration:none;display:flex}.sidebar-nav .nav-link i{transition:var(--transition-smooth);margin-right:12px;font-size:1.2rem}.sidebar-nav .nav-link:hover,.sidebar-nav .nav-item.active .nav-link{color:#fff;background:#6366f126}.sidebar-nav .nav-link:hover i,.sidebar-nav .nav-item.active .nav-link i{color:#818cf8;transform:scale(1.15)}.main-content{margin-left:var(--sidebar-width);min-height:100vh;transition:var(--transition-smooth);flex-direction:column;flex-grow:1;display:flex}.topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:99;background:#fffc;border-bottom:1px solid #e2e8f0cc;justify-content:space-between;align-items:center;height:70px;padding:0 30px;display:flex;position:sticky;top:0}.user-profile-btn{transition:var(--transition-smooth);background:0 0;border:none;border-radius:30px;align-items:center;padding:6px 12px;display:flex}.user-profile-btn:hover{background:#f1f5f9}.user-profile-img{object-fit:cover;border:2px solid #e2e8f0;border-radius:50%;width:36px;height:36px;margin-right:10px}.content-body{flex-grow:1;padding:30px}.stat-icon-box{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.stat-icon-primary{color:var(--primary);background:#6366f11a}.stat-icon-secondary{color:var(--secondary);background:#8b5cf61a}.stat-icon-success{color:var(--success);background:#10b9811a}.stat-icon-warning{color:var(--warning);background:#f59e0b1a}.stat-icon-danger{color:var(--danger);background:#ef44741a}.custom-table{border-radius:12px;overflow:hidden}.custom-table thead{color:#64748b;text-transform:uppercase;letter-spacing:.5px;background-color:#f8fafc;font-size:.75rem}.custom-table th,.custom-table td{vertical-align:middle;padding:16px 20px}.custom-table tbody tr{transition:var(--transition-smooth);border-bottom:1px solid #f1f5f9}.custom-table tbody tr:hover{background-color:#6366f105}.btn-primary-custom{background-color:var(--primary);border-color:var(--primary);color:#fff;transition:var(--transition-smooth);border-radius:10px;padding:10px 20px;font-weight:500}.btn-primary-custom:hover{background-color:var(--primary-hover);border-color:var(--primary-hover);color:#fff;transform:translateY(-1px)}.timeline{border-left:2px solid #e2e8f0;padding-left:20px;position:relative}.timeline-item{margin-bottom:25px;position:relative}.timeline-marker{width:14px;height:14px;box-shadow:0 0 0 2px var(--primary);border:2px solid #fff;border-radius:50%;position:absolute;top:5px;left:-28px}.timeline-marker.deduction{box-shadow:0 0 0 2px var(--danger);background:var(--danger)}.timeline-marker.addition{box-shadow:0 0 0 2px var(--success);background:var(--success)}.timeline-marker.neutral{box-shadow:0 0 0 2px var(--secondary);background:var(--secondary)}@media (width<=991.98px){.sidebar{left:-100%}.sidebar.show{left:0}.main-content{margin-left:0}.sidebar-toggle-btn{display:block!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-section{animation:.4s ease-out forwards fadeIn}.badge-custom{border-radius:30px;padding:6px 12px;font-size:.75rem;font-weight:600}.badge-ringan{color:var(--warning);background:#f59e0b1a}.badge-sedang{color:var(--secondary);background:#8b5cf61a}.badge-berat{color:var(--danger);background:#ef44441a}.badge-akademik{color:var(--primary);background:#6366f11a}.badge-non_akademik{color:var(--success);background:#10b9811a}.badge-karakter{color:var(--secondary);background:#8b5cf61a}.avatar-initials{background-color:var(--primary);color:#fff;text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.875rem;font-weight:600;display:flex}