/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   DESIGN TOKENS
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
:root {
  /* Brand */
  --primary: #7c3aed;
  --primary-light: #a78bfa;
  --primary-dark: #5b21b6;
  --primary-xdark: #3b0764;
  --secondary: #f59e0b;
  --secondary-light: #fcd34d;
  /* Semantic */
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f97316;
  --info: #3b82f6;
  /* Surface */
  --bg: #f4f2ff;
  --bg-card: #ffffff;
  --glass: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .5);
  /* Text */
  --text: #18181b;
  --text-muted: #71717a;
  --text-light: #a1a1aa;
  /* Border */
  --border: #e4e4e7;
  --border-focus: rgba(124, 58, 237, .45);
  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-sm: 0 2px 8px rgba(124, 58, 237, .08), 0 1px 3px rgba(0, 0, 0, .05);
  --shadow: 0 4px 16px rgba(124, 58, 237, .10), 0 1px 4px rgba(0, 0, 0, .06);
  --shadow-md: 0 8px 28px rgba(124, 58, 237, .14), 0 2px 8px rgba(0, 0, 0, .07);
  --shadow-lg: 0 16px 48px rgba(124, 58, 237, .18), 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-color: 0 4px 20px;
  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  /* Motion */
  --transition: .18s cubic-bezier(.4, 0, .2, 1);
  --spring: .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   RESET
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle dot-grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 237, .08) 1px, transparent 0);
  background-size: 28px 28px;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .85rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  color: var(--text);
  background: #fff;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3.5px rgba(124, 58, 237, .15);
  background: #fdfcff;
}

a {
  color: var(--primary);
  text-decoration: none;
}

.hidden {
  display: none !important;
}

code {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  background: rgba(124, 58, 237, .08);
  color: var(--primary-dark);
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .88em;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   PAGES
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.page {
  display: none;
  min-height: 100vh;
}

.page.active {
  display: block;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   BUTTON SYSTEM
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed 50%, #6d28d9);
  color: #fff;
  padding: .6rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(124, 58, 237, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, .4);
}

.btn-primary:hover::after {
  opacity: 1;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
}

.btn-block {
  width: 100%;
  padding: .8rem;
  font-size: 1rem;
  border-radius: var(--radius);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  background: var(--glass);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: .88rem;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
}

.btn-ghost:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: rgba(124, 58, 237, .06);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(16, 185, 129, .3);
  transition: all var(--transition);
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, .4);
}

.btn-danger {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .3);
  transition: all var(--transition);
}

.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, .4);
}

.btn-warning {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(249, 115, 22, .3);
  transition: all var(--transition);
}

.btn-warning:hover {
  transform: translateY(-1px);
}

.btn-sm {
  padding: .35rem .8rem;
  font-size: .82rem;
}

.btn-lg {
  padding: .85rem 2.2rem;
  font-size: 1.05rem;
}

.btn-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: all var(--transition);
}

.btn-icon:hover {
  background: rgba(124, 58, 237, .1);
  color: var(--primary);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   AUTH PAGE
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e0533 0%, #3b0764 25%, #6d28d9 55%, #a855f7 80%, #f472b6 100%);
  position: relative;
  overflow: hidden;
}

/* Animated orbs */
.auth-bg::before,
.auth-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: orbFloat 8s ease-in-out infinite;
}

.auth-bg::before {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(168, 85, 247, .35) 0%, transparent 70%);
  top: -180px;
  right: -120px;
  animation-delay: 0s;
}

.auth-bg::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, .3) 0%, transparent 70%);
  bottom: -150px;
  left: -80px;
  animation-delay: -4s;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -20px) scale(1.05);
  }

  66% {
    transform: translate(-20px, 15px) scale(.97);
  }
}

/* Floating particles */
.auth-bg .auth-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-card {
  background: rgba(255, 255, 255, .96);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.5rem;
  width: 440px;
  max-width: 95vw;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .2);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(20px);
}

.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: .6rem;
  animation: logoBounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(124, 58, 237, .4));
}

@keyframes logoBounce {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.05);
  }
}

.logo-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-sub {
  color: var(--text-muted);
  font-size: .88rem;
  margin-top: .3rem;
}

/* Floating pet decorations on auth background */
.auth-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.af {
  position: absolute;
  font-size: 2rem;
  opacity: .18;
  animation: afloat 6s ease-in-out infinite;
  filter: blur(.5px);
}

.af1 {
  top: 8%;
  left: 8%;
  animation-duration: 7s;
  animation-delay: 0s;
  font-size: 2.4rem;
}

.af2 {
  top: 15%;
  right: 10%;
  animation-duration: 9s;
  animation-delay: -2s;
  font-size: 1.8rem;
}

.af3 {
  top: 70%;
  left: 5%;
  animation-duration: 8s;
  animation-delay: -1s;
  font-size: 2.8rem;
}

.af4 {
  top: 80%;
  right: 8%;
  animation-duration: 6.5s;
  animation-delay: -3s;
  font-size: 2rem;
}

.af5 {
  top: 40%;
  left: 3%;
  animation-duration: 10s;
  animation-delay: -4s;
  font-size: 1.6rem;
}

.af6 {
  top: 55%;
  right: 4%;
  animation-duration: 7.5s;
  animation-delay: -1.5s;
  font-size: 2.2rem;
}

.af7 {
  top: 25%;
  left: 18%;
  animation-duration: 11s;
  animation-delay: -5s;
  font-size: 1.5rem;
}

.af8 {
  top: 88%;
  left: 40%;
  animation-duration: 8.5s;
  animation-delay: -2.5s;
  font-size: 2.5rem;
}

@keyframes afloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  33% {
    transform: translateY(-20px) rotate(8deg);
  }

  66% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

.auth-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.75rem;
  background: #f4f4f8;
  border-radius: var(--radius);
  padding: .3rem;
}

.auth-tab {
  flex: 1;
  padding: .55rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-muted);
  transition: all var(--transition);
}

.auth-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 0 0 1px rgba(124, 58, 237, .1);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.form-field label {
  font-weight: 600;
  font-size: .8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.form-field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
}

.form-input {
  width: 100%;
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   MAIN HEADER
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.main-header {
  height: 62px;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0, 0, 0, .04);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.logo-sm {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, .3));
}

.site-name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.teacher-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(168, 85, 247, .08));
  padding: .3rem .85rem;
  border-radius: 20px;
  border: 1px solid rgba(124, 58, 237, .15);
  cursor: pointer;
  transition: opacity .2s;
}

.teacher-name:hover {
  opacity: .85;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   DASHBOARD
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.dashboard-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.section-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 2px;
  margin-top: .3rem;
}

.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.4rem;
}

.class-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--spring), box-shadow var(--transition);
  border: 1.5px solid rgba(124, 58, 237, .08);
  overflow: hidden;
  position: relative;
}

.class-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-md);
}

/* Gradient banner at top */
.class-card-banner {
  height: 72px;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6, #a855f7);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 1.4rem;
}

.class-card-banner::before {
  content: '馃彨';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.8rem;
  opacity: .25;
}

.class-card-banner-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-card-body {
  padding: 1rem 1.4rem 1.2rem;
}

.class-card-grade {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: .85rem;
  background: rgba(124, 58, 237, .07);
  padding: .2rem .65rem;
  border-radius: 20px;
  border: 1px solid rgba(124, 58, 237, .12);
}

.class-card-stats {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.class-card-stat {
  display: flex;
  flex-direction: column;
}

.class-card-stat .stat-val {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.class-card-stat .stat-label {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

.class-card-actions {
  display: flex;
  gap: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}

.class-card-actions button {
  flex: 1;
  font-size: .82rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   CLASS HEADER
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.class-header {
  background: linear-gradient(135deg, #3b0764 0%, #5b21b6 40%, #7c3aed 100%);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(91, 33, 182, .3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.class-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.btn-back {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  padding: .4rem .95rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .82rem;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: all var(--transition);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.btn-back:hover {
  background: rgba(255, 255, 255, .25);
  transform: translateX(-2px);
}

.class-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.class-page-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-page-grade {
  font-size: .75rem;
  color: rgba(255, 255, 255, .65);
  margin-top: .05rem;
}

.class-nav {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.nav-btn {
  padding: .38rem .8rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  transition: all var(--transition);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.nav-btn:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  transform: translateY(-1px);
}

.nav-btn.primary {
  background: rgba(255, 255, 255, .95);
  color: var(--primary);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.nav-btn.primary:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.nav-btn.accent {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(249, 115, 22, .35);
}

.nav-btn.accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, .45);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   CLASS TABS
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.class-tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 2px solid var(--border);
  padding: 0 1.75rem;
  position: sticky;
  top: 60px;
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.tab-btn {
  padding: .85rem 1.35rem;
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  letter-spacing: .01em;
  position: relative;
}

.tab-btn:hover {
  color: var(--primary);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: tabDot .25s var(--spring) forwards;
}

@keyframes tabDot {
  from {
    transform: translateX(-50%) scale(0);
  }

  to {
    transform: translateX(-50%) scale(1);
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   CLASS CONTENT
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.class-content {
  padding: 1.5rem 1.75rem;
  min-height: calc(100vh - 130px);
}

.tab-content {
  display: none;
  animation: fadeUp .2s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.tab-toolbar h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   FILTER BAR
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.filter-bar {
  display: flex;
  gap: .65rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  background: var(--bg-card);
  padding: .8rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border);
}

.filter-input {
  min-width: 160px;
  font-size: .875rem;
}

.filter-select {
  font-size: .875rem;
  min-width: 115px;
}

.filter-score {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.filter-input-sm {
  width: 82px;
  font-size: .875rem;
}

.batch-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  background: var(--bg-card);
  padding: .5rem .85rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s;
}

.batch-bar.active {
  border-color: rgba(124, 58, 237, .45);
  background: linear-gradient(135deg, rgba(124, 58, 237, .04), rgba(168, 85, 247, .04));
}

/* 瑙﹀彂鎸夐挳 */
.batch-toggle-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .85rem;
  padding: .35rem .85rem !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  background: transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.batch-toggle-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary);
}

.batch-bar.active .batch-toggle-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff !important;
  border-color: transparent !important;
}

/* 灞曞紑鍐呭鍖猴細榛樿闅愯棌 */
.batch-expanded {
  display: none;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.batch-bar.active .batch-expanded {
  display: flex;
}

/* 鍏ㄩ€夋寜閽?*/
.batch-select-btn {
  border: 1.5px dashed rgba(124, 58, 237, .5) !important;
  color: var(--primary) !important;
  background: transparent;
  font-weight: 600;
  transition: background .15s;
}

.batch-select-btn.all-selected {
  background: rgba(124, 58, 237, .1);
}

/* 璁℃暟 */
.batch-count-label {
  font-size: .83rem;
  color: var(--muted);
  min-width: 3.5rem;
}

.batch-count-label.has-selection {
  font-weight: 700;
  color: var(--primary);
}

/* 鍒嗗壊绾?*/
.batch-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 .1rem;
  flex-shrink: 0;
}

/* 绂佺敤鎬?*/
.batch-bar button:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

#batch-count {
  font-size: .875rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   STUDENTS GRID
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 1.25rem;
}

.students-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 5rem 1rem;
  color: var(--text-muted);
}

.students-empty .empty-icon {
  font-size: 4.5rem;
  display: block;
  margin-bottom: .85rem;
  opacity: .35;
}

/* 绌虹彮绾ф槑鏄惧叆鍙?*/
.students-empty-cta {
  padding: 4rem 1.5rem;
}

.students-empty-cta .empty-icon {
  font-size: 5rem;
  opacity: .5;
}

.students-empty-cta .empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem;
}

.students-empty-cta .empty-desc {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1.8rem;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.students-empty-cta .empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
}

.students-empty-cta .empty-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
}

.students-empty-cta .empty-cta-btn .ri {
  font-size: 1.15rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   STUDENT CARD  鈽?Core redesign
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.student-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
  transition: transform var(--spring), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.student-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.student-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .2), var(--shadow-md);
}

.student-card.selected::after {
  content: '';
  /* cleared 鈥?using .card-select-check instead */
}

/* 鈹€鈹€ 鍗＄墖宸︿笂瑙掑嬀閫夋锛堥粯璁ら殣钘忥紝select-mode 鏃跺嚭鐜帮級鈹€鈹€ */
.card-select-check {
  position: absolute;
  top: .55rem;
  left: .55rem;
  z-index: 10;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(124, 58, 237, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.select-mode .card-select-check {
  display: flex;
}

.card-select-check:hover {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .08);
  transform: scale(1.15);
}

.card-check-icon {
  font-size: .68rem;
  font-weight: 800;
  color: transparent;
  line-height: 1;
}

.student-card.selected .card-select-check {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, .4);
}

.student-card.selected .card-check-icon {
  color: #fff;
}

/* Card top gradient banner (group color stripe upgraded) */
.card-group-stripe {
  height: 5px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* default gradient if no group */
.card-group-stripe:not([style]) {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd);
}

/* Pet area */
.card-pet-wrap {
  position: relative;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* soft radial glow behind pet */
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(124, 58, 237, .07) 0%, transparent 80%);
}

.card-pet-img {
  height: 110px;
  width: 110px;
  object-fit: contain;
  animation: petFloat 3s ease-in-out infinite;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
  position: relative;
  z-index: 1;
}

@keyframes petFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

.card-pet-missing {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  border-radius: var(--radius);
  font-size: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: petFloat 3s ease-in-out infinite;
}

/* Level badge */
.card-level-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-bottom: .45rem;
  padding: 0 .75rem;
}

.card-level-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: .18rem .55rem;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
  letter-spacing: .03em;
}

.card-level-title {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Name */
.card-name {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .15rem;
  padding: 0 .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-student-no {
  text-align: center;
  font-size: .72rem;
  color: var(--text-light);
  margin-bottom: .5rem;
}

/* Progress */
.card-progress-wrap {
  margin: 0 .85rem .6rem;
}

.card-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .7rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
  font-weight: 500;
}

/* "杩樺樊 XX 馃崡" 鈥?matches card-chicken-val style */
.card-need-num {
  font-weight: 800;
  font-size: .82rem;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 .15rem;
}

.card-need-leg {
  font-size: .82rem;
  /* keep emoji rendering natural but shift baseline to align */
  vertical-align: middle;
  line-height: 1;
}

.card-maxlevel {
  font-size: .72rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-progress-bar {
  height: 5px;
  background: #f0f0f8;
  border-radius: 3px;
  overflow: hidden;
}

.card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd);
  border-radius: 3px;
  transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
}

