@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --brand: #7cccf6;
  --brand-2: #ffb4c8;
  --brand-ink: rgba(34, 130, 195, 1);
  --bar-gradient: linear-gradient(90deg, rgba(124, 204, 246, 0.95), rgba(255, 180, 200, 0.92));
  --add-color: rgba(34, 130, 195, 1);
  --sub-color: rgba(255, 140, 171, 1);
  --good: #4fcfb0;
  --warn: #f6b85a;
  --bad: #ff7f86;
  --bg: #fbfcff;
  --topbar-h: 84px;
  --surface: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.86);
  --text: #111827;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --stroke: rgba(17, 24, 39, 0.08);
  --stroke-tint: rgba(124, 204, 246, 0.22);
  --shadow-sm: 0 6px 18px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 12px 32px rgba(17, 24, 39, 0.12);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
  background:
    radial-gradient(1200px 600px at 18% -18%, rgba(124, 204, 246, 0.10), transparent 58%),
    radial-gradient(900px 520px at 92% 8%, rgba(255, 180, 200, 0.10), transparent 58%),
    radial-gradient(700px 520px at 52% 110%, rgba(79, 207, 176, 0.08), transparent 55%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

button, input {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

input {
  border: none;
  outline: none;
  background: transparent;
}

.no-scroll {
  overflow: hidden;
}

.app-shell {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 18px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 14px 14px;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  isolation: isolate;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar.scrolled {
  background: rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(124, 204, 246, 0.16);
  backdrop-filter: blur(14px);
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-right {
  justify-content: flex-end;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topbar-right::-webkit-scrollbar {
  height: 0;
}

.topbar-right .pill-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 14px;
  font-size: 12px;
}

@media (max-width: 520px) {
  .topbar-right .pill-btn span {
    display: none;
  }

  .topbar-right .pill-btn {
    padding: 10px 10px;
  }
}

.user-badge {
  max-width: 140px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  color: rgba(17, 24, 39, 0.84);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 204, 246, 0.20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(17, 24, 39, 0.78);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 204, 246, 0.26);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
}

.icon-btn:active {
  transform: translateY(1px);
}

.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
}

.class-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.24), rgba(255, 180, 200, 0.22));
  border: 1px solid rgba(124, 204, 246, 0.26);
  color: rgba(17, 24, 39, 0.84);
  font-weight: 900;
  letter-spacing: 0.2px;
}

.class-switch.dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.class-switch.dropdown i {
  font-size: 12px;
  opacity: 0.85;
}

.class-switch.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: 74vw;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(17, 24, 39, 0.12);
  border: 1px solid rgba(17, 24, 39, 0.08);
  padding: 10px;
  z-index: 9999;
  flex-direction: column;
  gap: 8px;
  color: rgba(17, 24, 39, 0.9);
}

.class-switch.dropdown.active .dropdown-menu {
  display: flex;
}

.class-switch.dropdown .dropdown-search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.92);
  outline: none;
}

.class-switch.dropdown .dropdown-search input:focus {
  border-color: rgba(124, 204, 246, 0.65);
  box-shadow: 0 0 0 3px rgba(124, 204, 246, 0.20);
}

.class-switch.dropdown .class-item {
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  color: rgba(17, 24, 39, 0.86);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.class-switch.dropdown .class-item:hover {
  background: rgba(17, 24, 39, 0.05);
}

.class-switch.dropdown .class-item.active {
  background: rgba(124, 204, 246, 0.18);
}

.class-switch.dropdown .class-item.muted {
  opacity: 0.66;
  cursor: default;
}

.class-switch.dropdown .dropdown-actions button {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(24, 144, 255, 0.92);
  color: white;
  font-weight: 900;
  cursor: pointer;
}

.class-switch.dropdown .dropdown-actions button:active {
  transform: translateY(1px);
}

.subtitle-row {
  font-size: 12px;
  color: var(--muted);
  opacity: 1;
}

.top-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 204, 246, 0.22);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.top-menu::-webkit-scrollbar {
  height: 0;
}

.menu-item {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.menu-item.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

.menu-item i {
  font-size: 14px;
  line-height: 1;
}

.page {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.pager.hidden {
  display: none;
}

.pager-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(17, 24, 39, 0.76);
  font-weight: 900;
}

.pager-btn:disabled {
  opacity: 0.5;
}

.pager-info {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.56);
}

.dashboard-hero {
  height: calc(280px + var(--topbar-h));
  margin: calc(-14px - var(--topbar-h)) -14px 6px;
  border-radius: 0 0 22px 22px;
  position: relative;
  overflow: hidden;
}

.dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dashboard-hero-image, url('../images/back.jpg'));
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  filter: saturate(0.98) contrast(1.03);
  opacity: 1;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.quote-wall {
  border-radius: 22px;
  border: 1px solid rgba(124, 204, 246, 0.18);
  background:
    radial-gradient(circle at 18% 18%, rgba(124, 204, 246, 0.16), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 86% 22%, rgba(255, 180, 200, 0.16), rgba(255, 255, 255, 0) 58%),
    rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.quote-main {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.08;
  color: rgba(17, 24, 39, 0.92);
  font-family: "STXingkai", "STKaiti", "KaiTi", "KaiTi_GB2312", "FZShuTi", serif;
  letter-spacing: 1px;
  text-shadow: 0 18px 34px rgba(17, 24, 39, 0.10);
  word-break: break-word;
}

.quote-edit {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
  color: rgba(17, 24, 39, 0.78);
}

@media (max-width: 720px) {
  .quote-wall {
    flex-direction: column;
    align-items: stretch;
  }
  .quote-main {
    font-size: 34px;
  }
  .quote-edit {
    width: 100%;
    justify-content: center;
  }
}

.summary-card {
  background: var(--surface-2);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-md);
  padding: 12px 12px 10px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.summary-k {
  font-size: 12px;
  color: var(--muted);
}

.summary-v {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.positive {
  color: var(--add-color);
}

.negative {
  color: var(--sub-color);
}

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.log-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log-kinds {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-panel {
  margin-top: 10px;
  border-radius: 22px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.log-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.log-meta-title {
  font-weight: 1100;
  font-size: 16px;
  color: rgba(17, 24, 39, 0.90);
}

.log-meta-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.log-tag {
  height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(17, 24, 39, 0.70);
  background: rgba(17, 24, 39, 0.03);
  border: 1px solid rgba(17, 24, 39, 0.08);
  white-space: nowrap;
}

.log-delta {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 1100;
  font-size: 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.92);
}

.log-delta.good {
  color: rgba(34, 197, 94, 0.92);
  border-color: rgba(34, 197, 94, 0.20);
}

.log-delta.warn {
  color: rgba(239, 68, 68, 0.92);
  border-color: rgba(239, 68, 68, 0.20);
}

.log-delta.brand {
  color: rgba(17, 24, 39, 0.80);
}

@media (max-width: 720px) {
  .log-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .log-meta {
    flex-direction: column;
  }
}

.batchbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 28px);
  max-width: 430px;
  z-index: 46;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}

.batchbar.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

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

.batch-count {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
  white-space: nowrap;
}

.batch-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  user-select: none;
}

