:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #eef8f1;
  color: #14382f;
  --ink: #14382f;
  --muted: #55746a;
  --panel: rgba(255, 255, 255, 0.88);
  --line: rgba(48, 94, 77, 0.14);
  --leaf: #2f8a67;
  --leaf-dark: #17614c;
  --pond: #2d6f93;
  --sun: #f6c95d;
  --rose: #b24b53;
  --mint: #dff3e4;
  --shadow: 0 18px 42px rgba(49, 91, 72, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(229, 247, 234, 0.92) 48%, rgba(216, 241, 226, 0.88) 100%),
    linear-gradient(0deg, rgba(95, 181, 129, 0.16), rgba(95, 181, 129, 0) 36%),
    #eef8f1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(246, 201, 93, 0.16), transparent 16%),
    radial-gradient(circle at 86% 7%, rgba(85, 181, 143, 0.16), transparent 18%),
    linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, 0.28) 32% 34%, transparent 34% 100%);
  z-index: -1;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
}

.is-hidden {
  display: none !important;
}

.class-switch-hint {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #54706a;
  font-size: 15px;
  font-weight: 1000;
}

.class-switch-hint em {
  display: inline-block;
  font: inherit;
}

.class-switch-hint em {
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(32, 128, 91, 0.11);
  color: #168756;
  font-style: normal;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(560px, 1.08fr) minmax(390px, 520px);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
  padding: clamp(34px, 5vw, 72px) clamp(32px, 6vw, 110px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 249, 222, 0.14), rgba(255, 255, 255, 0.05) 42%, rgba(237, 249, 230, 0.28)),
    #edf8ed;
}

.login-nature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 250, 224, 0.26) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(242, 252, 233, 0.18) 100%),
    url("../miniprogram/images/ui/record/record_bg_forest_soft.png") center center / cover no-repeat;
  filter: saturate(1.04);
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 7%, rgba(255, 247, 190, 0.84), rgba(255, 247, 190, 0.24) 13%, rgba(255, 247, 190, 0) 34%),
    radial-gradient(circle at 8% 88%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(245, 255, 235, 0.18));
}

.login-visual,
.login-panel {
  position: relative;
  z-index: 2;
}

.login-visual h1,
.board-header h1 {
  margin: 8px 0 16px;
  font-size: clamp(44px, 4.7vw, 76px);
  line-height: 1.02;
  letter-spacing: 0;
}

.login-visual h1 {
  max-width: 780px;
  margin-top: 14px;
  margin-bottom: 16px;
  font-family: "PingFang SC", "Microsoft YaHei", "STKaiti", "KaiTi", sans-serif;
  font-size: clamp(58px, 6.2vw, 110px);
  font-weight: 900;
  color: #2d6f2f;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 rgba(255, 255, 255, 0.62),
    0 12px 26px rgba(46, 99, 42, 0.16);
}

.login-visual p {
  margin: 0;
  max-width: 760px;
  font-size: clamp(21px, 1.65vw, 30px);
  line-height: 1.55;
  color: rgba(42, 95, 50, 0.88);
  font-weight: 750;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.68);
}

.login-hero-scene {
  position: relative;
  width: min(900px, 100%);
  height: clamp(230px, 23vw, 330px);
  margin-top: clamp(24px, 3vw, 42px);
  overflow: visible;
  background: transparent;
}

.login-hero-scene::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -1%;
  bottom: -8px;
  height: 44%;
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
  background:
    radial-gradient(ellipse at 32% 20%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(180deg, rgba(195, 234, 160, 0.42), rgba(104, 177, 86, 0.2));
  filter: blur(0.2px);
  box-shadow: 0 -18px 48px rgba(255, 255, 255, 0.12) inset;
}

.login-hill {
  position: absolute;
  bottom: -46px;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.login-hill-one {
  left: -2%;
  width: 66%;
  height: 46%;
  background: rgba(98, 176, 89, 0.18);
}

.login-hill-two {
  right: -5%;
  width: 52%;
  height: 40%;
  background: rgba(73, 158, 87, 0.15);
}

.login-sunbeam {
  position: absolute;
  left: 46%;
  top: 2%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 220, 94, 0.8);
  box-shadow:
    0 0 0 18px rgba(255, 220, 94, 0.18),
    0 0 72px 42px rgba(255, 245, 180, 0.32);
  opacity: 0.72;
}

.login-pet {
  position: absolute;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 18px 18px rgba(57, 83, 47, 0.22));
}

.login-pet-sheep {
  width: clamp(144px, 15vw, 218px);
  height: clamp(144px, 15vw, 218px);
  left: 2%;
  bottom: 12%;
}

.login-pet-chameleon {
  width: clamp(132px, 13vw, 190px);
  height: clamp(132px, 13vw, 190px);
  left: 29%;
  bottom: 8%;
}

.login-pet-rabbit {
  width: clamp(118px, 12vw, 174px);
  height: clamp(118px, 12vw, 174px);
  left: 51%;
  bottom: 10%;
}

.login-pet-dog {
  width: clamp(154px, 16vw, 232px);
  height: clamp(154px, 16vw, 232px);
  left: 72%;
  bottom: 8%;
}

.brand-kicker,
.muted-label {
  color: var(--leaf-dark);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 1.1vw, 18px);
  color: #2a763d;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.7);
}

.login-kicker span {
  width: 18px;
  height: 12px;
  display: inline-block;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #5cae54, #2f793a);
  transform: rotate(-24deg);
}

.login-stats {
  margin-top: clamp(12px, 2vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  max-width: 900px;
  gap: clamp(12px, 1.4vw, 22px);
}

.login-stats div {
  min-height: 132px;
  padding: 18px 20px 16px 74px;
  position: relative;
  background: rgba(255, 255, 246, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  box-shadow:
    0 18px 38px rgba(60, 103, 53, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(12px);
}

.login-stats img {
  position: absolute;
  left: 18px;
  top: 26px;
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 8px;
  border-radius: 16px;
  background: rgba(235, 249, 224, 0.88);
  border: 1px solid rgba(88, 145, 72, 0.18);
}

.login-stats span {
  display: block;
  color: #3c8a3d;
  font-weight: 800;
  font-size: 15px;
}

.login-stats strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(22px, 1.6vw, 30px);
  line-height: 1.18;
  color: #173d2f;
}

.login-stats em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  color: rgba(65, 86, 66, 0.78);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.login-panel {
  overflow: hidden;
  background: rgba(255, 255, 247, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 42px;
  padding: clamp(34px, 3.6vw, 58px);
  box-shadow:
    0 28px 72px rgba(52, 83, 45, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 32px;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(240, 252, 225, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.login-panel > * {
  position: relative;
  z-index: 2;
}

.login-panel-leaf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 92px;
  height: 92px;
  opacity: 0.54;
  background:
    radial-gradient(ellipse at 30% 30%, #8bc66b 0 26%, transparent 28%),
    radial-gradient(ellipse at 64% 46%, #6ca653 0 21%, transparent 23%),
    radial-gradient(ellipse at 46% 70%, #a7d779 0 20%, transparent 22%);
  filter: drop-shadow(0 8px 10px rgba(65, 100, 43, 0.12));
}

.login-panel-leaf-top {
  top: -12px;
  right: 24px;
  transform: rotate(-18deg);
}

.login-panel-leaf-bottom {
  right: 24px;
  bottom: 12px;
  transform: rotate(28deg) scale(1.12);
}

.login-panel h2 {
  margin: 0 0 34px;
  font-size: clamp(34px, 2.8vw, 48px);
  line-height: 1.15;
  color: #276b31;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.66);
}

.login-panel h2::after {
  content: "•";
  display: block;
  width: 160px;
  margin: 13px auto 0;
  color: #58944b;
  font-size: 20px;
  line-height: 1;
  background:
    linear-gradient(90deg, rgba(88, 148, 75, 0.42), rgba(88, 148, 75, 0) 42% 58%, rgba(88, 148, 75, 0.42));
}

.login-panel label,
.search-box {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.login-panel input,
.search-box input,
.custom-row input,
select {
  min-height: 58px;
  border: 1px solid rgba(48, 94, 77, 0.2);
  border-radius: 8px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
}

.login-panel input {
  min-height: 78px;
  border-radius: 18px;
  padding: 0 24px;
  border-color: rgba(112, 135, 111, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 24px rgba(67, 95, 58, 0.06);
  font-size: 17px;
}

.login-panel input:focus,
.search-box input:focus,
.custom-row input:focus,
select:focus {
  border-color: rgba(47, 138, 103, 0.54);
  box-shadow: 0 0 0 4px rgba(47, 138, 103, 0.12);
  outline: none;
}

.login-panel label + label {
  margin-top: 18px;
}

.login-panel label span {
  color: #507255;
}

.primary-button,
.secondary-button,
.danger-button,
.ghost-button,
.template-button {
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 900;
}

.primary-button {
  width: 100%;
  margin-top: 26px;
  background: linear-gradient(180deg, #359572, #207456);
  color: #fff;
  box-shadow: 0 12px 24px rgba(32, 116, 86, 0.22);
}

.login-panel .primary-button {
  min-height: 76px;
  margin-top: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 84% 50%, rgba(132, 185, 94, 0.38), transparent 24%),
    linear-gradient(180deg, #5b9d43 0%, #1f6c39 100%);
  border: 2px solid rgba(107, 151, 80, 0.62);
  box-shadow:
    0 14px 0 rgba(30, 93, 50, 0.18),
    0 20px 34px rgba(31, 108, 57, 0.22),
    inset 0 3px 0 rgba(255, 255, 255, 0.22);
  font-size: 22px;
  letter-spacing: 0;
}

.secondary-button {
  background: linear-gradient(180deg, #357ea2, #246883);
  color: #fff;
}

.danger-button {
  background: linear-gradient(180deg, #bd5960, #9f3e48);
  color: #fff;
}

.ghost-button {
  background: rgba(255, 255, 255, 0.78);
  color: var(--leaf-dark);
  border: 1px solid rgba(47, 85, 71, 0.18);
}

.side-mascot {
  margin-top: auto;
  min-height: 178px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.06);
}

.side-mascot-stage {
  position: relative;
  height: 126px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at center bottom, rgba(246, 201, 93, 0.28), transparent 58%),
    rgba(219, 244, 226, 0.08);
}

.side-mascot-stage img {
  max-width: 116px;
  max-height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.18));
}

.side-mascot-stage .side-mascot-hunger-badge {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 2;
  width: 86px;
  height: 36px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: none;
  transform: rotate(-3deg);
  pointer-events: none;
}

.side-mascot-stage .side-mascot-hunger-badge.is-hidden {
  display: none;
}

.side-mascot-badge {
  margin-top: 10px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 224, 138, 0.18);
  color: #ffe49a;
  font-weight: 900;
}

.form-tip {
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.login-panel .form-tip {
  margin-top: 28px;
  color: rgba(68, 89, 67, 0.82);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.board-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.side-nav {
  min-height: 100vh;
  padding: 28px 22px;
  background:
    linear-gradient(180deg, rgba(17, 74, 55, 0.96), rgba(18, 57, 48, 0.98)),
    #123930;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 10px 0 34px rgba(28, 75, 55, 0.16);
  position: relative;
  overflow: hidden;
}

.side-nav::before {
  content: "";
  position: absolute;
  left: -60px;
  right: -60px;
  bottom: -90px;
  height: 210px;
  border-radius: 50% 50% 0 0;
  background: rgba(98, 176, 118, 0.16);
  pointer-events: none;
}

.side-nav > * {
  position: relative;
  z-index: 1;
}

.side-nav .brand-kicker {
  color: #aee1c3;
}

.side-nav h2 {
  margin: 8px 0 0;
  font-size: 34px;
}

.class-list {
  display: grid;
  gap: 10px;
  overflow: auto;
}

.feature-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 252px;
  overflow: auto;
  padding-right: 2px;
}

.feature-tab {
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  box-shadow: none;
}

.feature-tab span,
.feature-tab strong {
  display: block;
}

.feature-tab span {
  color: rgba(255, 232, 140, 0.94);
  font-size: 12px;
  font-weight: 1000;
}

.feature-tab strong {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
}

.feature-tab.is-active {
  background: linear-gradient(180deg, #ffe88c, var(--c-yellow));
  border-color: #fff7c7;
  color: var(--c-ink);
  box-shadow: 0 10px 20px rgba(139, 113, 28, 0.2);
}

.feature-tab.is-active span {
  color: #8a6612;
}

.class-tab {
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: left;
  font-weight: 900;
  transition: transform 160ms ease, background 160ms ease;
}

.class-tab:hover {
  transform: translateX(2px);
}

.class-tab span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #b7c8c0;
}

.class-tab.is-active {
  background: linear-gradient(180deg, #ffe08a, var(--sun));
  border-color: #ffe08a;
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(246, 201, 93, 0.22);
}

.class-tab.is-active span {
  color: #5a5134;
}

.board-main {
  min-width: 0;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 42%),
    linear-gradient(0deg, rgba(70, 162, 105, 0.12), rgba(70, 162, 105, 0) 28%);
}

.feature-content {
  display: grid;
  gap: 18px;
}

.feature-hero {
  min-height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 30px;
  border: 1px solid rgba(194, 222, 203, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 28px rgba(33, 80, 67, 0.1);
}

.feature-hero span {
  color: #168756;
  font-size: 16px;
  font-weight: 1000;
}

.feature-hero h2 {
  margin: 8px 0 10px;
  color: var(--c-ink);
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1.05;
}

.feature-hero p,
.feature-workbench p {
  margin: 0;
  color: #526b65;
  font-size: 17px;
  line-height: 1.6;
}

.feature-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-stats div,
.feature-workbench section {
  padding: 20px;
  border: 1px solid rgba(194, 222, 203, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(33, 80, 67, 0.09);
}

.feature-stats span {
  color: #5d726c;
  font-size: 14px;
  font-weight: 900;
}

.feature-stats strong {
  display: block;
  margin-top: 8px;
  color: #153b35;
  font-size: 28px;
  line-height: 1.15;
}

.feature-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 18px;
}

.feature-workbench h3 {
  margin: 0 0 14px;
  color: #153b35;
  font-size: 24px;
}

.feature-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.feature-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c8bb0, #1e6f90);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 10px 18px rgba(33, 80, 67, 0.13);
}

.student-manage-page {
  display: grid;
  gap: 16px;
}

.student-manage-head,
.student-manage-summary,
.student-manage-toolbar,
.student-manage-list {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 28px rgba(33, 80, 67, 0.1);
}

.student-manage-head {
  min-height: 150px;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.student-manage-head span,
.student-manage-toolbar span {
  color: #168756;
  font-weight: 1000;
}

.student-manage-head h2 {
  margin: 8px 0 10px;
  color: #153b35;
  font-size: clamp(42px, 4vw, 68px);
  line-height: 1;
}

.student-manage-head p {
  margin: 0;
  color: #526b65;
  font-size: 18px;
}

.student-manage-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.student-manage-actions button,
.student-sort-tabs button,
.student-manage-buttons button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(180deg, #2c8bb0, #1e6f90);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 8px 16px rgba(33, 80, 67, 0.12);
}

.student-manage-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.student-manage-summary div {
  padding: 20px 26px;
}

.student-manage-summary div + div {
  border-left: 1px solid rgba(31, 87, 67, 0.12);
}

.student-manage-summary span {
  color: #5d726c;
  font-size: 14px;
  font-weight: 1000;
}

.student-manage-summary strong {
  display: block;
  margin-top: 6px;
  color: #153b35;
  font-size: 34px;
  line-height: 1;
}

.student-manage-toolbar {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.student-manage-toolbar-main,
.student-manage-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.student-manage-toolbar-main {
  flex: 1 1 auto;
}

.student-manage-toolbar-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.student-sort-tabs {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.08);
}

.student-sort-tabs button {
  min-height: 34px;
  padding: 0 16px;
  background: transparent;
  color: #38645a;
  box-shadow: none;
}

.student-sort-tabs button.is-active {
  background: linear-gradient(180deg, #ffe88c, #ffd34f);
  color: #153b35;
  box-shadow: 0 8px 14px rgba(139, 113, 28, 0.16);
}

.student-manage-toolbar > strong {
  color: #168756;
  font-size: 18px;
}

.student-manage-toolbar-actions > strong {
  color: #168756;
  font-size: 18px;
  white-space: nowrap;
}

.student-delete-mode-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(180, 63, 42, 0.18);
  border-radius: 999px;
  background: #fff0ed;
  color: #b43f2a;
  box-shadow: 0 10px 22px rgba(180, 63, 42, 0.1);
}

.student-manage-add-button,
.student-manage-import-button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 22px rgba(25, 119, 139, 0.16);
}

.student-manage-add-button {
  background: linear-gradient(180deg, #168ab0, #0b7293);
}

.student-manage-import-button {
  background: linear-gradient(180deg, #1a8d75, #0d735f);
}

.student-delete-mode-button.is-active {
  background: linear-gradient(180deg, #ff8f78, #e75c42);
  color: #fff;
}

.student-manage-list {
  overflow: hidden;
}

.student-manage-row {
  min-height: 76px;
  display: grid;
  grid-template-columns: 58px minmax(220px, 1.2fr) minmax(80px, 0.4fr) minmax(92px, 0.45fr) minmax(180px, 1fr) minmax(90px, 0.35fr) minmax(160px, 0.6fr);
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
}

.student-manage-page.is-student-no-empty .student-manage-row {
  grid-template-columns: 58px minmax(220px, 1.25fr) minmax(42px, 0.16fr) minmax(92px, 0.48fr) minmax(190px, 1.08fr) minmax(90px, 0.35fr) minmax(160px, 0.62fr);
}

.student-manage-row + .student-manage-row {
  border-top: 1px solid rgba(31, 87, 67, 0.08);
}

.student-manage-row-head {
  min-height: 46px;
  color: #5d726c;
  background: rgba(245, 252, 247, 0.85);
  font-size: 13px;
  font-weight: 1000;
}

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

.student-manage-name img,
.student-manage-name .web-no-pet-avatar {
  width: 54px;
  height: 54px;
}

.student-manage-name img {
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(54, 86, 67, 0.16));
}

.student-manage-name strong,
.student-manage-name span {
  display: block;
}

.student-manage-name strong {
  color: #153b35;
  font-size: 22px;
  line-height: 1.1;
}

.student-manage-name span,
.student-manage-row > span {
  color: #5d726c;
  font-size: 15px;
  font-weight: 900;
}

.student-manage-row > strong {
  color: #168756;
  font-size: 30px;
}

.student-manage-bind-code {
  min-width: 0;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(32, 128, 91, 0.1);
  color: #153b35;
  font-family: inherit;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-manage-index {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.1);
  color: #153b35 !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
}

.student-manage-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.student-manage-buttons button {
  min-height: 34px;
  padding: 0 14px;
}

.student-manage-buttons button.is-danger {
  background: #fff0ed;
  color: #b43f2a;
  border-color: rgba(180, 63, 42, 0.22);
}

.point-log-page {
  display: grid;
  gap: 18px;
}

.point-log-head,
.point-log-summary,
.point-log-toolbar,
.point-log-list {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(40, 77, 62, 0.12);
}

.point-log-head {
  min-height: 132px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
}

.point-log-head span,
.point-log-toolbar label span {
  display: block;
  color: #54706a;
  font-size: 15px;
  font-weight: 1000;
}

.point-log-head h2 {
  margin: 5px 0 3px;
  color: #123d36;
  font-size: 44px;
  line-height: 1;
}

.point-log-head p {
  margin: 0;
  color: #526b65;
  font-size: 18px;
}

.point-log-head-actions,
.point-log-toolbar-actions,
.point-log-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
}

.point-log-head button,
.point-log-toolbar-actions button,
.point-log-row button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
}

.point-log-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.point-log-summary div {
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px 28px;
}

.point-log-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.12);
}

.point-log-summary span {
  color: #5b706b;
  font-size: 16px;
  font-weight: 900;
}

.point-log-summary strong {
  color: #123d36;
  font-size: 36px;
  line-height: 1;
}

.point-log-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px 22px;
}

.point-log-filter-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.point-log-filter-row .point-log-tabs,
.point-log-filter-row .point-log-toolbar-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.point-log-filter-row .point-log-toolbar-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.point-log-tabs button {
  min-height: 42px;
  border: 1px solid rgba(20, 90, 76, 0.12);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(227, 245, 237, 0.82);
  color: #18584d;
  font-weight: 1000;
}

.point-log-tabs button.is-active {
  border-color: transparent;
  background: #ffd759;
  color: #133f37;
}

.point-log-toolbar label {
  display: grid;
  gap: 6px;
  justify-self: stretch;
  width: 100%;
}

.point-log-toolbar input {
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(24, 69, 59, 0.16);
  border-radius: 16px;
  padding: 0 16px;
  background: #fff;
  color: #123d36;
  font: inherit;
}

.point-log-list {
  padding: 8px 22px 18px;
}

.point-log-row {
  display: grid;
  grid-template-columns: 150px minmax(100px, 0.8fr) minmax(170px, 1.3fr) 90px 90px 92px;
  gap: 12px;
  min-height: 68px;
  align-items: center;
  border-bottom: 1px solid rgba(29, 77, 65, 0.09);
  color: #153b35;
  font-size: 17px;
}

.point-log-row:last-child {
  border-bottom: 0;
}

.point-log-row-head {
  min-height: 56px;
  color: #637873;
  font-size: 15px;
  font-weight: 1000;
}

.point-log-row strong {
  font-size: 19px;
}

.point-log-row em {
  font-size: 22px;
  font-style: normal;
  font-weight: 1000;
}

.point-log-row button {
  min-height: 36px;
  padding: 0 16px;
  background: linear-gradient(180deg, #c76168, #af414b);
}

.point-log-page .is-positive {
  color: #148a57;
}

.point-log-page .is-negative {
  color: #c44653;
}

.honor-page {
  display: grid;
  gap: 16px;
}

.honor-head,
.honor-summary,
.honor-toolbar,
.honor-podium,
.honor-list {
  border: 1px solid rgba(48, 94, 77, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(40, 77, 62, 0.1);
}

.honor-head {
  min-height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}

.honor-head span {
  display: block;
  color: #54706a;
  font-weight: 1000;
}

.honor-head h2 {
  margin: 5px 0 4px;
  color: #123d36;
  font-size: 38px;
  line-height: 1.05;
}

.honor-head p {
  margin: 0;
  color: #526b65;
  font-size: 17px;
  font-weight: 800;
}

.honor-head-actions,
.honor-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
}

.honor-head button,
.honor-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 1000;
}

.honor-head button {
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
}

.honor-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.honor-summary div {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px 22px;
}

.honor-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.1);
}

.honor-summary span,
.honor-toolbar strong {
  color: #5b706b;
  font-size: 15px;
  font-weight: 1000;
}

.honor-summary strong {
  color: #123d36;
  font-size: 32px;
  line-height: 1;
}

.honor-toolbar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.honor-toolbar-right,
.honor-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.honor-toolbar-right {
  min-width: 0;
  justify-content: flex-end;
}

.honor-toolbar-right > strong {
  white-space: nowrap;
}

.honor-toolbar-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
}

.honor-tabs button {
  border: 1px solid rgba(20, 90, 76, 0.12);
  background: rgba(227, 245, 237, 0.82);
  color: #18584d;
}

.honor-tabs button.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #ffdf70, #ffc93d);
  color: #123d36;
  box-shadow: inset 0 3px 7px rgba(113, 83, 12, 0.22);
}

.honor-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 14px;
}

.honor-podium .honor-leader-card {
  max-width: none;
}

.honor-podium-card {
  min-height: 156px;
  position: relative;
  display: grid;
  grid-template-areas:
    "rank avatar points"
    "rank info info";
  grid-template-columns: 58px 92px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(44, 92, 76, 0.1);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(248, 253, 250, 0.98), rgba(234, 248, 239, 0.95));
}

.honor-podium-card.rank-1 {
  min-height: 184px;
  background: linear-gradient(180deg, rgba(255, 236, 150, 0.96), rgba(255, 250, 230, 0.96));
  box-shadow: 0 14px 26px rgba(145, 109, 18, 0.13);
}

.honor-podium-card img,
.honor-podium-card .web-no-pet-avatar {
  grid-area: avatar;
  width: 92px;
  height: 92px;
}

.honor-podium-card img {
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(45, 76, 59, 0.2));
}

.honor-podium-card strong,
.honor-row strong {
  color: #123d36;
  font-weight: 1000;
}

.honor-podium-card strong {
  display: block;
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-podium-card > div:not(.honor-rank-badge) {
  grid-area: info;
  min-width: 0;
  align-self: start;
}

.honor-podium-card span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #5b706b;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-podium-card em {
  grid-area: points;
  justify-self: end;
  color: #168756;
  font-size: clamp(28px, 3vw, 34px);
  font-style: normal;
  font-weight: 1000;
}

.honor-rank-badge {
  grid-area: rank;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffdc63;
  color: #123d36;
  font-size: 28px;
  font-weight: 1000;
  box-shadow: inset 0 -4px 0 rgba(134, 96, 18, 0.12);
}

.honor-list {
  padding: 6px 16px 14px;
}

.honor-row {
  min-height: 60px;
  display: grid;
  grid-template-columns: 74px minmax(160px, 1.1fr) minmax(150px, 0.9fr) 110px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(29, 77, 65, 0.08);
  color: #153b35;
  font-size: 17px;
}

.honor-row:last-child {
  border-bottom: 0;
}

.honor-row-head {
  min-height: 46px;
  color: #637873;
  font-size: 15px;
  font-weight: 1000;
}

.honor-row b {
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #edf7f0;
  color: #17614c;
}

.honor-row strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-row img,
.honor-row .web-no-pet-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.honor-row img {
  object-fit: contain;
}

.honor-row em {
  color: #168756;
  font-size: 24px;
  font-style: normal;
  font-weight: 1000;
}

.vip-page {
  display: grid;
  gap: 16px;
}

.vip-hero-panel,
.vip-cdk-box,
.vip-poster-card,
.vip-usage-grid,
.vip-plan-grid,
.vip-compare-panel,
.vip-note-band {
  border: 1px solid rgba(48, 94, 77, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(40, 77, 62, 0.1);
}

.vip-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.vip-poster-card {
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #f5f7dd, #fff7df);
}

.vip-poster-img {
  width: min(720px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.vip-poster-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: #19493e;
  text-align: center;
}

.vip-poster-fallback strong {
  font-size: 30px;
  font-weight: 1000;
}

.vip-poster-fallback span {
  color: #5c746b;
  font-weight: 900;
}

.vip-overview {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: transparent;
}

.vip-overview > span {
  color: #7a5a18;
  font-weight: 1000;
}

.vip-overview h2 {
  margin: 0;
  color: #123d36;
  font-size: 36px;
  line-height: 1.05;
}

.vip-overview p {
  margin: 0;
  color: #526b65;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
}

.vip-price-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vip-price-row article,
.vip-plan-card {
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.vip-price-row article.is-highlight,
.vip-plan-card.is-vip {
  border-color: rgba(222, 161, 30, 0.28);
  background: linear-gradient(180deg, rgba(255, 231, 132, 0.72), rgba(255, 250, 230, 0.9));
}

.vip-price-row span,
.vip-plan-card span,
.vip-usage-grid span,
.vip-compare-head span {
  display: block;
  color: #5b706b;
  font-size: 15px;
  font-weight: 1000;
}

.vip-price-row strong {
  color: #123d36;
  font-size: 34px;
  line-height: 1;
}

.vip-price-row em {
  color: #8a5d15;
  font-style: normal;
  font-weight: 1000;
}

.vip-price-row button {
  min-height: 40px;
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #176f52, #0f5b43);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(20, 91, 67, 0.16);
}

.vip-price-row .is-highlight button {
  background: linear-gradient(180deg, #d8901f, #b86d12);
  box-shadow: 0 9px 18px rgba(156, 94, 10, 0.18);
}

.vip-cdk-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px 16px;
}

.vip-cdk-box label {
  display: grid;
  gap: 6px;
}

.vip-cdk-box label span {
  color: #54706a;
  font-weight: 1000;
}

.vip-cdk-box input {
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(24, 69, 59, 0.16);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: #123d36;
  font: inherit;
}

.vip-cdk-box button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
}

.vip-usage-grid,
.vip-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.vip-usage-grid div {
  min-height: 98px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 16px;
  background: rgba(246, 252, 248, 0.92);
}

.vip-usage-grid strong {
  color: #123d36;
  font-size: 28px;
}

.vip-usage-grid i {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(39, 98, 76, 0.12);
}

.vip-usage-grid i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #33a36f, #ffd04b);
}

.vip-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vip-plan-card {
  min-height: 138px;
  display: grid;
  gap: 10px;
}

.vip-plan-card strong {
  display: block;
  margin-top: 4px;
  color: #123d36;
  font-size: 26px;
}

.vip-plan-card b {
  color: #17614c;
  font-size: 28px;
}

.vip-plan-card p {
  margin: 0;
  color: #526b65;
  font-weight: 900;
  line-height: 1.45;
}

.vip-compare-panel {
  padding: 14px 16px 18px;
}

.vip-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.vip-compare-head strong {
  color: #123d36;
  font-size: 22px;
}

.vip-compare-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(29, 77, 65, 0.09);
  border-radius: 8px;
}

.vip-compare-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.45fr) minmax(130px, 0.45fr);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(29, 77, 65, 0.08);
  color: #153b35;
}

.vip-compare-row:last-child {
  border-bottom: 0;
}

.vip-compare-title {
  min-height: 44px;
  background: rgba(237, 247, 240, 0.9);
  color: #637873;
  font-size: 15px;
  font-weight: 1000;
}

.vip-compare-row strong {
  font-size: 18px;
}

.vip-compare-row span {
  font-weight: 1000;
}

.vip-compare-row .is-ok {
  color: #168756;
}

.vip-compare-row .is-no {
  color: #c44653;
}