.card-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #8b5cf6;
  border-radius: 50%;
}

/* Progress sub-label */
.card-progress-sub {
  font-size: .66rem;
  color: var(--text-light);
  text-align: right;
  margin-top: .2rem;
  letter-spacing: .01em;
}

/* Score chips */
.card-scores {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 0 .75rem .75rem;
}

.card-score-item {
  flex: 1;
  text-align: center;
  padding: .4rem .5rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(124, 58, 237, .06), rgba(168, 85, 247, .04));
  border: 1px solid rgba(124, 58, 237, .1);
}

.card-score-val {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-score-label {
  font-size: .65rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

.card-chicken-val {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 楦¤吙涓嶈冻鏃跺彉鐏拌鍛?*/
.card-score-item--empty .card-chicken-val {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-score-item--empty {
  background: rgba(239, 68, 68, .05) !important;
  border-color: rgba(239, 68, 68, .15) !important;
}

.card-score-item--empty .card-score-label {
  color: var(--danger);
  font-weight: 600;
}

/* Medal strip */
.card-medals {
  display: flex;
  align-items: center;
  gap: .22rem;
  padding: .45rem .85rem .35rem;
  min-height: 34px;
  border-top: 1px solid rgba(124, 58, 237, .07);
  flex-wrap: wrap;
}

.card-medals-empty {
  justify-content: center;
  font-size: .68rem;
  color: var(--text-light);
  font-style: italic;
}

.card-medal-icon {
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(249, 115, 22, .1));
  border: 1px solid rgba(245, 158, 11, .25);
  cursor: default;
  transition: transform var(--spring);
  line-height: 1;
}

.card-medal-icon:hover {
  transform: scale(1.25) rotate(-8deg);
  z-index: 2;
  position: relative;
}

.card-medal-more {
  font-size: .7rem;
  font-weight: 800;
  color: var(--secondary);
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 20px;
  padding: .1rem .45rem;
  white-space: nowrap;
}

/* Action buttons */
.card-actions {
  display: flex;
  gap: .3rem;
  padding: 0 .75rem .85rem;
  justify-content: center;
}

.card-action-btn {
  flex: 1;
  padding: .42rem .2rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  transition: all var(--transition);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: #fafafa;
}

.card-action-btn:hover {
  transform: scale(1.06) translateY(-1px);
}

.card-action-btn.add {
  color: #fff;
  background: linear-gradient(135deg, #34d399, #10b981);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
}

.card-action-btn.add:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, .4);
}

.card-action-btn.deduct {
  color: #fff;
  background: linear-gradient(135deg, #f87171, #ef4444);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .3);
}

.card-action-btn.deduct:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, .4);
}

.card-action-btn.feed {
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(249, 115, 22, .3);
}

.card-action-btn.feed:hover {
  box-shadow: 0 4px 12px rgba(249, 115, 22, .4);
}

.card-action-btn.more {
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(168, 85, 247, .1));
  color: var(--primary);
  border-color: rgba(124, 58, 237, .2);
  position: relative;
}

.card-action-btn.more:hover {
  background: var(--primary);
  color: #fff;
}

/* 鈹€鈹€ 榻胯疆鎿嶄綔寮规鑿滃崟 鈹€鈹€ */
.ca-more-wrap {
  position: relative;
}

.card-action-menu {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .25rem 0 .5rem;
}

.cam-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .72rem 1.1rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background .14s, transform .1s;
}

.cam-item:hover {
  background: rgba(124, 58, 237, .07);
  transform: translateX(3px);
}

.cam-item:hover .cam-label {
  color: var(--primary);
}

.cam-icon {
  font-size: 1.35rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 8px;
  flex-shrink: 0;
}

.cam-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  transition: color .14s;
}

.cam-sub {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

.cam-item--danger .cam-icon {
  background: rgba(239, 68, 68, .1);
}

.cam-item--danger .cam-label {
  color: var(--danger);
}

.cam-item--danger:hover {
  background: rgba(239, 68, 68, .07);
}

.cam-item--danger:hover .cam-label {
  color: #dc2626;
}

.cam-item--disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.cam-divider {
  height: 1px;
  background: var(--border);
  margin: .3rem .8rem;
}

/* 鈹€鈹€ 棰佸彂寰界珷 鍥炬爣閫夋嫨鍣?鈹€鈹€ */
.medal-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .25rem;
}

.medal-icon-btn {
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medal-icon-btn:hover {
  border-color: var(--primary);
  transform: scale(1.1);
}

.medal-icon-btn.selected {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .15);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .25);
  transform: scale(1.12);
}

.medal-icon-btn.selected::after {
  content: '鉁?;
 position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  background: var(--primary);
  color: #fff;
  font-size: .55rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 鈹€鈹€ 鍒犻櫎寰界珷 鍒楄〃 鈹€鈹€ */
.del-medal-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  transition: background .12s;
}

.del-medal-row:hover {
  background: rgba(0, 0, 0, .03);
}

.del-medal-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.del-medal-info {
  flex: 1;
  min-width: 0;
}

.del-medal-title {
  font-weight: 700;
  font-size: .88rem;
}

.del-medal-date {
  font-size: .75rem;
  color: var(--text-muted);
}

.btn-danger-sm {
  padding: .25rem .65rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, .25);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.btn-danger-sm:hover {
  background: rgba(239, 68, 68, .25);
}

/* 鈹€鈹€ 鍏戞崲鍟嗗搧 鈹€鈹€ */
.redeem-item-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: .45rem;
  transition: background .12s;
}

.redeem-item-row:hover {
  background: rgba(124, 58, 237, .04);
}

.redeem-item-row--poor {
  opacity: .5;
}

.redeem-item-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.redeem-item-info {
  flex: 1;
  min-width: 0;
}

.redeem-item-name {
  font-weight: 700;
  font-size: .9rem;
}

.redeem-item-meta {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

.btn-primary-sm {
  padding: .3rem .8rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.btn-primary-sm:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.redeem-filter-btn.active {
  background: rgba(124, 58, 237, .15) !important;
  color: var(--primary) !important;
  border-color: rgba(124, 58, 237, .3) !important;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   GROUPS
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.groups-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.group-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--primary);
  transition: transform var(--transition), box-shadow var(--transition);
}

.group-card:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow);
}

.group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}

.group-card-name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: .95rem;
}

.group-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.group-card-actions {
  display: flex;
  gap: .4rem;
}

.group-members {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.group-member-tag {
  background: #f4f4f8;
  border-radius: 20px;
  padding: .22rem .75rem;
  font-size: .82rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.group-member-tag:hover {
  border-color: var(--danger);
}

.remove-from-group {
  color: var(--text-light);
  font-size: .72rem;
  cursor: pointer;
  transition: color var(--transition);
}

.remove-from-group:hover {
  color: var(--danger);
}

/* 鈹€鈹€ 娣诲姞鎴愬憳澶氶€夌晫闈?鈹€鈹€ */
.am-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.am-search-input {
  flex: 1;
  padding: .55rem .9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition);
}

.am-search-input:focus {
  border-color: var(--primary);
}

.am-count {
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(124, 58, 237, .1);
  border-radius: 20px;
  padding: .25rem .7rem;
}

.am-select-all-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .6rem;
}

.am-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
  max-height: 340px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem;
  background: var(--bg-soft);
}

.am-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition);
  position: relative;
}

.am-card:hover {
  border-color: var(--primary-light);
  background: rgba(124, 58, 237, .04);
}

.am-card--selected {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .08);
}

.am-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  color: transparent;
  background: #fff;
  flex-shrink: 0;
  transition: all var(--transition);
}

.am-card--selected .am-check {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.am-name {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
}

.am-pet {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .12rem;
}

.am-cur-group {
  font-size: .65rem;
  color: #f97316;
  background: rgba(249, 115, 22, .1);
  border-radius: 10px;
  padding: .1rem .35rem;
  margin-left: auto;
  white-space: nowrap;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   RECORDS
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.records-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.record-student-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft, rgba(124, 58, 237, .04));
  overflow: hidden;
}

.record-student-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(168, 85, 247, .06));
  border-bottom: 1px solid var(--border);
}

.record-student-group__title {
  font-weight: 800;
  font-size: .92rem;
  color: var(--text);
}

.record-student-group__meta {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .7);
  padding: .15rem .5rem;
  border-radius: 999px;
}

.record-student-group__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem .65rem .75rem;
}

.record-item-pet {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.record-item {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: .85rem 1.15rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.record-item:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.record-type-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.record-type-badge.add {
  background: linear-gradient(135deg, rgba(52, 211, 153, .2), rgba(16, 185, 129, .15));
}

.record-type-badge.deduct {
  background: linear-gradient(135deg, rgba(248, 113, 113, .2), rgba(239, 68, 68, .15));
}

.record-type-badge.feed {
  background: linear-gradient(135deg, rgba(251, 191, 36, .2), rgba(249, 115, 22, .15));
}

.record-info {
  flex: 1;
  min-width: 0;
}

.record-name {
  font-weight: 700;
  font-size: .9rem;
}

.record-reason {
  font-size: .8rem;
  color: var(--text-muted);
}

.record-amount {
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.record-amount.add {
  color: var(--success);
}

.record-amount.deduct {
  color: var(--danger);
}

.record-amount.feed {
  color: var(--warning);
}

.record-time {
  font-size: .72rem;
  color: var(--text-light);
  white-space: nowrap;
}

/* 鍔犲垎鍑忓垎閰嶇疆 */
.si-config-section {
  margin-bottom: 1rem;
}

.si-config-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.si-config-table th,
.si-config-table td {
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  text-align: left;
}

.si-config-table th {
  background: var(--bg-soft, #f8f7ff);
  font-weight: 600;
}

.si-config-table input {
  width: 100%;
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* 鍏戞崲鍟嗗搧璁板綍鍒楄〃 */
.redeem-record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem .9rem;
  border-radius: 8px;
  background: var(--bg-soft, #f8f7ff);
  margin-bottom: .4rem;
  border: 1px solid var(--border);
}

.redeem-record-item:last-child {
  margin-bottom: 0;
}

.rri-reward {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}

.rri-time {
  font-size: .78rem;
  color: var(--text-muted);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   SHOP
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.shop-item-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.25rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1.5px solid var(--border);
  transition: transform var(--spring), box-shadow var(--transition);
  overflow: hidden;
  position: relative;
}

.shop-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--secondary), #f97316);
}

.shop-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* 鈹€鈹€ 娣诲姞/缂栬緫鍟嗗搧琛ㄥ崟 鈹€鈹€ */
.shop-item-form .shop-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}

.shop-item-form .shop-form-row .form-field:last-child input {
  width: 5rem;
}

.shop-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
}

.shop-color-pick {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}

.shop-color-pick:hover {
  transform: scale(1.15);
}

.shop-color-pick.selected {
  border-color: #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}

.shop-icon-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}

.shop-icon-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .2s;
}

.shop-icon-tab .ri {
  font-size: 1rem;
}

.shop-icon-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(124, 58, 237, .06);
}

.shop-icon-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  color: #fff;
}

.shop-form-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  padding-top: .25rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}

.shop-inline-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: default;
}

.shop-inline-label span {
  color: var(--text-muted);
}

.shop-input-sm {
  width: 4.5rem;
  padding: .35rem .5rem;
  font-size: .85rem;
}

/* 鈹€鈹€ 鍥炬爣閫夋嫨鍣紙鐭㈤噺鍥撅級 鈹€鈹€ */
.shop-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: .4rem;
  margin-top: .35rem;
}

.shop-icon-pick {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-icon-pick .ri {
  font-size: 1.35rem;
  color: var(--text);
}

.shop-icon-pick:hover {
  border-color: var(--primary);
  transform: scale(1.12);
  background: rgba(124, 58, 237, .08);
}

.shop-icon-pick.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(109, 40, 217, .25));
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .35), 0 3px 10px rgba(124, 58, 237, .3);
  transform: scale(1.15);
}

/* 閫変腑鏃跺彸涓婅鎵撳嬀 */
.shop-icon-pick.selected::after {
  content: '鉁?;
 position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: var(--primary);
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.shop-medal-badge {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: .7rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b22, #f97316 22);
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 20px;
  padding: .15rem .6rem;
}

.shop-medal-toggle-label {
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  user-select: none;
}

.shop-medal-toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.shop-item-icon {
  font-size: 2.8rem;
  margin-bottom: .6rem;
  display: block;
}

.shop-item-name {
  font-weight: 800;
  margin-bottom: .25rem;
}

.shop-item-desc {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .85rem;
}

.shop-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.shop-item-price {
  font-weight: 800;
  font-size: .95rem;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shop-item-stock {
  font-size: .78rem;
  color: var(--text-muted);
}

.shop-item-actions {
  display: flex;
  gap: .4rem;
}

.shop-item-actions button {
  flex: 1;
}

/* 灏忓崠閮ㄥ伐鍏锋爮 & 鍏戞崲璁板綍 */
.shop-toolbar-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.shop-redeem-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.shop-redeem-record-item {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: .65rem .9rem;
  border-radius: 8px;
  background: var(--bg-soft, #f8f7ff);
  border: 1px solid var(--border);
  font-size: .9rem;
}

.srri-name {
  font-weight: 600;
  color: var(--text);
}

.srri-item {
  color: var(--primary);
}

.srri-badges {
  font-weight: 600;
  color: var(--warning, #f59e0b);
}

.srri-time {
  font-size: .78rem;
  color: var(--text-muted);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   MODAL
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 30, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(6px);
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 500px;
  max-width: 95vw;
  max-height: 90vh;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .5);
  display: flex;
  flex-direction: column;
  animation: modalIn .2s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(.93) translateY(14px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-box.wide {
  width: 680px;
}

.modal-box.narrow {
  width: 390px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.6rem 1.1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, .04), rgba(168, 85, 247, .04));
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: var(--text-muted);
  transition: all var(--transition);
  background: transparent;
}

.modal-close:hover {
  background: rgba(239, 68, 68, .1);
  color: var(--danger);
  transform: rotate(90deg);
}

.modal-body {
  padding: 1.35rem 1.6rem 1.6rem;
  overflow-y: auto;
  flex: 1;
}

/* 閫夋嫨椤圭洰寮规 si-* */
.si-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #f5f5f9;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .5rem 1rem;
  margin-bottom: 1.1rem;
}

.si-search-wrap:focus-within {
  border-color: var(--primary-light);
  background: #fff;
}

.si-search-icon {
  font-size: .95rem;
  opacity: .5;
}

.si-search-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: .9rem;
  padding: 0;
}

.si-section {
  margin-bottom: 1.25rem;
}

.si-extra-row .si-section-title {
  font-size: .9rem;
}

.si-badge-hint {
  font-size: .78rem;
  color: var(--text-muted);
  margin: .25rem 0 .5rem;
  line-height: 1.4;
}

.si-extra-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 .3em;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  font-size: .85rem;
  margin-left: .35rem;
}

