:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#667085;
  --text:#101828;
  --primary:#4f46e5;
  --primary-soft:#eef2ff;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --border:#e5e7eb;
  --shadow:0 12px 30px rgba(16,24,40,.08)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text)
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.container-xl{max-width:1280px}
.card-soft{box-shadow:var(--shadow);border:1px solid rgba(229,231,235,.9)}
.bg-soft{background:linear-gradient(180deg,#fff 0%, #fbfcff 100%)}
.border-soft{border:1px solid var(--border)}
.text-muted{color:var(--muted)!important}
.bg-primary-soft{background:var(--primary-soft)}
.rounded-24{border-radius:24px}
.rounded-20{border-radius:20px}
.rounded-16{border-radius:16px}
.rounded-12{border-radius:12px}

.hero-banner{
  background:linear-gradient(135deg,#111827 0%, #1e293b 40%, #3730a3 100%);
  color:#fff;
  border-radius:28px;
  overflow:hidden
}
.hero-banner .badge{
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.15)
}

.sidebar-sticky{position:sticky;top:88px}
.unit-item{cursor:pointer;transition:.2s ease}
.unit-item:hover{transform:translateY(-1px)}
.unit-item.active{background:var(--primary-soft);border-color:#c7d2fe}

.progress{
  height:10px;
  background:#edf2f7;
  border-radius:999px;
  overflow:hidden
}
.progress-bar{
  background:linear-gradient(90deg,#22c55e,#10b981);
  height:100%;
  border-radius:999px
}

.question-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin-bottom:16px
}

.stat-card{
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
  padding:16px
}

.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px
}
.login-card{
  max-width:1100px;
  width:100%;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow)
}
.login-side{
  background:linear-gradient(160deg,#4f46e5,#06b6d4);
  color:#fff;
  padding:36px
}
.login-side ul{padding-left:18px}
.login-side li{margin-bottom:10px}

.footer-note{
  color:#94a3b8;
  font-size:.85rem;
  padding:20px 0;
  text-align:center
}

.badge-course{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--border);
  font-size:.875rem
}

.avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--primary-soft);
  display:grid;
  place-items:center;
  color:var(--primary);
  font-weight:700
}

@media (max-width: 991px){
  .sidebar-sticky{position:static}
}