.batch-chip.active {
  background: rgba(255, 255, 255, 0.96);
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(124, 204, 246, 0.38);
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.06);
}

.batch-btn {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(17, 24, 39, 0.10);
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.80);
  user-select: none;
  white-space: nowrap;
}

.batch-btn:active {
  transform: translateY(1px);
}

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.modal-mask.active {
  opacity: 1;
  pointer-events: auto;
}

.evolve-video-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.0s ease, background 1.2s ease;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 0;
}

.evolve-video-mask.active {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.82);
}

.evolve-video-player {
  width: min(86vw, 420px);
  height: min(76vh, 780px);
  object-fit: contain;
  background: transparent;
}

.ui-mask .ui-modal {
  width: min(520px, calc(100vw - 36px));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.22);
  backdrop-filter: blur(18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
}

.ui-mask .ui-modal.show {
  animation: evolveModalIn 240ms cubic-bezier(.2,.9,.2,1) both;
}

.ui-modal-head {
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  background:
    linear-gradient(135deg, rgba(124, 204, 246, 0.18), rgba(255, 180, 200, 0.16)),
    rgba(255, 255, 255, 0.86);
}

.ui-modal-title {
  font-size: 16px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.90);
}

.ui-modal-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.ui-modal-msg {
  font-size: 13px;
  color: rgba(17, 24, 39, 0.74);
  white-space: pre-wrap;
}

.ui-modal-fields {
  display: grid;
  gap: 10px;
}

.ui-field {
  display: grid;
  gap: 6px;
}

.ui-field label {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.78);
}

.ui-field input,
.ui-field select {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.92);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.ui-modal-actions {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.points-modal {
  width: min(920px, calc(100vw - 36px));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.20);
  backdrop-filter: blur(18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.points-modal-head {
  padding: 16px 16px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  background:
    linear-gradient(135deg, rgba(124, 204, 246, 0.22), rgba(255, 180, 200, 0.20)),
    rgba(255, 255, 255, 0.86);
}

.points-modal-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.points-main {
  font-size: 18px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.90);
}

.points-sub {
  font-size: 12px;
  color: var(--muted);
}

.points-tabs {
  display: inline-flex;
  gap: 10px;
  padding: 14px 16px 6px;
}

.points-tab {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(17, 24, 39, 0.10);
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
}

.points-tab.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

.points-grid {
  padding: 10px 16px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.rule-card {
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.rule-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(124, 204, 246, 0.16);
  border: 1px solid rgba(124, 204, 246, 0.18);
}

.rule-name {
  font-weight: 900;
  font-size: 13px;
  color: rgba(17, 24, 39, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

@media (max-width: 560px) {
  .points-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .points-custom-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .rule-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
  }
}

.rule-delta {
  font-weight: 900;
  font-size: 13px;
  color: rgba(34, 130, 195, 0.90);
  min-width: 54px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.06);
}

.points-custom-row {
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.rule-card.custom .rule-icon {
  background: rgba(255, 180, 200, 0.18);
  border-color: rgba(255, 180, 200, 0.20);
}

.rule-card.add-custom {
  background: rgba(255, 255, 255, 0.72);
  border-style: dashed;
}

.rule-card.add-custom .rule-icon {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.10);
}

.mini-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 78;
  display: grid;
  place-items: center;
  padding: 18px;
}

.mini-mask.active {
  opacity: 1;
  pointer-events: auto;
}

.mini-panel {
  width: min(560px, calc(100vw - 36px));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.mini-head {
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.mini-title {
  font-weight: 900;
  font-size: 16px;
  color: rgba(17, 24, 39, 0.90);
}

.mini-body {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.mini-section {
  display: grid;
  gap: 10px;
}

.mini-k {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.70);
}

.mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mini-chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(17, 24, 39, 0.10);
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
}

.mini-chip.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

@media (max-width: 720px) {
  .points-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .points-custom-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--stroke-tint);
  border-radius: 999px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.search i {
  color: rgba(34, 130, 195, 0.76);
}

.search input {
  width: 100%;
  font-size: 14px;
}

.search-clear {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background: rgba(124, 204, 246, 0.16);
  border: 1px solid rgba(124, 204, 246, 0.18);
}

.search-clear.active {
  display: grid;
}

.toolbar-actions {
  display: flex;
  gap: 10px;
}

.toolbar-actions .pill-btn {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 12px;
}

.pill-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--stroke-tint);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 13px;
}

.pill-btn i {
  color: rgba(34, 130, 195, 0.84);
}

.pill-btn:active {
  transform: translateY(1px);
}

.pill-btn.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

.pill-btn.danger {
  border-color: rgba(255, 180, 200, 0.42);
  color: rgba(255, 140, 171, 1);
}

.pill-btn.danger i {
  color: rgba(255, 140, 171, 1);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.segmented-btn {
  padding: 10px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke-tint);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.segmented-btn.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

.students {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-bottom: 10px;
}

.petcard {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.10);
  padding: 14px;
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.petcard.dead {
  filter: grayscale(1) saturate(0) contrast(0.95);
}

.petcard.dead .petcard-media {
  animation: none;
}

/* 强制图片变黑白，防止被其他滤镜覆盖 */
.petcard.dead .petcard-media-inner img {
  filter: grayscale(1) !important;
}

.petcard.hungry:not(.dead) {
  border-color: rgba(255, 107, 107, 0.4);
  box-shadow: 0 18px 44px rgba(255, 107, 107, 0.15);
}

.petcard.hungry:not(.dead) .petcard-media {
  animation: hungryFloat 1.9s ease-in-out infinite;
}

@keyframes hungryFloat {
  0% { transform: translateY(0) rotate(0) scale(1); }
  25% { transform: translateY(-8px) rotate(-3deg) scale(0.98); }
  50% { transform: translateY(2px) rotate(3deg) scale(1.02); }
  75% { transform: translateY(-4px) rotate(-2deg) scale(0.98); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

.petcard.hungry:not(.dead) .petcard-media-inner {
  box-shadow:
    0 18px 40px rgba(17, 24, 39, 0.10),
    0 0 0 4px rgba(255, 71, 87, 0.3) inset,
    0 0 24px rgba(255, 71, 87, 0.25);
}

.petcard-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 24, 39, 0.10);
}

.petcard-hungry-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  font-weight: 900;
  font-size: 20px;
  color: #ff4757;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  animation: hungryOverlayPulse 1.4s ease-in-out infinite;
  border-radius: inherit;
  gap: 4px;
}