.si-extra-btns {
  display: flex;
  gap: .5rem;
  margin-top: .4rem;
}

.si-extra-btn {
  padding: .4rem .9rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: all .2s;
}

.si-extra-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--bg-soft, #f0eeff);
}

.si-section-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.si-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

@media (max-width: 520px) {
  .si-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.si-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .65rem .4rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  text-align: center;
}

.si-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.si-card.si-add:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, .05);
}

.si-card.si-deduct:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, .05);
}

.si-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  transition: color var(--transition);
}

.si-card.si-add .si-icon {
  color: #10b981;
}

.si-card.si-deduct .si-icon {
  color: #ef4444;
}

.si-card.si-add:hover .si-icon {
  color: #059669;
}

.si-card.si-deduct:hover .si-icon {
  color: #dc2626;
}

.si-search-icon {
  font-size: 1rem;
  color: var(--text-light);
}

.si-section-title .ri {
  font-size: .88rem;
  margin-right: .25rem;
  vertical-align: -2px;
  color: var(--primary);
}

.si-hint .ri {
  font-size: .8rem;
  margin-right: .25rem;
  vertical-align: -1px;
  opacity: .6;
}

.si-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.si-val {
  font-size: .72rem;
  font-weight: 800;
}

.si-val-add {
  color: #10b981;
}

.si-val-deduct {
  color: #ef4444;
}

.si-hint {
  text-align: center;
  font-size: .75rem;
  color: var(--text-light);
  margin-top: .5rem;
  margin-bottom: 0;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-form-row {
  display: flex;
  gap: .85rem;
}

.modal-form-row .form-field {
  flex: 1;
}

.modal-footer {
  display: flex;
  gap: .65rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   PET SELECTOR
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.pet-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: .55rem;
  max-height: 300px;
  overflow-y: auto;
  padding: .25rem;
}

.pet-selector-item {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .45rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--spring);
  background: #fafafa;
}

.pet-selector-item:hover {
  border-color: var(--primary-light);
  transform: scale(1.06);
  background: rgba(124, 58, 237, .04);
}

.pet-selector-item.selected {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .08);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
  transform: scale(1.05);
}

.pet-selector-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto .3rem;
}

.pet-selector-name {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   BIG SCREEN
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 800;
  overflow: auto;
}

.fullscreen-overlay.open {
  display: flex;
  flex-direction: column;
}

#big-screen {
  background: radial-gradient(ellipse at 30% 20%, #1a0845, #0d0527 60%);
  color: #fff;
}

/* star field effect */
#big-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255, 255, 255, .8) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 14%, rgba(255, 255, 255, .6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255, 255, 255, .7) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 75%, rgba(255, 255, 255, .5) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 82%, rgba(255, 255, 255, .6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 40%, rgba(255, 255, 255, .4) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 32%, rgba(255, 255, 255, .8) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 55%, rgba(255, 255, 255, .5) 0%, transparent 100%);
  pointer-events: none;
}

.bs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.bs-title-wrap {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.bs-logo {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, .8));
}

.bs-class-name {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bs-stats {
  display: flex;
  gap: 2.5rem;
}

.bs-stat {
  text-align: center;
}

.bs-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fcd34d;
  line-height: 1;
}

.bs-stat-label {
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  margin-top: .2rem;
}

.bs-close {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
  padding: .45rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: all var(--transition);
  backdrop-filter: blur(8px);
}

.bs-close:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.bs-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.75rem;
  padding: 1.25rem 2.5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.bs-podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.bs-podium-pet {
  width: 86px;
  height: 86px;
  object-fit: contain;
  animation: petFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(253, 224, 71, .6));
}

.bs-podium-name {
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
}

.bs-podium-score {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fcd34d;
}

.bs-podium-rank {
  width: 84px;
  background: rgba(255, 255, 255, .08);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  border-top: 2px solid rgba(255, 255, 255, .15);
}

.bs-podium-item:nth-child(1) .bs-podium-rank {
  height: 75px;
  background: rgba(253, 224, 71, .18);
  border-color: rgba(253, 224, 71, .4);
}

.bs-podium-item:nth-child(2) .bs-podium-rank {
  height: 100px;
  background: rgba(253, 224, 71, .25);
  border-color: rgba(253, 224, 71, .5);
}

.bs-podium-item:nth-child(3) .bs-podium-rank {
  height: 55px;
  background: rgba(253, 224, 71, .14);
  border-color: rgba(253, 224, 71, .3);
}

.bs-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 1rem;
  padding: 1rem 2.5rem 2.5rem;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.bs-card {
  background: rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  padding: .85rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  transition: transform var(--spring), background var(--transition);
}

.bs-card:hover {
  transform: scale(1.04);
  background: rgba(255, 255, 255, .12);
}

.bs-card-pet {
  width: 60px;
  height: 60px;
  object-fit: contain;
  animation: petFloat 3s ease-in-out infinite;
  margin-bottom: .4rem;
}

.bs-card-name {
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
}

.bs-card-score {
  font-size: .95rem;
  color: #fcd34d;
  font-weight: 800;
}

.bs-card-level {
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   ROLL CALL
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.rc-overlay {
  background: radial-gradient(ellipse at center, #1a0533 0%, #0a011a 70%);
  align-items: center;
  justify-content: center;
}

.rc-content {
  text-align: center;
  padding: 2rem 1rem;
}

.rc-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2.5rem;
  background: linear-gradient(135deg, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}

.rc-drum {
  width: 230px;
  height: 230px;
  margin: 0 auto 2.5rem;
  background: rgba(255, 255, 255, .04);
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 0 8px rgba(168, 85, 247, .08), 0 0 0 16px rgba(168, 85, 247, .04),
    0 0 80px rgba(168, 85, 247, .3);
}

.rc-drum::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, .25);
  animation: drumRotate 12s linear infinite;
}

@keyframes drumRotate {
  to {
    transform: rotate(360deg);
  }
}

.rc-pet-wrap {
  text-align: center;
}

.rc-pet-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, .9));
}

.rc-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-top: .6rem;
  text-shadow: 0 0 24px rgba(255, 255, 255, .5);
}

.rc-drum.spinning .rc-pet-wrap {
  animation: rcSpin .08s linear infinite;
}

@keyframes rcSpin {
  0% {
    transform: scale(.95) rotate(-3deg);
    opacity: .7;
  }

  50% {
    transform: scale(1.06) rotate(3deg);
    opacity: 1;
  }

  100% {
    transform: scale(.95) rotate(-3deg);
    opacity: .7;
  }
}

.rc-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.rc-result {
  margin-top: 1.75rem;
  font-size: 1.25rem;
  color: #fcd34d;
  font-weight: 700;
  min-height: 2rem;
  letter-spacing: .02em;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   REMOTE SCORE
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.rs-overlay {
  background: rgba(10, 5, 25, .95);
  backdrop-filter: blur(12px);
  align-items: flex-start;
  justify-content: center;
}

.rs-content {
  width: 100%;
  max-width: 920px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}

.rs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  color: #fff;
}

.rs-header h2 {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rs-body {
  display: flex;
  gap: 1.5rem;
}

.rs-left {
  flex: 1;
  min-width: 0;
}

.rs-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: rgba(255, 255, 255, .08);
  border-radius: 8px;
  margin-bottom: .65rem;
  border: 1px solid rgba(255, 255, 255, .12);
}

.rs-search-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: .9rem;
}

.rs-search-wrap input::placeholder {
  color: rgba(255, 255, 255, .4);
}

.rs-mode-tabs {
  display: flex;
  gap: .3rem;
  margin-bottom: .85rem;
}

.rs-mode-tab {
  padding: .35rem .7rem;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: all .2s;
}

.rs-mode-tab:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.rs-mode-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.rs-right {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.rs-hint {
  color: rgba(255, 255, 255, .5);
  font-size: .875rem;
  margin-bottom: .85rem;
}

.rs-student-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .5rem;
  max-height: 70vh;
  overflow-y: auto;
}

.rs-student-btn {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: .7rem .5rem;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}

.rs-student-btn:hover {
  border-color: rgba(168, 85, 247, .6);
  background: rgba(124, 58, 237, .25);
  transform: scale(1.04);
}

.rs-student-btn .rs-btn-name {
  font-size: .875rem;
  font-weight: 700;
}

.rs-student-btn .rs-btn-score {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  margin-top: .1rem;
}

/* Header hint */
.rs-header-left {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.rs-header-hint {
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
}

/* Student btn staged state */
.rs-student-btn--staged {
  border-color: rgba(253, 224, 71, .7) !important;
  background: rgba(253, 224, 71, .15) !important;
  position: relative;
}

.rs-staged-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: .1rem .4rem;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  white-space: nowrap;
}

.rs-control {
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: .85rem;
}

.rs-control label {
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

.rs-score-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}

.rs-score-btn {
  padding: .42rem .75rem;
  border-radius: var(--radius-sm);
  background: rgba(124, 58, 237, .25);
  border: 1.5px solid rgba(124, 58, 237, .4);
  color: #fff;
  font-weight: 700;
  transition: all var(--transition);
}

.rs-score-btn:hover,
.rs-score-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, .4);
}

.rs-score-btn.danger {
  background: rgba(239, 68, 68, .25);
  border-color: rgba(239, 68, 68, .4);
}

.rs-score-btn.danger:hover,
.rs-score-btn.danger.active {
  background: var(--danger);
  border-color: var(--danger);
}

.rs-control .form-input {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

/* 鈹€鈹€ Pending box 鈹€鈹€ */
.rs-pending-box {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rs-pending-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rs-pending-title {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  flex: 1;
}

.rs-pending-count {
  font-size: .75rem;
  background: rgba(124, 58, 237, .4);
  color: #e9d5ff;
  border-radius: 20px;
  padding: .05rem .5rem;
}

.rs-pending-clear {
  font-size: .72rem;
  color: rgba(255, 255, 255, .4);
  background: none;
  border: none;
  cursor: pointer;
  padding: .1rem .35rem;
  border-radius: 4px;
  transition: all .15s;
}

.rs-pending-clear:hover {
  color: #fff;
  background: rgba(239, 68, 68, .3);
}

.rs-pending-list {
  min-height: 60px;
  max-height: 220px;
  overflow-y: auto;
  padding: .45rem .5rem;
}

.rs-pending-empty {
  font-size: .78rem;
  color: rgba(255, 255, 255, .3);
  text-align: center;
  padding: .75rem 0;
}

.rs-pending-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .45rem;
  border-radius: var(--radius-sm);
  transition: background .15s;
}

.rs-pending-item:hover {
  background: rgba(255, 255, 255, .05);
}

.rs-pending-name {
  flex: 1;
  font-size: .82rem;
  color: rgba(255, 255, 255, .85);
}

.rs-pending-val {
  font-size: .82rem;
  font-weight: 800;
  min-width: 30px;
  text-align: right;
}

.rs-pending-val.add {
  color: #4ade80;
}

.rs-pending-val.deduct {
  color: #f87171;
}

.rs-pending-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .3);
  font-size: .75rem;
  padding: 0 .2rem;
  border-radius: 3px;
  transition: all .15s;
}

.rs-pending-remove:hover {
  color: #f87171;
  background: rgba(239, 68, 68, .2);
}

/* 鈹€鈹€ Confirm button 鈹€鈹€ */
.rs-confirm-btn {
  margin: .6rem .6rem .6rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: none;
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: all .2s;
  box-shadow: 0 4px 15px rgba(124, 58, 237, .4);
}

.rs-confirm-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, .5);
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.rs-confirm-btn:active:not(:disabled) {
  transform: translateY(0);
}

.rs-confirm-btn:disabled {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .35);
  cursor: not-allowed;
  box-shadow: none;
}

.rs-confirm-btn--deduct {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 15px rgba(220, 38, 38, .4);
}

.rs-confirm-btn--deduct:hover:not(:disabled) {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 8px 25px rgba(220, 38, 38, .5);
}

.rs-confirm-icon {
  font-size: 1rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   TOAST
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: .85rem 1.2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  font-weight: 500;
  min-width: 230px;
  animation: toastIn .28s var(--spring);
  pointer-events: auto;
  border-left: 4px solid var(--primary);
}

.toast.success {
  border-left-color: var(--success);
}

