/* Spark Island is scoped to Teaching & Learning pages. Other EPG modules keep
   their existing visual language. All art is drawn in CSS or inline SVG. */
body.teaching-mode {
  background: #fffaf3;
}
.teaching-mode .workspace {
  background:
    radial-gradient(circle at 95% 3%, #e4ddff 0, transparent 18rem),
    radial-gradient(circle at 12% 18%, #fff1d6 0, transparent 20rem), #fffaf3;
}
.teaching-mode .sidebar {
  background: linear-gradient(170deg, #55419b, #315892 60%, #227b81);
}
.teaching-mode .sidebar .nav-group.open > .nav-group-toggle,
.teaching-mode .sidebar .nav-group.has-active > .nav-group-toggle,
.teaching-mode .sidebar .nav-btn.active {
  background: rgba(255, 237, 151, 0.22);
  color: #fff;
}
.teaching-mode .sidebar .nav-submenu {
  border-color: #f9d870;
}
.teaching-mode .student-shell .sidebar nav {
  align-content: start;
  background: transparent;
  box-shadow: none;
}
.teaching-mode .topbar {
  background: #fffcf6;
  border-bottom-color: #e8dfd5;
}
.teaching-mode .topbar h2,
.teaching-mode #content h3,
.teaching-mode #content h4 {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  letter-spacing: -0.025em;
}
.teaching-mode .topbar h2 {
  color: #423a88;
}
.teaching-mode .term-pill {
  background: #eeeaff;
  color: #55419b;
  font-weight: 800;
}
.teaching-mode .content {
  max-width: 1550px;
}
.teaching-mode #content > .panel,
.teaching-mode #content > .teaching-other-classes,
.teaching-mode #content > .hero-row {
  box-shadow: 0 12px 36px rgba(67, 57, 128, 0.07);
}
.teaching-mode #content > .panel {
  border: 2px solid #ece6f6;
  border-radius: 23px;
}
.teaching-mode #content .btn {
  min-height: 42px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
}
.teaching-mode #content .btn.primary {
  border: 1px solid #6a4ea9;
  background: #6a4ea9;
  color: #fff;
  box-shadow: 0 5px 0 #46337a;
}
.teaching-mode #content .btn.primary:hover:not(:disabled) {
  background: #594090;
  transform: translateY(-1px);
}
.teaching-mode #content .btn.secondary {
  border: 1px solid #d6cdf2;
  background: #f5f1ff;
  color: #513f8e;
}
.teaching-mode #content .btn:focus-visible,
.teaching-mode #content button:focus-visible,
.teaching-mode #content select:focus-visible {
  outline: 3px solid #e79c3f;
  outline-offset: 3px;
}
.teaching-world-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  overflow: hidden;
  margin-bottom: 23px;
  padding: 20px 25px;
  border: 2px solid #cab8ef;
  border-radius: 23px;
  background: linear-gradient(100deg, #eee7ff, #fff0db 85%);
}
.teaching-world-bar::after {
  content: "✦  ✿  ✦";
  position: absolute;
  top: -14px;
  right: 20%;
  color: #d4b1df;
  font-size: 44px;
  opacity: 0.45;
  pointer-events: none;
}
.teaching-world-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}
.teaching-world-mark {
  display: grid;
  place-items: center;
  width: 59px;
  height: 59px;
  flex: none;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #ffc962;
  color: #573d8e;
  box-shadow: 0 6px 0 #e9ad4e;
  font-size: 34px;
  transform: rotate(-8deg);
}
.teaching-world-kicker,
.teaching-eyebrow {
  color: #6853a7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.teaching-world-bar h3 {
  margin: 2px 0;
  color: #3f367f;
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.1;
}
.teaching-world-bar p {
  margin: 0;
  color: #615c78;
  font-weight: 600;
}
.teaching-world-picker {
  position: relative;
  z-index: 1;
  min-width: min(320px, 100%);
  color: #4d447a;
  font-size: 12px;
  font-weight: 900;
}
.teaching-world-picker select {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 2px solid #cab8ef;
  border-radius: 12px;
  background: #fff;
  color: #3f367f;
  font-weight: 700;
}
.teaching-world-controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: none;
  width: min(320px, 100%);
  gap: 9px;
}
.teaching-world-controls .teaching-sound-control {
  align-self: flex-start;
}
.teaching-sound-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 43px;
  padding: 8px 12px;
  border: 2px solid #c9bce9;
  border-radius: 13px;
  background: #fff;
  color: #514086;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.teaching-sound-control input {
  accent-color: #6550af;
}
.teaching-sound-control span {
  font-size: 19px;
  line-height: 1;
}
.teaching-sound-control strong {
  color: #765da7;
}
.teaching-audio-tools {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.teaching-sound-test {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #c7d8e9;
  border-radius: 8px;
  background: #eaf3fb;
  color: #1d527f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.teaching-sound-test:hover,
.teaching-sound-test:focus-visible {
  background: #d6eafa;
  outline-color: #2b73ae;
}
.teaching-class-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.teaching-class-search label {
  color: #4d3e84;
  font-size: 13px;
  font-weight: 900;
}
.teaching-class-search input {
  width: min(360px, 100%);
  min-height: 43px;
  padding: 9px 13px;
  border: 2px solid #cfc3e7;
  border-radius: 12px;
  background: #fff;
}
.teaching-class-search span {
  color: #675d82;
  font-size: 12px;
  font-weight: 800;
}
.teaching-class-no-results {
  color: #665d75;
  font-weight: 700;
}
.teaching-class-card[hidden],
.teaching-class-no-results[hidden] {
  display: none;
}
.teaching-world-empty {
  padding: 45px 24px !important;
  text-align: center;
}
.teaching-world-empty > span {
  display: block;
  color: #e9ae4e;
  font-size: 58px;
}
.teaching-world-empty h3 {
  margin: 2px 0;
  color: #493783;
}
.teaching-welcome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 250px;
  overflow: hidden;
  padding: 30px 40px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 6%, #8273d3 0, transparent 24%),
    radial-gradient(circle at 78% 90%, #2b999a 0, transparent 33%),
    linear-gradient(120deg, #4c4098, #5e5cbb 60%, #3998a2);
  color: #fff;
}
.teaching-welcome::after,
.teaching-behavior-hero::after {
  content: "✦  ✿  ★  ✦";
  position: absolute;
  right: 8%;
  top: 13px;
  font-size: 28px;
  letter-spacing: 30px;
  color: #fff0af;
  opacity: 0.65;
  pointer-events: none;
}
.teaching-welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 610px;
}
.teaching-welcome-tag {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 900;
}
.teaching-welcome h3 {
  margin: 17px 0 8px;
  color: #fff;
  font-size: clamp(30px, 3.8vw, 49px);
  line-height: 1.08;
}
.teaching-welcome p {
  margin: 0;
  max-width: 510px;
  color: #f6f0ff;
  font-size: 16px;
}
.teaching-welcome-chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 21px;
}
.teaching-welcome-chips span {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 99px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 11px;
  font-weight: 800;
}
.teaching-island-mascot {
  position: relative;
  z-index: 1;
  width: min(215px, 27vw);
  height: auto;
  flex: none;
  filter: drop-shadow(0 15px 0 rgba(30, 26, 82, 0.14));
  transform: rotate(8deg);
}
.teaching-behavior-hero .teaching-island-mascot { display: grid; place-items: center; aspect-ratio: 1; filter: none; transform: none; }
.teaching-behavior-hero .teaching-island-mascot .teaching-avatar { width: 96px; height: 96px; border: 0; background: transparent; }
.teaching-behavior-hero .teaching-island-mascot .teaching-avatar svg { width: 94px; height: 94px; }
.teaching-chat-welcome-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 20px; background: #e8f2fc; color: #29699d; font-size: 36px; }
.teaching-classes-panel {
  padding: 27px !important;
}
.teaching-classes-panel .teaching-section-heading {
  margin-bottom: 20px;
}
.teaching-class-grid,
.teaching-assignment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}
.teaching-class-card {
  position: relative;
  overflow: hidden;
  min-height: 211px;
  padding: 19px;
  border: 2px solid #f2d7af;
  border-radius: 20px;
  background: #fff9e9;
  box-shadow: 0 6px 0 #f1dfc6;
}
.teaching-class-card:nth-child(4n + 2) {
  border-color: #c9e4e1;
  background: #f0fffb;
  box-shadow: 0 6px 0 #d2ebe6;
}
.teaching-class-card:nth-child(4n + 3) {
  border-color: #dccff6;
  background: #f8f4ff;
  box-shadow: 0 6px 0 #e4dcf5;
}
.teaching-class-card:nth-child(4n + 4) {
  border-color: #f5d0d3;
  background: #fff4f5;
  box-shadow: 0 6px 0 #f4dee0;
}
.teaching-class-card-icon {
  position: absolute;
  top: 8px;
  right: 18px;
  color: #e5af55;
  font-size: 46px;
}
.teaching-class-card-kicker {
  display: block;
  max-width: 80%;
  color: #756c79;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.teaching-class-card h4 {
  margin: 13px 0 4px;
  color: #47377e;
  font-size: 29px;
}
.teaching-class-card p {
  margin: 0 0 19px;
  color: #665d75;
  font-weight: 700;
}
.teaching-class-card .btn {
  min-height: 37px !important;
}
.teaching-other-classes {
  margin-top: 18px;
  padding: 17px 20px;
  border: 2px dashed #d8c9ed;
  border-radius: 18px;
  background: #fff;
}
.teaching-other-classes summary,
.teaching-assignment-more summary {
  color: #58449a;
  font-weight: 900;
  cursor: pointer;
}
.teaching-other-class-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 7px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 14px;
}
.teaching-other-class-list button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px;
  border: 1px solid #e8e2f0;
  border-radius: 9px;
  background: #faf8ff;
  color: #40366f;
  text-align: left;
  cursor: pointer;
}
.teaching-other-class-list button:hover {
  background: #eee7ff;
}
.teaching-other-class-list button span {
  flex: none;
}
.teaching-assignment-panel > p {
  color: #665d75;
}
.teaching-assignment-card {
  padding: 18px;
  border: 2px solid #dfd6f2;
  border-radius: 18px;
  background: #fbf9ff;
}
.teaching-assignment-card > span {
  display: block;
  color: #523c91;
  font-size: 17px;
  font-weight: 900;
}
.teaching-assignment-card > strong {
  display: block;
  margin-top: 4px;
  color: #60747c;
  font-size: 12px;
}
.teaching-assignment-card > p {
  min-height: 36px;
  color: #7a6779;
  font-size: 12px;
}
.teaching-assignment-card label {
  display: block;
  color: #4d447a;
  font-size: 12px;
  font-weight: 800;
}
.teaching-assignment-card select {
  display: block;
  width: 100%;
  margin: 6px 0 14px;
  border-radius: 10px;
}
.teaching-assignment-card .btn {
  width: 100% !important;
}
.teaching-assigned-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 3px 2px 0;
  padding: 4px 7px;
  border-radius: 99px;
  background: #e9fff2;
  color: #23684f;
  font-weight: 800;
}
.teaching-assigned-person button {
  border: 0;
  background: transparent;
  color: #75505e;
  cursor: pointer;
  font-size: 17px;
}
.teaching-assignment-more {
  margin-top: 25px;
  padding-top: 16px;
  border-top: 2px dashed #e3d8f1;
}
.teaching-assignment-more .form-grid {
  margin-top: 15px;
}
.teaching-mode .teaching-behavior-panel {
  overflow: hidden;
  padding: 0 !important;
}
.teaching-behavior-hero {
  position: relative;
  min-height: 230px;
  padding: 24px 38px;
  background:
    radial-gradient(circle at 15% 100%, #ef869f 0, transparent 29%),
    linear-gradient(110deg, #6847ad, #a06bbd 62%, #56a8aa);
}
.teaching-behavior-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.teaching-behavior-hero .teaching-eyebrow {
  color: #ffe89b;
}
.teaching-behavior-hero h3 {
  margin: 12px 0 9px;
  color: #fff;
  font-size: clamp(32px, 4vw, 51px);
  line-height: 1.05;
}
.teaching-behavior-hero p {
  color: #fff8ff;
  font-size: 15px;
}
.teaching-behavior-hero .teaching-island-mascot {
  width: min(175px, 23vw);
  margin-right: 28px;
}
.teaching-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.teaching-hero-actions > span {
  color: #fff7d9;
  font-size: 12px;
  font-weight: 800;
}
.teaching-mode #content .teaching-display-button {
  border: 0;
  background: #ffdf7e;
  color: #553779;
  box-shadow: 0 5px 0 #dda95b;
}
.teaching-roster {
  background: #fffdf8;
}
.teaching-composer {
  background: #f7f2ff;
}
.teaching-mode .teaching-students {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 12px;
}
.teaching-mode .teaching-student {
  flex-direction: column;
  justify-content: center;
  min-height: 145px;
  border: 2px solid #e2d9f1;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 5px 0 #f0ebf7;
  text-align: center;
}
.teaching-mode label.teaching-student:hover {
  border-color: #af83d3;
  box-shadow: 0 6px 0 #e8d8f2;
}
.teaching-mode .teaching-student:has(input:checked) {
  border-color: #9c65c4;
  background: #f5eaff;
  box-shadow: 0 5px 0 #dfc7f2;
}
.teaching-student-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teaching-student-wrap .teaching-student {
  flex: 1;
  height: auto;
  padding-right: 15px;
  padding-left: 15px;
}
.teaching-character-edit {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #d7c9e9;
  border-radius: 9px;
  background: #fff;
  color: #574390;
  cursor: pointer;
}
.teaching-character-edit:hover {
  background: #f4edff;
}
.teaching-character-picker {
  width: min(760px, 94vw);
  max-width: none;
  max-height: 88vh;
  margin: auto;
  padding: 24px;
  border: 0;
  border-radius: 25px;
  background: #fffaf0;
  box-shadow: 0 25px 80px rgba(37, 27, 91, 0.35);
}
.teaching-character-picker::backdrop {
  background: rgba(30, 22, 76, 0.65);
}
.teaching-character-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.teaching-character-picker-head h3 {
  margin: 4px 0;
  color: #493783;
  font-size: 25px;
}
.teaching-character-picker-head p,
.teaching-character-hint {
  color: #675b7c;
  font-weight: 700;
}
.teaching-character-picker-head button {
  flex: none;
  width: 38px;
  height: 38px;
  border: 2px solid #ddcfea;
  border-radius: 50%;
  background: #fff;
  color: #584196;
  font-size: 25px;
  cursor: pointer;
}
.teaching-character-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 19px;
}
.teaching-character-options button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 115px;
  padding: 11px;
  border: 2px solid #e1d7eb;
  border-radius: 17px;
  background: #fff;
  color: #4c3c7e;
  cursor: pointer;
}
.teaching-character-options button:hover,
.teaching-character-options button[aria-pressed="true"] {
  border-color: #9c76c6;
  background: #f5edff;
  box-shadow: 0 4px 0 #e2d4f1;
}
.teaching-character-options .teaching-avatar {
  width: 70px;
  height: 70px;
}
.teaching-character-options .teaching-avatar svg {
  width: 66px;
  height: 66px;
}
.teaching-character-options strong {
  font-size: 12px;
}
.teaching-mode .teaching-avatar {
  width: 58px;
  height: 58px;
  border-radius: 19px;
  background: #eee9e2;
}
.teaching-mode .teaching-avatar svg {
  width: 54px;
  height: 54px;
}
.teaching-mode .teaching-student-name {
  width: 100%;
  flex: 0 0 auto;
  color: #46387c;
  font-size: 14px;
}
.teaching-mode .teaching-points {
  align-self: center;
  margin-top: auto;
  padding: 4px 7px;
  border-radius: 99px;
  background: #e9fff1;
  color: #237c5f;
  font-size: 11px;
}
.teaching-mode .teaching-points.is-negative {
  background: #fff1f3;
  color: #a7526c;
}
.teaching-mode .teaching-skill {
  min-height: 60px;
  border: 2px solid #e6d9f6;
  border-radius: 14px;
  color: #443675;
  box-shadow: 0 4px 0 #eae2f5;
}
.teaching-mode .teaching-skill:hover,
.teaching-mode .teaching-skill.is-active {
  border-color: #a47ace;
  background: #fff9e7;
  box-shadow: 0 4px 0 #e2caed;
}
.teaching-mode .teaching-skill-icon {
  background: #fff0b9;
  color: #78509d;
  font-size: 20px;
}
.teaching-mode .teaching-feedback-tip {
  border-radius: 17px;
  background: #fff8e1;
}
.teaching-mode .teaching-history h3 {
  color: #47377e;
}
.teaching-mode .teaching-plan-hero {
  min-height: 185px;
  background:
    radial-gradient(circle at 85% 15%, #8ee0d0 0, transparent 25%),
    linear-gradient(110deg, #4a8aa9, #6955ab 78%);
}
.teaching-mode .teaching-plan-hero h3 {
  font-size: clamp(29px, 3.5vw, 43px);
}
.teaching-mode .teaching-plan-create {
  border: 2px solid #d8c9ed;
  background: #fcf8ff;
}
.teaching-mode .teaching-plan-item {
  border: 2px solid #dddef3;
  border-radius: 16px;
  background: #fcfbff;
}
.teaching-mode .teaching-plan-item.is-active {
  border-color: #a47ace;
  background: #f5edff;
}
.teaching-mode .teaching-plan-student {
  border-radius: 14px;
}
.teaching-mode .teaching-plan-student.is-active {
  border-color: #b28bd2;
  background: #f9f1ff;
}
.teaching-batch-panel {
  background: #fffdf8 !important;
}
.teaching-batch-panel summary,
.teaching-batch-upload summary {
  color: #513c8c;
  font:
    900 19px "Trebuchet MS",
    sans-serif;
  cursor: pointer;
}
.teaching-batch-panel summary span,
.teaching-batch-upload summary span {
  display: block;
  margin: 4px 0 0 20px;
  color: #716b7c;
  font:
    600 12px "DM Sans",
    sans-serif;
}
.teaching-batch-panel details > p,
.teaching-batch-upload > p {
  max-width: 800px;
  color: #625d73;
  font-size: 13px;
}
.teaching-batch-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.teaching-batch-row,
.teaching-batch-upload-row {
  padding: 13px;
  border: 2px solid #e7dff3;
  border-radius: 15px;
  background: #fbf8ff;
}
.teaching-batch-choice,
.teaching-batch-upload-row > label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #463a79;
  cursor: pointer;
}
.teaching-batch-choice input,
.teaching-batch-upload-row input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: #7451ae;
}
.teaching-batch-choice .teaching-avatar,
.teaching-batch-upload-row .teaching-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.teaching-batch-choice .teaching-avatar svg,
.teaching-batch-upload-row .teaching-avatar svg {
  width: 38px;
  height: 38px;
}
.teaching-batch-choice strong,
.teaching-batch-upload-row strong {
  overflow-wrap: anywhere;
}
.teaching-batch-choice small {
  margin-left: auto;
  color: #746b83;
}
.teaching-batch-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 16px 4px 3px;
}
.teaching-batch-fields[hidden] {
  display: none !important;
}
.teaching-batch-fields label {
  color: #514571;
  font-size: 12px;
  font-weight: 800;
}
.teaching-batch-fields label span {
  color: #817791;
  font-weight: 500;
}
.teaching-batch-fields input,
.teaching-batch-fields textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  border-radius: 9px;
}
.teaching-batch-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 16px;
}
.teaching-batch-footer > span {
  color: #5d5676;
  font-size: 12px;
  font-weight: 800;
}
.teaching-batch-upload {
  margin-top: 19px;
  padding: 17px;
  border: 2px dashed #d6c5ea;
  border-radius: 15px;
  background: #fffcf5;
}
.teaching-batch-upload-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(190px, 1fr);
  align-items: center;
  gap: 10px;
  background: #fff;
}
.teaching-batch-upload-row input[type="file"] {
  width: 100%;
  min-width: 0;
}
.teaching-mode .teaching-attendance-panel > .hero-row {
  padding: 18px 22px;
  border-radius: 17px;
  background: linear-gradient(110deg, #e9f8fa, #fff2d4);
}
.teaching-mode .teaching-attendance-panel > .hero-row h3 {
  margin: 3px 0;
  color: #3f6e82;
}
.teaching-mode .teaching-attendance-panel tbody tr:nth-child(odd) {
  background: #fbf9ff;
}
.teaching-mode .teaching-attendance-panel tbody td:first-child {
  color: #443675;
  font-weight: 800;
}
.teaching-mode #content > .hero-row {
  padding: 20px 25px;
  border-radius: 20px;
  background: linear-gradient(110deg, #eee7ff, #fff1d7);
}
.teaching-mode #content > .hero-row h3 {
  color: #493784;
}
.teaching-mode #content > .cards .metric {
  min-height: 116px;
  border: 2px solid #ded5f1;
  border-radius: 19px;
  background: #f9f5ff;
  box-shadow: 0 5px 0 #eee7fa;
}
.teaching-mode #content > .cards .metric:nth-child(2) {
  border-color: #f5dcb3;
  background: #fff9ea;
  box-shadow: 0 5px 0 #f7ecd9;
}
.teaching-mode #content > .cards .metric:nth-child(3) {
  border-color: #cde7df;
  background: #f1fff9;
  box-shadow: 0 5px 0 #e2f5eb;
}
.teaching-mode #content > .cards .metric strong {
  font-family: "Trebuchet MS", sans-serif;
  color: #4d3c88;
}
.teaching-mode #content .teaching-family-plan {
  border: 2px solid #d5eee7;
  border-radius: 18px;
  background: #f4fffb;
}
.teaching-mode #content .teaching-family-score {
  border-radius: 99px;
}
.teaching-mode #content .teaching-calendar-day {
  border-radius: 12px;
}
.teaching-showcase {
  width: min(1200px, 96vw);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #fff9e9;
  box-shadow: 0 28px 90px rgba(30, 24, 80, 0.38);
}
.teaching-showcase::backdrop {
  background: rgba(24, 17, 74, 0.8);
  backdrop-filter: blur(6px);
}
.teaching-showcase-inner {
  position: relative;
  min-height: min(680px, 90vh);
  overflow-y: auto;
  padding: 43px;
  background:
    radial-gradient(circle at 3% 4%, #ffe0b2 0, transparent 20%),
    radial-gradient(circle at 96% 10%, #d8d2ff 0, transparent 24%),
    radial-gradient(circle at 80% 100%, #ceefe5 0, transparent 32%), #fff9e9;
  text-align: center;
}
.teaching-showcase-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 39px;
  height: 39px;
  border: 2px solid #d8c9ed;
  border-radius: 50%;
  background: #fff;
  color: #60479b;
  font-size: 27px;
  cursor: pointer;
}
.teaching-showcase-kicker {
  color: #6a4ea9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.teaching-showcase-title {
  margin: 10px 0 5px;
  color: #503893;
  font:
    900 clamp(29px, 5vw, 58px) / 1.05 "Trebuchet MS",
    sans-serif;
}
.teaching-showcase-inner > p {
  margin: 0 auto 25px;
  color: #5f5a73;
  font-size: 16px;
}
.teaching-showcase-sound {
  margin: 8px auto 12px;
}
.teaching-showcase-child[role="button"] {
  cursor: pointer;
}
.teaching-showcase-child[role="button"]:focus-visible {
  outline: 3px solid #e49d42;
  outline-offset: 3px;
}
.teaching-showcase-child.is-wiggling {
  animation: teaching-spark-wiggle 0.55s ease-out;
}
@keyframes teaching-spark-wiggle {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  30% {
    transform: rotate(-7deg) scale(1.06);
  }
  65% {
    transform: rotate(6deg) scale(1.03);
  }
}
.teaching-showcase-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.teaching-showcase-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 7px;
  border: 2px solid #e4dbf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 #eee6f4;
}
.teaching-showcase-child:nth-child(4n + 2) {
  border-color: #fae1b2;
  box-shadow: 0 5px 0 #f9edda;
}
.teaching-showcase-child:nth-child(4n + 3) {
  border-color: #c8e8df;
  box-shadow: 0 5px 0 #e1f4ee;
}
.teaching-showcase-child:nth-child(4n + 4) {
  border-color: #f4d2df;
  box-shadow: 0 5px 0 #f9e5eb;
}
.teaching-showcase-child .teaching-avatar {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: #fff5dd;
}
.teaching-showcase-child .teaching-avatar svg {
  width: 70px;
  height: 70px;
}
.teaching-showcase-child strong {
  color: #493b84;
  font:
    800 15px "Trebuchet MS",
    sans-serif;
}
.teaching-celebrate-button {
  margin-top: 27px;
  padding: 13px 24px;
  border: 0;
  border-radius: 99px;
  background: #6550af;
  color: #fff;
  box-shadow: 0 6px 0 #463480;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}
.teaching-celebrate-button:hover {
  background: #503e96;
}
.teaching-showcase-confetti {
  position: absolute;
  inset: 230px 0 0;
  z-index: 0;
  display: grid;
  place-items: start center;
  color: #e7a347;
  font-size: clamp(28px, 5vw, 65px);
  letter-spacing: 1.5vw;
  opacity: 0;
  pointer-events: none;
}
.teaching-showcase-title,
.teaching-showcase-sound,
.teaching-showcase-inner > p,
.teaching-showcase-roster,
.teaching-celebrate-button {
  position: relative;
  z-index: 1;
}
.teaching-showcase.is-celebrating .teaching-showcase-confetti {
  animation: teaching-confetti 1.25s ease-out;
}
@keyframes teaching-confetti {
  0% {
    transform: translateY(-50px) rotate(-12deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(300px) rotate(12deg);
    opacity: 0;
  }
}
@media (max-width: 1180px) {
  .teaching-behavior-hero .teaching-island-mascot {
    margin-right: 0;
  }
}
@media (max-width: 760px) {
  .teaching-mode .content {
    padding: 18px 15px;
  }
  .teaching-world-bar {
    align-items: stretch;
    padding: 18px;
  }
  .teaching-world-picker {
    width: 100%;
  }
  .teaching-world-controls {
    width: 100%;
  }
  .teaching-welcome {
    min-height: 225px;
    padding: 24px;
  }
  .teaching-welcome .teaching-island-mascot {
    width: 112px;
    position: absolute;
    right: 7px;
    top: 13px;
    opacity: 0.7;
  }
  .teaching-welcome-copy {
    padding-right: 35px;
  }
  .teaching-behavior-hero {
    min-height: 195px;
    padding: 23px 22px;
  }
  .teaching-behavior-hero .teaching-island-mascot {
    width: 90px;
    position: absolute;
    right: 4px;
    top: 3px;
    opacity: 0.65;
  }
  .teaching-behavior-hero-copy {
    padding-right: 20px;
  }
  .teaching-showcase-inner {
    padding: 35px 16px;
  }
  .teaching-showcase-roster {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  }
  .teaching-batch-fields,
  .teaching-batch-upload-row {
    grid-template-columns: 1fr;
  }
}
.teaching-assessment-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.teaching-assessment-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #d9e3ed; border-radius: 8px; background: #fff; color: #5d7185; font-size: 12px; font-weight: 700; }
.teaching-assessment-steps span.is-complete { border-color: #a9d5b9; background: #eef8f1; color: #246a41; }
.teaching-assessment-steps b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #e6edf5; color: #42607e; }
.teaching-assessment-steps .is-complete b { background: #cbead4; color: #17683b; }
.teaching-mode #nav,
.teaching-mode #nav .nav-group,
.teaching-mode #nav .nav-submenu { align-content: start; }
.teaching-mode #nav { grid-auto-rows: max-content; }
.teaching-mode #nav .nav-group { grid-template-rows: max-content max-content; }
.teaching-mode #nav .nav-group-toggle { min-height: 40px; height: 40px; }
.teaching-mode #nav .nav-submenu { grid-auto-rows: 40px; }
.teaching-mode .sidebar .sidebar-toggle,
.teaching-mode .sidebar .sidebar-foot small { color: #3e607f; }
.teaching-mode #content h2 { font-family: Arial, Helvetica, sans-serif; letter-spacing: -.02em; }
.teaching-mode .teaching-student-hero { min-height: 190px; gap: 24px; padding: 25px; }
.teaching-mode .teaching-student-big-avatar { width: 128px; height: 128px; padding: 7px; border: 1px solid #d7e4ed; border-radius: 22px; background: #e7f2f4; box-shadow: none; transform: none; }
.teaching-mode .teaching-student-big-avatar:hover { transform: translateY(-2px); }
.teaching-mode .teaching-student-orbit { opacity: .24; font-size: 22px; }
.teaching-mode .teaching-student-intro h2 { color: #183756; font-size: clamp(26px,3vw,38px); }
.teaching-mode .teaching-student-intro p { color: #536a80; font-size: 15px; font-weight: 500; }
.teaching-mode .teaching-student-badges span { padding: 6px 10px; border: 1px solid #cbddea; border-radius: 8px; background: #fff; color: #35658e; font-weight: 700; }
.teaching-mode .teaching-student-panel { padding: 20px; border: 1px solid #dbe5ef; border-radius: 13px; background: #fff; box-shadow: none; }
.teaching-mode .teaching-student-panel h3 { color: #1c4268; font-size: 23px; }
.teaching-mode .teaching-student-panel > p { color: #536c83; }
.teaching-mode .teaching-student-friend-grid { grid-template-columns: repeat(auto-fill,minmax(115px,1fr)); gap: 10px; }
.teaching-mode .teaching-student-friend-grid button,
.teaching-mode .teaching-student-friend-grid button:hover { min-height: 115px; border: 1px solid #d9e5ef; border-radius: 10px; color: #315877; box-shadow: none; transform: none; }
.teaching-mode .teaching-student-friend-grid button[aria-pressed="true"] { border: 2px solid #5b94c9; background: #ebf5fd; box-shadow: none; }
.teaching-mode .teaching-student-friend-grid .teaching-avatar { width: 64px; height: 64px; }
.teaching-mode .teaching-student-friend-grid .teaching-avatar svg { width: 62px; height: 62px; }
.teaching-mode .teaching-student-moment,
.teaching-mode .teaching-student-attendance-list > div { border-bottom-color: #e2eaf2; }
.teaching-channel-file { display: flex; align-items: center; gap: 8px; justify-self: start; color: #2e628f; font-weight: 700; }
.teaching-channel-file input { max-width: 280px; }
.teaching-channel-posts .teaching-chat-attachment { display: inline-flex; margin-top: 8px; color: #1f5e94; font-weight: 700; }
@media (max-width: 470px) {
  .teaching-world-mark {
    width: 47px;
    height: 47px;
    border-radius: 15px;
    font-size: 27px;
  }
  .teaching-world-bar h3 {
    font-size: 22px;
  }
  .teaching-welcome h3 {
    font-size: 30px;
  }
  .teaching-welcome-chips {
    gap: 5px;
  }
  .teaching-welcome-chips span {
    font-size: 10px;
  }
  .teaching-mode .teaching-students {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teaching-mode .teaching-student {
    min-height: 125px;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
  }
  .teaching-mode .teaching-student-name {
    flex: 0 0 auto;
    width: 100%;
    min-height: 2.5em;
    overflow-wrap: normal;
  }
  .teaching-mode .teaching-points {
    width: auto;
    margin: auto auto 0;
    padding-left: 7px;
  }
  .teaching-showcase-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teaching-showcase-child strong {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .teaching-showcase.is-celebrating .teaching-showcase-confetti {
    animation: none;
  }
  .teaching-mode #content .btn.primary:hover:not(:disabled) {
    transform: none;
  }
  .teaching-showcase-child.is-wiggling {
    animation: none;
  }
}

/* Spark Island figures and the learner's own world. */
.teaching-mode .teaching-avatar svg {
  filter: drop-shadow(0 4px 3px rgba(67, 61, 112, 0.22));
}
.teaching-character-picker {
  max-height: min(92vh, 900px);
  overflow-y: auto;
}
.teaching-student-home {
  display: grid;
  gap: 22px;
  max-width: 1380px;
  margin: 0 auto;
}
.teaching-student-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  min-height: 265px;
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  border: 3px solid #f2d777;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 22%, #fff7bf 0, transparent 31%),
    linear-gradient(125deg, #fff9e0, #ffe9ed 55%, #e8deff);
  box-shadow:
    0 12px 0 #e7d2db,
    0 25px 45px rgba(105, 66, 121, 0.13);
}
.teaching-student-orbit {
  position: absolute;
  top: 15px;
  right: 30px;
  color: #db88bc;
  font-size: 38px;
  letter-spacing: 18px;
  opacity: 0.65;
  pointer-events: none;
}
.teaching-student-big-avatar {
  flex: none;
  width: clamp(130px, 18vw, 210px);
  height: clamp(130px, 18vw, 210px);
  padding: 12px;
  border: 4px solid #fff;
  border-radius: 38%;
  background: radial-gradient(circle at 30% 20%, #f5efe7, #dbcbb9 68%, #c7aeb5);
  box-shadow:
    inset 0 -10px 18px #bfa6a7,
    0 15px 0 #b69e94,
    0 21px 25px #856d82aa;
  cursor: pointer;
  transform: rotate(-4deg);
  transition: transform 0.2s ease;
}
.teaching-student-big-avatar:hover {
  transform: rotate(3deg) translateY(-5px);
}
.teaching-student-big-avatar .teaching-avatar,
.teaching-student-big-avatar .teaching-avatar svg {
  width: 100%;
  height: 100%;
  background: transparent;
}
.teaching-student-intro {
  position: relative;
  flex: 1;
}
.teaching-student-intro h2 {
  margin: 5px 0 9px;
  color: #62418b;
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.03;
}
.teaching-student-intro p {
  margin: 0 0 19px;
  color: #745e84;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 750;
}
.teaching-student-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.teaching-student-badges span {
  padding: 9px 15px;
  border: 2px solid #e9b9cf;
  border-radius: 999px;
  background: #fffdf6;
  color: #6b4d86;
  font-weight: 900;
}
.teaching-student-hero > .teaching-audio-tools {
  position: absolute;
  top: 15px;
  right: 17px;
  z-index: 1;
}
.teaching-student-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.8fr);
  gap: 20px;
  align-items: start;
}
.teaching-student-side {
  display: grid;
  gap: 20px;
}
.teaching-student-panel {
  min-width: 0;
  padding: 25px;
  border: 2px solid #e1d3f2;
  border-radius: 27px;
  background: #fffefa;
  box-shadow: 0 7px 0 #e9e1f0;
}
.teaching-student-panel h3 {
  margin: 4px 0 12px;
  color: #573d88;
  font-size: clamp(23px, 2vw, 30px);
}
.teaching-student-panel > p {
  color: #70627f;
  line-height: 1.5;
}
.teaching-student-friends {
  background: linear-gradient(145deg, #fffefa, #f8f1ff);
}
.teaching-student-friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.teaching-student-friend-grid button {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
  border: 3px solid #e6dcef;
  border-radius: 21px;
  background: #fff;
  color: #65518c;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 5px 0 #e1d9e8;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.teaching-student-friend-grid button:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 0 #e1d9e8;
}
.teaching-student-friend-grid button[aria-pressed="true"] {
  border-color: #ea9ac2;
  background: #fff2df;
  box-shadow: 0 5px 0 #eac0ae;
}
.teaching-student-friend-grid .teaching-avatar {
  width: 78px;
  height: 78px;
  background: transparent;
}
.teaching-student-friend-grid .teaching-avatar svg {
  width: 76px;
  height: 76px;
}
.teaching-student-moment,
.teaching-student-attendance-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px dashed #e7d9ee;
}
.teaching-student-moment > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #ffecb6;
  color: #d38e33;
  font-size: 24px;
}
.teaching-student-moment div {
  flex: 1;
  display: grid;
  gap: 3px;
}
.teaching-student-moment small {
  color: #827596;
}
.teaching-student-moment b {
  color: #3d9d82;
  font-size: 22px;
}
.teaching-student-moments .btn {
  margin-top: 18px;
}
.teaching-student-attendance-list > div {
  justify-content: space-between;
}
.teaching-student-attendance-list span {
  padding: 5px 10px;
  border-radius: 99px;
  background: #ecf6ed;
  color: #49665e;
  font-weight: 800;
}
.teaching-student-feedback article {
  margin-top: 15px;
  padding: 16px;
  border-radius: 18px;
  background: #f7f3ff;
}
.teaching-student-feedback article small {
  color: #8261ac;
  font-weight: 800;
}
.teaching-student-feedback article h4 {
  margin: 5px 0;
  color: #4e3b7b;
  font-size: 18px;
}
.teaching-student-feedback article strong {
  color: #328f83;
}
.teaching-student-feedback article p {
  margin: 9px 0 0;
  line-height: 1.5;
}
@media (max-width: 950px) {
  .teaching-student-grid {
    grid-template-columns: 1fr;
  }
  .teaching-student-friends {
    grid-row: auto;
  }
}
@media (max-width: 620px) {
  .teaching-student-hero {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 25px;
  }
  .teaching-student-hero > .teaching-audio-tools {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    align-self: flex-start;
  }
  .teaching-student-big-avatar {
    align-self: center;
  }
  .teaching-student-friend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teaching-student-panel {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .teaching-student-big-avatar,
  .teaching-student-friend-grid button {
    transition: none;
  }
}

.teaching-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.spark-reacting {
  position: relative;
  z-index: 3;
}
.spark-reacting .teaching-avatar img {
  transform-origin: center 54%;
  animation: var(--spark-motion) 900ms ease-in-out both;
}
.spark-reacting::after {
  content: attr(data-spark-reaction);
  position: absolute;
  z-index: 5;
  top: -19px;
  left: 50%;
  width: max-content;
  max-width: 175px;
  padding: 6px 10px;
  border: 1px solid #bdacc7;
  border-radius: 12px;
  background: #f6f1ea;
  box-shadow: 0 4px 10px #54486a30;
  color: #4d455f;
  font:
    800 12px "Trebuchet MS",
    sans-serif;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: spark-reaction-pop 1.3s ease-out both;
}
.spark-reacting[data-spark-key="star"] {
  --spark-motion: spark-star;
}
.spark-reacting[data-spark-key="cloud"] {
  --spark-motion: spark-cloud;
}
.spark-reacting[data-spark-key="moth"] {
  --spark-motion: spark-moth;
}
.spark-reacting[data-spark-key="fox"] {
  --spark-motion: spark-fox;
}
.spark-reacting[data-spark-key="octopus"] {
  --spark-motion: spark-octopus;
}
.spark-reacting[data-spark-key="robot"] {
  --spark-motion: spark-robot;
}
.spark-reacting[data-spark-key="flower"] {
  --spark-motion: spark-flower;
}
.spark-reacting[data-spark-key="penguin"] {
  --spark-motion: spark-penguin;
}
.spark-reacting[data-spark-key="dragon"] {
  --spark-motion: spark-dragon;
}
.spark-reacting[data-spark-key="whale"] {
  --spark-motion: spark-whale;
}
.spark-reacting[data-spark-key="bunny"] {
  --spark-motion: spark-bunny;
}
.spark-reacting[data-spark-key="dinosaur"] {
  --spark-motion: spark-dinosaur;
}
.spark-reacting[data-spark-key="bee"] {
  --spark-motion: spark-bee;
}
.spark-reacting[data-spark-key="turtle"] {
  --spark-motion: spark-turtle;
}
.spark-reacting[data-spark-key="unicorn"] {
  --spark-motion: spark-unicorn;
}
@keyframes spark-reaction-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 7px) scale(0.85);
  }
  18%,
  78% {
    opacity: 1;
    transform: translate(-50%, -3px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
}
@keyframes spark-star {
  35% {
    transform: scale(1.14) rotate(17deg);
  }
  70% {
    transform: scale(0.97) rotate(-8deg);
  }
}
@keyframes spark-cloud {
  40% {
    transform: translateY(-10px) scale(1.07);
  }
  75% {
    transform: translateY(-5px);
  }
}
@keyframes spark-moth {
  25%,
  65% {
    transform: rotate(-10deg) scaleX(0.82);
  }
  45%,
  85% {
    transform: rotate(10deg) scaleX(1.12);
  }
}
@keyframes spark-fox {
  35% {
    transform: translate(9px, -7px) rotate(9deg);
  }
  70% {
    transform: translate(-4px, 0) rotate(-5deg);
  }
}
@keyframes spark-octopus {
  25% {
    transform: skewX(-8deg) rotate(-5deg);
  }
  50% {
    transform: skewX(8deg) rotate(5deg);
  }
  75% {
    transform: skewX(-4deg);
  }
}
@keyframes spark-robot {
  28% {
    transform: translateY(-7px) rotate(-6deg);
  }
  58% {
    transform: translateY(0) rotate(6deg);
  }
  80% {
    transform: translateY(-3px);
  }
}
@keyframes spark-flower {
  45% {
    transform: rotate(35deg) scale(1.05);
  }
  75% {
    transform: rotate(-12deg);
  }
}
@keyframes spark-penguin {
  25% {
    transform: rotate(-12deg) translateX(-4px);
  }
  50% {
    transform: rotate(12deg) translateX(4px);
  }
  75% {
    transform: rotate(-7deg);
  }
}
@keyframes spark-dragon {
  42% {
    transform: translateY(-8px) scale(1.13) rotate(-6deg);
  }
  68% {
    transform: scale(0.96) rotate(5deg);
  }
}
@keyframes spark-whale {
  40% {
    transform: translateY(-9px) rotate(-9deg);
  }
  72% {
    transform: translateY(2px) rotate(5deg);
  }
}
@keyframes spark-bunny {
  28% {
    transform: translateY(-15px) scale(0.95, 1.08);
  }
  55% {
    transform: translateY(1px) scale(1.06, 0.94);
  }
  78% {
    transform: translateY(-6px);
  }
}
@keyframes spark-dinosaur {
  30% {
    transform: translate(-3px, -4px) rotate(-5deg);
  }
  55% {
    transform: translate(4px, 2px) rotate(5deg) scaleY(0.94);
  }
  75% {
    transform: translateY(-3px);
  }
}
@keyframes spark-bee {
  18%,
  52%,
  82% {
    transform: translate(6px, -5px) rotate(6deg);
  }
  35%,
  70% {
    transform: translate(-6px, -9px) rotate(-6deg);
  }
}
@keyframes spark-turtle {
  38% {
    transform: translateX(-5px) scaleX(0.85);
  }
  72% {
    transform: translateX(3px) scaleX(1.04);
  }
}
@keyframes spark-unicorn {
  42% {
    transform: rotate(-14deg) translateY(-9px) scale(1.08);
  }
  72% {
    transform: rotate(8deg) translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spark-reacting .teaching-avatar img,
  .spark-reacting::after {
    animation: none;
  }
}

/* Student characters and private conversations share the same clear identity. */
.teaching-mode .teaching-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: visible;
  border: 2px solid #e0d2bd;
  box-shadow: 0 2px 5px #453f5220;
}
.teaching-mode .teaching-avatar svg { max-width: 100%; max-height: 100%; }
.teaching-mode .teaching-student-big-avatar .teaching-avatar,
.teaching-mode .teaching-student-big-avatar .teaching-avatar svg { width: 100%; height: 100%; background: transparent; border: 0; box-shadow: none; }
.teaching-mode .teaching-student-friend-grid .teaching-avatar { width: 78px; height: 78px; background: transparent; }
.teaching-mode .teaching-character-options .teaching-avatar { width: 70px; height: 70px; background: transparent; }
.teaching-mode .teaching-showcase-child .teaching-avatar { width: 76px; height: 76px; }
.teaching-character-options small,
.teaching-student-friend-grid small {
  display: block;
  color: #624f79;
  font-weight: 700;
  font-size: 11px;
}
.teaching-chat-shell {
  display: grid;
  grid-template-columns: minmax(300px, 355px) minmax(0, 1fr);
  min-height: min(680px, 75vh);
  overflow: hidden;
  border: 2px solid #ded2c9;
  border-radius: 25px;
  background: #fffaf2;
  box-shadow: 0 14px 36px #54466a18;
}
.teaching-chat-inbox {
  min-width: 0;
  border-right: 2px solid #e9ddd4;
  background: #fff8ed;
}
.teaching-chat-inbox-head { padding: 20px 19px 13px; }
.teaching-chat-inbox-head h2 { margin: 2px 0 4px; color: #4b3c70; }
.teaching-chat-inbox-head p { margin: 0 0 14px; color: #695e72; }
.teaching-chat-search { display: block; color: #5a4d70; font-weight: 700; font-size: 12px; }
.teaching-chat-search input { display: block; width: 100%; margin-top: 5px; border-radius: 13px; }
.teaching-chat-audience { display: flex; gap: 7px; margin: 0 12px 12px; padding: 5px; border-radius: 15px; background: #ede3f1; }
.teaching-chat-audience button { flex: 1; min-width: 0; padding: 9px 6px; border: 0; border-radius: 11px; background: transparent; color: #5b4b70; font-weight: 800; cursor: pointer; }
.teaching-chat-audience button.is-active { background: #fff; box-shadow: 0 2px 7px #54466a20; color: #50377b; }
.teaching-chat-audience span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #f0e4f7; font-size: 11px; }
.teaching-chat-new { margin: 0 12px 12px; padding: 11px 14px; border: 2px solid #c8a8d5; border-radius: 15px; background: #f6edf9; }
.teaching-chat-new summary { color: #554077; font-weight: 800; cursor: pointer; }
.teaching-chat-new form { display: grid; gap: 10px; padding-top: 14px; }
.teaching-chat-new label { display: grid; gap: 4px; color: #4e4267; font-weight: 700; font-size: 13px; }
.teaching-chat-account-note { margin: 0; padding: 9px 11px; border-radius: 11px; background: #fffafc; color: #5d4d70; font-size: 13px; }
.teaching-chat-new select { width: 100%; }
.teaching-chat-child-choice:not(:empty) { display: flex; align-items: center; gap: 9px; color: #514067; font-size: 13px; }
.teaching-chat-child-choice .teaching-avatar { width: 45px; height: 45px; border-radius: 14px; background: #fff; }
.teaching-chat-recipient { display: flex; gap: 16px; border: 0; padding: 0; margin: 0; }
.teaching-chat-recipient legend { font-weight: 700; color: #4e4267; }
.teaching-chat-recipient label { display: flex; align-items: center; gap: 5px; }
.teaching-chat-threads { max-height: 565px; overflow-y: auto; }
.teaching-chat-thread {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 0; border-top: 1px solid #ece4dc; background: transparent;
  text-align: left; cursor: pointer; color: #443957;
}
.teaching-chat-thread:hover,
.teaching-chat-thread.is-active { background: #f1eaf6; }
.teaching-chat-thread .teaching-avatar,
.teaching-chat-header .teaching-avatar { width: 52px; height: 52px; border-radius: 17px; background: #fff; }
.teaching-chat-thread-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.teaching-chat-thread-copy strong { font-size: 15px; }
.teaching-chat-thread-copy small { color: #695477; font-size: 12px; }
.teaching-chat-thread-copy > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #716c75; font-size: 12px; }
.teaching-chat-thread-meta { display: grid; align-self: stretch; justify-items: end; align-content: space-between; gap: 5px; }
.teaching-chat-thread-meta time { white-space: nowrap; color: #817589; font-size: 10px; }
.teaching-chat-thread-meta b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: #6a4f9a; color: white; font-size: 11px; }
.teaching-chat-empty-inbox { padding: 18px; color: #675a76; }
.teaching-chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f7f2eb; }
.teaching-chat-welcome { display: grid; place-content: center; justify-items: center; gap: 5px; flex: 1; text-align: center; color: #685b75; }
.teaching-chat-welcome .teaching-island-mascot { width: 125px; height: 125px; }
.teaching-chat-welcome h3 { margin: 0; color: #4f426d; }
.teaching-chat-welcome p { margin: 0; }
.teaching-chat-header { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 2px solid #e6d9ce; background: #fffaf4; }
.teaching-chat-header > div { display: grid; min-width: 0; }
.teaching-chat-header strong { color: #44345e; }
.teaching-chat-header small { color: #6c6076; }
.teaching-chat-back { display: none; border: 0; background: transparent; font-size: 24px; color: #4d3d72; cursor: pointer; }
.teaching-chat-messages { display: flex; flex: 1; flex-direction: column; gap: 11px; min-height: 290px; max-height: 510px; overflow-y: auto; padding: 19px; }
.teaching-chat-bubble { align-self: flex-start; max-width: min(78%, 560px); padding: 10px 14px; border: 1px solid #e2d5e1; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 2px 5px #463d5b12; overflow-wrap: anywhere; }
.teaching-chat-bubble.is-mine { align-self: flex-end; border-color: #cfdac6; border-radius: 16px 16px 4px 16px; background: #eaf4e3; }
.teaching-chat-bubble strong { color: #60467e; font-size: 11px; }
.teaching-chat-bubble p { margin: 5px 0; line-height: 1.5; }
.teaching-chat-attachment { display: flex; align-items: center; gap: 9px; max-width: 100%; padding: 10px; border: 1px solid #d5c4e1; border-radius: 12px; background: #f8f3fd; color: #4c3b6e; text-decoration: none; }
.teaching-chat-attachment:hover { background: #eee2fa; }
.teaching-chat-attachment > span:last-child { display: grid; min-width: 0; }
.teaching-chat-attachment b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.teaching-chat-attachment small { color: #766888; font-size: 11px; }
.teaching-chat-bubble time { display: block; text-align: right; color: #756d7a; font-size: 10px; }
.teaching-chat-empty { margin: auto; color: #695f74; text-align: center; }
.teaching-chat-compose { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 2px solid #e6d9ce; background: #fffaf4; }
.teaching-chat-compose-main { display: grid; flex: 1; min-width: 0; gap: 6px; }
.teaching-chat-compose textarea { width: 100%; min-width: 0; resize: vertical; border-radius: 15px; }
.teaching-chat-compose button { white-space: nowrap; }
.teaching-chat-attach-button { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 2px solid #c9b5d5; border-radius: 13px; background: #f5e9fb; font-size: 21px; cursor: pointer; }
.teaching-chat-attach-button:hover { background: #e9d8f5; }
.teaching-chat-attach-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.teaching-chat-file-choice:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; padding: 6px 9px; border-radius: 10px; background: #eee4f4; color: #584471; font-size: 12px; }
.teaching-chat-file-choice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teaching-chat-file-choice button { border: 0; background: transparent; color: #604579; font-size: 20px; cursor: pointer; }
.teaching-chat-file-hint { margin: 0; padding: 0 14px 9px; background: #fffaf4; color: #766a7d; font-size: 11px; }
.teaching-google-compose { margin: 0 0 20px; padding: 15px; border: 2px solid #bcb0e9; border-radius: 18px; background: #f6f2ff; }
.teaching-google-connection .hero-row > div { min-width: 0; }
.teaching-google-connection h3 { overflow-wrap: anywhere; }
.teaching-google-compose summary { color: #4d3983; font-weight: 800; cursor: pointer; }
.teaching-google-compose p { color: #665b78; font-size: 13px; }
.teaching-google-compose form, .teaching-google-edit { display: grid; gap: 10px; }
.teaching-google-compose label, .teaching-google-edit label { display: grid; gap: 5px; color: #4e4267; font-weight: 700; font-size: 13px; }
.teaching-google-compose input, .teaching-google-compose select, .teaching-google-compose textarea,
.teaching-google-edit input, .teaching-google-edit textarea { width: 100%; border-radius: 10px; }
.teaching-google-compose button, .teaching-google-edit button { justify-self: start; }
.teaching-google-recipients { display: grid; gap: 8px; margin: 2px 0; padding: 10px 12px; border: 1px solid #d4c8ee; border-radius: 12px; }
.teaching-google-recipients legend { color: #4e4267; font-weight: 800; font-size: 13px; }
.teaching-google-recipients label, #googlePostStudentChoices label { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.teaching-google-recipients input[type="radio"], .teaching-google-recipients input[type="checkbox"] { width: auto; }
#googlePostStudentChoices:not([hidden]) { display: grid; gap: 6px; max-height: 210px; overflow: auto; padding: 10px; border-radius: 10px; background: #fff; }
.teaching-google-post { margin-bottom: 11px; }
.teaching-google-post-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.teaching-google-state { padding: 4px 8px; border-radius: 20px; background: #dff0db; color: #326c3f; font-size: 11px; font-weight: 800; }
.teaching-google-state.is-draft { background: #fff0c9; color: #775520; }
.teaching-google-edit { margin: 10px 0; padding: 12px; border-radius: 12px; background: #f6f2ff; }
.teaching-native-page { margin-top: 14px; }
.teaching-ai-entry { display: grid; gap: 16px; max-width: 850px; margin: 0 auto; padding: 8px 4px 12px; }
.teaching-ai-entry > label { display: grid; grid-template-columns: 135px minmax(0,1fr); align-items: center; gap: 12px; color: #405d79; font-weight: 700; }
.teaching-ai-entry select { width: 100%; min-height: 44px; border: 1px solid #d1dfea; border-radius: 9px; background: #fff; color: #193f62; }
.teaching-ai-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #dbe4ee; }
.teaching-ai-entry-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
.teaching-ai-entry-heading h2 { margin: 10px 0 16px; color: #193f62; font-size: 23px; font-weight: 700; }
.teaching-ai-entry-heading button { border: 0; background: transparent; color: #26669f; font: inherit; cursor: pointer; }
.teaching-ai-upload-trigger { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 58px; padding: 12px 16px; border: 1px dashed #a8c7e5; border-radius: 11px; background: #f8fbff; color: #2e628f; font: inherit; text-align: left; cursor: pointer; }
.teaching-ai-upload-trigger span:last-child { margin-left: auto; font-size: 22px; }
.teaching-ai-upload-trigger:hover { border-color: #3d84c4; background: #edf6ff; }
.teaching-ai-entry > small { color: #5d7286; text-align: center; }
.teaching-ai-entry .teaching-plan-create { width: 100%; margin: 0; }
.teaching-ai-entry .teaching-plan-create form { margin-top: 0; }
.teaching-ai-upload-trigger:disabled { cursor: not-allowed; opacity: .6; }
.teaching-ai-upload-form { padding: 18px; border: 1px solid #c8dced; border-radius: 14px; background: #f7fbff; }
.teaching-ai-upload-form h3 { margin: 0 0 5px; color: #183f67; }
.teaching-ai-upload-form p { margin: 5px 0 14px; color: #526b83; }
.teaching-ai-assessment-mode { display: grid; gap: 6px; color: #315b7e; font-weight: 700; }
.teaching-ai-assessment-mode select { min-height: 40px; border: 1px solid #c7d9e8; border-radius: 8px; padding: 7px; background: #fff; color: #193f62; }
.teaching-ai-upload-form form { display: grid; gap: 13px; }
.teaching-ai-upload-form .teaching-ai-file-label { display: grid; gap: 6px; padding: 12px; border: 1px dashed #a9c7e3; border-radius: 10px; background: #fff; color: #234e76; font-weight: 700; }
.teaching-ai-upload-form .teaching-ai-file-label[hidden] { display: none; }
.teaching-ai-upload-form .teaching-ai-file-label input { width: 100%; }
.teaching-ai-upload-form .teaching-ai-file-label.is-dragging { border-color: #1c6fb2; background: #e8f3fd; }
.teaching-ai-upload-scope { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 12px 14px; border: 1px solid #d7e4ef; border-radius: 10px; background: #fff; }
.teaching-ai-upload-scope legend,.teaching-ai-batch-learners legend { color: #1e537f; font-weight: 700; }
.teaching-ai-upload-scope label { display: inline-flex; align-items: center; gap: 7px; color: #254b70; }
.teaching-ai-upload-scope input[type="radio"],.teaching-ai-batch-choice input[type="checkbox"],.teaching-ai-batch-confirm input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.teaching-ai-batch-learners { min-width: 0; padding: 13px; border: 1px solid #cbdfee; border-radius: 10px; background: #fff; }
.teaching-ai-batch-learners[hidden] { display: none; }
.teaching-ai-batch-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.teaching-ai-batch-actions span { color: #526b83; font-size: 13px; }
.teaching-ai-batch-choices { display: flex; flex-wrap: wrap; gap: 7px; max-height: 130px; overflow: auto; margin-bottom: 14px; }
.teaching-ai-batch-choice { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #d8e7f3; border-radius: 8px; color: #254b70; background: #f7fbff; font-weight: 700; }
.teaching-ai-batch-mapping { display: grid; gap: 8px; margin: 13px 0; }
.teaching-ai-batch-match { display: grid; grid-template-columns: minmax(140px,1.3fr) minmax(170px,1fr) minmax(110px,.65fr); gap: 10px; align-items: end; padding: 10px; border: 1px solid #d8e7f3; border-radius: 9px; background: #f7fbff; }
.teaching-ai-batch-match strong,.teaching-ai-batch-match small { display: block; overflow-wrap: anywhere; }
.teaching-ai-batch-match small { margin-top: 4px; color: #526b83; }
.teaching-ai-batch-match label { display: grid; gap: 4px; color: #315b7e; font-size: 12px; font-weight: 700; }
.teaching-ai-batch-match select,.teaching-ai-batch-match input { width: 100%; min-height: 37px; padding: 6px; border: 1px solid #c7d8e7; border-radius: 7px; background: #fff; color: #193f62; }
.teaching-ai-batch-confirm { display: inline-flex; align-items: center; gap: 8px; color: #254b70; font-weight: 700; }
@media (max-width: 620px) { .teaching-ai-batch-match { grid-template-columns: 1fr; } }
.teaching-ai-selected-files { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.teaching-ai-selected-files:empty { display: none; }
.teaching-ai-selected-files li { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 11px; border: 1px solid #d9e7f2; border-radius: 8px; background: #fff; color: #315a7a; }
.teaching-ai-selected-files li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.teaching-ai-selected-files label { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.teaching-ai-selected-files input { width: 135px; border: 1px solid #c7d8e7; border-radius: 7px; padding: 5px 7px; font: inherit; }
.teaching-ai-selected-files small { color: #788b9c; }
.teaching-ai-selected-files button { border: 0; background: transparent; color: #a63d43; font-size: 22px; cursor: pointer; }
.teaching-ai-upload-form details { padding: 12px; border: 1px solid #d7e4ef; border-radius: 10px; background: #fff; }
.teaching-ai-upload-form details summary { color: #1e537f; font-weight: 700; cursor: pointer; }
.teaching-ai-upload-form .teaching-plan-form-grid { margin-top: 12px; }
.teaching-ai-upload-status { min-height: 1.4em; }
.teaching-ai-advanced { margin: 12px 0; border: 1px solid #d6e4f0; border-radius: 12px; background: #fff; }
.teaching-ai-advanced > summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 17px; color: #1e527e; font-weight: 750; cursor: pointer; }
.teaching-ai-advanced > summary span { color: #6b7f92; font-size: 12px; font-weight: 600; }
.teaching-ai-advanced > .panel { margin: 0; border: 0; box-shadow: none; }
.teaching-ai-question { display: grid; gap: 9px; border: 1px solid #d8e4ef; background: #f8fbff !important; }
.teaching-ai-question-head { display: flex; justify-content: space-between; gap: 10px; }
.teaching-ai-question-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.teaching-ai-question-fields label,.teaching-ai-question > label { display: grid; gap: 4px; color: #405c75; font-size: 12px; font-weight: 700; }
.teaching-ai-question input,.teaching-ai-question textarea { width: 100%; border: 1px solid #c6d8e8; border-radius: 8px; padding: 7px; background: #fff; color: #173c5e; font: inherit; }
.teaching-ai-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.teaching-mode .teaching-ai-entry .teaching-ai-upload-form { border-color: #bad4ea; background: #f6faff; box-shadow: none; }
.teaching-ai-subsection { margin: 12px 0; border: 1px solid #d7e5f1; border-radius: 11px; background: #fff; }
.teaching-ai-subsection > summary { padding: 13px 15px; color: #205782; font-weight: 750; cursor: pointer; }
.teaching-ai-subsection > .teaching-insights,.teaching-ai-subsection > .teaching-ai-evidence { margin: 0 12px 12px; }
.teaching-result-share > summary { display: inline-flex; align-items: center; min-height: 39px; padding: 8px 12px; border: 1px solid #b7d2e9; border-radius: 9px; background: #eaf4fc; color: #15588e; font-weight: 750; }
#teachingAiAnalyze[hidden] { display: none; }
.teaching-pack-slides .teaching-pack-slide[hidden] { display: none !important; }
.teaching-pack-slide-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 16px; color: #315a7d; font-weight: 700; }
.teaching-pack-slide-controls button:disabled { opacity: .45; cursor: not-allowed; }
.teaching-plan-panel .teaching-plan-hero { display: none; }
.teaching-plan-panel .teaching-plan-collection[hidden] { display: none; }
.teaching-plan-workspace .teaching-plan-layout { grid-template-columns: minmax(0,1fr); }
.teaching-plan-workspace .teaching-plan-students { display: none; }
.teaching-mode .teaching-avatar-initials { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid #c8dced; border-radius: 50%; background: #e8f2fc; color: #214f7b; font-size: 12px; font-weight: 800; line-height: 1; }
.teaching-classroom-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #dbe4ee; border-radius: 13px 13px 0 0; background: #fff; }
.teaching-classroom-topline .teaching-classroom-tabs { flex: 1; min-width: 0; border: 0; border-radius: 0; }
.teaching-classroom-tools { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 0 10px; border-left: 1px solid #dbe4ee; }
.teaching-classroom-tools button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 9px; background: transparent; color: #526d89; font: inherit; font-size: 21px; cursor: pointer; }
.teaching-classroom-tools button:hover,.teaching-classroom-tools button:focus-visible,.teaching-classroom-tools button[aria-current="page"] { background: #eaf4fd; color: #185d9d; }
@media (max-width: 520px) { .teaching-classroom-topline { gap: 0; } .teaching-classroom-tools { gap: 0; padding: 0 4px; } .teaching-classroom-tools button { width: 32px; height: 38px; font-size: 17px; } }
.teaching-classroom-stream-side { display: grid; gap: 14px; }
.teaching-native-page [data-native-panel="Stream"] .teaching-classroom-stream { margin-top: 18px; }
.teaching-classroom-meet { display: grid; gap: 10px; padding: 18px; border: 1px solid #dbe4ee; border-radius: 13px; background: #fff; }
.teaching-classroom-meet h3,.teaching-classroom-meet p { margin: 0; }
.teaching-classroom-meet .btn { justify-self: start; }
.teaching-classroom-library > label { display: grid; gap: 6px; max-width: 440px; font-weight: 700; }
.teaching-classroom-library > label input { width: 100%; }
.teaching-library-grid { display: grid; gap: 12px; margin-top: 16px; }
.teaching-library-grid article { padding: 16px; border: 1px solid #dbe4ee; border-radius: 11px; background: #f9fbfe; }
.teaching-library-grid article[hidden] { display: none; }
.teaching-library-grid h4,.teaching-library-grid p { margin: 0 0 8px; }
.teaching-library-grid a { color: #145c9b; font-weight: 700; }
.teaching-native-hero { position: relative; overflow: hidden; padding: 25px 30px; border: 2px solid #dbccef; border-radius: 24px; color: #463463; background: radial-gradient(circle at 90% 20%, #ffdd8c 0 9%, transparent 10%), radial-gradient(circle at 84% 72%, #c5e9d5 0 8%, transparent 9%), linear-gradient(125deg,#fff6dc,#f6e7ff 58%,#e5f3fc); }
.teaching-native-hero::after { content: "✦"; position: absolute; right: 23%; top: 8px; color: #eaa660; font-size: 65px; opacity: .45; }
.teaching-native-hero h2 { margin: 5px 0; font-size: clamp(25px,3vw,38px); }
.teaching-native-hero p { margin: 0; max-width: 650px; }
.teaching-native-layout { display: grid; grid-template-columns: minmax(270px,370px) minmax(0,1fr); align-items: start; gap: 17px; margin-top: 18px; }
.teaching-native-compose { background: #fffaf0; border: 2px solid #f0dcae; }
.teaching-native-compose form,.teaching-native-answer-form,.teaching-native-responses form { display: grid; gap: 11px; }
.teaching-native-compose label,.teaching-native-answer-form label,.teaching-native-responses label { display: grid; gap: 5px; font-weight: 700; color: #574873; font-size: 13px; }
.teaching-native-compose input,.teaching-native-compose select,.teaching-native-compose textarea,.teaching-native-answer-form textarea,.teaching-native-responses input,.teaching-native-responses textarea { width: 100%; border-radius: 11px; }
.teaching-native-compose .btn,.teaching-native-answer-form .btn { justify-self: start; }
.teaching-native-assignment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.teaching-native-assignment-fields[hidden],#nativeLearnerChoices[hidden] { display: none; }
.teaching-native-audience { display: grid; gap: 7px; padding: 12px; border: 1px solid #decbee; border-radius: 14px; }
.teaching-native-audience legend { font-weight: 800; color: #594174; }
.teaching-native-audience > label,#nativeLearnerChoices label { display: flex; align-items: center; gap: 8px; }
.teaching-native-audience input[type="radio"],#nativeLearnerChoices input { width: auto; }
#nativeLearnerChoices { display: grid; gap: 5px; max-height: 240px; overflow: auto; padding: 8px; border-radius: 11px; background: white; }
#nativeLearnerChoices .teaching-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.teaching-native-list { min-width: 0; background: #fdfbff; }
.teaching-native-card { display: grid; gap: 8px; min-width: 0; margin: 12px 0; padding: 17px; border: 2px solid #e2d5ef; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px #6a538b0d; overflow-wrap: anywhere; }
.teaching-native-card-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.teaching-native-kind { color: #7b5699; font-weight: 800; font-size: 12px; }
.teaching-native-status { padding: 4px 9px; border-radius: 20px; background: #e3f2e0; color: #396d45; font-size: 11px; font-weight: 800; }
.teaching-native-status.is-draft { background: #fff1d0; color: #855f2d; }
.teaching-native-card h4 { margin: 0; color: #4c376c; font-size: 18px; }
.teaching-native-card p { margin: 0; white-space: normal; line-height: 1.5; }
.teaching-native-card small { color: #6b6375; }
.teaching-native-card a { color: #5951a0; font-weight: 700; }
.teaching-native-answer,.teaching-native-feedback { padding: 10px 12px; border-radius: 12px; background: #f1eafa; }
.teaching-native-feedback { background: #e9f7e8; color: #356346; }
.teaching-native-responses { margin-top: 13px; padding: 12px; border-radius: 13px; background: #f5f0fc; }
.teaching-native-responses > article { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid #e0d4ed; }
.teaching-native-responses > article > div { flex: 1; min-width: 0; }
.teaching-native-responses .teaching-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.teaching-native-student-work { background: #fff8e7; }
.teaching-native-student-work .teaching-native-card { border-color: #e8cfac; }
.teaching-native-google { margin-top: 15px; padding: 12px; border-radius: 12px; background: #f5f4fb; }
.teaching-native-google summary { font-weight: 800; cursor: pointer; }
.teaching-native-topic { display: inline-flex; justify-self: start; padding: 4px 10px; border-radius: 20px; background: #efe6fa; color: #624785; font-size: 11px; font-weight: 800; }
.teaching-native-search { display: grid; gap: 5px; margin: 5px 0 14px; color: #604a7a; font-size: 12px; font-weight: 800; }
.teaching-native-search input { width: 100%; border-radius: 11px; }
.teaching-native-card[hidden] { display: none; }
.teaching-native-edit { margin: 8px 0; padding: 12px; border: 1px solid #d8c6ed; border-radius: 13px; background: #f8f3ff; }
.teaching-native-edit summary { color: #5c4080; font-size: 13px; font-weight: 800; cursor: pointer; }
.teaching-native-edit form,.teaching-native-resource-form,.teaching-native-file-form { display: grid; gap: 9px; margin-top: 12px; }
.teaching-native-edit label,.teaching-native-resource-form label,.teaching-native-file-form label { display: grid; gap: 5px; color: #584575; font-size: 13px; font-weight: 700; }
.teaching-native-edit input,.teaching-native-edit select,.teaching-native-edit textarea,.teaching-native-resource-form input,.teaching-native-file-form input { width: 100%; min-width: 0; border-radius: 10px; }
.teaching-native-edit button,.teaching-native-resource-form button,.teaching-native-file-form button { justify-self: start; }
.teaching-native-edit-choices { display: grid; gap: 5px; max-height: 220px; overflow: auto; padding: 8px; border-radius: 10px; background: #fff; }
.teaching-native-edit-choices[hidden] { display: none; }
.teaching-native-edit-choices label { display: flex; align-items: center; gap: 7px; }
.teaching-native-edit-choices input { width: auto; }
.teaching-native-edit-choices .teaching-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.teaching-native-resource-form,.teaching-native-file-form { padding: 12px; border: 1px dashed #d5bee9; border-radius: 12px; background: #fbf8ff; }
.teaching-native-file-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.teaching-native-file { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 8px 11px; border: 1px solid #d4c2e8; border-radius: 10px; background: #f3eafb; color: #563c78; font-size: 12px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.teaching-native-file:hover { background: #e9dbf7; }
.teaching-classroom-banner { position: relative; overflow: hidden; padding: 30px; border-radius: 22px 22px 0 0; color: #fff; background: linear-gradient(120deg,#563a80,#8464aa 64%,#b582b9); }
.teaching-classroom-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.teaching-classroom-toolbar > label:first-child { display: grid; gap: 5px; min-width: min(100%,300px); color: #60477a; font-size: 12px; font-weight: 800; }
.teaching-classroom-toolbar select { width: 100%; border-radius: 10px; }
.teaching-classroom-toolbar .teaching-sound-control { margin: 0; }
.teaching-classroom-banner::after { content: "✦"; position: absolute; right: 6%; top: -58px; font-size: 220px; color: #fff; opacity: .13; pointer-events: none; }
.teaching-classroom-banner .teaching-eyebrow { color: #ffe6a2; }
.teaching-classroom-banner h2 { margin: 7px 0; color: #fff; font-size: clamp(26px,3vw,40px); }
.teaching-classroom-banner p { margin: 0; max-width: 690px; line-height: 1.5; }
.teaching-classroom-banner-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.teaching-classroom-banner-meta span { padding: 6px 10px; border: 1px solid #ffffff65; border-radius: 99px; background: #ffffff24; font-size: 12px; font-weight: 700; }
.teaching-classroom-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 12px; border: 1px solid #e6dbec; border-top: 0; border-radius: 0 0 15px 15px; background: #fff; scrollbar-width: thin; }
.teaching-classroom-tabs button { flex: 0 0 auto; padding: 16px 18px 13px; border: 0; border-bottom: 3px solid transparent; color: #625b70; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.teaching-classroom-tabs button:hover { background: #f6f0fb; color: #533276; }
.teaching-classroom-tabs button[aria-current="page"] { border-bottom-color: #7751a7; color: #55377b; background: #f9f5fd; }
.teaching-native-page > [data-native-panel] { margin-top: 18px; }
.teaching-native-page > [data-native-panel][hidden], [data-family-post][hidden], #nativeFamilyNoMatches[hidden] { display: none; }
.teaching-classroom-stream { display: grid; grid-template-columns: minmax(180px,240px) minmax(0,1fr); align-items: start; gap: 18px; }
.teaching-classroom-upcoming,.teaching-classroom-feed-card { padding: 18px; border: 1px solid #e5d8eb; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px #46325e0c; }
.teaching-classroom-upcoming h3,.teaching-classroom-feed-card h3 { margin: 0 0 10px; color: #50366d; }
.teaching-classroom-upcoming > div { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid #eee6f3; }
.teaching-classroom-upcoming small,.teaching-classroom-feed-card small { color: #716783; }
.teaching-classroom-feed { display: grid; gap: 15px; min-width: 0; }
.teaching-classroom-feed form { display: grid; gap: 10px; }
.teaching-classroom-feed form label { display: grid; gap: 7px; font-weight: 800; color: #514165; }
.teaching-classroom-feed form textarea { width: 100%; border-radius: 12px; }
.teaching-classroom-feed form button { justify-self: start; }
.teaching-stream-compose { padding: 12px; }
.teaching-stream-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d7e5f2; border-radius: 10px; background: #f7fbff; color: #164c7c; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.teaching-stream-trigger span { font-size: 22px; line-height: 1; }
.teaching-stream-trigger:hover,.teaching-stream-trigger:focus-visible { border-color: #70a8d8; background: #eaf4fd; }
.teaching-stream-compose form { padding: 14px 2px 2px; }
.teaching-stream-compose form[hidden] { display: none; }
.teaching-classroom-feed-card p { margin: 9px 0 12px; overflow-wrap: anywhere; line-height: 1.55; }
.teaching-classroom-people { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.teaching-classroom-people h3 { margin-top: 0; }
.teaching-classroom-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-top: 1px solid #eee7f2; }
.teaching-classroom-person strong { min-width: 0; overflow-wrap: anywhere; }
.teaching-classroom-person small { margin-left: auto; color: #786d82; }
.teaching-classroom-person .teaching-avatar,.teaching-classroom-person-icon { width: 38px; height: 38px; flex: 0 0 38px; }
.teaching-classroom-person-icon { display: grid; place-items: center; border-radius: 50%; color: #5e3a81; background: #eee2f7; }
.teaching-classroom-gradebook .table-wrap { overflow-x: auto; }
.teaching-classroom-gradebook table { min-width: 520px; }
.teaching-classroom-gradebook th { min-width: 130px; }
.teaching-classroom-gradebook th small { display: block; color: #776c82; }
.teaching-classroom-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 16px 0; }
.teaching-classroom-metrics > div { display: grid; gap: 4px; padding: 15px; border-radius: 14px; color: #54346f; background: #f3ebfb; }
.teaching-classroom-metrics strong { font-size: 27px; }
.teaching-classroom-progress article { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid #e8e0ed; }
.teaching-classroom-progress article span { color: #686073; }
.teaching-classroom-calendar-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.teaching-classroom-calendar-head h3 { margin: 0; }
.teaching-classroom-calendar-head > div { display: flex; gap: 6px; }
.teaching-classroom-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; margin: 16px 0 24px; }
.teaching-classroom-calendar-grid > * { min-width: 0; }
.teaching-classroom-calendar-grid > strong { padding: 8px 2px; text-align: center; color: #644780; font-size: 12px; }
.teaching-classroom-calendar-grid > div { min-height: 76px; padding: 6px; border: 1px solid #e8dfef; border-radius: 8px; background: #fff; }
.teaching-classroom-calendar-grid b { color: #5e4775; }
.teaching-classroom-calendar-grid span { display: block; margin-top: 5px; padding: 4px; border-radius: 5px; background: #ede2f7; color: #543872; font-size: 11px; overflow-wrap: anywhere; }
.teaching-classroom-settings form { display: grid; gap: 14px; max-width: 580px; }
.teaching-classroom-settings label { display: grid; gap: 6px; color: #514266; font-weight: 800; }
.teaching-classroom-settings input,.teaching-classroom-settings textarea,.teaching-classroom-settings select { width: 100%; border-radius: 10px; }
.teaching-classroom-settings .teaching-classroom-check { display: flex; align-items: center; gap: 8px; }
.teaching-classroom-settings .teaching-classroom-check input { width: auto; }
.teaching-classroom-settings button { justify-self: start; }
.teaching-classroom-child-picker { display: inline-grid; gap: 5px; margin-bottom: 12px; color: #594172; font-weight: 800; }
.teaching-classroom-child-picker select { min-width: 220px; border-radius: 10px; }
.teaching-classroom-filters { display: grid; grid-template-columns: minmax(180px,2fr) repeat(2,minmax(130px,1fr)); gap: 10px; }
.teaching-classroom-filters label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; }
.teaching-classroom-filters input,.teaching-classroom-filters select { width: 100%; border-radius: 10px; }
.teaching-teacher-filters { grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); margin: 5px 0 14px; }
.teaching-teacher-filters label:first-child { grid-column: 1 / -1; }
.teaching-classwork-no-matches { margin: 16px 0; color: #526b82; }
.teaching-classroom-work { min-width: 0; }
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-layout { grid-template-columns: 1fr; }
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose { max-width: 100%; }
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; }
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form > fieldset,
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form > label:has(textarea),
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form > button { grid-column: 1 / -1; }
.teaching-classroom-topic { margin-top: 22px; border-top: 2px solid #e6d8ef; }
.teaching-classroom-topic h4 { margin: 15px 0 6px; color: #664288; font-size: 20px; }
.teaching-classroom-topic[hidden] { display: none; }
.teaching-classroom-topic .teaching-native-card { margin: 10px 0; }
@media (max-width: 850px) { .teaching-native-layout { grid-template-columns: 1fr; } .teaching-native-hero { padding: 20px; } }
@media (max-width: 760px) { .teaching-classroom-stream,.teaching-classroom-people { grid-template-columns: 1fr; } .teaching-classroom-filters { grid-template-columns: 1fr 1fr; } .teaching-classroom-filters label:first-child { grid-column: 1 / -1; } .teaching-classroom-banner { padding: 23px; } }
@media (max-width: 600px) { .teaching-ai-entry > label { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form { grid-template-columns: 1fr; } .teaching-classroom-metrics { grid-template-columns: repeat(2,1fr); } .teaching-classroom-calendar-grid > div { min-height: 53px; padding: 3px; } .teaching-classroom-calendar-grid span { font-size: 9px; } .teaching-classroom-tabs button { padding: 13px 14px; } }

.teaching-native-quiz-fields,.teaching-native-quiz-question,.teaching-native-quiz fieldset { border: 2px solid #e9d7f3; border-radius: 16px; padding: 14px; background: #fffdf9; min-width: 0; }
.teaching-native-quiz-fields[hidden] { display: none; }
.teaching-native-quiz-fields { display: grid; gap: 12px; }
.teaching-native-quiz-fields legend,.teaching-native-quiz legend { color: #5b397f; font-weight: 800; padding: 0 5px; }
.teaching-native-quiz-question { display: grid; gap: 10px; background: #fff; }
.teaching-native-quiz-question-head { display: flex; justify-content: space-between; align-items: center; }
.teaching-native-quiz-question-head button,.teaching-class-comment button { border: 0; background: transparent; color: #79549d; cursor: pointer; font-weight: 700; }
.teaching-native-quiz-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.teaching-native-quiz { display: grid; gap: 12px; }
.teaching-native-quiz h5 { margin: 5px 0; font-size: 16px; color: #5b397f; }
.teaching-native-quiz fieldset { display: grid; gap: 8px; }
.teaching-native-quiz label { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #e4d7ee; border-radius: 11px; background: #fff; cursor: pointer; }
.teaching-native-quiz input { accent-color: #754aa2; }
.teaching-class-comments { margin-top: 12px; border-top: 1px solid #e9dff0; padding-top: 10px; }
.teaching-class-comments summary { color: #654089; font-weight: 800; cursor: pointer; }
.teaching-class-comments form { display: grid; gap: 8px; margin-top: 10px; }
.teaching-class-comments textarea { width: 100%; border-radius: 10px; }
.teaching-class-comments form .btn { justify-self: start; }
.teaching-class-comment { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #f8f3fc; overflow-wrap: anywhere; }
.teaching-class-comment strong { color: #51336f; }
.teaching-class-comment small { margin-left: 9px; }
.teaching-class-comment p { margin: 5px 0; }
@media (max-width: 600px) { .teaching-native-quiz-options { grid-template-columns: 1fr; } }

.teaching-ai-studio { margin-top: 20px; border: 2px solid #d4c5f2; background: linear-gradient(145deg,#fffaf1,#f6f1ff); }
.teaching-ai-studio > p { max-width: 820px; line-height: 1.55; }
.teaching-ai-suggestion,.teaching-ai-pack-callout { margin-top: 16px; padding: 18px; border: 1px solid #e1d6ed; border-radius: 16px; background: #fff; }
.teaching-ai-evidence { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; margin: 14px 0; }
.teaching-ai-evidence article { padding: 12px; border-radius: 12px; background: #f7f1fc; }
.teaching-ai-evidence article span { margin-left: 8px; color: #67508d; font-weight: 800; }
.teaching-ai-evidence article p { margin: 5px 0 0; }
.teaching-insights { margin: 20px 0; padding: 18px; border: 1px solid #dfd1ef; border-radius: 20px; background: linear-gradient(145deg,#fff,#f7f1ff 72%,#fff8e9); }
.teaching-insights .teaching-section-heading { margin-bottom: 15px; }
.teaching-insights h4,.teaching-insights h5 { margin: 4px 0 10px; color: #4e3474; }
.teaching-insights-top { display: flex; align-items: center; gap: 24px; }
.teaching-insights-ring { width: 124px; height: 124px; flex: 0 0 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at center,#fff 58%,transparent 60%),conic-gradient(#7351ad var(--earned),#e9def2 0); color: #50337c; }
.teaching-insights-ring strong { font-size: 26px; line-height: 1; }
.teaching-insights-ring small { margin-top: 4px; font-weight: 700; }
.teaching-insights-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; flex: 1; }
.teaching-insights-metrics > div { min-width: 0; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #ece3f5; }
.teaching-insights-metrics strong { display: block; color: #55377d; font-size: 19px; }
.teaching-insights-metrics span { color: #70617c; font-size: 12px; }
.teaching-insights-topics { margin-top: 18px; }
.teaching-insights-topic { display: grid; grid-template-columns: minmax(110px,1.2fr) minmax(90px,2fr) 64px; align-items: center; gap: 12px; margin: 9px 0; font-size: 13px; }
.teaching-insights-topic > span { overflow-wrap: anywhere; font-weight: 700; }
.teaching-insights-topic strong { text-align: right; color: #573c7e; }
.teaching-insights-track { height: 11px; overflow: hidden; border-radius: 999px; background: #e9def2; }
.teaching-insights-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#eaa16a,#8760c3); }
.teaching-insights-focus { margin-top: 18px; }
.teaching-insights-focus p { margin: 7px 0; padding: 9px 11px; border-radius: 10px; background: #fff; line-height: 1.45; }
.teaching-insights-note { color: #6e6078; font-size: 13px; line-height: 1.5; }
.teaching-result-share,.teaching-quiz-learner-detail { margin-top: 14px; padding: 12px; border: 1px solid #dcccf0; border-radius: 14px; background: #fff; }
.teaching-result-share summary,.teaching-quiz-learner-detail summary { cursor: pointer; color: #57377d; font-weight: 800; }
.teaching-result-share form { display: grid; gap: 10px; margin-top: 12px; }
.teaching-result-share label { display: grid; gap: 5px; font-weight: 700; color: #574873; font-size: 13px; }
.teaching-result-share select,.teaching-result-share textarea { width: 100%; border: 1px solid #d6c9e5; border-radius: 11px; padding: 10px; background: #fff; color: #382852; }
.teaching-quiz-question-review { display: grid; gap: 8px; margin-top: 10px; }
.teaching-quiz-review-row { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: #fff6ed; border-left: 4px solid #df9963; font-size: 13px; }
.teaching-quiz-review-row.is-correct { background: #effbf2; border-left-color: #6db785; }
.teaching-quiz-review-row span { color: #5e5268; }
.teaching-quiz-insights .teaching-insights-metrics { margin-top: 12px; }
@media (max-width: 760px) { .teaching-insights-top { flex-direction: column; align-items: stretch; } .teaching-insights-ring { align-self: center; } .teaching-insights-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .teaching-insights { padding: 13px; } .teaching-insights-topic { grid-template-columns: minmax(0,1fr) 52px; gap: 5px 9px; } .teaching-insights-topic .teaching-insights-track { grid-column: 1 / -1; grid-row: 2; } }
#teachingAiAccept,.teaching-pack-review form { display: grid; gap: 10px; max-width: 750px; }
#teachingAiAccept label,.teaching-pack-review label { display: grid; gap: 5px; font-weight: 700; }
#teachingAiAccept .btn,.teaching-pack-review .btn { justify-self: start; }
.teaching-pack-page { display: grid; gap: 18px; max-width: 1120px; margin: 0 auto; }
.teaching-pack-page > .btn { justify-self: start; }
.teaching-pack-report > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.teaching-pack-report p { padding: 14px; border-radius: 12px; background: #faf4ff; line-height: 1.55; }
.teaching-pack-slide { min-height: 175px; padding: 20px; margin: 12px 0; border-radius: 18px; color: #42335b; background: linear-gradient(130deg,#fff0bc,#f2ddff); }
.teaching-pack-slide h4 { margin: 9px 0; font-size: 23px; }
.teaching-pack-slide strong { display: block; margin-top: 12px; }
.teaching-pack-section ol { display: grid; gap: 14px; padding-left: 24px; }
.teaching-pack-section li { padding: 12px; border-bottom: 1px solid #e7ddec; }
.teaching-pack-section li small { display: block; margin-top: 5px; }
.teaching-pack-section details { margin-top: 8px; }
.teaching-pack-game { background: #fff9e9; border: 2px solid #f4d780; }
.teaching-pack-game-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.teaching-pack-game-options button.is-correct { background: #daf5da; border-color: #54a86c; color: #23603c; }
#teachingPackGameFeedback { margin-top: 15px; }
.teaching-pack-review textarea { width: 100%; font-family: ui-monospace,monospace; }
.teaching-pack-source { max-width: 850px; margin: 0 auto; display: grid; gap: 12px; }
.teaching-pack-source .btn { justify-self: start; }
@media (max-width: 650px) { .teaching-pack-report > div,.teaching-pack-game-options { grid-template-columns: 1fr; } .teaching-pack-slide { min-height: 0; } }
@media print { #nav,#menuBtn,.teaching-pack-page > .btn,.teaching-pack-page button,.teaching-pack-review,.teaching-pack-game { display: none !important; } .teaching-pack-page { display: block; max-width: none; } .teaching-pack-page .panel { box-shadow: none; break-inside: avoid; } .teaching-pack-slide { break-after: page; } }
@media print { body.teaching-pack-printing .teaching-pack-page > section:not(.teaching-pack-print-target) { display: none !important; } body.teaching-pack-printing .teaching-pack-page .teaching-pack-print-target { display: block !important; } }
@media (max-width: 750px) {
  .teaching-chat-shell { display: block; min-height: 65vh; }
  .teaching-chat-inbox { border-right: 0; }
  .teaching-chat-main { display: none; min-height: 65vh; }
  .teaching-chat-shell.has-thread .teaching-chat-inbox { display: none; }
  .teaching-chat-shell.has-thread .teaching-chat-main { display: flex; }
  .teaching-chat-back { display: block; }
  .teaching-chat-messages { max-height: 59vh; }
  .teaching-chat-bubble { max-width: 88%; }
}

/* V2 teacher workspace: one calm visual system across FS1–Year 9. */
.teaching-mode { background: #f7f9fc; }
.teaching-mode .workspace { background: #f7f9fc; }
.teaching-mode .sidebar { background: #f2f5fa; color: #273548; border-right: 1px solid #dce3ec; }
.teaching-mode .sidebar .nav-btn { color: #394a62; }
.teaching-mode .sidebar .nav-btn:hover,
.teaching-mode .sidebar .nav-btn.active,
.teaching-mode .sidebar .nav-group.open > .nav-group-toggle,
.teaching-mode .sidebar .nav-group.has-active > .nav-group-toggle { background: #dceafa; color: #164e86; }
.teaching-mode .sidebar .nav-submenu { border-color: #ced8e6; }
.teaching-mode .sidebar .sidebar-foot { border-color: #dce3ec; color: #273548; }
.teaching-mode .sidebar .brand-title,
.teaching-mode .sidebar .brand-title small { color: #1c314b; }
.teaching-mode .topbar { background: #fff; border-bottom-color: #dce3ec; }
.teaching-mode .topbar h2,
.teaching-mode #content h3,
.teaching-mode #content h4 { font-family: Arial, Helvetica, sans-serif; letter-spacing: -.02em; }
.teaching-mode .topbar h2 { color: #172f4f; }
.teaching-mode .term-pill { background: #eaf1fa; color: #2b5b91; }
.teaching-mode .content { max-width: 1660px; }
.teaching-mode #content > .panel,
.teaching-mode #content > .teaching-other-classes,
.teaching-mode #content > .hero-row { box-shadow: none; }
.teaching-mode #content > .panel { border: 1px solid #dce3ec; border-radius: 14px; background: #fff; }
.teaching-mode #content .btn { min-height: 38px; border-radius: 9px; box-shadow: none; font-weight: 700; }
.teaching-mode #content .btn.primary { border-color: #1d67b8; background: #1d67b8; box-shadow: none; }
.teaching-mode #content .btn.primary:hover:not(:disabled) { background: #145599; transform: none; }
.teaching-mode #content .btn.secondary { border-color: #cfdaea; background: #f4f8fd; color: #1f568e; }
.teaching-mode #content .btn:focus-visible,
.teaching-mode #content button:focus-visible,
.teaching-mode #content select:focus-visible { outline-color: #5f9de0; }
.teaching-mode .teaching-world-bar { min-height: 70px; margin-bottom: 18px; padding: 13px 18px; border: 1px solid #dce3ec; border-radius: 13px; background: #fff; }
.teaching-mode .teaching-world-bar::after { display: none; }
.teaching-mode .teaching-world-mark { width: 42px; height: 42px; border: 0; border-radius: 10px; background: #e8f1fd; color: #2865a9; box-shadow: none; font-size: 24px; transform: none; }
.teaching-mode .teaching-world-kicker,
.teaching-mode .teaching-eyebrow { color: #5b7594; letter-spacing: .07em; }
.teaching-mode .teaching-world-bar h3 { color: #183655; font-size: 19px; }
.teaching-mode .teaching-world-controls { width: auto; flex-direction: row; align-items: end; gap: 13px; }
.teaching-mode .teaching-world-picker { min-width: min(300px, 55vw); color: #344963; }
.teaching-mode .teaching-world-picker select { border: 1px solid #ced8e4; border-radius: 8px; color: #1b3857; }
.teaching-mode .teaching-sound-control { min-height: 38px; border: 1px solid #d3dfea; border-radius: 8px; color: #2f5d8e; }
.teaching-mode .teaching-class-card,
.teaching-mode .teaching-class-card:nth-child(n) { min-height: 190px; overflow: visible; border: 1px solid #dce3ec; border-radius: 13px; background: #fff; box-shadow: none; }
.teaching-mode .teaching-class-card-head { display: flex; justify-content: space-between; align-items: start; min-height: 36px; }
.teaching-mode .teaching-class-card-icon { position: static; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #e8f1fd; color: #2965aa; font-size: 21px; }
.teaching-mode .teaching-class-card h4 { margin: 7px 0 4px; color: #173a60; font-size: 24px; }
.teaching-mode .teaching-class-card p { color: #576b83; font-weight: 500; }
.teaching-class-menu { position: relative; z-index: 3; }
.teaching-class-menu summary { display: grid; place-items: center; width: 30px; height: 30px; list-style: none; border-radius: 7px; color: #536980; cursor: pointer; font-size: 23px; }
.teaching-class-menu summary::-webkit-details-marker { display: none; }
.teaching-class-menu summary:hover { background: #e8f1fd; }
.teaching-class-menu > div { position: absolute; right: 0; top: 33px; min-width: 180px; padding: 5px; border: 1px solid #d5dfeb; border-radius: 10px; background: #fff; box-shadow: 0 8px 25px #223f5d24; }
.teaching-class-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: #203b5b; text-align: left; cursor: pointer; }
.teaching-class-menu button:hover { background: #e8f1fd; }
.teaching-mode .teaching-attendance-panel > .hero-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 2px 0 16px; border-radius: 0; background: none; }
.teaching-mode .teaching-attendance-panel > .hero-row h3 { color: #172f4f; font-size: 26px; }
.teaching-attendance-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.teaching-attendance-actions label { min-width: 160px; color: #52657b; font-size: 12px; font-weight: 700; }
.teaching-attendance-actions input { display: block; width: 100%; margin-top: 5px; }
.teaching-attendance-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; margin: 0 0 20px; }
.teaching-attendance-total { display: grid; grid-template-columns: 36px 1fr; column-gap: 9px; align-items: center; min-height: 70px; padding: 11px; border: 1px solid #dce3ec; border-radius: 11px; background: #fff; }
.teaching-attendance-total strong { color: #1a3049; font-size: 22px; line-height: 1; }
.teaching-attendance-total small { grid-column: 2; color: #596c82; }
.teaching-attendance-icon { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 19px; }
.teaching-attendance-icon.is-present { background: #e0f4e7; color: #21814a; }
.teaching-attendance-icon.is-absent { background: #fae4e8; color: #a9364c; }
.teaching-attendance-icon.is-late { background: #fff2ce; color: #a67412; }
.teaching-attendance-icon.is-excused { background: #e5efff; color: #2b66a8; }
.teaching-attendance-icon.is-not-marked { background: #eef1f5; color: #6d7886; }
.teaching-mode .teaching-attendance-panel tbody tr:nth-child(odd) { background: #fff; }
.teaching-mode .teaching-attendance-panel tbody td:first-child { color: #243a55; }
.teaching-attendance-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.teaching-attendance-choice { position: relative; cursor: pointer; }
.teaching-attendance-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.teaching-attendance-choice span { display: inline-flex; align-items: center; gap: 5px; min-height: 33px; padding: 5px 9px; border: 1px solid #d2dae3; border-radius: 999px; background: #fff; color: #526376; font-size: 12px; font-weight: 600; }
.teaching-attendance-choice input:focus-visible + span { outline: 2px solid #2874c2; outline-offset: 2px; }
.teaching-attendance-choice.is-present input:checked + span { border-color: #83c69a; background: #e0f4e7; color: #146737; }
.teaching-attendance-choice.is-absent input:checked + span { border-color: #e5a0ac; background: #fae4e8; color: #9d243f; }
.teaching-attendance-choice.is-late input:checked + span { border-color: #e8c678; background: #fff2ce; color: #936008; }
.teaching-attendance-choice.is-excused input:checked + span { border-color: #9dbfe8; background: #e5efff; color: #245e9d; }
.teaching-attendance-readonly { font-weight: 700; color: #38516e; }
.teaching-mode .teaching-chat-shell { border: 1px solid #dce3ec; border-radius: 13px; background: #fff; box-shadow: none; }
.teaching-mode .teaching-chat-inbox,
.teaching-mode .teaching-chat-main { background: #fff; border-color: #dce3ec; }
.teaching-mode .teaching-chat-audience { background: #edf3fb; }
.teaching-mode .teaching-chat-audience button.is-active { color: #1b5d9d; }
.teaching-mode .teaching-chat-thread:hover,
.teaching-mode .teaching-chat-thread.is-active { background: #eaf2fc; }
.teaching-mode .teaching-chat-welcome .teaching-island-mascot { width: 72px; height: 72px; opacity: .7; filter: none; transform: none; }
.teaching-mode .teaching-chat-header,
.teaching-mode .teaching-chat-compose { border-color: #dce3ec; background: #fff; }
@media (max-width: 950px) { .teaching-attendance-summary { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 650px) {
  .teaching-mode .teaching-world-controls { width: 100%; flex-wrap: wrap; }
  .teaching-mode .teaching-world-picker { min-width: min(100%, 320px); }
  .teaching-attendance-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .teaching-mode .teaching-attendance-panel > .hero-row { align-items: stretch; flex-direction: column; }
  .teaching-attendance-actions { align-items: stretch; }
}

/* V2 workspace: clear school styling from FS1 through Year 9. */
.teaching-mode .sidebar .nav-group { min-height: 0; }
.teaching-mode .sidebar .nav-group-toggle,
.teaching-mode .sidebar .nav-btn { color: #34506e; }
.teaching-mode .sidebar .nav-btn.active { background: #e7f0fa; color: #154d86; }
.teaching-mode .sidebar .sidebar-foot { color: #47617e; }
.teaching-mode .teaching-behavior-hero,
.teaching-mode .teaching-plan-hero,
.teaching-mode .teaching-classroom-banner,
.teaching-mode .teaching-pack-page .teaching-classroom-banner,
.teaching-mode .teaching-student-hero { border: 1px solid #dbe4ef; border-radius: 14px; background: linear-gradient(120deg,#f7faff,#eef4fb); box-shadow: none; }
.teaching-mode .teaching-behavior-hero { min-height: 160px; padding: 24px 28px; }
.teaching-mode .teaching-behavior-hero h3,
.teaching-mode .teaching-plan-hero h3,
.teaching-mode .teaching-classroom-banner h2,
.teaching-mode .teaching-student-hero h2 { color: #183756; font-size: clamp(24px,2.5vw,34px); }
.teaching-mode .teaching-behavior-hero p,
.teaching-mode .teaching-plan-hero p,
.teaching-mode .teaching-classroom-banner p,
.teaching-mode .teaching-student-hero p { color: #4d647c; }
.teaching-mode .teaching-behavior-hero .teaching-eyebrow { color: #35689d; }
.teaching-mode .teaching-behavior-hero .teaching-island-mascot { width: 95px; opacity: .82; }
.teaching-mode .teaching-hero-actions > span { color: #48627e; }
.teaching-mode #content .teaching-display-button { border: 1px solid #c8daef; background: #e7f1fc; color: #1e578c; box-shadow: none; }
.teaching-mode .teaching-roster,
.teaching-mode .teaching-composer { background: #fff; }
.teaching-behavior-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 16px 0 20px; }
.teaching-behavior-stats > div { display: grid; gap: 3px; min-height: 76px; padding: 13px 16px; border: 1px solid #dbe4ee; border-radius: 11px; background: #fff; }
.teaching-behavior-stats strong { color: #173a5c; font-size: 24px; line-height: 1.1; }
.teaching-behavior-stats span { color: #61758b; font-size: 12px; }
.teaching-behavior-stats .is-positive strong { color: #247849; }
.teaching-behavior-stats .is-negative strong { color: #a23d49; }
.teaching-behavior-score-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.teaching-behavior-score-pair strong { padding: 3px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.teaching-behavior-score-pair .is-positive { background: #e8f6eb; color: #25784a; }
.teaching-behavior-score-pair .is-negative { background: #fbe9eb; color: #a23d49; }
.teaching-behavior-applies { margin: 0 0 12px; color: #516a83; font-size: 13px; }
.teaching-behavior-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; margin-bottom: 13px; padding: 4px; border: 1px solid #d9e3ed; border-radius: 10px; background: #eef2f7; }
.teaching-behavior-tabs button { min-height: 39px; border: 0; border-radius: 7px; background: transparent; color: #496177; font: inherit; font-weight: 700; cursor: pointer; }
.teaching-behavior-tabs button[aria-selected="true"] { background: #fff; color: #195b98; box-shadow: 0 2px 7px #143f6420; }
.teaching-skill-grid[hidden] { display: none; }
.teaching-mode .teaching-skill.is-positive { border-color: #b8dfc8; background: #f0f9f2; color: #205b37; box-shadow: none; }
.teaching-mode .teaching-skill.is-negative { border-color: #edc5ca; background: #fff1f2; color: #8b2c3c; box-shadow: none; }
.teaching-mode .teaching-skill.is-positive:hover,.teaching-mode .teaching-skill.is-positive.is-active { border-color: #51a875; background: #e3f4e9; }
.teaching-mode .teaching-skill.is-negative:hover,.teaching-mode .teaching-skill.is-negative.is-active { border-color: #d36b77; background: #fce8eb; }
.teaching-mode .teaching-skill.is-positive .teaching-skill-icon { background: #d5efd9; color: #297146; }
.teaching-mode .teaching-skill.is-negative .teaching-skill-icon { background: #f8dfe2; color: #a43b4b; }
.teaching-student-wrap.spark-reacting[data-behavior-expression="positive"]::after { border-color: #95cbaa; background: #e7f7eb; color: #1d7143; }
.teaching-student-wrap.spark-reacting[data-behavior-expression="negative"]::after { border-color: #e7afb6; background: #fff0f1; color: #913745; }
.teaching-student-wrap.spark-reacting[data-behavior-expression="positive"] .teaching-avatar img { animation: spark-star 900ms ease-in-out both; }
.teaching-student-wrap.spark-reacting[data-behavior-expression="negative"] .teaching-avatar img { animation: spark-cloud 900ms ease-in-out both; }
.teaching-student-wrap.spark-reacting[data-behavior-expression="positive"] .teaching-student { border-color: #58a97c; background: #eef9f0; }
.teaching-student-wrap.spark-reacting[data-behavior-expression="negative"] .teaching-student { border-color: #d98993; background: #fff1f2; }
@media (max-width: 800px) { .teaching-behavior-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.teaching-mode .teaching-student,
.teaching-mode label.teaching-student:hover { border: 1px solid #d8e2ed; border-radius: 11px; box-shadow: none; }
.teaching-mode .teaching-student:has(input:checked) { border: 2px solid #4383c4; background: #edf5fe; box-shadow: none; }
.teaching-mode .teaching-plan-panel,
.teaching-mode .teaching-plan-workspace,
.teaching-mode .teaching-documents,
.teaching-mode .teaching-ai-studio,
.teaching-mode .teaching-native-page .panel,
.teaching-mode .teaching-pack-page .panel { border: 1px solid #dbe4ee; border-radius: 13px; background: #fff; box-shadow: none; }
.teaching-mode .teaching-plan-hero { padding: 22px 24px; }
.teaching-mode .teaching-plan-hero h3 { margin: 5px 0; }
.teaching-mode .teaching-ai-studio { background: #fff; }
.teaching-mode .teaching-ai-studio .teaching-eyebrow { color: #3772ad; }
.teaching-mode .teaching-plan-item.is-active,
.teaching-mode .teaching-plan-student.is-active { border-color: #8db9e6; background: #ebf4fd; }
.teaching-mode .teaching-insights,
.teaching-mode .teaching-ai-suggestion,
.teaching-mode .teaching-ai-pack-callout { border-color: #d7e3f0; background: #f8fbff; }
.teaching-mode .teaching-result-share { border-color: #d7e3f0; }
.teaching-mode .teaching-result-share summary { color: #225d98; }
.teaching-result-recipients { border: 1px solid #dbe5ef; border-radius: 10px; }
.teaching-result-recipients > div { display: grid; gap: 6px; }
.teaching-result-recipients label { display: flex !important; align-items: center; gap: 8px; }
.teaching-result-files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dce6f1; border-radius: 10px; background: #f7fbff; }
.teaching-result-files a { color: #175c9c; font-weight: 700; }
.teaching-result-files small { color: #52677e; }
.teaching-mode .teaching-classroom-banner { padding: 22px 26px; }
.teaching-mode .teaching-classroom-banner-meta { color: #3f617e; }
.teaching-mode .teaching-classroom-banner-meta a { color: #155f9c; font-weight: 700; }
.teaching-mode .teaching-classroom-tabs { border-bottom: 1px solid #d6e1ed; background: #fff; }
.teaching-mode .teaching-classroom-tabs button { color: #4b6480; }
.teaching-mode .teaching-classroom-tabs button[aria-current="page"] { border-bottom-color: #2e75b9; color: #185d9d; }
.teaching-mode .teaching-native-card,
.teaching-mode .teaching-classroom-feed-card,
.teaching-mode .teaching-pack-slide { border: 1px solid #d9e4ef; border-radius: 11px; background: #fff; box-shadow: none; }
.teaching-mode .teaching-pack-slide { min-height: 0; color: #243c55; }
.teaching-mode .teaching-pack-report p,
.teaching-mode .teaching-pack-game { border-color: #d9e4ef; background: #f7fbff; }
.teaching-mode .teaching-native-resource-form,
.teaching-mode .teaching-native-file-form { border-color: #c7d8e9; background: #f8fbff; }
.teaching-mode .teaching-native-file { border-color: #c8daea; background: #eef5fc; color: #1c5a91; }
.teaching-create-menu,
.teaching-resource-options,
.teaching-grade-switch,
.teaching-pack-tabs,
.teaching-message-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px; border: 1px solid #dbe5ef; border-radius: 11px; background: #f8fbff; }
.teaching-native-compose [hidden] { display: none !important; }
.teaching-native-compose:has(#nativePostForm[hidden]) { padding: 12px; background: #fff; border-color: #dbe5ef; }
.teaching-create-trigger { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 15px; border: 1px solid #bad4eb; border-radius: 10px; background: #eaf4fd; color: #154d82; font: inherit; font-weight: 800; cursor: pointer; }
.teaching-create-trigger span { font-size: 22px; line-height: 1; }
.teaching-create-trigger:hover,.teaching-create-trigger:focus-visible { background: #dceeff; border-color: #4f91cc; }
.teaching-native-compose #nativeCreateMenu,.teaching-native-compose #nativeCreateExtra,.teaching-native-compose #nativePostForm { margin-top: 12px; }
.teaching-native-pack-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0; }
.teaching-native-pack-links a,.teaching-native-pack-links button { display: inline-flex; min-height: 34px; align-items: center; padding: 6px 10px; border: 1px solid #c9dbec; border-radius: 8px; background: #f1f7fd; color: #215d91; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; }
.teaching-native-recipients { display: block; margin: 8px 0; color: #315678; font-size: 12px; }
.teaching-mode .teaching-native-edit { border-color: #ceddec; background: #f4f9ff; }
.teaching-mode .teaching-native-edit summary { color: #245a89; }
.teaching-mode .teaching-native-edit label { color: #355a7a; }
.teaching-create-menu strong,
.teaching-resource-options strong { margin-right: 8px; color: #354d68; }
.teaching-create-menu button,
.teaching-resource-options button,
.teaching-grade-switch button,
.teaching-pack-tabs button,
.teaching-message-scope button { min-height: 34px; padding: 7px 11px; border: 1px solid #cfdeed; border-radius: 8px; background: #fff; color: #2f5d89; font-weight: 700; cursor: pointer; }
.teaching-create-menu button:hover,
.teaching-resource-options button:hover,
.teaching-grade-switch button[aria-pressed="true"],
.teaching-pack-tabs button[aria-current="page"],
.teaching-message-scope button[aria-current="page"] { border-color: #6ca5dc; background: #e8f3fd; color: #175b99; }
.teaching-resource-options small { flex-basis: 100%; color: #64798c; }
.teaching-attach-picker { display: grid; gap: 9px; min-width: 0; padding: 12px; border: 1px solid #d5e2f0; border-radius: 12px; background: #f8fbff; }
.teaching-attach-caption { color: #294d70; font-size: 13px; font-weight: 800; }
.teaching-attach-actions,.teaching-attach-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.teaching-attach-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 12px; border: 1px solid #c9daea; border-radius: 9px; background: #fff; color: #245b8b; font: inherit; font-weight: 700; cursor: pointer; }
.teaching-attach-actions button:hover,.teaching-attach-actions button:focus-visible { border-color: #3d85c6; background: #eaf4fe; }
.teaching-attach-actions button span { font-size: 17px; line-height: 1; }
.teaching-attach-url { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.teaching-attach-url[hidden],.teaching-attach-picker [data-attach-file][hidden] { display: none; }
.teaching-attach-url label { flex: 1 1 260px; min-width: 0; }
.teaching-attach-url input { width: 100%; }
.teaching-attach-picker small { color: #64798c; }
.teaching-attach-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 7px 5px 10px; border-radius: 18px; background: #e5f0fb; color: #204d74; font-size: 12px; font-weight: 700; }
.teaching-attach-chip span { overflow-wrap: anywhere; }
.teaching-attach-chip button { border: 0; background: transparent; color: #315a7e; font-size: 18px; cursor: pointer; }
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form > .teaching-attach-picker,
.teaching-native-page [data-native-panel="Classwork"] .teaching-native-compose form > .teaching-kind-help { grid-column: 1 / -1; }
.teaching-kind-help { margin: 0; padding: 10px 12px; border-left: 3px solid #6ea4d5; background: #f3f8fd; color: #385873; font-size: 13px; }
.teaching-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; grid-column: 1 / -1; }
.teaching-post-actions .btn { justify-self: auto; }
.teaching-topic-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.teaching-topic-actions { display: flex; gap: 5px; }
.teaching-topic-actions button { padding: 5px 9px; border: 1px solid #cadbeb; border-radius: 7px; background: #fff; color: #275b88; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.teaching-topic-actions button:hover { background: #eaf4fe; }
.teaching-topic-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; width: 100%; margin: 0 0 10px; }
.teaching-topic-rename input { flex: 1 1 180px; min-width: 0; }
#nativeCreateExtra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; }
#nativeCreateExtra[hidden] { display: none; }
#nativeCreateExtra form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.teaching-announcement-attachments { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 10px 0; }
.teaching-announcement-files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.teaching-announcement-files a { color: #1b5d98; font-weight: 700; }
.teaching-grade-work { margin-top: 14px; padding: 14px; border: 1px solid #dbe5ef; border-radius: 10px; }
.teaching-grade-work h4 { margin: 0 0 4px; }
.teaching-pack-page > section[hidden],
.teaching-classroom-gradebook [data-grade-panel][hidden] { display: none !important; }
.teaching-pack-tabs { position: sticky; top: 0; z-index: 2; }
.teaching-ai-chat { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; }
.teaching-ai-chat > p { margin: 0; color: #536b83; }
.teaching-ai-chat-messages { display: grid; align-content: start; gap: 12px; min-height: 310px; max-height: 60vh; overflow-y: auto; padding: 18px; border: 1px solid #d9e4ee; border-radius: 12px; background: #f8fbff; }
.teaching-ai-chat-messages article { max-width: 85%; padding: 12px 15px; border: 1px solid #d6e3f0; border-radius: 11px; background: #fff; }
.teaching-ai-chat-messages article.user { justify-self: end; background: #eaf3fc; }
.teaching-ai-chat-messages p { margin: 5px 0 0; white-space: normal; line-height: 1.5; }
.teaching-ai-chat-empty { align-self: center; justify-self: center; text-align: center; color: #637a91; }
.teaching-ai-chat form { display: grid; gap: 9px; }
.teaching-ai-chat form textarea { width: 100%; }
.teaching-ai-chat form button { justify-self: end; }
.teaching-message-scope { margin-bottom: 14px; }
.teaching-channel-shell { display: grid; grid-template-columns: minmax(230px,300px) minmax(0,1fr); min-height: 620px; overflow: hidden; border: 1px solid #dbe5ef; border-radius: 12px; background: #fff; }
.teaching-channel-list { display: grid; align-content: start; gap: 5px; padding: 15px; border-right: 1px solid #dbe5ef; background: #f8fbff; }
.teaching-channel-list h2 { margin: 3px 0 12px; color: #1e3b58; }
.teaching-channel-list > button { display: grid; gap: 4px; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: #263f5a; text-align: left; cursor: pointer; }
.teaching-channel-list > button.is-active,
.teaching-channel-list > button:hover { background: #e8f2fc; }
.teaching-channel-list small { color: #647b91; }
.teaching-channel-main { display: flex; flex-direction: column; min-width: 0; }
.teaching-channel-main > header { padding: 18px 22px; border-bottom: 1px solid #dbe5ef; }
.teaching-channel-main h3 { margin: 4px 0; }
.teaching-channel-posts { flex: 1; display: grid; align-content: start; gap: 11px; max-height: 60vh; overflow: auto; padding: 20px; }
.teaching-channel-posts article { padding: 13px 15px; border: 1px solid #dce6f0; border-radius: 10px; background: #fff; }
.teaching-channel-posts article > div { display: flex; justify-content: space-between; gap: 10px; color: #213b59; }
.teaching-channel-posts p { margin: 7px 0 0; line-height: 1.5; }
.teaching-channel-posts time { color: #71849a; font-size: 12px; }
.teaching-channel-main form { display: grid; gap: 8px; padding: 15px 20px; border-top: 1px solid #dbe5ef; }
.teaching-channel-main form textarea { width: 100%; }
.teaching-channel-main form button { justify-self: end; }
.teaching-channel-create { margin-top: 15px; padding: 11px; border: 1px solid #c9dceb; border-radius: 8px; background: #fff; }
.teaching-channel-create summary { color: #1e5e97; font-weight: 700; cursor: pointer; }
.teaching-channel-create form { display: grid; gap: 10px; margin-top: 10px; }
.teaching-channel-create label { display: grid; gap: 5px; }
.teaching-channel-create fieldset { max-height: 220px; overflow: auto; border: 1px solid #dbe5ef; }
#teachingGroupMembers label { display: flex; align-items: center; }
.teaching-channel-empty,.teaching-channel-readonly { padding: 20px; color: #62788e; }
@media (max-width: 760px) {
  .teaching-channel-shell { grid-template-columns: 1fr; }
  .teaching-channel-list { border-right: 0; border-bottom: 1px solid #dbe5ef; }
  .teaching-announcement-attachments { grid-template-columns: 1fr; }
  .teaching-pack-tabs { position: static; }
}
@media (max-width: 900px) {
  .teaching-classroom-stream,
  .teaching-announcement-attachments { grid-template-columns: 1fr; }
}

/* Keep the V2 content layout within the main EPG blue navigation shell. */
.teaching-mode .sidebar {
  background: linear-gradient(180deg, #102a5c, #123d7a);
  color: #fff;
  border-right: 0;
}
.teaching-mode .sidebar nav { margin: 18px 0 10px; }
.teaching-mode .sidebar .sidebar-toggle { color: #dbe7f8; }
.teaching-mode .sidebar .nav-btn,
.teaching-mode .sidebar .nav-group-toggle {
  color: #cfddf4;
}
.teaching-mode .sidebar .nav-btn:hover,
.teaching-mode .sidebar .nav-btn.active,
.teaching-mode .sidebar .nav-group.open > .nav-group-toggle,
.teaching-mode .sidebar .nav-group.has-active > .nav-group-toggle {
  background: rgba(244, 196, 0, .18);
  color: #fff;
}
.teaching-mode .sidebar .nav-submenu { border-color: rgba(244, 196, 0, .52); }
.teaching-mode .sidebar .sidebar-foot {
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.teaching-mode .sidebar .sidebar-foot small,
.teaching-mode .sidebar .profile small { color: #c8d7ee; }

/* House team frames and scoreboards for Years 1–6. */
.teaching-mode .teaching-avatar[data-team-key="Red"], .teaching-team-card.is-red { --team-color: #c7464b; --team-tint: #fff0f0; }
.teaching-mode .teaching-avatar[data-team-key="Blue"], .teaching-team-card.is-blue { --team-color: #3074bd; --team-tint: #eef5ff; }
.teaching-mode .teaching-avatar[data-team-key="Green"], .teaching-team-card.is-green { --team-color: #33855c; --team-tint: #edf8f0; }
.teaching-mode .teaching-avatar[data-team-key="Yellow"], .teaching-team-card.is-yellow { --team-color: #ae7e11; --team-tint: #fff9df; }
.teaching-mode .teaching-avatar[data-team-key] {
  box-sizing: border-box;
  border: 4px solid var(--team-color);
  box-shadow: 0 0 0 2px #fff, 0 3px 8px #18314b38;
}
.teaching-mode .teaching-student-big-avatar .teaching-avatar[data-team-key] {
  border: 5px solid var(--team-color);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #fff;
}
.teaching-mode .teaching-avatar:not(.teaching-avatar-initials) {
  overflow: hidden;
  border-radius: 50%;
  background: var(--team-tint, #eef5fc);
}
.teaching-mode .teaching-avatar:not(.teaching-avatar-initials) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(21, 48, 75, .16));
}
.teaching-team-board {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid #d7e4f0;
  border-radius: 19px;
  background: #f8fbff;
}
.teaching-team-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.teaching-team-heading h3 { margin: 3px 0 0; color: #153b69; }
.teaching-team-heading p { max-width: 360px; margin: 0; color: #536c88; font-size: 13px; }
.teaching-team-scope h4 { margin: 20px 0 9px; color: #254a75; font-size: 14px; }
.teaching-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.teaching-team-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--team-color) 26%, white);
  border-left: 5px solid var(--team-color);
  border-radius: 12px;
  background: var(--team-tint);
}
.teaching-team-card.is-mine { outline: 2px solid var(--team-color); outline-offset: 1px; }
.teaching-team-card .teaching-team-dot { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%; background: var(--team-color); }
.teaching-team-card div { display: grid; gap: 2px; min-width: 0; }
.teaching-team-card strong { color: #173957; font-size: 13px; }
.teaching-team-card small { color: #58708a; font-size: 11px; }
.teaching-team-card b { margin-left: auto; color: var(--team-color); white-space: nowrap; font-size: 20px; }
.teaching-team-card b small { color: inherit; font-size: 11px; }
.teaching-student-team { color: #46617c; font-weight: 700; }
.teaching-team-picker { margin-top: 19px; padding: 16px; border: 1px solid #d7e4f0; border-radius: 15px; background: #f8fbff; }
.teaching-team-picker h4, .teaching-character-subheading { margin: 0; color: #173957; font-size: 16px; }
.teaching-team-picker p { margin: 5px 0 12px; color: #536c88; font-size: 13px; }
.teaching-team-options { display: flex; flex-wrap: wrap; gap: 8px; }
.teaching-team-option { --team-color: #8191a5; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 2px solid #d9e3ed; border-radius: 10px; background: #fff; color: #173957; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.teaching-team-option.is-red { --team-color: #c7464b; }
.teaching-team-option.is-blue { --team-color: #3074bd; }
.teaching-team-option.is-green { --team-color: #33855c; }
.teaching-team-option.is-yellow { --team-color: #ae7e11; }
.teaching-team-option:hover, .teaching-team-option[aria-pressed="true"] { border-color: var(--team-color); background: color-mix(in srgb, var(--team-color) 9%, white); }
.teaching-team-option:focus-visible { outline: 3px solid #1d5ea8; outline-offset: 2px; }
.teaching-team-option-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--team-color); }
.teaching-character-subheading { margin-top: 20px; }
@media (max-width: 900px) {
  .teaching-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .teaching-team-heading { display: block; }
  .teaching-team-heading p { margin-top: 8px; }
  .teaching-team-card { flex-wrap: wrap; }
  .teaching-team-card b { font-size: 18px; }
}
.teaching-mode .teaching-classroom-toolbar > label:first-child,
.teaching-mode .teaching-classroom-upcoming h3,
.teaching-mode .teaching-classroom-feed-card h3,
.teaching-mode .teaching-classroom-feed form label,
.teaching-mode .teaching-classroom-topic h4,
.teaching-mode .teaching-classroom-child-picker,
.teaching-mode .teaching-native-quiz-fields legend,
.teaching-mode .teaching-native-quiz legend,
.teaching-mode .teaching-native-quiz h5,
.teaching-mode .teaching-class-comments summary { color: #173a60; }
.teaching-mode .teaching-classroom-upcoming {
  border-color: #d9e4ef;
  box-shadow: none;
}
.teaching-mode .teaching-classroom-tabs button[aria-current="page"] {
  background: #eaf3fc;
}