.petcard-hungry-overlay span {
  font-size: 28px;
  animation: hungryEmojiFloat 2s ease-in-out infinite;
}

@keyframes hungryOverlayPulse {
  0% { background: rgba(255, 255, 255, 0.5); }
  50% { background: rgba(255, 235, 235, 0.7); box-shadow: inset 0 0 20px rgba(255, 71, 87, 0.15); }
  100% { background: rgba(255, 255, 255, 0.5); }
}

@keyframes hungryEmojiFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

.petcard-rip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  font-weight: 1000;
  letter-spacing: 2px;
  font-size: 32px;
  color: rgba(17, 24, 39, 0.78);
  text-shadow:
    0 10px 22px rgba(17, 24, 39, 0.16),
    0 0 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.petcard.selected {
  border-color: rgba(34, 130, 195, 0.28);
  box-shadow: 0 18px 44px rgba(34, 130, 195, 0.16);
}

.petcard-media {
  animation: petmediaFloat 3.4s ease-in-out infinite;
  will-change: transform;
}

.petcard:nth-child(3n + 1) .petcard-media { animation-duration: 3.9s; animation-delay: -0.7s; }
.petcard:nth-child(3n + 2) .petcard-media { animation-duration: 3.2s; animation-delay: -1.4s; }
.petcard:nth-child(3n + 3) .petcard-media { animation-duration: 4.3s; animation-delay: -2.0s; }

.petcard.selected .petcard-media {
  animation: none;
}

@keyframes petmediaFloat {
  0% { transform: translateY(0); }
  45% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .petcard-media { animation: none; }
  .petcard.hungry:not(.dead) .petcard-media { animation: none; }
  .petcard-hungry-overlay { animation: none; }
  .petcard-hungry-overlay span { animation: none; }
}

.petcard-select {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.90);
  display: grid;
  place-items: center;
  z-index: 2;
}

.petcard-select.hidden {
  display: none;
}

.petcard-check {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.14);
}

.petcard.selected .petcard-check {
  background: var(--bar-gradient);
}

.petcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-left: 0;
}

.petcard.batch-on .petcard-header {
  padding-left: 30px;
}

.petcard-header-left {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.petcard-name {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.2px;
  color: rgba(17, 24, 39, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.petcard-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.petcard-level {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 204, 246, 0.22), rgba(255, 180, 200, 0.20));
  border: 1px solid rgba(124, 204, 246, 0.30);
  color: var(--brand-ink);
  font-weight: 900;
  font-size: 12px;
}

.petcard-media {
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.04);
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.06);
}

.petcard-media-inner {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.10);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  position: relative;
}

.pet-egg-img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(17, 24, 39, 0.12));
}

.petcard-media.evolve-shake {
  animation: evolveShake 180ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes evolveShake {
  0% { transform: translateY(0); }
  10% { transform: translateY(-24px); }
  20% { transform: translateY(24px); }
  30% { transform: translateY(-18px); }
  40% { transform: translateY(18px); }
  50% { transform: translateY(-14px); }
  60% { transform: translateY(14px); }
  70% { transform: translateY(-10px); }
  80% { transform: translateY(10px); }
  90% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.petcard.final-card {
  background:
    url('../images/card.png');
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 28px 72px rgba(17, 24, 39, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.34) inset,
    0 0 0 1px rgba(124, 204, 246, 0.22);
}

.petcard.final-card::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.70) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-28%) rotate(10deg);
  animation: finalCardShine 2.6s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.92;
  mix-blend-mode: overlay;
}

 .petcard.final-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.86) 0 1.8px, rgba(255, 255, 255, 0) 6px),
    radial-gradient(circle at 28% 62%, rgba(255, 211, 96, 0.78) 0 2.2px, rgba(255, 211, 96, 0) 7px),
    radial-gradient(circle at 46% 28%, rgba(255, 255, 255, 0.82) 0 1.6px, rgba(255, 255, 255, 0) 6px),
    radial-gradient(circle at 66% 46%, rgba(124, 204, 246, 0.62) 0 2.2px, rgba(124, 204, 246, 0) 7px),
    radial-gradient(circle at 84% 26%, rgba(255, 180, 200, 0.62) 0 2.2px, rgba(255, 180, 200, 0) 7px),
    radial-gradient(circle at 78% 78%, rgba(255, 255, 255, 0.84) 0 1.8px, rgba(255, 255, 255, 0) 6px);
  opacity: 0.58;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: finalSparkle 1.6s ease-in-out infinite alternate;
}

@keyframes finalCardShine {
  0% { transform: translateX(-28%) rotate(10deg); }
  55% { transform: translateX(28%) rotate(10deg); }
  100% { transform: translateX(28%) rotate(10deg); }
}

@keyframes finalSparkle {
  0% { opacity: 0.34; filter: blur(0.2px); }
  100% { opacity: 0.68; filter: blur(0.6px); }
}
.petcard-media-inner img {
  --zoom: 1.10;
  --zoom-pop: 1.22;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  box-shadow:
    0 0 0 2px rgba(17, 24, 39, 0.12),
    0 16px 16px rgba(17, 24, 39, 0.10);
  position: relative;
  z-index: 2;
  transform: scale(var(--zoom));
}

.petcard-media-inner img.evolve-img-pop {
  animation: evolveImgPop 520ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes evolveImgPop {
  0% { transform: scale(var(--zoom)); }
  42% { transform: scale(var(--zoom-pop)); }
  100% { transform: scale(var(--zoom)); }
}

.petcard.fx-paper .petcard-media-inner {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 248, 250, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -14px 30px rgba(17, 24, 39, 0.06),
    0 18px 40px rgba(17, 24, 39, 0.10);
}

.petcard.fx-paper .petcard-media-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(17, 24, 39, 0.016) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
  opacity: 0.40;
  pointer-events: none;
  z-index: 0;
}

.petcard.fx-paper .petcard-media-inner::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  width: 58%;
  height: 12%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(17, 24, 39, 0.22), rgba(17, 24, 39, 0) 70%);
  filter: blur(1px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.petcard.fx-paper .petcard-media-inner img {
  filter:
    drop-shadow(0 16px 18px rgba(17, 24, 39, 0.10))
    drop-shadow(0 6px 8px rgba(17, 24, 39, 0.08));
}

.petcard.fx-stage .petcard-media-inner {
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 204, 246, 0.22), rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 68% 36%, rgba(255, 180, 200, 0.18), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -12px 26px rgba(17, 24, 39, 0.06),
    0 18px 40px rgba(17, 24, 39, 0.10);
}

.petcard.fx-stage .petcard-media-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0) 58%, rgba(17, 24, 39, 0.08) 100%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.petcard.fx-stage .petcard-media-inner::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  width: 62%;
  height: 14%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(17, 24, 39, 0.18), rgba(17, 24, 39, 0) 72%);
  filter: blur(1px);
  opacity: 0.50;
  pointer-events: none;
  z-index: 1;
}