.vip-note-band {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 12px 16px;
  color: #6b4713;
  font-size: 20px;
  font-weight: 1000;
  background: linear-gradient(90deg, rgba(255, 238, 176, 0.9), rgba(255, 251, 232, 0.92));
}

.export-page {
  display: grid;
  gap: 16px;
}

.export-head,
.export-card-grid,
.export-import-panel {
  border: 1px solid rgba(48, 94, 77, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(40, 77, 62, 0.1);
}

.export-head {
  min-height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}

.export-head span,
.export-import-head span,
.export-import-grid label span {
  display: block;
  color: #54706a;
  font-weight: 1000;
}

.export-head h2 {
  margin: 5px 0 4px;
  color: #123d36;
  font-size: 38px;
  line-height: 1.05;
}

.export-head p {
  margin: 0;
  color: #526b65;
  font-size: 17px;
  font-weight: 900;
}

.export-head > strong {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 12px 14px;
  background: #edf7f0;
  color: #17614c;
  font-size: 18px;
}

.export-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.export-card-grid button {
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(247, 253, 249, 0.98), rgba(235, 249, 240, 0.92));
  color: #123d36;
  text-align: left;
  box-shadow: 0 10px 20px rgba(40, 77, 62, 0.08);
}

.export-card-grid button:hover {
  border-color: rgba(37, 126, 89, 0.26);
  background: linear-gradient(180deg, rgba(255, 241, 172, 0.88), rgba(246, 253, 248, 0.96));
}

.export-card-grid span {
  color: #6f7f78;
  font-size: 14px;
  font-weight: 1000;
}

.export-card-grid strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.15;
}

.export-card-grid em {
  color: #5f756d;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
}

.export-import-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.export-import-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.export-import-head h3 {
  margin: 4px 0 0;
  color: #123d36;
  font-size: 28px;
}

.export-import-head strong {
  color: #17614c;
  font-size: 15px;
}

.export-import-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
}

.export-import-grid label {
  display: grid;
  gap: 7px;
  align-content: start;
}

.export-import-grid input,
.export-import-grid textarea {
  width: 100%;
  border: 1px solid rgba(24, 69, 59, 0.16);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  color: #123d36;
  font: inherit;
}

.export-import-grid input {
  min-height: 48px;
}

.export-import-grid textarea {
  min-height: 150px;
  resize: vertical;
}

.export-import-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.export-import-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 20px;
  background: linear-gradient(180deg, #176f52, #0f5b43);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(20, 91, 67, 0.16);
}

.export-import-actions p {
  margin: 0;
  color: #5f756d;
  font-weight: 900;
}

.settings-page {
  display: grid;
  gap: 16px;
}

.settings-head,
.settings-summary,
.settings-panel,
.settings-note {
  border: 1px solid rgba(48, 94, 77, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(40, 77, 62, 0.1);
}

.settings-head {
  min-height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}

.settings-head span,
.settings-summary span,
.settings-panel-head span,
.settings-panel label span {
  display: block;
  color: #54706a;
  font-weight: 1000;
}

.settings-head h2 {
  margin: 5px 0 4px;
  color: #123d36;
  font-size: 38px;
  line-height: 1.05;
}

.settings-head p {
  margin: 0;
  color: #526b65;
  font-size: 17px;
  font-weight: 900;
}

.settings-head > strong {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 12px 14px;
  background: #edf7f0;
  color: #17614c;
  font-size: 18px;
}

.settings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.settings-quota-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-summary div {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px 22px;
}

.settings-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.1);
}

.settings-summary strong {
  overflow-wrap: anywhere;
  color: #123d36;
  font-size: 30px;
  line-height: 1;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.settings-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.settings-panel-head h3 {
  margin: 4px 0 0;
  color: #123d36;
  font-size: 28px;
}

.settings-panel label {
  display: grid;
  gap: 7px;
}

.settings-panel input {
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(24, 69, 59, 0.16);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: #123d36;
  font: inherit;
}

.settings-panel > button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #176f52, #0f5b43);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(20, 91, 67, 0.16);
}

.settings-action-list {
  display: grid;
  gap: 10px;
}

.settings-action-list button {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(246, 252, 248, 0.92);
  color: #123d36;
  text-align: left;
}

.settings-action-list button:hover {
  border-color: rgba(37, 126, 89, 0.26);
  background: rgba(255, 241, 172, 0.58);
}

.settings-action-list button strong {
  font-size: 18px;
}

.settings-action-list button span {
  color: #5f756d;
  font-weight: 900;
}

.settings-action-list button.is-danger {
  border-color: rgba(196, 70, 83, 0.18);
  background: rgba(255, 243, 244, 0.88);
}

.settings-action-list button.is-danger strong {
  color: #b83f4a;
}

.settings-note {
  min-height: 56px;
  display: grid;
  align-items: center;
  padding: 12px 16px;
  color: #5f756d;
  font-weight: 1000;
}

.settings-page-v2 {
  gap: 8px;
}

.settings-account-hero {
  min-height: 54px;
  padding: 6px 12px;
}

.settings-hero-main,
.settings-panel-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-hero-main > div,
.settings-panel-title > div {
  min-width: 0;
}

.settings-account-hero h2 {
  margin-top: 2px;
  font-size: clamp(24px, 2.5vw, 32px);
}

.settings-account-hero p {
  font-size: 13px;
}

.settings-hero-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-hero-actions strong,
.settings-hero-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  white-space: nowrap;
}

.settings-hero-actions button {
  border: 1px solid rgba(37, 126, 89, 0.18);
  padding: 0 14px;
  background: #f4fbf6;
  color: #12513f;
  font-weight: 1000;
}

.settings-hero-actions button:first-of-type {
  border-color: rgba(227, 178, 28, 0.28);
  background: linear-gradient(180deg, #ffe981, #ffd65d);
  color: #175039;
}

.settings-icon,
.settings-mini-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
}

.settings-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(180deg, #73dc99, #2bb875);
  color: #fff;
  box-shadow: 0 12px 20px rgba(27, 128, 86, 0.18);
}

.settings-icon-crown {
  background: linear-gradient(180deg, #ffe47a, #f2b92f);
  color: #6d4300;
}

.settings-icon-key {
  background: linear-gradient(180deg, #66cfca, #219b9b);
}

.settings-icon-data {
  background: linear-gradient(180deg, #7bc7ff, #2e92c8);
}

.settings-mini-icon {
  width: 22px;
  height: 22px;
  background: rgba(33, 142, 95, 0.12);
  color: #126045;
  font-size: 12px;
}

.settings-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1.18fr) minmax(340px, 0.82fr);
  gap: 10px;
  align-items: start;
}

.settings-form-stack,
.settings-side-stack {
  display: grid;
  gap: 8px;
}

.settings-form-panel {
  gap: 6px;
  padding: 10px;
}

.settings-panel-title h3 {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.05;
}

.settings-panel label {
  gap: 4px;
  font-size: 13px;
}

.settings-page-v2 .settings-panel input {
  min-height: 34px;
  font-size: 14px;
}

.settings-form-stack .settings-form-panel:nth-child(2) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.settings-form-stack .settings-form-panel:nth-child(2) .settings-panel-title,
.settings-form-stack .settings-form-panel:nth-child(2) .settings-button-row {
  grid-column: 1 / -1;
}

.settings-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-button-row button:only-child {
  grid-column: 1 / -1;
}

.settings-button-row [data-settings-action="nicknameReset"],
.settings-button-row [data-settings-action="passwordClear"] {
  display: none !important;
}

.settings-button-row button,
.settings-cdk-row button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(180deg, #176f52, #0f5b43);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(20, 91, 67, 0.14);
}

.settings-button-row button.is-plain {
  border: 1px solid rgba(37, 126, 89, 0.18);
  background: #f3faf5;
  color: #155a45;
  box-shadow: none;
}

.settings-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-vip-panel {
  grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1fr);
  align-items: end;
}

.settings-vip-panel .settings-panel-title {
  grid-column: 1 / -1;
}

.settings-price-grid button {
  min-height: 46px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 7px;
  border: 1px solid rgba(37, 126, 89, 0.16);
  border-radius: 8px;
  padding: 7px 10px;
  background: #f7fcf8;
  color: #123d36;
  text-align: left;
}

.settings-price-grid button.is-highlight {
  border-color: rgba(227, 178, 28, 0.35);
  background: linear-gradient(180deg, #fff4bf, #ffe47a);
}

.settings-price-grid span,
.settings-price-grid em {
  color: #58736b;
  font-weight: 1000;
  font-style: normal;
}

.settings-price-grid strong {
  font-size: 20px;
  line-height: 1;
}

.settings-cdk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 8px;
  align-items: end;
}

.settings-pay-note {
  grid-column: 1 / -1;
  color: #60756f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.settings-pay-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-pay-links button {
  min-height: 30px;
  border: 1px solid rgba(37, 126, 89, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  background: #f3faf5;
  color: #155a45;
  font-weight: 1000;
}

.settings-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-status-grid div:nth-child(2) {
  border-left: 1px solid rgba(29, 77, 65, 0.1);
}

.settings-status-grid div,
.settings-quota-cards div {
  min-height: 54px;
  gap: 6px;
  padding: 9px 12px;
}

.settings-status-grid div + div,
.settings-quota-cards div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.1);
}

.settings-status-grid span,
.settings-quota-cards span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.settings-status-grid strong,
.settings-quota-cards strong {
  font-size: 18px;
  line-height: 1.08;
}

.settings-quota-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-progress {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dcebe2;
}

.settings-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #2cb978, #ffd84f);
}

.settings-side-actions {
  padding: 10px;
}

.settings-action-list-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.settings-action-list-v2 button {
  min-height: 42px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 9px;
  padding: 7px 9px;
}

.settings-action-list-v2 button .settings-mini-icon {
  grid-row: 1 / span 2;
}

.settings-action-list-v2 button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-action-list-v2 button span:not(.settings-mini-icon) {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page-v2 .settings-note {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 13px;
}

.template-manage-page {
  display: grid;
  gap: 18px;
}

.template-manage-summary,
.template-manage-panel {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(40, 77, 62, 0.12);
}

.template-panel-head button,
.template-manage-item button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
}

.template-manage-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.template-manage-summary div {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px 28px;
}

.template-manage-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.12);
}

.template-manage-summary span {
  color: #5b706b;
  font-size: 16px;
  font-weight: 900;
}

.template-manage-summary strong {
  color: #123d36;
  font-size: 36px;
  line-height: 1;
}

.template-manage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.template-manage-panel {
  min-height: 420px;
  padding: 22px;
}

.template-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.template-panel-head h3 {
  margin: 0;
  color: #123d36;
  font-size: 28px;
}

.template-manage-list {
  display: grid;
  gap: 11px;
}

.template-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(100px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 12px;
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 18px;
  background: rgba(244, 251, 247, 0.92);
}

.template-create-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.template-create-form label span {
  color: #5b706b;
  font-size: 13px;
  font-weight: 1000;
}

.template-create-form input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(24, 69, 59, 0.14);
  border-radius: 14px;
  padding: 0 12px;
  background: #fff;
  color: #123d36;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  outline: none;
}

.template-create-form input:focus {
  border-color: rgba(32, 128, 91, 0.38);
  box-shadow: 0 0 0 4px rgba(32, 128, 91, 0.09);
}

.template-create-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.template-create-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
  white-space: nowrap;
}

.template-create-actions button[data-template-cancel] {
  background: rgba(216, 231, 226, 0.92);
  color: #31564e;
  box-shadow: none;
}

.template-manage-item {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 18px;
  padding: 12px 14px 12px 18px;
  background: rgba(244, 251, 247, 0.9);
}

.template-manage-item div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.template-manage-item strong {
  color: #153b35;
  font-size: 21px;
  overflow-wrap: anywhere;
}

.template-manage-item span {
  font-size: 24px;
  font-weight: 1000;
}

.template-manage-item button {
  min-height: 36px;
  padding: 0 16px;
  background: linear-gradient(180deg, #c76168, #af414b);
}

.template-manage-page .is-positive {
  color: #148a57;
}

.template-manage-page .is-negative {
  color: #c44653;
}

.team-manage-page {
  display: grid;
  gap: 18px;
}

.team-manage-head,
.team-manage-summary,
.team-manage-panel,
.team-log-panel {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(40, 77, 62, 0.12);
}

.team-manage-head {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 28px;
}

.team-manage-head span {
  display: block;
  color: #54706a;
  font-size: 15px;
  font-weight: 1000;
}

.team-manage-head h2 {
  margin: 5px 0 3px;
  color: #123d36;
  font-size: 44px;
  line-height: 1;
}

.team-manage-head p {
  margin: 0;
  color: #526b65;
  font-size: 18px;
}

.team-head-actions,
.team-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}

.team-head-actions button,
.team-panel-head button,
.team-card-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
}

.team-head-actions button:last-child,
.team-card-actions .is-danger {
  background: linear-gradient(180deg, #ca626a, #af414b);
}

.team-manage-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.team-create-panel {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(40, 77, 62, 0.11);
}

.team-create-panel div,
.team-create-panel label {
  min-width: 0;
}

.team-create-panel strong,
.team-create-panel span {
  display: block;
}

.team-create-panel strong {
  color: #153b35;
  font-size: 22px;
  line-height: 1.15;
}

.team-create-panel div span,
.team-create-panel label span {
  margin-top: 4px;
  color: #5d726c;
  font-size: 13px;
  font-weight: 900;
}

.team-create-panel input {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  border: 1px solid rgba(32, 128, 91, 0.22);
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(245, 252, 248, 0.9);
  color: #153b35;
  font-size: 16px;
  font-weight: 900;
  outline: 0;
}

.team-create-panel input:focus {
  border-color: rgba(22, 135, 86, 0.5);
  box-shadow: 0 0 0 3px rgba(22, 135, 86, 0.12);
}

.team-create-panel button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(180deg, #39a873, #168756);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(22, 135, 86, 0.15);
}

.team-create-panel button:last-child {
  background: rgba(83, 105, 99, 0.12);
  color: #536963;
  box-shadow: none;
}

.team-create-modal-backdrop {
  align-items: center;
  justify-items: center;
  background: rgba(12, 42, 32, 0.42);
}

.team-create-dialog {
  width: min(760px, calc(100vw - 48px));
  height: min(680px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  overscroll-behavior: contain;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 16px;
  border: 1px solid rgba(29, 77, 65, 0.13);
  border-radius: 8px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 247, 0.98)),
    #fff;
  box-shadow: 0 26px 80px rgba(18, 61, 54, 0.22);
}

.team-create-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  background: rgba(29, 77, 65, 0.08);
  color: #153b35;
  font-size: 22px;
  font-weight: 1000;
}

.team-create-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 42px;
}

.team-create-dialog-head span,
.team-create-name-field span,
.team-create-member-head span {
  color: #168756;
  font-size: 14px;
  font-weight: 1000;
}

.team-create-dialog-head h2 {
  margin: 2px 0 4px;
  color: #123d36;
  font-size: 32px;
  line-height: 1.08;
}

.team-create-dialog-head p {
  margin: 0;
  color: #61746f;
  font-size: 15px;
  font-weight: 900;
}

.team-create-dialog-head strong {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(32, 128, 91, 0.1);
  color: #126944;
  font-size: 15px;
}

.team-create-name-field {
  display: grid;
  gap: 8px;
}

.team-create-name-field input {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(32, 128, 91, 0.24);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(247, 253, 249, 0.96);
  color: #153b35;
  font-size: 17px;
  font-weight: 1000;
  outline: 0;
}

.team-create-name-field input:focus {
  border-color: rgba(22, 135, 86, 0.52);
  box-shadow: 0 0 0 3px rgba(22, 135, 86, 0.12);
}

.team-create-status {
  min-height: 20px;
  color: #bd4050;
  font-size: 14px;
  font-style: normal;
  font-weight: 1000;
}

.team-create-status.is-loading {
  color: #168756;
}

.team-create-member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-create-member-head div,
.team-create-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.team-create-member-head button,
.team-create-dialog-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(32, 128, 91, 0.1);
  color: #126944;
  font-size: 15px;
  font-weight: 1000;
}

.team-create-dialog-actions button:last-child {
  background: linear-gradient(180deg, #28a06b, #147f52);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 128, 82, 0.18);
}

.team-create-dialog button:disabled,
.team-create-dialog input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.team-create-member-list {
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 6px;
}

.team-create-member-item {
  min-height: 74px;
  display: grid;
  grid-template-columns: 24px 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(29, 77, 65, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.team-create-member-item.is-checked {
  border-color: rgba(22, 135, 86, 0.38);
  background: rgba(232, 249, 239, 0.88);
}

.team-create-member-item input {
  width: 18px;
  height: 18px;
  accent-color: #168756;
}

.team-create-member-item .web-student-pet-wrap {
  width: 52px;
  height: 52px;
}

.team-create-member-item span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.team-create-member-item strong {
  color: #123d36;
  font-size: 18px;
}

.team-create-member-item em {
  overflow: hidden;
  color: #61746f;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-create-member-item b {
  max-width: 220px;
  overflow: hidden;
  justify-self: end;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(32, 128, 91, 0.1);
  color: #168756;
  font-size: 13px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-create-member-item b.is-empty {
  background: rgba(83, 105, 99, 0.09);
  color: #6f817c;
}

.team-manage-summary div {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px 28px;
}

.team-manage-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.12);
}

.team-manage-summary span,
.team-member-row span {
  color: #5b706b;
  font-size: 16px;
  font-weight: 900;
}

.team-manage-summary strong {
  color: #123d36;
  font-size: 36px;
  line-height: 1;
}

.team-manage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 18px;
}

.team-manage-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.team-manage-panel,
.team-log-panel {
  min-width: 0;
  padding: 22px;
}

.team-panel-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.team-panel-head > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.team-panel-head-with-actions {
  align-items: flex-start;
}

.team-panel-head-with-actions .team-head-actions {
  flex: 0 0 auto;
}

.team-panel-head h3 {
  margin: 0;
  color: #123d36;
  font-size: 28px;
}

.team-panel-head em {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(32, 128, 91, 0.1);
  color: #168756;
  font-style: normal;
  font-weight: 1000;
}

.team-card-list,
.team-member-list,
.team-log-list {
  display: grid;
  gap: 12px;
}

.team-card-list-portrait {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.team-member-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -3px 0 14px;
  border-radius: 18px;
  padding: 8px 12px;
  background: rgba(32, 128, 91, 0.06);
}

.team-member-toolbar > span {
  color: #168756;
  font-weight: 1000;
}

.team-member-toolbar .student-sort-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-left: 0;
}

.team-member-toolbar .student-sort-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 0 clamp(8px, 1vw, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1;
}

.team-card {
  width: 100%;
  min-width: 0;
  min-height: 242px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 20px;
  padding: 16px;
  background: rgba(244, 251, 247, 0.9);
}

.team-card.is-selected {
  border-color: rgba(27, 140, 89, 0.42);
  background: linear-gradient(135deg, rgba(255, 246, 198, 0.92), rgba(238, 252, 244, 0.94));
}

.team-card.is-members-expanded {
  border-color: rgba(27, 140, 89, 0.5);
  box-shadow: 0 12px 28px rgba(35, 92, 70, 0.12);
}

.team-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 116px;
  margin-bottom: 12px;
  text-align: center;
}

.team-card-main i {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: color-mix(in srgb, var(--team-color) 84%, #fff);
  color: #fff;
  font-size: 29px;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 2px 5px rgba(21, 59, 53, 0.18);
}

.team-card-main strong,
.team-card-main span {
  display: block;
}

.team-card-main strong {
  color: #153b35;
  font-size: 24px;
  line-height: 1.1;
}

.team-card-main span {
  margin-top: 4px;
  color: #5d726c;
  font-weight: 900;
}

.team-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  border-top: 1px solid rgba(24, 69, 59, 0.08);
  padding-top: 12px;
}

.team-card-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.team-card-actions button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card-actions .team-members-toggle.is-active,
.team-card-actions .team-member-adjust-toggle.is-active {
  background: linear-gradient(180deg, #168f68, #107556);
}

.team-adjust-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 69, 59, 0.1);
}

.team-adjust-panel strong {
  grid-column: 1 / -1;
  color: #153b35;
  font-size: 16px;
  font-weight: 1000;
}

.team-adjust-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #153b35;
  font-size: 15px;
  font-weight: 1000;
}

.team-adjust-panel input {
  width: 150px;
  height: 38px;
  border: 1px solid rgba(32, 128, 91, 0.24);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #153b35;
  font-size: 16px;
  font-weight: 900;
  outline: 0;
}

.team-adjust-panel input:focus {
  border-color: rgba(22, 135, 86, 0.52);
  box-shadow: 0 0 0 3px rgba(22, 135, 86, 0.12);
}

.team-adjust-panel button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
}

.team-adjust-panel button[data-team-adjust-cancel] {
  background: rgba(83, 105, 99, 0.12);
  color: #536963;
}

.team-adjust-panel button:disabled,
.team-adjust-panel input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.team-adjust-status {
  color: #bd4050;
  font-size: 14px;
  font-style: normal;
  font-weight: 1000;
}

.team-adjust-status.is-loading {
  color: #168756;
}

.team-member-row {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 18px;
  padding: 10px 14px;
  background: rgba(245, 252, 248, 0.86);
}

.team-member-row-multi {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}

.team-member-row div {
  display: grid;
  grid-template-columns: clamp(42px, 4vw, 58px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
}

.team-member-row img {
  width: clamp(42px, 4vw, 56px);
  height: clamp(42px, 4vw, 56px);
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(54, 86, 67, 0.16));
}

.team-member-row .web-student-pet-wrap {
  width: clamp(42px, 4vw, 56px);
  height: clamp(42px, 4vw, 56px);
}

.team-member-row strong {
  color: #153b35;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.team-check-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.team-member-row .team-check-list {
  display: flex;
  grid-template-columns: none;
}

.team-check-chip {
  min-height: 38px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(24, 69, 59, 0.14);
  border-radius: 999px;
  padding: 0 clamp(8px, 1vw, 12px);
  background: #fff;
  color: #536963;
  font-size: clamp(12px, 1.02vw, 14px);
  font-weight: 1000;
  cursor: pointer;
}

.team-check-chip input {
  width: clamp(13px, 1.1vw, 15px);
  height: clamp(13px, 1.1vw, 15px);
  accent-color: #168756;
}

.team-check-chip.is-checked {
  border-color: rgba(22, 135, 86, 0.38);
  background: rgba(32, 128, 91, 0.1);
  color: #126944;
}

.team-empty-tip {
  color: #6f817c;
  font-size: 14px;
  font-weight: 900;
}

@media (max-width: 1280px) {
  .team-manage-grid {
    grid-template-columns: 1fr;
  }

  .team-panel-head-with-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .team-panel-head-with-actions .team-head-actions {
    justify-content: flex-start;
  }

  .task-panel-head-with-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .task-panel-head-with-actions .task-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .team-create-panel {
    grid-template-columns: 1fr;
  }

  .team-create-panel button {
    width: 100%;
  }

  .team-create-dialog {
    width: min(100%, calc(100vw - 24px));
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    gap: 12px;
    padding: 16px;
  }

  .team-create-dialog-head {
    flex-direction: column;
    padding-right: 40px;
  }

  .team-create-dialog-head h2 {
    font-size: 26px;
  }

  .team-create-member-item {
    min-height: 66px;
    grid-template-columns: 22px 46px minmax(0, 1fr);
  }

  .team-create-member-item .web-student-pet-wrap {
    width: 44px;
    height: 44px;
  }

  .team-create-member-item b {
    grid-column: 3 / 4;
    justify-self: start;
    max-width: 100%;
  }

  .team-member-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .team-member-row,
  .team-member-row-multi {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .team-check-list,
  .team-member-row .team-check-list {
    justify-content: flex-start;
  }
}

.team-log-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 150px 90px minmax(170px, 1fr) minmax(100px, 0.45fr);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(29, 77, 65, 0.09);
  color: #153b35;
  font-size: 17px;
}

.team-log-row:last-child {
  border-bottom: 0;
}

.team-log-row-head {
  min-height: 46px;
  color: #637873;
  font-size: 15px;
  font-weight: 1000;
}

.team-log-row strong {
  font-size: 24px;
}

.team-manage-page .is-positive {
  color: #148a57;
}

.team-manage-page .is-negative {
  color: #c44653;
}

.task-manage-page {
  display: grid;
  gap: 18px;
}

.task-manage-head,
.task-manage-summary,
.task-create-panel,
.task-list-panel,
.task-log-panel {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(40, 77, 62, 0.12);
}

.task-manage-head {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
}

.task-manage-head span,
.task-create-panel label span {
  display: block;
  color: #54706a;
  font-size: 15px;
  font-weight: 1000;
}

.task-manage-head h2 {
  margin: 5px 0 3px;
  color: #123d36;
  font-size: 44px;
  line-height: 1;
}

.task-manage-head p {
  margin: 0;
  color: #526b65;
  font-size: 18px;
}

.task-head-actions button,
.task-create-panel > button,
.task-card-title-row button,
.task-panel-head button,
.task-progress-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 9px 18px rgba(22, 72, 87, 0.14);
}

.task-manage-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.task-manage-summary div {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px 28px;
}

.task-manage-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.12);
}

.task-manage-summary span {
  color: #5b706b;
  font-size: 16px;
  font-weight: 900;
}

.task-manage-summary strong {
  color: #123d36;
  font-size: 36px;
  line-height: 1;
}

.task-manage-grid {
  display: grid;
  grid-template-columns: minmax(300px, clamp(320px, 36%, 440px)) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.task-create-panel,
.task-list-panel,
.task-log-panel {
  padding: 22px;
}

.task-panel-head,
.task-card-title-row,
.task-team-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-panel-head {
  min-height: 42px;
  margin-bottom: 16px;
}

.task-panel-head > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.task-panel-head-with-actions {
  align-items: flex-start;
}

.task-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.task-panel-head h3 {
  margin: 0;
  color: #123d36;
  font-size: 28px;
}

.task-panel-head em,
.task-team-line em {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(32, 128, 91, 0.1);
  color: #168756;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
}

.task-create-panel,
.task-create-panel label,
.task-card-list,
.task-team-progress-list,
.task-log-list {
  display: grid;
  gap: 12px;
}

.task-create-panel {
  align-self: start;
  align-content: start;
}

.task-create-panel input {
  min-height: 50px;
  width: 100%;
  border: 1px solid rgba(24, 69, 59, 0.16);
  border-radius: 16px;
  padding: 0 15px;
  background: #fff;
  color: #153b35;
  font: inherit;
  font-weight: 900;
}

.task-create-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-mode-panel {
  display: grid;
  gap: 9px;
}

.task-mode-panel > strong {
  color: #153b35;
  font-size: 18px;
}

.task-mode-panel > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-radius: 18px;
  padding: 6px;
  background: rgba(32, 128, 91, 0.09);
}

.task-mode-panel label {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  color: #536963;
  font-weight: 1000;
}

.task-mode-panel label.is-active {
  background: linear-gradient(180deg, #ffdf62, #ffd447);
  color: #125342;
  box-shadow: 0 8px 18px rgba(159, 126, 18, 0.12);
}

.task-mode-panel input {
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  accent-color: #168756;
}

.task-allowed-panel {
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 18px;
  padding: 14px;
  background: rgba(245, 252, 248, 0.86);
}

.task-allowed-panel > strong,
.task-allowed-panel > span {
  display: block;
}

.task-allowed-panel > strong {
  color: #153b35;
  font-size: 18px;
}

.task-allowed-panel > span {
  margin: 4px 0 12px;
  color: #5d726c;
  font-weight: 900;
}

.task-allowed-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-allowed-panel label {
  min-height: 38px;
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255, 221, 102, 0.6);
  color: #153b35;
}

.task-allowed-panel input {
  min-height: 0;
  width: 16px;
  height: 16px;
  padding: 0;
}

.task-allowed-panel.is-personal-mode > div {
  display: block;
}

.task-card-item {
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 22px;
  padding: 16px;
  background: rgba(245, 252, 248, 0.88);
}

.task-card-item.is-selected {
  border-color: rgba(27, 140, 89, 0.42);
  background: linear-gradient(135deg, rgba(255, 247, 205, 0.9), rgba(240, 252, 245, 0.94));
}

.task-card-title-row > div:first-child {
  min-width: 0;
}

.task-card-title-row > div:last-child,
.task-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-card-title-row strong,
.task-card-title-row span {
  display: block;
}

.task-card-title-row strong {
  color: #153b35;
  font-size: 26px;
}

.task-card-title-row span {
  margin-top: 4px;
  color: #5d726c;
  font-weight: 900;
}

.task-card-title-row button,
.task-progress-actions button {
  min-height: 34px;
  padding: 0 14px;
}

.task-card-fold-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.task-card-fold-summary span {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(32, 128, 91, 0.12);
  color: #176b52;
  font-weight: 1000;
}

.task-card-item.is-collapsed {
  padding-bottom: 14px;
}

.task-card-title-row .is-danger {
  background: linear-gradient(180deg, #ca626a, #af414b);
}

.task-team-progress-list {
  margin-top: 14px;
}

.task-team-progress {
  border-radius: 18px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.84);
}

.task-team-line {
  display: grid;
  grid-template-columns: 42px minmax(100px, 1fr) auto auto;
}

.task-team-line i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #ffe27a;
  color: #153b35;
  font-style: normal;
  font-weight: 1000;
}

.task-team-line strong {
  color: #153b35;
  font-size: 20px;
}

.task-team-line span {
  color: #5d726c;
  font-weight: 1000;
}

.task-team-line em.is-complete {
  background: rgba(244, 173, 43, 0.18);
  color: #a66800;
}

.task-team-line em.is-rewarded {
  background: rgba(32, 128, 91, 0.15);
  color: #168756;
}

.task-progress-bar {
  height: 11px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.11);
}

.task-progress-bar i {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3bb57a, #ffd354);
}

