/*
  RAVID Student Dashboard Final — Premium Reference Match
  Scope: visual polish for #section-student-menu only.
  Safe: no auth/backend/database/app.js changes.
*/

body.ravid-student-dashboard-active,
body.ravid-student-dashboard-flagship,
body.ravid-student-dashboard-match {
  --sd-blue: #2563eb;
  --sd-cyan: #0ea5e9;
  --sd-navy: #0b1430;
  --sd-muted: #5f6f8a;
  --sd-border: rgba(134, 190, 255, 0.36);
  --sd-card: rgba(255,255,255,0.78);
  --sd-shadow: 0 22px 60px rgba(37, 99, 235, 0.10);
  background:
    radial-gradient(circle at 0% 28%, rgba(109, 175, 255, 0.20) 0 180px, transparent 181px),
    radial-gradient(circle at 94% 88%, rgba(14, 165, 233, 0.18) 0 230px, transparent 231px),
    linear-gradient(90deg, #e7f3ff 0%, #f6fbff 42%, #eff9ff 74%, #dff6ff 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.ravid-student-dashboard-active .main-container,
body.ravid-student-dashboard-flagship .main-container,
body.ravid-student-dashboard-match .main-container {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 24px 28px 48px !important;
}

body.ravid-student-dashboard-active #card-root,
body.ravid-student-dashboard-flagship #card-root,
body.ravid-student-dashboard-match #card-root {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Top app bar like the reference: logo, navigation pills, bell/user area. */
body.ravid-student-dashboard-active .app-bar,
body.ravid-student-dashboard-flagship .app-bar,
body.ravid-student-dashboard-match .app-bar {
  position: sticky !important;
  top: 10px !important;
  z-index: 25 !important;
  width: min(100%, 1440px) !important;
  margin: 12px auto 18px !important;
  padding: 14px 18px !important;
  min-height: 86px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(132, 188, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 22px 50px rgba(37, 99, 235, 0.11) !important;
}

body.ravid-student-dashboard-active .brand-mark,
body.ravid-student-dashboard-flagship .brand-mark,
body.ravid-student-dashboard-match .brand-mark {
  gap: 13px !important;
}

body.ravid-student-dashboard-active .brand-logo,
body.ravid-student-dashboard-flagship .brand-logo,
body.ravid-student-dashboard-match .brand-logo {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #2958f2 0%, #1aa8e9 78%) !important;
  box-shadow: 0 18px 35px rgba(37, 99, 235, 0.24) !important;
}

body.ravid-student-dashboard-active .brand-copy,
body.ravid-student-dashboard-flagship .brand-copy,
body.ravid-student-dashboard-match .brand-copy {
  display: block !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  color: var(--sd-navy) !important;
  font-weight: 950 !important;
}

body.ravid-student-dashboard-active .brand-subtitle,
body.ravid-student-dashboard-flagship .brand-subtitle,
body.ravid-student-dashboard-match .brand-subtitle {
  display: block !important;
  margin-top: 5px !important;
  font-size: 13.5px !important;
  color: #667792 !important;
  font-weight: 650 !important;
}

body.ravid-student-dashboard-active .app-bar-center,
body.ravid-student-dashboard-flagship .app-bar-center,
body.ravid-student-dashboard-match .app-bar-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body.ravid-student-dashboard-active .app-title,
body.ravid-student-dashboard-active .app-subtitle,
body.ravid-student-dashboard-flagship .app-title,
body.ravid-student-dashboard-flagship .app-subtitle,
body.ravid-student-dashboard-match .app-title,
body.ravid-student-dashboard-match .app-subtitle {
  display: none !important;
}

body.ravid-student-dashboard-active .ravid-nav-pill,
body.ravid-student-dashboard-flagship .ravid-nav-pill,
body.ravid-student-dashboard-match .ravid-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(132, 188, 255, 0.46) !important;
  background: rgba(255,255,255,0.82) !important;
  color: #12203d !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.06) !important;
}

body.ravid-student-dashboard-active .app-bar-right,
body.ravid-student-dashboard-flagship .app-bar-right,
body.ravid-student-dashboard-match .app-bar-right {
  gap: 12px !important;
}

body.ravid-student-dashboard-active .app-bar-right::before,
body.ravid-student-dashboard-flagship .app-bar-right::before,
body.ravid-student-dashboard-match .app-bar-right::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(132,188,255,.44);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(37,99,235,.08);
  background-image:
    radial-gradient(circle at 50% 35%, transparent 0 8px, #0f172a 8.5px 9.5px, transparent 10px),
    radial-gradient(circle at 50% 64%, #0f172a 0 2px, transparent 2.5px);
  opacity: .88;
}

body.ravid-student-dashboard-active #user-info-label,
body.ravid-student-dashboard-flagship #user-info-label,
body.ravid-student-dashboard-match #user-info-label {
  min-height: 54px !important;
  min-width: 126px !important;
  padding: 9px 42px 9px 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(132,188,255,.46) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.07) !important;
  color: var(--sd-navy) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  position: relative !important;
}

body.ravid-student-dashboard-active #user-info-label::after,
body.ravid-student-dashboard-flagship #user-info-label::after,
body.ravid-student-dashboard-match #user-info-label::after {
  content: "⌄";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-54%);
  color: #47617f;
  font-size: 18px;
  font-weight: 900;
}

/* Student dashboard shell */
body.ravid-student-dashboard-active #section-student-menu,
body.ravid-student-dashboard-flagship #section-student-menu,
body.ravid-student-dashboard-match #section-student-menu {
  display: block !important;
  width: min(100%, 1440px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 34px !important;
}
body.ravid-student-dashboard-active #section-student-menu.hidden,
body.ravid-student-dashboard-flagship #section-student-menu.hidden,
body.ravid-student-dashboard-match #section-student-menu.hidden { display: none !important; }

body.ravid-student-dashboard-active .student-hero-card,
body.ravid-student-dashboard-flagship .student-hero-card,
body.ravid-student-dashboard-match .student-hero-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(520px, 0.96fr) !important;
  gap: 46px !important;
  align-items: center !important;
  padding: 58px 54px !important;
  min-height: 458px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(132,188,255,.38) !important;
  background:
    radial-gradient(circle at 5% 20%, rgba(184, 222, 255, .33), transparent 27%),
    radial-gradient(circle at 88% 18%, rgba(209, 245, 255, .74), transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,250,255,.86)) !important;
  box-shadow: var(--sd-shadow) !important;
  overflow: hidden !important;
  position: relative !important;
}

body.ravid-student-dashboard-active .student-hero-copy,
body.ravid-student-dashboard-flagship .student-hero-copy,
body.ravid-student-dashboard-match .student-hero-copy {
  min-width: 0 !important;
}

body.ravid-student-dashboard-active .student-hero-copy .eyebrow,
body.ravid-student-dashboard-flagship .student-hero-copy .eyebrow,
body.ravid-student-dashboard-match .student-hero-copy .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(132,188,255,.48) !important;
  background: rgba(255,255,255,.72) !important;
  color: #1d4ed8 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.08) !important;
}

body.ravid-student-dashboard-active .section-title,
body.ravid-student-dashboard-flagship .section-title,
body.ravid-student-dashboard-match .section-title {
  max-width: 700px !important;
  margin: 28px 0 16px !important;
  color: var(--sd-navy) !important;
  font-size: clamp(44px, 4.2vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.065em !important;
  font-weight: 950 !important;
}

body.ravid-student-dashboard-active #student-greeting,
body.ravid-student-dashboard-flagship #student-greeting,
body.ravid-student-dashboard-match #student-greeting {
  max-width: 680px !important;
  margin: 0 0 30px !important;
  color: #5d6f89 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
}