.toast.error {
  border-left-color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.toast.warning {
  border-left-color: var(--warning);
}

.toast-icon {
  font-size: 1.1rem;
}

.toast.out {
  animation: toastOut .25s ease forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(32px) scale(.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(32px) scale(.95);
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   LEVEL SETTINGS
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.level-settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.level-settings-table th,
.level-settings-table td {
  padding: .55rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.level-settings-table th {
  font-weight: 700;
  background: #f9f9fc;
  color: var(--text-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.level-settings-table tbody tr:hover {
  background: rgba(124, 58, 237, .03);
}

.level-settings-table input {
  width: 90px;
  padding: .32rem .55rem;
  font-size: .875rem;
}

.level-settings-table select {
  padding: .32rem .55rem;
  font-size: .875rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   DATA CENTER
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.data-center-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dc-stat-card {
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.dc-stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent);
}

.dc-stat-card:nth-child(1) {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 4px 16px rgba(124, 58, 237, .3);
}

.dc-stat-card:nth-child(2) {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 16px rgba(16, 185, 129, .3);
}

.dc-stat-card:nth-child(3) {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 4px 16px rgba(249, 115, 22, .3);
}

.dc-stat-card:nth-child(4) {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 16px rgba(59, 130, 246, .3);
}

.dc-stat-val {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.dc-stat-label {
  font-size: .78rem;
  opacity: .82;
  margin-top: .3rem;
  position: relative;
  z-index: 1;
}

.dc-top-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.dc-top-item:hover {
  background: rgba(124, 58, 237, .05);
}

.dc-top-rank {
  width: 26px;
  text-align: center;
  font-weight: 800;
  color: var(--text-muted);
  font-size: .9rem;
}

.dc-top-rank.gold {
  color: #f59e0b;
}

.dc-top-rank.silver {
  color: #6b7280;
}

.dc-top-rank.bronze {
  color: #d97706;
}

.dc-top-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.dc-top-info {
  flex: 1;
  min-width: 0;
}

.dc-top-name {
  font-weight: 700;
  font-size: .9rem;
}

.dc-top-score {
  font-size: .78rem;
  color: var(--text-muted);
}

.dc-top-bar-wrap {
  flex: 1;
}

.dc-top-bar {
  height: 7px;
  background: #f0f0f8;
  border-radius: 4px;
  overflow: hidden;
}

.dc-top-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 4px;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   MEDAL WALL & BADGES
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.medal-modal-body {
  max-width: 100%;
}

.medal-honor-heading {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  margin: 1rem 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(124, 58, 237, .12);
}

/* 寰界珷澧?路 璐寸焊缃戞牸锛堣璁＄锛氬悕绉版潯 + 鍦嗗舰閲戣竟 + 鏃ユ湡 + 瀵煎嚭锛?*/
.bw-modal--stickers-only .bw-wall {
  padding-bottom: .25rem;
}

.bw-hint {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0 0 .85rem;
  line-height: 1.45;
}

.bw-empty-block {
  margin-bottom: .75rem;
}

.bw-empty {
  font-weight: 700;
  color: var(--text-muted);
  font-size: .88rem;
}

.bw-empty-hint {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: .4rem 0 0;
}

.bw-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.15rem;
  justify-content: flex-start;
  align-items: flex-end;
  padding: .25rem 0 .85rem;
}

.bw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  cursor: pointer;
  border-radius: 12px;
  padding: .25rem .2rem .35rem;
  transition: background .15s, box-shadow .15s, transform .15s;
  outline: none;
}

.bw-item:hover {
  background: rgba(124, 58, 237, .05);
}

.bw-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .45);
}

.bw-item.is-selected {
  background: linear-gradient(180deg, rgba(251, 191, 36, .14), rgba(124, 58, 237, .08));
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .55);
  transform: translateY(-2px);
}

.bw-name {
  display: inline-block;
  max-width: 100%;
  padding: .2rem .5rem;
  margin-bottom: .45rem;
  font-size: .72rem;
  font-weight: 700;
  color: #5c4033;
  background: linear-gradient(180deg, #faf4eb, #f0e4d4);
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 90, .25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw-ring-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bw-sparkle {
  position: absolute;
  font-size: .65rem;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 0 6px rgba(251, 191, 36, .9);
  pointer-events: none;
  z-index: 2;
}

.bw-sparkle--1 {
  top: 6px;
  left: 4px;
}

.bw-sparkle--2 {
  top: 10px;
  right: 2px;
  font-size: .55rem;
  opacity: .9;
}

.bw-sparkle--3 {
  bottom: 14px;
  left: 0;
}

.bw-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #fffef8 0%, #fff4dc 55%, #fde68a 100%);
  border: 3px dashed rgba(217, 119, 6, .65);
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, .45),
    0 4px 16px rgba(245, 158, 11, .22),
    inset 0 0 0 2px rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bw-item.is-selected .bw-ring {
  border-style: solid;
  box-shadow:
    0 0 0 3px rgba(234, 88, 12, .35),
    0 6px 20px rgba(245, 158, 11, .35),
    inset 0 0 0 2px rgba(255, 255, 255, .6);
}

.bw-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.bw-fallback {
  font-size: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bw-date {
  margin-top: .4rem;
  font-size: .72rem;
  color: var(--text-muted);
}

.bw-export-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem .65rem;
  padding-top: .65rem;
  margin-top: .35rem;
  border-top: 1px solid rgba(124, 58, 237, .12);
}

/* 瀛︾敓鍗″彸涓嬭锛氭弧绾ц创绾稿叆鍙ｏ紙鐣ュ皬锛屽噺灏戦伄鎸★級 */
.sc2-sticker-fab {
  position: absolute;
  right: 0.35rem;
  bottom: 0.3rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.12rem 0.22rem 0.12rem 0.12rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 248, 230, .98));
  box-shadow: 0 1px 6px rgba(245, 158, 11, .22), 0 0 0 1px rgba(245, 158, 11, .3);
  transition: transform .15s, box-shadow .15s;
}

.sc2-sticker-fab:hover {
  transform: scale(1.04);
  box-shadow: 0 3px 10px rgba(245, 158, 11, .32);
}

.sc2-sticker-fab-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff8e7, #fef3c7);
  border: 1.5px solid rgba(245, 158, 11, .5);
}

.sc2-sticker-fab-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.sc2-sticker-fab-emoji {
  font-size: 0.88rem;
  line-height: 1;
}

.sc2-sticker-fab-count {
  font-size: 0.62rem;
  font-weight: 800;
  color: #c2410c;
  min-width: 0.85rem;
  text-align: center;
}

/* 鏃犲疇涓旀棤璐寸焊鍘嗗彶锛氫粎绠€鍗?馃弲锛屼笌涓婃柟寰界珷澧欒创绾歌鏍囦簰鏂?*/
.sc2-badge-corner-fab {
  position: absolute;
  right: 0.35rem;
  bottom: 0.3rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(243, 232, 255, .98));
  box-shadow: 0 1px 6px rgba(124, 58, 237, .2), 0 0 0 1px rgba(124, 58, 237, .28);
  transition: transform .15s, box-shadow .15s;
}

.sc2-badge-corner-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 10px rgba(124, 58, 237, .3), 0 0 0 1px rgba(124, 58, 237, .35);
}

.medal-wall {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.medal-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #fafafa, #f5f3ff);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(124, 58, 237, .1);
  transition: transform var(--transition);
}

.medal-item:hover {
  transform: translateX(3px);
}

.medal-icon {
  font-size: 1.9rem;
}

.medal-info {
  flex: 1;
}

.medal-title {
  font-weight: 700;
  font-size: .9rem;
}

.medal-date {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

.medal-delete {
  color: var(--text-light);
  padding: .25rem;
  border-radius: 50%;
  transition: all var(--transition);
}

.medal-delete:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, .1);
}

.add-medal-form {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.add-medal-form input {
  flex: 1;
}

.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(168, 85, 247, .08));
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 20px;
  padding: .28rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  transition: all var(--transition);
}

.badge-chip:hover {
  background: rgba(124, 58, 237, .18);
  transform: scale(1.04);
}

.badge-chip .remove-badge {
  cursor: pointer;
  opacity: .6;
  font-size: .78rem;
  transition: opacity var(--transition);
}

.badge-chip .remove-badge:hover {
  opacity: 1;
}

.add-badge-form {
  display: flex;
  gap: .5rem;
}

.add-badge-form input {
  flex: 1;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   SCORE INPUT
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.score-quick-btns {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.score-quick-btn {
  padding: .32rem .75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: .85rem;
  font-weight: 700;
  transition: all var(--transition);
  background: #fafafa;
}

.score-quick-btn.add-q {
  color: var(--success);
  border-color: rgba(16, 185, 129, .4);
}

.score-quick-btn.add-q:hover {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
  transform: scale(1.06);
}

.score-quick-btn.deduct-q {
  color: var(--danger);
  border-color: rgba(239, 68, 68, .4);
}

.score-quick-btn.deduct-q:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  transform: scale(1.06);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   BATCH ADD - TABS
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.batch-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
  background: #f4f4f8;
  border-radius: var(--radius);
  padding: .3rem;
}

.batch-tab {
  flex: 1;
  padding: .5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .875rem;
  color: var(--text-muted);
  transition: all var(--transition);
}

.batch-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .1), 0 0 0 1px rgba(124, 58, 237, .1);
}

.btab-content {
  display: none;
}

.btab-content.active {
  display: block;
}

/* Excel upload */
.excel-upload-area {
  border: 2px dashed rgba(124, 58, 237, .3);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
  background: linear-gradient(135deg, rgba(124, 58, 237, .03), rgba(168, 85, 247, .03));
  margin-bottom: .85rem;
}

.excel-upload-area:hover,
.excel-upload-area.drag-over {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .07);
  transform: scale(1.01);
}

.excel-upload-icon {
  font-size: 2.8rem;
  margin-bottom: .6rem;
}

.excel-upload-area p {
  color: var(--text-muted);
  font-size: .875rem;
  margin-bottom: .2rem;
}

.batch-template-hint {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem .9rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, .07), rgba(249, 115, 22, .05));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--secondary);
}

.tpl-hint-text {
  font-size: .8rem;
  color: var(--text-muted);
}

/* Import guide */
.import-guide {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: .85rem;
  overflow: hidden;
}

.import-guide-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  background: #f9f9fc;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-muted);
}

.import-guide-icon {
  font-size: 1rem;
}

.guide-toggle {
  margin-left: auto;
  font-size: .78rem;
  color: var(--primary);
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 4px;
  transition: background var(--transition);
}

.guide-toggle:hover {
  background: rgba(124, 58, 237, .1);
}

.import-guide-body {
  padding: .9rem;
  border-top: 1px solid var(--border);
}

.import-table-wrap {
  overflow-x: auto;
  margin-bottom: .75rem;
}

.import-example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.import-example-table th,
.import-example-table td {
  padding: .42rem .8rem;
  text-align: left;
  border: 1px solid var(--border);
}

.import-example-table th {
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(168, 85, 247, .06));
  font-weight: 700;
  white-space: nowrap;
}

.import-example-table tbody tr:nth-child(odd) {
  background: #fafafa;
}

.col-required {
  background: rgba(239, 68, 68, .1);
  color: var(--danger);
  font-size: .65rem;
  padding: .05rem .35rem;
  border-radius: 10px;
  font-weight: 700;
  margin-left: .25rem;
}

.col-optional {
  background: rgba(16, 185, 129, .1);
  color: var(--success);
  font-size: .65rem;
  padding: .05rem .35rem;
  border-radius: 10px;
  font-weight: 700;
  margin-left: .25rem;
}

.import-tips {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .75rem;
  padding: .65rem .9rem;
  background: rgba(59, 130, 246, .06);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--info);
}

.import-tips p {
  font-size: .82rem;
}

.pet-ref-section {
  margin-top: .35rem;
}

.pet-ref-title {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .45rem;
  font-weight: 700;
}

.pet-ref-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.pet-ref-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 20px;
  background: rgba(124, 58, 237, .07);
  border: 1px solid rgba(124, 58, 237, .18);
  font-size: .76rem;
  font-weight: 700;
  color: var(--primary);
  cursor: default;
  transition: all var(--transition);
  user-select: all;
}

.pet-ref-tag:hover {
  background: rgba(124, 58, 237, .14);
  transform: scale(1.06);
}

.pet-ref-tag em {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 400;
  font-size: .7rem;
}

/* Text tab */
.text-import-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .85rem;
}

@media (max-width: 540px) {
  .text-import-guide {
    grid-template-columns: 1fr;
  }
}

.text-format-box,
.text-example-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem;
  background: #fafafa;
}

.text-format-title {
  font-weight: 700;
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.text-format-rule {
  font-size: .82rem;
  margin-bottom: .4rem;
}

.text-format-tmpl {
  display: block;
  background: rgba(124, 58, 237, .07);
  border: 1px dashed rgba(124, 58, 237, .3);
  border-radius: 4px;
  padding: .38rem .65rem;
  font-size: .8rem;
  color: var(--primary-dark);
  word-break: break-all;
}

.text-example-pre {
  background: #1a1a2e;
  color: #a5f3fc;
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  font-size: .82rem;
  line-height: 1.75;
  margin-bottom: .4rem;
  overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

.text-example-note {
  font-size: .72rem;
  color: var(--text-muted);
}

/* Batch textarea */
.batch-textarea {
  width: 100%;
  min-height: 140px;
  padding: .8rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: .9rem;
  resize: vertical;
  line-height: 1.65;
}

.batch-textarea:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3.5px rgba(124, 58, 237, .12);
}

/* Preview list */
.batch-preview-list {
  max-height: 220px;
  overflow-y: auto;
  margin-top: .85rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  overflow: hidden;
}

.batch-preview-list:empty {
  border: none;
}

.batch-preview-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .48rem .8rem;
  font-size: .875rem;
}

.batch-preview-item:nth-child(odd) {
  background: #fafafa;
}

.batch-preview-item .bpi-pet {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   SCROLLBAR
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   MISC UTILITIES
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.text-muted {
  color: var(--text-muted);
}

.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: .5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-1 {
  gap: .5rem;
}

.color-picker-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform var(--spring);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.color-swatch:hover {
  transform: scale(1.2);
}

.color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--primary), 0 2px 8px rgba(0, 0, 0, .2);
}

.info-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem 0;
  border-bottom: 1px solid #f4f4f8;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row label {
  width: 80px;
  color: var(--text-muted);
  font-size: .85rem;
  flex-shrink: 0;
  font-weight: 500;
}

.info-row span {
  font-weight: 700;
}

/* Level up flash */
@keyframes levelUp {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.22);
    filter: brightness(1.4) drop-shadow(0 0 12px rgba(253, 224, 71, .8));
  }

  100% {
    transform: scale(1);
  }
}

.level-up-flash {
  animation: levelUp .7s cubic-bezier(.34, 1.56, .64, 1);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   RESPONSIVE
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
/* Mobile bottom bar (visible only on small screens) */
.mob-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
  z-index: 90;
  padding: 0 .5rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: .25rem;
}

