:root {
  --bg: #f4faff;
  --panel: #ffffff;
  --ink: #243244;
  --muted: #6a7c91;
  --line: #dcebf8;
  --primary: #42a5f5;
  --primary-dark: #1674c6;
  --accent: #ff9d66;
  --blue: #5f8cff;
  --danger: #b83c42;
  --warn: #a76513;
  --good: #1c7d4e;
  --shadow: 0 10px 28px rgba(30, 42, 65, .08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Student icons: keep every drawn shape proportional when the window is resized. */
.student-metric-icon,
.student-message-icon,
.menu-icon,
.tab-icon {
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
  transform: translateZ(0);
}
.menu-icon {
  --menu-size: 66px;
}
.tab-icon {
  --tab-size: 26px;
}
.student-metric-icon {
  --metric-size: clamp(58px, 7vw, 88px);
  width: var(--metric-size);
  height: var(--metric-size);
}
.student-metric-icon.star,
.student-metric-icon.coin {
  width: var(--metric-size);
  height: var(--metric-size);
}
.student-metric-icon::before {
  left: 50%;
  top: 50%;
  width: 36%;
  height: 36%;
  transform: translate(-50%, -50%);
}
.student-metric-icon::after {
  inset: 18%;
}
.student-metric-icon.coin::before {
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  border-width: max(3px, calc(var(--metric-size) * .07));
  transform: translate(-50%, -50%);
}
.student-metric-icon.coin::after {
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
}
.role-student .student-menu-item span.menu-icon {
  --menu-size: clamp(36px, 6vw, 66px);
  width: var(--menu-size);
  height: var(--menu-size);
  border-radius: calc(var(--menu-size) * .3);
}
.menu-icon::before,
.menu-icon::after,
.tab-icon::before,
.tab-icon::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.menu-icon-foot::before {
  width: 30%;
  height: 42%;
  border-radius: 60% 48% 56% 44%;
  transform: translate(-38%, -25%) rotate(-18deg);
}
.menu-icon-foot::after {
  width: 46%;
  height: 18%;
  transform: translate(-48%, -160%);
  background:
    radial-gradient(circle at 16% 50%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 50% 32%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 84% 50%, #fff 0 18%, transparent 19%);
}
.menu-icon-book::before {
  width: 46%;
  height: 38%;
  border-width: max(2px, calc(var(--menu-size) * .055));
  border-left-width: max(3px, calc(var(--menu-size) * .09));
}
.menu-icon-book::after {
  width: max(2px, calc(var(--menu-size) * .035));
  height: 38%;
}
.menu-icon-chart::before {
  width: 50%;
  height: 44%;
  background:
    linear-gradient(#fff,#fff) 8% 62% / 20% 36% no-repeat,
    linear-gradient(#fff,#fff) 40% 34% / 20% 64% no-repeat,
    linear-gradient(#fff,#fff) 72% 8% / 20% 90% no-repeat;
}
.menu-icon-coin::before {
  width: 48%;
  height: 48%;
  border-width: max(3px, calc(var(--menu-size) * .075));
}
.menu-icon-coin::after {
  width: 20%;
  height: 20%;
}
.menu-icon-gift::before {
  width: 50%;
  height: 44%;
  border-width: max(2px, calc(var(--menu-size) * .06));
  border-radius: 12%;
}
.menu-icon-gift::after {
  width: max(3px, calc(var(--menu-size) * .07));
  height: 44%;
}
.menu-icon-flag::before {
  left: 38%;
  width: max(3px, calc(var(--menu-size) * .06));
  height: 52%;
}
.menu-icon-flag::after {
  left: 55%;
  top: 39%;
  width: 40%;
  height: 28%;
  border-radius: 10% 45% 45% 10%;
}
.menu-icon-chat::before {
  width: 54%;
  height: 38%;
  border-radius: 22%;
}
.menu-icon-chat::after {
  width: 18%;
  height: 18%;
  transform: translate(-105%, 68%) rotate(45deg);
}
.menu-icon-user::before {
  top: 38%;
  width: 28%;
  height: 28%;
}
.menu-icon-user::after {
  top: 68%;
  width: 52%;
  height: 28%;
  border-radius: 50% 50% 22% 22%;
}
.menu-icon-shield::before {
  width: 50%;
  height: 56%;
}
.menu-icon-shield::after {
  width: 18%;
  height: 18%;
}
.menu-icon-switch::before {
  width: 48%;
  height: 30%;
  border-top-width: max(2px, calc(var(--menu-size) * .06));
  border-bottom-width: max(2px, calc(var(--menu-size) * .06));
}
.menu-icon-switch::after {
  width: 34%;
  height: 34%;
  border-top-width: max(2px, calc(var(--menu-size) * .07));
  border-right-width: max(2px, calc(var(--menu-size) * .07));
  transform: translate(-35%, -50%) rotate(45deg);
}
.menu-icon-box::before {
  width: 50%;
  height: 40%;
  border-width: max(2px, calc(var(--menu-size) * .06));
}
.menu-icon-box::after {
  width: 44%;
  height: max(2px, calc(var(--menu-size) * .06));
  transform: translate(-50%, -210%);
}
.menu-icon-dot::before {
  width: 40%;
  height: 40%;
}
.student-message-icon {
  --message-size: clamp(50px, 8vw, 74px);
  width: var(--message-size);
  height: var(--message-size);
}
.student-message-icon::before {
  left: 50%;
  top: 44%;
  width: 38%;
  height: 43%;
  border-width: max(2px, calc(var(--message-size) * .055));
  transform: translate(-50%, -50%);
}
.student-message-icon::after {
  left: 50%;
  top: 67%;
  width: 46%;
  height: max(3px, calc(var(--message-size) * .055));
  transform: translate(-50%, -50%);
}
.mobile-tabbar span.tab-icon {
  --tab-size: 26px;
  width: var(--tab-size);
  height: var(--tab-size);
}
.tab-icon-home::before {
  top: 61%;
  width: 68%;
  height: 54%;
  border-radius: 12%;
}
.tab-icon-home::after {
  top: 36%;
  width: 48%;
  height: 48%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tab-icon-growth::before {
  top: 60%;
  width: 18%;
  height: 60%;
  box-shadow:
    calc(var(--tab-size) * -.27) calc(var(--tab-size) * .18) 0 calc(var(--tab-size) * -.04) currentColor,
    calc(var(--tab-size) * .27) calc(var(--tab-size) * -.14) 0 calc(var(--tab-size) * -.04) currentColor;
}
.tab-icon-growth::after {
  top: 34%;
  width: 42%;
  height: 42%;
  transform: translate(-8%, -50%) rotate(-35deg);
}
.tab-icon-book::before {
  width: 62%;
  height: 62%;
  border-width: max(2px, calc(var(--tab-size) * .1));
  border-left-width: max(3px, calc(var(--tab-size) * .16));
}
.tab-icon-book::after {
  width: max(2px, calc(var(--tab-size) * .07));
  height: 62%;
}
.tab-icon-user::before {
  top: 35%;
  width: 38%;
  height: 38%;
}
.tab-icon-user::after {
  top: 70%;
  width: 70%;
  height: 36%;
  border-radius: 50% 50% 18% 18%;
}
.tab-icon-chat::before {
  width: 70%;
  height: 50%;
  border-radius: 28%;
}
.tab-icon-chat::after {
  width: 24%;
  height: 24%;
  transform: translate(-95%, 52%) rotate(45deg);
}
@media (max-width: 720px) {
  .student-metric-icon {
    --metric-size: clamp(52px, 13vw, 58px);
  }
  .role-student .student-menu-item span.menu-icon {
    --menu-size: clamp(34px, 9vw, 40px);
  }
  .student-message-icon {
    --message-size: 50px;
  }
}

/* Student icon final rendering: use real SVG symbols, no text or pseudo-shape icons. */
.mark {
  display: grid;
  place-items: center;
}
.mark svg {
  width: 24px;
  height: 24px;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.student-metric-icon::before,
.student-metric-icon::after,
.student-message-icon::before,
.student-message-icon::after,
.role-student .student-menu-item span::before,
.role-student .student-menu-item span::after,
.mobile-tabbar span::before,
.mobile-tabbar span::after {
  content: none !important;
  display: none !important;
}
.student-metric-icon,
.student-message-icon,
.role-student .student-menu-item span.menu-icon,
.mobile-tabbar span.tab-icon {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
}
.student-metric-icon svg,
.student-message-icon svg,
.role-student .student-menu-item span.menu-icon svg,
.mobile-tabbar span.tab-icon svg {
  display: block;
  width: 58%;
  height: 58%;
  max-width: 100%;
  max-height: 100%;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  vector-effect: non-scaling-stroke;
}
.student-metric-icon svg {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 7px 10px rgba(30, 92, 165, .16));
}
.student-metric-icon.coin svg {
  filter: drop-shadow(0 7px 10px rgba(217, 126, 12, .18));
}
.student-message-icon svg {
  width: 48%;
  height: 48%;
  color: #2f83ff;
  stroke-width: 2.35;
}
.role-student .student-menu-item span.menu-icon svg {
  width: 52%;
  height: 52%;
  stroke-width: 2.35;
}
.mobile-tabbar span.tab-icon svg {
  width: 76%;
  height: 76%;
  stroke-width: 2.3;
}
.student-metric-icon.star,
.student-metric-icon.coin {
  width: var(--metric-size);
  min-width: var(--metric-size);
  height: var(--metric-size);
  min-height: var(--metric-size);
}
.role-student .student-menu-item span.menu-icon {
  width: var(--menu-size);
  min-width: var(--menu-size);
  height: var(--menu-size);
  min-height: var(--menu-size);
}
.mobile-tabbar span.tab-icon {
  width: var(--tab-size);
  min-width: var(--tab-size);
  height: var(--tab-size);
  min-height: var(--tab-size);
}

/* Final SVG icon override: hide old CSS pseudo icons and render only the clean SVG glyphs. */
.student-metric-icon::before,
.student-metric-icon::after,
.student-message-icon::before,
.student-message-icon::after,
.menu-icon::before,
.menu-icon::after,
.tab-icon::before,
.tab-icon::after {
  content: none !important;
  display: none !important;
}
.student-metric-icon,
.student-message-icon,
.menu-icon,
.tab-icon {
  display: grid;
  place-items: center;
}
.student-metric-icon svg,
.student-message-icon svg,
.menu-icon svg,
.tab-icon svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.student-metric-icon svg {
  width: 60%;
  height: 60%;
  color: #fff;
  filter: drop-shadow(0 5px 8px rgba(22, 74, 136, .16));
}
.student-metric-icon svg circle:first-child,
.menu-icon-coin svg circle:first-child {
  fill: rgba(255,255,255,.2);
}
.student-metric-icon.star svg path,
.student-metric-icon.coin svg path,
.menu-icon-shield svg path:last-child,
.menu-icon-coin svg path,
.menu-icon-gift svg path {
  fill: rgba(255,255,255,.9);
  stroke: rgba(255,255,255,.95);
}
.menu-icon svg {
  width: 54%;
  height: 54%;
  color: #fff;
}
.student-message-icon svg {
  width: 48%;
  height: 48%;
  color: #2f83ff;
}
.tab-icon svg {
  width: 70%;
  height: 70%;
  color: #fff;
}
.mobile-tabbar button:not(.active) .tab-icon {
  background: #eef6ff;
}
.mobile-tabbar button:not(.active) .tab-icon svg {
  color: #7f90a7;
}

/* Final SVG icon override: hide old CSS pseudo icons and render only the clean SVG glyphs. */
.student-metric-icon::before,
.student-metric-icon::after,
.student-message-icon::before,
.student-message-icon::after,
.menu-icon::before,
.menu-icon::after,
.tab-icon::before,
.tab-icon::after {
  content: none !important;
  display: none !important;
}
.student-metric-icon,
.student-message-icon,
.menu-icon,
.tab-icon {
  display: grid;
  place-items: center;
}
.student-metric-icon svg,
.student-message-icon svg,
.menu-icon svg,
.tab-icon svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.student-metric-icon svg {
  width: 60%;
  height: 60%;
  color: #fff;
  filter: drop-shadow(0 5px 8px rgba(22, 74, 136, .16));
}
.student-metric-icon svg circle:first-child,
.menu-icon-coin svg circle:first-child {
  fill: rgba(255,255,255,.2);
}
.student-metric-icon.star svg path,
.student-metric-icon.coin svg path,
.menu-icon-shield svg path:last-child,
.menu-icon-coin svg path,
.menu-icon-gift svg path {
  fill: rgba(255,255,255,.9);
  stroke: rgba(255,255,255,.95);
}
.menu-icon svg {
  width: 54%;
  height: 54%;
  color: #fff;
}
.student-message-icon svg {
  width: 48%;
  height: 48%;
  color: #2f83ff;
}
.tab-icon svg {
  width: 70%;
  height: 70%;
  color: #fff;
}
.mobile-tabbar button:not(.active) .tab-icon {
  background: #eef6ff;
}
.mobile-tabbar button:not(.active) .tab-icon svg {
  color: #7f90a7;
}

/* Final SVG icon override: hide old CSS pseudo icons and render only the clean SVG glyphs. */
.student-metric-icon::before,
.student-metric-icon::after,
.student-message-icon::before,
.student-message-icon::after,
.menu-icon::before,
.menu-icon::after,
.tab-icon::before,
.tab-icon::after {
  content: none !important;
  display: none !important;
}
.student-metric-icon,
.student-message-icon,
.menu-icon,
.tab-icon {
  display: grid;
  place-items: center;
}
.student-metric-icon svg,
.student-message-icon svg,
.menu-icon svg,
.tab-icon svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.student-metric-icon svg {
  width: 60%;
  height: 60%;
  color: #fff;
  filter: drop-shadow(0 5px 8px rgba(22, 74, 136, .16));
}
.student-metric-icon svg circle:first-child,
.menu-icon-coin svg circle:first-child {
  fill: rgba(255,255,255,.2);
}
.student-metric-icon.star svg path,
.student-metric-icon.coin svg path,
.menu-icon-shield svg path:last-child,
.menu-icon-coin svg path,
.menu-icon-gift svg path {
  fill: rgba(255,255,255,.9);
  stroke: rgba(255,255,255,.95);
}
.menu-icon svg {
  width: 54%;
  height: 54%;
  color: #fff;
}
.student-message-icon svg {
  width: 48%;
  height: 48%;
  color: #2f83ff;
}
.tab-icon svg {
  width: 70%;
  height: 70%;
  color: #fff;
}
.mobile-tabbar button:not(.active) .tab-icon {
  background: #eef6ff;
}
.mobile-tabbar button:not(.active) .tab-icon svg {
  color: #7f90a7;
}

/* SVG student icons replace the earlier CSS-drawn icon shapes. */
.student-metric-icon::before,
.student-metric-icon::after,
.student-message-icon::before,
.student-message-icon::after,
.menu-icon::before,
.menu-icon::after,
.tab-icon::before,
.tab-icon::after {
  content: none !important;
  display: none !important;
}
.student-metric-icon,
.student-message-icon,
.menu-icon,
.tab-icon {
  display: grid;
  place-items: center;
}
.student-metric-icon svg,
.student-message-icon svg,
.menu-icon svg,
.tab-icon svg {
  width: 58%;
  height: 58%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.student-metric-icon svg {
  width: 60%;
  height: 60%;
  color: #fff;
  filter: drop-shadow(0 5px 8px rgba(22, 74, 136, .16));
}
.student-metric-icon svg circle:first-child,
.menu-icon-coin svg circle:first-child {
  fill: rgba(255,255,255,.2);
}
.student-metric-icon svg path,
.student-metric-icon svg circle + circle,
.menu-icon svg path,
.menu-icon svg circle,
.tab-icon svg path,
.tab-icon svg circle,
.student-message-icon svg path,
.student-message-icon svg circle {
  stroke: currentColor;
}
.student-metric-icon.star svg path,
.student-metric-icon.coin svg path,
.menu-icon-shield svg path:last-child,
.menu-icon-coin svg path,
.menu-icon-gift svg path {
  fill: rgba(255,255,255,.9);
  stroke: rgba(255,255,255,.95);
}
.menu-icon svg {
  width: 50%;
  height: 50%;
  color: #fff;
}
.menu-icon-book svg,
.menu-icon-chart svg,
.menu-icon-flag svg,
.menu-icon-chat svg,
.menu-icon-user svg,
.menu-icon-shield svg,
.menu-icon-switch svg,
.menu-icon-box svg {
  width: 54%;
  height: 54%;
}
.student-message-icon svg {
  width: 46%;
  height: 46%;
  color: #2f83ff;
}
.tab-icon svg {
  width: 70%;
  height: 70%;
  color: #fff;
}
.mobile-tabbar button:not(.active) .tab-icon {
  background: #eef6ff;
}
.mobile-tabbar button:not(.active) .tab-icon svg {
  color: #7f90a7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(102, 191, 255, .18), transparent 260px),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px clamp(16px, 3vw, 36px);
  border-bottom: 1px solid rgba(223, 228, 236, .9);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #54c1ff, #78a8ff);
  font-weight: 800;
}
.brand h1 { margin: 0; font-size: 18px; line-height: 1.2; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px clamp(14px, 3vw, 36px) 36px;
}
.sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.side-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.side-button.active, .side-button:hover { background: rgba(66,165,245,.12); color: var(--primary-dark); }
.main { min-width: 0; display: grid; align-content: start; align-items: start; gap: 16px; }
.hero {
  padding: clamp(18px, 3vw, 28px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(42,152,231,.98), rgba(115,171,255,.88)),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 30%);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.hero h2 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 38px); letter-spacing: 0; }
.hero p { margin: 0; color: rgba(255,255,255,.82); max-width: 780px; line-height: 1.7; }
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-head h3 { margin: 0; font-size: 17px; }
.panel-body { padding: 18px; }
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.stat b { display: block; font-size: clamp(24px, 3vw, 34px); margin-top: 8px; }
.stat span { color: var(--muted); font-size: 13px; }
.stat small { display: block; margin-top: 8px; color: var(--muted); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.btn.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.btn.blue { border-color: var(--blue); background: var(--blue); color: #fff; }
.btn.success { border-color: var(--good); background: var(--good); color: #fff; }
.btn.warn { border-color: #d9922e; background: #d9922e; color: #fff; }
.btn.danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.finance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 14px;
  margin-top: 18px;
}
.finance-actions .btn {
  min-height: 54px;
  font-size: 16px;
  font-weight: 800;
}
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  outline: none;
}
.field textarea { min-height: 92px; resize: vertical; }
.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.modal-grid .span-2 { grid-column: 1 / -1; }
.permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.permission-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.permission-check input { width: 16px; height: 16px; }
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.attachment-list a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-dark);
  font-size: 12px;
  text-decoration: none;
}
.event-attachments {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}
.attachment-chip b {
  max-width: 180px;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-chip a {
  color: var(--primary-dark);
  text-decoration: none;
}
.field.full { grid-column: 1 / -1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(66,165,245,.16); }
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
}
.login-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(26px, 6vw, 72px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(52,171,239,.96), rgba(125,170,255,.9)),
    url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,.22)' stroke-width='2'%3E%3Cpath d='M120 640 C310 530 420 760 610 620 S920 410 1070 520'/%3E%3Cpath d='M180 260 C340 180 470 360 650 250 S900 80 1070 190'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,.18)'%3E%3Ccircle cx='260' cy='350' r='6'/%3E%3Ccircle cx='650' cy='250' r='7'/%3E%3Ccircle cx='880' cy='600' r='8'/%3E%3Ccircle cx='460' cy='670' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}
.login-art h1 { margin: 0; font-size: clamp(34px, 6vw, 62px); letter-spacing: 0; }
.login-art p { max-width: 680px; line-height: 1.8; color: rgba(255,255,255,.82); }
.login-card {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(22px, 5vw, 56px);
  background: #fff;
}
.role-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.role-tabs button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.role-tabs button.active { border-color: var(--primary); color: #fff; background: var(--primary); }
.login-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.login-route-note {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  color: #2176d2;
  background: #eef7ff;
  border: 1px solid #cfe7ff;
  font-weight: 700;
  font-size: 14px;
}
.standalone-register {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 42px);
  background:
    radial-gradient(circle at 12% 10%, rgba(66,165,245,.18), transparent 30%),
    linear-gradient(180deg, #eef8ff 0%, #f8fbff 48%, #fff 100%);
}
.standalone-register-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto 18px;
}
.standalone-register-head h1 {
  margin: 4px 0 0;
  font-size: clamp(28px, 5vw, 44px);
  color: var(--ink);
}
.teacher-register-panel {
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
}
.share-link-box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.share-link-box code {
  display: block;
  overflow: hidden;
  color: var(--primary-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-bottom-actions {
  justify-content: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-bottom-actions .btn {
  min-width: 120px;
  min-height: 44px;
}
.import-error-list {
  max-height: 320px;
  overflow: auto;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(239, 68, 68, .22);
  border-radius: 8px;
  background: rgba(254, 242, 242, .72);
}
.import-error-list p {
  margin: 0 0 8px;
  color: #9f1239;
  line-height: 1.5;
}
.import-error-list p:last-child {
  margin-bottom: 0;
}
.import-preview-table {
  margin-top: 12px;
  max-height: 340px;
}
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 12px; font-weight: 700; background: #fafbfc; }
td { font-size: 14px; }
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fcff;
}
.page-summary {
  color: var(--muted);
  font-size: 13px;
}
.page-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border-color: #cfe6fb;
  color: var(--primary-dark);
  background: #fff;
}
.page-btn.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}
.page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.page-gap {
  color: var(--muted);
  padding: 0 4px;
}
.page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.page-size select {
  width: auto;
  min-width: 92px;
  height: 34px;
  padding: 0 28px 0 10px;
  border-color: #cfe6fb;
  background-color: #fff;
}
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--primary-dark);
  background: rgba(31,122,109,.1);
}
.badge.warn { color: var(--warn); background: rgba(191,107,32,.12); }
.badge.danger { color: var(--danger); background: rgba(184,60,66,.1); }
.badge.blue { color: var(--blue); background: rgba(40,104,183,.1); }
.badge.success { color: var(--good); background: rgba(28,125,78,.12); }
.attendance-rate {
  display: inline-grid;
  min-width: 86px;
  min-height: 42px;
  place-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--primary-dark);
  background: rgba(66,165,245,.1);
  text-align: center;
}
.attendance-rate b {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}
.attendance-rate small {
  display: block;
  margin-top: 2px;
  color: inherit;
  font-size: 11px;
  white-space: nowrap;
  opacity: .78;
}
.attendance-rate.success { color: var(--good); background: rgba(28,125,78,.12); }
.attendance-rate.warn { color: var(--warn); background: rgba(191,107,32,.12); }
.attendance-rate.danger { color: var(--danger); background: rgba(184,60,66,.1); }
.attendance-rate.blue { color: var(--blue); background: rgba(40,104,183,.1); }
.list { display: grid; gap: 10px; }
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.item strong { display: block; }
.item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.profile {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--blue);
  font-size: 24px;
  font-weight: 800;
}
.avatar img,
.student-thumb img,
.student-switch-avatar img,
.student-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.student-thumb {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #51bdff, #7da9ff);
  font-weight: 800;
  vertical-align: middle;
  overflow: hidden;
}
.student-photo-form {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.student-photo-upload {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  cursor: pointer;
}
.student-photo-preview {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #51bdff, #7da9ff);
  font-size: 26px;
  font-weight: 900;
  overflow: hidden;
}
.student-photo-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, transparent 48%, rgba(19, 35, 58, .56));
  opacity: .92;
  pointer-events: none;
}
.student-photo-upload > span:not(.student-photo-preview) {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  z-index: 2;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}
.hidden-file {
  display: none !important;
}
.student-photo-form input + input {
  margin-top: 8px;
}
.student-photo-form small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
.student-info-page {
  display: grid;
  gap: 16px;
}
.student-info-tip {
  border-color: rgba(46, 142, 255, .22);
  background: linear-gradient(135deg, rgba(238, 248, 255, .92), rgba(248, 252, 255, .96));
}
.student-info-card,
.student-feedback-accordion {
  border: 1px solid rgba(189, 221, 255, .92);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 252, 255, .92));
  box-shadow: 0 16px 36px rgba(48, 131, 255, .08);
}
.student-info-card {
  padding: 18px;
}
.student-photo-field-compact .student-photo-form {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(187, 220, 255, .9);
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fcff, #eef7ff);
}
.student-photo-field-compact .student-photo-upload {
  width: 88px;
  height: 88px;
  border-radius: 28px;
}
.student-photo-fixed {
  display: grid;
  gap: 8px;
}
.student-photo-fixed strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}
.student-photo-fixed p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.student-info-grid {
  margin-top: 0;
}
.student-info-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.student-info-actions .btn {
  min-width: 132px;
}
.auto-save-note {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(66, 165, 245, .2);
  border-radius: 12px;
  color: #5f748e;
  background: rgba(234, 245, 255, .72);
  font-size: 13px;
  font-weight: 700;
}
.auto-save-note.in-accordion {
  margin: 14px 18px 18px;
}
.student-feedback-accordion {
  padding: 0;
  overflow: hidden;
}
.student-feedback-accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 54px 18px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.student-feedback-accordion summary::-webkit-details-marker {
  display: none;
}
.student-feedback-accordion summary::after {
  content: "⌄";
  position: absolute;
  right: 20px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  color: #1677ff;
  background: #eaf5ff;
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease;
}
.student-feedback-accordion[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
  background: #d9edff;
}
.student-feedback-accordion summary strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
}
.student-feedback-accordion summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.student-feedback-accordion > .notice {
  margin: 0 18px 16px;
}
.student-feedback-fields {
  padding: 0 18px;
}
.student-feedback-accordion > .student-info-actions {
  padding: 0 18px 18px;
}
.student-password-accordion {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,253,255,.94));
}
.logout-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 184, 184, .72);
  border-radius: 18px;
  background: linear-gradient(135deg, #fffafa, #fff);
  box-shadow: 0 14px 30px rgba(184, 60, 66, .08);
}
.logout-panel strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}
.logout-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.progress {
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: #e9edf3;
}
.progress > i { display: block; height: 100%; background: var(--primary); }
.back-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--primary-dark);
}
.student-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(140px, .6fr));
  gap: 12px;
}
.student-card {
  width: 100%;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fcff);
  box-shadow: var(--shadow);
}
.student-card.stat-link {
  min-height: 118px;
  cursor: pointer;
}
.student-card.stat-link:hover {
  border-color: rgba(66,165,245,.7);
  transform: translateY(-1px);
}
.student-card.feature {
  color: #fff;
  background: linear-gradient(135deg, #48b9ff, #87b9ff);
}
.student-card.feature p { color: rgba(255,255,255,.86); }
.student-card h2, .student-card h3 { margin: 0; letter-spacing: 0; }
.student-card p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.student-card b { display: block; margin-top: 6px; font-size: 28px; }
.student-card small { display: block; margin-top: 4px; color: var(--primary-dark); }
.student-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.student-menu-item {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  color: var(--ink);
}
.student-menu-item span,
.mobile-tabbar span {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #51bdff, #7da9ff);
  font-weight: 800;
}
.student-menu-item span::before,
.student-menu-item span::after,
.mobile-tabbar span::before,
.mobile-tabbar span::after {
  content: none;
  display: none;
  position: absolute;
  box-sizing: border-box;
}
.student-menu-item b { font-size: 14px; }
.student-switch-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.student-switch-option {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  cursor: pointer;
}
.student-switch-option:hover {
  border-color: rgba(66,165,245,.7);
  box-shadow: 0 8px 22px rgba(66,165,245,.1);
}
.student-switch-option input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.student-switch-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #51bdff, #7da9ff);
  font-weight: 900;
}
.student-switch-meta {
  min-width: 0;
}
.student-switch-meta strong {
  display: block;
  color: var(--ink);
}
.student-switch-meta small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-tabbar { display: none; }
.role-student {
  background:
    radial-gradient(circle at 16% 8%, rgba(128,206,255,.32), transparent 26%),
    linear-gradient(180deg, #f1f9ff 0%, #f8fcff 42%, #ffffff 100%);
}
.role-student .main {
  background:
    radial-gradient(circle at 88% 4%, rgba(99,180,255,.18), transparent 26%),
    linear-gradient(180deg, rgba(238,248,255,.72), rgba(255,255,255,.88));
}
.role-student .panel {
  border-color: rgba(180,216,246,.76);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 45px rgba(68,137,208,.1);
}
.role-student .panel-head {
  padding-bottom: 4px;
}
.role-student .panel-head h3 {
  position: relative;
  padding-left: 18px;
  font-size: 22px;
}
.role-student .panel-head h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f83ff, #72caff);
}
.role-student .item {
  border-color: rgba(189,222,249,.78);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f9fdff);
}
.student-center-head,
.student-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.student-center-head h1,
.student-page-head h2 {
  margin: 0;
  color: #172b4d;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 0;
}
.student-center-head p,
.student-page-head p {
  margin: 8px 0 0;
  color: #7689a6;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
}
.student-page-head > div:first-child > span {
  display: inline-block;
  margin-bottom: 6px;
  color: #2279d7;
  font-size: 13px;
  font-weight: 900;
}
.student-page-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  color: #7689a6;
}
.student-header-avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 5px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 26%, #fff 0 9%, transparent 10%),
    linear-gradient(145deg, #8ddcff, #2f83ff);
  box-shadow: 0 14px 34px rgba(47,131,255,.22);
  font-size: 30px;
  font-weight: 900;
  overflow: hidden;
}
.student-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.student-growth-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 18px;
  min-height: 255px;
  margin-bottom: 24px;
  padding: clamp(26px, 5vw, 48px);
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 35%, rgba(255,255,255,.34), transparent 18%),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, #1c77ff 0%, #42b9ff 58%, #78c7ff 100%);
  box-shadow: 0 24px 58px rgba(46,124,255,.24);
}
.student-growth-hero::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -76px;
  width: 280px;
  height: 280px;
  border: 28px solid rgba(255,255,255,.18);
  border-radius: 50%;
}
.student-growth-copy {
  position: relative;
  z-index: 1;
}
.student-overline {
  margin-bottom: 10px;
  color: rgba(255,255,255,.82);
  font-weight: 900;
}
.student-growth-copy h2 {
  display: inline-block;
  margin: 0 16px 0 0;
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
  letter-spacing: 0;
}
.student-growth-copy p {
  margin: 24px 0 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(17px, 2.6vw, 26px);
  font-weight: 800;
}
.student-progress-line {
  max-width: 640px;
  margin-top: 30px;
}
.student-progress-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
}
.student-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe873, #ffcf63);
}
.student-progress-line p {
  margin-top: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.student-progress-line b {
  color: #ffe873;
  font-size: 24px;
}
.student-hero-mark {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  border: 14px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 18px rgba(255,255,255,.1);
}
.student-hero-mark span {
  width: 78px;
  height: 78px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  background: rgba(255,255,255,.52);
}
.role-student .student-top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 24px;
}
.role-student .student-card {
  border-color: rgba(180,216,246,.78);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 42px rgba(68,137,208,.12);
}
.student-metric {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 150px;
  padding: 28px;
}
.student-metric p {
  margin: 0;
  color: #65758f;
  font-size: 20px;
  font-weight: 700;
}
.student-metric b {
  margin-top: 8px;
  color: #172b4d;
  font-size: clamp(42px, 7vw, 58px);
  line-height: 1;
}
.student-metric small {
  margin-top: 8px;
  color: #2f83ff;
  font-size: 17px;
  font-weight: 800;
}
.student-metric-icon,
.student-message-icon,
.student-menu-item span {
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
}
.student-metric-icon {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.95) 0 11%, transparent 12%),
    linear-gradient(145deg, #75caff, #2f83ff);
  box-shadow: 0 18px 30px rgba(47,131,255,.22), inset 0 -12px 24px rgba(35,84,175,.16);
}
.student-metric-icon.star,
.student-metric-icon.coin {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  color: #fff;
}
.student-metric-icon.coin {
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,.95) 0 9%, transparent 10%),
    linear-gradient(145deg, #ffd76d, #ff9e2d);
  box-shadow: 0 18px 30px rgba(255,158,45,.22), inset 0 -12px 24px rgba(176,87,0,.14);
}
.student-metric-icon::before {
  content: none;
  display: none;
  position: absolute;
  width: 32px;
  height: 32px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 5px 10px rgba(21,72,136,.18));
}
.student-metric-icon::after {
  content: none;
  display: none;
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.32);
}
.student-metric-icon.coin::before {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  clip-path: none;
  background: transparent;
  border: 6px solid rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.25);
}
.student-metric-icon.coin::after {
  inset: auto;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}
