@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");

.student-autumn-view {
  --student-brown: #4a2f1d;
  --student-brown-deep: #2f1c11;
  --student-brown-soft: #6f4828;
  --student-orange: #d97706;
  --student-orange-dark: #b85f04;
  --student-gold: #f6c453;
  --student-cream: #fff8ef;
  --student-beige: #f5e6d3;
  --student-green: #365c3b;
  --student-green-soft: #dff2df;
  --student-blue: #245b86;
  --student-purple: #6b4a8f;
  --student-ink: #2d241e;
  --student-muted: #806a58;
  --student-line: #ead7bd;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(246, 196, 83, .18), transparent 28%),
    linear-gradient(135deg, #fff9f0 0%, #f8ead8 46%, #fff5e7 100%);
  color: var(--student-ink);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.student-autumn-view *,
.student-autumn-view *::before,
.student-autumn-view *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

.student-autumn-view .student-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.student-autumn-view .student-top {
  position: sticky;
  top: 0;
  align-self: start;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  padding: 18px 16px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(74, 47, 29, .98), rgba(47, 28, 17, .98)),
    var(--student-brown);
  color: #fff7ea;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 196, 83, .44) transparent;
}

.student-autumn-view .student-top::before,
.student-autumn-view .student-top::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.student-autumn-view .student-top::before {
  left: -35px;
  bottom: -28px;
  width: 180px;
  height: 120px;
  background:
    radial-gradient(ellipse at 35% 50%, #d97706 0 16%, transparent 17%),
    radial-gradient(ellipse at 55% 42%, #f6c453 0 13%, transparent 14%),
    radial-gradient(ellipse at 72% 58%, #b85f04 0 14%, transparent 15%);
  opacity: .9;
}

.student-autumn-view .student-top::after {
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 68%, rgba(255, 255, 255, .05) 69% 72%, transparent 73%),
    linear-gradient(180deg, transparent 0 72%, rgba(0, 0, 0, .15));
}

.student-autumn-view .student-top > * {
  position: relative;
  z-index: 1;
}

.student-autumn-view .student-top img {
  width: 154px;
  height: auto;
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.student-autumn-view .student-top > div:first-of-type h1 {
  margin: 4px 0 3px;
  color: #fff7ea;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.08;
}

.student-autumn-view .student-top > div:first-of-type p {
  margin: 0;
  color: rgba(255, 247, 234, .72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.student-autumn-profile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 231, 196, .26);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 248, 239, .18), rgba(217, 119, 6, .11));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
  padding: 10px;
}

.student-autumn-profile span,
.student-autumn-profile small {
  display: block;
  color: rgba(255, 247, 234, .76);
  font-size: 12px;
  font-weight: 800;
}

.student-autumn-profile strong {
  display: block;
  color: #fff7ea;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.student-autumn-nav {
  display: grid;
  gap: 8px;
}

.student-autumn-nav-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 248, 239, .04), rgba(255, 248, 239, .01));
  color: rgba(255, 247, 234, .86);
  padding: 6px 9px;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.student-autumn-nav-item:hover,
.student-autumn-nav-item.active {
  transform: translateX(4px) scale(1.01);
  border-color: rgba(255, 213, 148, .42);
  background: linear-gradient(135deg, var(--student-orange), #f59e0b);
  box-shadow: 0 16px 30px rgba(217, 119, 6, .24);
  color: white;
}

.student-autumn-nav-icon,
.student-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(246, 196, 83, .26), rgba(217, 119, 6, .16));
  color: #ffd990;
}

.student-autumn-nav-icon svg,
.student-card-icon svg,
.student-autumn-avatar svg,
.student-badge-medal svg,
.student-resource-chip svg,
.student-encouragement-card svg,
.student-average-lock-button svg {
  width: 22px;
  height: 22px;
}

.student-autumn-nav-item.active .student-autumn-nav-icon,
.student-autumn-nav-item:hover .student-autumn-nav-icon {
  background: rgba(255, 255, 255, .2);
  color: white;
}

.student-autumn-view .student-top .back {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  border: 1px solid rgba(255, 231, 196, .24);
  border-radius: 16px;
  background: rgba(255, 248, 239, .11);
  color: #fff7ea;
  font-weight: 900;
  transition: transform .2s ease, background .2s ease;
}

.student-autumn-view .student-top .back:hover {
  transform: translateY(-2px);
  background: rgba(255, 248, 239, .18);
}

.student-autumn-view .student-content,
.student-autumn-view .student-content-single {
  grid-column: 2;
  display: block;
  min-height: 100vh;
  padding: 16px 18px 20px;
}