body.ravid-student-dashboard-active .student-quick-stats,
body.ravid-student-dashboard-flagship .student-quick-stats,
body.ravid-student-dashboard-match .student-quick-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 670px !important;
}

body.ravid-student-dashboard-active .student-quick-stats > div,
body.ravid-student-dashboard-flagship .student-quick-stats > div,
body.ravid-student-dashboard-match .student-quick-stats > div {
  min-height: 122px !important;
  padding: 26px 22px 22px 92px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(132,188,255,.38) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 16px 34px rgba(37,99,235,.08) !important;
  position: relative !important;
}

body.ravid-student-dashboard-active .student-quick-stats > div::before,
body.ravid-student-dashboard-flagship .student-quick-stats > div::before,
body.ravid-student-dashboard-match .student-quick-stats > div::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,.13), rgba(14,165,233,.16));
  border: 1px solid rgba(132,188,255,.34);
}
body.ravid-student-dashboard-active .student-quick-stats > div:nth-child(1)::after,
body.ravid-student-dashboard-flagship .student-quick-stats > div:nth-child(1)::after,
body.ravid-student-dashboard-match .student-quick-stats > div:nth-child(1)::after { content: "●"; }
body.ravid-student-dashboard-active .student-quick-stats > div:nth-child(2)::after,
body.ravid-student-dashboard-flagship .student-quick-stats > div:nth-child(2)::after,
body.ravid-student-dashboard-match .student-quick-stats > div:nth-child(2)::after { content: "◆"; }
body.ravid-student-dashboard-active .student-quick-stats > div:nth-child(3)::after,
body.ravid-student-dashboard-flagship .student-quick-stats > div:nth-child(3)::after,
body.ravid-student-dashboard-match .student-quick-stats > div:nth-child(3)::after { content: "⌁"; }
body.ravid-student-dashboard-active .student-quick-stats > div::after,
body.ravid-student-dashboard-flagship .student-quick-stats > div::after,
body.ravid-student-dashboard-match .student-quick-stats > div::after {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--sd-blue);
  font-size: 22px;
  font-weight: 900;
}

body.ravid-student-dashboard-active .student-quick-stats span,
body.ravid-student-dashboard-flagship .student-quick-stats span,
body.ravid-student-dashboard-match .student-quick-stats span {
  display: block !important;
  color: #6a7a91 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
body.ravid-student-dashboard-active .student-quick-stats strong,
body.ravid-student-dashboard-flagship .student-quick-stats strong,
body.ravid-student-dashboard-match .student-quick-stats strong {
  color: #0d1832 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

/* Hero visual illustrated card */
body.ravid-student-dashboard-active .student-hero-visual,
body.ravid-student-dashboard-flagship .student-hero-visual,
body.ravid-student-dashboard-match .student-hero-visual {
  min-height: 382px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,208,94,.92) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 62%, rgba(121,232,172,.96) 0 8px, transparent 9px),
    radial-gradient(circle at 62% 12%, rgba(116,214,255,.94) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 68%, rgba(255,213,111,.94) 0 7px, transparent 8px),
    linear-gradient(135deg, #2459f1 0%, #2374f4 48%, #1ca7ec 100%) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: 0 30px 70px rgba(37,99,235,.22) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  position: relative !important;
}

body.ravid-student-dashboard-active .student-hero-visual::before,
body.ravid-student-dashboard-flagship .student-hero-visual::before,
body.ravid-student-dashboard-match .student-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 50%, rgba(255,255,255,.12) 0 68px, transparent 69px),
    linear-gradient(130deg, transparent 0 35%, rgba(255,255,255,.10) 36% 48%, transparent 49%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 78px, rgba(255,255,255,.18) 80px 82px);
  opacity: .9;
}

body.ravid-student-dashboard-active .student-hero-visual::after,
body.ravid-student-dashboard-flagship .student-hero-visual::after,
body.ravid-student-dashboard-match .student-hero-visual::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 12%;
  bottom: 58px;
  height: 74px;
  border-radius: 18px;
  background:
    linear-gradient(#dbeafe, #eff6ff) 22% 38% / 150px 16px no-repeat,
    linear-gradient(#bfdbfe, #e0f2fe) 26% 58% / 170px 16px no-repeat,
    linear-gradient(#dbeafe, #f8fafc) 20% 78% / 160px 16px no-repeat,
    radial-gradient(ellipse at 72% 68%, rgba(255,255,255,.90) 0 18px, transparent 19px),
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.82) 8% 52%, transparent 52% 100%);
  opacity: .75;
}

body.ravid-student-dashboard-active .student-hero-visual strong,
body.ravid-student-dashboard-flagship .student-hero-visual strong,
body.ravid-student-dashboard-match .student-hero-visual strong {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin-top: -18px !important;
  color: #fff !important;
  font-size: clamp(52px, 5vw, 78px) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  font-weight: 950 !important;
  text-shadow: 0 14px 26px rgba(37,99,235,.26) !important;
}

body.ravid-student-dashboard-active .student-hero-visual p,
body.ravid-student-dashboard-flagship .student-hero-visual p,
body.ravid-student-dashboard-match .student-hero-visual p {
  position: relative !important;
  z-index: 2 !important;
  margin: 10px 0 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 18px !important;
  font-weight: 750 !important;
}

