:root {
    --primary: #6C5CE7; --primary-dark: #5A4BD1; --secondary: #00CEC9;
    --accent: #FD79A8; --bg-dark: #0a0a1a; --bg-card: #12122a; --bg-card-light: #1a1a3e;
    --text-primary: #FFFFFF; --text-secondary: #a0a0c0; --success: #00B894;
    --warning: #FDCB6E; --danger: #FF7675; --shadow-color: rgba(108, 92, 231, 0.3);
    --perspective: 1000px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg-dark); color:var(--text-primary); min-height:100vh; overflow-x:hidden; perspective:var(--perspective); }
body::before { content:''; position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(ellipse at 20% 50%, rgba(108,92,231,0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(0,206,201,0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(253,121,168,0.08) 0%, transparent 50%); z-index:-1; }
.particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.particle { position:absolute; width:4px; height:4px; background:var(--primary); border-radius:50%; opacity:0.3; animation:floatParticle 20s infinite linear; }
.particle:nth-child(1) { left:10%; animation-delay:0s; animation-duration:25s; }
.particle:nth-child(2) { left:25%; animation-delay:2s; animation-duration:20s; background:var(--secondary); }
.particle:nth-child(3) { left:40%; animation-delay:4s; animation-duration:30s; }
.particle:nth-child(4) { left:55%; animation-delay:1s; animation-duration:22s; background:var(--accent); }
.particle:nth-child(5) { left:70%; animation-delay:3s; animation-duration:28s; }
.particle:nth-child(6) { left:85%; animation-delay:5s; animation-duration:18s; background:var(--secondary); }
.particle:nth-child(7) { left:5%; animation-delay:6s; animation-duration:24s; }
.particle:nth-child(8) { left:95%; animation-delay:2s; animation-duration:26s; background:var(--accent); }
@keyframes floatParticle { 0%{transform:translateY(100vh) scale(0);opacity:0;}10%{opacity:0.3;}90%{opacity:0.3;}100%{transform:translateY(-100vh) scale(1);opacity:0;} }

/* Layout & Components */
.landing { display:flex; align-items:center; justify-content:center; min-height:100vh; perspective:var(--perspective); }
.landing-container { width:100%; max-width:900px; padding:2rem; }
.logo-section { text-align:center; margin-bottom:3rem; transform-style:preserve-3d; }
.logo-icon { width:120px; height:120px; margin:0 auto 1.5rem; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-radius:30px; display:flex; align-items:center; justify-content:center; transform:perspective(600px) rotateX(15deg) rotateY(-15deg); box-shadow:-8px 8px 20px rgba(108,92,231,0.4),-4px 4px 10px rgba(0,206,201,0.3),inset 0 0 30px rgba(255,255,255,0.1); transition:transform 0.5s ease; position:relative; }
.logo-icon:hover { transform:perspective(600px) rotateX(0deg) rotateY(0deg) scale(1.05); }
.logo-icon::before { content:'🎓'; font-size:3.5rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.logo-icon::after { content:''; position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px; border:2px solid rgba(108,92,231,0.3); border-radius:35px; transform:translateZ(-20px); }
.logo-text h1 { font-size:2.8rem; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--secondary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:3px; text-transform:uppercase; }
.logo-text p { color:var(--text-secondary); font-size:1rem; margin-top:0.5rem; letter-spacing:1px; }
.login-options { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; }
.login-card { background:var(--bg-card); border-radius:24px; padding:2.5rem; text-align:center; position:relative; transform-style:preserve-3d; transform:perspective(800px) rotateY(0deg) rotateX(0deg); transition:all 0.5s cubic-bezier(0.23,1,0.32,1); cursor:pointer; border:1px solid rgba(108,92,231,0.2); overflow:hidden; }
.login-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:24px 24px 0 0; }
.login-card.mahasiswa::before { background:linear-gradient(90deg,var(--primary),var(--secondary)); }
.login-card.dosen::before { background:linear-gradient(90deg,var(--accent),var(--warning)); }
.login-card:hover { transform:perspective(800px) translateY(-15px) rotateX(5deg); box-shadow:0 25px 60px rgba(0,0,0,0.5),0 10px 20px var(--shadow-color); }
.login-card-icon { width:80px; height:80px; margin:0 auto 1.5rem; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; transform:translateZ(30px); position:relative; }
.login-card.mahasiswa .login-card-icon { background:linear-gradient(135deg,rgba(108,92,231,0.3),rgba(0,206,201,0.3)); box-shadow:0 8px 25px rgba(108,92,231,0.3); }
.login-card.dosen .login-card-icon { background:linear-gradient(135deg,rgba(253,121,168,0.3),rgba(253,203,110,0.3)); box-shadow:0 8px 25px rgba(253,121,168,0.3); }
.login-card h2 { font-size:1.5rem; font-weight:700; margin-bottom:0.5rem; transform:translateZ(20px); }
.login-card p { color:var(--text-secondary); font-size:0.9rem; transform:translateZ(10px); }
.login-btn { display:inline-block; margin-top:1.5rem; padding:0.8rem 2rem; border-radius:12px; text-decoration:none; font-weight:600; font-size:0.95rem; transform:translateZ(25px); transition:all 0.3s ease; position:relative; overflow:hidden; }
.login-card.mahasiswa .login-btn { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; box-shadow:0 8px 25px rgba(108,92,231,0.4); }
.login-card.dosen .login-btn { background:linear-gradient(135deg,var(--accent),#e84393); color:white; box-shadow:0 8px 25px rgba(253,121,168,0.4); }
.login-btn:hover { transform:translateZ(25px) scale(1.05); }

.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }
.login-form-container { width:100%; max-width:460px; perspective:var(--perspective); }
.login-form { background:var(--bg-card); border-radius:28px; padding:3rem; position:relative; transform-style:preserve-3d; border:1px solid rgba(108,92,231,0.2); box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px var(--shadow-color); }
.login-form.mahasiswa-form { border-color:rgba(108,92,231,0.3); }
.login-form.dosen-form { border-color:rgba(253,121,168,0.3); box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(253,121,168,0.2); }
.back-link { display:inline-flex; align-items:center; gap:0.5rem; color:var(--text-secondary); text-decoration:none; font-size:0.9rem; margin-bottom:2rem; transition:color 0.3s ease; }
.back-link:hover { color:var(--primary); }
.back-link::before { content:'←'; font-size:1.2rem; }
.form-header { text-align:center; margin-bottom:2rem; }
.form-header-icon { width:70px; height:70px; margin:0 auto 1rem; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2rem; transform:perspective(500px) rotateY(-10deg) rotateX(5deg); box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.mahasiswa-form .form-header-icon { background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.dosen-form .form-header-icon { background:linear-gradient(135deg,var(--accent),var(--warning)); }
.form-header h2 { font-size:1.8rem; font-weight:800; }
.form-header p { color:var(--text-secondary); font-size:0.9rem; margin-top:0.3rem; }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; font-size:0.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.5rem; text-transform:uppercase; letter-spacing:0.5px; }
.form-group input { width:100%; padding:1rem 1.2rem; background:var(--bg-card-light); border:2px solid rgba(255,255,255,0.05); border-radius:14px; color:var(--text-primary); font-size:1rem; font-family:'Inter',sans-serif; transition:all 0.3s ease; outline:none; }
.form-group input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(108,92,231,0.15); }
.dosen-form .form-group input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(253,121,168,0.15); }
.form-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; font-size:0.85rem; }
.checkbox-label { display:flex; align-items:center; gap:0.5rem; cursor:pointer; color:var(--text-secondary); }
.forgot-link { color:var(--primary); text-decoration:none; transition:color 0.3s; }
.forgot-link:hover { color:var(--secondary); }
.submit-btn { width:100%; padding:1rem; border:none; border-radius:14px; font-size:1rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; color:white; position:relative; overflow:hidden; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:1px; }
.mahasiswa-form .submit-btn { background:linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow:0 8px 25px rgba(108,92,231,0.4); }
.dosen-form .submit-btn { background:linear-gradient(135deg,var(--accent),#e84393); box-shadow:0 8px 25px rgba(253,121,168,0.4); }
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 12px 35px rgba(0,0,0,0.3); }

.dashboard { display:flex; min-height:100vh; }
.sidebar { width:280px; background:var(--bg-card); border-right:1px solid rgba(255,255,255,0.05); padding:1.5rem; position:fixed; height:100vh; overflow-y:auto; z-index:100; transform:perspective(1200px) rotateY(0deg); transform-origin:left center; transition:transform 0.5s ease; }
.sidebar.mahasiswa-sidebar { border-right-color:rgba(108,92,231,0.15); }
.sidebar.dosen-sidebar { border-right-color:rgba(253,121,168,0.15); }
.sidebar-logo { display:flex; align-items:center; gap:0.8rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,0.05); margin-bottom:1.5rem; }
.sidebar-logo-icon { width:45px; height:45px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; transform:perspective(400px) rotateY(-10deg); box-shadow:0 5px 15px rgba(0,0,0,0.3); }
.mahasiswa-sidebar .sidebar-logo-icon { background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.dosen-sidebar .sidebar-logo-icon { background:linear-gradient(135deg,var(--accent),var(--warning)); }
.sidebar-logo h3 { font-size:1.2rem; font-weight:800; letter-spacing:1px; }
.sidebar-logo span { font-size:0.7rem; color:var(--text-secondary); display:block; }
.sidebar-menu { list-style:none; }
.sidebar-menu li { margin-bottom:0.3rem; }
.sidebar-menu a { display:flex; align-items:center; gap:0.8rem; padding:0.8rem 1rem; color:var(--text-secondary); text-decoration:none; border-radius:12px; font-size:0.9rem; font-weight:500; transition:all 0.3s ease; position:relative; overflow:hidden; }
.sidebar-menu a::before { content:''; position:absolute; left:0; top:0; width:0; height:100%; background:linear-gradient(90deg,rgba(108,92,231,0.15),transparent); transition:width 0.3s ease; }
.mahasiswa-sidebar .sidebar-menu a::before { background:linear-gradient(90deg,rgba(108,92,231,0.15),transparent); }
.dosen-sidebar .sidebar-menu a::before { background:linear-gradient(90deg,rgba(253,121,168,0.15),transparent); }
.sidebar-menu a:hover { color:var(--text-primary); background:rgba(255,255,255,0.03); }
.sidebar-menu a:hover::before { width:100%; }
.sidebar-menu a.active { color:var(--text-primary); background:rgba(108,92,231,0.15); }
.dosen-sidebar .sidebar-menu a.active { background:rgba(253,121,168,0.15); }
.sidebar-menu a .icon { font-size:1.2rem; width:24px; text-align:center; }
.sidebar-section { font-size:0.7rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(160,160,192,0.5); padding:1rem 1rem 0.5rem; font-weight:700; }
.sidebar-logout { margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.05); }
.sidebar-logout a { color:var(--danger) !important; }
.sidebar-logout a::before { background:linear-gradient(90deg,rgba(255,118,117,0.15),transparent) !important; }

.main-content { flex:1; margin-left:280px; padding:2rem; min-height:100vh; }
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,0.05); }
.top-bar h1 { font-size:1.8rem; font-weight:800; }
.top-bar h1 span { font-weight:400; color:var(--text-secondary); font-size:1rem; margin-left:0.5rem; }
.user-info { display:flex; align-items:center; gap:1rem; }
.user-avatar { width:45px; height:45px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:700; transform:perspective(400px) rotateY(10deg); box-shadow:0 5px 15px rgba(0,0,0,0.3); }
.mahasiswa-dashboard .user-avatar { background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.dosen-dashboard .user-avatar { background:linear-gradient(135deg,var(--accent),var(--warning)); }
.user-details { text-align:right; }
.user-details .name { font-weight:600; font-size:0.95rem; }
.user-details .role { font-size:0.75rem; color:var(--text-secondary); }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; margin-bottom:2rem; }
.stat-card { background:var(--bg-card); border-radius:20px; padding:1.5rem; position:relative; overflow:hidden; transform-style:preserve-3d; transform:perspective(800px) rotateY(0deg) rotateX(0deg); transition:all 0.5s cubic-bezier(0.23,1,0.32,1); border:1px solid rgba(255,255,255,0.05); }
.stat-card::before { content:''; position:absolute; top:-50%; right:-50%; width:100%; height:100%; border-radius:50%; opacity:0.1; transition:all 0.5s ease; }
.stat-card:hover { transform:perspective(800px) translateY(-10px) rotateX(5deg); box-shadow:0 20px 40px rgba(0,0,0,0.4); }
.stat-card.purple::before { background:var(--primary); }
.stat-card.teal::before { background:var(--secondary); }
.stat-card.pink::before { background:var(--accent); }
.stat-card.green::before { background:var(--success); }
.stat-card:hover::before { opacity:0.2; transform:scale(1.5); }
.stat-card .stat-icon { font-size:2rem; margin-bottom:1rem; }
.stat-card .stat-value { font-size:2rem; font-weight:800; }
.stat-card .stat-label { font-size:0.85rem; color:var(--text-secondary); margin-top:0.3rem; }
.stat-card .stat-badge { display:inline-block; padding:0.2rem 0.6rem; border-radius:8px; font-size:0.7rem; font-weight:600; margin-top:0.5rem; }
.stat-badge.success { background:rgba(0,184,148,0.2); color:var(--success); }
.stat-badge.warning { background:rgba(253,203,110,0.2); color:var(--warning); }