.task-personal-progress {
  margin-top: 14px;
}

.task-personal-summary {
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.78);
}

.task-personal-summary > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #153b35;
  font-weight: 1000;
}

.task-personal-summary strong,
.task-personal-summary span {
  font-size: 18px;
}

.task-personal-summary .task-progress-bar {
  margin-bottom: 0;
}

.task-student-chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.task-student-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.task-student-chip-main,
.task-student-chip-reward,
.task-student-chip em {
  border: 0;
  border-radius: 16px;
  font-weight: 1000;
}

.task-student-chip-main {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #15443a;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(32, 128, 91, 0.1);
}

.task-student-chip-main i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(35, 68, 58, 0.12);
  color: #7b8d86;
  font-style: normal;
}

.task-student-chip-main strong {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-student-chip-main span {
  color: #176b52;
  font-size: 14px;
  white-space: nowrap;
}

.task-student-chip-main:disabled {
  color: #46645c;
  background: rgba(236, 246, 240, 0.92);
  box-shadow: inset 0 0 0 1px rgba(32, 128, 91, 0.13);
  cursor: default;
}

.task-student-chip.is-complete .task-student-chip-main i,
.task-student-chip.is-rewarded .task-student-chip-main i {
  background: #ffe071;
  color: #0f7a57;
}

.task-student-chip-reward {
  min-height: 32px;
  color: #fff;
  background: linear-gradient(180deg, #15956d, #0f7e61);
}

.task-student-chip em {
  min-height: 32px;
  display: grid;
  place-items: center;
  color: #168756;
  background: rgba(32, 128, 91, 0.15);
  font-style: normal;
}

.task-progress-actions button:disabled {
  background: rgba(23, 62, 53, 0.13);
  color: #6b7b76;
  box-shadow: none;
}

.task-log-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 150px minmax(120px, 0.55fr) minmax(150px, 0.8fr) 110px 90px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(29, 77, 65, 0.09);
  color: #153b35;
  font-size: 17px;
}

.task-log-row:last-child {
  border-bottom: 0;
}

.task-log-row-head {
  min-height: 46px;
  color: #637873;
  font-size: 15px;
  font-weight: 1000;
}

.class-manage-page {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.5fr);
  gap: 18px;
  align-items: stretch;
}

.class-master,
.class-detail,
.class-student-preview,
.class-capacity-panel {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 28px rgba(33, 80, 67, 0.1);
}

.class-master {
  padding: 22px;
}

.feature-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.feature-section-title span {
  color: #153b35;
  font-size: 22px;
  font-weight: 1000;
}

.feature-section-title button,
.class-detail-actions button,
.danger-outline {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(180deg, #2c8bb0, #1e6f90);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 8px 16px rgba(33, 80, 67, 0.12);
}

.class-list-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.class-card-list {
  display: grid;
  gap: 12px;
}

.class-manage-card {
  min-height: 94px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 4px 12px;
  padding: 18px 20px;
  border: 0;
  border-radius: 20px;
  background: rgba(245, 252, 247, 0.95);
  color: #153b35;
  text-align: left;
}

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

.class-manage-card strong {
  font-size: 24px;
  line-height: 1.1;
}

.class-manage-card span {
  color: #5d726c;
  font-size: 16px;
  font-weight: 900;
}

.class-manage-card em {
  grid-row: span 2;
  align-self: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(39, 157, 91, 0.14);
  color: #168756;
  font-style: normal;
  font-weight: 1000;
}

.class-manage-card.is-selected {
  background: linear-gradient(180deg, #ffe88c, #ffd34f);
  box-shadow: 0 12px 22px rgba(139, 113, 28, 0.18);
}

.class-detail {
  padding: 24px;
}

.class-detail-head {
  min-height: 150px;
  display: block;
  padding: 10px 4px 24px;
}

.class-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.class-detail-head span {
  color: #168756;
  font-size: 16px;
  font-weight: 1000;
}

.class-detail-head h2 {
  margin: 8px 0 10px;
  color: #153b35;
  font-size: clamp(42px, 4vw, 68px);
  line-height: 1;
}

.class-detail-head p {
  margin: 0;
  color: #526b65;
  font-size: 18px;
}

.class-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 0;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.class-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.class-student-preview,
.class-capacity-panel {
  padding: 20px;
  background: rgba(248, 253, 249, 0.94);
  box-shadow: none;
}

.preview-student-list {
  display: grid;
  gap: 10px;
}

.class-control-panel .preview-student-list {
  max-height: clamp(260px, 38vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.preview-student {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.preview-student-head {
  min-height: 36px;
  color: #5d726c;
  background: transparent;
  font-size: 13px;
  font-weight: 1000;
}

.class-control-panel .preview-student-head {
  position: sticky;
  top: 0;
  z-index: 1;
  border-radius: 12px;
  background: rgba(248, 253, 249, 0.96);
}

.preview-student-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.preview-student img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(54, 86, 67, 0.16));
}

.preview-student strong,
.preview-student span {
  display: block;
}

.preview-student strong {
  color: #153b35;
  font-size: 22px;
  line-height: 1.1;
}

.preview-student span {
  margin-top: 6px;
  color: #5d726c;
  font-size: 14px;
  font-weight: 900;
}

.preview-bind-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.preview-student code {
  justify-self: end;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.1);
  color: #153b35;
  font-family: inherit;
  font-size: 15px;
  font-weight: 1000;
}

.preview-bind-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.09);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 1000;
  white-space: nowrap;
}

.empty-panel {
  min-height: 120px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #5d726c;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

.class-capacity-panel {
  width: min(100%, 560px);
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.capacity-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.capacity-card span,
.vip-capacity span {
  display: block;
  color: #5d726c;
  font-size: 12px;
  font-weight: 1000;
}

.capacity-card strong {
  display: block;
  margin-top: 4px;
  color: #153b35;
  font-size: 20px;
  line-height: 1;
}

.capacity-card i {
  display: block;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.12);
}

.capacity-card i::before {
  content: "";
  display: block;
  width: calc(var(--value, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2db36b, #ffd34f);
}

.vip-capacity {
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 232, 140, 0.42), rgba(255, 255, 255, 0.92));
}

.vip-capacity strong {
  display: block;
  margin-top: 4px;
  color: #153b35;
  font-size: 16px;
  line-height: 1.1;
}

.danger-outline {
  background: linear-gradient(180deg, #c65c65, #a73d47);
}

.board-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.board-header h1 {
  font-size: clamp(38px, 4vw, 64px);
  color: var(--ink);
}

.toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.classroom-scene {
  position: relative;
  min-height: 148px;
  margin: 4px 0 14px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(221, 247, 230, 0.82)),
    #e5f7e9;
  box-shadow: 0 16px 36px rgba(49, 91, 72, 0.1);
}

.classroom-scene::before,
.classroom-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.classroom-scene::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  background:
    linear-gradient(180deg, rgba(126, 193, 132, 0), rgba(126, 193, 132, 0.28)),
    repeating-linear-gradient(90deg, rgba(47, 138, 103, 0.16) 0 2px, transparent 2px 24px);
}

.classroom-scene::after {
  right: 28%;
  top: 22px;
  width: 110px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 42px 8px 0 -4px rgba(255, 255, 255, 0.64), -38px 12px 0 -7px rgba(255, 255, 255, 0.54);
}

.scene-copy {
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 2;
}

.scene-copy span {
  display: block;
  color: var(--leaf-dark);
  font-weight: 900;
}

.scene-copy strong {
  display: block;
  margin-top: 4px;
  font-size: 32px;
  color: var(--ink);
}

.scene-hill {
  position: absolute;
  bottom: -44px;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.scene-hill-one {
  left: 18%;
  width: 48%;
  height: 116px;
  background: rgba(106, 190, 126, 0.24);
}

.scene-hill-two {
  right: -4%;
  width: 44%;
  height: 96px;
  background: rgba(52, 143, 105, 0.16);
}

.scene-sun {
  position: absolute;
  right: 34px;
  top: 26px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe28c, var(--sun));
  box-shadow: 0 0 0 14px rgba(246, 201, 93, 0.13);
}

.scene-pets {
  position: absolute;
  inset: 16px 120px 8px 210px;
  z-index: 2;
}

.scene-pet {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(54, 86, 67, 0.18));
}

.scene-pet.web-no-pet-avatar {
  display: grid;
  place-items: center;
  border-radius: 24px;
}

.scene-pet.web-no-pet-avatar i {
  width: 34%;
  height: 30%;
}

.scene-pet.web-no-pet-avatar i::before {
  top: -52%;
  width: 44%;
  height: 50%;
  box-shadow: 56% 0 0 #7fb99b;
}

.scene-pet.web-no-pet-avatar i::after {
  top: -76%;
  left: 28%;
  width: 44%;
  height: 50%;
}

.scene-pet-1 {
  width: 116px;
  height: 116px;
  left: 10%;
  bottom: 2px;
}

.scene-pet-2 {
  width: 100px;
  height: 100px;
  left: 34%;
  bottom: 0;
}

.scene-pet-3 {
  width: 108px;
  height: 108px;
  left: 56%;
  bottom: 2px;
}

.scene-pet-4 {
  width: 90px;
  height: 90px;
  left: 78%;
  bottom: 4px;
}

.scene-pet-5 {
  width: 78px;
  height: 78px;
  left: 0;
  bottom: 8px;
  opacity: 0.82;
}

.search-box input {
  width: 240px;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 12px;
  margin: 8px 0 18px;
}

.summary-strip div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 12px 28px rgba(49, 91, 72, 0.08);
}

.summary-strip span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.summary-strip strong {
  display: block;
  margin-top: 4px;
  font-size: 32px;
}

.leader-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.leader-card,
.student-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.leader-card {
  min-height: 120px;
  display: grid;
  grid-template-columns: 84px 1fr 92px;
  gap: 16px;
  align-items: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 224, 138, 0.2), rgba(255, 255, 255, 0.9) 38%),
    var(--panel);
}

.leader-card::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 18px;
  border-radius: 999px;
  background: rgba(246, 201, 93, 0.12);
  pointer-events: none;
}

.leader-card.rank-1 {
  background:
    linear-gradient(90deg, rgba(255, 224, 138, 0.32), rgba(255, 255, 255, 0.94) 42%),
    var(--panel);
}

.leader-card.rank-2 {
  background:
    linear-gradient(90deg, rgba(167, 224, 211, 0.28), rgba(255, 255, 255, 0.94) 42%),
    var(--panel);
}

.leader-card.rank-3 {
  background:
    linear-gradient(90deg, rgba(244, 198, 159, 0.26), rgba(255, 255, 255, 0.94) 42%),
    var(--panel);
}

.leader-pet {
  width: 88px;
  height: 88px;
  object-fit: contain;
  justify-self: end;
  filter: drop-shadow(0 12px 14px rgba(54, 86, 67, 0.18));
  position: relative;
  z-index: 1;
}

.leader-pet.web-no-pet-avatar {
  display: grid;
  place-items: center;
  border-radius: 22px;
}

.leader-pet.web-no-pet-avatar i {
  width: 30%;
  height: 27%;
}

.leader-pet.web-no-pet-avatar i::before {
  top: -54%;
  width: 44%;
  height: 50%;
  box-shadow: 56% 0 0 #7fb99b;
}

.leader-pet.web-no-pet-avatar i::after {
  top: -80%;
  left: 28%;
  width: 44%;
  height: 50%;
}

.rank-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffe08a, var(--sun));
  font-size: 30px;
  font-weight: 1000;
  color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(167, 120, 28, 0.12);
}

.leader-card h3,
.student-card h3 {
  margin: 0;
  font-size: 26px;
}

.leader-card p,
.student-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.student-card {
  min-height: 198px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 251, 245, 0.94)),
    var(--panel);
  position: relative;
  overflow: hidden;
}

.student-card::before {
  content: "";
  position: absolute;
  inset: auto 12px 60px 12px;
  height: 18px;
  border-radius: 999px;
  background: rgba(71, 164, 104, 0.1);
  pointer-events: none;
}

.student-card::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -36px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(246, 201, 93, 0.12);
  pointer-events: none;
}

.student-card > * {
  position: relative;
  z-index: 1;
}

.student-topline {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.student-points {
  font-size: 32px;
  font-weight: 1000;
  color: var(--leaf-dark);
}

.student-pet {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.student-pet img,
.modal-student img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 12px rgba(40, 72, 58, 0.16));
}

.student-pet .web-no-pet-avatar {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 12px rgba(40, 72, 58, 0.12));
}

.student-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.student-actions button {
  min-height: 46px;
  box-shadow: 0 10px 18px rgba(33, 80, 67, 0.12);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(120px);
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: 900;
  opacity: 0;
  transition: 180ms ease;
  z-index: 2000;
}

.toast.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 36, 28, 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1000;
}

.point-modal {
  width: min(1120px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 251, 245, 0.98)),
    #fff;
  border-radius: 8px;
  padding: 28px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 90px rgba(20, 56, 47, 0.22);
}

.action-dialog {
  width: min(460px, 100%);
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 252, 248, 0.99)),
    #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 28px 80px rgba(20, 56, 47, 0.24);
}

.action-dialog-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffe8d6;
  color: #bd4a20;
  font-size: 28px;
  font-weight: 950;
}

.action-dialog h2 {
  margin: 16px 48px 8px 0;
  color: var(--ink);
  font-size: clamp(24px, 2vw, 32px);
}

.action-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
}

.action-dialog-field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  font-weight: 900;
  color: var(--leaf-dark);
}

.action-dialog-field input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  outline: none;
}

.action-dialog-field input:focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 4px rgba(76, 181, 116, 0.14);
}

.vip-pay-modal {
  width: min(820px, 100%);
  max-height: 92vh;
  overflow: auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 252, 248, 0.99)),
    #fff;
  box-shadow: 0 28px 80px rgba(20, 56, 47, 0.24);
}

.vip-pay-head span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(37, 126, 89, 0.1);
  color: #168756;
  font-size: 13px;
  font-weight: 1000;
}

.vip-pay-head h2 {
  margin: 12px 48px 8px 0;
  color: var(--ink);
  font-size: clamp(26px, 2.2vw, 36px);
}

.vip-pay-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
}

.vip-pay-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  margin-top: 22px;
}

.vip-pay-qr-box {
  min-height: 260px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px dashed rgba(37, 126, 89, 0.25);
  background: #f6fbf7;
  padding: 16px;
}

.vip-pay-qr-box img {
  width: min(230px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.vip-pay-qr-fallback {
  display: grid;
  gap: 8px;
  color: #60756f;
  text-align: center;
  font-weight: 900;
}

.vip-pay-qr-fallback strong {
  color: #123d36;
  font-size: 20px;
}

.vip-pay-qr-fallback span {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}

.vip-pay-info {
  display: grid;
  align-content: start;
  gap: 14px;
}

.vip-pay-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #fff7d1, #ffed9c);
  color: #123d36;
}

.vip-pay-plan span,
.vip-pay-plan em {
  font-weight: 1000;
  font-style: normal;
}

.vip-pay-plan strong {
  color: #bd6b16;
  font-size: 26px;
  line-height: 1;
}

.vip-pay-plan em {
  grid-column: 1 / -1;
  color: #6d6a4f;
  font-size: 14px;
}

.vip-pay-info ul {
  margin: 0;
  padding-left: 20px;
  color: #526b65;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.65;
}

.vip-pay-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vip-pay-links button {
  min-height: 34px;
  border: 1px solid rgba(37, 126, 89, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  background: #f3faf5;
  color: #155a45;
  font-weight: 1000;
}

.vip-pay-actions {
  margin-top: 22px;
}

.icon-button {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--mint);
  font-size: 28px;
}

.modal-student {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 48px;
}

.modal-student h2 {
  margin: 4px 0;
  font-size: 34px;
}

.modal-student p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.template-block {
  margin-top: 22px;
}

.template-block h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.template-button {
  min-height: 58px;
  background: #edf7f0;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(48, 94, 77, 0.1);
}

.template-button strong {
  float: right;
}

.custom-row {
  display: grid;
  grid-template-columns: 1.4fr 120px auto auto;
  gap: 10px;
  margin-top: 22px;
}

.student-ledger-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 18px;
  padding: 5px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  background: rgba(223, 243, 228, 0.72);
}

.student-ledger-tabs button,
.pokedex-rarity-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #315d51;
  font-weight: 1000;
}

.student-ledger-tabs button.is-active,
.pokedex-rarity-tabs button.is-active {
  background: #fff;
  color: #153b35;
  box-shadow: 0 8px 18px rgba(33, 80, 67, 0.12);
}

.student-pokedex-panel {
  margin-top: 18px;
}

.student-pokedex-head,
.pokedex-student-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.78);
}

.student-pokedex-head div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.student-pokedex-head span,
.pokedex-student-head span {
  color: #52766a;
  font-weight: 1000;
}

.student-pokedex-head strong {
  color: #17614c;
  font-size: 32px;
  line-height: 1;
}

.student-pokedex-head em,
.student-pokedex-head p,
.pokedex-student-head p,
.pokedex-student-head strong,
.pokedex-student-card em,
.pokedex-student-card i,
.student-pet-option em,
.student-pet-option i {
  font-style: normal;
}

.student-pokedex-head p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.pokedex-rarity-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
  padding: 5px;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 8px;
  background: rgba(237, 247, 240, 0.82);
}

.pokedex-rarity-tabs button {
  padding: 0 16px;
}

.student-pokedex-workbench {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(360px, 0.95fr);
  align-items: start;
  gap: 14px;
}

.student-pet-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  max-height: min(54vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.student-pet-option {
  min-height: 84px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  position: relative;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 8px 40px 8px 8px;
  background: rgba(255, 255, 255, 0.84);
  color: #153b35;
  text-align: left;
}

.student-pet-option.is-selected {
  border-color: rgba(47, 138, 103, 0.62);
  background: #f4fff7;
  box-shadow: inset 0 0 0 1px rgba(47, 138, 103, 0.22);
}

.student-pet-option.is-owned {
  background: rgba(237, 247, 240, 0.92);
}

.student-pet-option img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.student-pet-option span,
.student-pet-option strong,
.student-pet-option em,
.pokedex-student-card span,
.pokedex-student-card strong,
.pokedex-student-card em {
  display: block;
  min-width: 0;
}

.student-pet-option strong {
  overflow: hidden;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-pet-option em,
.pokedex-student-card em {
  margin-top: 3px;
  color: #55746a;
  font-size: 13px;
  font-weight: 900;
}

.student-pet-option i {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #dff3e4;
  color: #17614c;
  font-size: 12px;
  font-weight: 1000;
}

.student-pet-preview {
  min-height: 350px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.84);
}

.student-pet-preview-main {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.student-pet-preview-main img {
  width: 168px;
  height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(40, 72, 58, 0.16));
}

.student-pet-preview-main span {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 8px;
  background: #fff2cf;
  color: #7c5920;
  font-weight: 1000;
}

.student-pet-preview-main h3 {
  margin: 8px 0 5px;
  color: #153b35;
  font-size: 28px;
}

.student-pet-preview-main p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.student-pet-route {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.student-pet-route div,
.student-pet-route button {
  display: grid;
  grid-template-rows: 56px auto;
  place-items: center;
  min-width: 0;
  border-radius: 6px;
  padding: 5px 2px;
  background: #edf7f0;
}

.student-pet-route button {
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.student-pet-route button:hover,
.student-pet-route button:focus-visible {
  background: #dff3e4;
  box-shadow: inset 0 0 0 1px rgba(47, 138, 103, 0.24);
  transform: translateY(-1px);
}

.student-pet-route button.is-active {
  background: #dff3e4;
  box-shadow: inset 0 0 0 2px rgba(47, 138, 103, 0.34);
}

.student-pet-route img {
  width: 100%;
  height: 56px;
  object-fit: contain;
}

.student-pet-route span {
  color: #55746a;
  font-size: 12px;
  font-weight: 1000;
}

.student-pet-exchange {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid rgba(48, 94, 77, 0.1);
  padding-top: 14px;
  color: #315d51;
  font-weight: 1000;
}

.student-pet-exchange button {
  width: auto;
  min-width: 150px;
  min-height: 44px;
  border-radius: 8px;
}

.student-pet-exchange button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.pokedex-student-page {
  display: grid;
  gap: 14px;
}

.pokedex-student-head h2 {
  margin: 4px 0 7px;
  color: #153b35;
  font-size: 30px;
}

.pokedex-student-head p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.pokedex-student-head > strong {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 12px;
  background: #edf7f0;
  color: #17614c;
}

.pokedex-student-actions,
.pet-album-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
}

.pokedex-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 4px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 4px;
  background: rgba(223, 243, 228, 0.72);
  box-shadow: inset 0 2px 8px rgba(33, 80, 67, 0.08);
}

.pokedex-mode-switch button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  background: transparent;
  color: #315d51;
  font-weight: 1000;
  box-shadow: none;
}

.pokedex-mode-switch button.is-active {
  border: 1px solid rgba(23, 97, 76, 0.28);
  background: linear-gradient(180deg, #1d7b5e, #155a49);
  color: #fff;
  box-shadow:
    inset 0 2px 8px rgba(0, 48, 36, 0.34),
    0 8px 16px rgba(23, 97, 76, 0.18);
}

.pokedex-mode-switch button:focus-visible {
  outline: 3px solid rgba(246, 201, 93, 0.62);
  outline-offset: 1px;
}

.pokedex-student-actions strong,
.pet-album-actions strong {
  border-radius: 8px;
  padding: 12px;
  background: #edf7f0;
  color: #17614c;
  font-style: normal;
}

.pokedex-student-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}

.pokedex-student-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.84);
  color: #153b35;
  text-align: left;
}

.pokedex-student-card img,
.pokedex-student-card .web-no-pet-avatar {
  width: 74px;
  height: 74px;
}

.pokedex-student-card img {
  object-fit: contain;
}

.pokedex-student-card i {
  min-width: 68px;
  color: #55746a;
  text-align: right;
  font-size: 12px;
  font-weight: 1000;
}

.pokedex-student-card b {
  display: block;
  color: #17614c;
  font-size: 24px;
  line-height: 1;
}

.pet-album-page {
  display: grid;
  gap: 12px;
}

.pet-album-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.78);
}

.pet-album-head span {
  color: #52766a;
  font-weight: 1000;
}

.pet-album-head h2 {
  margin: 4px 0 7px;
  color: #153b35;
  font-size: 30px;
}

.pet-album-head p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.pet-album-workbench {
  display: grid;
  grid-template-columns: minmax(430px, 1.15fr) minmax(360px, 0.85fr);
  align-items: start;
  gap: 14px;
}

.pet-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
  gap: 9px;
}

.pet-album-card {
  min-height: 194px;
  display: grid;
  grid-template-rows: 138px auto;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.84);
  color: #153b35;
}

.pet-album-card.is-selected {
  border-color: rgba(47, 138, 103, 0.62);
  background: #f4fff7;
  box-shadow: inset 0 0 0 1px rgba(47, 138, 103, 0.22);
}

.pet-album-card img {
  width: 100%;
  height: 138px;
  object-fit: contain;
  filter: drop-shadow(0 12px 13px rgba(40, 72, 58, 0.12));
}

.pet-album-card span,
.pet-album-card strong,
.pet-album-card em {
  display: block;
  min-width: 0;
}

.pet-album-card strong {
  overflow: hidden;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-album-card em {
  margin-top: 3px;
  color: #55746a;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.pet-album-preview {
  position: sticky;
  top: 14px;
  min-height: 410px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.pet-album-preview-main {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.pet-album-preview-main img {
  width: 100%;
  height: 248px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(40, 72, 58, 0.16));
}

.pet-album-preview-main span {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 8px;
  background: #fff2cf;
  color: #7c5920;
  font-weight: 1000;
}

.pet-album-preview-main h3 {
  margin: 8px 0 5px;
  color: #153b35;
  font-size: 30px;
}

.pet-album-preview-main p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.pet-album-preview.is-route-viewer {
  min-height: 540px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.pet-route-inline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.pet-route-inline-head span {
  display: block;
  color: #52766a;
  font-size: 13px;
  font-weight: 1000;
}

.pet-route-inline-head h3 {
  overflow: hidden;
  margin: 3px 0 0;
  color: #153b35;
  font-size: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-route-inline-head em {
  flex: 0 0 auto;
  border-radius: 6px;
  padding: 7px 10px;
  background: #fff2cf;
  color: #7c5920;
  font-style: normal;
  font-weight: 1000;
}

.pet-route-inline-stage {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
}

.pet-route-inline-stage figure {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(300px, min(48vh, 430px)) auto;
  gap: 8px;
  margin: 0;
}

.pet-route-inline-stage figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 8px;
  background: #f3faf5;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(40, 72, 58, 0.16));
}

.pet-route-inline-stage figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #153b35;
}

.pet-route-inline-stage figcaption strong {
  font-size: 20px;
  font-weight: 1000;
}

.pet-route-inline-stage figcaption span {
  flex: 0 0 auto;
  border-radius: 6px;
  padding: 7px 10px;
  background: #edf7f0;
  color: #17614c;
  font-weight: 1000;
}

.pet-route-inline-step {
  width: 46px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(48, 94, 77, 0.14);
  border-radius: 8px;
  background: #fff;
  color: #153b35;
  font-size: 30px;
  font-weight: 1000;
  box-shadow: 0 12px 24px rgba(33, 80, 67, 0.12);
}

.pet-route-inline-step:disabled {
  cursor: not-allowed;
  opacity: 0.34;
  box-shadow: none;
}

.pet-route-inline-list {
  margin-top: 0;
}

.web-garden-page {
  display: grid;
  gap: 14px;
}

.web-pets-page {
  display: grid;
  gap: 14px;
}

.web-no-pet-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  background: linear-gradient(180deg, #f7fcf8, #e4f4e9);
  color: #52766a;
  font-size: 13px;
  font-weight: 1000;
}

.web-no-pet-avatar i {
  position: relative;
  width: 18px;
  height: 16px;
  display: block;
  border-radius: 52% 52% 46% 46%;
  background: #7fb99b;
  opacity: 0.92;
}

.web-no-pet-avatar i::before,
.web-no-pet-avatar i::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #7fb99b;
}

.web-no-pet-avatar i::before {
  top: -8px;
  left: 0;
  width: 8px;
  height: 8px;
  box-shadow: 10px 0 0 #7fb99b;
}

.web-no-pet-avatar i::after {
  top: -12px;
  left: 5px;
  width: 8px;
  height: 8px;
}

.web-no-pet-egg {
  object-fit: contain;
  opacity: 0.96;
  filter: drop-shadow(0 10px 14px rgba(54, 86, 67, 0.16));
}

.web-pets-head,
.web-pets-students,
.web-pets-main,
.web-pets-owned-panel,
.web-pets-detail-panel {
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.web-pets-head {
  min-height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}

.web-pets-head span,
.web-pets-panel-title span,
.web-pets-summary span,
.web-pets-detail-hero span,
.web-pets-feed-box span,
.web-pets-owned-card em,
.web-pets-progress em {
  color: #52766a;
  font-weight: 1000;
}

.web-pets-head h2 {
  margin: 4px 0 6px;
  color: #153b35;
  font-size: 34px;
}

.web-pets-head p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.web-pets-head > strong {
  border-radius: 8px;
  padding: 12px 14px;
  background: #edf7f0;
  color: #17614c;
}

.web-pets-workbench {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.web-pets-students {
  position: sticky;
  top: 14px;
  padding: 14px;
}

.web-pets-student-headline {
  margin-bottom: 10px;
}

.web-pets-student-sort {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(32, 128, 91, 0.08);
}

.web-pets-student-sort span {
  padding: 0 4px;
  color: #52766a;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.web-pets-student-sort button {
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #38645a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 1000;
}

.web-pets-student-sort button.is-active {
  background: linear-gradient(180deg, #ffe88c, #ffd34f);
  color: #153b35;
  box-shadow: 0 6px 12px rgba(139, 113, 28, 0.14);
}

.web-pets-student-list {
  display: grid;
  gap: 6px;
  max-height: min(67vh, 760px);
  overflow: auto;
  margin-top: 10px;
  padding-right: 3px;
}

.web-pets-student-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 7px;
  padding: 5px 8px;
  background: rgba(245, 251, 247, 0.9);
  color: #153b35;
  text-align: left;
}

.web-pets-student-row b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #edf7f0;
  color: #17614c;
}

.web-pets-student-row span,
.web-pets-owned-card span {
  min-width: 0;
}

.web-pets-student-row strong,
.web-pets-student-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-pets-student-row strong {
  font-weight: 1000;
}

.web-pets-student-row em {
  color: #52766a;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.web-pets-student-row.is-active {
  border-color: rgba(23, 97, 76, 0.28);
  background: #dff3e4;
  box-shadow: inset 0 0 0 1px rgba(47, 138, 103, 0.24);
}

.web-pets-main {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.web-pets-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 8px;
  background: rgba(249, 253, 250, 0.9);
}

.web-pets-summary div {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px 18px;
}

.web-pets-summary div + div {
  border-left: 1px solid rgba(29, 77, 65, 0.1);
}

.web-pets-summary strong {
  overflow-wrap: anywhere;
  color: #123d36;
  font-size: 25px;
  line-height: 1.05;
}

.web-pets-content {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(360px, 1.1fr);
  gap: 14px;
  align-items: start;
}

.web-pets-owned-panel,
.web-pets-detail-panel {
  padding: 14px;
}

.web-pets-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.web-pets-panel-title strong {
  color: #153b35;
}

.web-pets-owned-list {
  display: grid;
  gap: 10px;
  max-height: 560px;
  overflow: auto;
  padding-right: 3px;
}

.web-pets-owned-card {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: #153b35;
  text-align: left;
}

.web-pets-owned-card.is-selected {
  border-color: rgba(23, 97, 76, 0.3);
  background: #edf9f1;
}

.web-pets-owned-card.is-main {
  box-shadow: inset 0 0 0 2px rgba(255, 207, 79, 0.6);
}

.web-pets-owned-thumb > img:first-child,
.web-pets-detail-hero img {
  object-fit: contain;
}

.web-pets-owned-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

.web-pets-owned-thumb > img:first-child {
  width: 60px;
  height: 60px;
}

.web-pets-owned-thumb.is-hungry > img:first-child {
  filter: grayscale(1) saturate(0.08) contrast(0.92) brightness(1.04);
  opacity: 0.82;
}

.web-pets-owned-thumb .web-pets-owned-hunger-badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -7px;
  width: 58px;
  height: 25px;
  transform: translateX(-50%) rotate(-3deg);
  object-fit: contain;
  pointer-events: none;
}

.web-pets-owned-card strong,
.web-pets-owned-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-pets-owned-card strong {
  font-size: 17px;
}

.web-pets-owned-card b {
  border-radius: 6px;
  padding: 7px 9px;
  background: #edf7f0;
  color: #17614c;
  white-space: nowrap;
}

.web-pets-detail-panel {
  display: grid;
  gap: 14px;
}

.web-pets-detail-hero {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 214px;
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, #eef9f1, #fff7cf);
}

.web-pets-detail-hero img {
  width: 170px;
  height: 170px;
  filter: drop-shadow(0 18px 20px rgba(28, 76, 52, 0.18));
}

.web-pets-detail-hero h3 {
  margin: 5px 0 8px;
  color: #123d36;
  font-size: 34px;
}

.web-pets-detail-hero p {
  margin: 0;
  color: #4f7166;
  font-weight: 900;
}

.web-pets-progress {
  display: grid;
  gap: 9px;
  border-radius: 8px;
  padding: 14px;
  background: rgba(249, 253, 250, 0.94);
}

.web-pets-progress div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #153b35;
  font-weight: 1000;
}

