/* Gia Sư SV RC7.77 — simple grade switch visible below the current selection.
   Uses grade facets already published; never alters quizzes, results, or mobile math UI. */
.gssv-study .gsv-grade-switch-rc777 {
  display:none; align-items:center; flex-wrap:wrap; gap:8px 12px;
  margin:10px 0 16px; padding:10px 12px; border:1px solid #d5e6e4;
  background:#f8fcfb; border-radius:12px; max-width:100%;
}
.gssv-study .gsv-grade-switch-rc777>strong {
  font-size:13px; white-space:nowrap; font-weight:700; color:#174c47;
}
.gssv-study .gsv-grade-switch-group-rc777 {
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:5px; max-width:100%;
}
.gssv-study .gsv-grade-switch-group-rc777 small {
  font-size:12px; font-weight:700; color:#507372; margin-right:2px;
}
.gssv-study .gsv-grade-switch-rc777 button {
  min-height:38px; margin:0; padding:6px 9px; border-radius:9px;
  font-size:13px; font-weight:600; line-height:1.2;
  border:1px solid #b7d2ce; background:#fff; color:#17685c;
}
.gssv-study .gsv-grade-switch-rc777 button.is-active,
.gssv-study .gsv-grade-switch-rc777 button[aria-pressed="true"] {
  background:#dcefe7; color:#125347; border-color:#16806a;
}
.gssv-study .gsv-grade-switch-rc777 button:hover {border-color:#16806a;}
/* On PC the grade ribbon also works when the browser is zoomed below 1024px.
   It stays invisible on touch-first mobile devices. */
@media (hover:hover) and (pointer:fine) {
  .gssv-study .gsv-grade-switch-rc777 {display:flex;}
}
@media (hover:hover) and (pointer:fine) and (max-width:600px){
 .gssv-study .gsv-grade-switch-rc777 {gap:7px;padding:9px;}
 .gssv-study .gsv-grade-switch-rc777>strong {width:100%;}
 .gssv-study .gsv-grade-switch-rc777 button {min-height:40px;font-size:12px;}
}

/* RC7.78: Mobile navigation visible on touch devices, only existing catalog grades. */
@media screen and (max-width: 767px) {
 .gssv-study .gsv-grade-switch-rc777 {
  display:flex!important; flex-wrap:wrap!important; align-items:flex-start!important;
  gap:8px!important; margin:10px 0 14px!important; padding:10px!important;
 }
 .gssv-study .gsv-grade-switch-rc777 > strong {
  display:block!important; width:100%!important; font-size:14px!important;
 }
 .gssv-study .gsv-grade-switch-group-rc777 {
  display:flex!important; flex-wrap:wrap!important; width:100%!important; gap:7px!important;
 }
 .gssv-study .gsv-grade-switch-group-rc777 small {
  flex:0 0 100%!important; font-size:12px!important;
 }
 .gssv-study .gsv-grade-switch-rc777 button {
  min-height:44px!important; padding:9px 11px!important; font-size:14px!important;
 }
}