.petcard.fx-stage .petcard-media-inner img {
  filter:
    drop-shadow(0 18px 18px rgba(17, 24, 39, 0.12))
    saturate(1.06)
    contrast(1.03);
}

.pet-egg {
  width: 104px;
  height: 146px;
  border-radius: 46% 46% 54% 54% / 58% 58% 82% 82%;
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(circle at 52% 82%, rgba(124, 204, 246, 0.16), rgba(255, 180, 200, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 232, 222, 0.92));
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -18px 22px rgba(17, 24, 39, 0.05),
    0 14px 22px rgba(17, 24, 39, 0.10);
  position: relative;
  isolation: isolate;
  transform: translateY(-2px) rotate(-6deg);
}

.pet-egg::before {
  content: '';
  position: absolute;
  left: 22%;
  top: 16%;
  width: 22%;
  height: 36%;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 68%);
  opacity: 0.8;
  filter: blur(0.2px);
}

.pet-egg::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 82%;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(17, 24, 39, 0.26), rgba(17, 24, 39, 0) 68%);
  filter: blur(2px);
  opacity: 0.42;
  z-index: -1;
}

.petcard-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.petcard-info-left {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.petcard-pet {
  font-weight: 900;
  font-size: 14px;
  color: rgba(17, 24, 39, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.petcard-stage {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.petcard-status {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.petcard-status.hungry {
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 71, 87, 0.28);
  color: #ff4757;
}

.petcard-action {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(124, 204, 246, 0.34);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.92), rgba(255, 180, 200, 0.88));
  font-weight: 900;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 18px rgba(17, 24, 39, 0.10);
}

.petcard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 2px;
}

.stat {
  display: grid;
  gap: 6px;
}

.stat-k {
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
}

.stat-v {
  font-size: 14px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.86);
}

.petcard-progress {
  display: grid;
  gap: 10px;
}

.petcard .bar-fill.brand {
  background: var(--bar-gradient);
}

.petcard-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.petcard.hungry:not(.dead) .petcard-note {
  color: #ff4757;
  font-weight: 900;
}

.adopt-tabs {
  display: flex;
  gap: 10px;
  padding: 14px 16px 6px;
}

.adopt-modal {
  width: min(980px, calc(100vw - 36px));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.20);
  backdrop-filter: blur(18px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 36px);
}

.adopt-grid {
  padding: 10px 16px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  overflow: visible;
}

.adopt-modal .points-modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
}

.adopt-card {
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  padding: 14px;
  display: grid;
  gap: 12px;
  text-align: left;
  align-content: start;
}

.adopt-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  place-items: center;
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .adopt-img {
    height: 190px;
  }
}

.adopt-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.10);
}

.adopt-name {
  font-weight: 900;
  font-size: 14px;
  color: rgba(17, 24, 39, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adopt-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adopt-desc {
  font-size: 12px;
  color: rgba(17, 24, 39, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.petcard.evolve-card {
  border-color: rgba(34, 130, 195, 0.32);
  box-shadow: 0 22px 54px rgba(34, 130, 195, 0.18);
}

.petcard.evolve-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(260px 180px at 20% 12%, rgba(124, 204, 246, 0.55), rgba(124, 204, 246, 0) 60%),
    radial-gradient(240px 180px at 86% 18%, rgba(255, 180, 200, 0.45), rgba(255, 180, 200, 0) 60%),
    radial-gradient(240px 200px at 50% 86%, rgba(79, 207, 176, 0.26), rgba(79, 207, 176, 0) 64%);
  animation: evolveGlow 900ms ease both;
}

.petcard.evolve-final {
  border-color: rgba(255, 138, 0, 0.26);
  box-shadow: 0 26px 66px rgba(255, 138, 0, 0.14);
}

.petcard.evolve-final::after {
  background:
    radial-gradient(280px 200px at 20% 14%, rgba(255, 183, 77, 0.55), rgba(255, 183, 77, 0) 60%),
    radial-gradient(260px 200px at 86% 20%, rgba(255, 180, 200, 0.52), rgba(255, 180, 200, 0) 60%),
    radial-gradient(280px 240px at 50% 88%, rgba(124, 204, 246, 0.36), rgba(124, 204, 246, 0) 66%);
}

.petcard-media-inner.evolve-pop {
  animation: evolvePop 760ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes evolvePop {
  0% { transform: scale(1); }
  24% { transform: scale(1.03); }
  48% { transform: scale(0.995); }
  72% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes evolveGlow {
  0% { opacity: 0; filter: blur(8px); }
  25% { opacity: 0.55; filter: blur(3px); }
  70% { opacity: 0.22; filter: blur(2px); }
  100% { opacity: 0; filter: blur(10px); }
}

.evolve-modal {
  width: min(760px, calc(100vw - 36px));
  max-height: 86vh;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 22px 70px rgba(17, 24, 39, 0.24);
  backdrop-filter: blur(18px);
  overflow: hidden;
  position: relative;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  display: flex;
  flex-direction: column;
}

.evolve-modal.show {
  animation: evolveModalIn 420ms cubic-bezier(.2,.9,.2,1) both;
}

.evolve-burst {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(255, 183, 77, 0.18) 60%, rgba(255, 183, 77, 0) 72%),
    radial-gradient(circle at 50% 50%, rgba(255, 180, 200, 0.12), rgba(255, 180, 200, 0) 60%),
    radial-gradient(circle at 28% 34%, rgba(124, 204, 246, 0.18), rgba(124, 204, 246, 0) 56%),
    radial-gradient(circle at 74% 32%, rgba(79, 207, 176, 0.12), rgba(79, 207, 176, 0) 58%);
  opacity: 0;
  filter: blur(0px);
  pointer-events: none;
  transform: scale(0.9);
}

.evolve-modal.show .evolve-burst {
  animation: evolveBurst 1100ms ease both;
}

.modal-mask.final .evolve-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2.2px, rgba(255, 255, 255, 0) 6px),
    radial-gradient(circle, rgba(255, 211, 96, 0.86) 0 2.8px, rgba(255, 211, 96, 0) 7px),
    radial-gradient(circle, rgba(124, 204, 246, 0.54) 0 2.2px, rgba(124, 204, 246, 0) 7px);
  background-size: 120px 120px, 170px 170px, 220px 220px;
  background-position: 0 0, 36px 62px, 84px 18px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(255, 211, 96, 0.18));
  transform-origin: 50% 50%;
  transform: translateY(10px) scale(0.70) rotate(-6deg);
  will-change: transform, opacity;
}

.modal-mask.final .evolve-modal.show::after {
  opacity: 1;
  animation: finalStarsThrow 3200ms cubic-bezier(.12,.92,.18,1) both;
}

.modal-mask.final .evolve-burst {
  opacity: 1;
}

.modal-mask.final .evolve-burst::before,
.modal-mask.final .evolve-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2.2px, rgba(255, 255, 255, 0) 6px),
    radial-gradient(circle, rgba(255, 211, 96, 0.92) 0 2.8px, rgba(255, 211, 96, 0) 7px);
  background-size: 130px 130px, 180px 180px;
  background-position: 18px 26px, 70px 48px;
  opacity: 0;
  animation: finalStarsThrowLite 3200ms cubic-bezier(.12,.92,.18,1) both;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(255, 211, 96, 0.24));
  will-change: transform, opacity;
}