.web-pets-progress i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(29, 77, 65, 0.11);
}

.web-pets-progress i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #19a36d, #ffd34d);
}

.web-pets-actions,
.web-pets-feed-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.web-pets-feed-buttons {
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 18px);
}

.web-pets-actions button,
.web-pets-feed-buttons button {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  padding: 0 14px;
  background: #0e755c;
  color: #fff;
  font-weight: 1000;
}

.web-pets-actions button:disabled,
.web-pets-feed-buttons button:disabled {
  background: #e8f4ec;
  color: #17614c;
}

.web-pets-feed-buttons .web-pets-feed-image-btn {
  width: clamp(78px, 7.2vw, 112px);
  height: clamp(78px, 7.2vw, 112px);
  min-height: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.web-pets-feed-buttons .web-pets-feed-image-btn-10 {
  width: clamp(84px, 7.8vw, 122px);
  height: clamp(84px, 7.8vw, 122px);
}

.web-pets-feed-buttons .web-pets-feed-image-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(94, 74, 34, 0.16));
}

.web-pets-feed-buttons .web-pets-feed-image-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
}

.web-pets-feed-buttons .web-pets-feed-image-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.web-pets-feed-buttons .web-pets-feed-image-btn:disabled {
  background: transparent;
  opacity: 0.46;
  filter: grayscale(0.5);
}

.web-pets-feed-buttons .web-pets-feed-image-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.web-pets-feed-box {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 8px;
  padding: 14px;
  background: #fffdf3;
}

.web-pets-feed-box > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.web-pets-feed-box strong {
  color: #153b35;
}

.web-pets-feed-box p {
  margin: 0;
  color: #5c756d;
  font-weight: 900;
}

.web-pets-mobile-scene {
  position: relative;
  container-type: inline-size;
  width: min(100%, clamp(300px, 27vw, 470px), calc(62vh * 750 / 1360));
  aspect-ratio: 750 / 1360;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: #203018;
  box-shadow:
    0 18px 34px rgba(22, 68, 52, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.web-pets-mobile-bg,
.web-pets-mobile-info-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.web-pets-mobile-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.web-pets-mobile-plaque {
  position: absolute;
  top: 3.2%;
  left: 50%;
  width: 86%;
  transform: translateX(-50%);
  z-index: 4;
}

.web-pets-mobile-plaque img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(72, 58, 25, 0.12));
}

.web-pets-mobile-plaque strong {
  position: absolute;
  inset: 0 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #684017;
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 248, 227, 0.92),
    0 6px 14px rgba(120, 83, 22, 0.16);
  white-space: nowrap;
}

.web-pets-mobile-display {
  position: absolute;
  top: 61.2%;
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 82%;
  min-height: clamp(24px, 10cqw, 30px);
  transform: translateX(-50%);
  border: 1px solid rgba(129, 181, 96, 0.62);
  border-radius: 999px;
  padding: 0 clamp(7px, 4cqw, 14px);
  overflow: hidden;
  background: rgba(255, 250, 238, 0.94);
  color: #4c8d39;
  font-size: clamp(9px, 4.4cqw, 16px);
  font-weight: 1000;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
  box-shadow: 0 8px 14px rgba(38, 82, 45, 0.12);
}

.web-pets-mobile-display.is-active {
  background: rgba(224, 247, 231, 0.96);
  border-color: rgba(76, 162, 77, 0.7);
  color: #2f8a4c;
}

.web-pets-mobile-stage {
  position: absolute;
  top: 10.8%;
  left: 50%;
  z-index: 2;
  width: 86%;
  height: 54%;
  transform: translateX(-50%);
}

.web-pets-mobile-stage .web-pets-mobile-pet-image {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(86%, 350px);
  height: min(86%, 350px);
  transform: translateX(-50%);
  object-fit: contain;
  filter:
    drop-shadow(0 10px 12px rgba(62, 89, 28, 0.18))
    drop-shadow(0 0 24px rgba(255, 242, 153, 0.42));
}

.web-pets-mobile-stage.is-hungry .web-pets-mobile-pet-image {
  filter: grayscale(1) saturate(0.08) contrast(0.92) brightness(1.04) drop-shadow(0 10px 12px rgba(40, 72, 58, 0.16));
  opacity: 0.82;
}

.web-pets-mobile-stage .web-pets-mobile-hunger-badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1%;
  width: min(54%, 210px);
  height: auto;
  transform: translateX(-50%) rotate(-3deg);
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(50, 75, 58, 0.18));
  pointer-events: none;
}

.web-pets-mobile-info {
  position: absolute;
  left: 50%;
  bottom: 3.2%;
  z-index: 4;
  width: 94%;
  height: 32.5%;
  transform: translateX(-50%);
}

.web-pets-mobile-info-bg {
  object-fit: fill;
}

.web-pets-mobile-info-content {
  position: absolute;
  inset: 10% 5.4% 6%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 3%;
}

.web-pets-mobile-progress {
  position: relative;
  align-self: start;
  width: 90%;
  margin: 7% auto 0;
  display: grid;
  gap: 6px;
}

.web-pets-mobile-progress > strong {
  position: absolute;
  left: 50%;
  top: -34px;
  min-width: 76px;
  transform: translateX(-50%);
  border: 2px solid rgba(246, 243, 220, 0.96);
  border-radius: 999px;
  padding: 5px 14px;
  background: linear-gradient(180deg, rgba(136, 180, 73, 0.98), rgba(85, 131, 39, 0.98));
  color: #f7ffe7;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 4px rgba(46, 77, 19, 0.35);
}

.web-pets-mobile-progress div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.web-pets-mobile-progress span,
.web-pets-mobile-progress b {
  color: #4c3721;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 1000;
}

.web-pets-mobile-progress i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224, 238, 218, 0.9);
}

.web-pets-mobile-progress i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7cb960, #4ca24d);
}

.web-pets-mobile-progress em,
.web-pets-mobile-progress small {
  overflow: hidden;
  color: #71a152;
  font-size: clamp(12px, 0.95vw, 14px);
  font-style: normal;
  font-weight: 1000;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-pets-mobile-progress small {
  color: #2f3a2f;
}

.web-pets-mobile-feed-buttons {
  justify-content: space-between;
  align-items: end;
  width: 78%;
  margin: 0 auto 4%;
  gap: 0;
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn {
  width: 18%;
  height: auto;
  aspect-ratio: 451 / 466;
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-1 {
  transform: translateX(16%);
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-5 {
  aspect-ratio: 452 / 466;
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-10 {
  width: 20%;
  height: auto;
  aspect-ratio: 474 / 559;
  transform: translateX(-16%);
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-1:hover:not(:disabled) {
  transform: translateX(16%) translateY(-2px) scale(1.03);
}

.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-10:hover:not(:disabled) {
  transform: translateX(-16%) translateY(-2px) scale(1.03);
}

.web-pets-mobile-note {
  width: min(100%, clamp(300px, 27vw, 470px), calc(62vh * 750 / 1360));
  margin: 10px auto 0;
  color: #5c756d;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.web-pets-skin-coming-soon {
  width: min(100%, clamp(300px, 27vw, 470px), calc(62vh * 750 / 1360));
  min-height: 112px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  border: 1px solid rgba(198, 172, 82, 0.32);
  border-radius: 8px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(255, 253, 237, 0.94), rgba(236, 248, 226, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.web-pets-skin-coming-soon img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(49, 83, 42, 0.16));
}

.web-pets-skin-coming-soon span,
.web-pets-skin-coming-soon strong,
.web-pets-skin-coming-soon p {
  display: block;
  min-width: 0;
}

.web-pets-skin-coming-soon span {
  color: #63774e;
  font-size: 13px;
  font-weight: 1000;
}

.web-pets-skin-coming-soon strong {
  margin-top: 4px;
  color: #4f3618;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.05;
}

.web-pets-skin-coming-soon p {
  margin: 7px 0 0;
  color: #617c65;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.web-garden-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.78);
}

.web-garden-head span,
.web-garden-preview-head span {
  color: #52766a;
  font-weight: 1000;
}

.web-garden-head h2 {
  margin: 4px 0 7px;
  color: #153b35;
  font-size: 30px;
}

.web-garden-head p {
  margin: 0;
  color: #55746a;
  font-weight: 900;
}

.web-garden-head > strong {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 12px;
  background: #edf7f0;
  color: #17614c;
}

.web-garden-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(420px, 1fr);
  align-items: start;
  gap: 14px;
}

.web-garden-students,
.web-garden-preview {
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.web-garden-students {
  position: sticky;
  top: 14px;
}

.web-garden-students .feature-section-title strong {
  color: #52766a;
  font-size: 12px;
  font-weight: 1000;
}

.web-garden-student-list {
  display: grid;
  gap: 6px;
  max-height: min(67vh, 760px);
  overflow: auto;
  margin-top: 10px;
  padding-right: 3px;
}

.web-garden-student-row {
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 7px;
  padding: 4px 8px;
  background: rgba(245, 251, 247, 0.9);
  color: #153b35;
  text-align: left;
}

.web-garden-student-row b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #edf7f0;
  color: #17614c;
  font-size: 13px;
}

.web-garden-student-row strong {
  overflow: hidden;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-garden-student-row.is-active {
  border-color: rgba(23, 97, 76, 0.28);
  background: #dff3e4;
  box-shadow: inset 0 0 0 1px rgba(47, 138, 103, 0.24);
}

.web-garden-student-row.is-active b {
  background: #17614c;
  color: #fff;
}

.web-garden-preview {
  min-width: 0;
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.web-garden-scene-workbench {
  position: relative;
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  align-items: start;
  gap: 12px;
}

.web-garden-scene-workbench.is-shop-open {
  grid-template-columns: minmax(300px, 520px) minmax(260px, 1fr);
}

.web-garden-scene-workbench .web-garden-scene {
  justify-self: center;
}

.web-garden-shop-toggle {
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 8px;
  width: clamp(76px, 10vw, 104px);
  aspect-ratio: 1;
  overflow: visible;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
}

.web-garden-shop-toggle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 9px 10px rgba(25, 82, 60, 0.24));
}

.web-garden-scene-workbench.is-shop-open .web-garden-shop-toggle {
  top: 10px;
  right: 10px;
  width: 56px;
  transform: none;
}

.web-garden-background-shop {
  min-width: 0;
  max-height: min(720px, calc(100vh - 150px));
  overflow: hidden;
  border: 1px solid rgba(42, 125, 91, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(246, 253, 248, 0.98);
  box-shadow: 0 18px 34px rgba(25, 82, 60, 0.12);
}

.web-garden-background-shop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-right: 74px;
}

.web-garden-background-shop-head span,
.web-garden-background-shop-head strong {
  display: block;
  color: #17614c;
  font-weight: 1000;
}

.web-garden-background-shop-head span {
  font-size: 20px;
}

.web-garden-background-shop-head strong {
  margin-top: 2px;
  color: #617c65;
  font-size: 12px;
}

.web-garden-background-shop-head button {
  display: none;
}

.web-garden-background-list {
  display: grid;
  gap: 9px;
  max-height: min(650px, calc(100vh - 210px));
  overflow: auto;
  margin-top: 10px;
  padding-right: 3px;
}

.web-garden-background-card {
  overflow: hidden;
  border: 1px solid rgba(42, 125, 91, 0.14);
  border-radius: 8px;
  background: #fff;
}

.web-garden-background-card.is-equipped {
  border-color: rgba(214, 169, 36, 0.62);
  box-shadow: inset 0 0 0 2px rgba(255, 207, 79, 0.5);
}

.web-garden-background-card.is-locked img {
  filter: grayscale(0.8);
  opacity: 0.72;
}

.web-garden-background-card > img {
  width: 100%;
  height: 104px;
  display: block;
  object-fit: cover;
}

.web-garden-background-card > div {
  padding: 8px;
}

.web-garden-background-card span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.web-garden-background-card strong,
.web-garden-background-card em {
  color: #153b35;
  font-style: normal;
  font-weight: 1000;
}

.web-garden-background-card em {
  color: #638074;
  font-size: 11px;
}

.web-garden-background-card p {
  margin: 4px 0 7px;
  color: #698078;
  font-size: 11px;
  font-weight: 800;
}

.web-garden-background-card button {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: #17614c;
  color: #fff;
  font-weight: 1000;
}

.web-garden-background-card button:disabled {
  background: #ffe17a;
  color: #70591b;
}

.web-garden-stage-panel {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 36px rgba(17, 52, 39, 0.14);
  backdrop-filter: blur(8px);
}

.web-garden-stage-panel span {
  color: #52766a;
  font-weight: 1000;
}

.web-garden-stage-panel h3 {
  margin: 4px 0 0;
  color: #153b35;
  font-size: 26px;
  line-height: 1;
}

.web-garden-preview-meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 7px;
}

.web-garden-preview-meta em,
.web-garden-preview-meta b {
  border-radius: 6px;
  padding: 7px 10px;
  font-style: normal;
  font-weight: 1000;
}

.web-garden-preview-meta em {
  background: #fff2cf;
  color: #7c5920;
}

.web-garden-preview-meta b {
  background: #edf7f0;
  color: #17614c;
}

.web-garden-scene {
  position: relative;
  isolation: isolate;
  width: min(520px, 100%, calc((100vh - 132px) * 9 / 16));
  aspect-ratio: 9 / 16;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #e7f5ea;
}

.web-garden-background,
.web-garden-scene-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.web-garden-background {
  z-index: -2;
  object-fit: cover;
}

.web-garden-scene-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(15, 55, 42, 0.16));
}

.web-garden-pet {
  position: absolute;
  display: grid;
  justify-items: center;
  transform: translateX(-32%);
  width: var(--pet-size);
}

.web-garden-pet img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(18, 53, 39, 0.22));
}

.web-garden-pet span {
  max-width: 100%;
  overflow: hidden;
  border-radius: 6px;
  padding: 5px 8px;
  background: rgba(12, 39, 34, 0.52);
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-garden-empty {
  position: absolute;
  left: 50%;
  bottom: 18%;
  max-width: min(380px, calc(100% - 32px));
  transform: translateX(-50%);
  border-radius: 8px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.86);
  color: #315d51;
  font-weight: 1000;
  text-align: center;
}

.web-garden-arrange-panel,
.web-garden-main-panel {
  width: min(100%, 820px);
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(249, 253, 250, 0.94);
}

.web-garden-main-panel {
  background: rgba(255, 253, 239, 0.94);
}

.web-garden-arrange-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-garden-arrange-head span,
.web-garden-arrange-card em {
  display: block;
  color: #52766a;
  font-weight: 1000;
}

.web-garden-arrange-head strong {
  color: #153b35;
  font-size: 18px;
}

.web-garden-arrange-head button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  background: #0e755c;
  color: #fff;
  font-weight: 1000;
}

.web-garden-arrange-list,
.web-garden-main-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.web-garden-arrange-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.web-garden-arrange-card.is-selected {
  border-color: rgba(23, 97, 76, 0.28);
  background: #edf9f1;
}

.web-garden-arrange-card > button:first-child,
.web-garden-main-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #153b35;
  text-align: left;
}

.web-garden-main-card {
  min-height: 68px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.web-garden-main-card.is-active {
  border-color: rgba(214, 169, 36, 0.48);
  background: #fff7ca;
  box-shadow: inset 0 0 0 2px rgba(255, 207, 79, 0.6);
}

.web-garden-arrange-card img,
.web-garden-main-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.web-garden-arrange-card strong,
.web-garden-main-card strong {
  display: block;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-garden-main-card span {
  min-width: 0;
}

.web-garden-arrange-card b,
.web-garden-main-card b {
  width: 34px;
  min-height: 54px;
  display: grid;
  place-items: center;
  justify-self: end;
  border-radius: 6px;
  padding: 5px 0;
  background: #edf7f0;
  color: #17614c;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-orientation: upright;
  white-space: normal;
  writing-mode: vertical-rl;
}

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

  .student-pet-catalog {
    max-height: 360px;
  }

  .student-pokedex-head,
  .pokedex-student-head,
  .pet-album-head,
  .student-pet-exchange {
    align-items: stretch;
    flex-direction: column;
  }

  .pokedex-student-actions,
  .pet-album-actions {
    justify-content: space-between;
  }

  .pokedex-mode-switch {
    width: 100%;
  }

  .pet-album-workbench {
    grid-template-columns: 1fr;
  }

  .pet-album-preview {
    position: static;
  }

  .honor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .honor-summary,
  .honor-podium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .honor-podium-card {
    grid-template-areas:
      "rank avatar points"
      "rank info info";
    grid-template-columns: 50px 78px minmax(0, 1fr);
  }

  .honor-podium-card em {
    grid-area: points;
    justify-self: end;
  }

  .vip-hero-panel {
    grid-template-columns: 1fr;
  }

  .vip-usage-grid {
    grid-template-columns: 1fr;
  }

  .vip-plan-grid {
    grid-template-columns: 1fr;
  }

  .export-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .export-import-grid {
    grid-template-columns: 1fr;
  }

  .settings-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .web-garden-workbench {
    grid-template-columns: 1fr;
  }

  .web-pets-workbench,
  .web-pets-content {
    grid-template-columns: 1fr;
  }

  .web-pets-students {
    position: static;
  }

  .web-pets-student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
  }

  .web-garden-students {
    position: static;
  }

  .web-garden-student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
  }

  .web-garden-stage-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .web-garden-preview-meta {
    justify-content: flex-start;
  }

  .web-garden-arrange-list,
  .web-garden-main-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .student-pet-catalog {
    grid-template-columns: 1fr;
  }

  .student-pet-preview-main {
    grid-template-columns: 1fr;
  }

  .student-pet-preview-main img {
    width: 100%;
  }

  .student-pet-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pet-album-preview-main {
    grid-template-columns: 1fr;
  }

  .pet-album-preview-main img {
    height: 210px;
  }

  .pet-album-preview.is-route-viewer {
    min-height: 480px;
  }

  .pet-route-inline-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pet-route-inline-stage {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .pet-route-inline-stage figure {
    grid-template-rows: minmax(230px, min(42vh, 360px)) auto;
  }

  .pet-route-inline-step {
    width: 40px;
    height: 72px;
    font-size: 28px;
  }

  .honor-summary,
  .honor-podium {
    grid-template-columns: 1fr;
  }

  .honor-toolbar,
  .honor-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .honor-tabs {
    width: 100%;
  }

  .honor-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .honor-toolbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .honor-toolbar-actions button {
    flex: 1 1 0;
    padding: 0 10px;
  }

  .honor-tabs button,
  .honor-head button {
    flex: 1;
  }

  .honor-row {
    grid-template-columns: 48px minmax(120px, 1fr) 82px;
  }

  .honor-row span:nth-child(3),
  .honor-row-head span:nth-child(3) {
    display: none;
  }

  .vip-overview h2 {
    font-size: 32px;
  }

  .vip-price-row,
  .vip-cdk-box {
    grid-template-columns: 1fr;
  }

  .vip-compare-row {
    grid-template-columns: minmax(120px, 1fr) minmax(86px, 0.5fr) minmax(86px, 0.5fr);
    gap: 8px;
    padding: 0 10px;
    font-size: 14px;
  }

  .vip-note-band {
    font-size: 16px;
    text-align: center;
  }

  .export-head,
  .export-import-head,
  .export-import-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .export-card-grid {
    grid-template-columns: 1fr;
  }

  .settings-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-summary {
    grid-template-columns: 1fr;
  }

  .settings-summary div + div {
    border-top: 1px solid rgba(29, 77, 65, 0.1);
    border-left: 0;
  }

  .web-garden-head {
    align-items: stretch;
    flex-direction: column;
  }

  .web-pets-head {
    align-items: stretch;
    flex-direction: column;
  }

  .web-pets-summary {
    grid-template-columns: 1fr;
  }

  .web-pets-summary div + div {
    border-top: 1px solid rgba(29, 77, 65, 0.1);
    border-left: 0;
  }

  .web-pets-student-list {
    grid-template-columns: 1fr;
  }

  .web-pets-detail-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .web-garden-scene {
    width: min(440px, 100%, calc((100vh - 120px) * 9 / 16));
  }

  .web-garden-scene-workbench,
  .web-garden-scene-workbench.is-shop-open {
    grid-template-columns: 1fr;
  }

  .web-garden-shop-toggle {
    top: 112px;
    right: 8px;
    width: 66px;
    transform: none;
  }

  .web-garden-background-shop {
    max-height: none;
  }

  .web-garden-background-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 440px;
  }

  .web-garden-stage-panel {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 11px;
  }

  .web-garden-arrange-head {
    align-items: stretch;
    flex-direction: column;
  }

  .web-garden-arrange-list,
  .web-garden-main-list {
    grid-template-columns: 1fr;
  }

  .web-garden-stage-panel h3 {
    font-size: 26px;
  }

  .web-garden-student-list {
    grid-template-columns: 1fr;
  }
}

.modal-title-block {
  margin-right: 52px;
}

.modal-title-block h2 {
  margin: 6px 0 8px;
  color: #153b35;
  font-size: 34px;
}

.modal-title-block p {
  margin: 0;
  color: #5d726c;
  font-weight: 800;
}

.create-student-form {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.create-student-form label,
.create-student-form span {
  display: block;
}

.create-student-form span {
  margin-bottom: 8px;
  color: #153b35;
  font-weight: 1000;
}

.create-student-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(48, 94, 77, 0.14);
  border-radius: 14px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #153b35;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.modal-actions .ghost-button,
.modal-actions .primary-button,
.modal-actions .danger-button {
  width: auto;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
}

@media (max-width: 920px) {
  .login-screen {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    padding: 28px 18px 42px;
  }

  .login-visual h1 {
    font-size: clamp(46px, 13vw, 74px);
  }

  .login-visual p {
    font-size: 19px;
  }

  .login-hero-scene {
    height: 220px;
    margin-top: 18px;
  }

  .login-stats {
    grid-template-columns: 1fr;
  }

  .login-stats div {
    min-height: 96px;
  }

  .login-panel {
    border-radius: 30px;
    padding: 28px 22px;
  }

  .login-panel input {
    min-height: 64px;
  }

  .login-panel .primary-button {
    min-height: 66px;
    font-size: 19px;
  }

  .board-screen {
    grid-template-columns: 1fr;
  }

  .side-nav {
    min-height: auto;
  }

  .board-header {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar {
    justify-content: stretch;
  }

  .search-box,
  .search-box input,
  select,
  .toolbar button {
    width: 100%;
  }

  .summary-strip,
  .leader-row,
  .custom-row {
    grid-template-columns: 1fr;
  }
}

/* C reference bitmap skin */
body {
  background:
    var(--c-bg);
}

.board-screen {
  grid-template-columns: var(--c-sidebar-width) 1fr;
}

/* Bitmap login skin: generated visual, real form controls are mapped on top. */
.login-screen {
  --login-stage-w: min(100vw, calc(100vh * 1672 / 941));
  --login-stage-h: min(100vh, calc(100vw * 941 / 1672));
  display: block;
  position: relative;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(245, 252, 235, 0.22), rgba(226, 245, 214, 0.34)),
    url("./assets/login-class-pet-world.png") center / cover no-repeat,
    #eaf7df;
}

.login-screen::before {
  display: none;
}

.login-nature-bg {
  position: absolute;
  left: calc(50% - var(--login-stage-w) / 2);
  top: calc(50% - var(--login-stage-h) / 2);
  width: var(--login-stage-w);
  height: var(--login-stage-h);
  display: block;
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  filter: none;
  box-shadow: 0 0 70px rgba(54, 92, 52, 0.1);
}

.login-visual {
  display: none;
}

.login-panel {
  position: absolute;
  left: calc(50% - var(--login-stage-w) / 2 + var(--login-stage-w) * 0.616);
  top: calc(50% - var(--login-stage-h) / 2 + var(--login-stage-h) * 0.168);
  width: calc(var(--login-stage-w) * 0.335);
  height: calc(var(--login-stage-h) * 0.69);
  z-index: 2;
  padding: calc(var(--login-stage-h) * 0.105) calc(var(--login-stage-w) * 0.025) calc(var(--login-stage-h) * 0.065);
  border: calc(var(--login-stage-w) * 0.0022) solid rgba(255, 255, 255, 0.84);
  border-radius: calc(var(--login-stage-w) * 0.035);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.38) 52%, rgba(244, 251, 229, 0.46)),
    rgba(246, 250, 232, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(178, 205, 153, 0.32),
    0 16px 42px rgba(40, 86, 58, 0.12);
  backdrop-filter: blur(7px);
  overflow: hidden;
}

.login-panel::before,
.login-panel-leaf {
  display: none;
}

.login-panel h2 {
  display: block;
  margin: 0 0 calc(var(--login-stage-h) * 0.04);
  color: #2f7032;
  font-size: clamp(24px, calc(var(--login-stage-w) * 0.024), 46px);
  line-height: 1.12;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.login-panel h2::after {
  content: "";
  display: block;
  width: 28%;
  height: 1px;
  margin: calc(var(--login-stage-h) * 0.022) auto 0;
  background: linear-gradient(90deg, transparent, rgba(95, 138, 66, 0.56), transparent);
}

.login-panel label span {
  display: none;
}

.login-panel label {
  position: absolute;
  left: 8%;
  width: 84.5%;
  height: 12.8%;
  display: block;
  border: 1px solid rgba(208, 218, 202, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 14px rgba(52, 89, 58, 0.08);
  overflow: hidden;
}

.login-panel label:nth-of-type(1) {
  top: 32.2%;
}

.login-panel label:nth-of-type(2) {
  top: 48.5%;
}

.login-panel input {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 clamp(18px, 1.5vw, 28px) 0 clamp(58px, 4.7vw, 86px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #34443f;
  font-size: clamp(15px, calc(var(--login-stage-w) * 0.0115), 21px);
  font-weight: 750;
}

.login-panel input::placeholder {
  color: rgba(89, 96, 93, 0.72);
}

.login-panel input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.18);
}

.login-panel label:focus-within {
  border-color: rgba(98, 155, 104, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(78, 147, 93, 0.15),
    0 8px 18px rgba(52, 89, 58, 0.1);
}

.login-panel label::before {
  content: "";
  position: absolute;
  left: 6.2%;
  top: 50%;
  width: clamp(20px, calc(var(--login-stage-w) * 0.018), 34px);
  height: clamp(20px, calc(var(--login-stage-w) * 0.018), 34px);
  transform: translateY(-50%);
  opacity: 0.72;
  background: currentColor;
}

.login-panel label:nth-of-type(1)::before {
  color: #4f5753;
  border-radius: 999px 999px 52% 52%;
  clip-path: path("M12 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm0 2c-5.2 0-9.5 3.2-9.5 7.2 0 .7.6 1.3 1.3 1.3h16.4c.7 0 1.3-.6 1.3-1.3 0-4-4.3-7.2-9.5-7.2Z");
}

.login-panel label:nth-of-type(2)::before {
  color: #4f5753;
  border-radius: 4px;
  clip-path: path("M6 10V7.5A6 6 0 0 1 18 7.5V10h1.2c1 0 1.8.8 1.8 1.8v8.4c0 1-.8 1.8-1.8 1.8H4.8c-1 0-1.8-.8-1.8-1.8v-8.4c0-1 .8-1.8 1.8-1.8H6Zm2.4 0h7.2V7.5a3.6 3.6 0 0 0-7.2 0V10Z");
}

.login-panel .primary-button {
  position: absolute;
  left: 8%;
  top: 67.2%;
  width: 85%;
  height: 13.2%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  color: #ffffff;
  font-size: clamp(18px, calc(var(--login-stage-w) * 0.016), 30px);
  font-weight: 900;
  letter-spacing: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 85% 42%, rgba(115, 175, 84, 0.28), transparent 24%),
    linear-gradient(180deg, #5aa944 0%, #207f49 58%, #12683e 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 0 rgba(16, 91, 50, 0.32),
    0 8px 16px rgba(34, 86, 50, 0.25);
}

.login-panel .primary-button:focus-visible {
  opacity: 1;
  outline: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 0 rgba(16, 91, 50, 0.32),
    0 0 0 4px rgba(74, 149, 78, 0.2),
    0 8px 16px rgba(34, 86, 50, 0.25);
}

.login-panel .login-admin-button {
  position: absolute;
  left: 8%;
  top: 81.6%;
  width: 85%;
  height: 8.2%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #357ea2, #246883);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    0 8px 16px rgba(36, 104, 131, 0.22);
  font-size: clamp(15px, calc(var(--login-stage-w) * 0.012), 22px);
  font-weight: 1000;
}

.login-panel .form-tip {
  position: absolute;
  left: 9%;
  bottom: 5.5%;
  display: block;
  margin: 0;
  color: rgba(60, 79, 65, 0.82);
  font-size: clamp(12px, calc(var(--login-stage-w) * 0.0095), 18px);
  line-height: 1.4;
  font-weight: 700;
}

.login-panel .form-tip::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.55em;
  vertical-align: -0.18em;
  border-radius: 0.28em;
  background: #4d9a55;
  clip-path: polygon(50% 0, 88% 16%, 88% 58%, 50% 100%, 12% 58%, 12% 16%);
}

/* Responsive login rebuild: keep the scenery clean, render text and form as real UI. */
.login-screen {
  min-height: 100vh;
  height: auto;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(520px, 1.12fr) minmax(380px, 520px);
  gap: clamp(32px, 5vw, 78px);
  align-items: center;
  padding: clamp(28px, 4.2vw, 68px) clamp(30px, 5.8vw, 108px);
  background:
    radial-gradient(circle at 30% 5%, rgba(255, 247, 189, 0.64), transparent 27%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(232, 248, 224, 0.18)),
    url("../miniprogram/images/ui/record/record_bg_forest_soft.png") center / cover no-repeat,
    #edf8e7;
}

.login-nature-bg {
  display: none;
}

.login-visual {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.login-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2f6f36;
  font-size: clamp(15px, 1.18vw, 20px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-kicker span {
  width: 18px;
  height: 12px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #69a94c, #2f7c36);
  transform: rotate(-20deg);
}

.login-visual h1 {
  max-width: 860px;
  margin: 12px 0 14px;
  color: #2f6f2f;
  font-family: "PingFang SC", "Microsoft YaHei", "STKaiti", "KaiTi", sans-serif;
  font-size: clamp(56px, 6.1vw, 108px);
  line-height: 1.02;
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 rgba(255, 255, 255, 0.7),
    0 12px 28px rgba(50, 94, 42, 0.16);
}

.login-visual > p {
  max-width: 820px;
  margin: 0;
  color: #3f713b;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.35;
  font-weight: 700;
}

.login-hero-scene {
  position: relative;
  width: min(100%, 900px);
  height: clamp(220px, 26vw, 360px);
  margin-top: clamp(26px, 3vw, 44px);
  overflow: visible;
}

.login-hero-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  border-radius: 55% 55% 16px 16px / 42% 42% 16px 16px;
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 255, 255, 0.62), transparent 18%),
    linear-gradient(180deg, rgba(195, 235, 166, 0.42), rgba(91, 160, 75, 0.56));
  box-shadow: inset 0 -20px 42px rgba(49, 105, 55, 0.12);
}