.mob-bb-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .4rem .2rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: all var(--transition);
  font-size: .75rem;
  font-weight: 600;
  font-family: inherit;
}

.mob-bb-btn:active {
  background: rgba(0, 0, 0, .04);
}

.mob-bb-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.mob-bb-label {
  font-size: .65rem;
  white-space: nowrap;
}

.mob-bb-btn.mob-bb-honor {
  color: #92400e;
}

.mob-bb-btn.mob-bb-honor:active {
  background: rgba(245, 158, 11, .15);
}

.mob-bb-btn.mob-bb-settings {
  color: var(--primary);
  font-weight: 700;
}

.mob-bb-btn.mob-bb-settings:active {
  background: rgba(124, 58, 237, .1);
}

[data-theme] .mob-bb-btn.mob-bb-settings {
  color: var(--primary);
}

[data-theme] .mob-bb-btn.mob-bb-settings:active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* 鈺愨晲鈺?鐢佃剳绔細6 鍒?+ 鏇村ぇ鍗＄墖 鈺愨晲鈺?*/
#page-class {
  background: linear-gradient(180deg, #f8f7ff 0%, #fff 30%);
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .class-content {
    padding: 1.5rem 3rem 2rem;
  }

  #tab-students {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 0.75rem;
  }

  .students-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem 1.5rem;
  }
}

@media (min-width: 1200px) {
  .class-content {
    padding: 2rem 4.5rem 3rem;
  }

  #tab-students {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .students-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem 1.75rem;
  }

  .sc2.student-card {
    border-radius: 18px;
  }

  .sc2-pet {
    height: 138px;
  }

  .sc2-pet-img,
  .sc2-pet-miss {
    height: 118px;
    width: 118px;
  }

  .sc2-pet-miss {
    font-size: 4rem;
  }

  .sc2-top {
    padding: .85rem 1.1rem .4rem;
  }

  .sc2-lv {
    font-size: .78rem;
    padding: .24rem .6rem;
  }

  .sc2-grouptag {
    font-size: .74rem;
    max-width: 12rem;
  }

  .sc2-name-row {
    padding: 0 1.1rem .4rem;
  }

  .sc2-name {
    font-size: 1.12rem;
  }

  .sc2-petname {
    font-size: .76rem;
  }

  .sc2-prog-wrap {
    padding: 0 1.1rem .65rem;
  }

  .sc2-prog-labels {
    font-size: .75rem;
  }

  .sc2-stats {
    padding: .55rem 1.1rem .65rem;
  }

  .sc2-stat-item {
    font-size: .9rem;
  }

  .sc2-top .sc2-btn-more {
    min-width: 2rem;
    padding: .25rem .4rem;
    font-size: .95rem;
  }
}

@media (max-width: 768px) {
  .class-header {
    gap: .6rem;
  }

  .class-nav {
    gap: .25rem;
  }

  .nav-btn {
    padding: .32rem .55rem;
    font-size: .75rem;
  }

  .students-grid {
    grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
  }

  .bs-cards {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .bs-podium {
    gap: .75rem;
  }

  .rs-body {
    flex-direction: column;
  }

  .rs-right {
    width: 100%;
  }

  .class-content {
    padding: .85rem 1rem;
    padding-bottom: 76px;
  }

  .class-tabs {
    padding: 0 1rem;
    top: 56px;
  }

  /* Hide honor/undo/settings in header on mobile */
  .ch-rbtn-mob-hide {
    display: none !important;
  }

  /* Show mobile bottom bar on class page */
  #page-class .mob-bottom-bar {
    display: flex;
  }
}

@media (max-width: 480px) {
  .dashboard-body {
    padding: 1.25rem 1rem;
  }

  .data-center-grid {
    grid-template-columns: 1fr;
  }

  .modal-box {
    border-radius: var(--radius-lg);
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   THEME OVERRIDES  鈹€鈹€ [data-theme="x"] blocks
   Only override what can't be covered by vars
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/

/* 鈹€鈹€ Shared: progress bar uses var(--progress-grad) 鈹€鈹€ */
.card-progress-fill {
  background: var(--progress-grad, linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd));
}

/* 鈹€鈹€ All themes: btn-primary gradient 鈹€鈹€ */
[data-theme] .btn-primary,
[data-theme] .btn-primary {
  background: linear-gradient(135deg, var(--primary-light), var(--primary) 50%, var(--primary-dark));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .15);
}

[data-theme] .btn-primary:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Card group stripe (default) */
[data-theme] .card-group-stripe:not([style]) {
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* Card score item tint */
[data-theme] .card-score-item {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 6%, transparent),
      color-mix(in srgb, var(--primary-light) 4%, transparent));
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Card score value gradient */
[data-theme] .card-score-val {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Auth bg */
[data-theme] .auth-bg {
  background: var(--auth-bg);
}

[data-theme="pink"] .auth-bg::before {
  background: radial-gradient(circle, rgba(219, 39, 119, .35) 0%, transparent 70%);
}

[data-theme="cyan"] .auth-bg::before {
  background: radial-gradient(circle, rgba(8, 145, 178, .35) 0%, transparent 70%);
}

[data-theme="emerald"] .auth-bg::before {
  background: radial-gradient(circle, rgba(5, 150, 105, .35) 0%, transparent 70%);
}

[data-theme="orange"] .auth-bg::before {
  background: radial-gradient(circle, rgba(234, 88, 12, .35) 0%, transparent 70%);
}

[data-theme="rose"] .auth-bg::before {
  background: radial-gradient(circle, rgba(225, 29, 72, .35) 0%, transparent 70%);
}

/* dot grid */
body::before {
  background-image: radial-gradient(circle at 1px 1px, var(--dot-color, rgba(124, 58, 237, .08)) 1px, transparent 0);
}

/* logo gradient */
[data-theme] .logo-title,
[data-theme] .site-name {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* level badge */
[data-theme] .card-level-badge {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* 鈹€鈹€ Pink special: softer tones 鈹€鈹€ */
[data-theme="pink"] .card-pet-wrap {
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(219, 39, 119, .07) 0%, transparent 80%);
}

[data-theme="cyan"] .card-pet-wrap {
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(8, 145, 178, .07) 0%, transparent 80%);
}

[data-theme="emerald"] .card-pet-wrap {
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(5, 150, 105, .07) 0%, transparent 80%);
}

[data-theme="orange"] .card-pet-wrap {
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(234, 88, 12, .07) 0%, transparent 80%);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   THEME SWITCHER BUTTON & POPUP
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.btn-theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.15rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--spring), background var(--transition);
}

.btn-theme-toggle:hover {
  transform: rotate(20deg) scale(1.15);
}

.theme-picker-popup {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
  border: 1.5px solid var(--border);
  min-width: 230px;
  animation: tpIn .18s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes tpIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.95);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.tp-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .75rem;
}

.tp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}

.theme-swatch {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: #fafafa;
  transition: all var(--transition);
  cursor: pointer;
  text-align: left;
}

.theme-swatch::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--sw-g1), var(--sw-g2));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.sw-icon {
  display: none;
}

.sw-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}

.theme-swatch:hover {
  border-color: var(--sw-g2, var(--primary));
  background: rgba(0, 0, 0, .04);
  transform: translateY(-1px);
}

.theme-swatch.active {
  border-color: var(--sw-g2, var(--primary));
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--sw-g1, #8b5cf6) 12%, #fff),
      color-mix(in srgb, var(--sw-g2, #7c3aed) 8%, #fff));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.theme-swatch.active .sw-name {
  color: var(--sw-g2, var(--primary));
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   ENHANCED STUDENT CARD
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/

/* Shimmer shine effect on hover */
.student-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
      transparent 0%, transparent 40%,
      rgba(255, 255, 255, .55) 50%,
      transparent 60%, transparent 100%);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity .15s;
  pointer-events: none;
}

.student-card:hover::before {
  opacity: 1;
  transform: translateX(100%);
  transition: transform .55s ease, opacity .15s;
}

/* Top gradient band (level-based color) */
.card-group-stripe {
  background: linear-gradient(90deg, var(--primary), var(--primary-light), rgba(255, 255, 255, .5));
}

/* Progress fill animated shine */
.card-progress-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: progressShine 2.4s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }

  60% {
    transform: translateX(200%);
  }

  100% {
    transform: translateX(200%);
  }
}

/* Card feed pulse animation */
@keyframes feedPulse {
  0% {
    transform: scale(1);
    box-shadow: var(--shadow-sm);
  }

  25% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(249, 115, 22, .2), var(--shadow);
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12), var(--shadow-sm);
  }

  100% {
    transform: scale(1);
  }
}

.card-feed-pulse {
  animation: feedPulse .55s var(--spring) forwards;
}

/* Score flash */
@keyframes flashAdd {
  0% {
    box-shadow: var(--shadow-sm);
  }

  30% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, .25), var(--shadow);
    background: rgba(16, 185, 129, .04);
  }

  100% {
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
  }
}

@keyframes flashDeduct {
  0% {
    box-shadow: var(--shadow-sm);
  }

  30% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, .22), var(--shadow);
    background: rgba(239, 68, 68, .04);
  }

  100% {
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
  }
}

.card-flash-add {
  animation: flashAdd .6s ease forwards;
}

.card-flash-deduct {
  animation: flashDeduct .6s ease forwards;
}

/* Pet image sparkle on hover */
.student-card:hover .card-pet-img {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .2)) brightness(1.05) saturate(1.1);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   FLOATING SCORE ANIMATION
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.float-score {
  position: absolute;
  pointer-events: none;
  z-index: 9990;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(calc(-50% + var(--hx, 0px)));
  animation: floatUp .9s cubic-bezier(.25, 1, .5, 1) forwards;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.fs-add {
  color: #10b981;
  font-size: 1.7rem;
  text-shadow: 0 2px 12px rgba(16, 185, 129, .5);
}

.fs-deduct {
  color: #ef4444;
  font-size: 1.5rem;
  text-shadow: 0 2px 12px rgba(239, 68, 68, .5);
}

.fs-feed {
  font-size: 2rem;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--hx, 0px))) translateY(0) scale(.8);
  }

  20% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--hx, 0px))) translateY(-12px) scale(1.2);
  }

  80% {
    opacity: 0.85;
    transform: translateX(calc(-50% + var(--hx, 0px))) translateY(-60px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--hx, 0px))) translateY(-80px) scale(.9);
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   LEVEL UP OVERLAY  (luo = level-up overlay)
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.luo {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  animation: luoIn .35s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes luoIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.luo.luo-exit {
  animation: luoOut .45s ease forwards;
}

@keyframes luoOut {
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}

.luo-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 5, 30, .88) 0%, rgba(0, 0, 0, .94) 100%);
  backdrop-filter: blur(6px);
}

/* Rotating rays */
.luo-rays {
  position: absolute;
  width: 520px;
  height: 520px;
  background: conic-gradient(from 0deg,
      transparent 0deg, rgba(255, 255, 255, .06) 10deg, transparent 20deg,
      transparent 40deg, rgba(255, 255, 255, .06) 50deg, transparent 60deg,
      transparent 80deg, rgba(255, 255, 255, .06) 90deg, transparent 100deg,
      transparent 120deg, rgba(255, 255, 255, .06) 130deg, transparent 140deg,
      transparent 160deg, rgba(255, 255, 255, .06) 170deg, transparent 180deg,
      transparent 200deg, rgba(255, 255, 255, .06) 210deg, transparent 220deg,
      transparent 240deg, rgba(255, 255, 255, .06) 250deg, transparent 260deg,
      transparent 280deg, rgba(255, 255, 255, .06) 290deg, transparent 300deg,
      transparent 320deg, rgba(255, 255, 255, .06) 330deg, transparent 340deg,
      transparent 360deg);
  animation: raysRotate 6s linear infinite;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes raysRotate {
  to {
    transform: rotate(360deg);
  }
}

/* Expanding shock rings */
.luo-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .3);
  animation: ringExpand 1.2s cubic-bezier(.25, 1, .5, 1) infinite;
  pointer-events: none;
}

.luo-ring1 {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}

.luo-ring2 {
  width: 60px;
  height: 60px;
  animation-delay: .4s;
  border-color: rgba(168, 85, 247, .45);
}

@keyframes ringExpand {
  0% {
    width: 60px;
    height: 60px;
    opacity: .9;
  }

  100% {
    width: 380px;
    height: 380px;
    opacity: 0;
  }
}

/* Center layout */
.luo-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

/* Pet image */
.luo-pet-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: petPop .5s cubic-bezier(.34, 1.56, .64, 1) .05s both;
}

@keyframes petPop {
  from {
    transform: scale(.3) rotate(-15deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.luo-aura {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .55) 0%, rgba(99, 102, 241, .3) 40%, transparent 70%);
  animation: auraBreath 1.5s ease-in-out infinite alternate;
}

@keyframes auraBreath {
  from {
    transform: scale(.9);
    opacity: .7;
  }

  to {
    transform: scale(1.15);
    opacity: 1;
  }
}

.luo-pet-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, .8)) drop-shadow(0 4px 20px rgba(0, 0, 0, .4));
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
  animation: petBounce 1s ease-in-out .55s infinite alternate;
}

@keyframes petBounce {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10px);
  }
}

.luo-pet-emoji {
  font-size: 5rem;
  position: relative;
  z-index: 1;
  animation: petBounce 1s ease-in-out .55s infinite alternate;
}

/* Badge */
.luo-badge-wrap {
  animation: badgeIn .45s cubic-bezier(.34, 1.56, .64, 1) .28s both;
}

@keyframes badgeIn {
  from {
    transform: scale(0) rotate(20deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(-3deg);
    opacity: 1;
  }
}

.luo-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  padding: .35rem 1.2rem;
  border-radius: 40px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, .5), 0 0 0 4px rgba(255, 255, 255, .15);
  letter-spacing: .04em;
}

/* Text block */
.luo-texts {
  text-align: center;
  animation: textsIn .4s ease .38s both;
}

@keyframes textsIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.luo-up-label {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f59e0b, #ef4444, #a855f7, #3b82f6, #10b981, #f59e0b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 2s linear infinite;
}

