/* =====================================================================
   PORTAL SISWA — tampilan final (mengikuti desain referensi).
   Semua selector diawali "html body #studentDashboard" supaya menang atas
   lapisan CSS lama; portal guru tidak tersentuh.
   ===================================================================== */
html body #studentDashboard:not(.hidden){
  display:grid!important;grid-template-columns:248px minmax(0,1fr)!important;grid-template-rows:80px minmax(0,1fr)!important;
  min-height:100vh!important;background:#f6f3ee!important;font-family:Nunito,"Segoe UI",system-ui,Arial,sans-serif;color:#2a2a29
}
html body #studentDashboard .portal-shell{display:contents!important}

/* ---------- topbar ---------- */
html body #studentDashboard .student-topbar{
  grid-column:2!important;grid-row:1!important;height:80px!important;min-height:80px!important;box-sizing:border-box!important;
  padding:0 40px!important;margin:0!important;background:#fff!important;border-bottom:1px solid #e5e0d9!important;
  display:flex!important;align-items:center!important;position:sticky!important;top:0!important;z-index:30!important;box-shadow:none!important
}
html body #studentDashboard .student-topbar > .brand{display:none!important}
html body #studentDashboard .student-top-actions{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important}
html body #studentDashboard .student-search{
  margin-right:auto!important;width:320px!important;max-width:42vw!important;height:38px!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;gap:8px!important;padding:0 14px!important;border:1px solid #e5e0d9!important;
  border-radius:12px!important;background:#f6f3ee!important;color:#84817d!important
}
html body #studentDashboard .student-search input{
  flex:1!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;
  font:600 13px/1 Nunito,"Segoe UI",Arial,sans-serif!important;color:#3a3936!important
}
html body #studentDashboard .student-notification{
  width:40px!important;height:40px!important;border-radius:12px!important;border:1px solid #e5e0d9!important;background:#f6f3ee!important;
  color:#1e1f1f!important;position:relative!important;display:grid!important;place-items:center!important;padding:0!important
}
html body #studentDashboard .student-notification i{position:absolute!important;right:9px!important;top:8px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:#ef5575!important}
html body #studentDashboard .student-header-join{
  min-height:40px!important;padding:0 16px!important;border-radius:12px!important;font:800 13px Nunito,Arial,sans-serif!important;box-shadow:none!important
}
html body #studentDashboard #logoutBtn{
  min-height:40px!important;padding:0 16px!important;border-radius:12px!important;border:1px solid #ffd3dc!important;background:#fff5f7!important;
  color:#e8416a!important;font:800 13px Nunito,Arial,sans-serif!important
}