.modal-mask.final .evolve-burst::after {
  filter: blur(0.4px);
  opacity: 0;
  animation: finalStarsThrowLite 3200ms cubic-bezier(.12,.92,.18,1) both;
  animation-delay: 140ms;
}

.modal-mask.final .evolve-modal.show .evolve-burst::before,
.modal-mask.final .evolve-modal.show .evolve-burst::after {
  opacity: 1;
}

.evolve-head {
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 183, 77, 0.22), rgba(255, 180, 200, 0.20)),
    rgba(255, 255, 255, 0.86);
}

.evolve-head-left {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.evolve-title {
  font-size: 18px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.90);
}

.evolve-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.evolve-body {
  padding: 16px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evolve-hero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  gap: 12px;
}

.evolve-hero-frame {
  --evolve-size: clamp(260px, 58vh, 640px);
  --evolve-zoom: 1.08;
  width: min(var(--evolve-size), 92%);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.04);
  padding: 4px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  overflow: hidden;
}

.evolve-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    0 0 0 2px rgba(255, 183, 77, 0.20),
    0 22px 42px rgba(17, 24, 39, 0.12);
  animation: evolveHero 900ms cubic-bezier(.2,.9,.2,1) both;
  transform: scale(var(--evolve-zoom));
}

.evolve-hero-meta {
  text-align: center;
  display: grid;
  gap: 4px;
  align-content: start;
}

.evolve-pet {
  font-size: 16px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.90);
}

.evolve-student {
  font-size: 14px;
  color: rgba(17, 24, 39, 0.66);
  font-weight: 900;
}

.modal-mask.final .evolve-student {
  font-size: 26px;
  letter-spacing: 0.2px;
  color: rgba(17, 24, 39, 0.92);
}

.modal-mask.final .evolve-title {
  color: rgba(17, 24, 39, 0.94);
}

.modal-mask.final .evolve-head {
  background:
    linear-gradient(135deg, rgba(124, 204, 246, 0.22), rgba(255, 180, 200, 0.22)),
    rgba(255, 255, 255, 0.88);
}

.evolve-body .primary-btn {
  width: 100%;
}