.student-autumn-main,
.student-autumn-view .student-games-single {
  width: min(1400px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.student-autumn-panel {
  display: none;
}

.student-autumn-panel.active {
  display: grid;
  gap: 14px;
  animation: studentPanelIn .34s ease both;
}

@keyframes studentPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.student-autumn-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid #fff1d9;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #f7c28b 0 21%, transparent 22%),
    radial-gradient(circle at 50% 50%, #7a4424 0 42%, transparent 43%),
    linear-gradient(160deg, #f6c453, #d97706);
  box-shadow: 0 10px 22px rgba(74, 47, 29, .22);
  color: white;
  font-weight: 900;
}

.student-autumn-avatar span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(74, 47, 29, .42);
  color: white;
  font-size: 12px;
}

.student-autumn-avatar i {
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 18px;
  height: 18px;
  border: 3px solid #fff7ea;
  border-radius: 50%;
  background: var(--student-green);
}

.student-autumn-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 188px;
  border: 1px solid rgba(234, 215, 189, .85);
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(255, 248, 239, .96), rgba(245, 230, 211, .88)),
    var(--student-beige);
  box-shadow: 0 22px 48px rgba(74, 47, 29, .12);
  padding: 28px;
  overflow: hidden;
}

.student-autumn-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 78px;
  background:
    linear-gradient(160deg, transparent 0 42%, rgba(54, 92, 59, .16) 43% 70%, transparent 71%),
    linear-gradient(12deg, rgba(217, 119, 6, .15), transparent 55%);
  clip-path: polygon(0 55%, 10% 38%, 20% 50%, 32% 30%, 47% 52%, 62% 26%, 77% 52%, 90% 34%, 100% 48%, 100% 100%, 0 100%);
}

.student-autumn-hero > div:not(.student-autumn-decor),
.student-autumn-card > *:not(.student-autumn-decor) {
  position: relative;
  z-index: 1;
}

.student-autumn-hero span,
.student-autumn-page-head span,
.student-autumn-card header span,
.student-autumn-report-panel header span,
.student-performance-main span,
.student-challenge-copy > span {
  color: var(--student-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.student-autumn-hero h2 {
  margin: 6px 0 8px;
  color: var(--student-brown);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.02;
}

.student-autumn-hero p,
.student-autumn-card p,
.student-performance-main p,
.student-autumn-page-head p,
.student-encouragement-card p {
  margin: 0;
  color: var(--student-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.student-autumn-hero-profile {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 148px;
  border: 1px solid rgba(74, 47, 29, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .7);
  padding: 14px;
  box-shadow: 0 14px 28px rgba(74, 47, 29, .09);
}

.student-autumn-hero-profile strong {
  color: var(--student-blue);
  font-size: 17px;
  font-weight: 900;
}

.student-autumn-hero-profile small {
  color: var(--student-muted);
  font-weight: 800;
}

.student-autumn-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.student-autumn-summary-card,
.student-autumn-card,
.student-assignments-panel,
.student-calendar-panel,
.student-autumn-report-panel,
.student-autumn-locked-panel,
.student-encouragement-card {
  border: 1px solid rgba(234, 215, 189, .92);
  border-radius: 20px;
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 18px 40px rgba(74, 47, 29, .11);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.student-autumn-summary-card:hover,
.student-autumn-card:hover,
.student-assignments-panel:hover,
.student-calendar-panel:hover,
.student-autumn-report-panel:hover,
.student-encouragement-card:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(217, 119, 6, .32);
  box-shadow: 0 24px 50px rgba(74, 47, 29, .16);
}

.student-autumn-summary-card {
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 15px;
  overflow: hidden;
}

.student-autumn-summary-card header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-autumn-summary-card small,
.student-autumn-summary-card p {
  color: var(--student-muted);
  font-size: 13px;
  font-weight: 800;
}

.student-autumn-summary-card strong {
  color: var(--student-brown);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.student-autumn-summary-card.average strong,
.student-autumn-summary-card.average .student-average-lock-button {
  color: var(--student-orange);
}

.student-autumn-summary-card.attendance strong {
  color: var(--student-green);
}

.student-autumn-summary-card.test strong {
  color: var(--student-blue);
  font-size: 22px;
  line-height: 1.15;
}

.student-average-lock-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff0d5, #ffe2ad);
  color: var(--student-orange);
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.student-average-lock-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--student-orange), #f59e0b);
  color: white;
}

.student-autumn-feature-row {
  display: grid;
  grid-template-columns: minmax(360px, 1.55fr) minmax(240px, .75fr) minmax(240px, .75fr);
  gap: 14px;
  align-items: stretch;
}

.student-autumn-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.student-autumn-card header,
.student-autumn-page-head,
.student-autumn-report-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.student-autumn-card header strong,
.student-autumn-page-head h2,
.student-autumn-report-panel h3,
.student-challenge-copy h3 {
  margin: 0;
  color: var(--student-brown);
  font-weight: 900;
}

.student-autumn-card header strong,
.student-challenge-copy h3 {
  font-size: 20px;
}

.student-autumn-card button,
.student-learning-toolbar button,
.student-autumn-view .student-assignment-open,
.student-autumn-view .student-submission-actions .primary {
  width: fit-content;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--student-orange), #f59e0b);
  color: white;
  padding: 10px 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(217, 119, 6, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.student-autumn-card button:hover,
.student-learning-toolbar button:hover,
.student-autumn-view .student-assignment-open:hover,
.student-autumn-view .student-submission-actions .primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 28px rgba(217, 119, 6, .3);
}

.challenge-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: start;
  min-height: 270px;
  background:
    linear-gradient(120deg, rgba(255, 252, 244, .95), rgba(255, 229, 183, .74)),
    var(--student-beige);
}

.challenge-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(217, 119, 6, .16));
}