/* ---------- sidebar ---------- */
html body #studentDashboard .student-sidebar-modern{
  grid-column:1!important;grid-row:1 / 3!important;position:sticky!important;top:0!important;height:100vh!important;width:auto!important;
  flex:none!important;box-sizing:border-box!important;margin:0!important;padding:24px 20px 20px!important;background:#fff!important;
  border-right:1px solid #e5e0d9!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;overflow:auto!important
}
html body #studentDashboard .sidebar-brand{display:flex!important;align-items:center!important;gap:12px!important;padding:0 0 24px!important;margin:0!important}
html body #studentDashboard .sidebar-brand .brand-icon{
  width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:14px!important;display:grid!important;place-items:center!important;
  background:linear-gradient(135deg,#1e1f1f,#ba9d7f)!important;color:#fff!important;font-size:20px!important;box-shadow:0 8px 18px rgba(30,31,31,.25)!important
}
html body #studentDashboard .sidebar-brand > div{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
html body #studentDashboard .sidebar-brand strong{font:900 18px/1.1 Nunito,Arial,sans-serif!important;color:#2a2a29!important;display:block!important}
html body #studentDashboard .sidebar-brand small{font:700 12px/1.2 Nunito,Arial,sans-serif!important;color:#84817d!important;display:block!important}
html body #studentDashboard .sidebar-user{
  display:flex!important;align-items:center!important;gap:12px!important;box-sizing:border-box!important;padding:12px!important;margin:0 0 26px!important;
  border:1px solid #efe9e1!important;border-radius:16px!important;background:#f6f3ee!important;min-height:60px!important
}
html body #studentDashboard .sidebar-avatar{
  width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;
  background:#e5f6fd!important;font-size:18px!important
}
html body #studentDashboard .sidebar-avatar img,html body #studentDashboard .profile-avatar-large img,html body #studentDashboard .summary-avatar img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important
}
html body #studentDashboard .sidebar-user > div{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
html body #studentDashboard .sidebar-user > div > small:first-child{display:none!important}
html body #studentDashboard .sidebar-user strong{font:800 14px/1.2 Nunito,Arial,sans-serif!important;color:#2a2a29!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #studentDashboard .sidebar-user small{font:700 12px/1.2 Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard .student-sidebar-modern .side-nav{display:grid!important;gap:8px!important;margin:0!important}
html body #studentDashboard .student-sidebar-modern .side-nav button{
  width:100%!important;min-height:44px!important;padding:0 14px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:12px!important;
  border:0!important;border-radius:12px!important;background:transparent!important;color:#2a2a29!important;text-align:left!important;cursor:pointer!important;
  font:800 15px/1 Nunito,"Segoe UI",Arial,sans-serif!important
}
html body #studentDashboard .student-sidebar-modern .side-nav button:hover{background:#f6f3ee!important;color:#1e1f1f!important}
html body #studentDashboard .student-sidebar-modern .side-nav button.active{background:#efe9e1!important;color:#1e1f1f!important}
html body #studentDashboard .student-sidebar-modern .side-nav button .sm-ic{
  display:inline-grid!important;place-items:center!important;width:22px!important;height:22px!important;flex:0 0 22px!important;font-size:0!important;color:inherit!important;
  background:none!important;border:0!important
}
html body #studentDashboard .student-sidebar-modern .side-nav button .sm-ic svg{width:20px;height:20px;display:block}
html body #studentDashboard .student-sidebar-modern .side-nav button[data-student-view="nilai"]{display:none!important}
html body #studentDashboard .sidebar-help{
  margin-top:auto!important;display:flex!important;align-items:center!important;gap:12px!important;padding:12px!important;box-sizing:border-box!important;
  border:1px solid #efe9e1!important;border-radius:16px!important;background:#f6f3ee!important
}
html body #studentDashboard .sidebar-help > span{
  width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important;display:grid!important;place-items:center!important;
  background:#efe9e1!important;color:#1e1f1f!important;font:900 16px Nunito,Arial,sans-serif!important
}
html body #studentDashboard .sidebar-help > div{display:flex!important;flex-direction:column!important;gap:2px!important}
html body #studentDashboard .sidebar-help strong{font:800 13px/1.2 Nunito,Arial,sans-serif!important;color:#2a2a29!important}
html body #studentDashboard .sidebar-help small{font:600 11.5px/1.3 Nunito,Arial,sans-serif!important;color:#84817d!important}

/* ---------- konten ---------- */
html body #studentDashboard .portal-content{
  grid-column:2!important;grid-row:2!important;min-width:0!important;box-sizing:border-box!important;padding:36px 40px 56px!important;
  background:#f6f3ee!important;min-height:0!important;display:block!important
}
html body #studentDashboard .portal-top{display:block!important;margin:0 0 24px!important}
html body #studentDashboard .portal-top .badge{
  display:inline-flex!important;align-items:center!important;gap:4px!important;padding:6px 12px!important;border-radius:999px!important;
  background:#fff1c7!important;color:#6b4a00!important;font:800 12.5px/1 Nunito,Arial,sans-serif!important;margin:0 0 10px!important
}
html body #studentDashboard #studentPageTitle{margin:0!important;font:900 32px/1.15 Nunito,Arial,sans-serif!important;color:#2a2a29!important;letter-spacing:-.01em}
html body #studentDashboard #studentPageSubtitle{margin:8px 0 0!important;font:600 14px/1.5 Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard .portal-view{display:block;max-width:none}
html body #studentDashboard .portal-view.hidden,html body #studentDashboard .student-view.hidden{display:none!important}
html body #studentDashboard #studentViewGame{display:none!important}
html body #studentDashboard #studentViewGames:not(.hidden){display:block!important}