body.ravid-student-dashboard-active .student-progress-orbit,
body.ravid-student-dashboard-flagship .student-progress-orbit,
body.ravid-student-dashboard-match .student-progress-orbit {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* Access row like reference */
body.ravid-student-dashboard-active .student-section-intro,
body.ravid-student-dashboard-flagship .student-section-intro,
body.ravid-student-dashboard-match .student-section-intro {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 20px 0 20px !important;
  padding: 26px 36px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(132,188,255,.34) !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: 0 18px 42px rgba(37,99,235,.08) !important;
}

body.ravid-student-dashboard-active .student-section-intro h3,
body.ravid-student-dashboard-flagship .student-section-intro h3,
body.ravid-student-dashboard-match .student-section-intro h3 {
  margin: 0 0 6px !important;
  color: var(--sd-navy) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}
body.ravid-student-dashboard-active .student-section-intro p,
body.ravid-student-dashboard-flagship .student-section-intro p,
body.ravid-student-dashboard-match .student-section-intro p {
  margin: 0 !important;
  color: #5f6f8a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

body.ravid-student-dashboard-active .student-access-pill,
body.ravid-student-dashboard-flagship .student-access-pill,
body.ravid-student-dashboard-match .student-access-pill {
  flex: 0 0 auto !important;
  min-width: 330px !important;
  padding: 18px 24px 18px 72px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(14,165,233,.32) !important;
  background: linear-gradient(135deg, rgba(239,249,255,.94), rgba(231,246,255,.72)) !important;
  position: relative !important;
}
body.ravid-student-dashboard-active .student-access-pill::before,
body.ravid-student-dashboard-flagship .student-access-pill::before,
body.ravid-student-dashboard-match .student-access-pill::before {
  content: "◇";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #2563eb;
  background: rgba(37,99,235,.12);
  font-weight: 950;
}
body.ravid-student-dashboard-active .student-access-pill strong,
body.ravid-student-dashboard-flagship .student-access-pill strong,
body.ravid-student-dashboard-match .student-access-pill strong {
  display: block !important;
  color: #1d4ed8 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}
body.ravid-student-dashboard-active .student-access-pill span,
body.ravid-student-dashboard-flagship .student-access-pill span,
body.ravid-student-dashboard-match .student-access-pill span {
  display: block !important;
  margin-top: 4px !important;
  color: #52637b !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
}

/* Hide extra non-reference journey block visually for the premium dashboard landing page. */
body.ravid-student-dashboard-active .student-journey-card,
body.ravid-student-dashboard-flagship .student-journey-card,
body.ravid-student-dashboard-match .student-journey-card {
  display: none !important;
}

/* Menu cards: reference shows 4 cards. Keep first 4 visible and hide advanced modules from this main dashboard view. */
body.ravid-student-dashboard-active .student-menu-grid,
body.ravid-student-dashboard-flagship .student-menu-grid,
body.ravid-student-dashboard-match .student-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
}
body.ravid-student-dashboard-active .student-menu-card:nth-child(n+5),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(n+5),
body.ravid-student-dashboard-match .student-menu-card:nth-child(n+5) {
  display: none !important;
}

body.ravid-student-dashboard-active .student-menu-card,
body.ravid-student-dashboard-flagship .student-menu-card,
body.ravid-student-dashboard-match .student-menu-card {
  min-height: 248px !important;
  padding: 28px 28px 24px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(132,188,255,.36) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 20px 44px rgba(37,99,235,.09) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  text-align: left !important;
  color: inherit !important;
  overflow: hidden !important;
  position: relative !important;
}
body.ravid-student-dashboard-active .student-menu-card::after,
body.ravid-student-dashboard-flagship .student-menu-card::after,
body.ravid-student-dashboard-match .student-menu-card::after {
  content: "Mulai";
  align-self: end;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(132,188,255,.42);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 900;
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 -1px 0 rgba(37,99,235,.05);
}
body.ravid-student-dashboard-active .student-menu-card:nth-child(1)::after { content: "Mulai Kuis ›"; }
body.ravid-student-dashboard-active .student-menu-card:nth-child(2)::after { content: "Baca Ringkasan ›"; }
body.ravid-student-dashboard-active .student-menu-card:nth-child(3)::after { content: "Tonton Video ›"; }
body.ravid-student-dashboard-active .student-menu-card:nth-child(4)::after { content: "Lihat Rapor ›"; }
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(1)::after { content: "Mulai Kuis ›"; }
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2)::after { content: "Baca Ringkasan ›"; }
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(3)::after { content: "Tonton Video ›"; }
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(4)::after { content: "Lihat Rapor ›"; }
body.ravid-student-dashboard-match .student-menu-card:nth-child(1)::after { content: "Mulai Kuis ›"; }
body.ravid-student-dashboard-match .student-menu-card:nth-child(2)::after { content: "Baca Ringkasan ›"; }
body.ravid-student-dashboard-match .student-menu-card:nth-child(3)::after { content: "Tonton Video ›"; }
body.ravid-student-dashboard-match .student-menu-card:nth-child(4)::after { content: "Lihat Rapor ›"; }

body.ravid-student-dashboard-active .menu-card-icon,
body.ravid-student-dashboard-flagship .menu-card-icon,
body.ravid-student-dashboard-match .menu-card-icon {
  width: 66px !important;
  height: 66px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 26px !important;
  background: linear-gradient(135deg, #2f5df6, #21a9ea) !important;
  color: #fff !important;
  box-shadow: 0 18px 32px rgba(37,99,235,.22) !important;
}
body.ravid-student-dashboard-active .student-menu-card:nth-child(2) .menu-card-icon,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2) .menu-card-icon,
body.ravid-student-dashboard-match .student-menu-card:nth-child(2) .menu-card-icon { background: linear-gradient(135deg, #705cf6, #4263eb) !important; }
body.ravid-student-dashboard-active .student-menu-card:nth-child(4) .menu-card-icon,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(4) .menu-card-icon,
body.ravid-student-dashboard-match .student-menu-card:nth-child(4) .menu-card-icon { background: linear-gradient(135deg, #60d394, #2fb36d) !important; }

body.ravid-student-dashboard-active .menu-card-copy strong,
body.ravid-student-dashboard-flagship .menu-card-copy strong,
body.ravid-student-dashboard-match .menu-card-copy strong {
  display: block !important;
  color: var(--sd-navy) !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  margin-bottom: 16px !important;
}
body.ravid-student-dashboard-active .menu-card-copy small,
body.ravid-student-dashboard-flagship .menu-card-copy small,
body.ravid-student-dashboard-match .menu-card-copy small {
  display: block !important;
  color: #5f6f8a !important;
  font-size: 15.5px !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
}

@media (max-width: 1180px) {
  body.ravid-student-dashboard-active .student-hero-card,
  body.ravid-student-dashboard-flagship .student-hero-card,
  body.ravid-student-dashboard-match .student-hero-card {
    grid-template-columns: 1fr !important;
    padding: 40px 28px !important;
  }
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ravid-student-dashboard-active .student-section-intro,
  body.ravid-student-dashboard-flagship .student-section-intro,
  body.ravid-student-dashboard-match .student-section-intro {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (max-width: 720px) {
  body.ravid-student-dashboard-active .main-container,
  body.ravid-student-dashboard-flagship .main-container,
  body.ravid-student-dashboard-match .main-container {
    padding: 14px 12px 34px !important;
  }
  body.ravid-student-dashboard-active .app-bar,
  body.ravid-student-dashboard-flagship .app-bar,
  body.ravid-student-dashboard-match .app-bar {
    position: static !important;
    min-height: 0 !important;
  }
  body.ravid-student-dashboard-active .student-quick-stats,
  body.ravid-student-dashboard-flagship .student-quick-stats,
  body.ravid-student-dashboard-match .student-quick-stats,
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid {
    grid-template-columns: 1fr !important;
  }
  body.ravid-student-dashboard-active .section-title,
  body.ravid-student-dashboard-flagship .section-title,
  body.ravid-student-dashboard-match .section-title {
    font-size: clamp(34px, 10vw, 44px) !important;
  }
}

/*
  RAVID Student Dashboard Premium v3 — Super Premium Comfort Layer
  Final layer on top of the consolidated dashboard CSS.
  Goal: make the dashboard closer to the reference: larger hero, crisp cards,
  stronger visual illustration, readable menu text, and no clipped cards.
*/

body.ravid-student-dashboard-active,
body.ravid-student-dashboard-flagship,
body.ravid-student-dashboard-match {
  --sd-blue: #2563eb;
  --sd-blue-2: #1d4ed8;
  --sd-cyan: #0ea5e9;
  --sd-sky: #38bdf8;
  --sd-navy: #0b1430;
  --sd-muted: #60718d;
  --sd-soft: rgba(239, 248, 255, .88);
  --sd-card: rgba(255,255,255,.82);
  --sd-border: rgba(119, 179, 255, .42);
  --sd-shadow: 0 28px 80px rgba(37, 99, 235, 0.12);
}

/* Page breathing room and premium shell */
body.ravid-student-dashboard-active .main-container,
body.ravid-student-dashboard-flagship .main-container,
body.ravid-student-dashboard-match .main-container {
  width: min(100%, 1580px) !important;
  max-width: 1580px !important;
  padding: clamp(18px, 2vw, 30px) clamp(18px, 2.4vw, 42px) 56px !important;
}

body.ravid-student-dashboard-active #section-student-menu,
body.ravid-student-dashboard-flagship #section-student-menu,
body.ravid-student-dashboard-match #section-student-menu {
  width: min(100%, 1500px) !important;
  max-width: 1500px !important;
  padding: 10px !important;
  border-radius: 40px !important;
  background:
    radial-gradient(circle at 4% 18%, rgba(166, 215, 255, .28), transparent 23%),
    radial-gradient(circle at 92% 8%, rgba(177, 238, 255, .32), transparent 29%),
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(238,249,255,.36)) !important;
  border: 1px solid rgba(132,188,255,.28) !important;
  box-shadow: 0 34px 90px rgba(37,99,235,.10) !important;
}

/* Top nav: cleaner, strong but calm */
body.ravid-student-dashboard-active .app-bar,
body.ravid-student-dashboard-flagship .app-bar,
body.ravid-student-dashboard-match .app-bar {
  width: min(100%, 1500px) !important;
  max-width: 1500px !important;
  min-height: 78px !important;
  margin: 10px auto 22px !important;
  padding: 14px 18px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.86) !important;
}

body.ravid-student-dashboard-active .ravid-nav-pill,
body.ravid-student-dashboard-flagship .ravid-nav-pill,
body.ravid-student-dashboard-match .ravid-nav-pill {
  min-height: 42px !important;
  padding: 0 17px !important;
  border-radius: 16px !important;
  letter-spacing: -.01em !important;
}

/* Hero closer to reference: larger, balanced, and not cramped. */
body.ravid-student-dashboard-active .student-hero-card,
body.ravid-student-dashboard-flagship .student-hero-card,
body.ravid-student-dashboard-match .student-hero-card {
  grid-template-columns: minmax(0, 1.02fr) minmax(560px, .98fr) !important;
  gap: clamp(34px, 4vw, 60px) !important;
  min-height: 472px !important;
  padding: clamp(44px, 4.2vw, 68px) clamp(46px, 4vw, 68px) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(182, 222, 255, .56), transparent 30%),
    radial-gradient(circle at 96% 5%, rgba(199, 244, 255, .55), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,250,255,.88)) !important;
  box-shadow: 0 32px 86px rgba(37,99,235,.12) !important;
}

body.ravid-student-dashboard-active .student-hero-card::before,
body.ravid-student-dashboard-flagship .student-hero-card::before,
body.ravid-student-dashboard-match .student-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 32% 10%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 58%, rgba(37,99,235,.04) 58% 59%, transparent 60%),
    linear-gradient(155deg, transparent 0 36%, rgba(14,165,233,.035) 37% 38%, transparent 39%);
  pointer-events: none;
}