.content-card { background:var(--bg-card); border-radius:20px; padding:2rem; margin-bottom:1.5rem; border:1px solid rgba(255,255,255,0.05); transform-style:preserve-3d; transition:all 0.5s ease; }
.content-card:hover { box-shadow:0 15px 40px rgba(0,0,0,0.3); }
.content-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.content-card-header h3 { font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; }
.badge { padding:0.3rem 0.8rem; border-radius:10px; font-size:0.75rem; font-weight:600; display:inline-block; }
.badge-primary { background:rgba(108,92,231,0.2); color:var(--primary); }
.badge-teal { background:rgba(0,206,201,0.2); color:var(--secondary); }

.table-container { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; padding:1rem; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); border-bottom:2px solid rgba(255,255,255,0.05); font-weight:700; }
tbody td { padding:1rem; border-bottom:1px solid rgba(255,255,255,0.03); font-size:0.9rem; }
tbody tr { transition:all 0.3s ease; }
tbody tr:hover { background:rgba(108,92,231,0.05); }
.status-badge { display:inline-block; padding:0.3rem 0.8rem; border-radius:8px; font-size:0.75rem; font-weight:600; }
.status-approved { background:rgba(0,184,148,0.15); color:var(--success); }
.status-pending { background:rgba(253,203,110,0.15); color:var(--warning); }
.status-rejected { background:rgba(255,118,117,0.15); color:var(--danger); }
.grade-a { color:var(--success); font-weight:700; }
.grade-b { color:var(--secondary); font-weight:700; }
.grade-c { color:var(--warning); font-weight:700; }
.grade-d { color:var(--danger); font-weight:700; }