.summary-modal {
  width: calc(100vw - 18px);
  height: calc(100vh - 18px);
  max-height: calc(100vh - 18px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 22px 70px rgba(17, 24, 39, 0.24);
  backdrop-filter: blur(18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.summary-body {
  padding: 14px 16px 10px;
  display: grid;
  gap: 12px;
  overflow: auto;
}

.summary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.summary-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.summary-range .pill-btn.active {
  border-color: rgba(124, 204, 246, 0.38);
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.06);
}

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.summary-metric {
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.summary-metric-k {
  font-weight: 1000;
  font-size: 12px;
  color: var(--muted);
}

.summary-metric-v {
  font-weight: 1000;
  font-size: 22px;
  color: rgba(17, 24, 39, 0.88);
}

.summary-metric-v.good {
  color: rgba(34, 197, 94, 0.92);
}

.summary-metric-v.warn {
  color: rgba(239, 68, 68, 0.92);
}

.summary-block {
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.summary-block-title {
  font-weight: 1000;
  font-size: 13px;
  color: rgba(17, 24, 39, 0.78);
}

.summary-list {
  display: grid;
  gap: 8px;
}

.summary-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.summary-hero-card {
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.10);
  display: grid;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.summary-hero-card.place-1 {
  background: linear-gradient(135deg, rgba(255, 211, 96, 0.22), rgba(255, 255, 255, 0.92));
}

.summary-hero-card.place-2 {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.20), rgba(255, 255, 255, 0.92));
}

.summary-hero-card.place-3 {
  background: linear-gradient(135deg, rgba(255, 180, 200, 0.20), rgba(255, 255, 255, 0.92));
}

.summary-hero-rank {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(17, 24, 39, 0.88);
}

.summary-hero-name {
  font-weight: 1100;
  font-size: 32px;
  color: rgba(17, 24, 39, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-hero-sub {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.54);
}

.summary-hero-value {
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-weight: 1100;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.92), rgba(255, 180, 200, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 18px 28px rgba(17, 24, 39, 0.12);
  justify-self: start;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.03);
  border: 1px solid rgba(17, 24, 39, 0.06);
}

.summary-rank {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: rgba(17, 24, 39, 0.88);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(124, 204, 246, 0.18);
  flex: 0 0 auto;
}

.summary-avatar {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 18px;
  color: rgba(17, 24, 39, 0.86);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.30), rgba(255, 180, 200, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 14px 24px rgba(17, 24, 39, 0.08);
  flex: 0 0 auto;
  overflow: hidden;
}

.summary-avatar.big {
  width: 84px;
  height: 84px;
  border-radius: 26px;
}

.summary-avatar.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.summary-item-left {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
}

.summary-item-name {
  font-weight: 1000;
  font-size: 22px;
  color: rgba(17, 24, 39, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-item-name.small {
  font-size: 18px;
}

.summary-item-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-item-value {
  flex: 0 0 auto;
  min-width: 84px;
  height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-weight: 1000;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.92), rgba(255, 180, 200, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 12px 18px rgba(17, 24, 39, 0.10);
}

@media (max-width: 720px) {
  .summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .summary-hero-grid {
    grid-template-columns: 1fr;
  }
  .summary-hero-name {
    font-size: 26px;
  }
}

.summary-actions {
  padding: 0 16px 16px;
}

.summary-actions .primary-btn {
  width: 100%;
}

.onboarding-modal {
  width: min(900px, calc(100vw - 18px));
  max-height: calc(100vh - 18px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 22px 70px rgba(17, 24, 39, 0.24);
  backdrop-filter: blur(18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.onboarding-body {
  padding: 14px 16px 12px;
  display: grid;
  gap: 12px;
  overflow: auto;
}

.onboarding-plain {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.onboarding-plain-title {
  font-weight: 1100;
  font-size: 20px;
  color: rgba(17, 24, 39, 0.92);
}

.onboarding-plain-desc {
  color: rgba(17, 24, 39, 0.74);
  font-size: 14px;
  line-height: 1.6;
}

.onboarding-plain-tip {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  padding-top: 6px;
  border-top: 1px dashed rgba(17, 24, 39, 0.10);
}

.onboarding-step {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.onboarding-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.onboarding-step-no {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: rgba(17, 24, 39, 0.88);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(124, 204, 246, 0.18);
}

.onboarding-step-title {
  flex: 1 1 auto;
  font-weight: 1100;
  font-size: 18px;
  color: rgba(17, 24, 39, 0.92);
}

.onboarding-step-tag {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(17, 24, 39, 0.03);
  color: rgba(17, 24, 39, 0.70);
  font-weight: 1000;
  font-size: 12px;
}

.onboarding-step-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-actions {
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.onboarding-actions .ghost-btn,
.onboarding-actions .primary-btn {
  width: 100%;
}

@media (max-width: 720px) {
  .onboarding-actions {
    grid-template-columns: 1fr;
  }
}

.raffle-modal {
  width: min(720px, calc(100vw - 18px));
  max-height: calc(100vh - 18px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: 0 22px 70px rgba(17, 24, 39, 0.24);
  backdrop-filter: blur(18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.raffle-body {
  padding: 18px 16px 14px;
  display: grid;
  gap: 10px;
  text-align: center;
}

.raffle-name {
  font-weight: 1200;
  font-size: 64px;
  line-height: 1.05;
  color: rgba(17, 24, 39, 0.92);
  letter-spacing: 1px;
  font-family: "STXingkai", "STKaiti", "KaiTi", "KaiTi_GB2312", serif;
}

.raffle-sub {
  color: var(--muted);
  font-size: 13px;
}

.raffle-actions {
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.raffle-actions .ghost-btn,
.raffle-actions .primary-btn {
  width: 100%;
}

@media (max-width: 720px) {
  .raffle-name {
    font-size: 44px;
  }
  .raffle-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .evolve-modal {
    width: min(900px, calc(100vw - 44px));
  }
  .evolve-hero-frame {
    --evolve-size: clamp(360px, 64vh, 760px);
    --evolve-zoom: 1.10;
  }
}

@keyframes evolveModalIn {
  0% { opacity: 0; transform: translateY(14px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes evolveBurst {
  0% { opacity: 0; transform: scale(0.86); filter: blur(0px); }
  22% { opacity: 0.65; transform: scale(1); filter: blur(0px); }
  70% { opacity: 0.22; transform: scale(1.06); filter: blur(1px); }
  100% { opacity: 0; transform: scale(1.12); filter: blur(3px); }
}

@keyframes finalStars {
  0% { opacity: 0; transform: translateY(18px) scale(0.92); }
  30% { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-46px) scale(1.06); }
}

@keyframes finalStarsThrow {
  0% { opacity: 0; transform: translateY(14px) scale(0.64) rotate(-10deg); }
  14% { opacity: 1; transform: translateY(0) scale(0.90) rotate(-4deg); }
  54% { opacity: 1; transform: translateY(-22px) scale(1.18) rotate(6deg); }
  78% { opacity: 0.9; transform: translateY(-42px) scale(1.30) rotate(10deg); }
  100% { opacity: 0; transform: translateY(-70px) scale(1.38) rotate(14deg); }
}

@keyframes finalStarsThrowLite {
  0% { opacity: 0; transform: translateY(10px) scale(0.72); }
  18% { opacity: 1; transform: translateY(-4px) scale(0.96); }
  62% { opacity: 0.9; transform: translateY(-26px) scale(1.14); }
  100% { opacity: 0; transform: translateY(-58px) scale(1.26); }
}

@keyframes evolveHero {
  0% { transform: scale(0.92); opacity: 0; }
  35% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

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

.student-card {
  text-align: left;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  overflow: visible;
}

.student-card:active {
  transform: translateY(1px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  padding-left: calc(46% - 22px);
}

.pet-float {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 46%;
  max-width: 128px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pet-float::before {
  content: '';
  position: absolute;
  inset: 14% 20% 22% 14%;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(124, 204, 246, 0.14) 35%, transparent 70%);
  filter: blur(2px);
}

.pet-float::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 24%;
  bottom: 12%;
  height: 18%;
  border-radius: 999px;
  background:
    radial-gradient(80% 120% at 50% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.0) 72%),
    linear-gradient(135deg, rgba(124, 204, 246, 0.20), rgba(255, 180, 200, 0.18));
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.10);
  filter: blur(0.1px);
}

.pet-float img {
  width: 120%;
  height: 120%;
  object-fit: contain;
  transform: translate(-8%, -6%);
  filter: drop-shadow(0 12px 16px rgba(17, 24, 39, 0.16));
}

.who-row {
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: center;
  min-height: 56px;
  padding-left: 4px;
}

.badge {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.86);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
}

.chip {
  font-size: 11px;
  font-weight: 800;
  color: rgba(17, 24, 39, 0.68);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 204, 246, 0.14);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(17, 24, 39, 0.08);
  display: grid;
  place-items: center;
}

.avatar img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.who {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  grid-column: 2;
}

.name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-status {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.mini {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.mini-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.07);
  overflow: hidden;
}

.mini-fill {
  height: 100%;
  border-radius: 999px;
}

.mini-fill.brand {
  background: var(--bar-gradient);
}

.mini-fill.good {
  background: var(--bar-gradient);
}

.mini-fill.warn {
  background: var(--bar-gradient);
}

.card-bottom {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
}

.card-ctas {
  display: flex;
  gap: 8px;
}

.cta {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 204, 246, 0.20);
  background: rgba(255, 255, 255, 0.6);
}

.cta-add {
  color: var(--add-color);
}

.cta-sub {
  color: var(--sub-color);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  background: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(124, 204, 246, 0.20);
  backdrop-filter: blur(14px);
}

.bottom-nav.four {
  grid-template-columns: repeat(4, 1fr);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  border-radius: 14px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  height: 56px;
}

.nav-item i {
  font-size: 18px;
  line-height: 1;
}

.nav-item.active {
  color: var(--brand-ink);
}

.nav-center {
  position: relative;
  justify-self: center;
}

.nav-item.nav-center {
  padding: 0;
  height: 56px;
  flex-direction: row;
  align-items: flex-end;
}

.fab {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.92), rgba(255, 180, 200, 0.92));
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.24);
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%) translateY(-28px);
}

.fab i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.fab i::before,
.fab i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 999px;
}

.fab i::before {
  width: 26px;
  height: 4px;
}

.fab i::after {
  width: 4px;
  height: 26px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 60;
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(17, 24, 39, 0.10);
  box-shadow: var(--shadow-md);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.sheet.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  background:
    linear-gradient(135deg, rgba(124, 204, 246, 0.22), rgba(255, 180, 200, 0.20)),
    rgba(255, 255, 255, 0.86);
  color: var(--text);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.sheet-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sheet-title-main {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.sheet-title-sub {
  font-size: 12px;
  opacity: 0.92;
}

.sheet-body {
  padding: 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-hero {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.pet-avatar {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  overflow: hidden;
  background: radial-gradient(80px 80px at 35% 25%, rgba(124, 204, 246, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.64);
}

.pet-avatar img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 14px 18px rgba(17, 24, 39, 0.16));
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.metric {
  padding: 10px 10px 8px;
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.04);
}

.metric-k {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.metric-v {
  font-size: 14px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-grid {
  display: grid;
  gap: 10px;
}

.status-card {
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.status-single {
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
  margin-bottom: 10px;
}

.status-val {
  color: rgba(17, 24, 39, 0.6);
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.07);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
}

.bar-fill.brand {
  background: var(--bar-gradient);
}

.bar-fill.good {
  background: var(--bar-gradient);
}

.bar-fill.warn {
  background: var(--bar-gradient);
}

.sheet-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.primary-btn, .danger-btn, .ghost-btn {
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  padding: 0 16px;
}

.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.96), rgba(255, 180, 200, 0.94));
  border-color: rgba(255, 255, 255, 0.18);
}

.danger-btn {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 127, 134, 0.96), rgba(255, 196, 120, 0.90));
  border-color: rgba(255, 255, 255, 0.18);
}

.ghost-btn {
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.76);
}

.list-card {
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.list-card-title {
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}

.log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.log-row:first-of-type {
  border-top: none;
}

.log-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.log-name {
  font-weight: 900;
  font-size: 13px;
}

.log-meta {
  font-size: 12px;
  color: var(--muted);
}

.log-right {
  font-weight: 900;
}

.points-amount {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-items: center;
}

.step-btn {
  height: 44px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.06);
  border: 1px solid rgba(17, 24, 39, 0.10);
  font-weight: 900;
}

.amount-input {
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(17, 24, 39, 0.12);
  display: grid;
  place-items: center;
}

.amount-input input {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
}

.preview-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.84);
  padding: 12px;
}

.preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 900;
  font-size: 13px;
}

.preview-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.quick-btn {
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.q-name {
  font-size: 13px;
  font-weight: 900;
}

.q-delta {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.66);
}

.quick-btn.add .q-delta {
  color: var(--good);
}

.quick-btn.sub .q-delta {
  color: var(--bad);
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 13px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
}

.field input {
  height: 44px;
  border-radius: 14px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(17, 24, 39, 0.12);
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  bottom: 92px;
  max-width: calc(430px - 28px);
  width: calc(100% - 28px);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 90;
}

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

.toast.good {
  background: rgba(79, 207, 176, 0.92);
}

.toast.warn {
  background: rgba(246, 184, 90, 0.92);
}

.toast.brand {
  background: rgba(124, 204, 246, 0.92);
}

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

.store-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.store-create {
  margin: 10px 0 12px;
}

.store-create-btn {
  width: 100%;
  height: 52px;
  font-size: 15px;
}

.store-tab {
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--stroke-tint);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.store-tab.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

.store-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.72);
  margin-bottom: 8px;
}

.field input, .field select, .field textarea {
  width: 100%;
  height: 40px;
  border-radius: 14px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.88);
  font-weight: 800;
}