@keyframes rainbowShift {
  to {
    background-position: 200% center;
  }
}

.luo-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  margin: .1rem 0;
}

.luo-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
  letter-spacing: .03em;
}

/* Star burst layer */
.luo-stars {
  position: absolute;
  inset: -60px;
  pointer-events: none;
}

.luo-star {
  position: absolute;
  animation: starPop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes starPop {
  from {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.4);
    opacity: 1;
  }

  to {
    transform: scale(1) rotate(15deg);
    opacity: .9;
  }
}

/* Particle field */
.luo-particles {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.luo-p {
  position: absolute;
  animation: particleBurst var(--dur, 1.2s) var(--delay, 0s) cubic-bezier(.25, .46, .45, .94) both;
  font-style: normal;
}

@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(0) rotate(720deg);
    opacity: 0;
  }
}

/* Hint text */
.luo-dismiss-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .35);
  font-size: .8rem;
  letter-spacing: .05em;
  animation: hintBlink 2s ease-in-out 1.5s infinite alternate;
}

@keyframes hintBlink {
  from {
    opacity: .35;
  }

  to {
    opacity: .7;
  }
}

/* 鍏诲疇婊＄骇搴嗙 - 鍏绘垚鎴愬姛鐣岄潰 v2锛堥伄缃╁湪涓嬨€佹槦鏄熷湪涓婏紝閬垮厤閫忚繃鍗婇€忔槑灞傚彂铏氾級 */
.luo-maxlevel-v2 .luo-backdrop {
  z-index: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.luo-maxlevel-v2 .luo-maxlevel-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.luo-maxlevel-falling,
.luo-maxlevel-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.luo-ml-starfall {
  position: absolute;
  top: -6%;
  line-height: 1;
  animation: luoMlStarFall linear forwards;
  opacity: 1;
  color: #fbbf24;
  font-family: 'Segoe UI Symbol', 'Apple SD Gothic Neo', 'Noto Sans Symbols 2', 'Arial Unicode MS', sans-serif;
  font-weight: 700;
  filter: none;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  will-change: transform;
}

@keyframes luoMlStarFall {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(120vh) rotate(720deg);
  }
}

.luo-ml-confetti-piece {
  position: absolute;
  top: -12px;
  border-radius: 2px;
  animation: luoMlConfettiFall linear forwards;
  opacity: 0.95;
  will-change: transform, opacity;
}

@keyframes luoMlConfettiFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(120vh) translateX(var(--ml-drift, 0px)) rotate(540deg);
    opacity: 0.35;
  }
}

.luo-maxlevel-bursts {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.luo-ml-burst-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  border: 3px solid rgba(251, 191, 36, 0.45);
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.5),
    inset 0 0 12px rgba(255, 255, 255, 0.35);
  animation: luoMlBurstExpand 2.4s ease-out infinite;
  opacity: 0.85;
}

@keyframes luoMlBurstExpand {
  0% {
    transform: scale(0.25);
    opacity: 0.9;
  }

  100% {
    transform: scale(16);
    opacity: 0;
  }
}

/* 婊＄骇绀艰姳绛掞細绛掕韩 + 浠庡彛閮ㄥ柗鍑虹ぜ鑺?*/
.luo-ml-party {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.luo-ml-popper-unit {
  position: absolute;
  bottom: 5%;
  width: 44px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transform: translateX(-50%);
}

.luo-ml-popper--tilt-l {
  transform: translateX(-50%) rotate(-12deg);
}

.luo-ml-popper--tilt-c {
  transform: translateX(-50%) rotate(0deg);
  bottom: 6%;
}

.luo-ml-popper--tilt-r {
  transform: translateX(-50%) rotate(12deg);
}

.luo-ml-popper-tube {
  width: 34px;
  height: 48px;
  border-radius: 10px 10px 12px 12px;
  background: linear-gradient(90deg,
      #9a3412 0%,
      #ea580c 35%,
      #fbbf24 50%,
      #ea580c 65%,
      #7c2d12 100%);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.35),
    inset 0 -4px 8px rgba(0, 0, 0, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.35);
  position: relative;
}

.luo-ml-popper-tube::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 12px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #fef3c7, #f59e0b);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5) inset;
}

.luo-ml-popper-anchor {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.luo-ml-popper-piece,
.luo-ml-popper-ribbon {
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 0;
  margin-top: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  animation: luoPopperBurst 0.95s cubic-bezier(0.12, 0.65, 0.22, 1) forwards;
  opacity: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.luo-ml-popper-piece {
  width: 7px;
  height: 9px;
  border-radius: 2px;
}

.luo-ml-popper-ribbon {
  width: 5px;
  height: 16px;
  border-radius: 1px;
}

@keyframes luoPopperBurst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.92);
    opacity: 0.92;
  }
}

.luo-maxlevel-modal {
  position: relative;
  z-index: 2;
  width: min(92vw, 360px);
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(180deg, #fffef8 0%, #fff9e8 100%);
  border-radius: 24px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .4), 0 0 0 6px rgba(251, 146, 60, .25),
    0 20px 50px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: maxlevelModalIn .4s cubic-bezier(.34, 1.56, .64, 1);
}

.luo-maxlevel-modal::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 27px;
  padding: 3px;
  background: linear-gradient(135deg, #f59e0b, #f97316, #ec4899, #8b5cf6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes maxlevelModalIn {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.luo-maxlevel-sparkles {
  position: absolute;
  top: .5rem;
  right: .75rem;
  font-size: 1.2rem;
  opacity: .7;
}

.luo-maxlevel-main-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ea580c;
  text-align: center;
  margin-bottom: .35rem;
  text-shadow: 0 1px 2px rgba(234, 88, 12, .2);
}

.luo-maxlevel-subtitle {
  font-size: .95rem;
  color: #444;
  text-align: center;
  margin-bottom: 1rem;
}

.luo-maxlevel-pet-frame {
  width: 140px;
  height: 140px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(251, 146, 60, .15), rgba(236, 72, 153, .1));
  border: 2px solid rgba(245, 158, 11, .35);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(245, 158, 11, .2), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.luo-maxlevel-pet-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 50%;
}

.luo-maxlevel-pet-emoji {
  font-size: 3.5rem;
  line-height: 110px;
}

.luo-maxlevel-pet-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: .2rem;
}

.luo-maxlevel-form {
  font-size: .85rem;
  color: #f59e0b;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}

.luo-maxlevel-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-bottom: .35rem;
  font-size: 1rem;
  font-weight: 700;
  color: #333;
}

.luo-maxlevel-badge-icon {
  font-size: 1.4rem;
}

.luo-maxlevel-badge-hint {
  font-size: .8rem;
  color: #666;
  text-align: center;
  margin-bottom: 1.25rem;
}

.luo-maxlevel-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
}

.luo-maxlevel-btn {
  padding: .6rem 1.1rem;
  border-radius: 14px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: 2px solid;
}

.luo-maxlevel-btn-ghost {
  background: #fff;
  border-color: #d4d4d8;
  color: #52525b;
}

.luo-maxlevel-btn-ghost:hover {
  background: #f4f4f5;
  border-color: #a1a1aa;
}

.luo-maxlevel-btn-primary {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border-color: rgba(249, 115, 22, .5);
  color: #fff;
  box-shadow: 0 4px 14px rgba(249, 115, 22, .4);
}

.luo-maxlevel-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, .5);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   寰界珷澧?- 鍦嗗舰璐寸焊瑁呴グ椋庢牸
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.flh-hint {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.flh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.flh-sticker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: 16px;
  outline: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.flh-sticker:focus-visible {
  box-shadow: 0 0 0 3px var(--primary, #6366f1);
}

.flh-sticker--selected .flh-sticker-frame {
  box-shadow:
    0 0 0 3px var(--primary, #6366f1),
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 -1px 4px rgba(0, 0, 0, .1),
    0 4px 12px rgba(0, 0, 0, .12);
}

.flh-sticker--selected {
  transform: translateY(-2px);
}

.flh-sticker-frame {
  position: relative;
  width: 110px;
  height: 110px;
  padding: 8px;
  background: linear-gradient(145deg, #f5e6b3, #f0d675);
  border-radius: 50%;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 -1px 4px rgba(0, 0, 0, .1),
    0 4px 12px rgba(0, 0, 0, .08);
}

.flh-sticker-frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(255, 255, 255, .8);
  border-radius: 50%;
  pointer-events: none;
}

.flh-sticker-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08) inset;
}

.flh-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.flh-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flh-star {
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  opacity: .95;
}

.flh-star-1 {
  top: 6px;
  left: 12px;
}

.flh-star-2 {
  bottom: 8px;
  right: 8px;
}

.flh-star-3 {
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}

.flh-label {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #333;
  background: linear-gradient(180deg, #f5f0e1, #ebe4d0);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  white-space: nowrap;
  z-index: 2;
}

.flh-date {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   CLASS HEADER v2  (overrides purple header)
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.class-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 2px 14px rgba(0, 0, 0, .06);
  padding: .5rem 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  align-items: center;
  min-height: 58px;
  backdrop-filter: blur(16px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
}

.class-header::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.ch-left {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  flex-shrink: 0;
}

.ch-back-btn {
  background: var(--bg-soft, #f0eeff);
  color: var(--primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .32rem .65rem;
  font-size: .82rem;
  font-weight: 700;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.ch-back-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateX(-2px);
}

.ch-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
}

.ch-info {
  min-width: 0;
}

.ch-cls-name {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.ch-cls-grade {
  display: block;
  font-size: .7rem;
  color: var(--text-muted);
}

.ch-center {
  min-width: 120px;
  flex-shrink: 0;
}

.ch-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg, #f4f2ff);
  border: 1.5px solid var(--border);
  border-radius: 30px;
  padding: .4rem .95rem;
  cursor: text;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.ch-search-wrap:focus-within {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3.5px var(--border-focus, rgba(124, 58, 237, .15));
  background: #fff;
}

.ch-si {
  font-size: .9rem;
  opacity: .45;
  user-select: none;
}

.ch-search-input {
  background: none;
  border: none;
  outline: none;
  font-size: .87rem;
  color: var(--text);
  flex: 1;
  min-width: 80px;
  padding: 0;
}

.ch-search-input::placeholder {
  color: var(--text-light);
}

.ch-right {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}

.ch-rbtn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .78rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: #fff;
  transition: all var(--transition);
  white-space: nowrap;
}

.ch-rbtn:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--bg-soft, #f0eeff);
  transform: translateY(-1px);
}

.ch-rbtn-honor {
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border-color: #fcd34d;
  color: #92400e;
}

.ch-rbtn-honor:hover {
  background: linear-gradient(135deg, #fef08a, #fde047);
  border-color: #f59e0b;
  color: #78350f;
  transform: translateY(-1px);
}

.ch-rbtn-settings {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
}

.ch-rbtn-settings:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, .4);
  color: #fff;
}

[data-theme] .ch-rbtn-settings {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}

[data-theme] .ch-rbtn-settings:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   CLASS NAV OVAL锛堢數鑴戠妞渾瀵艰埅瀹瑰櫒锛?   鍙傝€冨浘锛氭き鍦嗚兌鍥婏紝鎵€鏈夊鑸唴瀹瑰湪鍐?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.class-nav-oval {
  /* 绉诲姩绔細鏅€氬潡绾э紝鏃犳き鍦?*/
}

@media (min-width: 1024px) {
  .class-nav-oval {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(1440px, calc(100% - 6rem));
    max-width: 1440px;
    margin: 1.25rem auto 0;
    padding: .5rem 2rem 1rem;
    background: rgba(255, 255, 255, .98);
    border-radius: 9999px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .06), 0 2px 12px rgba(0, 0, 0, .04),
      0 14px 48px -6px color-mix(in srgb, var(--primary) 38%, transparent),
      0 20px 56px -10px color-mix(in srgb, var(--primary) 28%, transparent);
    border: 1.5px solid var(--border);
  }

  .class-nav-oval .class-header {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: .4rem 0 .5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .class-nav-oval .ch-cls-name,
  .class-nav-oval .class-page-name {
    color: var(--text) !important;
  }

  .class-nav-oval .ch-cls-grade,
  .class-nav-oval .class-page-grade {
    color: var(--text-muted) !important;
  }

  .class-nav-oval .ch-back-btn {
    background: var(--bg-soft, #f0eeff);
    color: var(--primary);
    border-color: var(--border);
  }

  .class-nav-oval .ch-back-btn:hover {
    background: var(--primary);
    color: #fff;
  }

  .class-nav-oval .ch-avatar {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
  }

  .class-nav-oval .ch-search-input {
    background: var(--bg, #f8f7ff);
  }

  .gfbar-in-oval {
    background: none !important;
    border: none !important;
    padding: .35rem 0 0;
    margin-top: 0;
    border-top: 1px solid var(--border);
  }
}

@media (min-width: 1200px) {
  .class-nav-oval {
    width: min(1520px, calc(100% - 9rem));
    max-width: 1520px;
  }
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   GROUP FILTER BAR
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.gfbar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.5rem .5rem;
  background: var(--bg, #f4f2ff);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 50;
}

/* 鍗＄墖鍖哄煙鍐呯殑 gfbar锛氬乏瀵归綈銆佹棤鑳屾櫙鏉°€佹斁鍗＄墖涓婃柟 */
.gfbar-in-cards {
  background: none;
  border-bottom: none;
  padding: 0 0 .85rem 0;
  margin-bottom: .5rem;
}

@media (min-width: 1024px) {
  .gfbar-in-cards {
    padding: 0 0 1rem 0;
    margin-bottom: .75rem;
  }
}

.gfbar::-webkit-scrollbar {
  display: none;
}

.gfpill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .8rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.gfpill:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--bg-soft, #f0eeff);
}

.gfpill.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
}

[data-theme] .gfpill.active {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}

.gfpill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.gfpill-count {
  font-size: .7rem;
  opacity: .8;
}

.gfbar-spacer {
  flex: 1;
  min-width: .5rem;
}

.gfbar-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  padding: .35rem .75rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  color: var(--text-muted);
}

.gfbar-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--bg-soft, #f0eeff);
}

.gfbar-btn .ri {
  font-size: 1rem;
}

.gfbar-export:hover {
  border-color: #0ea872;
  color: #0ea872;
  background: rgba(14, 168, 114, .08);
}

.gfbar-import:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.gfbar-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.gfbar-sort:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: rgba(245, 158, 11, .08);
}