body.ravid-student-dashboard-active .section-title,
body.ravid-student-dashboard-flagship .section-title,
body.ravid-student-dashboard-match .section-title {
  max-width: 770px !important;
  margin: 22px 0 16px !important;
  font-size: clamp(46px, 4.05vw, 68px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.07em !important;
}

body.ravid-student-dashboard-active #student-greeting,
body.ravid-student-dashboard-flagship #student-greeting,
body.ravid-student-dashboard-match #student-greeting {
  max-width: 720px !important;
  margin-bottom: 28px !important;
  font-size: 17px !important;
  color: #5e708d !important;
}

body.ravid-student-dashboard-active .student-quick-stats,
body.ravid-student-dashboard-flagship .student-quick-stats,
body.ravid-student-dashboard-match .student-quick-stats {
  max-width: 710px !important;
  gap: 18px !important;
}

body.ravid-student-dashboard-active .student-quick-stats > div,
body.ravid-student-dashboard-flagship .student-quick-stats > div,
body.ravid-student-dashboard-match .student-quick-stats > div {
  min-height: 106px !important;
  padding: 20px 20px 18px 82px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
}

body.ravid-student-dashboard-active .student-quick-stats > div::before,
body.ravid-student-dashboard-flagship .student-quick-stats > div::before,
body.ravid-student-dashboard-match .student-quick-stats > div::before {
  left: 18px !important;
  width: 50px !important;
  height: 50px !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.42), 0 12px 24px rgba(37,99,235,.10) !important;
}

/* Right visual: premium illustration feeling without new assets. */
body.ravid-student-dashboard-active .student-hero-visual,
body.ravid-student-dashboard-flagship .student-hero-visual,
body.ravid-student-dashboard-match .student-hero-visual {
  min-height: 402px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 16% 58%, rgba(86, 231, 158, .92) 0 9px, transparent 10px),
    radial-gradient(circle at 76% 18%, rgba(255, 184, 91, .92) 0 9px, transparent 10px),
    radial-gradient(circle at 84% 72%, rgba(255, 218, 105, .92) 0 8px, transparent 9px),
    radial-gradient(circle at 56% 10%, rgba(129, 226, 255, .78) 0 5px, transparent 6px),
    linear-gradient(135deg, #2559f2 0%, #2468f2 45%, #12a9e8 100%) !important;
}

body.ravid-student-dashboard-active .student-hero-visual::before,
body.ravid-student-dashboard-flagship .student-hero-visual::before,
body.ravid-student-dashboard-match .student-hero-visual::before {
  background:
    radial-gradient(circle at 86% 44%, rgba(255,255,255,.12) 0 76px, transparent 77px),
    linear-gradient(130deg, transparent 0 33%, rgba(255,255,255,.10) 34% 47%, transparent 48%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 74px, rgba(255,255,255,.18) 76px 78px) !important;
  opacity: 1 !important;
}

body.ravid-student-dashboard-active .student-hero-visual::after,
body.ravid-student-dashboard-flagship .student-hero-visual::after,
body.ravid-student-dashboard-match .student-hero-visual::after {
  left: 10% !important;
  right: 9% !important;
  bottom: 52px !important;
  height: 92px !important;
  background:
    radial-gradient(ellipse at 11% 72%, rgba(255,255,255,.76) 0 34px, transparent 35px),
    linear-gradient(#dceafe, #f8fbff) 22% 36% / 186px 17px no-repeat,
    linear-gradient(#bdd7ff, #e9f4ff) 25% 56% / 212px 17px no-repeat,
    linear-gradient(#e7f0ff, #fff) 20% 76% / 194px 17px no-repeat,
    linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.82) 50% 52%, transparent 53% 100%),
    radial-gradient(ellipse at 78% 74%, rgba(255,255,255,.82) 0 26px, transparent 27px) !important;
  opacity: .82 !important;
}

body.ravid-student-dashboard-active .student-hero-visual strong,
body.ravid-student-dashboard-flagship .student-hero-visual strong,
body.ravid-student-dashboard-match .student-hero-visual strong {
  font-size: clamp(58px, 5vw, 84px) !important;
  margin-top: -24px !important;
}

body.ravid-student-dashboard-active .student-hero-visual p,
body.ravid-student-dashboard-flagship .student-hero-visual p,
body.ravid-student-dashboard-match .student-hero-visual p {
  font-size: 18px !important;
  letter-spacing: .01em !important;
}

/* Access row now feels more like a product status card. */
body.ravid-student-dashboard-active .student-section-intro,
body.ravid-student-dashboard-flagship .student-section-intro,
body.ravid-student-dashboard-match .student-section-intro {
  margin: 22px 0 22px !important;
  padding: 24px 30px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.82) !important;
}

body.ravid-student-dashboard-active .student-access-pill,
body.ravid-student-dashboard-flagship .student-access-pill,
body.ravid-student-dashboard-match .student-access-pill {
  min-width: min(380px, 100%) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 38px rgba(14,165,233,.08) !important;
}

/* Main menu cards: super premium, readable, and not clipped. */
body.ravid-student-dashboard-active .student-menu-grid,
body.ravid-student-dashboard-flagship .student-menu-grid,
body.ravid-student-dashboard-match .student-menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body.ravid-student-dashboard-active .student-menu-card,
body.ravid-student-dashboard-flagship .student-menu-card,
body.ravid-student-dashboard-match .student-menu-card {
  min-height: 272px !important;
  padding: 28px 28px 24px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(233,244,255,.92), transparent 38%),
    rgba(255,255,255,.84) !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