.field textarea {
  height: 120px;
  padding: 10px 12px;
  resize: vertical;
}

.form-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.class-manage .form-actions .pill-btn {
  flex: 0 0 auto;
  min-width: 110px;
}

.class-manage .form-actions .pill-btn span {
  white-space: nowrap;
}

.admin-tabs {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 204, 246, 0.22);
  box-shadow: var(--shadow-sm);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-tabs::-webkit-scrollbar {
  height: 0;
}

.admin-tab {
  flex: 0 0 auto;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--stroke-tint);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  padding: 0 14px;
}

.admin-tab.active {
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  color: rgba(17, 24, 39, 0.86);
  border-color: rgba(17, 24, 39, 0.10);
}

.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.settings-card {
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.90);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.settings-card.danger {
  border-color: rgba(255, 180, 200, 0.34);
}

.settings-card-title {
  font-weight: 900;
  font-size: 15px;
  color: rgba(17, 24, 39, 0.90);
}

.settings-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.settings-sub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 4px;
}

.settings-sub-title {
  font-weight: 900;
  font-size: 16px;
  color: rgba(17, 24, 39, 0.90);
}

@media (max-width: 720px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.panel-title {
  font-size: 16px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.90);
}

.panel-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

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

#panelDanger .form-actions {
  justify-content: stretch;
}

#panelDanger .danger-btn {
  width: 100%;
}

#settingsSubPet #panelRules .form-actions,
#settingsSubPet #panelGrowth .form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.threshold-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.threshold-item {
  display: grid;
  gap: 8px;
}

.threshold-k {
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.70);
}

.threshold-input {
  width: 100%;
  height: 40px;
  border-radius: 14px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.88);
  font-weight: 900;
}

.rule-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: stretch;
}

.rule-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 360px;
}

.rule-col-title {
  font-size: 13px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.80);
}

.rule-list {
  display: grid;
  gap: 10px;
  flex: 1;
  align-content: start;
}

.rule-list .blank-state {
  min-height: 120px;
}

.rule-row {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
  padding: 10px;
  display: grid;
  grid-template-columns: 44px 1fr 84px 44px;
  gap: 10px;
  align-items: center;
}

.rule-emoji, .rule-label, .rule-delta {
  height: 38px;
  border-radius: 14px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.90);
  font-weight: 900;
}

.rule-row .mini-btn {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 12px;
  width: 40px;
  height: 38px;
  display: grid;
  place-items: center;
}

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

.class-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.assign-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.assign-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.assign-card.active {
  border-color: rgba(34, 130, 195, 0.40);
  box-shadow: 0 14px 30px rgba(34, 130, 195, 0.14);
}

.assign-title {
  font-weight: 900;
  font-size: 14px;
  color: rgba(17, 24, 39, 0.90);
}

.assign-desc {
  font-size: 12px;
  color: var(--muted);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.subcard {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.subcard-title {
  font-weight: 900;
  font-size: 14px;
  color: rgba(17, 24, 39, 0.90);
}

#settingsSubClass .panel-title {
  font-size: 18px;
}

#settingsSubClass .subcard-title {
  font-size: 16px;
}

#settingsSubPet .rule-col > .pill-btn {
  margin-top: auto;
}

.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.file-btn input {
  display: none;
}

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

  .rule-two {
    grid-template-columns: 1fr;
  }

  .assign-grid {
    grid-template-columns: 1fr;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .rule-row {
    grid-template-columns: 52px 1fr 80px 44px;
  }
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.tool-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tool-card.danger {
  border-color: rgba(255, 180, 200, 0.42);
}

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

.tool-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.22), rgba(255, 180, 200, 0.20));
  border: 1px solid rgba(124, 204, 246, 0.20);
  color: var(--brand-ink);
  flex: 0 0 auto;
}