.role-student .student-menu-grid {
  gap: 26px;
  padding: 10px 8px 4px;
}
.role-student .student-menu-item {
  min-height: 154px;
  padding: 20px 10px;
  border-color: rgba(190,222,249,.86);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: 0 14px 30px rgba(68,137,208,.08);
}
.role-student .student-menu-item span {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: linear-gradient(145deg, #3e95ff, #73ceff);
  box-shadow: 0 14px 24px rgba(47,131,255,.22);
}
.menu-icon-book { background: linear-gradient(145deg, #48d69b, #20b980) !important; }
.menu-icon-chart { background: linear-gradient(145deg, #9e73ff, #6b53e9) !important; }
.menu-icon-coin,
.menu-icon-gift { background: linear-gradient(145deg, #ffbf57, #ff932f) !important; }
.menu-icon-flag { background: linear-gradient(145deg, #ff7d7d, #ff5d67) !important; }
.menu-icon-chat { background: linear-gradient(145deg, #4597ff, #2c77ea) !important; }
.menu-icon-spark { background: linear-gradient(145deg, #57c7ff, #6d68ff) !important; }
.menu-icon-user { background: linear-gradient(145deg, #45d0e1, #24a9c3) !important; }
.menu-icon-shield { background: linear-gradient(145deg, #8f6bff, #6a4be5) !important; }
.menu-icon-switch { background: linear-gradient(145deg, #63c7ff, #367dff) !important; }
.menu-icon-box { background: linear-gradient(145deg, #6fd6ff, #468dff) !important; }
.menu-icon-foot::before {
  width: 20px;
  height: 28px;
  border-radius: 60% 48% 56% 44%;
  background: #fff;
  transform: rotate(-18deg) translate(3px, 5px);
}
.menu-icon-foot::after {
  width: 26px;
  height: 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 4px 4px, #fff 0 4px, transparent 4px),
    radial-gradient(circle at 12px 3px, #fff 0 4px, transparent 4px),
    radial-gradient(circle at 20px 4px, #fff 0 4px, transparent 4px);
  transform: translate(-2px, -17px);
}
.menu-icon-book::before {
  width: 28px;
  height: 24px;
  border: 4px solid #fff;
  border-radius: 5px;
  border-left-width: 7px;
}
.menu-icon-book::after {
  width: 2px;
  height: 24px;
  background: rgba(255,255,255,.78);
}
.menu-icon-chart::before {
  width: 30px;
  height: 28px;
  background:
    linear-gradient(#fff,#fff) 3px 15px / 6px 10px no-repeat,
    linear-gradient(#fff,#fff) 12px 8px / 6px 17px no-repeat,
    linear-gradient(#fff,#fff) 21px 3px / 6px 22px no-repeat;
}
.menu-icon-coin::before,
.menu-icon-gift::before {
  width: 30px;
  height: 30px;
  border: 5px solid #fff;
  border-radius: 50%;
}
.menu-icon-coin::after,
.menu-icon-gift::after {
  width: 12px;
  height: 12px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}
.menu-icon-gift::before {
  border-radius: 7px;
  border-width: 4px;
}
.menu-icon-gift::after {
  width: 4px;
  height: 28px;
  clip-path: none;
  border-radius: 99px;
}
.menu-icon-flag::before {
  width: 4px;
  height: 32px;
  left: 20px;
  background: #fff;
  border-radius: 99px;
}
.menu-icon-flag::after {
  width: 26px;
  height: 18px;
  left: 22px;
  top: 16px;
  background: #fff;
  border-radius: 4px 9px 9px 4px;
  clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}
.menu-icon-chat::before {
  width: 34px;
  height: 25px;
  border-radius: 10px;
  background: #fff;
}
.menu-icon-chat::after {
  width: 12px;
  height: 12px;
  background: #fff;
  transform: translate(-9px, 11px) rotate(45deg);
}
.menu-icon-user::before {
  width: 18px;
  height: 18px;
  top: 15px;
  border-radius: 50%;
  background: #fff;
}
.menu-icon-user::after {
  width: 34px;
  height: 18px;
  bottom: 13px;
  border-radius: 18px 18px 8px 8px;
  background: #fff;
}
.menu-icon-shield::before {
  width: 32px;
  height: 36px;
  background: #fff;
  clip-path: polygon(50% 0, 90% 15%, 82% 70%, 50% 100%, 18% 70%, 10% 15%);
}
.menu-icon-shield::after {
  width: 11px;
  height: 11px;
  background: currentColor;
  color: #7b5df2;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}
.menu-icon-switch::before {
  width: 30px;
  height: 18px;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
}
.menu-icon-switch::after {
  width: 24px;
  height: 24px;
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
  transform: rotate(45deg);
}
.menu-icon-box::before {
  width: 32px;
  height: 26px;
  border: 4px solid #fff;
  border-radius: 6px;
}
.menu-icon-box::after {
  width: 28px;
  height: 4px;
  background: #fff;
  transform: translateY(-8px);
}
.menu-icon-dot::before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
}
.role-student .student-menu-item b {
  color: #172b4d;
  font-size: 18px;
}
.student-message-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(190,222,249,.9);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #f8fcff);
}
.student-message-icon {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  color: #2f83ff;
  background: #eef6ff;
}
.student-message-icon::before {
  content: none;
  display: none;
  position: absolute;
  width: 28px;
  height: 32px;
  top: 18px;
  left: 23px;
  border: 4px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 8px 8px;
}
.student-message-icon::after {
  content: none;
  display: none;
  position: absolute;
  width: 34px;
  height: 4px;
  left: 20px;
  top: 48px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 8px 7px 0 -4px currentColor, -8px 7px 0 -4px currentColor;
}
.student-message-card h3 {
  margin: 0 0 8px;
  color: #172b4d;
  font-size: 24px;
}
.student-message-card p {
  margin: 0 0 12px;
  color: #65758f;
}
.student-ai-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(111, 180, 255, .55);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 220, 137, .34), transparent 28%),
    linear-gradient(135deg, #ffffff, #e8f6ff);
  box-shadow: 0 16px 34px rgba(50, 134, 231, .12);
}
.student-ai-entry span {
  color: #1675d1;
  font-weight: 800;
}
.student-ai-entry h3 {
  margin: 4px 0 6px;
  color: #172b4d;
  font-size: 22px;
}
.student-ai-entry p {
  margin: 0;
  color: #65758f;
}
.student-ai-orb,
.dialog-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #50c6ff, #3977ff);
  box-shadow: 0 14px 24px rgba(56, 123, 255, .2);
}
.student-ai-orb svg,
.dialog-avatar svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dialog-list {
  display: grid;
  gap: 14px;
}
.dialog-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(190,222,249,.86);
  border-radius: 20px;
  background: #fff;
}
.dialog-item.unread {
  background: linear-gradient(135deg, #fff, #f0f8ff);
}
.dialog-bubble p {
  margin: 6px 0;
  color: #344761;
  line-height: 1.6;
}
.dialog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dialog-bubble small {
  color: #6b7d95;
}
.ai-assistant-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #eaf7ff, #fff);
  border: 1px solid rgba(190,222,249,.86);
}
.ai-assistant-hero h3 {
  margin: 0 0 8px;
  color: #172b4d;
}
.ai-assistant-hero p {
  margin: 0;
  color: #65758f;
  line-height: 1.6;
}
.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.ai-chat-box {
  display: grid;
  gap: 12px;
  padding: 16px;
  min-height: 220px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
  border-radius: 22px;
  background: #f7fbff;
  border: 1px solid rgba(190,222,249,.86);
}
.ai-chat-box::-webkit-scrollbar {
  width: 8px;
}
.ai-chat-box::-webkit-scrollbar-track {
  background: rgba(214, 234, 255, .72);
  border-radius: 999px;
}
.ai-chat-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #83c7ff, #4a94f2);
  border-radius: 999px;
}
.ai-chat-row {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}
.ai-chat-row.user {
  justify-items: end;
}
.ai-chat-bubble {
  max-width: min(680px, 88%);
  padding: 12px 14px;
  border-radius: 16px;
  color: #20324a;
  background: #fff;
  border: 1px solid rgba(190,222,249,.86);
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ai-chat-row.user .ai-chat-bubble {
  color: #fff;
  background: linear-gradient(135deg, #3ca2ff, #316fff);
  border-color: transparent;
}
.ai-chat-row small {
  color: #7a8ca5;
}
.ai-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-top: 14px;
  align-items: end;
}
.ai-compose textarea {
  min-height: 76px;
}
.role-student .ai-chat-box {
  max-height: min(48vh, 460px);
}
.role-admin .ai-chat-box,
.role-teacher .ai-chat-box {
  max-height: min(50vh, 500px);
}
.shop-hero,
.rank-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(109, 181, 255, .28);
  border-radius: 8px;
  color: #173149;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(218,242,255,.92)),
    radial-gradient(circle at 86% 22%, rgba(255,214,164,.42), transparent 28%);
  box-shadow: var(--shadow);
}
.rank-hero > div:first-child {
  flex: 1;
  min-width: 0;
}
.shop-hero span,
.rank-hero span {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}
.shop-hero h2,
.rank-hero h2 {
  margin: 6px 0;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: 0;
}
.shop-hero p,
.rank-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.gift-card {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(121, 186, 244, .34);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f7fcff);
  box-shadow: 0 10px 24px rgba(46, 106, 164, .08);
}
.gift-visual,
.gift-preview {
  min-height: 122px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #c9ecff, #8fbfff);
}
.gift-visual img,
.gift-preview img,
.gift-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gift-visual.placeholder,
.gift-preview.placeholder,
.gift-thumb.placeholder {
  display: grid;
  place-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
  padding: 8px;
}
.gift-visual.placeholder span,
.gift-preview.placeholder span {
  font-size: 34px;
  font-weight: 900;
}
.gift-visual.placeholder small,
.gift-preview.placeholder small,
.gift-thumb.placeholder small {
  max-width: 100%;
  color: rgba(255,255,255,.78);
  font-size: 10px;
  word-break: break-all;
}
.gift-info {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.gift-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.gift-title h3 {
  margin: 0;
  font-size: 17px;
}
.gift-info p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.gift-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.gift-meta span {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(66,165,245,.08);
}
.coin-pill {
  color: #9b5418 !important;
  background: rgba(255,157,102,.18) !important;
  font-weight: 800;
}
.gift-button {
  grid-column: 2;
  justify-self: start;
}
.gift-thumb {
  width: 58px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #c9ecff, #8fbfff);
}
.gift-thumb.placeholder span {
  font-size: 18px;
  font-weight: 900;
}
.gift-image-form {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.gift-preview {
  min-height: 108px;
}
.rank-me {
  min-width: 0;
  align-self: stretch;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(66,165,245,.2);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(61,145,235,.1);
  text-align: center;
}
.rank-me small,
.rank-me span {
  display: block;
  color: var(--muted);
}
.rank-me b {
  display: block;
  margin: 8px 0 0;
  color: var(--primary-dark);
  font-size: clamp(44px, 7vw, 64px);
  line-height: 1;
}
.rank-progress-card {
  max-width: 720px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(66,165,245,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 16px 42px rgba(66,165,245,.12);
}
.rank-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rank-progress-top small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}
.rank-progress-top strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 36px;
  line-height: 1;
}
.rank-progress-bar {
  position: relative;
  height: 12px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(121,186,244,.22);
}
.rank-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35b8ff, #7da9ff 48%, #ffd166);
  box-shadow: 0 0 18px rgba(53,184,255,.45);
}
.rank-progress-card p {
  margin-top: 10px;
  font-weight: 700;
}
.rank-medal {
  --medal-a: #48b9ff;
  --medal-b: #7da9ff;
  --medal-c: #dff5ff;
  position: relative;
  display: inline-grid;
  grid-template-columns: 26px minmax(0, auto);
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 12px 5px 6px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #173149;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.66)),
    linear-gradient(135deg, var(--medal-c), rgba(255,255,255,.15));
  box-shadow: 0 10px 24px rgba(36,118,196,.14), inset 0 1px 0 rgba(255,255,255,.85);
  vertical-align: middle;
}
.rank-medal i {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--medal-a) 13% 48%, var(--medal-b) 49% 100%);
  box-shadow: inset 0 -3px 8px rgba(0,0,0,.14), 0 6px 14px rgba(54,137,218,.22);
}
.rank-medal i::before {
  content: "";
  width: 11px;
  height: 11px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  background: #fff;
  opacity: .92;
}
.rank-medal b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}
.rank-medal.large {
  grid-template-columns: 42px minmax(0, auto);
  min-height: 50px;
  padding: 6px 16px 6px 7px;
}
.rank-medal.large i {
  width: 42px;
  height: 42px;
}
.rank-medal.large i::before {
  width: 18px;
  height: 18px;
}
.rank-medal.large b {
  font-size: 16px;
}
.rank-medal.mini {
  grid-template-columns: 20px minmax(0, auto);
  min-height: 28px;
  padding: 4px 9px 4px 5px;
}
.rank-medal.mini i {
  width: 20px;
  height: 20px;
}
.rank-medal.mini i::before {
  width: 8px;
  height: 8px;
}
.rank-medal.mini b {
  font-size: 12px;
}
.rank-medal-1 { --medal-a: #7dc8ff; --medal-b: #4b8dff; --medal-c: #dff5ff; }
.rank-medal-2 { --medal-a: #62d6c6; --medal-b: #2f9fbc; --medal-c: #d8fbf2; }
.rank-medal-3 { --medal-a: #8fc7ff; --medal-b: #746bff; --medal-c: #e8ecff; }
.rank-medal-4 { --medal-a: #ffcc66; --medal-b: #ff8f70; --medal-c: #fff0d7; }
.rank-medal-5 { --medal-a: #93e0ff; --medal-b: #1674c6; --medal-c: #dff5ff; }
.rank-medal-6 { --medal-a: #d7b6ff; --medal-b: #6d68ff; --medal-c: #f0e7ff; }
.rank-medal-7 { --medal-a: #ffe28a; --medal-b: #42a5f5; --medal-c: #fff7cf; }
.student-card.feature .rank-medal {
  margin-left: 8px;
  transform: translateY(-4px);
}
.rank-rule-card {
  display: grid;
  gap: 12px;
  align-content: start;
}
.leader-score .rank-medal {
  margin-top: 5px;
}
.podium-card .rank-medal {
  margin-top: 12px;
}
.role-student .shop-hero,
.role-student .rank-hero {
  border-color: rgba(180,216,246,.76);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,218,135,.28), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(224,244,255,.94));
  box-shadow: 0 18px 45px rgba(68,137,208,.1);
}
.role-student .rank-hero h2,
.role-student .shop-hero h2 {
  color: #172b4d;
}
.role-student .rank-me,
.role-student .rank-progress-card,
.role-student .podium-card,
.role-student .leader-row,
.role-student .gift-card {
  border-color: rgba(190,222,249,.86);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #f9fdff);
  box-shadow: 0 14px 30px rgba(68,137,208,.08);
}
.role-student .gift-grid {
  gap: 18px;
}
.role-student .gift-card {
  padding: 16px;
}
.role-student .gift-visual {
  border-radius: 18px;
}
.role-student .table-wrap {
  border: 1px solid rgba(190,222,249,.76);
  border-radius: 18px;
  background: #fff;
}
.role-student table {
  min-width: 720px;
}
.role-student th {
  background: #f4faff;
}
.role-student th,
.role-student td {
  border-bottom-color: rgba(190,222,249,.72);
}
.podium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.podium-card {
  position: relative;
  min-height: 210px;
  padding: 18px;
  border: 1px solid rgba(121, 186, 244, .32);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.podium-card.top-1 {
  background: linear-gradient(180deg, #fffdf7, #eef8ff);
}
.podium-medal {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: #9b5418;
  background: rgba(255,157,102,.18);
  font-size: 12px;
  font-weight: 900;
}
.leader-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #51bdff, #7da9ff);
  font-weight: 900;
}
.leader-avatar.large {
  width: 58px;
  height: 58px;
  margin-top: 14px;
  font-size: 22px;
}
.podium-card h3 {
  margin: 12px 0 4px;
}
.podium-card p {
  margin: 0;
  color: var(--muted);
}
.podium-card b {
  display: block;
  margin-top: 12px;
  font-size: 34px;
  color: var(--primary-dark);
}
.leader-list {
  display: grid;
  gap: 10px;
}
.leader-row {
  display: grid;
  grid-template-columns: 42px 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.leader-row.mine {
  border-color: rgba(255,157,102,.65);
  background: linear-gradient(90deg, rgba(255,157,102,.12), #fff);
}
.leader-rank {
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}
.leader-main strong {
  display: block;
}
.leader-main p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.leader-score {
  text-align: right;
}
.leader-score b {
  display: block;
  font-size: 22px;
}
.leader-score span {
  color: var(--muted);
  font-size: 12px;
}
.teacher-home-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #48b9ff, #87b9ff);
  box-shadow: var(--shadow);
}
.teacher-home-card h2 { margin: 0; letter-spacing: 0; }
.teacher-home-card p { margin: 8px 0 0; color: rgba(255,255,255,.86); }
.teacher-profile {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.teacher-intro-block {
  margin-top: 16px;
}
.teacher-intro-block .field textarea {
  min-height: 110px;
}
.teacher-profile-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.teacher-profile-actions .btn {
  min-width: 132px;
}
.teacher-photo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 8px;
  color: #fff;
  background: linear-gradient(135deg, #51bdff, #7da9ff);
  font-size: 26px;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
}
.teacher-photo span {
  font-size: 11px;
  line-height: 1.25;
  word-break: break-all;
}
.teacher-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.score-button {
  margin-top: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(66,165,245,.35);
  border-radius: 6px;
  color: var(--primary-dark);
  background: rgba(66,165,245,.1);
}
.privacy-button {
  padding: 0;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  text-decoration: underline;
}
.privacy-button.revealed {
  color: var(--ink);
  text-decoration: none;
}
.field small {
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}
.subsection {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.subsection h4 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 17px;
}
.info-card {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.info-card span {
  color: var(--muted);
  font-size: 13px;
}
.info-card strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.cell-note {
  max-width: 220px;
  margin-bottom: 8px;
  color: var(--ink);
  line-height: 1.45;
}
.rich-editor {
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  line-height: 1.7;
  outline: none;
}
.rich-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(66,165,245,.16);
}
.option-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.option-stack input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.event-item {
  align-items: flex-start;
}
.event-desc {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.65;
}
.event-desc p {
  margin: 4px 0;
}
.filterbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
.filter-actions {
  min-height: 40px;
  align-content: end;
}
.role-admin .main,
.role-teacher .main {
  align-content: start;
  align-items: start;
  gap: 10px;
}
.role-admin .panel,
.role-teacher .panel {
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(33, 119, 194, .06);
}
.role-admin .panel-head,
.role-teacher .panel-head {
  min-height: 46px;
  padding: 10px 12px;
}
.role-admin .panel-head h3,
.role-teacher .panel-head h3 {
  font-size: 15px;
}
.role-admin .panel-body,
.role-teacher .panel-body {
  padding: 12px;
}
.role-admin .filter-panel,
.role-teacher .filter-panel {
  align-self: start;
  box-shadow: none;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.role-admin .filter-panel.no-panel-actions .panel-head,
.role-teacher .filter-panel.no-panel-actions .panel-head {
  display: none;
}
.role-admin .filter-panel .panel-head,
.role-teacher .filter-panel .panel-head {
  min-height: 40px;
  padding: 8px 12px;
}
.role-admin .filter-panel .panel-body,
.role-teacher .filter-panel .panel-body {
  padding: 10px 12px;
}
.role-admin .filterbar,
.role-teacher .filterbar {
  grid-template-columns: repeat(auto-fit, minmax(136px, 180px));
  gap: 8px;
  justify-content: start;
}
.role-admin .filterbar .field,
.role-teacher .filterbar .field {
  gap: 4px;
}
.role-admin .filterbar .field label,
.role-teacher .filterbar .field label {
  font-size: 12px;
}
.role-admin .filterbar .field input,
.role-admin .filterbar .field select,
.role-teacher .filterbar .field input,
.role-teacher .filterbar .field select {
  width: min(100%, 180px);
  min-height: 34px;
  padding: 6px 9px;
  font-size: 13px;
}
.role-admin .filter-actions,
.role-teacher .filter-actions {
  display: flex;
  min-height: 34px;
  gap: 6px;
  align-content: end;
}
.role-admin .filter-actions .btn,
.role-teacher .filter-actions .btn {
  flex: 1 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}
.role-admin table,
.role-teacher table {
  min-width: 720px;
}
.role-admin th,
.role-admin td,
.role-teacher th,
.role-teacher td {
  padding: 8px 8px;
  font-size: 13px;
}
.role-admin th,
.role-teacher th {
  font-size: 12px;
}
.role-admin .btn,
.role-teacher .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}
.role-admin .stat,
.role-teacher .stat {
  min-height: 82px;
  padding: 11px 12px;
}
.role-admin .stat b,
.role-teacher .stat b {
  margin-top: 5px;
  font-size: clamp(22px, 2.2vw, 28px);
}
.role-admin .stat small,
.role-teacher .stat small {
  margin-top: 5px;
}
.role-admin .grid,
.role-teacher .grid {
  gap: 10px;
}
.role-admin .field,
.role-teacher .field {
  gap: 5px;
}
.role-admin .field input,
.role-admin .field select,
.role-admin .field textarea,
.role-teacher .field input,
.role-teacher .field select,
.role-teacher .field textarea {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 14px;
}
.role-admin .field textarea,
.role-teacher .field textarea {
  min-height: 76px;
}
.role-admin .notice,
.role-teacher .notice {
  padding: 10px 12px;
  line-height: 1.55;
}
.role-admin .table-pagination,
.role-teacher .table-pagination {
  padding: 8px 10px;
}
.checkgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.checkline.compact {
  min-height: 30px;
  padding: 5px 8px;
  gap: 6px;
}
.checkline.compact input[type="checkbox"] {
  width: 14px;
  height: 14px;
}
.submit-row {
  display: flex;
  justify-content: center;
  padding: 20px 0 4px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.submit-row .btn {
  min-width: 180px;
  min-height: 44px;
}
.lesson-card-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.lesson-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(121, 186, 244, .34);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fcff);
}
.lesson-student {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.lesson-student strong {
  font-size: 17px;
}
.lesson-student span {
  color: var(--muted);
  font-size: 13px;
}
.lesson-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.lesson-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-check span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
}
.chip-check input:checked + span {
  border-color: rgba(66,165,245,.45);
  color: var(--primary-dark);
  background: rgba(66,165,245,.12);
  font-weight: 700;
}
.lesson-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
}
.lesson-note input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ai-output {
  display: grid;
  gap: 8px;
}
.ai-output textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fcff;
  line-height: 1.6;
  resize: vertical;
}
.mini-input {
  width: 72px;
  min-height: 30px;
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.notice {
  padding: 12px 14px;
  border: 1px solid rgba(191,107,32,.28);
  border-radius: 8px;
  color: #5b3713;
  background: rgba(191,107,32,.08);
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(20, 28, 40, .48);
}
.modal-card {
  width: min(760px, 100%);
  max-height: 88vh;
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
.modal-card .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.modal-card .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: center;
  margin: 18px -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
}
.modal-card .modal-actions .btn {
  min-width: 110px;
  min-height: 42px;
}
.feedback-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.toast {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(420px, calc(100vw - 36px));
  padding: 13px 16px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, #1674c6, #42a5f5);
  box-shadow: 0 14px 34px rgba(22,116,198,.22);
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.split { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    display: flex;
    overflow: auto;
  }
  .side-button { white-space: nowrap; width: auto; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-wrap { grid-template-columns: 1fr; }
  .standalone-register-head {
    grid-template-columns: auto 1fr;
  }
  .standalone-register-head > .btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .login-art { min-height: 320px; }
  .student-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-card.feature { grid-column: 1 / -1; }
  .filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-grid, .podium-grid { grid-template-columns: 1fr; }
  .lesson-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .toolbar { justify-content: flex-start; }
  .finance-actions { grid-template-columns: 1fr; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .kpi-strip { grid-template-columns: 1fr; }
  .student-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .student-info-grid .field.full,
  .student-info-grid .student-photo-field {
    grid-column: 1 / -1;
  }
  .student-info-grid .field input,
  .student-info-grid .field select {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 15px;
  }
  .logout-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .logout-panel .btn {
    width: 100%;
  }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .item { align-items: flex-start; flex-direction: column; }
  .role-tabs { grid-template-columns: 1fr; }
  .share-link-box { grid-template-columns: 1fr; }
  .login-card { align-content: start; }
  .login-art { padding: 24px; min-height: 280px; }
  .role-student .layout,
  .role-teacher .layout {
    display: block;
    padding-bottom: 90px;
  }
  .role-student .sidebar,
  .role-teacher .sidebar { display: none; }
  .role-student .topbar .toolbar,
  .role-teacher .topbar .toolbar { display: none; }
  .student-center-head,
  .student-page-head {
    margin-bottom: 16px;
  }
  .student-header-avatar {
    width: 64px;
    height: 64px;
    border-width: 4px;
    font-size: 24px;
  }
  .student-growth-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 26px 24px;
    border-radius: 26px;
  }
  .student-growth-copy h2 {
    display: block;
    margin: 0 0 12px;
  }
  .student-growth-copy p {
    margin-top: 18px;
    font-size: 17px;
  }
  .student-hero-mark {
    display: none;
  }
  .student-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-card.feature { grid-column: 1 / -1; }
  .student-metric {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    min-height: 132px;
    padding: 18px 8px;
    text-align: center;
  }
  .student-metric-icon {
    width: 58px;
    height: 58px;
  }
  .student-metric-icon::before {
    width: 22px;
    height: 22px;
  }
  .student-metric-icon.coin::before {
    width: 30px;
    height: 30px;
    border-width: 4px;
  }
  .student-metric-icon.coin::after {
    width: 12px;
    height: 12px;
  }
  .student-metric p { font-size: 14px; }
  .student-metric b { font-size: 34px; }
  .student-metric small { font-size: 12px; }
  .role-student .student-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .role-student .student-menu-item { min-height: 84px; padding: 10px 4px; border-radius: 16px; }
  .role-student .student-menu-item span { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; }
  .role-student .student-menu-item b { font-size: 12px; }
  .student-message-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .student-message-card .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .student-ai-entry,
  .dialog-item,
  .ai-compose {
    grid-template-columns: 1fr;
  }
  .student-ai-entry .btn,
  .dialog-item .btn,
  .ai-compose .btn {
    width: 100%;
  }
  .student-message-icon {
    width: 50px;
    height: 50px;
  }
  .student-message-icon::before {
    width: 20px;
    height: 23px;
    top: 12px;
    left: 15px;
    border-width: 3px;
  }
  .student-message-icon::after {
    width: 24px;
    left: 13px;
    top: 34px;
  }
  .shop-hero,
  .rank-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .rank-me {
    width: 100%;
  }
  .gift-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }
  .gift-visual { min-height: 104px; }
  .gift-button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .gift-image-form {
    grid-template-columns: 1fr;
  }
  .leader-row {
    grid-template-columns: 32px 38px minmax(0, 1fr);
  }
  .leader-score {
    grid-column: 2 / -1;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    box-shadow: 0 -8px 24px rgba(36,50,68,.08);
  }
  .mobile-tabbar button {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 52px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
  }
  .mobile-tabbar button.active {
    color: var(--primary-dark);
    background: rgba(66,165,245,.1);
  }
  .mobile-tabbar button.mobile-tab-aiAssistant,
  .mobile-tabbar button.mobile-tab-messages:nth-child(3) {
    transform: translateY(-8px);
  }
  .mobile-tabbar button.mobile-tab-aiAssistant .tab-icon,
  .mobile-tabbar button.mobile-tab-messages:nth-child(3) .tab-icon {
    width: 38px;
    height: 38px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #39b9ff, #5d72ff);
    box-shadow: 0 10px 24px rgba(54, 126, 255, .24);
  }
  .mobile-tabbar button.mobile-tab-aiAssistant b,
  .mobile-tabbar button.mobile-tab-messages:nth-child(3) b {
    color: #2f78ff;
    font-weight: 800;
  }
  .mobile-tabbar span {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .tab-icon-home::before {
    width: 18px;
    height: 15px;
    bottom: 4px;
    border-radius: 3px;
    background: currentColor;
    color: #fff;
  }
  .tab-icon-home::after {
    width: 15px;
    height: 15px;
    top: 3px;
    background: currentColor;
    color: #fff;
    transform: rotate(45deg);
    border-radius: 3px 0 3px 0;
  }
  .tab-icon-growth::before {
    width: 5px;
    height: 18px;
    bottom: 4px;
    border-radius: 999px;
    background: currentColor;
    color: #fff;
    box-shadow: -7px 5px 0 -1px currentColor, 7px -4px 0 -1px currentColor;
  }
  .tab-icon-growth::after {
    width: 11px;
    height: 11px;
    top: 4px;
    border-radius: 8px 8px 8px 0;
    background: currentColor;
    color: #fff;
    transform: translateX(6px) rotate(-35deg);
  }
  .tab-icon-book::before {
    width: 18px;
    height: 18px;
    border: 3px solid currentColor;
    color: #fff;
    border-radius: 4px;
    border-left-width: 5px;
  }
  .tab-icon-book::after {
    width: 2px;
    height: 18px;
    background: currentColor;
    color: #fff;
  }
  .tab-icon-user::before {
    width: 10px;
    height: 10px;
    top: 5px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
  }
  .tab-icon-user::after {
    width: 19px;
    height: 10px;
    bottom: 5px;
    border-radius: 12px 12px 4px 4px;
    background: currentColor;
    color: #fff;
  }
  .tab-icon-chat::before {
    width: 19px;
    height: 14px;
    border-radius: 6px;
    background: currentColor;
    color: #fff;
  }
  .tab-icon-chat::after {
    width: 7px;
    height: 7px;
    background: currentColor;
    color: #fff;
    transform: translate(-5px, 7px) rotate(45deg);
  }
  .mobile-tabbar b { font-size: 12px; }
  .filterbar { grid-template-columns: 1fr; }
  .filter-actions .btn { flex: 1; }
  .checkgrid { grid-template-columns: 1fr; }
  .modal-grid { grid-template-columns: 1fr; }
  .permission-grid { grid-template-columns: 1fr; }
  .lesson-fields { grid-template-columns: 1fr; }
  .lesson-note { grid-template-columns: 1fr; }
}

/* Final student icon normalization. Keep icon internals proportional after browser/window zoom. */
.student-metric-icon,
.student-message-icon,
.menu-icon,
.tab-icon {
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
  transform: translateZ(0);
}
.menu-icon {
  --menu-size: 66px;
}
.tab-icon {
  --tab-size: 26px;
}
.student-metric-icon {
  --metric-size: clamp(58px, 7vw, 88px);
  width: var(--metric-size);
  height: var(--metric-size);
}
.student-metric-icon.star,
.student-metric-icon.coin {
  width: var(--metric-size);
  height: var(--metric-size);
}
.student-metric-icon::before {
  left: 50%;
  top: 50%;
  width: 36%;
  height: 36%;
  transform: translate(-50%, -50%);
}
.student-metric-icon::after {
  inset: 18%;
}
.student-metric-icon.coin::before {
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  border-width: max(3px, calc(var(--metric-size) * .07));
  transform: translate(-50%, -50%);
}
.student-metric-icon.coin::after {
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
}
.role-student .student-menu-item span.menu-icon {
  --menu-size: clamp(36px, 6vw, 66px);
  width: var(--menu-size);
  height: var(--menu-size);
  border-radius: calc(var(--menu-size) * .3);
  font-size: 0;
}
.menu-icon::before,
.menu-icon::after,
.tab-icon::before,
.tab-icon::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.menu-icon-foot::before {
  width: 30%;
  height: 42%;
  border-radius: 60% 48% 56% 44%;
  transform: translate(-38%, -25%) rotate(-18deg);
}
.menu-icon-foot::after {
  width: 46%;
  height: 18%;
  transform: translate(-48%, -160%);
  background:
    radial-gradient(circle at 16% 50%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 50% 32%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 84% 50%, #fff 0 18%, transparent 19%);
}
.menu-icon-book::before {
  width: 46%;
  height: 38%;
  border-width: max(2px, calc(var(--menu-size) * .055));
  border-left-width: max(3px, calc(var(--menu-size) * .09));
}
.menu-icon-book::after {
  width: max(2px, calc(var(--menu-size) * .035));
  height: 38%;
}
.menu-icon-chart::before {
  width: 50%;
  height: 44%;
  background:
    linear-gradient(#fff,#fff) 8% 62% / 20% 36% no-repeat,
    linear-gradient(#fff,#fff) 40% 34% / 20% 64% no-repeat,
    linear-gradient(#fff,#fff) 72% 8% / 20% 90% no-repeat;
}
.menu-icon-coin::before {
  width: 48%;
  height: 48%;
  border-width: max(3px, calc(var(--menu-size) * .075));
}
.menu-icon-coin::after {
  width: 20%;
  height: 20%;
}
.menu-icon-gift::before {
  width: 50%;
  height: 44%;
  border-width: max(2px, calc(var(--menu-size) * .06));
  border-radius: 12%;
}
.menu-icon-gift::after {
  width: max(3px, calc(var(--menu-size) * .07));
  height: 44%;
}
.menu-icon-flag::before {
  left: 38%;
  width: max(3px, calc(var(--menu-size) * .06));
  height: 52%;
}
.menu-icon-flag::after {
  left: 55%;
  top: 39%;
  width: 40%;
  height: 28%;
  border-radius: 10% 45% 45% 10%;
}
.menu-icon-chat::before {
  width: 54%;
  height: 38%;
  border-radius: 22%;
}
.menu-icon-chat::after {
  width: 18%;
  height: 18%;
  transform: translate(-105%, 68%) rotate(45deg);
}
.menu-icon-user::before {
  top: 38%;
  width: 28%;
  height: 28%;
}
.menu-icon-user::after {
  top: 68%;
  width: 52%;
  height: 28%;
  border-radius: 50% 50% 22% 22%;
}
.menu-icon-shield::before {
  width: 50%;
  height: 56%;
}
.menu-icon-shield::after {
  width: 18%;
  height: 18%;
}
.menu-icon-switch::before {
  width: 48%;
  height: 30%;
  border-top-width: max(2px, calc(var(--menu-size) * .06));
  border-bottom-width: max(2px, calc(var(--menu-size) * .06));
}
.menu-icon-switch::after {
  width: 34%;
  height: 34%;
  border-top-width: max(2px, calc(var(--menu-size) * .07));
  border-right-width: max(2px, calc(var(--menu-size) * .07));
  transform: translate(-35%, -50%) rotate(45deg);
}
.menu-icon-box::before {
  width: 50%;
  height: 40%;
  border-width: max(2px, calc(var(--menu-size) * .06));
}
.menu-icon-box::after {
  width: 44%;
  height: max(2px, calc(var(--menu-size) * .06));
  transform: translate(-50%, -210%);
}
.menu-icon-dot::before {
  width: 40%;
  height: 40%;
}
.student-message-icon {
  --message-size: clamp(50px, 8vw, 74px);
  width: var(--message-size);
  height: var(--message-size);
}
.student-message-icon::before {
  left: 50%;
  top: 44%;
  width: 38%;
  height: 43%;
  border-width: max(2px, calc(var(--message-size) * .055));
  transform: translate(-50%, -50%);
}
.student-message-icon::after {
  left: 50%;
  top: 67%;
  width: 46%;
  height: max(3px, calc(var(--message-size) * .055));
  transform: translate(-50%, -50%);
}
.mobile-tabbar span.tab-icon {
  --tab-size: 26px;
  width: var(--tab-size);
  height: var(--tab-size);
}
.tab-icon-home::before {
  top: 61%;
  width: 68%;
  height: 54%;
  border-radius: 12%;
}
.tab-icon-home::after {
  top: 36%;
  width: 48%;
  height: 48%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tab-icon-growth::before {
  top: 60%;
  width: 18%;
  height: 60%;
  box-shadow:
    calc(var(--tab-size) * -.27) calc(var(--tab-size) * .18) 0 calc(var(--tab-size) * -.04) currentColor,
    calc(var(--tab-size) * .27) calc(var(--tab-size) * -.14) 0 calc(var(--tab-size) * -.04) currentColor;
}
.tab-icon-growth::after {
  top: 34%;
  width: 42%;
  height: 42%;
  transform: translate(-8%, -50%) rotate(-35deg);
}
.tab-icon-book::before {
  width: 62%;
  height: 62%;
  border-width: max(2px, calc(var(--tab-size) * .1));
  border-left-width: max(3px, calc(var(--tab-size) * .16));
}
.tab-icon-book::after {
  width: max(2px, calc(var(--tab-size) * .07));
  height: 62%;
}
.tab-icon-user::before {
  top: 35%;
  width: 38%;
  height: 38%;
}
.tab-icon-user::after {
  top: 70%;
  width: 70%;
  height: 36%;
  border-radius: 50% 50% 18% 18%;
}
.tab-icon-chat::before {
  width: 70%;
  height: 50%;
  border-radius: 28%;
}
.tab-icon-chat::after {
  width: 24%;
  height: 24%;
  transform: translate(-95%, 52%) rotate(45deg);
}
@media (max-width: 720px) {
  .student-metric-icon {
    --metric-size: clamp(52px, 13vw, 58px);
  }
  .role-student .student-menu-item span.menu-icon {
    --menu-size: clamp(34px, 9vw, 40px);
  }
  .student-message-icon {
    --message-size: 50px;
  }
}