body.ravid-student-dashboard-active .student-menu-card:hover,
body.ravid-student-dashboard-flagship .student-menu-card:hover,
body.ravid-student-dashboard-match .student-menu-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(37,99,235,.34) !important;
  box-shadow: 0 26px 64px rgba(37,99,235,.13) !important;
}

body.ravid-student-dashboard-active .menu-card-icon,
body.ravid-student-dashboard-flagship .menu-card-icon,
body.ravid-student-dashboard-match .menu-card-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  margin-bottom: 22px !important;
}

body.ravid-student-dashboard-active .menu-card-copy strong,
body.ravid-student-dashboard-flagship .menu-card-copy strong,
body.ravid-student-dashboard-match .menu-card-copy strong {
  font-size: 22px !important;
  line-height: 1.18 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.035em !important;
}

body.ravid-student-dashboard-active .menu-card-copy small,
body.ravid-student-dashboard-flagship .menu-card-copy small,
body.ravid-student-dashboard-match .menu-card-copy small {
  font-size: 15px !important;
  line-height: 1.56 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.ravid-student-dashboard-active .student-menu-card::after,
body.ravid-student-dashboard-flagship .student-menu-card::after,
body.ravid-student-dashboard-match .student-menu-card::after {
  margin-top: 18px !important;
  min-height: 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(244,250,255,.74)) !important;
}

@media (max-width: 1280px) {
  body.ravid-student-dashboard-active .student-hero-card,
  body.ravid-student-dashboard-flagship .student-hero-card,
  body.ravid-student-dashboard-match .student-hero-card {
    grid-template-columns: 1fr !important;
  }
  body.ravid-student-dashboard-active .student-hero-visual,
  body.ravid-student-dashboard-flagship .student-hero-visual,
  body.ravid-student-dashboard-match .student-hero-visual {
    min-height: 340px !important;
  }
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/*
  RAVID Student Dashboard Premium v4 — Final Detail Polish
  Purpose: fix the still-clipped menu card text, make the dashboard feel more flagship,
  and keep the healthy login/auth/backend flows untouched.
*/

body.ravid-student-dashboard-active,
body.ravid-student-dashboard-flagship,
body.ravid-student-dashboard-match {
  --sd-v4-card-radius: 28px;
  --sd-v4-card-border: rgba(118, 182, 255, .42);
  --sd-v4-text: #0b1430;
  --sd-v4-muted: #51657f;
}

/* Make the dashboard stage breathe more like the reference without changing logic. */
body.ravid-student-dashboard-active #section-student-menu,
body.ravid-student-dashboard-flagship #section-student-menu,
body.ravid-student-dashboard-match #section-student-menu {
  overflow: visible !important;
}

body.ravid-student-dashboard-active .student-hero-card,
body.ravid-student-dashboard-flagship .student-hero-card,
body.ravid-student-dashboard-match .student-hero-card,
#section-student-menu .student-hero-card {
  min-height: clamp(430px, 44vh, 520px) !important;
  padding: clamp(34px, 3.4vw, 58px) clamp(36px, 3.6vw, 64px) !important;
  border-radius: 34px !important;
}

/* Hero right visual: richer premium card, closer to the reference blue panel. */
body.ravid-student-dashboard-active .student-hero-visual,
body.ravid-student-dashboard-flagship .student-hero-visual,
body.ravid-student-dashboard-match .student-hero-visual,
#section-student-menu .student-hero-visual {
  min-height: clamp(300px, 28vw, 390px) !important;
  border-radius: 32px !important;
  box-shadow: 0 28px 70px rgba(37, 99, 235, .22) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.ravid-student-dashboard-active .student-hero-visual strong,
body.ravid-student-dashboard-flagship .student-hero-visual strong,
body.ravid-student-dashboard-match .student-hero-visual strong,
#section-student-menu .student-hero-visual strong {
  text-shadow: 0 8px 28px rgba(5, 24, 76, .18) !important;
}

/* Stats cards: stronger icon-like left glow and better rhythm. */
body.ravid-student-dashboard-active .student-quick-stats,
body.ravid-student-dashboard-flagship .student-quick-stats,
body.ravid-student-dashboard-match .student-quick-stats,
#section-student-menu .student-quick-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 22px) !important;
}

body.ravid-student-dashboard-active .student-quick-stats > div,
body.ravid-student-dashboard-flagship .student-quick-stats > div,
body.ravid-student-dashboard-match .student-quick-stats > div,
#section-student-menu .student-quick-stats > div {
  min-height: 94px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(132,188,255,.34) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(249,252,255,.78)) !important;
  box-shadow: 0 18px 42px rgba(37,99,235,.08) !important;
}

/* Access row: keep status card readable and not cramped. */
body.ravid-student-dashboard-active .student-section-intro,
body.ravid-student-dashboard-flagship .student-section-intro,
body.ravid-student-dashboard-match .student-section-intro,
#section-student-menu .student-section-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
  gap: 24px !important;
  align-items: center !important;
  padding: clamp(22px, 2vw, 30px) clamp(24px, 2.4vw, 38px) !important;
  border-radius: 28px !important;
  overflow: visible !important;
}

/* Menu cards: this is the important fix. Previous result still clipped the card text. */
body.ravid-student-dashboard-active .student-menu-grid,
body.ravid-student-dashboard-flagship .student-menu-grid,
body.ravid-student-dashboard-match .student-menu-grid,
#section-student-menu .student-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
  gap: clamp(18px, 1.8vw, 26px) !important;
  align-items: stretch !important;
  overflow: visible !important;
  margin-top: clamp(18px, 2vw, 28px) !important;
}

body.ravid-student-dashboard-active .student-menu-card,
body.ravid-student-dashboard-flagship .student-menu-card,
body.ravid-student-dashboard-match .student-menu-card,
#section-student-menu .student-menu-card {
  min-height: 238px !important;
  height: auto !important;
  padding: 26px 28px 24px !important;
  border-radius: var(--sd-v4-card-radius) !important;
  border: 1px solid var(--sd-v4-card-border) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(227, 242, 255, .92), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,252,255,.82)) !important;
  box-shadow: 0 24px 60px rgba(37,99,235,.11) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(2),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2),
body.ravid-student-dashboard-match .student-menu-card:nth-child(2),
#section-student-menu .student-menu-card:nth-child(2) {
  background:
    radial-gradient(circle at 14% 10%, rgba(230, 232, 255, .95), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,248,255,.84)) !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(4),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(4),
body.ravid-student-dashboard-match .student-menu-card:nth-child(4),
#section-student-menu .student-menu-card:nth-child(4) {
  background:
    radial-gradient(circle at 12% 10%, rgba(221, 255, 235, .96), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,255,250,.84)) !important;
}

body.ravid-student-dashboard-active .menu-card-icon,
body.ravid-student-dashboard-flagship .menu-card-icon,
body.ravid-student-dashboard-match .menu-card-icon,
#section-student-menu .menu-card-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 19px !important;
  margin: 0 0 22px 0 !important;
  box-shadow: 0 18px 35px rgba(37,99,235,.14) !important;
}

