/* Kidsverse internal tools protected stylesheet */
:root {
  --internal-ink: #173047;
  --internal-muted: rgba(31, 49, 66, 0.68);
  --internal-soft: rgba(255, 255, 255, 0.88);
  --internal-border: rgba(31, 49, 66, 0.1);
  --internal-teal: #0f8c7e;
  --internal-mint: #d9f7e8;
  --internal-sun: #ffd86f;
  --internal-coral: #ff7a5c;
  --internal-blue: #c9ecff;
}

body.teacher-page,
body.staff-login-page {
  min-width: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  color: var(--internal-ink) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 216, 111, 0.32), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(201, 236, 255, 0.62), transparent 30rem),
    radial-gradient(circle at 82% 88%, rgba(217, 247, 232, 0.74), transparent 28rem),
    linear-gradient(135deg, #fff8ec 0%, #f5fbff 52%, #f8fff9 100%) !important;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.teacher-page *,
body.staff-login-page * {
  box-sizing: border-box !important;
}

body.teacher-page a,
body.staff-login-page a {
  color: inherit;
}

body.teacher-page [hidden],
body.staff-login-page [hidden] {
  display: none !important;
}

.teacher-header,
.staff-access-header {
  position: sticky !important;
  top: 12px !important;
  z-index: 100 !important;
  width: min(1180px, calc(100% - 28px)) !important;
  margin: 12px auto 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 18px 48px rgba(31, 49, 66, 0.11) !important;
  backdrop-filter: blur(16px) !important;
}

.teacher-header .brand,
.staff-access-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 260px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.teacher-header .brand img,
.staff-access-brand img {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 16px !important;
  object-fit: contain !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(31, 49, 66, 0.12) !important;
}

.teacher-header .brand span,
.staff-access-brand span {
  min-width: 0 !important;
}

.teacher-header .brand strong,
.teacher-header .brand small,
.staff-access-brand strong,
.staff-access-brand small {
  display: block !important;
  overflow: hidden !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.teacher-header .brand strong,
.staff-access-brand strong {
  color: var(--internal-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
}

.teacher-header .brand small,
.staff-access-brand small {
  margin-top: 3px !important;
  color: rgba(31, 49, 66, 0.58) !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.teacher-tool-links,
.staff-access-nav {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding: 2px !important;
  scrollbar-width: thin !important;
}

.teacher-tool-links a,
.teacher-private-badge,
.teacher-switch-button,
.staff-access-nav a,
.staff-signout-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  width: auto !important;
  min-width: max-content !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.teacher-tool-links a,
.staff-access-nav a {
  color: rgba(31, 49, 66, 0.72) !important;
  background: rgba(31, 49, 66, 0.055) !important;
}

.teacher-tool-links a:hover,
.teacher-tool-links a:focus,
.teacher-tool-links a[aria-current="page"],
.staff-access-nav a:hover,
.staff-access-nav a:focus {
  color: var(--internal-teal) !important;
  background: rgba(39, 185, 167, 0.14) !important;
}

.teacher-private-badge,
.teacher-switch-button,
.staff-signout-button {
  color: #fff !important;
  background: linear-gradient(135deg, #173047, #0f8c7e) !important;
}

.teacher-assessment-shell,
.teacher-resource-shell,
.staff-login-shell {
  width: min(1180px, calc(100% - 28px)) !important;
  margin: 18px auto 46px !important;
  display: grid !important;
  gap: 18px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.staff-login-shell {
  min-height: calc(100vh - 48px) !important;
  place-items: center !important;
}

.staff-login-page.is-dashboard .staff-login-shell,
.staff-login-shell:has(.staff-dashboard:not([hidden])) {
  place-items: start center !important;
}

.teacher-hero,
.staff-login-card,
.staff-dashboard-head,
.assessment-layout,
.resource-center-layout,
.form-block,
.culture-report,
.report-placeholder,
.resource-side-panel,
.resource-class-section,
.resource-common-section,
.resource-card-grid article,
.staff-tool-card,
.staff-dashboard-note {
  min-width: 0 !important;
  border: 1px solid var(--internal-border) !important;
  background: var(--internal-soft) !important;
  box-shadow: 0 20px 56px rgba(31, 49, 66, 0.1) !important;
}

.teacher-hero,
.staff-dashboard-head,
.staff-login-card {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(22px, 4vw, 42px) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 216, 111, 0.42), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(39, 185, 167, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.9) !important;
}

.teacher-hero .eyebrow,
.assessment-intro .eyebrow,
.resource-side-panel .eyebrow,
.report-placeholder .eyebrow,
.staff-dashboard-head .eyebrow,
.staff-login-card .eyebrow {
  width: fit-content !important;
  margin: 0 0 10px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: #16453e !important;
  background: linear-gradient(135deg, var(--internal-mint), var(--internal-sun)) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.teacher-hero h1,
.staff-dashboard-head h1,
.staff-login-brand h1 {
  max-width: 920px !important;
  margin: 8px 0 10px !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: clamp(2.25rem, 5vw, 4.7rem) !important;
  font-weight: 800 !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.teacher-hero p:not(.eyebrow),
.staff-dashboard-head p:not(.eyebrow),
.staff-login-copy,
.resource-side-panel p,
.assessment-intro p,
.report-placeholder p,
.resource-class-head + p {
  max-width: 820px !important;
  margin: 0 !important;
  color: var(--internal-muted) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.58 !important;
}

.resource-confidential-warning,
.resource-active-class {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  font-size: 0.9rem !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

.resource-confidential-warning {
  color: #8a3a14 !important;
  background: rgba(255, 216, 111, 0.32) !important;
  border: 1px solid rgba(255, 184, 77, 0.34) !important;
}

.resource-active-class {
  color: var(--internal-teal) !important;
  background: rgba(39, 185, 167, 0.12) !important;
}

.assessment-layout,
.resource-center-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.58fr) !important;
  gap: 18px !important;
  align-items: start !important;
  padding: clamp(14px, 2vw, 22px) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

.student-report-layout,
.teacher-reading-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr) !important;
}

.resource-center-layout {
  grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr) !important;
}

.culture-form,
.student-report-form,
.teacher-reading-form,
.resource-content,
.student-rating-list,
.teacher-reading-passages {
  display: grid !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.form-block,
.resource-side-panel,
.resource-class-section,
.resource-common-section,
.culture-report {
  display: grid !important;
  gap: 14px !important;
  padding: clamp(16px, 2.2vw, 24px) !important;
  border-radius: 26px !important;
}

.resource-side-panel {
  position: sticky !important;
  top: 104px !important;
  align-self: start !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 216, 111, 0.3), transparent 32%),
    rgba(255,255,255,.88) !important;
}

.form-block h2,
.assessment-intro h2,
.resource-side-panel h2,
.resource-class-head h2,
.report-placeholder h2 {
  margin: 0 !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.teacher-form-grid,
.culture-area-grid,
.teacher-learning-grid,
.resource-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.resource-class-list {
  display: grid !important;
  gap: 8px !important;
}

.resource-class-list button,
.teacher-learning-grid a {
  display: grid !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 11px 13px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--internal-ink) !important;
  box-shadow: 0 12px 26px rgba(31, 49, 66, 0.06) !important;
  font: inherit !important;
  font-weight: 950 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.resource-class-list button:hover,
.resource-class-list button:focus,
.teacher-learning-grid a:hover,
.teacher-learning-grid a:focus {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #fff7e7, #e8fbf6) !important;
}

.teacher-learning-grid a span,
.resource-class-head span {
  width: fit-content !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  color: #16453e !important;
  background: linear-gradient(135deg, var(--internal-mint), var(--internal-sun)) !important;
  font-size: 0.75rem !important;
  font-weight: 950 !important;
}

.teacher-learning-grid a strong,
.teacher-learning-grid a small {
  display: block !important;
}

.teacher-learning-grid a strong {
  color: var(--internal-ink) !important;
  font-size: 1.05rem !important;
}

.teacher-learning-grid a small {
  color: var(--internal-muted) !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.resource-card-grid article {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
  min-height: 190px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 216, 111, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.92) !important;
}

.resource-card-grid article:nth-child(2n) {
  background:
    radial-gradient(circle at 16% 12%, rgba(39, 185, 167, 0.14), transparent 32%),
    rgba(255, 255, 255, 0.92) !important;
}

.resource-card-grid h3 {
  margin: 0 !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: 1.32rem !important;
  line-height: 1.05 !important;
}

.resource-card-grid ul,
.resource-card-grid ol {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding-left: 18px !important;
  color: rgba(31, 49, 66, 0.76) !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
}

.resource-card-grid p {
  margin: 0 !important;
  color: rgba(31, 49, 66, 0.76) !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

.teacher-form-grid label,
.student-photo-upload,
.culture-area label,
.learning-details-form label {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  color: #16453e !important;
  font-size: 0.9rem !important;
  font-weight: 950 !important;
  line-height: 1.3 !important;
}

.teacher-page input:not([type="radio"]):not([type="checkbox"]),
.teacher-page select,
.teacher-page textarea,
.staff-login-page input:not([type="checkbox"]),
.staff-login-page select,
.staff-login-page textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(31, 49, 66, 0.14) !important;
  border-radius: 16px !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--internal-ink) !important;
  box-shadow: 0 10px 24px rgba(31, 49, 66, 0.06) !important;
  font: inherit !important;
  font-weight: 850 !important;
}

.teacher-page textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

.teacher-page input[type="file"] {
  padding: 10px !important;
  background: #fff !important;
}

.teacher-page input[type="checkbox"],
.staff-login-page input[type="checkbox"] {
  position: static !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 2px 8px 0 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  accent-color: var(--internal-teal) !important;
  vertical-align: top !important;
}

.culture-area {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 216, 111, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(31, 49, 66, 0.07) !important;
}

.culture-area legend {
  color: var(--internal-ink) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.culture-area label {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  margin-top: 10px !important;
  color: rgba(31, 49, 66, 0.78) !important;
}

.auto-score {
  display: inline-flex !important;
  margin-left: 6px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: var(--internal-teal) !important;
  background: rgba(39, 185, 167, 0.12) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
}

.student-rating-list {
  display: grid !important;
  gap: 12px !important;
}

.student-rating-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(31, 49, 66, 0.07) !important;
}

.student-rating-row legend {
  min-width: 0 !important;
  padding: 0 !important;
}

.student-rating-row legend strong,
.student-rating-row legend span {
  display: block !important;
}

.student-rating-row legend strong {
  color: var(--internal-ink) !important;
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
}

.student-rating-row legend span {
  margin-top: 4px !important;
  color: var(--internal-muted) !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.star-rating {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 250px !important;
}

.star-rating label {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.star-rating input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

.star-rating span {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #d9a441 !important;
  box-shadow: 0 10px 22px rgba(31, 49, 66, 0.06) !important;
  font-size: 1.22rem !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.star-rating input:checked + span {
  color: #fff !important;
  border-color: rgba(255, 156, 98, 0.55) !important;
  background: linear-gradient(135deg, var(--internal-coral), var(--internal-sun)) !important;
}

.star-rating small {
  display: none !important;
}

.student-photo-upload span,
.field-helper {
  color: rgba(31, 49, 66, 0.58) !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.teacher-reading-photo-preview img,
.student-photo-preview img,
.student-report-photo {
  display: block !important;
  width: min(220px, 100%) !important;
  max-height: 250px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 34px rgba(31, 49, 66, 0.12) !important;
}

.teacher-reading-passages {
  display: grid !important;
  gap: 12px !important;
}

.teacher-reading-passage-card {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(31, 49, 66, 0.07) !important;
}

.teacher-reading-passage-card p {
  margin: 0 !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.teacher-reading-card-actions,
.teacher-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.teacher-actions .primary-button,
.teacher-actions .secondary-button,
.teacher-reading-card-actions .primary-button,
.teacher-reading-card-actions .secondary-button,
.teacher-reading-card-actions .tense-audio-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 160px !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font: inherit !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.teacher-reading-live-result,
.assessment-validation {
  display: grid !important;
  gap: 6px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(239, 249, 255, 0.92) !important;
  color: var(--internal-muted) !important;
  font-weight: 850 !important;
  line-height: 1.42 !important;
}

.teacher-reading-live-result strong {
  color: var(--internal-teal) !important;
  font-size: 1.05rem !important;
}

.teacher-reading-live-result p {
  margin: 0 !important;
  color: rgba(31, 49, 66, 0.66) !important;
  font-size: 0.95rem !important;
  overflow-wrap: anywhere !important;
}

.culture-report {
  position: sticky !important;
  top: 104px !important;
  align-self: start !important;
  max-height: calc(100vh - 128px) !important;
  overflow: auto !important;
}

.report-placeholder {
  display: grid !important;
  gap: 10px !important;
  padding: 22px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(217, 247, 232, 0.54), transparent 34%),
    rgba(255, 255, 255, 0.92) !important;
}

.report-card,
.report-dashboard {
  display: grid !important;
  gap: 16px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--internal-ink) !important;
}

.report-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff7e7, #e8fbf6) !important;
}

.report-head h2,
.report-panel h3 {
  margin: 0 !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  line-height: 1.05 !important;
}

.report-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
}

.score-ring {
  display: grid !important;
  place-items: center !important;
  width: 118px !important;
  height: 118px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--internal-teal), #1dbba9) !important;
  box-shadow: 0 18px 42px rgba(31, 49, 66, 0.16) !important;
  text-align: center !important;
}

.score-ring strong,
.score-ring span {
  display: block !important;
  line-height: 1 !important;
}

.score-ring strong {
  font-size: 2rem !important;
  font-weight: 950 !important;
}

.score-ring span {
  margin-top: 4px !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
}

.score-bars {
  display: grid !important;
  gap: 10px !important;
}

.score-bar-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

.score-bar-row strong,
.score-bar-row small {
  display: block !important;
}

.score-bar-row small {
  color: var(--internal-muted) !important;
  font-weight: 850 !important;
}

.score-bar-row span {
  color: var(--internal-teal) !important;
  font-weight: 950 !important;
}

.score-bar-row progress {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 10px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.report-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.report-panel {
  min-width: 0 !important;
  padding: 15px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.report-panel ul {
  display: grid !important;
  gap: 7px !important;
  margin: 10px 0 0 !important;
  padding-left: 18px !important;
  color: rgba(31, 49, 66, 0.76) !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

.staff-login-card,
.staff-dashboard {
  width: min(1180px, 100%) !important;
}

.staff-login-card {
  width: min(460px, 100%) !important;
}

.staff-login-brand {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

.staff-login-brand img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
}

.staff-access-code-form {
  display: grid !important;
  gap: 12px !important;
}

.staff-show-code {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: fit-content !important;
}

.staff-dashboard {
  display: grid !important;
  gap: 16px !important;
}

.staff-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

.staff-tool-card {
  display: grid !important;
  gap: 12px !important;
  align-content: space-between !important;
  min-height: 170px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
}

.staff-tool-card span {
  width: fit-content !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: rgba(15, 140, 126, 0.1) !important;
  color: var(--internal-teal) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.staff-tool-card strong,
.staff-tool-card small {
  display: block !important;
}

.staff-tool-card strong {
  color: var(--internal-ink) !important;
  font-size: 1.24rem !important;
  line-height: 1.08 !important;
}

.staff-tool-card small {
  color: var(--internal-muted) !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

@media (max-width: 1020px) {
  .teacher-header,
  .staff-access-header {
    grid-template-columns: 1fr !important;
    top: 0 !important;
    border-radius: 0 0 22px 22px !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .teacher-tool-links,
  .staff-access-nav {
    justify-content: flex-start !important;
  }

  .teacher-private-badge,
  .teacher-switch-button,
  .staff-signout-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .assessment-layout,
  .student-report-layout,
  .teacher-reading-layout,
  .resource-center-layout {
    grid-template-columns: 1fr !important;
  }

  .resource-side-panel,
  .culture-report {
    position: static !important;
    max-height: none !important;
  }

  .staff-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .teacher-assessment-shell,
  .teacher-resource-shell,
  .staff-login-shell {
    width: min(100% - 22px, 1180px) !important;
    margin-top: 14px !important;
  }

  .teacher-hero,
  .staff-dashboard-head,
  .staff-login-card,
  .assessment-layout,
  .resource-center-layout,
  .form-block,
  .resource-side-panel,
  .resource-class-section,
  .resource-common-section,
  .culture-report {
    padding: 15px !important;
    border-radius: 22px !important;
  }

  .teacher-hero h1,
  .staff-dashboard-head h1,
  .staff-login-brand h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .teacher-form-grid,
  .culture-area-grid,
  .teacher-learning-grid,
  .resource-card-grid,
  .report-grid,
  .staff-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .student-rating-row,
  .report-head {
    grid-template-columns: 1fr !important;
  }

  .star-rating {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }

  .star-rating label {
    flex: 1 1 0 !important;
  }

  .star-rating span {
    width: 100% !important;
    height: 42px !important;
  }

  .teacher-actions,
  .teacher-reading-card-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .teacher-actions .primary-button,
  .teacher-actions .secondary-button,
  .teacher-reading-card-actions .primary-button,
  .teacher-reading-card-actions .secondary-button,
  .teacher-reading-card-actions .tense-audio-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .score-ring {
    width: 104px !important;
    height: 104px !important;
  }
}

/* Student monthly report layout and PNG export repair */
.student-monthly-report {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  color: var(--internal-ink) !important;
  background: #ffffff !important;
}

.student-monthly-report .report-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fff7e7, #e8fbf6) !important;
}

.student-report-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  min-width: 0 !important;
}

.student-report-title h2 {
  margin: 2px 0 !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: clamp(1.9rem, 3.3vw, 3.05rem) !important;
  line-height: 0.98 !important;
  overflow-wrap: normal !important;
}

.student-report-title p:not(.eyebrow) {
  margin: 0 !important;
  color: var(--internal-muted) !important;
  font-weight: 900 !important;
}

.student-monthly-report .student-report-photo {
  width: 148px !important;
  height: 148px !important;
  min-width: 148px !important;
  max-height: none !important;
  border: 5px solid #ffffff !important;
  border-radius: 30px !important;
  object-fit: cover !important;
  object-position: center top !important;
  box-shadow: 0 18px 42px rgba(31, 49, 66, 0.18) !important;
}

.student-monthly-report .student-report-photo.is-placeholder {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #d9f7e8, #ffd86f) !important;
}

.student-monthly-report .report-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.student-monthly-report .report-stat-grid article {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 14px !important;
  border: 1px solid var(--internal-border) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 28px rgba(31, 49, 66, 0.06) !important;
}

.student-monthly-report .report-stat-grid span,
.student-monthly-report .report-stat-grid small {
  color: var(--internal-muted) !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

.student-monthly-report .report-stat-grid strong {
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: 1.2rem !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
}

.student-monthly-report .student-feedback-panel p {
  margin: 6px 0 0 !important;
  color: rgba(31, 49, 66, 0.78) !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.student-monthly-report > h3 {
  margin: 2px 0 -4px !important;
  color: var(--internal-ink) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

.student-monthly-report .score-bar-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 70px !important;
  padding: 12px 14px !important;
}

.student-monthly-report .score-bar-row progress {
  display: none !important;
}

.student-monthly-report .score-bar-row span {
  min-width: 92px !important;
  text-align: right !important;
  letter-spacing: 1px !important;
}

.student-monthly-report .report-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.student-monthly-report .report-panel {
  min-width: 0 !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.student-report-export-shell {
  position: fixed !important;
  left: -20000px !important;
  top: 0 !important;
  width: 980px !important;
  min-height: 100vh !important;
  overflow: visible !important;
  z-index: -1 !important;
  background: #ffffff !important;
  pointer-events: none !important;
}

.student-report-png-export {
  position: static !important;
  display: grid !important;
  width: 940px !important;
  max-width: none !important;
  min-width: 940px !important;
  margin: 0 !important;
  padding: 28px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  contain: layout paint !important;
}

.student-report-png-export,
.student-report-png-export * {
  animation: none !important;
  transition: none !important;
  box-sizing: border-box !important;
}

.student-report-png-export .report-topline {
  grid-template-columns: minmax(0, 1fr) 118px !important;
}

.student-report-png-export .score-ring {
  width: 118px !important;
  height: 118px !important;
}

.student-report-png-export .student-report-photo {
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
}

.student-report-png-export .student-report-title h2 {
  font-size: 2.45rem !important;
}

@media (max-width: 760px) {
  .student-monthly-report .report-topline,
  .student-monthly-report .student-report-title,
  .student-monthly-report .report-stat-grid,
  .student-monthly-report .report-columns {
    grid-template-columns: 1fr !important;
  }

  .student-monthly-report .score-ring,
  .student-monthly-report .student-report-photo {
    margin: 0 auto !important;
  }
}