.krs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.krs-item { background:var(--bg-card-light); border-radius:16px; padding:1.5rem; border:1px solid rgba(255,255,255,0.05); transform-style:preserve-3d; transition:all 0.4s ease; position:relative; overflow:hidden; }
.krs-item::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--secondary)); transform:scaleX(0); transition:transform 0.4s ease; }
.krs-item:hover { transform:perspective(600px) translateY(-8px) rotateX(3deg); box-shadow:0 15px 30px rgba(0,0,0,0.3); }
.krs-item:hover::after { transform:scaleX(1); }
.krs-item .course-code { font-size:0.75rem; color:var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.krs-item .course-name { font-size:1rem; font-weight:600; margin:0.5rem 0; }
.krs-item .course-info { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem; }

.schedule-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.schedule-day { background:var(--bg-card-light); border-radius:16px; padding:1.2rem; border:1px solid rgba(255,255,255,0.05); transition:all 0.3s ease; }
.schedule-day:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.3); }
.schedule-day h4 { font-size:0.85rem; color:var(--primary); margin-bottom:1rem; text-transform:uppercase; letter-spacing:1px; }
.schedule-item { padding:0.7rem; background:rgba(255,255,255,0.03); border-radius:10px; margin-bottom:0.5rem; font-size:0.8rem; border-left:3px solid var(--primary); }
.schedule-item .time { font-size:0.7rem; color:var(--text-secondary); margin-top:0.3rem; }