.gfbar-screen-lock:hover {
  border-color: #7c3aed;
  color: #7c3aed;
  background: rgba(124, 58, 237, .09);
}

/* 鎺掑簭涓嬫媺 - 鎸傝浇鍒?body锛宖ixed 瀹氫綅纭繚娴簬鍗＄墖涔嬩笂 */
.sort-dropdown.sort-dropdown-fixed {
  position: fixed;
  min-width: 180px;
  padding: .5rem 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
  border: 1px solid var(--border);
  z-index: 9999;
  animation: sortDropdownIn .2s ease;
}

@keyframes sortDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sort-dropdown-title {
  padding: .4rem 1rem;
  font-size: .75rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: .3rem;
}

.sort-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .55rem 1rem;
  font-size: .88rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: background .15s;
}

.sort-dropdown-item:hover {
  background: var(--bg-soft, #f0eeff);
}

.sort-dropdown-item.active {
  background: rgba(59, 130, 246, .08);
  color: var(--primary, #3b82f6);
}

.sort-item-current {
  font-size: .75rem;
  font-weight: 700;
  color: var(--success, #10b981);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   SETTINGS DROPDOWN
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.settings-dropdown {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: .45rem;
  min-width: 210px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08);
  border: 1.5px solid var(--border);
  animation: tpIn .18s cubic-bezier(.34, 1.56, .64, 1);
}

.sd-sep {
  height: 1px;
  background: var(--border);
  margin: .35rem .6rem;
}

.sd-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .4rem .85rem .15rem;
  display: block;
}

.sd-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .58rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  transition: background var(--transition), transform .1s, color .1s;
}

.sd-item:hover {
  background: var(--bg-soft, #f0eeff);
  color: var(--primary);
  transform: translateX(2px);
}

.sd-item.sd-item--danger {
  color: #dc2626;
}

.sd-item.sd-item--danger:hover {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}

.sd-icon {
  font-size: 1.05rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   SC2 STUDENT CARD  (new card design)
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.sc2.student-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--gc, var(--primary)) 40%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06),
    0 0 24px color-mix(in srgb, var(--gc, var(--primary)) 28%, transparent),
    0 4px 16px -2px color-mix(in srgb, var(--gc, var(--primary)) 18%, transparent),
    0 14px 48px -6px color-mix(in srgb, var(--gc, var(--primary)) 42%, transparent),
    0 20px 56px -10px color-mix(in srgb, var(--gc, var(--primary)) 30%, transparent);
  padding: 0;
  overflow: hidden;
  transition: transform var(--spring), box-shadow var(--transition), border-color var(--transition);
}

.sc2.student-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: color-mix(in srgb, var(--gc, var(--primary)) 55%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1),
    0 0 32px color-mix(in srgb, var(--gc, var(--primary)) 42%, transparent),
    0 0 48px color-mix(in srgb, var(--gc, var(--primary)) 22%, transparent),
    0 18px 56px -6px color-mix(in srgb, var(--gc, var(--primary)) 48%, transparent),
    0 24px 64px -10px color-mix(in srgb, var(--gc, var(--primary)) 35%, transparent);
}

.sc2.student-card::before {
  display: none;
}

.sc2.student-card.selected {
  border-color: color-mix(in srgb, var(--gc, var(--primary)) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc, var(--primary)) 30%, transparent),
    0 0 20px color-mix(in srgb, var(--gc, var(--primary)) 35%, transparent),
    0 10px 24px -4px color-mix(in srgb, var(--gc, var(--primary)) 28%, transparent);
}

/* top row锛氱瓑绾?+ 鏇村 */
.sc2-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .7rem .35rem;
}

.sc2-top .sc2-btn-more {
  flex: none;
  min-width: 1.8rem;
  padding: .2rem .35rem;
  font-size: .9rem;
  border-radius: 6px;
  margin: 0;
  align-self: flex-start;
}

.sc2-lv {
  background: linear-gradient(135deg, var(--gc, var(--primary)), color-mix(in srgb, var(--gc, var(--primary)) 75%, #000));
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  padding: .18rem .5rem;
  border-radius: 20px;
  letter-spacing: .03em;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--gc, var(--primary)) 40%, transparent);
}

.sc2-grouptag {
  font-size: .63rem;
  font-weight: 700;
  padding: .14rem .52rem;
  border-radius: 20px;
  border: 1.5px solid;
  box-sizing: border-box;
  width: max-content;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc2-grouptag-bottom {
  flex: 0 1 auto;
  min-width: min-content;
  margin: 0 .2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* pet */
.sc2-pet {
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 70% at 50% 60%, color-mix(in srgb, var(--gc, var(--primary)) 8%, transparent) 0%, transparent 80%);
  position: relative;
  overflow: hidden;
}

.sc2-pet-img {
  height: 100px;
  width: 100px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .15));
  animation: petFloat 3s ease-in-out infinite;
}

.sc2-pet-miss {
  font-size: 3.2rem;
  animation: petFloat 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}

/* 婊＄骇锛氳悓瀹犲浘 + 鍙敜绁炲吔 */
.sc2-pet-max {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
}

.sc2-pet:has(.sc2-pet-max) {
  min-height: 148px;
  height: auto;
  padding: 0.35rem 0.45rem;
}

/* 棰嗗吇鍖哄煙锛堝彫鍞ょ鍏藉悗鏄剧ず铔?鐐瑰嚮棰嗗吇锛夆€?鐣ュ楂樺疇鐗╁尯浠ヤ究妗嗘洿澶?*/
.sc2-pet:has(.sc2-adopt-wrap) {
  min-height: 148px;
  height: auto;
  padding: 0.35rem 0.45rem;
}

.sc2-adopt-wrap {
  box-sizing: border-box;
  width: calc(100% - 0.35rem);
  max-width: 100%;
  min-height: 128px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  margin: 0 auto;
  padding: 0.45rem 0.55rem;
  background: rgba(124, 58, 237, .04);
  transition: all .2s;
}

.sc2-adopt-wrap:hover {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .08);
}

.sc2-adopt-egg {
  height: 92px;
  width: 92px;
  object-fit: contain;
  image-rendering: pixelated;
}

.sc2-adopt-fallback {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.35rem;
}

.sc2-adopt-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: .4rem;
  line-height: 1.35;
  text-align: center;
}

/* 鍙敜绁炲吔鎸夐挳 */
.sc2-summon-btn {
  margin-top: 0;
  padding: .35rem .85rem;
  font-size: .78rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .4);
  transition: transform .15s, box-shadow .15s;
}

.sc2-summon-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(245, 158, 11, .5);
}

/* name */
.sc2-name-row {
  padding: 0 .75rem .35rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.sc2-name {
  font-size: .96rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.sc2-petname {
  font-size: .68rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc2-petname--muted {
  color: var(--text-muted);
  font-weight: 600;
}

/* progress */
.sc2-prog-wrap {
  padding: 0 .75rem .55rem;
}

.sc2-prog-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .66rem;
  color: var(--text-muted);
  margin-bottom: .22rem;
}

.sc2-prog-title {
  font-weight: 600;
}

.sc2-remain {
  font-weight: 800;
  font-style: normal;
  color: var(--gc, var(--primary));
}

.sc2-maxlv {
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sc2-prog-bar {
  height: 5px;
  background: #f0f0f5;
  border-radius: 3px;
  overflow: hidden;
}

.sc2-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gc, var(--primary)), color-mix(in srgb, var(--gc, var(--primary)) 65%, #fff));
  border-radius: 3px;
  transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
}

.sc2-prog-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: progressShine 2.4s ease-in-out infinite;
}

/* stats row锛氬乏绂忓埄 / 涓皬缁勬爣绛?/ 鍙冲窘绔?鈥?灏忕粍鏍囩鐩稿鏁村崱姘村钩灞呬腑 */
.sc2-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: .35rem;
  padding: .45rem .75rem .5rem;
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.sc2-stats .sc2-stat-item {
  flex-shrink: 0;
}

.sc2-stats>.sc2-stat-item:first-child {
  justify-self: start;
}

.sc2-stats>.sc2-grouptag-bottom {
  justify-self: center;
  margin-left: 0;
  margin-right: 0;
}

.sc2-stats>.sc2-score {
  justify-self: end;
  margin-left: 0;
}

.sc2-stat-item {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  font-size: .74rem;
  color: var(--text-muted);
}

.sc2-stat-item b {
  font-weight: 800;
  color: var(--text);
}

.sc2-score b {
  color: var(--gc, var(--primary));
}

.sc2-medal {
  font-size: .88rem;
}

/* action buttons锛氫粎淇濈暀鏇村鎸夐挳锛屽眳涓?*/
.sc2-btn {
  flex: 1;
  padding: .36rem .15rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: #fafafa;
  transition: all var(--transition);
}

.sc2-btn:hover {
  transform: scale(1.07) translateY(-1px);
}

.sc2-btn-add {
  color: #fff;
  background: linear-gradient(135deg, #34d399, #10b981);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
}

.sc2-btn-add:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, .4);
}

.sc2-btn-sub {
  color: #fff;
  background: linear-gradient(135deg, #f87171, #ef4444);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .3);
}

.sc2-btn-sub:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, .4);
}

.sc2-btn-feed {
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(249, 115, 22, .3);
}

.sc2-btn-feed:hover {
  box-shadow: 0 4px 12px rgba(249, 115, 22, .4);
}

.sc2-btn-more {
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(168, 85, 247, .06));
  color: var(--primary);
  border-color: rgba(124, 58, 237, .18);
  font-size: .95rem;
  letter-spacing: .05em;
}

.sc2-btn-more:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

[data-theme] .sc2-btn-more {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}

[data-theme] .sc2-btn-more:hover {
  background: var(--primary);
  color: #fff;
}

/* 瀹犵墿楗ラタ鎻愮ず鏉★紙鍗＄墖鏈€涓婃柟銆佸ぇ瀛楅啋鐩紱鐖剁骇 overflow 瑁佸渾瑙掞級 */
.sc2-hunger-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin: 0 0 .45rem;
  padding: .62rem .75rem;
  border-radius: 0;
  font-size: clamp(.92rem, 3.2vw, 1.12rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .04em;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35);
  animation: hungerPulse 2s ease-in-out infinite;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, .08);
}

.sc2.student-card.student-card--hunger {
  padding-top: 0;
}

/* 楗ラタ鍗＄墖澶栨锛氬懠鍚搁棯鐑佽鎶ュ厜锛堜笉鍚凡楗挎鐘舵€侊級 */
.sc2.student-card.student-card--hunger-mild,
.sc2.student-card.student-card--hunger-critical {
  transition: transform var(--spring);
  will-change: box-shadow, border-color;
}

.sc2.student-card.student-card--hunger-mild {
  animation: hungerFrameAlertMild 2.2s ease-in-out infinite;
}

.sc2.student-card.student-card--hunger-critical {
  animation: hungerFrameAlertCritical 1.15s ease-in-out infinite;
}

@keyframes hungerFrameAlertMild {

  0%,
  100% {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow:
      0 0 0 0 rgba(251, 191, 36, 0),
      0 2px 10px rgba(0, 0, 0, 0.06),
      0 0 14px rgba(245, 158, 11, 0.22);
  }

  50% {
    border-color: rgba(234, 88, 12, 0.95);
    box-shadow:
      0 0 0 3px rgba(251, 146, 60, 0.5),
      0 2px 14px rgba(0, 0, 0, 0.08),
      0 0 26px rgba(249, 115, 22, 0.55),
      0 0 42px rgba(245, 158, 11, 0.35);
  }
}

@keyframes hungerFrameAlertCritical {

  0%,
  100% {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow:
      0 0 0 0 rgba(220, 38, 38, 0),
      0 2px 10px rgba(0, 0, 0, 0.07),
      0 0 16px rgba(239, 68, 68, 0.3);
  }

  50% {
    border-color: rgba(185, 28, 28, 1);
    box-shadow:
      0 0 0 4px rgba(239, 68, 68, 0.55),
      0 2px 16px rgba(0, 0, 0, 0.1),
      0 0 32px rgba(220, 38, 38, 0.65),
      0 0 52px rgba(185, 28, 28, 0.45);
  }
}

.sc2.student-card.student-card--hunger-mild:hover {
  transform: translateY(-4px) scale(1.01);
  animation: hungerFrameAlertMild 2.2s ease-in-out infinite;
}

.sc2.student-card.student-card--hunger-critical:hover {
  transform: translateY(-4px) scale(1.01);
  animation: hungerFrameAlertCritical 1.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .sc2.student-card.student-card--hunger-mild,
  .sc2.student-card.student-card--hunger-critical {
    animation: none;
    border-color: rgba(234, 88, 12, 0.75);
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.4), 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  .sc2.student-card.student-card--hunger-critical {
    border-color: rgba(220, 38, 38, 0.85);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45), 0 2px 10px rgba(0, 0, 0, 0.06);
  }
}

.sc2-hunger-icon {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}

.sc2-hunger-text {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

.sc2-hunger-banner--mild {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 50%, #fbbf24 100%);
  color: #451a03;
  border-bottom-color: #d97706;
}

.sc2-hunger-banner--severe {
  background: linear-gradient(180deg, #fef2f2 0%, #fecaca 45%, #f87171 100%);
  color: #450a0a;
  border-bottom-color: #b91c1c;
  animation: hungerPulseSevere 1.35s ease-in-out infinite;
}

@keyframes hungerPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.008);
  }
}

@keyframes hungerPulseSevere {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}

/* 楗挎鐘舵€侊細涓庢墸鍒嗙牬铔嬪浘鍚屾簮 PO锛屽彲鐐瑰浘閲嶆柊棰嗗吇 */
.sc2-starve-dead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem .75rem .85rem;
  margin: 0 .4rem;
  background: linear-gradient(180deg, rgba(30, 27, 45, .05), rgba(127, 29, 29, .07));
  border-radius: 12px;
  border: 2px dashed rgba(220, 38, 38, .32);
  gap: .4rem;
}

