:root{
  --sbml-primary:#4f46e5;
  --sbml-secondary:#7c3aed;
  --sbml-accent:#0ea5e9;
  --sbml-success:#10b981;
  --sbml-warning:#f59e0b;
  --sbml-danger:#ef4444;
  --sbml-bg:#f6f8fc;
  --sbml-surface:rgba(255,255,255,.92);
  --sbml-surface-solid:#fff;
  --sbml-text:#172033;
  --sbml-muted:#64748b;
  --sbml-border:#e7eaf3;
  --sbml-shadow:0 18px 50px rgba(31,41,55,.10);
  --sbml-shadow-hover:0 24px 70px rgba(79,70,229,.18);
  --sbml-radius:22px;
  --sbml-radius-sm:14px;
  --sbml-speed:280ms;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 5% 0%,rgba(124,58,237,.08),transparent 28rem),
    radial-gradient(circle at 100% 20%,rgba(14,165,233,.10),transparent 30rem),
    var(--sbml-bg);
  color:var(--sbml-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Global UI polish */
.navbar,.app-navbar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.navbar-brand{letter-spacing:-.03em}
.btn{
  border-radius:14px;
  font-weight:700;
  transition:transform var(--sbml-speed) ease,box-shadow var(--sbml-speed) ease,filter var(--sbml-speed) ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  border:0;
  background:linear-gradient(135deg,var(--sbml-primary),var(--sbml-secondary));
  box-shadow:0 10px 24px rgba(79,70,229,.24);
}
.btn-primary:hover{filter:brightness(1.04);box-shadow:0 15px 32px rgba(79,70,229,.32)}

.article-card,.menu-card,.feature-card,.stat-card,.badge-card,.nilai-item{
  border:1px solid rgba(231,234,243,.9)!important;
  border-radius:var(--sbml-radius)!important;
  background:var(--sbml-surface)!important;
  box-shadow:var(--sbml-shadow)!important;
  transition:transform var(--sbml-speed) ease,box-shadow var(--sbml-speed) ease,border-color var(--sbml-speed) ease;
}
.article-card:hover,.menu-card:hover,.feature-card:hover,.badge-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--sbml-shadow-hover)!important;
  border-color:rgba(79,70,229,.20)!important;
}

/* Landing */
.hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#312e81 0%,#6d28d9 48%,#0284c7 100%)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.15)}
.hero::before{width:420px;height:420px;right:-170px;top:-170px}
.hero::after{width:280px;height:280px;left:-120px;bottom:-120px}
.hero .container{position:relative;z-index:1}
.hero h1{letter-spacing:-.045em;line-height:1.05}
.hero-icon{filter:drop-shadow(0 26px 40px rgba(15,23,42,.28));animation:sbmlFloat 4s ease-in-out infinite}