.student-challenge-copy {
  display: grid;
  gap: 10px;
  justify-items: start;
  align-self: center;
}

.student-reading-illustration {
  position: relative;
  width: 180px;
  height: 170px;
  justify-self: center;
  align-self: end;
}

.student-skin-illustration {
  position: relative;
  justify-self: center;
  align-self: end;
  width: min(250px, 100%);
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid rgba(234, 215, 189, .88);
  border-radius: 24px;
  background: #f7e8ce;
  box-shadow: 0 18px 32px rgba(74, 47, 29, .14);
  overflow: hidden;
}

.student-skin-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.student-skin-illustration.challenge {
  width: min(260px, 100%);
  transform: rotate(-1deg);
}

.student-skin-illustration.compact {
  width: min(190px, 100%);
}

.student-figure-head {
  position: absolute;
  left: 62px;
  top: 10px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%, #2d241e 0 4%, transparent 5%),
    radial-gradient(circle at 62% 42%, #2d241e 0 4%, transparent 5%),
    radial-gradient(circle at 50% 68%, #c66d43 0 8%, transparent 9%),
    #f4b77c;
  box-shadow: 0 -12px 0 12px #7b4a2f;
}

.student-figure-body {
  position: absolute;
  left: 44px;
  top: 78px;
  width: 92px;
  height: 72px;
  border-radius: 42px 42px 18px 18px;
  background: linear-gradient(145deg, #f6c453, #d97706);
}

.student-figure-book {
  position: absolute;
  left: 30px;
  top: 102px;
  width: 122px;
  height: 50px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, #365c3b 0 49%, #2f4e34 50% 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .18);
}

.student-figure-bench {
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 145px;
  height: 18px;
  border-radius: 999px;
  background: #7a4a2b;
}

.student-autumn-list,
.student-subject-bars,
.student-learning-list,
.student-resource-list,
.student-autumn-table {
  display: grid;
  gap: 6px;
}

.student-autumn-compact-row,
.student-autumn-table div,
.student-learning-row,
.student-resource-chip,
.student-assignment-attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(234, 215, 189, .82);
  border-radius: 16px;
  background: #fff9ef;
  padding: 9px 11px;
}

.student-autumn-compact-row.calendar {
  grid-template-columns: 96px minmax(0, 1fr);
}

.student-autumn-compact-row.calendar small {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.compact-card {
  padding: 18px;
}

.compact-card .student-autumn-list,
.compact-card .student-resource-list {
  gap: 9px;
}

.compact-card .student-autumn-compact-row strong,
.compact-card .student-resource-chip strong {
  font-size: 14px;
}

.compact-card .student-autumn-compact-row span,
.compact-card .student-autumn-compact-row small,
.compact-card .student-resource-chip small {
  font-size: 11px;
}

.student-autumn-compact-row span,
.student-autumn-compact-row small,
.student-autumn-table span,
.student-autumn-table em,
.student-resource-chip small {
  color: var(--student-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.student-autumn-compact-row strong,
.student-autumn-table strong,
.student-resource-chip strong {
  color: var(--student-ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.student-resource-chip {
  grid-template-columns: 46px minmax(0, 1fr);
}

.student-resource-chip > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff0d5;
  color: var(--student-orange);
}

.student-autumn-empty {
  border: 1px dashed #dfcbb3;
  border-radius: 18px;
  background: #fffaf3;
  color: var(--student-muted);
  padding: 18px;
  text-align: center;
  font-weight: 900;
}

.badges-home-card header button {
  padding: 8px 13px;
  font-size: 12px;
}

.student-badge-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.student-badge-medal {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 124px;
  padding: 12px 8px;
  text-align: center;
  color: var(--student-ink);
}

.student-badge-medal > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 68px;
  color: white;
  filter: drop-shadow(0 8px 10px rgba(74, 47, 29, .18));
}

.student-badge-medal > span::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 80% 12%, 100% 42%, 88% 82%, 50% 100%, 12% 82%, 0 42%, 20% 12%);
  background: linear-gradient(145deg, #d97706, #f6c453);
}

.student-badge-medal.green > span::before {
  background: linear-gradient(145deg, #365c3b, #7faf62);
}

.student-badge-medal.orange > span::before {
  background: linear-gradient(145deg, #d97706, #f6c453);
}

.student-badge-medal.gold > span::before {
  background: linear-gradient(145deg, #b7791f, #f6c453);
}

.student-badge-medal.blue > span::before {
  background: linear-gradient(145deg, #245b86, #62a9d6);
}

.student-badge-medal.purple > span::before {
  background: linear-gradient(145deg, #6b4a8f, #a98bd5);
}

.student-badge-medal svg {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
}

.student-badge-medal strong {
  color: var(--student-ink);
  font-size: 13px;
  font-weight: 900;
}

.student-badge-medal small {
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 800;
}

.student-badge-medal.locked {
  opacity: .62;
  filter: grayscale(.75);
}

.student-autumn-page-head {
  margin: 0;
  min-height: 88px;
  border: 1px solid rgba(234, 215, 189, .92);
  border-radius: 22px;
  background:
    linear-gradient(125deg, rgba(255, 253, 248, .96), rgba(245, 230, 211, .7)),
    #fffaf3;
  box-shadow: 0 18px 40px rgba(74, 47, 29, .1);
  padding: 14px 18px;
}

.student-autumn-page-head h2 {
  margin: 2px 0 4px;
  font-size: 28px;
  line-height: 1;
}

.student-autumn-page-head > .student-autumn-avatar {
  flex: 0 0 auto;
}

.student-performance-grid {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(330px, 1.35fr) minmax(230px, .82fr);
  gap: 14px;
}

.student-performance-main {
  display: grid;
  align-content: center;
  min-height: 196px;
  background:
    linear-gradient(160deg, rgba(255, 253, 248, .96), rgba(255, 231, 196, .72)),
    #fffaf3;
}

.student-performance-main strong {
  display: block;
  margin: 6px 0;
  color: var(--student-orange);
  font-size: 54px;
  font-weight: 900;
  line-height: .9;
}

.student-subject-bar {
  display: grid;
  grid-template-columns: minmax(138px, 1fr) minmax(110px, 182px) 38px;
  gap: 7px;
  align-items: center;
}

.student-subject-bar span {
  color: var(--student-ink);
  font-weight: 900;
  font-size: 12.5px;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.student-subject-bar div,
.student-learning-row div {
  height: 11px;
  border-radius: 999px;
  background: #ece0d3;
  overflow: hidden;
}

.student-subject-bar i,
.student-learning-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #c7efcc;
}

.student-subject-bar.developing i,
.student-learning-row.developing i {
  background: #ffefad;
}

.student-subject-bar.support i,
.student-learning-row.support i {
  background: #f6b0a4;
}

.student-subject-bar strong {
  color: var(--student-blue);
  text-align: right;
  font-weight: 900;
}

.student-sparkline {
  width: 100%;
  min-height: 136px;
}

.student-sparkline path {
  stroke: #ead7bd;
  stroke-width: 2;
  fill: none;
}

.student-sparkline polyline {
  stroke: var(--student-orange);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.student-sparkline circle {
  fill: #fff7ea;
  stroke: var(--student-orange);
  stroke-width: 2;
}

.student-learning-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.student-learning-toolbar button {
  min-height: 40px;
  padding: 9px 15px;
  background: #fff3df;
  color: var(--student-brown);
  box-shadow: none;
}

.student-learning-toolbar button.active,
.student-learning-toolbar button:hover {
  background: linear-gradient(135deg, var(--student-orange), #f59e0b);
  color: white;
}

.student-learning-row {
  grid-template-columns: minmax(210px, 1fr) 140px minmax(150px, 260px) 46px;
}

.student-learning-row strong {
  justify-self: start;
  border-radius: 999px;
  padding: 6px 11px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.student-learning-row.developing strong {
  background: #fff4c7;
  color: #92400e;
}

.student-learning-row.support strong {
  background: #fee2e2;
  color: #991b1b;
}

.student-learning-row small {
  color: var(--student-muted);
  font-weight: 900;
  text-align: right;
}

.student-autumn-report-panel {
  overflow: hidden;
}

.student-autumn-report-panel > header {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--student-line);
  background: linear-gradient(135deg, #fffaf3, #fff0dc);
}

.student-autumn-report-panel h3 {
  margin: 2px 0 0;
  font-size: 23px;
}

.student-grade-report-panel > header > strong {
  color: var(--student-orange);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.student-grade-report-meta {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 12px 18px 0;
}

.student-grade-report-meta div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--student-line);
  border-radius: 14px;
  background: #fffaf3;
  padding: 9px 11px;
}

.student-grade-report-meta span,
.student-grade-report-legend {
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 800;
}

.student-grade-report-meta strong {
  color: var(--student-ink);
  font-size: 13px;
  font-weight: 900;
}

.student-grade-report-legend {
  margin: 10px 18px 0;
}

.student-grade-report-table-wrap {
  padding: 12px 18px 18px;
  overflow-x: auto;
}

.student-grade-report-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--student-ink);
  font-size: 12px;
  overflow: hidden;
}

.student-grade-report-table th,
.student-grade-report-table td {
  border-right: 1px solid #d8c7b2;
  border-bottom: 1px solid #d8c7b2;
  padding: 7px 6px;
  text-align: center;
  vertical-align: middle;
}

.student-grade-report-table th:first-child,
.student-grade-report-table td:first-child {
  border-left: 1px solid #d8c7b2;
}

.student-grade-report-table th {
  background: var(--student-blue);
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.student-grade-report-table th:first-child {
  border-top-left-radius: 14px;
}

.student-grade-report-table th:last-child {
  border-top-right-radius: 14px;
}

.student-grade-report-table th:first-child,
.student-grade-report-table td:first-child {
  width: 230px;
  text-align: left;
}

.student-grade-report-table tbody tr:nth-child(even) td {
  background: #fffaf3;
}

.student-grade-value,
.student-grade-average,
.student-grade-report-table tfoot td {
  font-weight: 900;
}

.student-grade-value.low {
  color: #991b1b;
  background: #fee2e2;
}

.student-grade-value.developing {
  color: #92400e;
  background: #fff4c7;
}

.student-grade-value.strong {
  color: var(--student-blue);
}

.student-grade-average,
.student-grade-report-table tfoot td {
  color: var(--student-blue);
  background: #eef6ff;
}

.student-autumn-locked-panel {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 22px;
}

.student-locked-grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
  gap: 16px;
}

.student-autumn-locked-panel strong {
  color: var(--student-brown);
  font-size: 22px;
  font-weight: 900;
}

.locked-art-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 16px;
  align-items: center;
  min-height: 250px;
  background: linear-gradient(135deg, #fffaf3, #ffe8bd);
}

.locked-art-card h3 {
  margin: 6px 0 8px;
  color: var(--student-brown);
  font-size: 24px;
  font-weight: 900;
}

.student-reading-illustration.compact {
  width: 145px;
  height: 138px;
  transform: scale(.86);
  transform-origin: center bottom;
}

.student-autumn-view .student-assignments-panel,
.student-autumn-view .student-calendar-panel {
  overflow: hidden;
}

.student-autumn-view .student-assignments-panel header,
.student-autumn-view .student-calendar-panel header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--student-line);
  background: linear-gradient(135deg, #fffaf3, #fff0dc);
  padding: 20px;
}

.student-autumn-view .student-assignments-panel h2,
.student-autumn-view .student-calendar-panel h2 {
  margin: 0 0 4px;
  color: var(--student-brown);
  font-size: 28px;
  font-weight: 900;
}

.student-autumn-view .student-assignments-panel p,
.student-autumn-view .student-calendar-panel p {
  margin: 0;
  color: var(--student-muted);
  font-weight: 800;
}

.student-autumn-view .student-assignments-panel header > span,
.student-autumn-view .student-calendar-panel header > span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff0d5;
  color: var(--student-orange);
  font-size: 18px;
  font-weight: 900;
}

.student-assignment-list,
.student-calendar-list {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.student-autumn-view .student-assignment-card,
.student-autumn-view .student-calendar-card {
  border: 1px solid var(--student-line);
  border-radius: 20px;
  background: #fffaf3;
  box-shadow: 0 10px 24px rgba(74, 47, 29, .07);
  padding: 16px;
}

.student-assignment-head,
.student-assignment-meta,
.student-calendar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.student-autumn-view .student-assignment-subject,
.student-autumn-view .student-calendar-date {
  width: fit-content;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--student-blue);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.student-assignment-state {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.student-assignment-state.pending {
  background: #fff0d5;
  color: var(--student-orange);
}

.student-assignment-state.seen {
  background: #e0f2fe;
  color: var(--student-blue);
}

.student-assignment-state.submitted {
  background: #dcfce7;
  color: #166534;
}

.student-assignment-main h3,
.student-calendar-card h3 {
  margin: 10px 0 6px;
  color: var(--student-brown);
  font-size: 20px;
  font-weight: 900;
}

.student-assignment-instructions,
.student-calendar-card p {
  color: var(--student-muted);
  font-weight: 800;
}

.student-assignment-meta span,
.student-calendar-meta span {
  border-radius: 999px;
  background: rgba(255, 240, 213, .9);
  color: var(--student-brown-soft);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

.student-autumn-view .student-assignment-detail-card {
  border-color: var(--student-line);
  border-radius: 20px;
  background: #fffaf3;
}

.student-game-catalog {
  display: grid;
  gap: 18px;
}

.student-game-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  border: 1px solid rgba(234, 215, 189, .96);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(246, 196, 83, .46), transparent 28%),
    linear-gradient(135deg, #fffaf3, #ffe2b7 56%, #f5e6d3);
  box-shadow: 0 26px 58px rgba(74, 47, 29, .16);
  padding: 26px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.student-game-feature-card:hover {
  transform: translateY(-5px) scale(1.008);
  box-shadow: 0 34px 68px rgba(74, 47, 29, .2);
}

.student-game-feature-art {
  position: relative;
  min-height: 230px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 250, 243, .95), rgba(246, 196, 83, .22)),
    radial-gradient(circle at 50% 100%, rgba(54, 92, 59, .2), transparent 54%);
  box-shadow: inset 0 0 0 1px rgba(234, 215, 189, .95);
}

.student-game-feature-art span {
  position: absolute;
  left: 50%;
  top: 34px;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border-radius: 34px;
  background: linear-gradient(135deg, #365c3b, #d97706);
  color: #fffaf3;
  box-shadow: 0 18px 36px rgba(54, 92, 59, .22);
  font-size: 34px;
  font-weight: 1000;
  transform: translateX(-50%) rotate(-4deg);
}

.student-game-feature-art i,
.student-game-feature-art b {
  position: absolute;
  display: block;
  border-radius: 24px;
  background: rgba(74, 47, 29, .16);
}

.student-game-feature-art i {
  left: 54px;
  right: 54px;
  bottom: 56px;
  height: 20px;
}

.student-game-feature-art b {
  left: 84px;
  right: 84px;
  bottom: 82px;
  height: 74px;
  background: linear-gradient(90deg, rgba(54, 92, 59, .88), rgba(217, 119, 6, .78));
}

.student-game-feature-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.student-game-kicker {
  width: fit-content;
  border-radius: 999px;
  background: rgba(54, 92, 59, .12);
  color: var(--student-green);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.student-game-feature-card h3 {
  margin: 0;
  color: var(--student-brown);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 1000;
  line-height: .95;
}

.student-game-feature-card p {
  max-width: 620px;
  margin: 0;
  color: var(--student-muted);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.42;
}

.student-game-meta,
.student-game-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.student-game-meta span {
  border-radius: 999px;
  background: #fff7ea;
  color: var(--student-brown-soft);
  box-shadow: inset 0 0 0 1px rgba(234, 215, 189, .95);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
}

.student-game-feature-card button {
  position: relative;
  z-index: 1;
  align-self: end;
  white-space: nowrap;
}

.student-game-mini-card {
  min-width: 230px;
  flex: 1 1 230px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(234, 215, 189, .95);
  border-radius: 22px;
  background: rgba(255, 250, 243, .92);
  box-shadow: 0 16px 32px rgba(74, 47, 29, .09);
  padding: 18px;
}

.student-game-mini-card > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #4a2f1d, #d97706);
  color: #fffaf3;
  font-weight: 1000;
}

.student-game-mini-card strong {
  color: var(--student-brown);
  font-size: 18px;
  font-weight: 1000;
}

.student-game-mini-card small {
  width: fit-content;
  border-radius: 999px;
  background: rgba(217, 119, 6, .12);
  color: var(--student-orange);
  padding: 7px 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.student-autumn-view .student-assignment-detail-card header {
  background: linear-gradient(135deg, #fffaf3, #fff0dc);
  border-bottom-color: var(--student-line);
}

body.student-assignment-window-mode {
  overflow: hidden;
}

html.student-assignment-boot body {
  background: #260018;
}

html.student-assignment-boot body::before {
  content: "Cargando actividad...";
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .86);
  font-weight: 1000;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    radial-gradient(circle at 20% 15%, rgba(210, 74, 150, .22), transparent 32%),
    linear-gradient(135deg, #4b082d, #250017 68%, #11000d);
  background-size: 72px 72px, 72px 72px, auto, auto;
}

html.student-assignment-boot body > :not(#studentAssignmentDetailModal) {
  visibility: hidden;
}

.student-assignment-window-overlay.active {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  background: #fffaf3;
}

.student-assignment-window-overlay .student-assignment-detail-card.fullscreen-mode {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border-radius: 0;
  overflow: hidden;
}

.student-assignment-window-overlay .student-assignment-detail-card.fullscreen-mode .student-assignment-detail-body,
.student-assignment-window-overlay .student-assignment-detail-card.fullscreen-mode .student-assignment-detail-attachments {
  overflow: auto;
}

.student-assignment-window-overlay .student-assignment-detail-card.fullscreen-mode.questionnaire-mode {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
  width: 100vw;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
}

.student-assignment-window-overlay .student-assignment-detail-card.fullscreen-mode.questionnaire-mode > header {
  display: none;
}

.student-assignment-window-overlay .student-assignment-detail-card.fullscreen-mode.questionnaire-mode .student-assignment-detail-body {
  height: 100dvh;
}

.student-assignment-detail-card.questionnaire-mode {
  width: min(100vw, 1360px);
  height: min(100dvh, 760px);
  max-height: calc(100dvh - 18px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 10%, rgba(210, 74, 150, .22), transparent 34%),
    linear-gradient(135deg, #4b082d, #250017 68%, #11000d);
  color: #ffffff;
}

.student-autumn-view .student-assignment-detail-card.questionnaire-mode header {
  min-height: 54px;
  padding: 8px 14px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(40, 0, 25, .58);
}

.student-assignment-detail-card.questionnaire-mode header span,
.student-assignment-detail-card.questionnaire-mode header p,
.student-assignment-detail-card.questionnaire-mode header h2 {
  color: #ffffff;
}

.student-assignment-detail-card.questionnaire-mode .modal-close {
  color: #ffffff;
  background: rgba(255, 255, 255, .14);
}

.student-assignment-detail-card.questionnaire-mode .student-assignment-detail-body {
  height: calc(100% - 54px);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.student-questionnaire-player {
  display: grid;
  grid-template-rows: auto minmax(210px, .9fr) minmax(210px, 1fr) auto;
  gap: 12px;
  height: 100%;
  padding: 14px;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 72px 72px;
}

.student-questionnaire-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.student-questionnaire-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 1000;
}

.student-questionnaire-brand span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
}

.student-questionnaire-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 36px;
  padding: 0 14px;
  border: 2px solid rgba(246, 196, 83, .7);
  border-radius: 999px;
  background: #13000d;
  color: #f6c453;
  font-weight: 1000;
}

.student-questionnaire-status {
  justify-self: end;
  min-width: 0;
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.student-questionnaire-stage {
  display: grid;
  grid-template-columns: minmax(340px, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  min-height: 0;
}

.student-questionnaire-stage.compact {
  grid-template-columns: minmax(0, 1fr);
}

.student-questionnaire-media,
.student-questionnaire-prompt {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(12, 0, 8, .58);
  padding: 22px;
  overflow: auto;
}

.student-questionnaire-media-zoom {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 10px;
}

.student-questionnaire-media-zoom > *,
.student-questionnaire-media-zoom .question-bank-item,
.student-questionnaire-media-zoom .simce-item,
.student-questionnaire-media-zoom .simce-polished-block,
.student-questionnaire-media-zoom .question-panel,
.student-questionnaire-media-zoom article,
.student-questionnaire-media-zoom figure {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0;
  display: grid !important;
  place-items: center !important;
}

.student-questionnaire-media-zoom .app-figure {
  width: min(100%, 620px) !important;
  margin: 0 auto !important;
}

.student-questionnaire-media-zoom figcaption {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 1000;
  text-align: center;
}

.student-questionnaire-media img,
.student-questionnaire-media svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(100% - 28px);
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
}

.student-questionnaire-media p,
.student-questionnaire-media div,
.student-questionnaire-media table {
  max-width: 100%;
}

.student-questionnaire-player .math-mixed-number,
.student-questionnaire-player .math-fraction {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}

.student-questionnaire-player .math-mixed-number {
  gap: .14em;
  margin: 0 .08em;
}

.student-questionnaire-player .math-fraction {
  flex-direction: column;
  justify-content: center;
  gap: 0;
  line-height: 1;
  font-size: .9em;
  margin: 0 .08em;
}

.student-questionnaire-player .math-numerator {
  border-bottom: .09em solid currentColor;
  padding: 0 .18em .05em;
}

.student-questionnaire-player .math-denominator {
  padding: .05em .18em 0;
}

.student-questionnaire-prompt {
  text-align: center;
}

.student-questionnaire-prompt-text {
  width: min(100%, 980px);
}

.student-questionnaire-prompt span {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(246, 196, 83, .14);
  color: #f6c453;
  font-size: 12px;
  font-weight: 1000;
}

.student-questionnaire-prompt h3 {
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
}

.student-questionnaire-prompt-text,
.student-questionnaire-prompt-text p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 1000;
  line-height: 1.22;
}

.student-questionnaire-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.student-questionnaire-option {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 120px;
  border: 0;
  border-radius: 8px;
  padding: 18px 44px;
  color: #ffffff;
  background: linear-gradient(160deg, #b9b900, #697400);
  box-shadow: inset 0 -8px rgba(0, 0, 0, .18);
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, outline-color .16s ease;
}

.student-questionnaire-option:nth-child(2) {
  background: linear-gradient(160deg, #b15feb, #7d22ce);
}

.student-questionnaire-option:nth-child(3) {
  background: linear-gradient(160deg, #ff8a24, #ee3a00);
}

.student-questionnaire-option:nth-child(4) {
  background: linear-gradient(160deg, #2bc8c0, #087866);
}

.student-questionnaire-option:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.student-questionnaire-option.selected {
  outline: 4px solid #f6c453;
  outline-offset: -4px;
}

.student-questionnaire-option.feedback-correct {
  background: linear-gradient(160deg, #35d26f, #0f7a3b) !important;
  animation: student-questionnaire-correct-pulse .34s ease-in-out 2;
  outline: 5px solid rgba(188, 255, 209, .96);
  outline-offset: -5px;
}

.student-questionnaire-option.feedback-incorrect {
  background: linear-gradient(160deg, #ff5c61, #b31325) !important;
  animation: student-questionnaire-incorrect-pulse .34s ease-in-out 2;
  outline: 5px solid rgba(255, 205, 208, .96);
  outline-offset: -5px;
}

@keyframes student-questionnaire-correct-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  45% { filter: brightness(1.22); transform: scale(1.025); box-shadow: 0 0 0 8px rgba(46, 213, 115, .24), inset 0 -8px rgba(0, 0, 0, .16); }
}

@keyframes student-questionnaire-incorrect-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  35% { filter: brightness(1.18); transform: translateX(-5px); box-shadow: 0 0 0 8px rgba(255, 82, 82, .22), inset 0 -8px rgba(0, 0, 0, .16); }
  70% { transform: translateX(5px); }
}

.student-questionnaire-option:disabled {
  cursor: not-allowed;
  filter: saturate(.82);
}

.student-questionnaire-option > span {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  color: rgba(0, 0, 0, .72);
  font-size: 13px;
}

.student-questionnaire-option strong {
  color: #ffffff;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.2;
  text-align: center;
}

.student-questionnaire-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: rgba(255, 255, 255, .88);
  font-weight: 1000;
}

.student-questionnaire-footer button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}

.student-questionnaire-footer button.primary {
  background: linear-gradient(135deg, #f6c453, #d97706);
  color: #3b2105;
}

.student-questionnaire-footer button:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.student-questionnaire-footer div {
  text-align: center;
}

.student-questionnaire-player.empty,
.student-questionnaire-empty {
  display: grid;
  place-items: center;
  border-radius: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-weight: 1000;
}

.student-assignment-group-note,
.student-assignment-group-picker {
  display: grid;
  gap: 9px;
  border: 1px solid #bfd6c0;
  border-radius: 18px;
  background: #f1faef;
  color: var(--student-green);
  padding: 12px;
  font-weight: 900;
}

.student-assignment-group-picker > span,
.student-assignment-group-picker small {
  color: var(--student-muted);
  font-size: 12px;
}

.student-assignment-group-picker > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.student-assignment-group-picker label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid #bfd6c0;
  border-radius: 14px;
  background: white;
  padding: 9px;
  color: var(--student-ink);
  font-size: 12px;
}

.student-encouragement-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(135deg, #fff3dc, #ffe7bd);
}

.student-encouragement-card > span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff7ea;
  color: var(--student-orange);
}

.student-encouragement-card strong {
  color: var(--student-brown);
  font-size: 20px;
  font-weight: 900;
}

.student-autumn-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.leaf {
  position: absolute;
  width: 38px;
  height: 18px;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #d97706, #f6c453);
  box-shadow: 0 9px 16px rgba(217, 119, 6, .18);
}

.leaf::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 26px;
  height: 2px;
  background: rgba(74, 47, 29, .28);
  transform: rotate(-18deg);
}

.leaf-a {
  right: 19%;
  top: 22px;
  transform: rotate(-20deg);
}

.leaf-b {
  right: 8%;
  top: 82px;
  transform: rotate(35deg) scale(.82);
  background: linear-gradient(135deg, #b85f04, #d97706);
}

.leaf-c {
  left: 3%;
  bottom: 26px;
  transform: rotate(18deg) scale(.72);
  background: linear-gradient(135deg, #f6c453, #d97706);
}

.book-shape {
  position: absolute;
  right: 42px;
  bottom: 16px;
  width: 72px;
  height: 42px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(90deg, rgba(54, 92, 59, .28) 0 48%, rgba(36, 91, 134, .22) 49% 100%);
  transform: rotate(-5deg);
}

@media (max-width: 1180px) {
  .student-autumn-summary-grid,
  .student-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-autumn-feature-row {
    grid-template-columns: 1fr 1fr;
  }

  .challenge-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .student-autumn-view .student-shell {
    grid-template-columns: 1fr;
  }

  .student-autumn-view .student-top {
    position: static;
    min-height: auto;
    grid-column: 1;
  }

  .student-autumn-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .student-autumn-nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .student-autumn-view .student-content,
  .student-autumn-view .student-content-single {
    grid-column: 1;
  }

  .student-grade-report-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-game-feature-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .student-game-feature-card button {
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .student-autumn-view .student-content,
  .student-autumn-view .student-content-single {
    padding: 14px;
  }

  .student-autumn-nav,
  .student-autumn-summary-grid,
  .student-autumn-feature-row,
  .student-performance-grid,
  .student-locked-grid,
  .locked-art-card,
  .student-badge-row,
  .student-grade-report-meta,
  .student-assignment-group-picker > div,
  .student-calendar-card,
  .student-learning-row,
  .student-subject-bar,
  .challenge-card,
  .student-autumn-hero {
    grid-template-columns: 1fr;
  }

  .student-autumn-hero h2 {
    font-size: 30px;
  }

  .student-autumn-page-head {
    display: grid;
  }

  .student-subject-bar strong,
  .student-learning-row small {
    text-align: left;
  }

  .student-game-feature-art {
    min-height: 190px;
  }

  .student-game-feature-card h3 {
    font-size: 34px;
  }
}