.login-hero-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  background:
    radial-gradient(circle at 10% 75%, rgba(255, 255, 255, 0.75) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.72) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 78%, rgba(255, 230, 126, 0.8) 0 4px, transparent 5px);
  opacity: 0.72;
}

.login-hero-scene .login-sunbeam,
.login-hero-scene .login-hill {
  display: none;
}

.login-pet {
  position: absolute;
  bottom: 5%;
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(54, 88, 54, 0.18));
}

.login-pet-sheep {
  left: 2%;
  width: 26%;
}

.login-pet-chameleon {
  left: 26%;
  bottom: 2%;
  width: 20%;
}

.login-pet-rabbit {
  left: 47%;
  bottom: 4%;
  width: 19%;
}

.login-pet-dog {
  left: 66%;
  bottom: 3%;
  width: 27%;
}

.login-stats {
  width: min(100%, 900px);
  margin-top: clamp(16px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.login-stats div {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 24px rgba(56, 100, 58, 0.12);
  backdrop-filter: blur(6px);
}

.login-stats img {
  grid-row: 1 / 4;
  width: 52px;
  height: 52px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(232, 246, 221, 0.9);
}

.login-stats span {
  color: #3e7b38;
  font-size: 18px;
  font-weight: 900;
}

.login-stats strong {
  color: #1d3d2f;
  font-size: clamp(22px, 1.75vw, 30px);
  line-height: 1.12;
  font-weight: 1000;
}

.login-stats em {
  color: rgba(42, 62, 50, 0.76);
  font-size: 14px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 700;
}

.login-panel {
  position: relative;
  left: auto;
  top: auto;
  z-index: 2;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(34px, 4vw, 58px) clamp(28px, 3.6vw, 48px);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: clamp(26px, 3.2vw, 48px);
  background:
    radial-gradient(circle at 70% 0%, rgba(255, 255, 255, 0.86), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 231, 0.72));
  box-shadow:
    inset 0 0 0 1px rgba(174, 204, 154, 0.28),
    0 22px 52px rgba(45, 82, 48, 0.15);
  backdrop-filter: blur(9px);
}

.login-panel h2 {
  margin-bottom: clamp(28px, 3.4vw, 44px);
  font-size: clamp(30px, 3vw, 46px);
}

.login-panel label {
  position: relative;
  left: auto;
  top: auto !important;
  width: 100%;
  height: clamp(58px, 5.4vw, 78px);
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  border-radius: 999px;
}

.login-panel input {
  font-size: clamp(16px, 1.35vw, 21px);
  padding-left: clamp(58px, 5vw, 78px);
}

.login-panel label::before {
  width: clamp(22px, 2vw, 32px);
  height: clamp(22px, 2vw, 32px);
}

.login-panel .primary-button {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: clamp(60px, 5.6vw, 82px);
  margin-top: clamp(8px, 1vw, 14px);
  font-size: clamp(20px, 1.8vw, 30px);
}

.login-panel .form-tip {
  position: relative;
  left: auto;
  bottom: auto;
  margin-top: clamp(20px, 2.2vw, 30px);
  font-size: clamp(14px, 1.1vw, 17px);
}

@media (max-width: 1100px) {
  .login-screen {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 26px 20px 34px;
  }

  .login-visual {
    align-items: center;
    text-align: center;
  }

  .login-hero-scene {
    height: clamp(170px, 34vw, 260px);
  }

  .login-stats {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .login-panel {
    width: min(100%, 520px);
    justify-self: center;
  }
}

/* Final login bitmap mode: keep the approved scene; only real input hints sit on top. */
.login-screen {
  --login-stage-w: min(100vw, calc(100vh * 1672 / 941));
  --login-stage-h: min(100vh, calc(100vw * 941 / 1672));
  display: block;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(239, 249, 230, 0.9), rgba(226, 243, 215, 0.9)),
    #eaf7df;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: url("./assets/login-class-pet-world-clean-fields.png?v=20260603-banban-yangchong") center / cover no-repeat;
  filter: blur(10px) saturate(1.08);
  opacity: 0.42;
  transform: scale(1.04);
}

.login-nature-bg {
  position: absolute;
  left: calc(50% - var(--login-stage-w) / 2);
  top: calc(50% - var(--login-stage-h) / 2);
  width: var(--login-stage-w);
  height: var(--login-stage-h);
  display: block;
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  box-shadow: none;
}

.login-visual {
  display: none;
}

.login-panel {
  position: absolute;
  left: calc(50% - var(--login-stage-w) / 2 + var(--login-stage-w) * 0.616);
  top: calc(50% - var(--login-stage-h) / 2 + var(--login-stage-h) * 0.168);
  width: calc(var(--login-stage-w) * 0.335);
  height: calc(var(--login-stage-h) * 0.69);
  z-index: 2;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.login-panel::before,
.login-panel-leaf,
.login-panel h2,
.login-panel label span,
.login-panel .form-tip {
  display: none;
}

.login-panel label {
  position: absolute;
  left: 8.2%;
  width: 84.5%;
  height: 12.8%;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.login-panel label:nth-of-type(1) {
  top: 32.2% !important;
}

.login-panel label:nth-of-type(2) {
  top: 48.5% !important;
  transform: translateY(-10px);
}

.login-panel label::before {
  content: none;
}

.login-panel input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 clamp(18px, calc(var(--login-stage-w) * 0.018), 32px) 0 clamp(66px, calc(var(--login-stage-w) * 0.052), 92px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #2f3f3b;
  caret-color: #1f8a45;
  font-size: clamp(14px, calc(var(--login-stage-w) * 0.0115), 20px);
  font-weight: 760;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#passwordInput {
  transform: none;
}

.login-panel input::placeholder {
  color: rgba(62, 74, 70, 0.62);
  opacity: 1;
}

@media (max-width: 760px) {
  .login-panel input {
    padding-right: clamp(8px, calc(var(--login-stage-w) * 0.018), 18px);
    padding-left: clamp(34px, calc(var(--login-stage-w) * 0.06), 58px);
    font-size: clamp(9px, calc(var(--login-stage-w) * 0.019), 12px);
  }
}

.teacher-register-entry {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: calc(50% - var(--login-stage-w) / 2 + var(--login-stage-w) * 0.616 + var(--login-stage-w) * 0.335 * 0.08);
  top: calc(50% - var(--login-stage-h) / 2 + var(--login-stage-h) * 0.168 + var(--login-stage-h) * 0.69 * 0.945);
  width: calc(var(--login-stage-w) * 0.335 * 0.85);
  height: calc(var(--login-stage-h) * 0.69 * 0.045);
  min-height: 0;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: rgba(25, 92, 51, 0.92);
  box-shadow: none;
  font-size: clamp(10px, calc(var(--login-stage-w) * 0.0095), 16px);
  font-weight: 900;
  text-decoration: none;
}

.teacher-register-entry:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 138, 103, 0.2);
}

.login-announcement-entry {
  position: absolute;
  z-index: 3;
  --announcement-bell-size: clamp(14px, calc(var(--login-stage-w) * 0.018), 24px);
  left: calc(50% - var(--login-stage-w) / 2 + var(--login-stage-w) * 0.616 + var(--login-stage-w) * 0.335 * 0.055);
  top: calc(50% - var(--login-stage-h) / 2 + var(--login-stage-h) * 0.168 + var(--login-stage-h) * 0.69 * 0.055);
  width: clamp(62px, calc(var(--login-stage-w) * 0.086), 112px);
  height: clamp(22px, calc(var(--login-stage-w) * 0.032), 38px);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(10px, calc(var(--login-stage-w) * 0.014), 18px) 0 clamp(8px, calc(var(--login-stage-w) * 0.010), 13px);
  border: clamp(1px, calc(var(--login-stage-w) * 0.0011), 2px) solid rgba(28, 154, 132, 0.66);
  border-radius: 999px;
  background: rgba(246, 255, 250, 0.92);
  color: #187c70;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 14px rgba(30, 113, 93, 0.10);
  backdrop-filter: blur(5px);
}

.login-announcement-entry::before,
.login-announcement-entry::after {
  content: "";
  position: absolute;
  right: clamp(5px, calc(var(--login-stage-w) * 0.007), 9px);
  width: clamp(5px, calc(var(--login-stage-w) * 0.007), 9px);
  height: clamp(3px, calc(var(--login-stage-w) * 0.004), 5px);
  border-radius: 9px 0 9px 0;
  background: linear-gradient(135deg, #8fd073, #35a866);
  transform-origin: left center;
}

.login-announcement-entry::before {
  top: clamp(5px, calc(var(--login-stage-w) * 0.0065), 8px);
  transform: rotate(-28deg);
}

.login-announcement-entry::after {
  bottom: clamp(5px, calc(var(--login-stage-w) * 0.0065), 8px);
  transform: rotate(28deg);
}

.login-announcement-entry.is-unread span {
  position: absolute;
  left: calc(var(--announcement-bell-size) * -0.38);
  top: calc(var(--announcement-bell-size) * -0.54);
  width: var(--announcement-bell-size);
  height: var(--announcement-bell-size);
  overflow: visible;
  clip: auto;
  transform-origin: center 2px;
  animation: announcementBellSwing 1.25s ease-in-out infinite;
}

.login-announcement-entry .announcement-bell-cap {
  position: absolute;
  left: 37.5%;
  top: 4%;
  width: 25%;
  height: 16%;
  border-radius: 999px 999px 1px 1px;
  background: linear-gradient(180deg, #fff0a8, #f6c35a);
  border: 1px solid rgba(178, 124, 32, 0.28);
  border-bottom: 0;
  box-sizing: border-box;
}

.login-announcement-entry .announcement-bell-body {
  position: absolute;
  left: 16.5%;
  top: 21%;
  width: 67%;
  height: 62%;
  border-radius: 44% 44% 22% 22%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #ffe58a, #f2b748 76%, #df9c2e);
  border: 1px solid rgba(168, 111, 26, 0.42);
  box-shadow: 0 3px 7px rgba(154, 104, 26, 0.16);
  box-sizing: border-box;
}

.login-announcement-entry .announcement-bell-mouth {
  position: absolute;
  left: 12.5%;
  top: 71%;
  width: 75%;
  height: 20%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd36a, #d9902b);
  border: 1px solid rgba(158, 103, 24, 0.34);
  box-sizing: border-box;
}

.login-announcement-entry .announcement-bell-clapper {
  position: absolute;
  left: 42%;
  top: 83%;
  width: 16%;
  height: 16%;
  border-radius: 999px;
  background: #b87727;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, 0.62);
}

@keyframes announcementBellSwing {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-16deg); }
  36% { transform: rotate(14deg); }
  54% { transform: rotate(-9deg); }
  72% { transform: rotate(6deg); }
}

.login-announcement-entry:not(.is-unread) #announcementBadge,
.login-announcement-entry em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.login-announcement-entry strong {
  position: relative;
  z-index: 1;
  color: #187c70;
  font-size: clamp(8px, calc(var(--login-stage-w) * 0.012), 15px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 560px), (max-height: 360px) {
  .login-announcement-entry {
    --announcement-bell-size: clamp(7px, calc(var(--login-stage-w) * 0.009), 12px);
    width: clamp(31px, calc(var(--login-stage-w) * 0.043), 56px);
    height: clamp(11px, calc(var(--login-stage-w) * 0.016), 19px);
    padding: 0 clamp(5px, calc(var(--login-stage-w) * 0.007), 9px) 0 clamp(4px, calc(var(--login-stage-w) * 0.005), 7px);
  }

  .login-announcement-entry::before,
  .login-announcement-entry::after {
    right: clamp(3px, calc(var(--login-stage-w) * 0.0035), 5px);
    width: clamp(3px, calc(var(--login-stage-w) * 0.0035), 5px);
    height: clamp(2px, calc(var(--login-stage-w) * 0.002), 3px);
  }

  .login-announcement-entry::before {
    top: clamp(3px, calc(var(--login-stage-w) * 0.0032), 4px);
  }

  .login-announcement-entry::after {
    bottom: clamp(3px, calc(var(--login-stage-w) * 0.0032), 4px);
  }

  .login-announcement-entry strong {
    font-size: clamp(6px, calc(var(--login-stage-w) * 0.006), 8px);
  }
}

@media (min-width: 1800px) and (min-height: 900px) {
  .login-announcement-entry {
    --announcement-bell-size: clamp(35px, calc(var(--login-stage-w) * 0.045), 60px);
    width: clamp(155px, calc(var(--login-stage-w) * 0.215), 280px);
    height: clamp(55px, calc(var(--login-stage-w) * 0.08), 95px);
    padding: 0 clamp(25px, calc(var(--login-stage-w) * 0.035), 45px) 0 clamp(20px, calc(var(--login-stage-w) * 0.025), 33px);
    border-width: clamp(2px, calc(var(--login-stage-w) * 0.0028), 5px);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.82),
      0 15px 35px rgba(30, 113, 93, 0.10);
  }

  .login-announcement-entry::before,
  .login-announcement-entry::after {
    right: clamp(13px, calc(var(--login-stage-w) * 0.0175), 23px);
    width: clamp(13px, calc(var(--login-stage-w) * 0.0175), 23px);
    height: clamp(8px, calc(var(--login-stage-w) * 0.01), 13px);
  }

  .login-announcement-entry::before {
    top: clamp(13px, calc(var(--login-stage-w) * 0.016), 20px);
  }

  .login-announcement-entry::after {
    bottom: clamp(13px, calc(var(--login-stage-w) * 0.016), 20px);
  }

  .login-announcement-entry strong {
    font-size: clamp(20px, calc(var(--login-stage-w) * 0.03), 38px);
  }
}

.announcement-dialog {
  position: relative;
  width: min(560px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 252, 236, 0.98), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(151, 112, 34, 0.16);
  box-shadow: 0 28px 80px rgba(36, 66, 52, 0.26);
}

.announcement-dialog-kicker {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(41, 132, 86, 0.13);
  color: #21724e;
  font-size: 13px;
  font-weight: 1000;
}

.announcement-dialog h2 {
  margin: 12px 44px 6px 0;
  color: #3f3018;
  font-size: 30px;
  line-height: 1.1;
}

.announcement-dialog-date {
  margin: 0;
  color: #8a7657;
  font-size: 14px;
  font-weight: 800;
}

.announcement-dialog-summary {
  margin: 18px 0 0;
  color: #4c3c22;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 900;
}

.announcement-dialog-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.announcement-dialog-list div {
  display: block;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(151, 112, 34, 0.12);
}

.announcement-dialog-list time {
  display: block;
  margin-bottom: 6px;
  color: #8a7657;
  font-size: 13px;
  font-weight: 900;
}

.announcement-dialog-list p {
  margin: 0;
  color: #4c3c22;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 800;
}

.announcement-dialog-content {
  margin: 18px 0 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(246, 201, 93, 0.15);
  color: #6a522b;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 750;
  white-space: pre-wrap;
}

.login-panel input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.login-panel label:focus-within {
  border: 0;
  box-shadow: none;
}

.login-panel .primary-button {
  position: absolute;
  left: 8%;
  top: 67.2%;
  width: 85%;
  height: 13.2%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  color: transparent;
  font-size: 0;
  opacity: 0;
  background: transparent;
  box-shadow: none;
}

.login-panel .primary-button:focus-visible {
  opacity: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.teacher-register-modal {
  width: min(620px, 100%);
}

.teacher-register-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.08);
}

.teacher-register-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #38645a;
  font-weight: 1000;
}

.teacher-register-tabs button.is-active {
  background: linear-gradient(180deg, #ffe88c, #ffd34f);
  color: #153b35;
  box-shadow: 0 8px 14px rgba(139, 113, 28, 0.16);
}

.teacher-register-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.teacher-register-form label,
.teacher-register-form span {
  display: block;
}

.teacher-register-form span {
  margin-bottom: 8px;
  color: #153b35;
  font-weight: 1000;
}

.teacher-register-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(48, 94, 77, 0.14);
  border-radius: 14px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #153b35;
  outline: none;
}

.teacher-register-form input:focus {
  border-color: rgba(47, 138, 103, 0.54);
  box-shadow: 0 0 0 4px rgba(47, 138, 103, 0.12);
}

.teacher-register-tip {
  margin: 2px 0 0;
  color: #5d726c;
  font-weight: 850;
  line-height: 1.5;
}

.teacher-register-modal.is-teacher-register .register-parent-only,
.teacher-register-modal.is-parent-register .register-teacher-only {
  display: none;
}

@media (max-width: 760px) {
  .teacher-register-entry {
    background: transparent;
    font-size: clamp(8px, calc(var(--login-stage-w) * 0.018), 11px);
  }

  .teacher-register-modal {
    padding: 22px;
  }
}

.side-nav {
  padding: 34px 18px;
  gap: 24px;
  background:
    linear-gradient(180deg, rgba(0, 134, 100, 0.84), rgba(0, 105, 83, 0.88)),
    url("./assets/ui/sidebar-bg.png") center / cover no-repeat,
    var(--c-nav-bottom);
  box-shadow: 12px 0 38px rgba(0, 89, 63, 0.18);
}

.side-nav::before {
  content: none;
}

.side-brand {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 14px;
  align-items: center;
}

.side-brand img {
  grid-row: span 2;
  width: 68px;
  height: 68px;
}

.side-brand .brand-kicker {
  color: rgba(255, 255, 255, 0.9);
}

.side-brand h2 {
  margin: 4px 0 0;
  font-size: 34px;
  line-height: 1;
}

.class-tab {
  min-height: 96px;
  border-radius: 22px;
  padding: 18px 44px 18px 86px;
  position: relative;
}

.class-tab-icon {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(129, 229, 156, 0.95), rgba(66, 194, 119, 0.92));
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.28), 0 8px 18px rgba(0, 87, 54, 0.15);
}

.class-tab-icon::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: #fff;
  -webkit-mask: var(--class-icon) center / contain no-repeat;
  mask: var(--class-icon) center / contain no-repeat;
}

.class-tab[data-kind="all"] {
  --class-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M25 29c7.2 0 13-5.8 13-13S32.2 3 25 3 12 8.8 12 16s5.8 13 13 13Zm-1 5C12.4 34 5 40.6 5 50.8V58h39v-7.2C44 40.6 36.5 34 24 34Zm22.2-3c5.6 0 10-4.4 10-10s-4.4-10-10-10c-2.4 0-4.6.8-6.3 2.2.8 2 1.1 4.1 1.1 6.4 0 3.8-1.2 7.2-3.3 10 2 .9 4.8 1.4 8.5 1.4Zm1.2 4c-2.8 0-5.3.4-7.4 1.2 4.4 3.1 7.2 7.9 7.2 14.6V58H59v-6.7C59 41.4 54.5 35 47.4 35Z'/%3E%3C/svg%3E");
}

.class-tab[data-kind="class"] {
  --class-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M9 11.5C9 8.5 11.5 6 14.5 6H27c5.4 0 9.1 1.9 11 5.7C39.9 7.9 43.6 6 49 6h.5c3 0 5.5 2.5 5.5 5.5V50c0 2.2-1.8 4-4 4h-4.7c-3 0-5.7.8-8.3 2.5-2.6-1.7-5.3-2.5-8.3-2.5H13c-2.2 0-4-1.8-4-4V11.5Zm6 2.5v34h14.7c2.3 0 4.4.4 6.3 1.3V16c-.8-1.3-2.6-2-5.4-2H15Zm25 2v33.3c1.9-.9 4-1.3 6.3-1.3H49V14h-.6c-4.2 0-6.9.7-8.4 2Z'/%3E%3C/svg%3E");
}

.class-tab::after {
  content: "›";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
  line-height: 1;
}

.class-tab span {
  margin-top: 6px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.86);
}

.class-tab.is-active {
  background: linear-gradient(180deg, #ffe88c, var(--c-yellow));
  border: 4px solid #fff7c7;
  color: var(--c-ink);
  box-shadow: 0 14px 28px rgba(139, 113, 28, 0.22);
}

.class-tab.is-active .class-tab-icon {
  background: linear-gradient(145deg, #fff8d5, #fff0a6);
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.55), 0 8px 18px rgba(157, 124, 28, 0.18);
}

.class-tab.is-active .class-tab-icon::before {
  background: #f6bd28;
}

.side-mascot,
.classroom-scene,
#sortSelect,
#refreshButton {
  display: none;
}

.board-main {
  padding: 42px var(--c-page-pad) 32px;
  background:
    linear-gradient(rgba(238, 249, 239, 0.02), rgba(238, 249, 239, 0.02)),
    url("./assets/ui/classroom-bg.png") center / cover no-repeat;
  min-height: 100vh;
}

.board-header {
  min-height: 78px;
}

.board-header h1 {
  margin: 0;
  font-size: clamp(52px, 4.8vw, 76px);
  color: var(--c-ink);
  text-shadow: 0 4px 0 rgba(16, 101, 76, 0.08);
}

.search-box input {
  width: 330px;
  min-height: 64px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(35, 109, 75, 0.08);
}

.summary-strip {
  gap: 0;
  min-height: var(--c-summary-height);
  margin: 20px 0 34px;
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: 22px;
  box-shadow: var(--c-shadow);
  overflow: hidden;
}

.summary-strip div {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 30px 44px 26px 138px;
  box-shadow: none;
  position: relative;
}

.summary-strip div + div {
  border-left: 2px solid rgba(26, 91, 70, 0.12);
}

.summary-strip div::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 50%;
  width: 86px;
  height: 86px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5), transparent 29%), linear-gradient(145deg, #70d978 0%, #36ad54 100%);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.08), inset 0 3px 8px rgba(255, 255, 255, 0.26), 0 6px 13px rgba(25, 111, 76, 0.18);
}

.summary-strip div::after {
  content: "";
  position: absolute;
  left: 68px;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  background: #fff;
  -webkit-mask: var(--summary-icon) center / contain no-repeat;
  mask: var(--summary-icon) center / contain no-repeat;
}

.summary-strip div:nth-child(1) {
  --summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='black' d='M27 33c7.2 0 13-5.8 13-13S34.2 7 27 7 14 12.8 14 20s5.8 13 13 13Zm20.5 2c5.8 0 10.5-4.7 10.5-10.5S53.3 14 47.5 14c-2.8 0-5.4 1.1-7.2 2.9.7 2.1 1.1 4.3 1.1 6.7 0 3.9-1.1 7.5-3.1 10.6 2.3.6 5.4.8 9.2.8ZM5 58c0-11 8.7-20 22-20s22 9 22 20v5H5v-5Zm39.5-18.2C57 40.9 67 48.1 67 60.2V63H53v-5c0-7.7-3.2-14.1-8.5-18.2Z'/%3E%3C/svg%3E");
}

.summary-strip div:nth-child(2)::before {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 29%), linear-gradient(145deg, #ffd967 0%, #f3ad21 100%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.08), 0 6px 13px rgba(203, 143, 17, 0.2);
}

.summary-strip div:nth-child(2) {
  --summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='black' d='M36 5 44.2 16.8 58.5 18.4 60.1 32.8 70 43.3 63 56 63.8 70.4 49.7 73.2 36 80 22.3 73.2 8.2 70.4 9 56 2 43.3 11.9 32.8 13.5 18.4 27.8 16.8 36 5Zm0 13.5 5.5 10.9 12.1 1.8-8.8 8.5 2.1 12.1L36 46.1 25.1 51.8l2.1-12.1-8.8-8.5 12.1-1.8L36 18.5Z' transform='translate(0 -6)'/%3E%3C/svg%3E");
}

.summary-strip div:nth-child(3)::before {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 29%), linear-gradient(145deg, #4aa9ff 0%, #1679d6 100%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.08), 0 6px 13px rgba(21, 107, 181, 0.2);
}

.summary-strip div:nth-child(3) {
  --summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='black' d='M19 9h34v8h12v9c0 10.9-6.4 19.5-16.2 22.2A17.5 17.5 0 0 1 40 55v7h13v7H19v-7h13v-7a17.5 17.5 0 0 1-8.8-6.8C13.4 45.5 7 36.9 7 26v-9h12V9Zm7 7v19c0 7.4 4.4 13.4 10 13.4S46 42.4 46 35V16H26Zm27 8v2c0 5.2-2.1 9.6-5.8 12.5.6-2.3.8-4.8.8-7.5v-7h5ZM14 24h5v7c0 2.7.2 5.2.8 7.5C16.1 35.6 14 31.2 14 26v-2Zm16.5 1 4.4-.6 2-4 2 4 4.4.6-3.2 3.1.8 4.4-4-2.1-4 2.1.8-4.4-3.2-3.1Z'/%3E%3C/svg%3E");
}

.summary-strip strong {
  margin-top: 8px;
  font-size: 66px;
  line-height: 1;
  color: var(--c-ink-2);
  font-weight: 1000;
}

.summary-strip span {
  color: #1f342e;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 1000;
}

.leader-row {
  grid-template-columns: minmax(0, 460px) minmax(0, 500px) minmax(0, 460px);
  justify-content: center;
  gap: clamp(18px, 1.8vw, 30px);
  margin-bottom: 26px;
  align-items: end;
}