body.ravid-student-dashboard-active .menu-card-copy,
body.ravid-student-dashboard-flagship .menu-card-copy,
body.ravid-student-dashboard-match .menu-card-copy,
#section-student-menu .menu-card-copy {
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.ravid-student-dashboard-active .menu-card-copy strong,
body.ravid-student-dashboard-flagship .menu-card-copy strong,
body.ravid-student-dashboard-match .menu-card-copy strong,
#section-student-menu .menu-card-copy strong {
  display: block !important;
  color: var(--sd-v4-text) !important;
  font-size: clamp(19px, 1.25vw, 22px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 12px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 100% !important;
}

body.ravid-student-dashboard-active .menu-card-copy small,
body.ravid-student-dashboard-flagship .menu-card-copy small,
body.ravid-student-dashboard-match .menu-card-copy small,
#section-student-menu .menu-card-copy small {
  display: block !important;
  color: var(--sd-v4-muted) !important;
  font-size: clamp(13.5px, .9vw, 15px) !important;
  line-height: 1.52 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

body.ravid-student-dashboard-active .student-menu-card::after,
body.ravid-student-dashboard-flagship .student-menu-card::after,
body.ravid-student-dashboard-match .student-menu-card::after,
#section-student-menu .student-menu-card::after {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: auto !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 15px !important;
  border: 1px solid rgba(132,188,255,.34) !important;
  color: #1d4ed8 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,250,255,.80)) !important;
  box-shadow: 0 12px 28px rgba(37,99,235,.07) !important;
}

/* Smaller desktop: keep cards readable by switching to 2 columns. */
@media (max-width: 1380px) {
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid,
  #section-student-menu .student-menu-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  body.ravid-student-dashboard-active .student-section-intro,
  body.ravid-student-dashboard-flagship .student-section-intro,
  body.ravid-student-dashboard-match .student-section-intro,
  #section-student-menu .student-section-intro,
  body.ravid-student-dashboard-active .student-quick-stats,
  body.ravid-student-dashboard-flagship .student-quick-stats,
  body.ravid-student-dashboard-match .student-quick-stats,
  #section-student-menu .student-quick-stats,
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid,
  #section-student-menu .student-menu-grid {
    grid-template-columns: 1fr !important;
  }
}

/*
  RAVID Student Dashboard Premium v5 — Menu Card Recovery & Lock Candidate
  Purpose: fix v4 regression where menu cards became too tall and CTA pseudo blocks
  covered/faded the real card text. Keep hero/status layout from v4, but make
  the four menu cards readable, compact, and safe.
*/

body.ravid-student-dashboard-active,
body.ravid-student-dashboard-flagship,
body.ravid-student-dashboard-match {
  --sd-v5-text: #0b1430;
  --sd-v5-muted: #526780;
  --sd-v5-blue: #2563eb;
}

/* Keep section readable and avoid hidden lower content. */
body.ravid-student-dashboard-active #section-student-menu,
body.ravid-student-dashboard-flagship #section-student-menu,
body.ravid-student-dashboard-match #section-student-menu,
#section-student-menu {
  overflow: visible !important;
}

/* Final safe menu layout: four premium cards without clipping. */
body.ravid-student-dashboard-active .student-menu-grid,
body.ravid-student-dashboard-flagship .student-menu-grid,
body.ravid-student-dashboard-match .student-menu-grid,
#section-student-menu .student-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.5vw, 22px) !important;
  align-items: stretch !important;
  margin-top: clamp(18px, 2vw, 24px) !important;
  overflow: visible !important;
}

body.ravid-student-dashboard-active .student-menu-card,
body.ravid-student-dashboard-flagship .student-menu-card,
body.ravid-student-dashboard-match .student-menu-card,
#section-student-menu .student-menu-card {
  position: relative !important;
  min-height: 170px !important;
  height: auto !important;
  padding: 24px 24px 22px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(132, 188, 255, .40) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(236, 247, 255, .96), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,252,255,.88)) !important;
  box-shadow: 0 22px 52px rgba(37, 99, 235, .10) !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 12px !important;
  align-items: start !important;
  overflow: visible !important;
  transform: none !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(2),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2),
body.ravid-student-dashboard-match .student-menu-card:nth-child(2),
#section-student-menu .student-menu-card:nth-child(2) {
  background:
    radial-gradient(circle at 12% 10%, rgba(235, 232, 255, .95), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,249,255,.88)) !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(4),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(4),
body.ravid-student-dashboard-match .student-menu-card:nth-child(4),
#section-student-menu .student-menu-card:nth-child(4) {
  background:
    radial-gradient(circle at 12% 10%, rgba(220, 255, 236, .95), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,255,250,.88)) !important;
}

body.ravid-student-dashboard-active .menu-card-icon,
body.ravid-student-dashboard-flagship .menu-card-icon,
body.ravid-student-dashboard-match .menu-card-icon,
#section-student-menu .menu-card-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 16px 30px rgba(37,99,235,.13) !important;
}

body.ravid-student-dashboard-active .menu-card-copy,
body.ravid-student-dashboard-flagship .menu-card-copy,
body.ravid-student-dashboard-match .menu-card-copy,
#section-student-menu .menu-card-copy {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  display: block !important;
  opacity: 1 !important;
}

body.ravid-student-dashboard-active .menu-card-copy strong,
body.ravid-student-dashboard-flagship .menu-card-copy strong,
body.ravid-student-dashboard-match .menu-card-copy strong,
#section-student-menu .menu-card-copy strong {
  display: block !important;
  color: var(--sd-v5-text) !important;
  font-size: clamp(16px, 1vw, 19px) !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 10px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}

body.ravid-student-dashboard-active .menu-card-copy small,
body.ravid-student-dashboard-flagship .menu-card-copy small,
body.ravid-student-dashboard-match .menu-card-copy small,
#section-student-menu .menu-card-copy small {
  display: block !important;
  color: var(--sd-v5-muted) !important;
  font-size: clamp(12px, .78vw, 13.5px) !important;
  line-height: 1.48 !important;
  font-weight: 750 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
  opacity: 1 !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Remove the v4 pseudo CTA boxes that covered the real text in the screenshot. */
body.ravid-student-dashboard-active .student-menu-card::after,
body.ravid-student-dashboard-flagship .student-menu-card::after,
body.ravid-student-dashboard-match .student-menu-card::after,
#section-student-menu .student-menu-card::after {
  display: none !important;
  content: none !important;
}

body.ravid-student-dashboard-active .student-menu-card:hover,
body.ravid-student-dashboard-flagship .student-menu-card:hover,
body.ravid-student-dashboard-match .student-menu-card:hover,
#section-student-menu .student-menu-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 26px 62px rgba(37, 99, 235, .13) !important;
}

/* Hero visual small upgrade without disturbing layout. */
body.ravid-student-dashboard-active .student-hero-visual,
body.ravid-student-dashboard-flagship .student-hero-visual,
body.ravid-student-dashboard-match .student-hero-visual,
#section-student-menu .student-hero-visual {
  background:
    radial-gradient(circle at 24% 66%, rgba(97, 230, 160, .92) 0 9px, transparent 10px),
    radial-gradient(circle at 78% 22%, rgba(255, 187, 100, .90) 0 9px, transparent 10px),
    radial-gradient(circle at 80% 76%, rgba(255, 205, 91, .88) 0 9px, transparent 10px),
    linear-gradient(135deg, #2558ec 0%, #168ee5 54%, #10b7e5 100%) !important;
}

body.ravid-student-dashboard-active .student-hero-visual::before,
body.ravid-student-dashboard-flagship .student-hero-visual::before,
body.ravid-student-dashboard-match .student-hero-visual::before,
#section-student-menu .student-hero-visual::before {
  opacity: .42 !important;
}