/* ---------- kartu statistik ---------- */
html body #studentDashboard .sd-stat-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;margin:0 0 24px!important}
html body #studentDashboard .sd-stat-cards .portal-stat{
  min-width:0!important;padding:22px 24px!important;border:1px solid #efe9e1!important;border-radius:22px!important;background:#fff!important;
  box-shadow:0 10px 28px rgba(58,57,54,.06)!important;box-sizing:border-box!important;min-height:0!important;height:auto!important
}
html body #studentDashboard .sd-stat-cards .portal-stat span{display:block!important;font:800 13px/1.2 Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard .sd-stat-cards .portal-stat strong{display:block!important;margin:8px 0 4px!important;font:900 38px/1 Nunito,Arial,sans-serif!important;color:#1e1f1f!important}
html body #studentDashboard .sd-stat-cards .portal-stat small{display:block!important;font:600 12.5px/1.4 Nunito,Arial,sans-serif!important;color:#84817d!important}

/* ---------- kartu grafik ---------- */
html body #studentDashboard .sd-chart-card{
  margin:0 0 24px;padding:26px 28px 22px;border-radius:26px;background:#fff;border:1px solid #efe9e1;box-shadow:0 10px 28px rgba(58,57,54,.06)
}
html body #studentDashboard .sd-chart-head{margin-bottom:10px}
html body #studentDashboard .sd-chart-head .section-kicker{display:block;font:900 11.5px/1 Nunito,Arial,sans-serif;letter-spacing:.08em;color:#1e1f1f}
html body #studentDashboard .sd-chart-head h3{margin:8px 0 0;font:900 18px/1.25 Nunito,Arial,sans-serif;color:#2a2a29}
html body #studentDashboard .sd-chart-box{width:100%;overflow-x:auto}
html body #studentDashboard .sd-chart-box svg{display:block;width:100%;height:auto;min-width:480px}
html body #studentDashboard .sd-legend{display:flex;align-items:center;gap:8px;margin-top:14px;font:800 13px Nunito,Arial,sans-serif;color:#84817d}
html body #studentDashboard .sd-legend-multi{gap:20px;flex-wrap:wrap}
html body #studentDashboard .sd-legend-multi span{display:inline-flex;align-items:center;gap:8px}
html body #studentDashboard .sd-dot{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ---------- halaman Game ---------- */
html body #studentDashboard #studentViewGames .dashboard-games-panel{
  margin:0 0 24px!important;padding:28px!important;max-width:none!important;width:auto!important;box-sizing:border-box!important;
  border:1px solid #efe9e1!important;border-radius:26px!important;background:#fff!important;box-shadow:0 10px 28px rgba(58,57,54,.06)!important;transform:none!important;left:auto!important;position:static!important
}
html body #studentDashboard #studentViewGames .dashboard-section-head{margin:0 0 20px!important}
html body #studentDashboard #studentViewGames .dashboard-section-head .section-kicker{font:900 11.5px/1 Nunito,Arial,sans-serif!important;letter-spacing:.08em!important;color:#1e1f1f!important}
html body #studentDashboard #studentViewGames .dashboard-section-head h2{margin:8px 0 6px!important;font:900 20px/1.2 Nunito,Arial,sans-serif!important;color:#2a2a29!important}
html body #studentDashboard #studentViewGames .dashboard-section-head p{margin:0!important;font:600 13.5px/1.5 Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard #studentViewGames .dashboard-flow{
  margin:0!important;padding:26px 28px!important;max-width:none!important;width:auto!important;box-sizing:border-box!important;
  border:1px solid #efe9e1!important;border-radius:26px!important;background:#fff!important;box-shadow:0 10px 28px rgba(58,57,54,.06)!important;position:static!important;transform:none!important
}
html body #studentDashboard #studentViewGames .dashboard-flow .section-kicker{display:block;font:900 11.5px/1 Nunito,Arial,sans-serif;letter-spacing:.08em;color:#1e1f1f}
html body #studentDashboard #studentViewGames .dashboard-flow h2{margin:8px 0 16px!important;font:900 20px/1.2 Nunito,Arial,sans-serif!important;color:#2a2a29!important}
html body #studentDashboard #studentViewGames .game-flow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
html body #studentDashboard #studentViewGames .game-flow > div{
  display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;
  padding:16px 18px!important;border:1px solid #efe9e1!important;border-radius:16px!important;background:#f6f3ee!important;min-height:0!important
}
html body #studentDashboard #studentViewGames .game-flow > div b{grid-row:1 / 3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#efe9e1;color:#1e1f1f;font:900 15px Nunito,Arial,sans-serif}
html body #studentDashboard #studentViewGames .game-flow > div span{font:800 14px/1.2 Nunito,Arial,sans-serif;color:#2a2a29}
html body #studentDashboard #studentViewGames .game-flow > div small{font:600 12px/1.35 Nunito,Arial,sans-serif;color:#84817d}