.tool-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool-title {
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-desc {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-right {
  color: rgba(34, 130, 195, 0.76);
  flex: 0 0 auto;
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 320px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(124, 204, 246, 0.42);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  padding: 24px;
  gap: 10px;
  text-align: center;
}

.empty-title {
  font-weight: 900;
  font-size: 16px;
  color: rgba(17, 24, 39, 0.88);
}

.empty-desc {
  font-size: 12px;
  color: var(--muted);
}

.blank-state {
  grid-column: 1 / -1;
  min-height: 220px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(124, 204, 246, 0.34);
  background: rgba(255, 255, 255, 0.58);
  display: grid;
  place-items: center;
  color: rgba(17, 24, 39, 0.54);
  font-weight: 900;
  font-size: 13px;
}

.blank-state::before {
  content: '暂无内容';
}

.product-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(124, 204, 246, 0.10), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 84% 22%, rgba(255, 180, 200, 0.10), rgba(255, 255, 255, 0) 58%),
    rgba(255, 255, 255, 0.90);
  border: 1px solid var(--stroke-tint);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-height: 240px;
}

.product-emoji {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 204, 246, 0.18);
  box-shadow: 0 14px 24px rgba(17, 24, 39, 0.10);
  transform: rotate(-8deg);
  user-select: none;
  pointer-events: none;
}

.product-card.muted .product-emoji {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.product-card .primary-btn,
.product-card .ghost-btn {
  width: 100%;
  height: 46px;
  border-radius: 16px;
  font-size: 14px;
}

.product-card.muted {
  opacity: 0.78;
}

.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 72px;
  min-height: 56px;
}

.product-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 204, 246, 0.12);
  border: 1px solid rgba(124, 204, 246, 0.16);
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.72);
}

.product-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.74);
  font-size: 14px;
}

.product-name {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.product-desc {
  color: var(--muted);
  font-size: 13px;
  min-height: 34px;
  flex: 1 1 auto;
}

.list {
  display: grid;
  gap: 12px;
}

.row-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.row-card.warn {
  border-color: rgba(255, 180, 200, 0.42);
}

.row-card.active {
  border-color: rgba(124, 204, 246, 0.44);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.16), rgba(255, 180, 200, 0.14));
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row-title {
  font-weight: 900;
  font-size: 14px;
}

.row-sub {
  font-size: 12px;
  color: var(--muted);
}

.row-actions {
  display: flex;
  gap: 10px;
}

.mute-toggle {
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: rgba(255, 255, 255, 0.86);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
  user-select: none;
  flex: 0 0 auto;
}

.mute-toggle input {
  width: 16px;
  height: 16px;
}

.mini-btn {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 204, 246, 0.22);
  color: var(--brand-ink);
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
}

.podium-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  position: relative;
}

.podium-card.first {
  padding-top: 16px;
}

.podium-medal {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.22), rgba(255, 180, 200, 0.20));
  border: 1px solid rgba(124, 204, 246, 0.20);
}

.podium-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 204, 246, 0.20);
}

.podium-avatar img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.podium-name {
  font-weight: 900;
  font-size: 13px;
}

.podium-meta {
  font-size: 11px;
  color: var(--muted);
}

.podium-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.76);
}

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

.rank-row {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rank-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rank-avatar {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 204, 246, 0.20);
  flex: 0 0 auto;
  overflow: hidden;
}

.rank-avatar img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.rank-group-avatar {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: rgba(17, 24, 39, 0.86);
  background: linear-gradient(135deg, rgba(124, 204, 246, 0.34), rgba(255, 180, 200, 0.30));
  border: 1px solid rgba(255, 255, 255, 0.52);
}

.rank-no {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.72);
  background: rgba(124, 204, 246, 0.12);
  border: 1px solid rgba(124, 204, 246, 0.16);
  flex: 0 0 auto;
}

.rank-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rank-name {
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.rank-value {
  font-weight: 900;
  font-size: 16px;
  color: rgba(17, 24, 39, 0.82);
}

.rank-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
}

.rank-trend.up {
  color: rgba(34, 130, 195, 0.92);
}

.rank-trend.down {
  color: rgba(255, 140, 171, 0.92);
}

@media (max-width: 360px) {
  .summary-strip {
    grid-template-columns: 1fr;
  }
  .segmented {
    grid-template-columns: repeat(2, 1fr);
  }
  .students {
    grid-template-columns: 1fr;
  }
  .hero-metrics {
    grid-template-columns: 1fr;
  }
  .grid-list {
    grid-template-columns: 1fr;
  }
  .podium {
    grid-template-columns: 1fr;
  }
}

.auth-shell {
  padding-bottom: 0;
}

.auth-page {
  flex: 1;
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

.auth-hero {
  height: 280px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(124, 204, 246, 0.22);
  box-shadow: var(--shadow-sm);
}

.auth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dashboard-hero-image, url('../images/background.png'));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.05);
  opacity: 0.95;
}

.auth-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.62));
  pointer-events: none;
}

.auth-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--stroke-tint);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  display: grid;
  gap: 14px;
}

.auth-brand {
  display: grid;
  gap: 6px;
  text-align: center;
  padding: 2px 0;
}

.auth-title {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.auth-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.auth-admin-link {
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 900;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auth-check input {
  width: 16px;
  height: 16px;
}

.auth-link {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.auth-link a {
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 900;
}

@media (min-width: 900px) {
  .app-shell {
    max-width: 1040px;
    padding-bottom: 22px;
  }

  .auth-shell {
    max-width: 460px;
  }

  .page {
    padding: 22px;
    gap: 16px;
  }

  .topbar {
    padding: 18px 22px 14px;
  }

  .students {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .grid-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .tool-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .summary-strip {
    gap: 14px;
    margin-top: 0;
  }

  .toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .search {
    flex: 1;
    padding: 12px 16px;
  }

  .toolbar-actions {
    flex: 0 0 auto;
  }

  .pill-btn {
    flex: 0 0 auto;
    min-width: 140px;
  }

  .bottom-nav {
    bottom: 16px;
    width: calc(100% - 44px);
    max-width: 1040px;
    border-radius: 22px;
    border: 1px solid rgba(124, 204, 246, 0.22);
  }

  .nav-item {
    height: 58px;
  }

  .fab {
    transform: translateX(-50%) translateY(-32px);
  }

  .batchbar {
    max-width: 1040px;
    width: calc(100% - 44px);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1200px) {
  .app-shell {
    max-width: 1400px;
  }

  .students {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .bottom-nav {
    max-width: 1300px;
  }

  .batchbar {
    max-width: 1300px;
  }

  .petcard-name {
    font-size: 20px;
  }

  .petcard-media-inner img {
    --zoom: 1.16;
    --zoom-pop: 1.32;
  }
}