.sc2-starve-po-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .45rem .5rem .55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px dashed rgba(220, 38, 38, .28);
  background: rgba(254, 242, 242, .5);
  transition: border-color .2s, background .2s, transform .15s;
}

.sc2-starve-po-wrap:hover {
  border-color: var(--primary);
  background: rgba(124, 58, 237, .06);
}

.sc2-starve-po-wrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sc2-starve-title {
  font-size: .95rem;
  font-weight: 900;
  color: #b91c1c;
  letter-spacing: .02em;
  text-align: center;
  margin-top: .3rem;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}

.sc2-starve-sub {
  font-size: .72rem;
  font-weight: 600;
  color: #7f1d1d;
  text-align: center;
  line-height: 1.35;
  max-width: 200px;
  opacity: .95;
}

.sc2-starve-readopt {
  margin-top: .35rem;
  font-weight: 800;
  padding: .45rem 1rem !important;
  font-size: .82rem !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   HONOR ROLL OVERLAY
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.hr-overlay {
  background: rgba(8, 4, 22, .95);
  backdrop-filter: blur(12px);
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.hr-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.hr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 2rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hr-title-wrap {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.hr-crown {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, .6));
}

.hr-title {
  font-size: 1.55rem;
  font-weight: 900;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 3s linear infinite;
}

.hr-close {
  color: rgba(255, 255, 255, .55);
  font-size: .88rem;
  padding: .4rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: all var(--transition);
}

.hr-close:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.hr-subheader {
  padding: 0 1.25rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (min-width: 480px) {
  .hr-subheader {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.hr-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.hr-tab {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}

.hr-tab:hover {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .88);
}

.hr-tab.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, .38), rgba(251, 191, 36, .22));
  border-color: rgba(245, 158, 11, .55);
  color: #fff;
  box-shadow: 0 2px 12px rgba(245, 158, 11, .2);
}

.hr-tab:active {
  transform: scale(0.98);
}

.hr-period-desc {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, .38);
  text-align: center;
  line-height: 1.45;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.hr-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hr-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, .055);
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .07);
  transition: background .18s, transform .18s;
  cursor: default;
}

.hr-item:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateX(4px);
}

.hr-rank {
  font-size: 1.2rem;
  font-weight: 900;
  min-width: 2.8rem;
  text-align: center;
}

.hr-rank-1 {
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, .6));
}

.hr-rank-2 {
  filter: drop-shadow(0 2px 8px rgba(148, 163, 184, .4));
}

.hr-rank-3 {
  filter: drop-shadow(0 2px 8px rgba(205, 127, 50, .4));
}

.hr-rank-n {
  color: rgba(255, 255, 255, .4);
  font-size: .95rem;
}

.hr-pet {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
  flex-shrink: 0;
}

.hr-pet-emoji {
  font-size: 2.2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hr-info {
  flex: 1;
  min-width: 0;
}

.hr-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.hr-meta {
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
  margin-top: .1rem;
}

.hr-score-wrap {
  text-align: right;
  flex-shrink: 0;
}

.hr-score {
  font-size: 1.25rem;
  font-weight: 900;
  display: block;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hr-score-label {
  font-size: .68rem;
  color: rgba(255, 255, 255, .4);
}

.hr-empty {
  text-align: center;
  padding: 3rem;
  color: rgba(255, 255, 255, .4);
  font-size: 1rem;
}

/* hide old filter-bar name input since ch-search replaces it */
#tab-students .filter-bar {
  display: none;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   SCREEN LOCK锛堝叏绔欓伄缃╋紝楂樹簬澶у睆/寮圭獥锛?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.screen-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(15, 10, 35, .74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.screen-lock-overlay.open {
  display: flex;
}

body.screen-lock-on {
  overflow: hidden;
}

.screen-lock-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .5);
  text-align: center;
}

.screen-lock-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: .4rem;
}

.screen-lock-title {
  margin: 0 0 .35rem;
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--text);
}

.screen-lock-sub {
  margin: 0 0 1rem;
  font-size: .87rem;
  color: var(--text-muted);
}

.screen-lock-input {
  width: 100%;
  margin-bottom: .85rem;
  text-align: center;
  font-size: 1rem;
  box-sizing: border-box;
}

.screen-lock-unlock-btn {
  width: 100%;
  margin-bottom: 1rem;
}

.screen-lock-forgot-hint {
  font-size: .74rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 .65rem;
  text-align: left;
}

.screen-lock-forgot-btn {
  width: 100%;
  font-size: .82rem;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   CLASS SHARE (FAB + modal + public share page)
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.class-share-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 5rem;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c5cff, #4f8cff);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(91, 107, 255, .45);
  z-index: 9500;
  transition: transform .15s ease, box-shadow .15s ease;
}

.class-share-fab:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 32px rgba(91, 107, 255, .55);
}

.class-share-fab:active {
  transform: scale(.96);
}

#page-class:not(.active) .class-share-fab {
  display: none;
}

@media (max-width: 900px) {
  .class-share-fab {
    bottom: 5.5rem;
    right: 1rem;
  }
}

.share-modal-hint {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-muted, #64748b);
}

.share-modal-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.share-modal-label {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.share-days-select {
  flex: 1;
  max-width: 220px;
}

.share-modal-actions {
  margin-top: .25rem;
  border-top: none;
  padding-top: 0;
}

.share-modal-result {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.share-modal-result[hidden] {
  display: none !important;
}

.share-url-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}

.share-url-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.share-url-input {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
}

.share-expires-text {
  margin: .65rem 0 0;
  font-size: .78rem;
  color: var(--text-muted, #64748b);
}

/* 鈥斺€?share.html (public) 鈥斺€?*/
.share-page {
  min-height: 100vh;
  background: linear-gradient(165deg, #e8eeff 0%, #f5f0ff 45%, #fff 100%);
  padding: 1.25rem 1rem 2.5rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1e293b;
}

.share-page-head {
  text-align: center;
  margin-bottom: 1.25rem;
}

.share-page-head h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.share-page-meta {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: #64748b;
}

.share-page-banner {
  max-width: 720px;
  margin: 0 auto 1rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(124, 92, 255, .2);
  font-size: .8rem;
  color: #475569;
  text-align: center;
}

.share-page-error {
  max-width: 480px;
  margin: 2rem auto;
  padding: 1.5rem;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}

.share-grid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.share-card {
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1rem .9rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  border: 1px solid rgba(226, 232, 240, .9);
}

.share-card-top {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.share-card-pet {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.share-card-title {
  flex: 1;
  min-width: 0;
}

.share-card-name {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0;
}

.share-card-sub {
  font-size: .75rem;
  color: #64748b;
  margin: .2rem 0 0;
}

.share-progress-wrap {
  margin-top: .65rem;
  height: 8px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
}

.share-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  transition: width .3s ease;
}

.share-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
  font-size: .72rem;
  color: #64748b;
}

.share-hall-label {
  margin: .85rem 0 .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.share-hall {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.share-hall img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.share-hall-empty {
  font-size: .78rem;
  color: #94a3b8;
}


/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   PET GALLERY (PREMIUM UPGRADE)
   Featuring: Glassmorphism, Modern Slider, Grid Cards
鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
.pg-overlay {
  background: rgba(15, 10, 30, 0.85);
  backdrop-filter: blur(25px) saturate(180%);
  z-index: 2000;
  display: none;
  flex-direction: column;
}

.pg-overlay.open {
  display: flex;
  animation: pgFadeIn .4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pgFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(25px);
  }
}

.pg-header {
  padding: 0.4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.pg-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pg-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px var(--primary));
}

.pg-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}

.pg-subtitle {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  font-weight: 500;
}

.pg-header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.pg-search-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  padding: 0.35rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s ease;
}

.pg-search-wrap:focus-within {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-light);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.pg-search-icon {
  font-size: 1rem;
  opacity: 0.6;
  color: #fff;
}

.pg-search-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  width: 200px;
  padding: 0;
}

.pg-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.pg-close {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid rgba(239, 68, 68, 0.2);
  transition: all 0.3s ease;
}

.pg-close:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.05);
}

/* --- Level Slider Bar --- */
.pg-slider-bar {
  padding: 0.4rem 2rem;
  background: rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pg-lv-info {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.pg-lv-num {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--primary-light);
  line-height: 1;
}

.pg-lv-title-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  margin-top: 0.2rem;
}

.pg-slider-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
}

.pg-slider-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  font-weight: 800;
  font-family: monospace;
}

/* Custom Range Input */
.pg-slider {
  -webkit-appearance: none;
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  outline: none;
  position: relative;
  --pg-pct: 0%;
}

.pg-slider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pg-pct);
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

.pg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 4px solid var(--primary);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pg-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.pg-lv-dots {
  display: flex;
  gap: 0.5rem;
}

.pg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pg-dot:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

.pg-dot.active {
  background: var(--primary-light);
  box-shadow: 0 0 10px var(--primary-light);
  transform: scale(1.3);
}

/* --- Body & Cards --- */
.pg-body {
  flex: 1;
  overflow-y: auto;
  padding: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem;
  align-content: start;
}

/* Scrollbar */
.pg-body::-webkit-scrollbar {
  width: 8px;
}

.pg-body::-webkit-scrollbar-track {
  background: transparent;
}

.pg-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.pg-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pg-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  position: relative;
  min-height: 200px;
  justify-content: center;
}

.pg-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.pg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pg-card:hover::before {
  opacity: 1;
}

.pg-card-img-wrap {
  width: 140px;
  height: 140px;
  position: relative;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.3));
  z-index: 1;
}

.pg-card-lv-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
  z-index: 2;
}

.pg-card-info {
  text-align: center;
  z-index: 1;
}

.pg-card-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.pg-card-title {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  font-weight: 500;
}

.pg-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 10rem 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.2rem;
}

/* Detail Modal Styles (override for premium look) */
.pg-detail-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.pg-detail-emoji {
  font-size: 3rem;
}

.pg-detail-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

.pg-detail-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.pg-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.pg-detail-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.pg-detail-cell--active {
  background: #f5f3ff;
  border-color: var(--primary-light);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.1);
}

.pg-detail-lv-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  background: #e2e8f0;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
}

.pg-detail-lv-badge.active {
  background: var(--primary);
  color: #fff;
}

.pg-detail-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pg-detail-img:hover {
  transform: scale(1.1);
}

.pg-detail-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.pg-detail-feeds {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

@media (max-width: 768px) {
  .pg-header {
    padding: 1rem 1.5rem;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .pg-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .pg-search-input {
    width: 120px;
  }

  .pg-slider-bar {
    padding: 1rem 1.5rem;
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
  }

  .pg-slider-wrap {
    width: 100%;
  }

  .pg-body {
    padding: 1.5rem;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ?? Classic Chinese Certificate Styles */
/* ?? Professional Re-designed Certificate (V3) */
/* ?? Professional Re-designed Certificate (V4) */
/* ?? Professional Re-designed Certificate (V5.1) */

.sc2-grouptags-row {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 .2rem;
}

.sc2-grouptags-row::-webkit-scrollbar {
  display: none;
}

.sc2-grouptags-row .sc2-grouptag {
  flex-shrink: 0;
  margin: 0 !important;
  max-width: 80px;
}

/* Audio Challenge V9 (Right-Aligned Boxed UI) */
.ac-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-modal-v9 {
  background: #ffffff;
  border-radius: 36px;
  width: 98%;
  max-width: 1100px;
  height: 600px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
  animation: v9-slide 0.4s ease-out;
}

@keyframes v9-slide {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Left Side: Tree Container */
.ac-v9-tree-container {
  flex: 1;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-right: 1px solid #f1f5f9;
}

.ac-v9-tree-stage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ac-v9-svg {
  height: 90%;
  overflow: visible;
}

.ac-v9-growth-label {
  position: absolute;
  top: 25px;
  left: 25px;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 14px;
  font-weight: 800;
  color: #64748b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Right Side: Sidebar */
.ac-v9-control-sidebar {
  width: 380px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.ac-v9-sidebar-header {
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
}

.ac-v9-sidebar-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #1e293b;
}

.ac-v9-close-btn {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-v9-sidebar-body {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  overflow-y: auto;
}

/* Physical Input Boxes */
.ac-v9-input-box {
  background: #f8fafc;
  border-radius: 20px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-v9-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ac-v9-slider-row label {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
  width: 45px;
}

.ac-v9-slider-row input[type="range"] {
  flex: 1;
  height: 6px;
  accent-color: #3b82f6;
}

.ac-v9-val {
  font-size: 13px;
  font-weight: 900;
  width: 25px;
}

.ac-v9-val.blue {
  color: #3b82f6;
}

.ac-v9-val.orange {
  color: #f59e0b;
}

.ac-v9-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #475569;
}

.ac-v9-param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.ac-v9-num-input {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  width: 60px;
  height: 36px;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  color: #1e293b;
  transition: all 0.2s;
}

.ac-v9-num-input:focus {
  border-color: #3b82f6;
  outline: none;
}

.ac-v9-num-input.orange {
  border-color: #fed7aa;
  background: #fffcf9;
  color: #f59e0b;
}

/* Action Footer */
.ac-v9-action-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.ac-v9-timer-card {
  background: #1e293b;
  color: #ffffff;
  padding: 12px;
  border-radius: 16px;
  text-align: center;
  font-family: monospace;
  font-weight: 900;
  font-size: 1.8rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ac-v9-button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ac-v9-btn.physical {
  border: none;
  padding: 12px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.ac-v9-btn.physical.gray {
  background: #f1f5f9;
  color: #475569;
  border-bottom: 3px solid #cbd5e1;
}

.ac-v9-btn.physical.red {
  background: #fee2e2;
  color: #ef4444;
  border-bottom: 3px solid #fecaca;
}

.ac-v9-btn.physical:active {
  transform: translateY(3px);
  border-bottom-width: 0;
}

/* Switch V9 */
.ac-v9-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.ac-v9-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ac-v9-slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 22px;
}

.ac-v9-slider-round:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.ac-v9-switch input:checked+.ac-v9-slider-round {
  background-color: #3b82f6;
}

.ac-v9-switch input:checked+.ac-v9-slider-round:before {
  transform: translateX(18px);
}