.profile-container { display:grid; grid-template-columns:1fr 2fr; gap:2rem; }
.profile-card { background:var(--bg-card); border-radius:20px; padding:2rem; text-align:center; border:1px solid rgba(255,255,255,0.05); transform-style:preserve-3d; }
.profile-avatar-large { width:120px; height:120px; border-radius:30px; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center; font-size:3rem; transform:perspective(500px) rotateY(-10deg) rotateX(5deg); box-shadow:0 15px 35px rgba(0,0,0,0.4); position:relative; }
.mahasiswa-dashboard .profile-avatar-large { background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.dosen-dashboard .profile-avatar-large { background:linear-gradient(135deg,var(--accent),var(--warning)); }
.profile-avatar-large::after { content:''; position:absolute; top:-8px; left:-8px; right:-8px; bottom:-8px; border:2px solid rgba(108,92,231,0.3); border-radius:35px; transform:translateZ(-15px); }
.profile-card h3 { font-size:1.3rem; font-weight:700; }
.profile-card .profile-id { color:var(--text-secondary); font-size:0.85rem; margin-top:0.3rem; }
.profile-details { margin-top:1.5rem; text-align:left; }
.profile-detail-item { display:flex; justify-content:space-between; padding:0.8rem 0; border-bottom:1px solid rgba(255,255,255,0.03); font-size:0.85rem; }
.profile-detail-item .label { color:var(--text-secondary); }
.profile-detail-item .value { font-weight:600; }
.profile-info-card { background:var(--bg-card); border-radius:20px; padding:2rem; border:1px solid rgba(255,255,255,0.05); }
.info-section { margin-bottom:2rem; }
.info-section h4 { font-size:1rem; font-weight:700; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.info-section h4::before { content:''; width:4px; height:18px; border-radius:2px; background:linear-gradient(180deg,var(--primary),var(--secondary)); }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.info-item { background:var(--bg-card-light); border-radius:12px; padding:1rem; }
.info-item .info-label { font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.info-item .info-value { font-size:1.1rem; font-weight:700; margin-top:0.3rem; }

.course-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.course-card { background:var(--bg-card-light); border-radius:16px; padding:1.5rem; border:1px solid rgba(255,255,255,0.05); transform-style:preserve-3d; transition:all 0.4s ease; position:relative; overflow:hidden; }
.course-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--warning)); }
.course-card:hover { transform:perspective(600px) translateY(-8px) rotateX(3deg); box-shadow:0 15px 30px rgba(0,0,0,0.3); }
.course-card .course-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:1rem; }
.course-card .course-code { font-size:0.75rem; color:var(--accent); font-weight:700; }
.course-card .sks-badge { background:rgba(253,121,168,0.2); color:var(--accent); padding:0.2rem 0.6rem; border-radius:8px; font-size:0.75rem; font-weight:700; }
.course-card .course-title { font-size:1.05rem; font-weight:600; margin-bottom:0.5rem; }
.course-card .course-meta { font-size:0.8rem; color:var(--text-secondary); display:flex; flex-direction:column; gap:0.3rem; }
.progress-bar { width:100%; height:6px; background:rgba(255,255,255,0.05); border-radius:3px; margin-top:1rem; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--primary),var(--secondary)); transition:width 0.5s ease; }
.progress-label { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--text-secondary); margin-top:0.5rem; }

