:root {
  --pet-ink: #173f37;
  --pet-leaf: #356e57;
  --pet-cream: #fff9e9;
  --pet-paper: #fffdf7;
  --pet-sun: #f8c63f;
  --pet-coral: #c9503f;
  --pet-purple: #7557b7;
  --pet-muted: #60736a;
  --pet-line: #e6ddc8;
  --pet-shadow: 0 14px 32px rgba(23, 63, 55, .12);
}

* { box-sizing: border-box; }

body { margin: 0; }

button,
input,
textarea,
select { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pet-hero {
  min-height: 390px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgba(248, 198, 63, .24), transparent 28%),
    linear-gradient(135deg, #103e37, #194f45 56%, #39745a);
  color: #fffdf7;
}

.pet-hero::before,
.pet-hero::after {
  position: absolute;
  content: '';
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}

.pet-hero::before { width: 430px; height: 430px; right: -110px; top: -230px; }
.pet-hero::after { width: 250px; height: 250px; left: 38%; bottom: -205px; }

.hero-shell,
.pet-app {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

.hero-shell {
  min-height: 390px;
  padding: 93px 0 55px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
  align-items: center;
  gap: 38px;
}

.pet-hero .back-btn {
  min-height: 39px;
  padding: 8px 14px;
  position: absolute;
  top: 24px;
  left: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.eyebrow,
.section-kicker {
  margin: 0 0 8px;
  color: #e0a928;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-copy .eyebrow { color: #ffe08a; }

.hero-copy h1 {
  margin: 0;
  color: #fffdf7;
  font-family: 'DM Serif Display', 'Noto Sans SC', serif;
  font-size: clamp(3.3rem, 7vw, 6.2rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 21px 0 0;
  color: rgba(255, 253, 247, .88);
  font-size: 1.08rem;
  line-height: 1.65;
}

.hero-badges {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-badges span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #fff1b2;
  font-size: .78rem;
  font-weight: 900;
}

.hero-pets {
  min-height: 285px;
  position: relative;
}

.hero-pet {
  aspect-ratio: 1;
  position: absolute;
  overflow: hidden;
  border: 5px solid rgba(255, 253, 247, .88);
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 20px 35px rgba(5, 39, 32, .25);
}

.hero-pet-one {
  width: 205px;
  right: 118px;
  top: 24px;
  z-index: 2;
  background-image: url('/images/class-pet-points/pet-atlas-01.webp');
  background-size: 300% 200%;
  background-position: 50% 0;
  transform: rotate(-4deg);
}

.hero-pet-two {
  width: 154px;
  right: 0;
  top: 2px;
  background-image: url('/images/class-pet-points/pet-atlas-02.webp');
  background-size: 300% 200%;
  background-position: 100% 100%;
  transform: rotate(5deg);
}

.hero-pet-three {
  width: 166px;
  right: 5px;
  bottom: 0;
  z-index: 3;
  background-image: url('/images/class-pet-points/pet-atlas-04.webp');
  background-size: 300% 200%;
  background-position: 50% 0;
  transform: rotate(2deg);
}

.pet-app { padding: 28px 0 72px; }

.app-card {
  border: 1px solid var(--pet-line);
  border-radius: 22px;
  background: var(--pet-paper);
  box-shadow: var(--pet-shadow);
}

.privacy-note {
  margin-bottom: 18px;
  padding: 14px 17px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid #cddfbd;
  border-radius: 16px;
  background: #eff7e5;
  color: #3a6658;
}

.privacy-note span { margin-top: 2px; }
.privacy-note p { margin: 0; font-size: .9rem; line-height: 1.55; }
.privacy-note strong { color: var(--pet-ink); }

.class-dashboard {
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(320px, 1fr) minmax(260px, auto);
  align-items: center;
  gap: 24px;
}

.class-name-control label,
.add-students-card label {
  display: block;
  margin-bottom: 6px;
  color: var(--pet-ink);
  font-size: .78rem;
  font-weight: 900;
}

.class-name-control input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  color: var(--pet-ink);
  font-size: 1.06rem;
  font-weight: 900;
}

.class-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
}

.class-library-row select {
  width: 100%;
  min-height: 40px;
  padding: 7px 30px 7px 10px;
  color: var(--pet-ink);
  font-size: .82rem;
  font-weight: 900;
}

.class-library-button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #cfdcca;
  border-radius: 10px;
  background: #f5f9ef;
  color: var(--pet-leaf);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 900;
}

.class-library-button:hover { border-color: #9cba97; background: #eaf4df; }
.class-library-button:disabled { cursor: not-allowed; opacity: .45; }
.class-delete-button { color: #9a493e; }
.class-delete-button:hover:not(:disabled) { border-color: #e1b4ad; background: #fff1ee; }
.class-name-label { margin-top: 12px; }

.class-name-control p {
  margin: 5px 0 0;
  color: var(--pet-muted);
  font-size: .73rem;
}

.class-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.class-stats div {
  min-width: 0;
  padding: 2px 17px;
  border-left: 1px solid var(--pet-line);
}

.class-stats strong,
.class-stats span { display: block; }

.class-stats strong {
  color: var(--pet-ink);
  font-family: 'DM Serif Display', 'Noto Sans SC', serif;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
}

.class-stats span {
  margin-top: 4px;
  color: var(--pet-muted);
  font-size: .72rem;
  font-weight: 800;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.utility-button,
.undo-button,
.text-button,
.dialog-close {
  border: 1px solid #cfdbca;
  border-radius: 10px;
  background: #fffef9;
  color: var(--pet-leaf);
  cursor: pointer;
  font-weight: 900;
}

.utility-button { min-height: 36px; padding: 7px 10px; font-size: .75rem; }
.utility-button:hover,
.undo-button:hover:not(:disabled) { border-color: #9cba97; background: #f2f8e8; }
.utility-button[aria-pressed='true'] { border-color: #7ea67b; background: #e7f2db; }
.danger-button { color: #a04438; }
.danger-button:hover { border-color: #e1b4ad; background: #fff1ee; }

.pet-workspace {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.pet-sidebar { display: grid; gap: 18px; }
.pet-sidebar .app-card { padding: 21px; }

.app-card h2 {
  margin: 0;
  color: var(--pet-ink);
  font-family: 'DM Serif Display', 'Noto Sans SC', serif;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.1;
}

.add-students-card form { margin-top: 17px; }

.add-students-card textarea {
  width: 100%;
  min-height: 148px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.45;
}

.field-note {
  margin: 7px 0 13px;
  color: var(--pet-muted);
  font-size: .76rem;
  line-height: 1.45;
}

.primary-button {
  width: 100%;
  min-height: 44px;
  padding: 9px 13px;
  border: 0;
  border-radius: 12px;
  background: var(--pet-coral);
  box-shadow: 0 5px 0 #9d392f;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #9d392f; }
}
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #9d392f; }

.growth-guide ol,
.history-list,
.teacher-tips ol { margin: 17px 0 0; padding: 0; list-style: none; }

.growth-guide ol { display: grid; gap: 8px; }

.growth-guide li {
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e6e0cf;
  border-radius: 12px;
  background: #fffef9;
}

.growth-guide li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1b8;
  font-size: 1.05rem;
}

.growth-guide strong,
.growth-guide small { display: block; }
.growth-guide strong { color: var(--pet-ink); font-size: .8rem; }
.growth-guide small { color: var(--pet-muted); font-size: .69rem; }

.section-heading-row,
.roster-heading,
.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.text-button {
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--pet-muted);
  font-size: .72rem;
}

.text-button:hover { color: var(--pet-coral); }

.history-list { display: grid; gap: 3px; }

.history-item {
  padding: 9px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ebe5d7;
}

.history-item:last-child { border-bottom: 0; }
.history-icon { font-size: .95rem; }
.history-copy { min-width: 0; }
.history-copy strong,
.history-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-copy strong { color: var(--pet-ink); font-size: .76rem; }
.history-copy small { color: var(--pet-muted); font-size: .65rem; }
.history-delta { font-size: .76rem; font-weight: 900; }
.history-delta.positive { color: #258054; }
.history-delta.negative { color: #b44a3b; }
.history-empty { margin: 14px 0 0; color: var(--pet-muted); font-size: .78rem; line-height: 1.5; }

.roster-panel { min-height: 620px; padding: 26px; }
.roster-heading h2 span { color: var(--pet-muted); font-family: 'Nunito', sans-serif; font-size: .75rem; font-weight: 800; }

.undo-button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: .74rem;
}

.undo-button:disabled { cursor: not-allowed; opacity: .48; }

.roster-toolbar {
  margin-top: 20px;
  padding: 11px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5dfcf;
  border-radius: 15px;
  background: #f8f5ea;
}

.search-field { position: relative; }
.search-field > span:not(.sr-only) { position: absolute; top: 50%; left: 12px; color: var(--pet-leaf); transform: translateY(-50%); }
.search-field input { width: 100%; min-height: 40px; padding: 8px 11px 8px 35px; }

.sort-field {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--pet-muted);
  font-size: .75rem;
  font-weight: 900;
}

.sort-field select { min-height: 40px; padding: 7px 32px 7px 10px; }

.empty-state {
  max-width: 470px;
  margin: 45px auto 20px;
  text-align: center;
}

.empty-pet {
  width: 150px;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border: 6px solid #fff;
  border-radius: 50%;
  background-image: url('/images/class-pet-points/pet-atlas-01.webp');
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: 100% 100%;
  box-shadow: 0 13px 25px rgba(23, 63, 55, .17);
}

.empty-state h3 {
  margin: 0;
  color: var(--pet-ink);
  font-family: 'DM Serif Display', 'Noto Sans SC', serif;
  font-size: 1.65rem;
  font-weight: 400;
}

.empty-state p { margin: 9px auto 0; color: var(--pet-muted); font-size: .88rem; line-height: 1.6; }

.pet-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 15px;
}

.student-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid #e4dece;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(23, 63, 55, .08);
  transition: transform .17s ease, box-shadow .17s ease;
}

@media (hover: hover) and (pointer: fine) {
  .student-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(23, 63, 55, .14); }
}
.student-card.stage-1 { --stage-color: #7ca96c; --stage-soft: #edf6e6; }
.student-card.stage-2 { --stage-color: #d3a523; --stage-soft: #fff6d6; }
.student-card.stage-3 { --stage-color: #df7d35; --stage-soft: #fff0e2; }
.student-card.stage-4 { --stage-color: #7863bc; --stage-soft: #f1ecff; }
.student-card.stage-5 { --stage-color: #cf4f82; --stage-soft: #ffe9f2; }
.student-card.stage-6 { --stage-color: #2e86bd; --stage-soft: #e7f6ff; }

.student-card-header {
  padding: 13px 13px 5px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.student-name-wrap { min-width: 0; }
.student-name {
  margin: 0;
  overflow: hidden;
  color: var(--pet-ink);
  font-size: .94rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-name .private-name { display: none; }
.privacy-view .student-name .real-name { display: none; }
.privacy-view .student-name .private-name { display: inline; }
.pet-name { margin: 1px 0 0; color: var(--pet-muted); font-size: .66rem; font-weight: 800; }

.student-menu { position: relative; z-index: 6; }
.student-menu summary {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #dce3d7;
  border-radius: 50%;
  background: #fffef9;
  color: var(--pet-leaf);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}
.student-menu summary::-webkit-details-marker { display: none; }
.student-menu-panel {
  width: 130px;
  padding: 5px;
  position: absolute;
  top: 35px;
  right: 0;
  display: grid;
  gap: 2px;
  border: 1px solid #ddd7c8;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 25px rgba(23, 63, 55, .18);
}
.student-menu-panel button {
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pet-ink);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  text-align: left;
}
.student-menu-panel button:hover { background: #f2f7eb; }
.student-menu-panel .remove-student { color: #a33f35; }

.pet-visual-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pet-visual {
  width: min(74%, 178px);
  aspect-ratio: 1;
  margin: 2px auto 9px;
  position: relative;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--stage-soft);
  box-shadow: 0 9px 20px rgba(23, 63, 55, .14), 0 0 0 2px var(--stage-color);
}

.pet-sprite {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background-image: var(--pet-atlas);
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: var(--pet-x) var(--pet-y);
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}

.stage-1 .pet-sprite { opacity: 0; transform: scale(.52); }
.stage-2 .pet-sprite { transform: translateY(-12%) scale(.66); filter: saturate(.92); }
.stage-3 .pet-sprite { transform: scale(.76); filter: saturate(.93); }
.stage-4 .pet-sprite { transform: scale(.91); filter: saturate(1.04); }
.stage-5 .pet-sprite { transform: scale(1); filter: saturate(1.08); }
.stage-6 .pet-sprite { transform: scale(1.08); filter: saturate(1.18) brightness(1.06); }

.egg-shell {
  display: none;
  position: absolute;
  z-index: 2;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.92) 0 5%, transparent 6%),
    radial-gradient(circle at 65% 58%, rgba(248,198,63,.46) 0 7%, transparent 8%),
    linear-gradient(145deg, #fffdf1, #ffe7a1 62%, #f5bd4b);
  box-shadow: inset -10px -12px 18px rgba(179,111,24,.15), 0 9px 18px rgba(23,63,55,.16);
}

.stage-1 .egg-shell {
  width: 63%;
  height: 76%;
  display: block;
  border: 3px solid rgba(218,157,40,.5);
  border-radius: 52% 52% 47% 47% / 62% 62% 39% 39%;
}

.stage-2 .egg-shell {
  width: 74%;
  height: 43%;
  bottom: 9%;
  display: block;
  border: 3px solid rgba(218,157,40,.48);
  border-top: 0;
  border-radius: 0 0 48% 48% / 0 0 66% 66%;
  clip-path: polygon(0 23%, 10% 7%, 23% 25%, 36% 4%, 51% 26%, 65% 3%, 79% 24%, 91% 8%, 100% 22%, 96% 100%, 5% 100%);
}

.pet-stage-decoration {
  width: 37px;
  height: 37px;
  position: absolute;
  z-index: 3;
  top: -8px;
  right: -7px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--stage-soft);
  box-shadow: 0 5px 12px rgba(23, 63, 55, .14);
  font-size: 1rem;
}

.stage-6 .pet-visual::before,
.stage-6 .pet-visual::after {
  position: absolute;
  z-index: 4;
  content: '✦';
  color: #f8c63f;
  font-size: 1.25rem;
  animation: petTwinkle 1.8s ease-in-out infinite;
}
.stage-6 .pet-visual::before { left: -11px; top: 16px; }
.stage-6 .pet-visual::after { right: -14px; bottom: 19px; animation-delay: .6s; }

@keyframes petTwinkle {
  0%, 100% { opacity: .55; transform: scale(.75) rotate(0); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-6 .pet-visual::before,
  .stage-6 .pet-visual::after { animation: none; }
}

.holiday-skin {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.skin-christmas {
  width: 35%;
  height: 13%;
  top: 7%;
  right: 14%;
  border-radius: 999px;
  background: #fffdf7;
  box-shadow: 0 3px 7px rgba(23,63,55,.16);
  transform: rotate(14deg);
}

.skin-christmas::before {
  width: 105%;
  height: 190%;
  position: absolute;
  right: 2%;
  bottom: 45%;
  content: '';
  clip-path: polygon(8% 100%, 56% 0, 100% 100%);
  border-radius: 60% 60% 15% 15%;
  background: linear-gradient(135deg, #ed5b4e, #b5292d);
}

.skin-christmas::after {
  width: 38%;
  aspect-ratio: 1;
  position: absolute;
  right: -18%;
  top: -145%;
  content: '';
  border-radius: 50%;
  background: #fffdf7;
  box-shadow: 0 2px 6px rgba(23,63,55,.16);
}

.skin-halloween { right: -4%; bottom: 2%; }
.skin-halloween::before { content: '🎃'; filter: drop-shadow(0 4px 5px rgba(23,63,55,.25)); font-size: clamp(2rem, 4vw, 3.15rem); }
.skin-lunar { left: -1%; bottom: 2%; }
.skin-lunar::before { content: '🧧'; filter: drop-shadow(0 4px 5px rgba(23,63,55,.22)); font-size: clamp(2rem, 4vw, 3.05rem); }

.skin-label {
  max-width: calc(100% - 28px);
  margin: 6px auto 0;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid #ead49b;
  border-radius: 999px;
  background: #fff8dc;
  color: #825d17;
  font-size: .62rem;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-copy { padding: 0 14px; text-align: center; }
.stage-label { margin: 0; color: var(--stage-color); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.points-line { margin: 2px 0 0; color: var(--pet-ink); font-size: .78rem; font-weight: 900; }
.points-line strong { font-size: 1.2rem; }

.progress-track {
  height: 8px;
  margin: 10px 14px 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e7de;
}
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--stage-color), #f8c63f); transition: width .25s ease; }
.progress-note { min-height: 17px; margin: 0 14px; color: var(--pet-muted); font-size: .64rem; font-weight: 700; text-align: center; }

.point-controls {
  margin-top: 9px;
  padding: 10px 11px 12px;
  display: grid;
  grid-template-columns: .8fr 1fr 1fr;
  gap: 6px;
  border-top: 1px solid #eee8db;
  background: #fcfaf3;
}

.point-button {
  min-height: 37px;
  padding: 6px;
  border: 1px solid #d8dfd3;
  border-radius: 10px;
  background: #fff;
  color: var(--pet-ink);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 900;
}
@media (hover: hover) and (pointer: fine) {
  .point-button:hover { transform: translateY(-1px); }
}
.point-button.minus { color: #a34a3c; }
.point-button.plus-one { border-color: #add09d; background: #edf7e7; color: #2e704f; }
.point-button.plus-five { border-color: #efd07d; background: #fff4cf; color: #855c13; }

.no-results { margin: 42px 0; color: var(--pet-muted); text-align: center; }

.teacher-tips {
  margin-top: 22px;
  padding: 25px;
  display: grid;
  grid-template-columns: minmax(210px, .45fr) 1fr;
  align-items: center;
  gap: 28px;
}
.teacher-tips ol { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: tip; }
.teacher-tips li { padding: 14px; border: 1px solid #e4dece; border-radius: 14px; background: #fffef9; counter-increment: tip; }
.teacher-tips li::before { display: block; margin-bottom: 8px; color: #d29e20; content: '0' counter(tip); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.teacher-tips strong,
.teacher-tips span { display: block; }
.teacher-tips strong { color: var(--pet-ink); font-size: .84rem; }
.teacher-tips span { margin-top: 4px; color: var(--pet-muted); font-size: .74rem; line-height: 1.5; }

.pet-picker {
  width: min(890px, calc(100% - 30px));
  max-height: min(820px, calc(100vh - 30px));
  padding: 26px;
  border: 1px solid #ddd4c0;
  border-radius: 24px;
  background: var(--pet-paper);
  box-shadow: 0 26px 80px rgba(11, 45, 38, .3);
  color: var(--pet-ink);
}
.pet-picker::backdrop { background: rgba(10, 43, 36, .66); backdrop-filter: blur(3px); }
.pet-picker[open] { animation: dialogIn .18s ease-out; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog-heading > div > p:last-child { margin: 6px 0 0; color: var(--pet-muted); font-size: .82rem; }
.dialog-close { width: 39px; height: 39px; padding: 0; font-size: 1.5rem; }

.pet-picker-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 10px;
}
.pet-choice {
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #f7f4ea;
  color: var(--pet-ink);
  cursor: pointer;
  text-align: center;
}
.pet-choice:hover { border-color: #a5c695; background: #eff7e7; }
.pet-choice[aria-pressed='true'] { border-color: var(--pet-coral); background: #fff1ed; }
.pet-choice-sprite {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border-radius: 12px;
  background-image: var(--pet-atlas);
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: var(--pet-x) var(--pet-y);
}
.pet-choice strong { margin-top: 5px; display: block; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.skin-picker { width: min(660px, calc(100% - 30px)); }
.skin-picker-note { margin: 14px 0 0; color: var(--pet-muted); font-size: .83rem; line-height: 1.55; }
.skin-picker-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.skin-choice {
  min-height: 112px;
  padding: 15px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: #f7f4ea;
  color: var(--pet-ink);
  cursor: pointer;
  text-align: left;
}
.skin-choice:hover { border-color: #a5c695; background: #eff7e7; }
.skin-choice[aria-pressed='true'] { border-color: var(--pet-coral); background: #fff1ed; }
.skin-choice-icon { font-size: 2.25rem; text-align: center; }
.skin-choice strong,
.skin-choice small { display: block; }
.skin-choice strong { font-size: .85rem; }
.skin-choice small { margin-top: 3px; color: var(--pet-muted); font-size: .7rem; line-height: 1.4; }

.toast {
  max-width: min(420px, calc(100% - 30px));
  min-height: 44px;
  padding: 11px 16px;
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
  border-radius: 13px;
  background: #123f37;
  box-shadow: 0 13px 30px rgba(10, 43, 36, .28);
  color: #fffdf7;
  font-size: .82rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.noscript-note { margin: 20px; padding: 14px; border: 1px solid #e1b4ad; background: #fff1ee; color: #8f3c32; }

@media (max-width: 1080px) {
  .class-dashboard { grid-template-columns: minmax(200px, .7fr) 1fr; }
  .dashboard-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .pet-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .pet-picker-grid { grid-template-columns: repeat(4, minmax(90px, 1fr)); }
}

@media (max-width: 820px) {
  .hero-shell { grid-template-columns: 1fr; padding-bottom: 30px; }
  .hero-copy { max-width: 620px; }
  .hero-pets { min-height: 175px; }
  .hero-pet-one { width: 155px; left: 0; right: auto; top: 13px; }
  .hero-pet-two { width: 125px; left: 126px; right: auto; top: 5px; }
  .hero-pet-three { width: 130px; left: 229px; right: auto; bottom: 0; }
  .pet-workspace { grid-template-columns: 1fr; }
  .pet-sidebar { grid-template-columns: 1fr 1fr; }
  .history-card { grid-column: 1 / -1; }
  .teacher-tips { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero-shell,
  .pet-app { width: min(100% - 26px, 1240px); }
  .pet-hero .back-btn { left: 0; }
  .hero-shell { padding-top: 88px; }
  .hero-copy h1 { font-size: clamp(3.05rem, 17vw, 4.7rem); }
  .class-dashboard { grid-template-columns: 1fr; padding: 18px; }
  .class-stats { border-top: 1px solid var(--pet-line); border-bottom: 1px solid var(--pet-line); }
  .class-stats div { padding: 12px 8px; text-align: center; }
  .class-stats div:first-child { border-left: 0; }
  .dashboard-actions { grid-column: auto; justify-content: flex-start; }
  .pet-sidebar { grid-template-columns: 1fr; }
  .history-card { grid-column: auto; }
  .roster-panel { min-height: 480px; padding: 18px; }
  .roster-heading { align-items: stretch; flex-direction: column; }
  .undo-button { align-self: flex-start; }
  .roster-toolbar { grid-template-columns: 1fr; }
  .sort-field { justify-content: space-between; }
  .sort-field select { min-width: 190px; }
  .pet-grid { grid-template-columns: 1fr; }
  .student-card { max-width: 390px; width: 100%; margin: 0 auto; }
  .teacher-tips ol { grid-template-columns: 1fr; }
  .pet-picker { padding: 19px; }
  .pet-picker-grid { grid-template-columns: repeat(3, minmax(75px, 1fr)); }
  .skin-picker-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .hero-pets { transform: scale(.88); transform-origin: left center; }
  .class-library-row { grid-template-columns: 1fr 1fr; }
  .class-library-row select { grid-column: 1 / -1; }
  .pet-picker-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
}