/* ---------- profil ---------- */
html body #studentDashboard #studentViewProfile .profile-layout{display:block!important;max-width:none!important}
html body #studentDashboard #studentViewProfile:not(.hidden) .profile-summary,html body #studentDashboard #studentViewProfile .profile-summary{display:none!important}
html body #studentDashboard #studentViewProfile .sd-profile-form{display:grid!important;gap:24px!important;margin:0!important;padding:0!important}
html body #studentDashboard #studentViewProfile .sd-card{
  display:block!important;box-sizing:border-box!important;margin:0!important;padding:32px!important;border:1px solid #efe9e1!important;border-radius:28px!important;
  background:#fff!important;box-shadow:0 10px 30px rgba(58,57,54,.06)!important;max-width:none!important;width:auto!important
}
html body #studentDashboard #studentViewProfile .section-kicker{display:block!important;font:900 12px/1 Nunito,Arial,sans-serif!important;letter-spacing:.08em!important;color:#1e1f1f!important}
html body #studentDashboard #studentViewProfile .sd-kicker-gold{color:#e0a100!important}
html body #studentDashboard #studentViewProfile .profile-card-head h2,
html body #studentDashboard #studentViewProfile .password-section-head h3{margin:10px 0 4px!important;font:900 19px/1.25 Nunito,Arial,sans-serif!important;color:#2a2a29!important}
html body #studentDashboard #studentViewProfile .profile-card-head p,
html body #studentDashboard #studentViewProfile .password-section-head p{margin:0!important;font:600 13px/1.5 Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard #studentViewProfile .profile-photo-area{
  display:flex!important;align-items:center!important;gap:24px!important;margin:34px 0 0!important;padding:0 0 32px!important;border-bottom:1px solid #efe9e1!important;background:none!important;border-top:0!important
}
html body #studentDashboard #studentViewProfile .sd-avatar-wrap{position:relative;width:100px;height:100px;flex:0 0 100px}
html body #studentDashboard #studentViewProfile .profile-avatar-large{
  width:100px!important;height:100px!important;border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;margin:0!important;
  background:#e5f6fd!important;font-size:40px!important;box-shadow:0 0 0 3px #fff,0 0 0 5px #8fd8f5!important
}
html body #studentDashboard #studentViewProfile .sd-cam{
  position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1e1f1f;color:#fff;
  border:3px solid #fff;cursor:pointer;box-shadow:0 4px 10px rgba(30,31,31,.3)
}
html body #studentDashboard #studentViewProfile .sd-cam svg{width:14px;height:14px}
html body #studentDashboard #studentViewProfile .sd-photo-text strong{display:block;font:800 14px/1.2 Nunito,Arial,sans-serif;color:#2a2a29}
html body #studentDashboard #studentViewProfile .sd-photo-text p{margin:6px 0 12px!important;font:600 12.5px/1.4 Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard #studentViewProfile .sd-photo-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
html body #studentDashboard #studentViewProfile .sd-photo-actions .btn{
  height:34px!important;min-height:34px!important;padding:0 16px!important;border-radius:10px!important;display:inline-flex!important;align-items:center!important;
  font:800 12.5px Nunito,Arial,sans-serif!important;cursor:pointer!important;box-sizing:border-box!important;margin:0!important;box-shadow:none!important
}
html body #studentDashboard #studentViewProfile .sd-photo-actions .btn-primary{background:#1e1f1f!important;color:#fff!important;border:1px solid #1e1f1f!important}
html body #studentDashboard #studentViewProfile .sd-photo-actions .btn-outline{background:#fff!important;color:#4a4a49!important;border:1px solid #e5e0d9!important}
html body #studentDashboard #studentViewProfile .profile-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 20px!important;margin-top:32px!important}
html body #studentDashboard #studentViewProfile .field-group{display:block!important;margin:0!important}
html body #studentDashboard #studentViewProfile .field-group label{display:block!important;margin:0 0 10px!important;font:800 13px/1.2 Nunito,Arial,sans-serif!important;color:#2a2a29!important}
html body #studentDashboard #studentViewProfile .field-group input,
html body #studentDashboard #studentViewProfile .field-group select{
  display:block!important;width:100%!important;height:44px!important;box-sizing:border-box!important;padding:0 14px!important;border:1px solid #e5e0d9!important;border-radius:12px!important;
  background:#fff!important;color:#2a2a29!important;font:600 14px Nunito,"Segoe UI",Arial,sans-serif!important;outline:0!important;box-shadow:none!important
}
html body #studentDashboard #studentViewProfile .field-group input::placeholder{color:#a9a49e!important}
html body #studentDashboard #studentViewProfile .field-group input:focus,
html body #studentDashboard #studentViewProfile .field-group select:focus{border-color:#ba9d7f!important;box-shadow:0 0 0 3px rgba(30,31,31,.12)!important}
html body #studentDashboard #studentViewProfile .password-stack{display:grid!important;gap:20px!important;margin-top:24px!important}
html body #studentDashboard #studentViewProfile .password-field{position:relative!important;display:block!important}
html body #studentDashboard #studentViewProfile .password-field input{padding-right:52px!important}
html body #studentDashboard #studentViewProfile .password-hint{display:block!important;margin-top:8px!important;font:600 11.5px Nunito,Arial,sans-serif!important;color:#84817d!important}
html body #studentDashboard #studentViewProfile .password-toggle{
  position:absolute!important;right:6px!important;top:50%!important;transform:translateY(-50%)!important;width:36px!important;height:36px!important;padding:0!important;
  display:inline-grid!important;place-items:center!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#84817d!important;
  font-size:0!important;line-height:0!important;cursor:pointer!important
}
html body #studentDashboard #studentViewProfile .password-toggle svg{width:20px;height:20px;display:block;pointer-events:none}
html body #studentDashboard #studentViewProfile .password-toggle:hover,
html body #studentDashboard #studentViewProfile .password-toggle[aria-pressed="true"]{color:#1e1f1f!important;background:#efe9e1!important}
html body #studentDashboard #studentViewProfile .password-toggle:focus-visible{outline:2px solid #1e1f1f;outline-offset:1px}
html body #studentDashboard #studentViewProfile .profile-message{min-height:0;margin-top:14px;font:700 13px Nunito,Arial,sans-serif}
html body #studentDashboard #studentViewProfile .profile-message:empty{display:none}
html body #studentDashboard #studentViewProfile .profile-actions{display:flex!important;justify-content:flex-end!important;gap:10px!important;margin-top:24px!important;width:auto!important}
html body #studentDashboard #studentViewProfile #profileResetBtn{display:none!important}
html body #studentDashboard #studentViewProfile .profile-actions .btn-primary{
  height:44px!important;padding:0 26px!important;border-radius:12px!important;background:#1e1f1f!important;color:#fff!important;border:0!important;
  font:800 14px Nunito,Arial,sans-serif!important;cursor:pointer!important;box-shadow:0 8px 18px rgba(30,31,31,.28)!important
}