@media (max-width: 1380px) {
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid,
  #section-student-menu .student-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.ravid-student-dashboard-active .student-menu-grid,
  body.ravid-student-dashboard-flagship .student-menu-grid,
  body.ravid-student-dashboard-match .student-menu-grid,
  #section-student-menu .student-menu-grid {
    grid-template-columns: 1fr !important;
  }

  body.ravid-student-dashboard-active .student-menu-card,
  body.ravid-student-dashboard-flagship .student-menu-card,
  body.ravid-student-dashboard-match .student-menu-card,
  #section-student-menu .student-menu-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    min-height: 154px !important;
    padding: 20px !important;
  }
}

/* RAVID STUDENT MENU ORDER V44
   Tujuan: urutan kartu menu siswa sesuai alur belajar: Ringkasan, Video, Kuis, Rapor.
   Scope: hanya #section-student-menu, tidak menyentuh landing/login/game/quiz/video/rapor logic. */
body.ravid-student-dashboard-active .student-menu-card:nth-child(1)::after,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(1)::after,
body.ravid-student-dashboard-match .student-menu-card:nth-child(1)::after,
#section-student-menu .student-menu-card:nth-child(1)::after { content: "Baca Ringkasan ›" !important; }

body.ravid-student-dashboard-active .student-menu-card:nth-child(2)::after,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2)::after,
body.ravid-student-dashboard-match .student-menu-card:nth-child(2)::after,
#section-student-menu .student-menu-card:nth-child(2)::after { content: "Tonton Video ›" !important; }

body.ravid-student-dashboard-active .student-menu-card:nth-child(3)::after,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(3)::after,
body.ravid-student-dashboard-match .student-menu-card:nth-child(3)::after,
#section-student-menu .student-menu-card:nth-child(3)::after { content: "Mulai Kuis ›" !important; }

body.ravid-student-dashboard-active .student-menu-card:nth-child(4)::after,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(4)::after,
body.ravid-student-dashboard-match .student-menu-card:nth-child(4)::after,
#section-student-menu .student-menu-card:nth-child(4)::after { content: "Lihat Rapor ›" !important; }

body.ravid-student-dashboard-active .student-menu-card:nth-child(1),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(1),
body.ravid-student-dashboard-match .student-menu-card:nth-child(1),
#section-student-menu .student-menu-card:nth-child(1) {
  background:
    radial-gradient(circle at 12% 10%, rgba(235, 232, 255, .95), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,249,255,.88)) !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(2),
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2),
body.ravid-student-dashboard-match .student-menu-card:nth-child(2),
#section-student-menu .student-menu-card:nth-child(2) {
  background:
    radial-gradient(circle at 12% 10%, rgba(227, 242, 255, .92), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,252,255,.88)) !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(1) .menu-card-icon,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(1) .menu-card-icon,
body.ravid-student-dashboard-match .student-menu-card:nth-child(1) .menu-card-icon,
#section-student-menu .student-menu-card:nth-child(1) .menu-card-icon {
  background: linear-gradient(135deg, #705cf6, #4263eb) !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(2) .menu-card-icon,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(2) .menu-card-icon,
body.ravid-student-dashboard-match .student-menu-card:nth-child(2) .menu-card-icon,
#section-student-menu .student-menu-card:nth-child(2) .menu-card-icon {
  background: linear-gradient(135deg, #2f5df6, #21a9ea) !important;
}

body.ravid-student-dashboard-active .student-menu-card:nth-child(4) .menu-card-icon,
body.ravid-student-dashboard-flagship .student-menu-card:nth-child(4) .menu-card-icon,
body.ravid-student-dashboard-match .student-menu-card:nth-child(4) .menu-card-icon,
#section-student-menu .student-menu-card:nth-child(4) .menu-card-icon {
  background: linear-gradient(135deg, #60d394, #2fb36d) !important;
}

/* RAVID Student Layout v54 - Dashboard precision polish.
   Tujuan: parent dashboard dibuat lebih proporsional seperti Rapor/Ringkasan,
   mengurangi ruang kosong bawah tanpa mengubah logic kartu menu.
   Scope aman: hanya #section-student-menu saat dashboard siswa aktif. */
body.ravid-student-dashboard-active .main-container,
body.ravid-student-dashboard-flagship .main-container,
body.ravid-student-dashboard-match .main-container {
  padding-bottom: clamp(28px, 3vw, 44px) !important;
}

body.ravid-student-dashboard-active #card-root,
body.ravid-student-dashboard-flagship #card-root,
body.ravid-student-dashboard-match #card-root,
body.ravid-student-dashboard-active .card:has(#section-student-menu:not(.hidden)),
body.ravid-student-dashboard-flagship .card:has(#section-student-menu:not(.hidden)),
body.ravid-student-dashboard-match .card:has(#section-student-menu:not(.hidden)) {
  width: min(1420px, calc(100vw - 76px)) !important;
  max-width: min(1420px, calc(100vw - 76px)) !important;
  min-height: auto !important;
  padding-bottom: clamp(26px, 2.6vw, 38px) !important;
  overflow: visible !important;
}

body.ravid-student-dashboard-active #section-student-menu,
body.ravid-student-dashboard-flagship #section-student-menu,
body.ravid-student-dashboard-match #section-student-menu {
  width: min(1360px, calc(100vw - 76px)) !important;
  max-width: min(1360px, calc(100vw - 76px)) !important;
  margin-bottom: 0 !important;
  padding: clamp(16px, 1.8vw, 24px) !important;
  overflow: visible !important;
}

body.ravid-student-dashboard-active .student-hero-card,
body.ravid-student-dashboard-flagship .student-hero-card,
body.ravid-student-dashboard-match .student-hero-card {
  min-height: clamp(340px, 32vw, 410px) !important;
  padding: clamp(34px, 3.2vw, 48px) clamp(38px, 3.4vw, 56px) !important;
  gap: clamp(30px, 3.4vw, 48px) !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr) !important;
}

body.ravid-student-dashboard-active .student-hero-visual,
body.ravid-student-dashboard-flagship .student-hero-visual,
body.ravid-student-dashboard-match .student-hero-visual {
  min-height: clamp(270px, 25vw, 330px) !important;
}

body.ravid-student-dashboard-active .section-title,
body.ravid-student-dashboard-flagship .section-title,
body.ravid-student-dashboard-match .section-title {
  font-size: clamp(38px, 3.8vw, 56px) !important;
  margin-top: clamp(20px, 2.2vw, 28px) !important;
}

body.ravid-student-dashboard-active #student-greeting,
body.ravid-student-dashboard-flagship #student-greeting,
body.ravid-student-dashboard-match #student-greeting {
  margin-bottom: clamp(20px, 2.1vw, 28px) !important;
}

body.ravid-student-dashboard-active .student-section-intro,
body.ravid-student-dashboard-flagship .student-section-intro,
body.ravid-student-dashboard-match .student-section-intro {
  margin: clamp(14px, 1.5vw, 18px) 0 clamp(14px, 1.5vw, 18px) !important;
  padding: clamp(18px, 1.8vw, 24px) clamp(24px, 2.4vw, 34px) !important;
}

body.ravid-student-dashboard-active .student-menu-grid,
body.ravid-student-dashboard-flagship .student-menu-grid,
body.ravid-student-dashboard-match .student-menu-grid {
  gap: clamp(16px, 1.7vw, 22px) !important;
}

body.ravid-student-dashboard-active .student-menu-card,
body.ravid-student-dashboard-flagship .student-menu-card,
body.ravid-student-dashboard-match .student-menu-card {
  min-height: clamp(150px, 13.5vw, 188px) !important;
  padding: clamp(20px, 1.8vw, 26px) !important;
}

