:root{
  --biru-1:#0b1f4b;
  --biru-2:#123a83;
  --biru-3:#1c5cc4;
  --biru-4:#2e8bf0;
  --biru-5:#6fc3ff;
  --bg-soft:#f2f6fd;
  --radius:16px;
}

*{box-sizing:border-box;}

body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg-soft);
  color:#1b2440;
}

/* ============ AUTH PAGE ============ */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--biru-1),var(--biru-2) 45%,var(--biru-3) 75%,var(--biru-4));
  background-size:200% 200%;
  animation:gradientMove 12s ease infinite;
  padding:20px;
}
@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.auth-card{
  background:rgba(255,255,255,.97);
  border-radius:24px;
  box-shadow:0 25px 60px rgba(11,31,75,.35);
  overflow:hidden;
  max-width:920px;
  width:100%;
  animation:popIn .5s ease;
}
@keyframes popIn{
  from{opacity:0;transform:translateY(18px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.auth-side{
  background:linear-gradient(160deg,var(--biru-2),var(--biru-4));
  color:#fff;
  padding:48px 36px;
  position:relative;
  overflow:hidden;
}
.auth-side::before, .auth-side::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  animation:floatBlob 8s ease-in-out infinite;
}
.auth-side::before{width:220px;height:220px;top:-60px;right:-60px;}
.auth-side::after{width:160px;height:160px;bottom:-50px;left:-40px;animation-delay:2s;}
@keyframes floatBlob{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-16px) scale(1.06);}
}
.auth-side .icon-badge{
  width:64px;height:64px;border-radius:18px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;margin-bottom:18px;
  animation:pulseSoft 2.4s ease-in-out infinite;
}
@keyframes pulseSoft{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

/* ============ SIDEBAR ============ */
.sidebar{
  width:270px;
  min-height:100vh;
  background:linear-gradient(180deg,var(--biru-1) 0%,var(--biru-2) 55%,var(--biru-3) 100%);
  color:#fff;
  position:fixed;
  top:0;left:0;
  transition:transform .3s ease;
  z-index:1050;
  display:flex;
  flex-direction:column;
}
.sidebar-brand{
  padding:22px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand .logo-box{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--biru-4),var(--biru-5));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;
  box-shadow:0 6px 16px rgba(46,139,240,.5);
  animation:pulseSoft 3s ease-in-out infinite;
}
.sidebar-brand .brand-text b{display:block;font-size:15px;letter-spacing:.3px;}
.sidebar-brand .brand-text span{font-size:11.5px;opacity:.7;}

.nav-scroll{flex:1;overflow-y:auto;padding:14px 12px;}
.nav-section-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  opacity:.55;margin:14px 10px 6px;
}
.side-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  font-size:14px;font-weight:500;
  margin-bottom:4px;
  position:relative;
  transition:background .25s ease, transform .2s ease, padding-left .2s ease;
}
.side-link i{font-size:17px;width:22px;text-align:center;transition:transform .25s ease;}
.side-link:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  padding-left:18px;
}
.side-link:hover i{transform:translateX(2px) scale(1.1);}
.side-link.active{
  background:linear-gradient(90deg,rgba(111,195,255,.28),rgba(255,255,255,.05));
  color:#fff;
  box-shadow:inset 3px 0 0 var(--biru-5);
}
.side-link.active i{color:var(--biru-5);}

.sidebar-footer{
  padding:16px;border-top:1px solid rgba(255,255,255,.12);
}
.btn-logout{
  width:100%;border:none;border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;padding:10px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s ease;
}
.btn-logout:hover{background:rgba(255,80,80,.35);}

/* ============ MAIN AREA ============ */
.main-area{margin-left:270px;transition:margin .3s ease;min-height:100vh;}
.topbar{
  background:#fff;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 14px rgba(20,40,90,.06);
  position:sticky;top:0;z-index:900;
}
.hamburger{
  display:none;border:none;background:linear-gradient(135deg,var(--biru-3),var(--biru-4));
  color:#fff;width:40px;height:40px;border-radius:10px;font-size:18px;
}
.page-content{padding:26px;animation:fadeUp .45s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ============ CARDS / WIDGETS ============ */
.stat-card{
  border-radius:var(--radius);
  padding:22px;color:#fff;
  background:linear-gradient(135deg,var(--biru-3),var(--biru-4));
  box-shadow:0 12px 26px rgba(28,92,196,.28);
  position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(28,92,196,.38);}
.stat-card .stat-icon{
  width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;
}
.stat-card h3{font-size:28px;font-weight:700;margin:0;}
.stat-card small{opacity:.85;}
.stat-card.alt2{background:linear-gradient(135deg,#123a83,#2e8bf0);}
.stat-card.alt3{background:linear-gradient(135deg,#0b1f4b,#1c5cc4);}
.stat-card.alt4{background:linear-gradient(135deg,#1c5cc4,#6fc3ff);}

.card-soft{
  background:#fff;border-radius:var(--radius);
  border:1px solid #eaf0fb;
  box-shadow:0 6px 18px rgba(20,40,90,.05);
}
.card-soft .card-header{
  background:transparent;border-bottom:1px solid #eef2fb;
  font-weight:600;padding:16px 20px;
}
.card-soft .card-body{padding:20px;}

.badge-jenis-uts{background:#e7f0ff;color:#1c5cc4;}
.badge-jenis-uas{background:#e6f8ee;color:#12965a;}
.badge-status-draft{background:#fff3e0;color:#c9760a;}
.badge-status-published{background:#e6f8ee;color:#12965a;}
.badge-status-selesai{background:#eef1f8;color:#4a5578;}

.table thead th{
  background:#f5f8fe;color:#3a4a6b;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.5px;border:none;
}
.table tbody tr{transition:background .15s ease;}
.table tbody tr:hover{background:#f7fafe;}

.btn-gradient{
  background:linear-gradient(135deg,var(--biru-3),var(--biru-4));
  border:none;color:#fff;font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 18px rgba(28,92,196,.28);
}
.btn-gradient:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(28,92,196,.38);color:#fff;}

.fade-item{animation:fadeUp .4s ease both;}

/* ============ EXAM TAKING ============ */
.exam-timer{
  background:linear-gradient(135deg,var(--biru-1),var(--biru-3));
  color:#fff;border-radius:14px;padding:10px 18px;font-weight:700;font-size:18px;
  letter-spacing:1px;box-shadow:0 8px 20px rgba(20,40,90,.25);
}
.soal-number-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid #dbe6fb;
  background:#fff;font-weight:600;font-size:13px;color:#345;
}
.soal-number-btn.answered{background:linear-gradient(135deg,var(--biru-3),var(--biru-4));color:#fff;border:none;}

/* ============ MOBILE ============ */
@media (max-width: 991.98px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.show{transform:translateX(0);}
  .main-area{margin-left:0;}
  .hamburger{display:flex;align-items:center;justify-content:center;}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,20,45,.45);z-index:1040;
  }
  .sidebar-overlay.show{display:block;}
}