/* ---------- responsif ---------- */
@media(max-width:1000px){
  html body #studentDashboard .sd-stat-cards{grid-template-columns:1fr!important}
  html body #studentDashboard #studentViewGames .game-flow{grid-template-columns:1fr!important}
}
@media(max-width:860px){
  html body #studentDashboard:not(.hidden){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important}
  html body #studentDashboard .student-topbar{grid-column:1!important;grid-row:1!important;height:auto!important;padding:12px 16px!important}
  html body #studentDashboard .student-search{display:none!important}
  html body #studentDashboard .student-top-actions{justify-content:flex-end!important}
  html body #studentDashboard .student-sidebar-modern{grid-column:1!important;grid-row:2!important;position:static!important;height:auto!important;padding:16px!important}
  html body #studentDashboard .sidebar-help{display:none!important}
  html body #studentDashboard .student-sidebar-modern .side-nav{grid-template-columns:repeat(3,1fr)!important}
  html body #studentDashboard .student-sidebar-modern .side-nav button{justify-content:center!important;padding:0 8px!important;font-size:13px!important}
  html body #studentDashboard .portal-content{grid-column:1!important;grid-row:3!important;padding:24px 16px 40px!important}
  html body #studentDashboard #studentViewProfile .sd-card{padding:22px!important}
  html body #studentDashboard #studentViewProfile .profile-grid{grid-template-columns:1fr!important}
  html body #studentDashboard #studentViewProfile .profile-photo-area{flex-direction:column;align-items:flex-start}
  html body #studentDashboard .sd-chart-card{padding:18px 14px}
}