.grade-summary { display:flex; gap:1.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.grade-box { flex:1; min-width:140px; background:var(--bg-card-light); border-radius:16px; padding:1.5rem; text-align:center; transform:perspective(600px) rotateY(0deg); transition:transform 0.4s ease; }
.grade-box:hover { transform:perspective(600px) rotateY(5deg); }
.grade-box .ip-value { font-size:2.5rem; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grade-box .ip-label { font-size:0.8rem; color:var(--text-secondary); margin-top:0.3rem; }

.quick-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:2rem; }
.quick-action { background:var(--bg-card); border-radius:16px; padding:1.5rem; text-align:center; text-decoration:none; color:var(--text-primary); border:1px solid rgba(255,255,255,0.05); transition:all 0.4s ease; transform-style:preserve-3d; }
.quick-action:hover { transform:perspective(600px) translateY(-8px) rotateX(5deg); box-shadow:0 15px 30px rgba(0,0,0,0.3); }
.quick-action .qa-icon { font-size:2rem; margin-bottom:0.5rem; }
.quick-action .qa-label { font-size:0.8rem; font-weight:600; }

.announcement-item { padding:1rem; background:var(--bg-card-light); border-radius:12px; margin-bottom:0.8rem; border-left:4px solid var(--primary); transition:all 0.3s ease; }
.announcement-item:hover { transform:translateX(5px); }
.announcement-item .ann-title { font-weight:600; font-size:0.9rem; margin-bottom:0.3rem; }
.announcement-item .ann-date { font-size:0.75rem; color:var(--text-secondary); }
.action-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; border-radius:10px; font-size:0.85rem; font-weight:600; text-decoration:none; transition:all 0.3s ease; border:none; cursor:pointer; }
.action-btn.primary { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; }
.action-btn.secondary { background:var(--bg-card-light); color:var(--text-primary); border:1px solid rgba(255,255,255,0.1); }
.action-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.welcome-banner { background:linear-gradient(135deg,rgba(108,92,231,0.2),rgba(0,206,201,0.1)); border-radius:20px; padding:2rem; margin-bottom:2rem; position:relative; overflow:hidden; border:1px solid rgba(108,92,231,0.2); }
.dosen-dashboard .welcome-banner { background:linear-gradient(135deg,rgba(253,121,168,0.15),rgba(253,203,110,0.1)); border-color:rgba(253,121,168,0.2); }
.welcome-banner h2 { font-size:1.5rem; font-weight:700; }
.welcome-banner p { color:var(--text-secondary); margin-top:0.5rem; font-size:0.9rem; }
.welcome-banner .welcome-icon { position:absolute; right:2rem; top:50%; transform:translateY(-50%); font-size:4rem; opacity:0.3; }
.semester-selector { display:flex; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.semester-btn { padding:0.5rem 1rem; border-radius:10px; font-size:0.8rem; font-weight:600; background:var(--bg-card-light); color:var(--text-secondary); text-decoration:none; transition:all 0.3s ease; }
.semester-btn.active { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; }
.semester-btn:hover:not(.active) { background:rgba(108,92,231,0.15); color:var(--text-primary); }

/* Dosen Overrides */
.dosen-dashboard .stat-card.purple::before { background:var(--accent); }
.dosen-dashboard .stat-card.teal::before { background:var(--warning); }
.dosen-dashboard .progress-fill { background:linear-gradient(90deg,var(--accent),var(--warning)); }
.dosen-dashboard .info-section h4::before { background:linear-gradient(180deg,var(--accent),var(--warning)); }
.dosen-dashboard .announcement-item { border-left-color:var(--accent); }
.dosen-dashboard .semester-btn.active { background:linear-gradient(135deg,var(--accent),#e84393); }
.dosen-dashboard .semester-btn:hover:not(.active) { background:rgba(253,121,168,0.15); }
.dosen-dashboard .schedule-day h4 { color:var(--accent); }
.dosen-dashboard .schedule-item { border-left-color:var(--accent); }
.dosen-dashboard .krs-item::after { background:linear-gradient(90deg,var(--accent),var(--warning)); }
.dosen-dashboard .grade-box .ip-value { background:linear-gradient(135deg,var(--accent),var(--warning)); -webkit-background-clip:text; background-clip:text; }

@media(max-width:768px) {
    .login-options { grid-template-columns:1fr; }
    .sidebar { width:100%; position:relative; height:auto; transform:none; }
    .main-content { margin-left:0; }
    .dashboard { flex-direction:column; }
    .profile-container { grid-template-columns:1fr; }
    .info-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .top-bar { flex-direction:column; gap:1rem; align-items:flex-start; }
    .user-details { text-align:left; }
    .schedule-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
    .stats-grid,.krs-grid,.course-list { grid-template-columns:1fr; }
    .login-form { padding:2rem 1.5rem; }
}
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-dark); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:3px; }