body.ravid-student-dashboard-active .menu-card-icon,
body.ravid-student-dashboard-flagship .menu-card-icon,
body.ravid-student-dashboard-match .menu-card-icon {
  width: clamp(46px, 4.2vw, 58px) !important;
  height: clamp(46px, 4.2vw, 58px) !important;
  margin-bottom: clamp(14px, 1.5vw, 20px) !important;
}

body.ravid-student-dashboard-active .menu-card-copy strong,
body.ravid-student-dashboard-flagship .menu-card-copy strong,
body.ravid-student-dashboard-match .menu-card-copy strong {
  font-size: clamp(18px, 1.5vw, 21px) !important;
  margin-bottom: 10px !important;
}

body.ravid-student-dashboard-active .menu-card-copy small,
body.ravid-student-dashboard-flagship .menu-card-copy small,
body.ravid-student-dashboard-match .menu-card-copy small {
  font-size: clamp(13px, 1.05vw, 15px) !important;
  line-height: 1.48 !important;
}

@media (min-width: 1500px) {
  body.ravid-student-dashboard-active #section-student-menu,
  body.ravid-student-dashboard-flagship #section-student-menu,
  body.ravid-student-dashboard-match #section-student-menu {
    width: min(1420px, calc(100vw - 96px)) !important;
    max-width: min(1420px, calc(100vw - 96px)) !important;
  }
}

@media (max-width: 1180px) {
  body.ravid-student-dashboard-active #card-root,
  body.ravid-student-dashboard-flagship #card-root,
  body.ravid-student-dashboard-match #card-root,
  body.ravid-student-dashboard-active #section-student-menu,
  body.ravid-student-dashboard-flagship #section-student-menu,
  body.ravid-student-dashboard-match #section-student-menu {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }

  body.ravid-student-dashboard-active .student-hero-card,
  body.ravid-student-dashboard-flagship .student-hero-card,
  body.ravid-student-dashboard-match .student-hero-card {
    grid-template-columns: 1fr !important;
  }
}

/* RAVID v56 - Flexible Parent System
   Prinsip:
   - Parent/container halaman siswa harus mengikuti tinggi child di dalamnya.
   - Jangan ada child card keluar/menumpuk di luar parent ketika data bertambah.
   - Berlaku untuk Dashboard, Ringkasan, Kuis, Video, dan Rapor.
   - Tidak mengubah logic/data/backend. */

:root {
  --ravid-v56-page-max: 1420px;
  --ravid-v56-page-gap: clamp(18px, 1.7vw, 30px);
  --ravid-v56-page-pad: clamp(22px, 2.1vw, 38px);
  --ravid-v56-bottom-safe: clamp(34px, 3.2vw, 58px);
}

body:has(#section-student-menu:not(.hidden)) #card-root.card,
body:has(#section-summary:not(.hidden)) #card-root.card,
body:has(#section-quiz:not(.hidden)) #card-root.card,
body:has(#section-video:not(.hidden)) #card-root.card,
body:has(#section-report:not(.hidden)) #card-root.card {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: stretch !important;
}

body:has(#section-student-menu:not(.hidden)) .main-container,
body:has(#section-summary:not(.hidden)) .main-container,
body:has(#section-quiz:not(.hidden)) .main-container,
body:has(#section-video:not(.hidden)) .main-container,
body:has(#section-report:not(.hidden)) .main-container {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: var(--ravid-v56-bottom-safe) !important;
}

#section-student-menu:not(.hidden),
#section-summary:not(.hidden),
#section-quiz:not(.hidden),
#section-video:not(.hidden),
#section-report:not(.hidden) {
  width: min(var(--ravid-v56-page-max), calc(100vw - 72px)) !important;
  max-width: min(var(--ravid-v56-page-max), calc(100vw - 72px)) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--ravid-v56-bottom-safe) !important;
}

#section-student-menu:not(.hidden) *,
#section-summary:not(.hidden) *,
#section-quiz:not(.hidden) *,
#section-video:not(.hidden) *,
#section-report:not(.hidden) * {
  box-sizing: border-box !important;
}

#section-student-menu:not(.hidden) .section-header-row,
#section-summary:not(.hidden) .section-header-row,
#section-quiz:not(.hidden) .section-header-row,
#section-video:not(.hidden) .section-header-row,
#section-report:not(.hidden) .section-header-row,
#section-summary:not(.hidden) .learning-header-row,
#section-quiz:not(.hidden) .learning-header-row,
#section-video:not(.hidden) .learning-header-row,
#section-report:not(.hidden) .learning-header-row {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

#section-student-menu:not(.hidden) .student-menu-grid,
#section-student-menu:not(.hidden) .student-activity-grid,
#section-summary:not(.hidden) .summary-layout-grid,
#section-video:not(.hidden) .video-layout,
#section-video:not(.hidden) .video-content-grid,
#section-report:not(.hidden) .rv47-content-grid,
#section-report:not(.hidden) .report-content-grid,
#section-quiz:not(.hidden) .quiz-content,
#section-quiz:not(.hidden) #quiz-content,
#section-quiz:not(.hidden) #quiz-result {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: stretch !important;
}

#section-student-menu:not(.hidden) .student-menu-card,
#section-summary:not(.hidden) .summary-library-card,
#section-summary:not(.hidden) .summary-reader-card,
#section-summary:not(.hidden) .summary-reading-card,
#section-quiz:not(.hidden) .quiz-card,
#section-quiz:not(.hidden) .quiz-empty-state,
#section-quiz:not(.hidden) .quiz-result,
#section-video:not(.hidden) .video-player,
#section-video:not(.hidden) .video-list,
#section-report:not(.hidden) .rv47-panel,
#section-report:not(.hidden) .rv47-side-card,
#section-report:not(.hidden) .report-table-card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#section-summary:not(.hidden) .student-summary-list,
#section-video:not(.hidden) #video-list,
#section-report:not(.hidden) .rv47-table-wrap,
#section-report:not(.hidden) .report-table-wrapper {
  max-height: none !important;
  overflow: visible !important;
}

#section-report:not(.hidden) table,
#section-report:not(.hidden) .rv47-table {
  width: 100% !important;
  table-layout: auto !important;
}

#section-report:not(.hidden) th,
#section-report:not(.hidden) td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (min-width: 1500px) {
  :root {
    --ravid-v56-page-max: 1480px;
  }
}

@media (max-width: 1120px) {
  #section-student-menu:not(.hidden),
  #section-summary:not(.hidden),
  #section-quiz:not(.hidden),
  #section-video:not(.hidden),
  #section-report:not(.hidden) {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
    padding-left: clamp(16px, 4vw, 22px) !important;
    padding-right: clamp(16px, 4vw, 22px) !important;
  }

  #section-student-menu:not(.hidden) .student-menu-grid,
  #section-student-menu:not(.hidden) .student-activity-grid,
  #section-summary:not(.hidden) .summary-layout-grid,
  #section-video:not(.hidden) .video-layout,
  #section-video:not(.hidden) .video-content-grid,
  #section-report:not(.hidden) .rv47-content-grid,
  #section-report:not(.hidden) .report-content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* RAVID v56 - Dashboard Flexible Parent */
#section-student-menu:not(.hidden) {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

#section-student-menu:not(.hidden) .student-menu-card {
  min-height: clamp(118px, 8.5vw, 150px) !important;
  display: flex !important;
  align-items: flex-start !important;
}

#section-student-menu:not(.hidden) .student-menu-grid {
  grid-auto-rows: auto !important;
  align-items: stretch !important;
}