.leader-card {
  width: 100%;
  max-width: 460px;
  min-height: 0;
  aspect-ratio: var(--podium-aspect, 1.46);
  container-type: inline-size;
  display: block;
  position: relative;
  padding: 14% 5% 8% 8%;
  background: var(--podium-card) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.leader-card.rank-1 {
  --podium-card: url("./assets/ui/slices/podium-card-rank1-reference-numbered-alpha.png");
  --podium-aspect: 627 / 436;
  max-width: 500px;
  background: url("./assets/ui/slices/podium-card-rank1-reference-numbered-alpha.png") center / 100% 100% no-repeat;
}

.leader-card.rank-2 {
  --podium-card: url("./assets/ui/slices/podium-card-rank2-reference-numbered-alpha.png");
  --podium-aspect: 561 / 382;
  background: url("./assets/ui/slices/podium-card-rank2-reference-numbered-alpha.png") center / 100% 100% no-repeat;
}

.leader-card.rank-3 {
  --podium-card: url("./assets/ui/slices/podium-card-rank3-reference-numbered-alpha.png");
  --podium-aspect: 539 / 365;
  background: url("./assets/ui/slices/podium-card-rank3-reference-numbered-alpha.png") center / 100% 100% no-repeat;
}

.leader-card::after {
  content: none;
}

.leader-card .rank-mark {
  display: none !important;
  position: absolute;
  left: var(--rank-x, 10%);
  top: var(--rank-y, 24%);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: var(--rank-size, 10%);
  aspect-ratio: 1;
  height: auto;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: #123930;
  font-size: clamp(24px, 7.2cqw, 42px);
  font-weight: 1000;
  line-height: 1;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.leader-card.rank-1 .rank-mark {
  --rank-x: 12.7%;
  --rank-y: 25.6%;
  --rank-size: 10.2%;
}

.leader-card.rank-2 .rank-mark {
  --rank-x: 11.2%;
  --rank-y: 26.2%;
  --rank-size: 10.4%;
}

.leader-card.rank-3 .rank-mark {
  --rank-x: 10.7%;
  --rank-y: 27.8%;
  --rank-size: 10%;
}

.leader-card > div:not(.rank-mark) {
  position: absolute;
  left: calc(var(--leader-text-left, 64%) - 40px);
  top: var(--leader-text-top, 52%);
  width: var(--leader-text-width, 30%);
  min-width: 0;
  transform: translateY(-50%);
  z-index: 2;
}

.leader-pet {
  position: absolute;
  left: var(--leader-pet-left, 34%);
  top: var(--leader-pet-top, 55%);
  width: calc(var(--leader-pet-size, 48%) * 1.5);
  height: calc(var(--leader-pet-size, 48%) * 1.5);
  transform: translate(-50%, -50%);
  transform-origin: center;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(54, 86, 67, 0.2));
  z-index: 1;
}

.leader-card.rank-1 .leader-pet {
  --leader-pet-left: 35%;
  --leader-pet-top: 56%;
  --leader-pet-size: 50%;
}

.leader-card.rank-3 .leader-pet {
  --leader-pet-left: 34%;
  --leader-pet-top: 56%;
  --leader-pet-size: 49%;
}

.leader-card h3 {
  font-size: clamp(36px, 8.8cqw, 54px);
  line-height: 1.15;
  color: var(--c-ink);
  white-space: nowrap;
}

.leader-card p:first-of-type {
  margin-top: 12px;
  font-size: clamp(21px, 5.2cqw, 30px);
  font-weight: 900;
}

.leader-card p:first-of-type::first-letter {
  color: inherit;
}

.leader-card p {
  font-size: clamp(17px, 4cqw, 23px);
  line-height: 1.34;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .leader-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .leader-card,
  .leader-card.rank-1 {
    width: min(100%, 560px);
    min-height: 0;
  }
}

.student-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 330px));
  justify-content: start;
  gap: 18px;
}

.student-card {
  width: 100%;
  max-width: 330px;
  min-height: 190px;
  container-type: inline-size;
  aspect-ratio: auto;
  padding: 12px 12px 14px 12px;
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfffb 100%);
  border: 1px solid rgba(194, 222, 203, 0.78);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(33, 80, 67, 0.12);
  overflow: visible;
}

.student-card h3 {
  white-space: nowrap;
}

.student-card::before,
.student-card::after {
  content: none;
}

.student-card .student-pet {
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
}

.student-card .student-pet img,
.modal-student img {
  width: min(156px, 112%);
  height: min(150px, 100%);
  max-height: clamp(118px, 9vw, 150px);
  transform: translateY(0) scale(1.02);
  transform-origin: center center;
}

.student-card .student-pet .web-no-pet-avatar {
  width: min(156px, 112%);
  height: min(150px, 100%);
  max-height: clamp(118px, 9vw, 150px);
  min-height: 112px;
  transform: translateY(0) scale(1.02);
  transform-origin: center center;
  border-radius: 18px;
}

.student-card .student-pet .web-no-pet-avatar i {
  width: 34%;
  height: 30%;
}

.student-card .student-pet .web-no-pet-avatar i::before {
  top: -54%;
  width: 44%;
  height: 50%;
  box-shadow: 56% 0 0 #7fb99b;
}

.student-card .student-pet .web-no-pet-avatar i::after {
  top: -80%;
  left: 28%;
  width: 44%;
  height: 50%;
}

.student-card .student-info {
  min-width: 0;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  justify-items: start;
  padding: 10px clamp(8px, 0.65vw, 12px) 0 0;
}

.student-card .student-info h3 {
  font-size: 26px;
  line-height: 1.08;
  color: #153b35;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.student-card .student-class {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: #5d726c;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
}

.student-score strong {
  color: #168756;
  font-size: clamp(30px, calc(56px - var(--score-digits, 3) * 3px), 42px);
  line-height: 0.95;
  font-weight: 1000;
  letter-spacing: 0;
}

.student-score span {
  color: #365650;
  font-size: 17px;
  font-weight: 900;
}

.student-card .student-actions {
  width: 100%;
  margin-top: clamp(8px, 4.2cqw, 14px);
  padding-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  justify-self: start;
}

.student-card .student-actions button {
  min-height: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 8px 14px rgba(33, 80, 67, 0.14);
}

.student-card .student-actions button span {
  flex: 0 0 auto;
  width: clamp(14px, 1.25vw, 17px);
  height: clamp(14px, 1.25vw, 17px);
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 1000;
}

.student-card .student-actions .secondary-button span {
  color: #1f79b2;
}

.student-card .student-actions .danger-button span {
  color: #bd3e45;
}

/* Adaptive board scaling: keep the big-screen style, but let it breathe on smaller windows. */
.board-screen {
  --board-sidebar: clamp(220px, 14.8vw, 300px);
  --board-pad: clamp(18px, 1.65vw, 32px);
  --board-gap: clamp(10px, 0.85vw, 16px);
  --board-radius: clamp(14px, 1.1vw, 22px);
  grid-template-columns: var(--board-sidebar) minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.side-nav {
  padding: clamp(18px, 1.65vw, 34px) clamp(12px, 0.9vw, 18px);
  gap: clamp(12px, 1.15vw, 24px);
  overflow-y: auto;
}

.side-brand {
  grid-template-columns: clamp(48px, 3.4vw, 68px) minmax(0, 1fr);
  column-gap: clamp(10px, 0.75vw, 14px);
}

.side-brand img {
  width: clamp(48px, 3.4vw, 68px);
  height: clamp(48px, 3.4vw, 68px);
}

.side-brand .brand-kicker {
  font-size: clamp(12px, 0.82vw, 16px);
  white-space: nowrap;
}

.side-brand h2 {
  font-size: clamp(28px, 2.1vw, 42px);
  white-space: nowrap;
}

.feature-nav {
  gap: clamp(7px, 0.55vw, 10px);
  max-height: clamp(220px, 18vh, 290px);
}

.feature-tab {
  min-height: clamp(50px, 4.2vw, 74px);
  padding: clamp(8px, 0.72vw, 14px) clamp(10px, 0.82vw, 16px);
  border-radius: clamp(12px, 1vw, 18px);
}

.feature-tab span {
  font-size: clamp(11px, 0.75vw, 14px);
}

.feature-tab strong {
  font-size: clamp(14px, 1vw, 20px);
  white-space: normal;
}

.class-tab {
  min-height: clamp(76px, 6.2vw, 112px);
  padding: clamp(14px, 1.1vw, 20px) clamp(34px, 2.2vw, 44px) clamp(14px, 1.1vw, 20px) clamp(68px, 4.6vw, 86px);
  border-radius: clamp(16px, 1.2vw, 22px);
  min-width: 0;
}

.class-tab-icon {
  left: clamp(14px, 1vw, 20px);
  width: clamp(38px, 2.55vw, 52px);
  height: clamp(38px, 2.55vw, 52px);
}

.class-tab::after {
  right: clamp(14px, 1vw, 20px);
  font-size: clamp(28px, 2vw, 36px);
}

.class-tab strong,
.class-tab {
  font-size: clamp(18px, 1.35vw, 26px);
}

.class-tab strong {
  display: block;
  max-width: 100%;
  overflow: visible;
  font-size: var(--class-name-size, clamp(18px, 1.35vw, 26px));
  line-height: 1.12;
  text-overflow: clip;
  white-space: nowrap;
}

.class-tab span {
  max-width: 100%;
  overflow: visible;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.15;
  text-overflow: clip;
  white-space: nowrap;
}

.board-main {
  min-width: 0;
  height: 100vh;
  min-height: 0;
  overflow: auto;
  padding: clamp(24px, 2.15vw, 42px) var(--board-pad) clamp(18px, 1.65vw, 32px);
}

.board-header {
  min-height: clamp(62px, 5vw, 92px);
  gap: clamp(14px, 1.15vw, 24px);
}

.board-header .muted-label {
  font-size: clamp(15px, 1.1vw, 22px);
}

.board-header h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(44px, 4.2vw, 72px);
}

.toolbar {
  min-width: min(360px, 32vw);
  gap: clamp(8px, 0.7vw, 12px);
}

.search-box {
  min-width: min(100%, 260px);
}

.search-box span {
  font-size: clamp(14px, 1vw, 20px);
}

.search-box input {
  width: clamp(220px, 28vw, 330px);
  min-height: clamp(48px, 4.4vw, 64px);
  border-radius: clamp(12px, 1vw, 18px);
  font-size: clamp(16px, 1.2vw, 22px);
}

.summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: clamp(92px, 8.2vw, var(--c-summary-height));
  margin: clamp(12px, 1.3vw, 20px) 0 clamp(18px, 2vw, 34px);
  border-radius: var(--board-radius);
}

.summary-strip div {
  min-width: 0;
  padding: clamp(18px, 1.9vw, 30px) clamp(18px, 2.1vw, 44px) clamp(16px, 1.6vw, 26px) clamp(86px, 7.1vw, 138px);
  overflow: hidden;
}

.summary-strip div::before {
  left: clamp(24px, 2.5vw, 48px);
  width: clamp(54px, 4.4vw, 86px);
  height: clamp(54px, 4.4vw, 86px);
}

.summary-strip div::after {
  left: clamp(37px, 3.18vw, 68px);
  width: clamp(30px, 2.35vw, 46px);
  height: clamp(30px, 2.35vw, 46px);
}

.summary-strip span {
  min-width: 0;
  font-size: clamp(17px, 1.35vw, 24px);
  white-space: nowrap;
}

.summary-strip strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(34px, 3.15vw, 56px);
  white-space: nowrap;
}

.leader-row {
  grid-template-columns: minmax(0, clamp(320px, 24vw, 460px)) minmax(0, clamp(340px, 26vw, 500px)) minmax(0, clamp(320px, 24vw, 460px));
  gap: clamp(12px, 1.4vw, 30px);
  margin-bottom: clamp(16px, 1.6vw, 26px);
}

.leader-card h3 {
  font-size: clamp(28px, 6.8cqw, 50px);
}

.leader-card p:first-of-type {
  font-size: clamp(18px, 4.5cqw, 28px);
}

.leader-card p {
  font-size: clamp(14px, 3.3cqw, 22px);
}

.student-grid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 17vw, 330px), clamp(240px, 17vw, 330px)));
  gap: clamp(12px, 1vw, 18px);
}

.student-card {
  max-width: clamp(240px, 17vw, 330px);
  min-height: clamp(162px, 10.2vw, 190px);
  border-radius: clamp(14px, 1vw, 18px);
  gap: clamp(7px, 0.65vw, 10px);
  padding: clamp(9px, 0.75vw, 12px) clamp(9px, 0.75vw, 12px) clamp(12px, 0.9vw, 14px);
}

.student-card .student-info {
  padding-top: clamp(6px, 0.7vw, 12px);
}

.student-card .student-info h3 {
  font-size: clamp(19px, 1.45vw, 26px);
}

.student-card .student-class {
  font-size: clamp(11px, 0.82vw, 13px);
}

.student-score {
  margin-top: clamp(8px, 1vw, 16px);
}

.student-score strong {
  font-size: clamp(27px, min(2.35vw, calc(48px - var(--score-digits, 3) * 2.2px)), 42px);
}

.student-score span {
  font-size: clamp(13px, 1vw, 17px);
}