/* Dashboard */
.dashboard-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(115deg,#4338ca 0%,#7c3aed 50%,#0284c7 100%)!important;
  color:#fff;
  border-radius:0 0 34px 34px;
}
.dashboard-hero::after{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-120px;bottom:-220px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)
}
.dashboard-hero .container{position:relative;z-index:2}
.dashboard-hero h1{letter-spacing:-.045em}
.student-summary{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(14px);
  border-radius:20px!important;
}
.analytics-kpi{position:relative;overflow:hidden;min-height:160px;display:flex!important;flex-direction:column;justify-content:center}
.analytics-kpi::after{content:"";position:absolute;width:90px;height:90px;right:-36px;bottom:-36px;border-radius:50%;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(14,165,233,.12))}
.analytics-kpi i{background:linear-gradient(135deg,var(--sbml-primary),var(--sbml-accent))!important;color:white!important;box-shadow:0 10px 20px rgba(79,70,229,.22)}
.progress-ring-label{background:linear-gradient(135deg,#eef2ff,#e0f2fe);border:1px solid #dbeafe}
.learning-progress{height:12px;border-radius:999px;background:#eceffc;overflow:hidden}
.learning-progress .progress-bar{background:linear-gradient(90deg,var(--sbml-primary),var(--sbml-accent));border-radius:999px}
.daily-target{border-radius:18px!important;background:linear-gradient(135deg,#eef2ff,#ecfeff)!important;border:1px solid #dbeafe!important}
.learning-path{gap:12px!important}
.learning-path a{border:1px solid var(--sbml-border)!important;border-radius:16px!important;background:white!important;transition:all var(--sbml-speed) ease!important}
.learning-path a:hover{transform:translateY(-4px);border-color:#c7d2fe!important;box-shadow:0 14px 28px rgba(79,70,229,.12)}
.sarpras-mission-card{background:linear-gradient(135deg,#f0fdf4,#ecfeff)!important}

/* V7 mission strip */
.sbml-v7-strip{margin-top:-34px;position:relative;z-index:4}
.sbml-v7-missions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sbml-mission-card{
  display:flex;align-items:center;gap:14px;padding:18px;text-decoration:none;color:inherit;
  border-radius:20px;background:rgba(255,255,255,.96);border:1px solid var(--sbml-border);box-shadow:var(--sbml-shadow);
  transition:transform var(--sbml-speed) ease,box-shadow var(--sbml-speed) ease;
}
.sbml-mission-card:hover{color:inherit;transform:translateY(-5px);box-shadow:var(--sbml-shadow-hover)}
.sbml-mission-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.25rem;flex:0 0 auto}
.sbml-mission-card:nth-child(1) .sbml-mission-icon{background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.sbml-mission-card:nth-child(2) .sbml-mission-icon{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.sbml-mission-card:nth-child(3) .sbml-mission-icon{background:linear-gradient(135deg,#10b981,#059669)}
.sbml-mission-card strong{display:block;font-size:.98rem}.sbml-mission-card small{color:var(--sbml-muted)}

/* Footer */
.brand-footer{background:#0f172a!important;border-top:0!important;padding:34px 0!important}
.brand-footer__product{font-weight:800;color:#fff}.brand-footer__credit{color:#94a3b8!important}.brand-footer__creator{color:#e2e8f0}.brand-footer__legacy{font-size:.68rem!important;color:#64748b!important}

/* Loading and toast */
#sbmlLoadingScreen{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:linear-gradient(135deg,#312e81,#7c3aed 55%,#0284c7);color:white;transition:opacity .45s ease,visibility .45s ease}
#sbmlLoadingScreen.is-hidden{opacity:0;visibility:hidden}
.sbml-loader{text-align:center}.sbml-loader__mark{width:72px;height:72px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:2rem;animation:sbmlPulse 1.5s ease-in-out infinite}
.sbml-loader__title{font-weight:800;letter-spacing:-.03em}.sbml-loader__bar{width:220px;height:6px;margin:18px auto 0;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden}.sbml-loader__bar span{display:block;width:45%;height:100%;border-radius:999px;background:white;animation:sbmlLoading 1.1s ease-in-out infinite}
#sbmlToastContainer{position:fixed;right:18px;top:18px;z-index:100000;display:grid;gap:10px;max-width:min(360px,calc(100vw - 36px))}
.sbml-toast{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:16px;background:#fff;border:1px solid var(--sbml-border);box-shadow:0 18px 45px rgba(15,23,42,.18);animation:sbmlToastIn .35s ease both}
.sbml-toast.is-leaving{animation:sbmlToastOut .3s ease both}.sbml-toast__icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#dcfce7;color:#047857;flex:0 0 auto}.sbml-toast__title{font-weight:800}.sbml-toast__text{font-size:.86rem;color:var(--sbml-muted)}

/* theme toggle */
.sbml-theme-toggle{position:fixed;right:18px;bottom:18px;z-index:9998;width:46px;height:46px;border:0;border-radius:15px;background:#111827;color:#fff;box-shadow:0 12px 30px rgba(15,23,42,.25)}
[data-sbml-theme="dark"]{--sbml-bg:#0b1220;--sbml-surface:rgba(15,23,42,.94);--sbml-surface-solid:#0f172a;--sbml-text:#e5e7eb;--sbml-muted:#94a3b8;--sbml-border:#263247}
[data-sbml-theme="dark"] body{background:radial-gradient(circle at 10% 0%,rgba(124,58,237,.18),transparent 30rem),#0b1220}
[data-sbml-theme="dark"] .article-card,[data-sbml-theme="dark"] .menu-card,[data-sbml-theme="dark"] .feature-card,[data-sbml-theme="dark"] .sbml-mission-card{color:var(--sbml-text)!important;background:var(--sbml-surface)!important}
[data-sbml-theme="dark"] .text-muted,[data-sbml-theme="dark"] small{color:var(--sbml-muted)!important}

@keyframes sbmlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sbmlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes sbmlLoading{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}
@keyframes sbmlToastIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sbmlToastOut{to{opacity:0;transform:translateY(-8px) scale(.96)}}

@media (max-width:991.98px){
  .dashboard-hero{border-radius:0 0 26px 26px;padding-top:3rem!important;padding-bottom:4rem!important}
  .sbml-v7-missions{grid-template-columns:1fr}.sbml-v7-strip{margin-top:-28px}
}
@media (max-width:575.98px){
  :root{--sbml-radius:18px}
  .dashboard-hero h1{font-size:2rem}.dashboard-hero .lead{font-size:1rem}
  .analytics-kpi{min-height:140px}.article-card{padding:1.15rem!important}
  .btn-lg{font-size:1rem;padding:.78rem 1rem}.brand-footer{padding:28px 0!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}