.student-card .student-actions {
  margin-top: clamp(7px, 3.8cqw, 13px);
  padding-top: 0;
  gap: clamp(4px, 0.45vw, 8px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  justify-self: start;
}

.student-card .student-actions button {
  height: clamp(30px, 2.3vw, 36px);
  min-height: clamp(30px, 2.3vw, 36px);
  font-size: clamp(11px, 0.82vw, 14px);
  min-width: 0;
  padding: 0 clamp(3px, 0.45vw, 10px);
  flex-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
}

@media (min-width: 900px) and (max-width: 1280px) {
  .student-card {
    min-height: clamp(152px, 16vh, 166px);
  }

  .student-card .student-info {
    padding-top: clamp(6px, 0.6vw, 10px);
    padding-right: clamp(8px, 0.9vw, 12px);
  }

  .student-score {
    margin-top: clamp(6px, 0.75vw, 12px);
  }

  .student-card .student-actions button {
    gap: 2px;
  }

  .student-card .student-actions button span {
    width: clamp(12px, 1.1vw, 15px);
    height: clamp(12px, 1.1vw, 15px);
    font-size: clamp(10px, 0.85vw, 13px);
  }
}

@media (max-width: 1180px) {
  .template-create-form {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .template-create-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .student-card {
    min-height: clamp(152px, 21vw, 162px);
  }
}

@media (max-width: 1360px) {
  .summary-strip strong {
    font-size: clamp(30px, 3vw, 46px);
  }

  .summary-strip div {
    padding-left: clamp(76px, 6.2vw, 102px);
  }
}

@media (max-width: 1280px) {
  .board-header {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar {
    min-width: 0;
    justify-content: flex-start;
  }

  .search-box,
  .search-box input {
    width: min(100%, 360px);
  }

  .leader-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .leader-card,
  .leader-card.rank-1 {
    width: min(100%, 560px);
    max-width: 560px;
  }
}

@media (max-width: 1120px) {
  .board-screen {
    grid-template-columns: clamp(190px, 24vw, 240px) minmax(0, 1fr);
  }

  .feature-nav {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .summary-strip {
    grid-template-columns: 1fr;
  }

  .summary-strip div + div {
    border-left: 0;
    border-top: 2px solid rgba(26, 91, 70, 0.12);
  }
}

@media (min-width: 900px) and (max-width: 1280px) {
  .board-screen {
    --board-sidebar: clamp(205px, 18vw, 224px);
    --board-pad: clamp(14px, 1.35vw, 20px);
    grid-template-columns: var(--board-sidebar) minmax(0, 1fr);
  }

  .board-main {
    padding-top: clamp(18px, 1.65vw, 26px);
  }

  .board-header {
    min-height: 0;
    gap: 10px;
  }

  .board-header .muted-label {
    font-size: clamp(13px, 1.15vw, 16px);
  }

  .board-header h1 {
    font-size: clamp(36px, 4vw, 52px);
  }

  .search-box input {
    width: min(100%, 280px);
    min-height: 46px;
    font-size: 15px;
  }

  .class-tab {
    min-height: clamp(60px, 7.1vh, 78px);
    padding: 11px 30px 11px 56px;
  }

  .class-tab-icon {
    left: 13px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .class-tab-icon::before {
    inset: 8px;
  }

  .class-tab::after {
    right: 12px;
    font-size: 26px;
  }

  .class-tab strong {
    font-size: var(--class-name-size, clamp(15px, 1.45vw, 18px));
  }

  .class-tab span {
    margin-top: 4px;
    font-size: clamp(12px, 1.15vw, 14px);
  }

  .summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 68px;
    margin: 12px 0 16px;
    border-radius: 16px;
  }

  .summary-strip div {
    padding: 10px 10px 9px 50px;
  }

  .summary-strip div + div {
    border-top: 0;
    border-left: 2px solid rgba(26, 91, 70, 0.12);
  }

  .summary-strip div::before {
    left: 16px;
    width: 30px;
    height: 30px;
  }

  .summary-strip div::after {
    left: 23px;
    width: 14px;
    height: 14px;
  }

  .summary-strip span {
    font-size: clamp(13px, 1.25vw, 16px);
  }

  .summary-strip strong {
    margin-top: 3px;
    font-size: clamp(21px, 2.35vw, 29px);
  }

  .leader-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
  }

  .leader-card,
  .leader-card.rank-1 {
    width: 100%;
    max-width: none;
  }

  .leader-card > div:not(.rank-mark) {
    left: calc(var(--leader-text-left, 64%) - 22px);
  }

  .leader-card h3 {
    font-size: clamp(19px, 7.2cqw, 32px);
  }

  .leader-card p:first-of-type {
    margin-top: 6px;
    font-size: clamp(13px, 4.4cqw, 19px);
  }

  .leader-card p {
    font-size: clamp(11px, 3.2cqw, 15px);
  }

  .web-pets-page,
  .web-pets-main,
  .web-pets-detail-panel {
    gap: 10px;
  }

  .web-pets-head {
    min-height: 92px;
    padding: 14px 18px;
  }

  .web-pets-head h2 {
    font-size: clamp(26px, 3.1vw, 36px);
  }

  .web-pets-head p {
    font-size: 14px;
  }

  .web-pets-workbench {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    gap: 10px;
  }

  .web-pets-main,
  .web-pets-owned-panel,
  .web-pets-detail-panel {
    padding: 10px;
  }

  .web-pets-summary div {
    min-height: 64px;
    padding: 10px 12px;
  }

  .web-pets-summary strong {
    font-size: clamp(18px, 2.1vw, 24px);
  }

  .web-pets-content {
    grid-template-columns: minmax(290px, 0.92fr) minmax(300px, 1.08fr);
    gap: 10px;
  }

  .web-pets-owned-list {
    gap: 8px;
    max-height: min(45vh, 390px);
  }

  .web-pets-owned-card {
    min-height: 62px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 8px;
  }

  .web-pets-owned-thumb,
  .web-pets-owned-thumb > img:first-child {
    width: 48px;
    height: 48px;
  }

  .web-pets-owned-thumb .web-pets-owned-hunger-badge {
    width: 48px;
    height: 21px;
  }

  .web-pets-detail-hero {
    min-height: 138px;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .web-pets-detail-hero img {
    width: 112px;
    height: 112px;
  }

  .web-pets-detail-hero h3 {
    font-size: clamp(24px, 2.9vw, 31px);
  }

  .web-pets-progress,
  .web-pets-feed-box {
    gap: 8px;
    padding: 10px;
  }

  .web-pets-feed-buttons .web-pets-feed-image-btn {
    width: clamp(70px, 6.6vw, 86px);
    height: clamp(70px, 6.6vw, 86px);
  }

  .web-pets-feed-buttons .web-pets-feed-image-btn-10 {
    width: clamp(76px, 7.2vw, 94px);
    height: clamp(76px, 7.2vw, 94px);
  }
}

.web-pets-feed-buttons.web-pets-mobile-feed-buttons {
  width: 84%;
  margin: 0 auto 4%;
}

.web-pets-feed-buttons.web-pets-mobile-feed-buttons .web-pets-feed-image-btn {
  width: 22% !important;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 451 / 466;
}

.web-pets-feed-buttons.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-5 {
  aspect-ratio: 452 / 466;
}

.web-pets-feed-buttons.web-pets-mobile-feed-buttons .web-pets-feed-image-btn-10 {
  width: 24% !important;
  height: auto !important;
  aspect-ratio: 474 / 559;
}

.web-pets-mobile-plaque,
.web-pets-mobile-stage {
  transform: translate(-50%, -20px);
}

.web-pets-mobile-stage .web-pets-mobile-pet-image {
  bottom: calc(4% + 8px);
}

.web-pets-mobile-stage .web-pets-mobile-pet-image[src*="chameleon_"] {
  transform: translateX(-50%) scale(1.5);
  transform-origin: center bottom;
}

.web-pets-mobile-info-content {
  inset: 9% 5.4% 5.5%;
  gap: 1.5%;
}

.web-pets-mobile-progress {
  width: 88%;
  margin: 11.5% auto 0;
  gap: 3px;
}

.web-pets-mobile-progress > strong {
  top: -22px;
  min-width: 56px;
  border-width: 1.5px;
  padding: 3px 10px;
  font-size: clamp(12px, 0.92vw, 15px);
  line-height: 1.05;
}

.web-pets-mobile-progress div {
  gap: 6px;
}

.web-pets-mobile-progress span,
.web-pets-mobile-progress b {
  min-width: 0;
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.1;
}

.web-pets-mobile-progress b {
  text-align: right;
}

.web-pets-mobile-progress i {
  height: 7px;
}

.web-pets-mobile-progress em,
.web-pets-mobile-progress small {
  font-size: clamp(9px, 0.75vw, 11px);
  line-height: 1.15;
}

.web-pets-students .web-pets-student-list {
  grid-template-columns: 1fr !important;
}

/* Bottom feature dock + left class rail. */
.side-nav {
  overflow: visible;
}

.class-list {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  padding-right: 2px;
  overflow: auto;
}

.side-nav .ghost-button {
  flex: 0 0 auto;
  min-height: clamp(52px, 4.2vw, 70px);
  border-radius: clamp(14px, 1.2vw, 18px);
  background: rgba(242, 252, 246, 0.86);
  color: var(--c-ink);
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 1000;
}

.board-main {
  padding-bottom: clamp(102px, 9.2vw, 132px);
}

.feature-nav {
  position: fixed;
  left: calc(var(--board-sidebar, var(--c-sidebar-width)) + clamp(10px, 1vw, 18px));
  right: clamp(10px, 1vw, 18px);
  bottom: clamp(10px, 1vw, 18px);
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(74px, 7.4vw, 112px);
  grid-template-columns: none;
  gap: clamp(8px, 0.75vw, 12px);
  max-height: none;
  padding: clamp(8px, 0.75vw, 12px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: clamp(18px, 1.45vw, 26px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 251, 239, 0.82)),
    rgba(255, 255, 255, 0.86);
  box-shadow:
    0 18px 42px rgba(28, 103, 70, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}

.feature-nav::-webkit-scrollbar {
  height: 6px;
}

.feature-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(45, 132, 88, 0.28);
}

.feature-tab {
  min-width: 0;
  min-height: clamp(58px, 5.4vw, 78px);
  padding: clamp(7px, 0.62vw, 10px) 6px;
  display: grid;
  grid-template-rows: clamp(25px, 2.25vw, 34px) auto;
  justify-items: center;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(42, 128, 86, 0.12);
  border-radius: clamp(14px, 1.05vw, 18px);
  background: rgba(255, 255, 255, 0.72);
  color: #31685a;
  text-align: center;
  box-shadow: 0 8px 18px rgba(34, 103, 69, 0.08);
}

.feature-tab::before {
  content: "";
  width: clamp(24px, 2.2vw, 34px);
  height: clamp(24px, 2.2vw, 34px);
  border-radius: clamp(9px, 0.8vw, 13px);
  background:
    linear-gradient(145deg, rgba(104, 210, 134, 0.96), rgba(37, 164, 102, 0.94));
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.32),
    0 7px 12px rgba(26, 122, 77, 0.14);
  -webkit-mask: var(--feature-icon) center / contain no-repeat;
  mask: var(--feature-icon) center / contain no-repeat;
}

.feature-tab span {
  display: none;
}

.feature-tab strong {
  margin: 0;
  max-width: 100%;
  color: inherit;
  font-size: clamp(12px, 0.92vw, 15px);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-tab.is-active {
  border-color: #fff1a9;
  background: linear-gradient(180deg, #ffe98e, #ffd958);
  color: #0a4939;
  box-shadow:
    0 12px 24px rgba(139, 113, 28, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.feature-tab.is-active::before {
  background:
    linear-gradient(145deg, #47bd66, #11865d);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    0 7px 12px rgba(20, 112, 72, 0.18);
}

/* Feature pages tablet guardrails: panels stay inside the viewport. */
.feature-content,
.feature-content > *,
.student-manage-page,
.student-manage-head,
.student-manage-summary,
.student-manage-toolbar,
.student-manage-list {
  min-width: 0;
  max-width: 100%;
}

.student-manage-list {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.student-manage-list::-webkit-scrollbar {
  height: 6px;
}

.student-manage-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(45, 132, 88, 0.24);
}

.student-manage-row {
  grid-template-columns:
    clamp(34px, 3.2vw, 58px)
    minmax(clamp(132px, 14vw, 220px), 1.1fr)
    minmax(clamp(42px, 5vw, 80px), 0.4fr)
    minmax(clamp(72px, 7.4vw, 100px), 0.45fr)
    minmax(clamp(112px, 13vw, 180px), 0.9fr)
    minmax(clamp(56px, 5.8vw, 90px), 0.35fr)
    minmax(clamp(118px, 12.5vw, 160px), 0.65fr);
  gap: clamp(6px, 0.75vw, 14px);
  padding: clamp(8px, 0.9vw, 12px) clamp(10px, 1.4vw, 20px);
}

.student-manage-page.is-student-no-empty .student-manage-row {
  grid-template-columns:
    clamp(34px, 3.2vw, 58px)
    minmax(clamp(132px, 14vw, 220px), 1.12fr)
    minmax(clamp(28px, 3vw, 42px), 0.16fr)
    minmax(clamp(72px, 7.4vw, 100px), 0.48fr)
    minmax(clamp(124px, 15vw, 210px), 1.08fr)
    minmax(clamp(56px, 5.8vw, 90px), 0.35fr)
    minmax(clamp(118px, 12.5vw, 160px), 0.68fr);
}

.student-manage-row > span,
.student-manage-row > strong,
.student-manage-bind-code,
.student-manage-name strong,
.student-manage-name span {
  min-width: 0;
  max-width: 100%;
}

.student-manage-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-manage-name {
  min-width: 0;
}

.student-manage-name > div {
  min-width: 0;
}

.student-manage-buttons {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(44px, 1fr));
  gap: clamp(4px, 0.45vw, 8px);
}

.student-manage-buttons button {
  min-width: 0;
  min-height: clamp(28px, 2.6vw, 36px);
  padding: 0 clamp(6px, 0.55vw, 10px);
  font-size: clamp(11px, 0.85vw, 13px);
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

@media (min-width: 900px) and (max-width: 1280px) {
  .student-manage-page {
    gap: 12px;
  }

  .student-manage-head {
    min-height: 0;
    padding: 16px 18px;
    align-items: flex-start;
  }

  .student-manage-head h2 {
    font-size: clamp(30px, 3.5vw, 44px);
  }

  .student-manage-head p {
    font-size: 13px;
  }

  .student-manage-actions button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .student-manage-summary div {
    padding: 12px 14px;
  }

  .student-manage-summary span {
    font-size: 12px;
  }

  .student-manage-summary strong {
    font-size: clamp(24px, 2.8vw, 34px);
  }

  .student-manage-toolbar {
    padding: 12px 14px;
    gap: 10px;
  }

  .student-sort-tabs {
    gap: 5px;
    margin-left: 6px;
  }

  .student-sort-tabs button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .student-manage-toolbar-actions > strong {
    font-size: 14px;
  }

  .student-manage-toolbar-actions {
    gap: 8px;
  }

  .student-delete-mode-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .student-manage-add-button,
  .student-manage-import-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .student-manage-row {
    min-height: 58px;
  }

  .student-manage-row-head {
    min-height: 38px;
    font-size: 12px;
  }

  .student-manage-name {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .student-manage-name img,
  .student-manage-name .web-no-pet-avatar {
    width: 44px;
    height: 44px;
  }

  .student-manage-name strong {
    font-size: 15px;
  }

  .student-manage-name span,
  .student-manage-row > span,
  .student-manage-bind-code {
    font-size: 12px;
  }

  .student-manage-row > strong {
    font-size: clamp(24px, 2.7vw, 34px);
  }

  .point-log-page,
  .task-manage-page {
    gap: 12px;
  }

  .point-log-head,
  .task-manage-head {
    min-height: 0;
    padding: 16px 18px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .point-log-head h2,
  .task-manage-head h2 {
    font-size: clamp(28px, 3.4vw, 42px);
  }

  .point-log-head p,
  .task-manage-head p {
    font-size: 13px;
  }

  .point-log-head-actions,
  .point-log-toolbar-actions,
  .task-head-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .point-log-head button,
  .point-log-toolbar-actions button,
  .task-head-actions button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .point-log-summary div,
  .task-manage-summary div {
    min-height: 66px;
    padding: 12px 14px;
  }

  .point-log-summary span,
  .task-manage-summary span {
    font-size: 12px;
  }

  .point-log-summary strong,
  .task-manage-summary strong {
    font-size: clamp(22px, 2.7vw, 32px);
  }

  .point-log-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
    align-items: stretch;
  }

  .point-log-filter-row {
    grid-column: 1 / -1;
    gap: 10px;
  }

  .point-log-toolbar label {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .point-log-filter-row .point-log-tabs {
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .point-log-tabs button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .point-log-toolbar input {
    min-height: 38px;
    font-size: 13px;
  }

  .point-log-list {
    padding: 6px 10px 12px;
    overflow-x: auto;
  }

  .point-log-row {
    grid-template-columns: 84px minmax(56px, 0.55fr) minmax(100px, 1fr) 48px 50px 52px;
    gap: 7px;
    min-height: 48px;
    font-size: 12px;
  }

  .point-log-row-head {
    min-height: 34px;
    font-size: 12px;
  }

  .point-log-row strong {
    font-size: 13px;
  }

  .point-log-row em {
    font-size: 14px;
  }

  .point-log-row button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .task-manage-grid {
    grid-template-columns: minmax(280px, clamp(300px, 36%, 380px)) minmax(0, 1fr);
    gap: 12px;
  }

  .task-create-panel,
  .task-list-panel,
  .task-log-panel {
    min-width: 0;
    padding: 14px;
  }

  .task-panel-head {
    min-height: 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .task-panel-head h3 {
    font-size: 20px;
  }

  .task-create-panel input {
    min-height: 40px;
    font-size: 13px;
  }

  .task-card-item {
    padding: 12px;
    border-radius: 16px;
  }

  .task-card-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .task-card-title-row strong {
    font-size: 18px;
  }

  .task-card-title-row span {
    font-size: 12px;
  }

  .task-card-title-row button,
  .task-progress-actions button,
  .task-panel-head button,
  .task-create-panel > button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .task-team-progress {
    padding: 10px;
  }

  .task-personal-summary {
    padding: 10px;
  }

  .task-personal-summary strong,
  .task-personal-summary span {
    font-size: 14px;
  }

  .task-student-chip-list {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
  }

  .task-student-chip-main {
    min-height: 48px;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas:
      "check name"
      "check count";
    gap: 2px 7px;
    padding: 7px 8px;
  }

  .task-student-chip-main i {
    grid-area: check;
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }

  .task-student-chip-main strong {
    grid-area: name;
    font-size: 13px;
  }

  .task-student-chip-main span {
    grid-area: count;
    font-size: 11px;
  }

  .task-student-chip-reward,
  .task-student-chip em {
    min-height: 28px;
    font-size: 12px;
  }

  .task-team-line {
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    gap: 7px;
  }

  .task-team-line i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .task-team-line strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-team-line span,
  .task-team-line em {
    font-size: 12px;
  }

  .task-progress-actions {
    gap: 6px;
  }

  .task-log-list {
    overflow-x: auto;
  }

  .task-log-row {
    grid-template-columns: 84px minmax(70px, 0.7fr) minmax(90px, 1fr) 70px 48px;
    gap: 7px;
    min-height: 44px;
    font-size: 12px;
  }

  .task-log-row-head {
    min-height: 34px;
    font-size: 12px;
  }
}

.feature-tab[data-section="scoreboard"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M9 12h46v31H9V12Zm5 5v21h36V17H14Zm9 31h18v5H23v-5Zm5-6h8v8h-8v-8Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="students"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M25 29c7.2 0 13-5.8 13-13S32.2 3 25 3 12 8.8 12 16s5.8 13 13 13Zm-1 5C12.4 34 5 40.6 5 50.8V58h39v-7.2C44 40.6 36.5 34 24 34Zm22.2-3c5.6 0 10-4.4 10-10s-4.4-10-10-10c-2.4 0-4.6.8-6.3 2.2.8 2 1.1 4.1 1.1 6.4 0 3.8-1.2 7.2-3.3 10 2 .9 4.8 1.4 8.5 1.4Zm1.2 4c-2.8 0-5.3.4-7.4 1.2 4.4 3.1 7.2 7.9 7.2 14.6V58H59v-6.7C59 41.4 54.5 35 47.4 35Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="classes"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M9 11.5C9 8.5 11.5 6 14.5 6H27c5.4 0 9.1 1.9 11 5.7C39.9 7.9 43.6 6 49 6h.5c3 0 5.5 2.5 5.5 5.5V50c0 2.2-1.8 4-4 4h-4.7c-3 0-5.7.8-8.3 2.5-2.6-1.7-5.3-2.5-8.3-2.5H13c-2.2 0-4-1.8-4-4V11.5Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="points"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 8h36v48H14V8Zm7 9v5h22v-5H21Zm0 11v5h22v-5H21Zm0 11v5h14v-5H21Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="templates"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M12 10h40v44H12V10Zm8 8v10h24V18H20Zm0 16v4h24v-4H20Zm0 9v4h16v-4H20Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="teams"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M20 30a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm24 0a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM8 52c0-9 5.6-16 12-16s12 7 12 16H8Zm24 0c0-9 5.6-16 12-16s12 7 12 16H32Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="tasks"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M20 8h24v8h8v40H12V16h8V8Zm5 8h14v-3H25v3Zm-2 15 6 6 13-14 4 4-17 18-10-10 4-4Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="pokedex"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M11 12h34c4.4 0 8 3.6 8 8v32H18c-3.9 0-7-3.1-7-7V12Zm8 8v22c0 1.7 1.3 3 3 3h23V20H19Zm7 5h12v5H26v-5Zm0 10h12v5H26v-5Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="pets"],
.feature-tab[data-section="garden"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M20 29c3.3 0 6-3.1 6-7s-2.7-7-6-7-6 3.1-6 7 2.7 7 6 7Zm24 0c3.3 0 6-3.1 6-7s-2.7-7-6-7-6 3.1-6 7 2.7 7 6 7ZM31 27c3.3 0 6-3.1 6-7s-2.7-7-6-7-6 3.1-6 7 2.7 7 6 7Zm1 6c-9 0-18 7.3-18 15.2 0 4.3 3.5 7.8 7.8 7.8 3.8 0 6.1-2 10.2-2s6.4 2 10.2 2c4.3 0 7.8-3.5 7.8-7.8C50 40.3 41 33 32 33Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="honor"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 8h36v11h7v7c0 9-5.4 16.1-13.6 18.2A15 15 0 0 1 36 50v5h11v6H17v-6h11v-5a15 15 0 0 1-7.4-5.8C12.4 42.1 7 35 7 26v-7h7V8Zm7 6v17c0 6.6 4.8 12 11 12s11-5.4 11-12V14H21Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="vip"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 22 19 10l13 12 13-12 11 12-8 30H16L8 22Zm15 21h18l4-15-8 7-5-13-5 13-8-7 4 15Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="exports"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 8h28l8 8v40H14V8Zm24 5v8h8l-8-8ZM22 43h20v-6H22v6Zm10-23-10 10h7v6h6v-6h7L32 20Z'/%3E%3C/svg%3E"); }
.feature-tab[data-section="settings"] { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M36 7 39 15c1.4.5 2.8 1.1 4 1.9l8-3 6 10-6 5.6c.1.8.2 1.6.2 2.5s-.1 1.7-.2 2.5l6 5.6-6 10-8-3c-1.2.8-2.6 1.4-4 1.9l-3 8H24l-3-8c-1.4-.5-2.8-1.1-4-1.9l-8 3-6-10 6-5.6c-.1-.8-.2-1.6-.2-2.5s.1-1.7.2-2.5L3 23.9l6-10 8 3c1.2-.8 2.6-1.4 4-1.9l3-8h12Zm-6 17a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z'/%3E%3C/svg%3E"); }

.board-main[data-section="settings"] {
  padding-top: clamp(14px, 1.4vw, 24px);
}

.board-main[data-section="settings"] .board-header {
  min-height: 46px;
  align-items: center;
}

.board-main[data-section="settings"] .board-header h1 {
  font-size: clamp(34px, 3vw, 52px);
}

.board-main[data-section="settings"] .board-header .muted-label {
  font-size: clamp(13px, 0.9vw, 17px);
}

@media (max-width: 1366px) {
  .board-main[data-section="settings"] .settings-note {
    display: none;
  }
}

@media (max-width: 1180px) {
  .settings-workspace {
    grid-template-columns: minmax(350px, 1.05fr) minmax(300px, 0.95fr);
    gap: 9px;
  }

  .settings-account-hero {
    gap: 9px;
    padding: 7px 12px;
  }

  .settings-icon {
    width: 36px;
    height: 36px;
  }

  .settings-account-hero h2 {
    font-size: 24px;
  }

  .settings-hero-actions button,
  .settings-hero-actions strong {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .settings-panel-title h3 {
    font-size: 18px;
  }

  .settings-status-grid strong,
  .settings-quota-cards strong {
    font-size: 18px;
  }

  .settings-action-list-v2 button {
    min-height: 42px;
  }
}

@media (max-width: 920px) {
  .settings-workspace {
    grid-template-columns: 1fr;
  }

  .settings-account-hero,
  .settings-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-hero-actions {
    width: 100%;
  }

  .settings-hero-actions button,
  .settings-hero-actions strong {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .settings-status-grid,
  .settings-quota-cards,
  .settings-price-grid,
  .settings-button-row,
  .settings-cdk-row,
  .settings-vip-panel,
  .settings-form-stack .settings-form-panel:nth-child(2) {
    grid-template-columns: 1fr;
  }

  .settings-status-grid div + div,
  .settings-quota-cards div + div {
    border-top: 1px solid rgba(29, 77, 65, 0.1);
    border-left: 0;
  }
}

/* Account settings cleanup: use real icons and stable form sizing. */
.board-main[data-section="settings"] {
  padding-top: clamp(18px, 1.7vw, 30px);
  padding-bottom: clamp(126px, 10vw, 156px);
}

.board-main[data-section="settings"] .board-header {
  min-height: 62px;
  align-items: end;
  justify-content: space-between;
}

.board-main[data-section="settings"] .board-header h1 {
  font-size: clamp(40px, 3.4vw, 60px);
}

.settings-page-v2 {
  gap: 14px;
  color: #123d36;
  font-size: 15px;
}

.settings-account-hero {
  display: none;
  min-height: 96px;
  padding: 16px 20px;
}

.settings-account-hero h2 {
  margin: 2px 0 4px;
  font-size: clamp(30px, 2.7vw, 44px);
}

.settings-account-hero p {
  font-size: 15px;
}

.settings-hero-actions strong,
.settings-hero-actions button {
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
}

.settings-workspace {
  grid-template-columns: minmax(420px, 1.05fr) minmax(360px, 0.95fr);
  gap: 14px;
}

.settings-form-stack,
.settings-side-stack {
  gap: 14px;
}

.settings-form-panel,
.settings-side-actions {
  gap: 12px;
  padding: 16px;
}

.settings-panel-title {
  gap: 12px;
}

.settings-panel-title h3 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.1;
}

.settings-form-stack .settings-form-panel:nth-child(2) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-form-stack .settings-form-panel:nth-child(2) .settings-panel-title,
.settings-form-stack .settings-form-panel:nth-child(2) .settings-button-row {
  grid-column: 1 / -1;
}

.settings-vip-panel {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.settings-panel label {
  gap: 6px;
  font-size: 14px;
}

.settings-page-v2 .settings-panel input {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
}

.settings-button-row {
  gap: 10px;
}

.settings-button-row button,
.settings-cdk-row button {
  min-height: 44px;
  font-size: 15px;
}

.settings-price-grid {
  gap: 10px;
}

.settings-price-grid button {
  min-height: 62px;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 12px 14px;
}

.settings-price-grid span,
.settings-price-grid em {
  overflow: visible;
  white-space: nowrap;
}

.settings-price-grid strong {
  font-size: 26px;
  white-space: nowrap;
}

.settings-cdk-row {
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
}

.settings-status-grid div,
.settings-quota-cards div {
  min-height: 88px;
  padding: 16px 18px;
}

.settings-status-grid strong,
.settings-quota-cards strong {
  font-size: 24px;
  line-height: 1.16;
}

.settings-action-list-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-action-list-v2 button {
  min-height: 66px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 11px 12px;
}

.settings-action-list-v2 button strong {
  font-size: 16px;
}

.settings-action-list-v2 button span:not(.settings-mini-icon) {
  font-size: 12px;
}

.settings-page-v2 .settings-note {
  display: grid;
  min-height: 42px;
  padding: 8px 14px;
  font-size: 14px;
}

.settings-icon,
.settings-mini-icon {
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.settings-icon::before,
.settings-mini-icon::before {
  content: "";
  display: block;
  width: 56%;
  height: 56%;
  background: currentColor;
  -webkit-mask: var(--settings-icon) center / contain no-repeat;
  mask: var(--settings-icon) center / contain no-repeat;
}

.settings-icon {
  width: 46px;
  height: 46px;
  color: #fff;
}

.settings-mini-icon {
  width: 28px;
  height: 28px;
  color: #177154;
}

.settings-icon-user,
.settings-mini-student {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0H5Z'/%3E%3C/svg%3E");
}

.settings-icon-key,
.settings-mini-key {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 14a5 5 0 1 1 4.6 3H11v2H8v2H5v-3.8L8 14Zm5-4a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'/%3E%3C/svg%3E");
}

.settings-icon-crown,
.settings-mini-crown {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 7 5 4 4-7 4 7 5-4-2 12H5L3 7Zm4 10h10l.7-4.2-3 2.2L12 10l-2.7 5-3-2.2L7 17Z'/%3E%3C/svg%3E");
}

.settings-icon-data {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3c5 0 9 1.8 9 4v10c0 2.2-4 4-9 4s-9-1.8-9-4V7c0-2.2 4-4 9-4Zm0 2C8.1 5 5 6.1 5 7s3.1 2 7 2 7-1.1 7-2-3.1-2-7-2Zm0 6c-2.8 0-5.3-.6-7-1.6V12c0 .9 3.1 2 7 2s7-1.1 7-2V9.4c-1.7 1-4.2 1.6-7 1.6Zm0 5c-2.8 0-5.3-.6-7-1.6V17c0 .9 3.1 2 7 2s7-1.1 7-2v-2.6c-1.7 1-4.2 1.6-7 1.6Z'/%3E%3C/svg%3E");
}

.settings-mini-save {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h12l2 2v16H5V3Zm3 2v6h8V5H8Zm0 11v3h8v-3H8Z'/%3E%3C/svg%3E");
}

.settings-mini-refresh,
.settings-mini-undo {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-3a5 5 0 1 1-1.5-3.5L13 11h7V4l-2.3 2.3Z'/%3E%3C/svg%3E");
}

.settings-mini-shield {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5-3.3 9-8 11-4.7-2-8-6-8-11V5l8-3Z'/%3E%3C/svg%3E");
}

.settings-mini-clear {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12l-1 14H7L6 7Zm3-4h6l1 2h5v2H3V5h5l1-2Z'/%3E%3C/svg%3E");
}

.settings-mini-code {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m8.7 16.3-1.4 1.4L1.6 12l5.7-5.7 1.4 1.4L4.4 12l4.3 4.3Zm6.6 0 4.3-4.3-4.3-4.3 1.4-1.4 5.7 5.7-5.7 5.7-1.4-1.4ZM11 20H9l4-16h2l-4 16Z'/%3E%3C/svg%3E");
}

.settings-mini-calendar {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h3v16H4V5h3V2Zm11 8H6v9h12v-9Z'/%3E%3C/svg%3E");
}

.settings-mini-class {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v12H4V5Zm2 2v8h12V7H6Zm2 12h8v2H8v-2Z'/%3E%3C/svg%3E");
}

.settings-mini-cloud {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 19a6 6 0 0 1-.7-12A7 7 0 0 1 20 10.5 4.5 4.5 0 0 1 19.5 19H8Z'/%3E%3C/svg%3E");
}

.settings-mini-export {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h10l4 4v14H5V3Zm9 1.5V8h3.5L14 4.5ZM11 17h2v-5h3l-4-4-4 4h3v5Z'/%3E%3C/svg%3E");
}

.settings-mini-login,
.settings-mini-logout {
  --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4h9v16h-9v-3h2v1h5V6h-5v1h-2V4Zm1 5 4 3-4 3v-2H3v-2h8V9Z'/%3E%3C/svg%3E");
}

@media (max-width: 1280px) {
  .settings-workspace {
    grid-template-columns: 1fr;
  }

  .settings-side-stack {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  .settings-side-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .settings-side-stack,
  .settings-form-stack .settings-form-panel:nth-child(2),
  .settings-status-grid,
  .settings-quota-cards,
  .settings-price-grid,
  .settings-button-row,
  .settings-cdk-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) {
  .settings-workspace {
    grid-template-columns: minmax(420px, 1.05fr) minmax(360px, 0.95fr) !important;
  }

  .settings-side-stack {
    grid-template-columns: 1fr !important;
  }

  .settings-side-actions {
    grid-column: auto !important;
  }
}

@media (min-width: 981px) and (max-width: 1366px) {
  .board-main[data-section="settings"] {
    padding-top: 12px;
  }

  .board-main[data-section="settings"] .board-header {
    min-height: 40px;
  }

  .board-main[data-section="settings"] .board-header h1 {
    font-size: 34px;
  }

  .settings-page-v2 {
    gap: 10px;
  }

  .settings-account-hero {
    min-height: 68px;
    padding: 10px 14px;
  }

  .settings-account-hero h2 {
    font-size: 28px;
  }

  .settings-account-hero p {
    display: none;
  }

  .settings-form-stack,
  .settings-side-stack {
    gap: 10px;
  }

  .settings-form-panel,
  .settings-side-actions {
    gap: 8px;
    padding: 12px;
  }

  .settings-icon {
    width: 38px;
    height: 38px;
  }

  .settings-mini-icon {
    width: 24px;
    height: 24px;
  }

  .settings-panel-title h3 {
    font-size: 19px;
  }

  .settings-page-v2 .settings-panel input {
    min-height: 38px;
    font-size: 14px;
  }

  .settings-button-row button,
  .settings-cdk-row button {
    min-height: 38px;
    font-size: 14px;
  }

  .settings-price-grid button {
    min-height: 50px;
    padding: 8px 10px;
  }

  .settings-price-grid strong {
    font-size: 22px;
  }

  .settings-status-grid div,
  .settings-quota-cards div {
    min-height: 70px;
    padding: 10px 12px;
  }

  .settings-status-grid strong,
  .settings-quota-cards strong {
    font-size: 20px;
  }

  .settings-action-list-v2 button {
    min-height: 52px;
    padding: 8px 10px;
  }

  .settings-page-v2 .settings-note {
    display: none;
  }
}

/* Honor wall: keep top 1/2/3 in one responsive row on board and tablet sizes. */
.honor-podium {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end;
  gap: clamp(8px, 1.1vw, 14px);
  padding: clamp(10px, 1.1vw, 14px);
}

.honor-podium > .empty-panel {
  grid-column: 1 / -1;
}

.honor-podium .leader-card,
.honor-podium .leader-card.rank-1 {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.honor-podium .leader-card > div:not(.rank-mark) {
  left: calc(var(--leader-text-left, 64%) - clamp(16px, 2.4vw, 36px));
  width: clamp(30%, 34%, 38%);
}

.honor-podium .leader-card h3 {
  overflow: hidden;
  font-size: clamp(20px, 6.2cqw, 42px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-podium .leader-card p:first-of-type {
  margin-top: clamp(4px, 1vw, 10px);
  overflow: hidden;
  font-size: clamp(12px, 3.6cqw, 24px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-podium .leader-card p {
  overflow: hidden;
  font-size: clamp(11px, 3cqw, 18px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-podium .leader-pet {
  width: calc(var(--leader-pet-size, 48%) * 1.25);
  height: calc(var(--leader-pet-size, 48%) * 1.25);
}

@media (max-width: 760px) {
  .honor-podium {
    grid-template-columns: 1fr !important;
  }
}

/* Generated account-setting icons. */
.settings-icon {
  background: transparent var(--settings-icon-img) center / contain no-repeat !important;
  box-shadow: none !important;
}

.settings-icon::before {
  display: none !important;
}

.settings-icon-user {
  --settings-icon-img: url("./assets/settings-icons/account.png");
}

.settings-icon-key {
  --settings-icon-img: url("./assets/settings-icons/security.png");
}

.settings-icon-crown {
  --settings-icon-img: url("./assets/settings-icons/vip.png");
}

.settings-icon-data {
  --settings-icon-img: url("./assets/settings-icons/data.png");
}

.settings-mini-crown,
.settings-mini-key,
.settings-mini-shield,
.settings-mini-code,
.settings-mini-student,
.settings-mini-class,
.settings-mini-refresh,
.settings-mini-cloud,
.settings-mini-export,
.settings-mini-clear,
.settings-mini-login,
.settings-mini-logout {
  background: transparent var(--settings-icon-img) center / contain no-repeat !important;
  color: transparent;
}

.settings-mini-crown::before,
.settings-mini-key::before,
.settings-mini-shield::before,
.settings-mini-code::before,
.settings-mini-student::before,
.settings-mini-class::before,
.settings-mini-refresh::before,
.settings-mini-cloud::before,
.settings-mini-export::before,
.settings-mini-clear::before,
.settings-mini-login::before,
.settings-mini-logout::before {
  display: none !important;
}

.settings-mini-crown {
  --settings-icon-img: url("./assets/settings-icons/vip.png");
}

.settings-mini-key,
.settings-mini-shield {
  --settings-icon-img: url("./assets/settings-icons/security.png");
}

.settings-mini-code {
  --settings-icon-img: url("./assets/settings-icons/cdk.png");
}

.settings-mini-student,
.settings-mini-class {
  --settings-icon-img: url("./assets/settings-icons/quota.png");
}

.settings-mini-refresh {
  --settings-icon-img: url("./assets/settings-icons/refresh.png");
}

.settings-mini-cloud {
  --settings-icon-img: url("./assets/settings-icons/cloud.png");
}

.settings-mini-export {
  --settings-icon-img: url("./assets/settings-icons/export.png");
}

.settings-mini-clear {
  --settings-icon-img: url("./assets/settings-icons/clear.png");
}

.settings-mini-login {
  --settings-icon-img: url("./assets/settings-icons/relogin.png");
}

.settings-mini-logout {
  --settings-icon-img: url("./assets/settings-icons/logout.png");
}

/* Keep button labels visually centered; icons should not push text sideways. */
.settings-page-v2 button {
  line-height: 1;
  text-align: center;
}

.settings-hero-actions strong,
.settings-hero-actions button,
.settings-button-row button,
.settings-cdk-row button {
  position: relative;
  justify-content: center !important;
  text-align: center;
}

.settings-hero-actions .settings-mini-icon,
.settings-button-row .settings-mini-icon,
.settings-cdk-row .settings-mini-icon {
  position: absolute;
  top: 50%;
  left: calc(50% - 62px);
  margin: 0;
  transform: translateY(-50%);
}

.settings-cdk-row .settings-mini-icon {
  left: calc(50% - 34px);
}

.settings-price-grid button {
  align-items: center;
  text-align: center;
}

.settings-price-grid span,
.settings-price-grid strong,
.settings-price-grid em {
  line-height: 1;
}

/* Honor wall summary stays in one row; large point totals shrink instead of wrapping. */
.honor-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.honor-summary div {
  min-width: 0;
  padding: clamp(10px, 1.5vw, 18px) clamp(10px, 1.6vw, 22px);
}

.honor-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-summary .honor-summary-value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(24px, 3.1vw, 42px);
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.honor-summary .honor-summary-value.is-compact-1 {
  font-size: clamp(20px, 2.5vw, 34px);
}

.honor-summary .honor-summary-value.is-compact-2 {
  font-size: clamp(16px, 2vw, 28px);
}

@media (max-width: 760px) {
  .honor-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Honor wall header: keep refresh/export actions fixed on the right edge on tablet boards. */
.honor-head {
  align-items: center !important;
  flex-direction: row !important;
  justify-content: space-between;
}

.honor-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.honor-head h2,
.honor-head p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.honor-head-actions {
  flex: 0 0 auto;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end;
  align-self: center;
  margin-left: auto;
  white-space: nowrap;
}

.honor-head-actions button,
.honor-head button {
  flex: 0 0 auto !important;
}

@media (max-width: 1180px) {
  .honor-head {
    gap: 14px;
    padding: 18px 20px;
  }

  .honor-head h2 {
    font-size: clamp(34px, 5vw, 58px);
  }

  .honor-head p {
    font-size: clamp(15px, 2.2vw, 24px);
  }

  .honor-head button {
    min-width: 106px;
    min-height: 54px;
    padding: 0 18px;
    font-size: 22px;
  }
}

@media (max-width: 760px) {
  .honor-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .honor-head h2,
  .honor-head p {
    white-space: normal;
  }

  .honor-head-actions {
    width: 100%;
  }

  .honor-head-actions button {
    flex: 1 1 0 !important;
  }
}

/* Top ranking cards: class and teams stack vertically to stay inside the podium frame. */
.leader-card .leader-meta {
  display: grid !important;
  gap: clamp(1px, 0.5cqw, 4px);
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(11px, 3cqw, 18px);
  line-height: 1.15;
  white-space: normal !important;
}

.leader-card .leader-meta span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leader-card .leader-class-name {
  white-space: nowrap;
}

.leader-card .leader-team-name {
  display: -webkit-box;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.leader-card .leader-team-name.is-empty {
  display: none;
}

.leader-card .leader-meta + * {
  margin-top: 0;
}

/* Scoreboard podium should fit all top 3 cards in one row on laptop screens. */
#scoreboardContent .leader-row {
  grid-template-columns:
    minmax(0, clamp(250px, 20vw, 360px))
    minmax(0, clamp(270px, 22vw, 390px))
    minmax(0, clamp(250px, 20vw, 360px)) !important;
  justify-content: center;
  justify-items: stretch;
  align-items: end;
  gap: clamp(8px, 1vw, 16px);
  margin-bottom: clamp(12px, 1vw, 18px);
}

#scoreboardContent .leader-card,
#scoreboardContent .leader-card.rank-1 {
  width: 100%;
  max-width: none;
  padding: 13% 4.6% 7.5% 7.2%;
}

#scoreboardContent .leader-pet {
  width: calc(var(--leader-pet-size, 48%) * 1.34);
  height: calc(var(--leader-pet-size, 48%) * 1.34);
}

#scoreboardContent .leader-card > div:not(.rank-mark) {
  left: calc(var(--leader-text-left, 64%) - 26px);
  width: 34%;
}

#scoreboardContent .leader-card h3 {
  font-size: clamp(21px, 6.2cqw, 36px);
}

#scoreboardContent .leader-card p:first-of-type {
  margin-top: clamp(4px, 1.3cqw, 8px);
  font-size: clamp(14px, 4cqw, 22px);
}

#scoreboardContent .leader-card p {
  font-size: clamp(12px, 3cqw, 17px);
}

#scoreboardContent .leader-card .leader-meta {
  gap: clamp(1px, 0.35cqw, 3px);
  font-size: clamp(10px, 2.7cqw, 15px);
}

@media (max-width: 900px) {
  #scoreboardContent .leader-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #scoreboardContent .leader-card,
  #scoreboardContent .leader-card.rank-1 {
    width: 100%;
    max-width: none;
  }

  #scoreboardContent .leader-card > div:not(.rank-mark) {
    left: calc(var(--leader-text-left, 64%) - 16px);
    width: 35%;
  }

  #scoreboardContent .leader-card h3 {
    font-size: clamp(15px, 6.5cqw, 22px);
  }

  #scoreboardContent .leader-card p:first-of-type {
    font-size: clamp(10px, 4.1cqw, 14px);
  }

  #scoreboardContent .leader-card p,
  #scoreboardContent .leader-card .leader-meta {
    font-size: clamp(9px, 3.1cqw, 12px);
  }
}

/* Student point record modal. */
.student-record-modal {
  width: min(980px, 100%);
  max-height: 88vh;
  overflow: auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 251, 245, 0.98)),
    #fff;
  box-shadow: 0 30px 90px rgba(20, 56, 47, 0.22);
}

.student-record-student {
  margin-right: 54px;
}

.student-record-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.student-record-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(48, 94, 77, 0.12);
  border-radius: 8px;
  background: rgba(223, 243, 228, 0.72);
}

.student-record-tabs button,
#refreshStudentRecordButton {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  padding: 0 18px;
  font-weight: 1000;
}

.student-record-tabs button {
  background: transparent;
  color: #315d51;
}

.student-record-tabs button.is-active {
  background: #fff;
  color: #153b35;
  box-shadow: 0 8px 18px rgba(33, 80, 67, 0.12);
}

#refreshStudentRecordButton {
  background: linear-gradient(180deg, #2b8eb4, #1d7293);
  color: #fff;
}

.student-record-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.student-record-summary div {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(48, 94, 77, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(242, 251, 245, 0.9);
}

.student-record-summary span {
  overflow: hidden;
  color: #5b706b;
  font-size: 14px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-record-summary strong {
  overflow: hidden;
  color: #123d36;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-record-summary .is-positive,
.student-record-row .is-positive {
  color: #148a57;
}

.student-record-summary .is-negative,
.student-record-row .is-negative {
  color: #c44653;
}

.student-record-list {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(48, 94, 77, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.student-record-row {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) 74px minmax(0, 1.4fr) 88px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 14px;
  border-top: 1px solid rgba(48, 94, 77, 0.08);
  color: #315d51;
  font-weight: 850;
}

.student-record-row:first-child {
  border-top: 0;
}

.student-record-row-head {
  min-height: 42px;
  background: rgba(223, 243, 228, 0.7);
  color: #5b706b;
  font-size: 13px;
  font-weight: 1000;
}

.student-record-row strong,
.student-record-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-record-row em {
  justify-self: end;
  font-style: normal;
  font-size: 20px;
  font-weight: 1000;
}

.student-record-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #5b706b;
  font-weight: 1000;
}

@media (max-width: 760px) {
  .student-record-toolbar,
  .student-record-summary {
    grid-template-columns: 1fr;
  }

  .student-record-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .student-record-tabs {
    width: 100%;
  }

  .student-record-tabs button {
    flex: 1;
  }

  .student-record-summary {
    display: grid;
  }

  .student-record-row {
    grid-template-columns: 82px 54px minmax(0, 1fr) 64px;
    gap: 6px;
    padding: 9px 10px;
  }
}

/* Global header search stays in the upper-right tool area on tablet and board sizes. */
.board-header {
  align-items: flex-start !important;
  flex-direction: row !important;
  justify-content: space-between;
}

.board-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.toolbar {
  flex: 0 0 auto;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  margin-left: auto;
  min-width: 0;
  padding-top: clamp(6px, 0.8vw, 12px);
}

.search-box {
  width: clamp(220px, 25vw, 330px);
  min-width: 0;
}

.search-box input {
  width: 100% !important;
}

@media (max-width: 760px) {
  .board-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .toolbar {
    justify-content: flex-start !important;
    margin-left: 0;
    padding-top: 0;
  }

  .search-box {
    width: min(100%, 360px);
  }
}

/* Pokedex student picker cards: tighter width, vertical class/team metadata. */
.pokedex-student-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: start;
}

.pokedex-student-card {
  width: 100%;
  min-height: 82px;
  grid-template-columns: 54px minmax(0, 1fr) minmax(50px, auto);
  gap: 8px;
  padding: 8px;
}

.pokedex-student-card img,
.pokedex-student-card .web-no-pet-avatar {
  width: 54px;
  height: 54px;
}

.pokedex-student-card strong {
  overflow: hidden;
  font-size: clamp(18px, 1.7vw, 24px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pokedex-student-card .pokedex-student-meta {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.1;
  white-space: normal;
}

.pokedex-student-card .pokedex-student-meta span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pokedex-student-card .pokedex-student-meta span + span {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pokedex-student-card i {
  min-width: 50px;
  font-size: 11px;
}

.pokedex-student-card b {
  font-size: clamp(22px, 2.1vw, 30px);
}

@media (min-width: 1600px) {
  .pokedex-student-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pokedex-student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pokedex-student-card {
    width: 100%;
  }
}

/* Team card inline member list. */
.team-card-members {
  margin-top: 12px;
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.58);
}

.team-card-members-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.team-card-members-title strong {
  color: #123d36;
  font-size: 16px;
  font-weight: 1000;
}

.team-card-members-title span {
  color: #5b706b;
  font-size: 13px;
  font-weight: 900;
}

.team-card-member-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.team-card-member-item {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 6px 8px;
  background: rgba(237, 247, 240, 0.86);
}

.team-card-member-item img,
.team-card-member-item .web-no-pet-avatar {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.team-card-member-item span,
.team-card-member-item strong,
.team-card-member-item em {
  display: block;
  min-width: 0;
}

.team-card-member-item strong {
  overflow: hidden;
  color: #123d36;
  font-size: 15px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card-member-item em {
  margin-top: 3px;
  overflow: hidden;
  color: #5b706b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card-member-item b {
  color: #168756;
  font-size: 14px;
  font-weight: 1000;
  white-space: nowrap;
}

.team-card-member-empty {
  min-height: 54px;
  display: grid;
  place-items: center;
  color: #5b706b;
  font-weight: 1000;
}

.team-card-member-adjust {
  margin-top: 12px;
  border: 1px solid rgba(24, 69, 59, 0.1);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.65);
}

.team-card-member-adjust-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.team-card-member-adjust-item {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 6px 8px;
  background: rgba(239, 247, 242, 0.86);
  color: #526b65;
}

.team-card-member-adjust-item.is-checked {
  background: rgba(215, 244, 226, 0.94);
  color: #146f52;
}

.team-card-member-adjust-item input {
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
}

.team-card-member-adjust-item img,
.team-card-member-adjust-item .web-no-pet-avatar {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.team-card-member-adjust-item strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .team-card-list-portrait {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-card {
    padding: 12px;
  }

  .team-card-main {
    min-height: 106px;
  }

  .team-card-main i {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 24px;
  }

  .team-card-main strong {
    font-size: 19px;
  }

  .team-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Class management layout, option 3: table-style operations. */
.class-manage-table-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.25vw, 18px);
}

.class-manage-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(29, 77, 65, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 28px rgba(33, 80, 67, 0.08);
}

.class-manage-overview div {
  min-width: 0;
  padding: clamp(14px, 1.35vw, 20px) clamp(16px, 1.6vw, 24px);
  border-right: 1px solid rgba(29, 77, 65, 0.08);
}

.class-manage-overview div:last-child {
  border-right: 0;
}

.class-manage-overview span,
.class-manage-overview em {
  display: block;
  overflow: hidden;
  color: #5d726c;
  font-size: clamp(13px, 1vw, 16px);
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-manage-overview strong {
  display: block;
  overflow: hidden;
  margin: 6px 0 4px;
  color: #123d36;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-manage-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.42fr);
  gap: clamp(12px, 1.25vw, 18px);
  align-items: start;
}

.class-table-panel,
.class-control-panel {
  min-width: 0;
  padding: clamp(14px, 1.35vw, 20px);
  border-radius: 18px;
}

.class-table-title {
  margin-bottom: 12px;
}

.class-manage-table {
  display: grid;
  gap: 8px;
}

.class-manage-row {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1.25fr) 86px 92px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(29, 77, 65, 0.08);
  border-radius: 14px;
  background: rgba(248, 253, 249, 0.92);
  color: #123d36;
}

.class-manage-row-head {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #60756f;
  font-size: 13px;
  font-weight: 1000;
}

button.class-manage-row {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.class-manage-row strong,
.class-manage-row span,
.class-manage-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-manage-row strong {
  color: #123d36;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.1;
}

.class-manage-row span {
  color: #526b65;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 1000;
}

.class-manage-row .class-row-status,
.class-manage-row em {
  display: inline-grid;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  font-style: normal;
  font-weight: 1000;
}

.class-manage-row .class-row-status {
  background: rgba(32, 128, 91, 0.1);
  color: #168756;
}

.class-manage-row em {
  background: rgba(44, 139, 176, 0.12);
  color: #1e6f90;
  font-size: 14px;
}

.class-manage-row.is-selected {
  border-color: rgba(236, 194, 50, 0.72);
  background: linear-gradient(180deg, rgba(255, 237, 156, 0.96), rgba(255, 211, 79, 0.9));
  box-shadow: 0 10px 20px rgba(139, 113, 28, 0.12);
}

.class-manage-row.is-selected em {
  background: rgba(255, 255, 255, 0.7);
  color: #0f7a4e;
}

.class-control-panel .class-detail-head {
  min-height: 0;
  padding: 0 0 14px;
}

.class-control-panel .class-title-row {
  align-items: flex-start;
}

.class-control-panel .class-detail-head h2 {
  margin: 6px 0;
  font-size: clamp(34px, 3.3vw, 52px);
}

.class-control-panel .class-detail-head p {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 900;
}

.class-control-panel .class-detail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 132px;
}

.class-control-panel .class-detail-actions button,
.class-table-panel .class-list-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  line-height: 1;
  text-align: center;
}

.class-control-panel .class-detail-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1.12fr) minmax(300px, 0.88fr);
  gap: 12px;
  align-items: start;
}

.class-control-panel .class-capacity-panel {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.class-move-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: clamp(12px, 1.1vw, 16px);
  border: 1px solid rgba(29, 77, 65, 0.08);
  border-radius: 16px;
  background: rgba(248, 253, 249, 0.9);
}

.class-move-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.class-move-column {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(29, 77, 65, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.class-move-column-target {
  background: rgba(223, 243, 252, 0.62);
}

.class-move-column-head {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #526b65;
  font-size: 13px;
  font-weight: 1000;
}

.class-move-column-head select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(29, 77, 65, 0.12);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #123d36;
  font: inherit;
  font-weight: 900;
}

.class-move-submit {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b91b6, #16759a);
  color: #fff;
  font-weight: 1000;
  white-space: nowrap;
}

.class-move-submit:disabled {
  opacity: 0.48;
}

.class-move-student-list {
  max-height: clamp(118px, 14vh, 168px);
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.class-move-student-item {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(29, 77, 65, 0.08);
}

.class-move-student-item input {
  width: 18px;
  height: 18px;
}

.class-move-target-item {
  grid-template-columns: minmax(0, 1fr);
}

.class-move-student-item > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.class-move-student-item img,
.class-move-student-item .web-no-pet-avatar {
  width: 40px;
  height: 40px;
}

.class-move-student-item strong,
.class-move-student-item em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 1000;
}

.class-move-student-item strong {
  color: #123d36;
  font-size: 16px;
}

.class-move-student-item em {
  color: #60756f;
  font-size: 13px;
}

.class-control-panel .class-student-preview {
  min-width: 0;
  padding: clamp(14px, 1.2vw, 18px);
  border-radius: 16px;
}

.class-control-panel .feature-section-title {
  margin-bottom: 10px;
}

.class-control-panel .preview-student {
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 0.42fr);
  padding: 8px 10px;
  border-radius: 14px;
}

.class-control-panel .preview-student-main {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
}

.class-control-panel .preview-student img {
  width: 46px;
  height: 46px;
}

.class-control-panel .preview-student strong {
  font-size: 17px;
}

.class-control-panel .preview-student span,
.class-control-panel .preview-student code {
  font-size: 13px;
}

@media (max-width: 1440px) {
  .class-manage-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .class-manage-row {
    grid-template-columns: 52px minmax(0, 1.2fr) 72px 76px;
    gap: 8px;
    padding: 9px 10px;
  }

  .class-control-panel .class-detail-actions {
    min-width: 116px;
  }
}

@media (max-width: 1040px) {
  .class-control-panel .class-detail-grid {
    grid-template-columns: minmax(390px, 1.1fr) minmax(280px, 0.9fr);
  }

  .class-move-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 940px) {
  .class-manage-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .class-manage-overview div:nth-child(2) {
    border-right: 0;
  }

  .class-manage-overview div:nth-child(n + 3) {
    border-top: 1px solid rgba(29, 77, 65, 0.08);
  }

  .class-manage-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-control-panel .class-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-page {
  display: grid;
  gap: clamp(14px, 1.4vw, 20px);
  padding-bottom: 18px;
}

/* Operations admin uses a compact console shell instead of the classroom UI. */
.board-screen.is-admin-mode {
  --board-sidebar: 84px;
  grid-template-columns: var(--board-sidebar) minmax(0, 1fr);
  background: #f4f7f5;
}

.board-screen.is-admin-mode .side-nav {
  padding: 18px 10px;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  background: #124f3e;
  box-shadow: 4px 0 18px rgba(20, 62, 48, 0.1);
}

.board-screen.is-admin-mode .side-nav::before,
.board-screen.is-admin-mode .feature-nav,
.board-screen.is-admin-mode .class-list,
.board-screen.is-admin-mode .side-mascot {
  display: none;
}

.board-screen.is-admin-mode .side-brand {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 8px;
}

.board-screen.is-admin-mode .side-brand img {
  width: 42px;
  height: 42px;
}

.board-screen.is-admin-mode .side-brand .brand-kicker {
  display: none;
}

.board-screen.is-admin-mode .side-brand h2 {
  margin: 0;
  font-size: 0;
  white-space: nowrap;
}

.board-screen.is-admin-mode .side-brand h2::after {
  content: "后台";
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 900;
}

.board-screen.is-admin-mode .side-nav .ghost-button {
  width: 58px;
  min-height: 38px;
  margin-top: auto;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.board-screen.is-admin-mode .board-main {
  padding: 18px 22px 28px;
  background: #f4f7f5;
}

.board-screen.is-admin-mode .board-header {
  display: none;
}

.board-screen.is-admin-mode .feature-content {
  gap: 12px;
}

.board-screen.is-admin-mode .admin-page {
  gap: 12px;
  padding-bottom: 0;
}

.admin-hero,
.admin-panel {
  border: 1px solid rgba(29, 77, 65, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(35, 78, 55, 0.1);
}

.admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border-radius: 28px;
}

.board-screen.is-admin-mode .admin-hero {
  padding: 14px 16px;
  border-radius: 10px;
  box-shadow: none;
}

.board-screen.is-admin-mode .admin-hero h2 {
  margin: 2px 0 4px;
  font-size: 24px;
  line-height: 1.1;
}

.board-screen.is-admin-mode .admin-hero p {
  font-size: 13px;
  font-weight: 700;
}

.board-screen.is-admin-mode .admin-hero strong {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.admin-hero span,
.admin-panel-head span {
  display: block;
  color: #497064;
  font-size: 13px;
  font-weight: 900;
}

.admin-hero h2 {
  margin: 3px 0 6px;
  color: #0b3e32;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 0.95;
}

.admin-hero p {
  margin: 0;
  max-width: 760px;
  color: #527065;
  font-weight: 800;
}

.admin-hero strong {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(32, 128, 91, 0.12);
  color: #0f7a4e;
  font-weight: 1000;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 18px);
}

.admin-stats,
.admin-stats-locked {
  border: 1px solid rgba(29, 77, 65, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 38px rgba(35, 78, 55, 0.1);
}

.admin-stats {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 1.6vw, 22px);
}

.board-screen.is-admin-mode .admin-stats,
.board-screen.is-admin-mode .admin-stats-locked {
  border-radius: 10px;
  box-shadow: none;
}

.board-screen.is-admin-mode .admin-stats {
  gap: 10px;
  padding: 14px;
}

.admin-stats-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}

.admin-stats-locked strong {
  color: #0b3e32;
  font-size: 22px;
}

.admin-stats-locked span {
  color: #527065;
  font-weight: 850;
}

.admin-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-stats-head span {
  display: block;
  color: #497064;
  font-size: 13px;
  font-weight: 900;
}

.admin-stats-head h3 {
  margin: 2px 0 0;
  color: #0b3e32;
  font-size: clamp(24px, 2.2vw, 34px);
}

.board-screen.is-admin-mode .admin-stats-head h3 {
  font-size: 20px;
}

.admin-stats-head button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: #20805b;
  color: #fff;
  font-weight: 1000;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-stat-grid article {
  min-height: 108px;
  padding: 13px;
  border: 1px solid rgba(32, 128, 91, 0.1);
  border-radius: 16px;
  background: rgba(239, 250, 242, 0.74);
}

.board-screen.is-admin-mode .admin-stat-grid article {
  min-height: 82px;
  padding: 10px;
  border-radius: 8px;
}

.board-screen.is-admin-mode .admin-stat-grid strong {
  margin: 5px 0;
  font-size: 25px;
}

.admin-stat-grid span,
.admin-stat-grid em {
  display: block;
  color: #527065;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.admin-stat-grid strong {
  display: block;
  margin: 8px 0 7px;
  color: #0f8b58;
  font-size: clamp(24px, 2.2vw, 38px);
  line-height: 0.95;
  font-weight: 1000;
}

.admin-usage-trend {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(32, 128, 91, 0.06);
}

.admin-usage-trend div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-usage-trend span,
.admin-usage-trend em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #527065;
  font-size: 12px;
  font-weight: 850;
}

.admin-usage-trend i {
  display: grid;
  align-content: end;
  gap: 3px;
  height: 58px;
}

.admin-usage-trend i::before,
.admin-usage-trend i::after {
  content: "";
  display: block;
  min-height: 4px;
  border-radius: 999px;
}

.admin-usage-trend i::before {
  width: var(--web);
  background: #2387a8;
}

.admin-usage-trend i::after {
  width: var(--mini);
  background: #20805b;
}

.admin-stats-note {
  margin: 0;
  color: #527065;
  font-size: 13px;
  font-weight: 850;
}

.admin-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(16px, 1.55vw, 22px);
  border-radius: 22px;
}

.board-screen.is-admin-mode .admin-grid {
  gap: 12px;
}

.board-screen.is-admin-mode .admin-panel {
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  box-shadow: none;
}

.board-screen.is-admin-mode .admin-panel-head h3 {
  font-size: 18px;
}

.board-screen.is-admin-mode .admin-panel-head span,
.board-screen.is-admin-mode .admin-panel label {
  font-size: 12px;
}

.board-screen.is-admin-mode .admin-panel input,
.board-screen.is-admin-mode .admin-panel select,
.board-screen.is-admin-mode .admin-panel textarea {
  min-height: 38px;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
}

.board-screen.is-admin-mode .admin-button-row {
  gap: 8px;
}

.board-screen.is-admin-mode .admin-button-row button,
.board-screen.is-admin-mode .admin-snapshot-list button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  box-shadow: none;
}

.board-screen.is-admin-mode .admin-teacher-row {
  min-width: 0;
  grid-template-columns:
    minmax(150px, 1.1fr)
    minmax(130px, 0.85fr)
    minmax(160px, 1fr)
    minmax(190px, auto);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
}

.board-screen.is-admin-mode .admin-teacher-head {
  display: grid;
}

.board-screen.is-admin-mode .admin-teacher-actions {
  grid-column: auto;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

.board-screen.is-admin-mode .admin-teacher-actions button {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11px;
}

.admin-wide {
  grid-column: 1 / -1;
}

.admin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-panel-head h3 {
  margin: 0;
  color: #0b3e32;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
}

.admin-panel label {
  display: grid;
  gap: 6px;
  color: #45685f;
  font-weight: 900;
}

.admin-panel input,
.admin-panel select,
.admin-panel textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(29, 77, 65, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #0b3e32;
  font: inherit;
  font-weight: 850;
  padding: 10px 12px;
  outline: none;
}

.admin-panel textarea {
  min-height: 132px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.admin-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-check-row label {
  width: auto;
  min-height: 38px;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(47, 138, 103, 0.09);
  color: #164f3e;
}

.admin-check-row input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.admin-announcement-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(28, 154, 132, 0.08);
  border: 1px solid rgba(28, 154, 132, 0.12);
  color: #276156;
  font-weight: 850;
  line-height: 1.55;
}

.admin-button-row button,
.admin-snapshot-list button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: #20805b;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 10px 20px rgba(32, 128, 91, 0.16);
  cursor: pointer;
}

.admin-button-row button:nth-child(2),
.admin-snapshot-list button {
  background: #2387a8;
}

.admin-button-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-button-row button.is-danger,
.admin-snapshot-list button.is-danger {
  background: #bf4c5a;
}

.admin-result,
.admin-empty,
.admin-disabled-note p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(32, 128, 91, 0.08);
  color: #244d41;
  font-weight: 850;
  line-height: 1.55;
}

.admin-danger-zone {
  border-color: rgba(191, 76, 90, 0.18);
  background: rgba(255, 255, 255, 0.92);
}

.admin-danger-zone .admin-panel-head span {
  color: #bf4c5a;
}

.admin-snapshot-list {
  display: grid;
  gap: 10px;
}

.admin-snapshot-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(32, 128, 91, 0.06);
}

.admin-snapshot-list strong,
.admin-snapshot-list span,
.admin-snapshot-list p {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-snapshot-list strong {
  color: #0b3e32;
}

.admin-snapshot-list span,
.admin-snapshot-list p {
  margin: 0;
  color: #527065;
  font-weight: 850;
}

.admin-teacher-table {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.admin-teacher-row {
  min-width: 860px;
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(160px, 1fr) minmax(190px, 1.1fr) minmax(240px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(32, 128, 91, 0.06);
}

.admin-teacher-head {
  min-height: 42px;
  background: rgba(32, 128, 91, 0.12);
  color: #0b3e32;
  font-size: 13px;
  font-weight: 1000;
}

.admin-teacher-row strong,
.admin-teacher-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-teacher-row strong {
  color: #0b3e32;
  font-size: 15px;
  font-weight: 1000;
}

.admin-teacher-row em {
  margin-top: 4px;
  color: #527065;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.admin-teacher-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-teacher-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: #20805b;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.admin-teacher-actions button:nth-child(2) {
  background: #2387a8;
}

.admin-teacher-actions button:nth-child(3) {
  background: #8d9a91;
}

@media (max-width: 1024px) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-teacher-row {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-teacher-head {
    display: none;
  }

  .admin-teacher-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .admin-stats-locked,
  .admin-stats-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-usage-trend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-snapshot-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-teacher-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-teacher-head {
    display: none;
  }

  .admin-teacher-actions {
    justify-content: flex-start;
  }
}

.web-pet-hunger-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.web-pet-image-hungry {
  filter: grayscale(1) saturate(0.08) contrast(0.92) brightness(1.04) drop-shadow(0 10px 12px rgba(40, 72, 58, 0.12)) !important;
  opacity: 0.82;
}

.web-hunger-badge {
  position: absolute;
  z-index: 3;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.student-card-pet-wrap {
  width: min(156px, 112%);
  height: min(150px, 100%);
  max-height: clamp(118px, 9vw, 150px);
}

.student-card-pet-wrap .student-card-pet-image,
.student-card-pet-wrap .web-no-pet-egg {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

.student-card .student-pet .student-card-pet-wrap .web-hunger-badge-card {
  left: 50%;
  right: auto;
  top: calc(100% - 30px);
  bottom: auto;
  width: 104px !important;
  height: 44px !important;
  transform: translateX(-50%) rotate(-3deg) !important;
}

.leader-pet-wrap {
  position: absolute;
  left: var(--leader-pet-left, 34%);
  top: var(--leader-pet-top, 55%);
  width: calc(var(--leader-pet-size, 48%) * 1.5);
  height: calc(var(--leader-pet-size, 48%) * 1.5);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.leader-card.rank-1 .leader-pet-wrap {
  --leader-pet-left: 35%;
  --leader-pet-top: 56%;
  --leader-pet-size: 50%;
}

.leader-card.rank-3 .leader-pet-wrap {
  --leader-pet-left: 34%;
  --leader-pet-top: 56%;
  --leader-pet-size: 49%;
}

.leader-pet-wrap .leader-pet {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.leader-pet-wrap .web-hunger-badge-leader {
  left: 50%;
  right: auto;
  top: calc(100% - 38px);
  bottom: auto;
  width: 58% !important;
  height: 24% !important;
  min-width: 96px;
  min-height: 40px;
  transform: translateX(-50%) rotate(-3deg) !important;
}

.scene-pet {
  overflow: visible;
}

.scene-pet-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene-pet .web-hunger-badge-scene {
  right: -22px;
  bottom: -6px;
  width: 92px !important;
  height: 39px !important;
  transform: rotate(-3deg);
}

.web-student-pet-wrap {
  width: 38px;
  height: 38px;
}

.web-student-pet-wrap > img:not(.web-hunger-badge),
.honor-row-pet-wrap > img:not(.web-hunger-badge) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.web-student-pet-wrap .web-hunger-badge-row,
.honor-row-pet-wrap .web-hunger-badge-row {
  right: -18px;
  bottom: -7px;
  width: 48px !important;
  height: 20px !important;
}

.honor-row-pet-wrap {
  width: 42px;
  height: 42px;
}

.web-pet-switch-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #effff3, #bfeccb);
  box-shadow:
    0 7px 16px rgba(33, 86, 51, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #23824a;
  cursor: pointer;
}

.web-pet-switch-btn:hover,
.web-pet-switch-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(35, 130, 74, 0.72);
  outline: none;
}

.web-pet-switch-icon {
  position: relative;
  width: 21px;
  height: 21px;
  display: block;
}

.web-pet-switch-icon i,
.web-pet-switch-icon b {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2.5px solid #23824a;
  border-radius: 999px;
  box-sizing: border-box;
}

.web-pet-switch-icon i {
  left: 0;
  top: 0;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(28deg);
}

.web-pet-switch-icon b {
  right: 0;
  bottom: 0;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(28deg);
}

.web-pet-switch-icon i::after,
.web-pet-switch-icon b::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.web-pet-switch-icon i::after {
  right: -4px;
  top: -4px;
  border-left: 5px solid #23824a;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transform: rotate(44deg);
}

.web-pet-switch-icon b::after {
  left: -4px;
  bottom: -4px;
  border-right: 5px solid #23824a;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transform: rotate(44deg);
}

.web-pet-switch-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(25, 44, 35, 0.34);
}

.web-pet-switch-modal.is-hidden {
  display: none;
}

.web-pet-switch-panel {
  width: min(440px, calc(100vw - 48px));
  max-height: min(620px, calc(100vh - 56px));
  padding: 22px;
  border: 1px solid rgba(198, 221, 196, 0.92);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.99), rgba(249, 244, 232, 0.99));
  box-shadow: 0 24px 62px rgba(25, 44, 35, 0.24);
  overflow: hidden;
}

.web-pet-switch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.web-pet-switch-head h2 {
  margin: 0;
  color: #1f4d37;
  font-size: 25px;
  line-height: 1.15;
}

.web-pet-switch-head p {
  margin: 7px 0 0;
  color: #687b69;
  font-size: 15px;
  font-weight: 700;
}

.web-pet-switch-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(232, 244, 232, 0.96);
  color: #426b4a;
  font-size: 25px;
  font-weight: 900;
  cursor: pointer;
}

.web-pet-switch-list {
  max-height: min(480px, calc(100vh - 190px));
  margin-top: 18px;
  overflow: auto;
  display: grid;
  gap: 10px;
}

.web-pet-switch-item {
  width: 100%;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid rgba(199, 221, 196, 0.92);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.84);
  color: #25412d;
  text-align: left;
  cursor: pointer;
}

.web-pet-switch-item.is-active {
  background: linear-gradient(180deg, rgba(235, 250, 239, 0.98), rgba(223, 246, 230, 0.98));
  border-color: rgba(82, 176, 112, 0.64);
  cursor: default;
}

.web-pet-switch-item img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.web-pet-switch-item span,
.web-pet-switch-item strong,
.web-pet-switch-item em {
  min-width: 0;
  display: block;
}

.web-pet-switch-item strong {
  overflow: hidden;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-pet-switch-item em {
  margin-top: 5px;
  color: #70806b;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.web-pet-switch-item b {
  min-width: 58px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #55aa68;
  color: #fff;
  font-size: 14px;
}

.web-pet-switch-item.is-active b {
  background: #f1d371;
  color: #6d5528;
}

/* Compact scoreboard chrome: no left rail, class switcher on top. */
.board-screen {
  grid-template-columns: minmax(0, 1fr) !important;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.side-nav {
  display: none !important;
}

.board-top-controls {
  position: relative !important;
  top: auto;
  left: auto;
  right: auto;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(10px, 0.8vw, 14px);
  width: auto;
  margin: 0 0 clamp(14px, 1.1vw, 20px);
  pointer-events: none;
}

.class-switcher,
.board-top-controls .search-box,
.board-logout-button {
  pointer-events: auto;
}

.board-top-controls .search-box {
  width: clamp(220px, 24vw, 330px);
  min-width: 0;
  margin: 0;
  gap: 6px;
}

.board-top-controls .search-box span {
  color: #557464;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
}

.board-top-controls .search-box input {
  width: 100%;
  min-height: 58px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(28, 103, 70, 0.1);
  backdrop-filter: blur(12px);
}

.class-switcher {
  position: relative;
  width: min(340px, 42vw);
  min-width: 230px;
}

.class-switch-current {
  width: 100%;
  min-height: 58px;
  padding: 8px 50px 8px 16px;
  border: 1px solid rgba(93, 160, 104, 0.28);
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "name count";
  align-items: center;
  gap: 2px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(235, 249, 238, 0.9)),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(28, 103, 70, 0.13);
  color: #143f32;
  text-align: left;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.class-switch-current span {
  grid-area: label;
  color: #5f7b68;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
}

.class-switch-current strong {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: #0b4d3c;
  font-size: clamp(20px, 1.85vw, 28px);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-switch-current em {
  grid-area: count;
  align-self: center;
  color: #3f7056;
  font-size: 14px;
  line-height: 1.1;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.class-switch-current i {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 3px solid #2e7a4b;
  border-bottom: 3px solid #2e7a4b;
  transform: translateY(-62%) rotate(45deg);
  transition: transform 0.16s ease;
}

.class-switcher.is-open .class-switch-current i {
  transform: translateY(-36%) rotate(225deg);
}

.class-switch-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  max-height: min(430px, 60vh);
  padding: 8px;
  border: 1px solid rgba(93, 160, 104, 0.24);
  border-radius: 18px;
  display: none;
  overflow: auto;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 52px rgba(28, 103, 70, 0.18);
  backdrop-filter: blur(14px);
}

.class-switcher.is-open .class-switch-menu {
  display: grid;
  gap: 7px;
}

.class-switch-option {
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(239, 248, 240, 0.64);
  color: #204d3b;
  text-align: left;
  cursor: pointer;
}

.class-switch-option strong {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-switch-option span {
  flex: 0 0 auto;
  color: #66806b;
  font-size: 13px;
  font-weight: 800;
}

.class-switch-option.is-active {
  border-color: rgba(255, 218, 83, 0.86);
  background: linear-gradient(180deg, #ffe98e, #ffdc62);
  color: #123d31;
}

.board-logout-button {
  margin-left: auto;
  min-width: 112px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(47, 85, 71, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(28, 103, 70, 0.12);
  color: #0f4d3b;
  font-size: 16px;
  font-weight: 1000;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.board-main[data-section="scoreboard"] .toolbar {
  align-items: flex-start;
  gap: 14px;
}

.board-main[data-section="scoreboard"] .search-box {
  margin-top: 0;
}

.board-main {
  height: 100vh !important;
  overflow: auto !important;
  padding-top: clamp(12px, 1.2vw, 20px) !important;
}

.board-main[data-section="scoreboard"] .board-header > div:first-child h1 {
  display: none;
}

.board-main[data-section="scoreboard"] .board-header > div:first-child {
  display: none;
}

.board-main[data-section="scoreboard"] .board-header {
  display: none;
}

.feature-nav {
  left: clamp(10px, 1vw, 18px) !important;
}

@media (max-width: 760px) {
  .board-top-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .class-switcher {
    width: min(100%, 360px);
  }

  .board-logout-button {
    align-self: flex-end;
  }

  .board-main {
    height: 100vh !important;
    padding-top: 12px !important;
  }
}

/* Classroom summary must stay in one row even on tablet-sized boards. */
#scoreboardContent > .summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#scoreboardContent > .summary-strip div + div {
  border-top: 0 !important;
  border-left: 2px solid rgba(26, 91, 70, 0.12) !important;
}

@media (max-width: 1120px) {
  #scoreboardContent > .summary-strip {
    min-height: 76px;
    margin: 10px 0 14px;
    border-radius: 16px;
  }

  #scoreboardContent > .summary-strip div {
    padding: 11px 10px 10px 54px;
  }

  #scoreboardContent > .summary-strip div::before {
    left: 16px;
    width: 34px;
    height: 34px;
  }

  #scoreboardContent > .summary-strip div::after {
    left: 24px;
    width: 17px;
    height: 17px;
  }

  #scoreboardContent > .summary-strip span {
    font-size: clamp(13px, 1.35vw, 16px);
  }

  #scoreboardContent > .summary-strip strong {
    margin-top: 3px;
    font-size: clamp(22px, 2.7vw, 30px);
  }
}

@media (max-width: 920px) {
  #scoreboardContent > .summary-strip {
    min-height: 64px;
    margin: 8px 0 12px;
  }

  #scoreboardContent > .summary-strip div {
    padding: 9px 8px 8px 44px;
  }

  #scoreboardContent > .summary-strip div::before {
    left: 12px;
    width: 28px;
    height: 28px;
  }

  #scoreboardContent > .summary-strip div::after {
    left: 19px;
    width: 14px;
    height: 14px;
  }

  #scoreboardContent > .summary-strip span {
    font-size: 12px;
  }

  #scoreboardContent > .summary-strip strong {
    font-size: clamp(19px, 3vw, 24px);
  }
}

@media (max-width: 760px) {
  #scoreboardContent > .summary-strip div {
    padding-left: 38px;
  }

  #scoreboardContent > .summary-strip div::before {
    left: 9px;
    width: 24px;
    height: 24px;
  }

  #scoreboardContent > .summary-strip div::after {
    left: 15px;
    width: 12px;
    height: 12px;
  }
}