/* pet-hall.css — auto-extracted from index.html
   Category: pet-hall
   Blocks: 154
*/

#pet-hall { display: none; }

#pet-hall.active { display: block; }

.pet-hall-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

.pet-hall-filters { background: #fff; border-bottom: 1px solid var(--border); padding: 8px 20px; margin-bottom: 16px; }

.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px; }

.filter-section { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.filter-label { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; white-space: nowrap; }

.sort-btns, .view-btns { display: flex; gap: 2px; }

.sort-btn, .view-btn { padding: 5px 10px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s var(--ease-out); white-space: nowrap; flex-shrink: 0; }

.sort-btn:hover, .view-btn:hover { background: rgba(255,255,255,0.9); border-color: var(--brand-200); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

.sort-btn.active, .view-btn.active { background: linear-gradient(135deg, var(--brand-400), var(--brand-500)); color: #FFFFFF; border-color: transparent; box-shadow: 0 2px 10px rgba(79, 70, 229,0.3), 0 0 16px rgba(79, 70, 229,0.1); }

.sort-btn.active:hover { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #FFFFFF; }

.filter-divider { width: 1px; height: 20px; background: var(--border); }

.search-btn { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: white; cursor: pointer; font-size: 14px; color: var(--text-secondary); }

#search-input { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; outline: none; width: 120px; }

#search-input:focus { border-color: var(--brand-400); }

.filter-checkbox { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }

.filter-checkbox input { width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }

/* 宠物大厅工具栏 toggle 按钮组（多选/全选/按小组/仅男/仅女），参照 banchong.cn 的按钮态切换 */
.tool-toggle { padding: 5px 12px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s var(--ease-out); white-space: nowrap; flex-shrink: 0; }
.tool-toggle:hover { background: rgba(255,255,255,0.85); border-color: var(--brand-200); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.tool-toggle.active { background: linear-gradient(135deg, var(--brand-400), var(--brand-500)); color: #FFFFFF; border-color: transparent; box-shadow: 0 2px 10px rgba(79, 70, 229,0.3), 0 0 16px rgba(79, 70, 229,0.1); }

.select-checkbox { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 10; }

.select-checkbox:hover { border-color: var(--brand-400); }

.select-checkbox.checked { background: var(--brand-400); border-color: var(--brand-400); }

.select-checkbox.checked::after { content: '✓'; color: #111827; font-size: 12px; font-weight: bold; }

.student-card.selectable { position: relative; }

.student-card.selected { border: 2px solid var(--brand-400) !important; box-shadow: 0 0 0 4px var(--brand-100); }

.students-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 20px; }

/* ========== 按小组查看模式（1:1 复刻 banchong.cn /hall）========== */
.students-container.group-view {
  display: flex;
  flex-direction: column;
  gap: 48px;                         /* 参考站 space-y-12 */
}

.group-section, .group-container { width: 100%; }

/* 组头部 */
.gc-header {
  padding: 16px 8px;                 /* py-4 px-2 */
  position: relative;
}
.gc-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;                /* mb-2 */
}
.gc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;                         /* gap-3 */
  min-width: 0;
}
.gc-group-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;                       /* w-8 */
  height: 32px;
  border-radius: 8px;                /* rounded-lg */
  background-color: rgb(239, 68, 68);
  color: #111827;
  font-size: 16px;                   /* text-base */
  font-weight: 900;                  /* font-black */
  font-style: italic;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.gc-group-index.ungrouped { background: none; color: #d1d5db; font-size: 10px; width: auto; }
.gc-header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;                          /* gap-1 (mobile) */
  min-width: 0;
}
.gc-group-name {
  font-weight: 900;                  /* font-black */
  font-size: 20px;                   /* text-2xl (桌面) */
  letter-spacing: -0.02em;           /* tracking-tight */
  line-height: 1;                    /* leading-none */
  color: rgb(239, 68, 68);
}
.gc-group-name.ungrouped { color: #6b7280; font-weight: 700; }
.gc-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;                         /* gap-x-3 */
  color: #9ca3af;
}
.gc-meta-item { display: flex; align-items: center; gap: 4px; line-height: 1.2; }
.gc-meta-icon { width: 14px; height: 14px; flex-shrink: 0; }
.gc-meta-num { font-size: 13px; font-weight: 900; color: #6b7280; }
.gc-meta-label {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.1em; color: #9ca3af;
}
.gc-energy { color: rgb(34, 197, 94); }
.gc-energy .gc-meta-num { color: rgb(34, 197, 94); }

/* 全选按钮（红底淡描边红字，仿参考站） */
.gc-select-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 12px;               /* rounded-xl */
  font-size: 11px;
  font-weight: 800;
  background-color: rgba(239, 68, 68, 0.063);
  border: 1px solid rgba(239, 68, 68, 0.19);
  color: rgb(239, 68, 68);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: all 0.2s;
}
.gc-select-all:hover { background: #fff; }
.gc-select-all.selected { background: rgba(239, 68, 68, 0.15); }
.gc-select-all svg { width: 14px; height: 14px; }

/* 组底部分隔线 */
.gc-divider {
  height: 2px;
  border-radius: 999px;
  opacity: 0.2;
  background-color: rgb(239, 68, 68);
  margin: 0 8px;
}

/* 整组加减分按钮（分组视图头部） */
.gc-score-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gc-score-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  line-height: 1;
}
.gc-score-btn.gc-add {
  background-color: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: rgb(22, 163, 74);
}
.gc-score-btn.gc-add:hover { background-color: rgba(34, 197, 94, 0.22); }
.gc-score-btn.gc-sub {
  background-color: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.32);
  color: rgb(220, 38, 38);
}
.gc-score-btn.gc-sub:hover { background-color: rgba(239, 68, 68, 0.20); }

/* 整组加减分快捷按钮（+1/+5/-1/-5） */
.gc-score-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.gc-quick {
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.gc-quick-add {
  background-color: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
  color: rgb(22, 163, 74);
}
.gc-quick-add:hover { background-color: rgba(34, 197, 94, 0.22); }
.gc-quick-sub {
  background-color: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.28);
  color: rgb(220, 38, 38);
}
.gc-quick-sub:hover { background-color: rgba(239, 68, 68, 0.18); }

/* 学生卡上的小组序号标签（普通视图 + 分组视图通用，颜色由 JS 内联注入组色） */
.gc-group-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.3px;
  white-space: nowrap;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}
/* 卡片变大时标签同步放大（中卡 / 大卡） */
.student-card.view-medium .gc-group-tag { font-size: 12px; padding: 3px 12px; top: 10px; right: 10px; }
.student-card.view-large .gc-group-tag { font-size: 14px; padding: 5px 16px; top: 13px; right: 13px; }
/* 批量选择模式下右上角有勾选框，组名标签让位到左侧，避免叠放 */
.student-card.selectable .gc-group-tag { right: 38px; }

/* LV 数字金色渐变（普通视图三档共用，替代 base.css 的黑色 #111827）
   注意：inline-block + padding-right 补偿 background-clip:text 对斜体尾字形的裁剪（否则数字右边被截断） */
.student-card .level-badge .level-num {
  display: inline-block;
  padding-right: 3px;
  padding-left: 1px;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 卡片网格（仿参考站 auto-fill minmax(100px)） */
.group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;                         /* gap-3 */
  padding-top: 8px;                  /* pt-2 */
}

/* ====== 小组视图卡片（1:1 复刻 banchong.cn PetCard）====== */
.student-card.group-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;                       /* 由 grid 控制宽度 */
  padding: 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: 18px;               /* rounded-2xl */
  border: 1px solid rgba(255,255,255,0.65);   /* glass border */
  box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.02), 0 0 0 1px rgba(255,255,255,0.5) inset;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.5s;
  z-index: 1;
}
.student-card.group-card:hover {
  transform: translateY(-8px);       /* -translate-y-2 */
  box-shadow: var(--glow-brand), 0 30px 60px rgba(0,0,0,0.12), 0 10px 20px rgba(0,0,0,0.05);
  border-color: rgba(98,180,165,0.35);
}
.student-card.group-card.gc-selected {
  border-color: rgb(239, 68, 68);
  box-shadow: 0 0 20px rgba(239,68,68,0.15), 0 8px 30px rgba(0,0,0,0.08);
}

/* 右上角序号小圆标（仿参考站） */
.gc-index-badge {
  position: absolute;
  top: 6px;                          /* top-1.5 */
  right: 6px;                        /* right-1.5 */
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;                      /* h-5 */
  min-width: 20px;
  padding: 0 6px;                    /* px-1.5 */
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,0.8);
  background: rgba(255,255,255,0.9);
  color: #4B5563;
  font-weight: 900;
  font-size: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  pointer-events: none;
}

/* 宠物图片区：正方形、占满卡宽、底部分隔线（仿参考站 3 层结构） */
.gc-pet-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;               /* aspect-square */
  border-bottom: 1px solid rgba(241,245,249,0.5);
  overflow: hidden;
}
/* 第1层：彩色径向渐变背景（绝对铺满） */
.gc-pet-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* 第2层：极淡 SVG 纹理叠加（mix-blend-multiply，仿参考站同款） */
.gc-pet-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* 第3层：宠物图片（contain 完整显示，上下对称留白 ≥ 浮动动画幅度 5px，头部/脚部浮动均不出界，底部渐变同样可见） */
.gc-pet-area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 7px 2px 7px;             /* 上下对称缓冲：上 7px 防上浮露头，下 7px 让底部渐变完整露出来 */
  z-index: 2;
  display: block;
}
.gc-pet-area .gc-emoji { font-size: 48px; line-height: 1; position: relative; z-index: 2; }
/* 浮动动画只作用在图片上，幅度 -5px 锁在区内 */
.gc-pet-area.pet-float img,
.gc-pet-area.pet-float .gc-emoji { animation: petFloatGroup 3s ease-in-out infinite; will-change: transform; }

/* 信息区：名字+LV 同行、底部进度条 */
.gc-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(to bottom, #F9FAFB, rgba(243,244,246,0.3));
  padding: 8px;                      /* p-2 */
  justify-content: space-between;
}
.gc-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;                   /* mt-1 */
}
.gc-name {
  font-weight: 700;                  /* font-bold */
  font-size: 14px;                   /* text-sm */
  color: #111827;                    /* text-slate-800 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 6px;                 /* mr-1.5 */
}
.gc-name.unadopted {
  color: rgba(239, 68, 68, 0.8);
  font-weight: 700;
  text-align: center;
}

.gc-pet-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 2px;
}

.gc-pet-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.gc-pet-race {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
}

/* 性别图标（小组视图） */
.gc-gender-icon {
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 2px;
}
.gc-gender-male { color: #2563eb; }     /* ♂ 蓝 */
.gc-gender-female { color: #ec4899; }   /* ♀ 粉 */

/* LV 等级徽章（蓝紫渐变小标，仿参考站 brand 渐变） */
.gc-lv-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;                    /* px-1 */
  height: 14px;                      /* h-[14px] */
  border-radius: 3px;                /* rounded-[3px] */
  background: linear-gradient(to right, #4f8cff, #7aa9f5);  /* from-brand-500 to-brand-400 */
  box-shadow: 0 1px 2px rgba(79,140,255,0.25);
}
.gc-lv-badge .lv-text {
  font-style: italic;
  font-weight: 700;
  font-size: 8px;                    /* text-[8px] */
  letter-spacing: 0.08em;
  color: #111827;
  line-height: 1;
}
.gc-lv-badge .lv-num {
  font-style: italic;
  font-weight: 900;
  font-size: 10px;                   /* text-[10px] */
  display: inline-block;
  padding-right: 3px;
  padding-left: 1px;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

/* 进度条：全宽底部、绿渐变（仿参考站 energy 渐变） */
.gc-progress {
  width: 100%;
  height: 6px;                       /* h-1.5 */
  background: #e5e7eb;               /* slate-200 */
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;                   /* mt-1 */
}
.gc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, #34d399, #16a34a);  /* energy-400 → energy-600 */
  transition: width 0.7s ease-out;
}

/* 未领养（蛋）卡片 */
.student-card.group-card.gc-card-egg {
  border-color: rgb(203, 213, 225);  /* slate-300 */
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.student-card.group-card.gc-card-egg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.gc-pet-area-egg {
  background: linear-gradient(to bottom, #f9fafb, #f3f4f6);  /* slate-50 → slate-100 */
}
.gc-pet-area-egg img { width: 70%; height: 70%; }
.gc-pet-area-egg .gc-emoji { font-size: 44px; }
.gc-info-egg {
  background: #fff;
  justify-content: center;
  align-items: center;
}

.student-card { background: #fff; border: 2px solid rgba(255,255,255,0.6); border-radius: var(--radius-2xl); padding: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.02); cursor: pointer; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1); position: relative; z-index: 1; }

.student-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.14), 0 10px 20px rgba(0,0,0,0.05); }

.student-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }

.pet-avatar { width: 60px; height: 60px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-300) 100%); display: flex; align-items: center; justify-content: center; font-size: 28px; }

.pet-avatar.egg { background: var(--bg-subtle); }

/* 宠物悬浮动效 */
.pet-avatar.pet-float { animation: petFloat 3s ease-in-out infinite; }
@keyframes petFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 宠物图片不再统一放大：不同宠物 PNG 的透明边距差异很大，统一 scale(1.28) 会导致构图满的宠物撑破卡片；交给 object-fit:contain 自然适应 */
.student-card .pet-avatar:not(.egg) img {
  transform: none;
  transform-origin: center center;
  /* 未去底 PNG（带 AI 水印/纯色方块）在浅色图区里会有方块硬边。
     用径向蒙版把图片四周羽化到透明，柔化方块边与图区背景的衔接，消除"截断白条/色带"。 */
  -webkit-mask-image: radial-gradient(ellipse 92% 96% at center 52%, #000 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 96% at center 52%, #000 82%, transparent 100%);
}
/* 最终形态（究极体）：盒子按视图贴满 pet-area（100%，特异性高于 .view-* .pet-avatar 的 88%/85%/82%），img 同普通宠物 scale(1.28) 放大 → 视觉比普通大且不裁主体（只裁透明留白） */
.student-card.view-large .pet-avatar.stage-ultimate { width: 100%; max-width: 320px; flex-shrink: 0; }
.student-card.view-medium .pet-avatar.stage-ultimate { width: 100%; max-width: 200px; flex-shrink: 0; }
.student-card.view-small .pet-avatar.stage-ultimate { width: 100%; max-width: 140px; flex-shrink: 0; }
.student-card .pet-avatar:not(.egg) img.stage-ultimate {
  transform: scale(1.28);
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* 小组视图宠物浮动：幅度更小（-5px），配合图片 88% 留白，完全锁在图片区内不外溢 */
@keyframes petFloatGroup { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.student-info { flex: 1; }

.student-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }

/* 性别图标（主视图卡片） */
.gender-icon {
  font-size: 13px;
  margin-left: 3px;
  font-weight: 700;
}
.gender-male { color: #2563eb; }     /* ♂ 蓝 */
.gender-female { color: #ec4899; }   /* ♀ 粉 */

/* 学号徽章：姓名旁淡灰小胶囊，写了学号才渲染 */
.student-sid-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.student-card.view-medium .student-sid-badge { font-size: 10px; line-height: 14px; padding: 0 5px; margin-left: 4px; }
.student-card.view-small .student-sid-badge { font-size: 9px; line-height: 12px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; }

.student-pet { font-size: 12px; color: var(--text-muted); }

.student-stats { display: flex; gap: 15px; }

.stat-item { text-align: center; flex: 1; }

.stat-value { font-size: 18px; font-weight: 600; color: var(--brand-500); }

.stat-label { font-size: 12px; color: var(--text-muted); }

/* ===== 卡片底部信息栏（参考站风格：一行左右对齐）===== */
.card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 6px;
}

/* 学生卡片勋章展示条（读取可见性过滤，仅显示已开启的勋章） */
.card-medal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #E2E5EA);
}
.card-medal-chip {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    background: var(--bg-subtle, #F1F3F7);
    border-radius: 8px;
}

/* 宠物大厅卡片勋章条：显示在宠物图区左上角，从左到右横排（QQ 秀红钻/黄钻效果，无白色胶囊框） */
.card-medal-strip {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* small 视图：勋章条更紧凑，避免遮挡宠物 */
.view-small .card-medal-strip {
    gap: 2px;
}
.view-small .card-medal-strip .card-medal-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
}

/* 分组视图卡片勋章条 */
.gc-medal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
}
.gc-medal-chip {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    background: var(--bg-subtle, #F1F3F7);
    border-radius: 6px;
}

.bottom-energy {
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 2px;
}

.energy-need-num {
    font-size: 16px;
    font-weight: 700;
    color: #10b981;
    margin: 0 2px;
}

.bottom-coins {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.coins-show {
    font-size: 17px;
    font-weight: 700;
    color: #f59e0b;
}

/* 金币图标：CSS 绘制，明确呈现"金币"质感（替代 🪙 emoji） */
.coin-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
    border: 1.5px solid #d97706;
    box-shadow: inset 0 0 0 1.5px rgba(254, 243, 199, 0.65);
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
}

.coin-icon::after {
    content: '¥';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #b45309;
    line-height: 1;
}

.adopt-btn { width: 100%; margin-top: 15px; padding: 10px; background: var(--brand-50); color: var(--brand-600); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.2s var(--ease-out); }

.adopt-btn:hover { background: var(--brand-100); }

.adopt-pet-btn-large { margin-top: 16px; padding: 12px 36px; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); color: #FFFFFF; border: none; border-radius: 24px; cursor: pointer; font-size: 15px; font-weight: 600; box-shadow: 0 4px 16px rgba(79, 70, 229,0.35), 0 0 24px rgba(79, 70, 229,0.1); transition: all 0.3s var(--ease-out); }

.adopt-pet-btn-large:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 28px rgba(79, 70, 229,0.45), 0 0 36px rgba(79, 70, 229,0.15); }

.students-container.view-large { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; }

.students-container.view-medium { grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 16px; }

.students-container.view-small { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.students-container.view-auto { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 18px; }

.student-card.view-large { display: flex; flex-direction: column; padding: 0; align-items: stretch; border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.02); background: #fff; border-radius: var(--radius-2xl); overflow: hidden; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.student-card.view-large:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.14), 0 10px 20px rgba(0,0,0,0.05); }

.student-card.view-large .pet-area { flex: none; background: transparent; padding: 14px 16px 10px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; aspect-ratio: 1 / 1.12; border-bottom: 1px solid rgba(15,23,42,0.05);
}

.student-card.view-large .pet-avatar { width: 92%; max-width: 300px; aspect-ratio: 1; height: auto; font-size: 150px; border-radius: 0; background: transparent; object-fit: contain; }

.student-card.view-large .student-info-area { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(to bottom, #F9FAFB, rgba(243,244,246,0.3)); }

.student-card.view-large .name-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.student-card.view-large .student-info { text-align: left; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }

.student-card.view-large .student-name { font-size: 16px; font-weight: 500; color: #111827; margin: 0; }

.student-card.view-large .student-pet { font-size: 12px; color: var(--text-muted); margin-top: -4px; }

.student-card.view-large .pet-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }

.student-card.view-large .pet-name { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.2; }

.student-card.view-large .pet-race { padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.4; }

.student-card.view-large .level-badge { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%); color: #FFFFFF; border-radius: 5px; font-weight: 600; box-shadow: 0 2px 6px rgba(79, 70, 229,0.3); flex-shrink: 0; }

.student-card.view-large .level-badge .lv-text { font-size: 10px; font-weight: 700; font-style: italic; letter-spacing: 0.5px; line-height: 1; }

.student-card.view-large .level-badge .level-num { font-size: 13px; font-weight: 800; font-style: italic; line-height: 1; }

.student-card.view-large .progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }

.student-card.view-large .progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e 0%, #84cc16 100%); border-radius: 3px; transition: width 0.3s ease; min-width: 2px; }

.student-card.view-large .progress-text { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.student-card.view-large .student-stats { display: flex; justify-content: space-between; width: 100%; gap: 10px; padding-top: 12px; margin-top: auto; }

.student-card.view-large .stat-item { display: flex; align-items: center; gap: 4px; }

.student-card.view-large .stat-value { font-size: 14px; font-weight: 700; color: #374151; }

.student-card.view-large .stat-label { font-size: 11px; color: var(--text-muted); }

.student-card.view-large .adopt-btn { display: none; }

.add-student-card { border: 2px dashed var(--border); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s var(--ease-out); background: white; }

.add-student-card:hover { border-color: var(--brand-400); background: var(--brand-50); }

.add-student-card.view-large { padding: 28px 22px; min-height: 430px; }

.add-student-card.view-large .add-icon { width: 54px; height: 54px; border: 2px dashed var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--text-muted); margin-bottom: 14px; transition: all 0.2s var(--ease-out); }

.add-student-card.view-large:hover .add-icon { border-color: var(--brand-400); color: var(--brand-500); }

.add-student-card.view-large .add-text { font-size: 15px; color: var(--text-secondary); margin-bottom: 5px; font-weight: 500; }

.add-student-card.view-large .add-count { font-size: 12px; color: var(--text-muted); }

.add-student-card.view-medium { padding: 0; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--border); min-height: 280px; }

.add-student-card.view-medium .add-icon-small { width: 60px; height: 60px; border: 2px dashed var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--text-muted); margin-bottom: 14px; background: transparent; transition: all 0.2s var(--ease-out); }

.add-student-card.view-medium:hover .add-icon-small { border-color: var(--brand-400); color: var(--brand-500); }

.add-student-card.view-medium .add-text-small { font-size: 15px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }

.add-student-card.view-small { padding: 0; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--border); min-height: 160px; }

.add-student-card.view-small .add-icon-small { width: 48px; height: 48px; border: 2px dashed var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--text-muted); margin-bottom: 12px; background: transparent; transition: all 0.2s var(--ease-out); }

.add-student-card.view-small:hover .add-icon-small { border-color: var(--brand-400); color: var(--brand-500); }

.add-student-card.view-small .add-text-small { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }

.student-card.view-medium { display: flex; flex-direction: column; padding: 0; align-items: stretch; border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.02); background: #fff; border-radius: var(--radius-2xl); overflow: hidden; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1); }

.student-card.view-medium:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.14), 0 10px 20px rgba(0,0,0,0.05); }

.student-card.view-medium .pet-area { flex: none; background: transparent; padding: 12px 14px 8px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; aspect-ratio: 1 / 1.12; border-bottom: 1px solid rgba(15,23,42,0.05); }

.student-card.view-medium .pet-avatar { width: 92%; max-width: 200px; aspect-ratio: 1; height: auto; max-height: none; font-size: 85px; border-radius: 0; background: transparent; object-fit: contain; }

.student-card.view-medium .student-info-area { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; background: linear-gradient(to bottom, #F9FAFB, rgba(243,244,246,0.3)); }

.student-card.view-medium .name-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.student-card.view-medium .student-name { font-size: 17px; font-weight: 500; color: #111827; line-height: 1.2; }

.student-card.view-medium .pet-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }

.student-card.view-medium .pet-name { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.2; }

.student-card.view-medium .pet-race { padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.4; }

.student-card.view-medium .level-badge { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 8px; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%); color: #FFFFFF; border-radius: 5px; font-weight: 600; box-shadow: 0 2px 6px rgba(79, 70, 229,0.3); flex-shrink: 0; }

.student-card.view-medium .level-badge .lv-text { font-size: 10px; font-weight: 700; font-style: italic; letter-spacing: 0.5px; line-height: 1; }

.student-card.view-medium .level-badge .level-num { font-size: 13px; font-weight: 800; font-style: italic; line-height: 1; }

.student-card.view-medium .progress-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }

.student-card.view-medium .progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e 0%, #a3e635 100%); border-radius: 3px; transition: width 0.3s ease; min-width: 2px; }

.student-card.view-medium .progress-text { font-size: 11px; color: #9ca3af; margin-top: 3px; }

.student-card.view-medium .student-stats { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; margin-top: auto; }

.student-card.view-medium .stat-item { display: flex; align-items: center; gap: 4px; }

.student-card.view-medium .stat-value { font-size: 15px; font-weight: 700; color: #374151; }

.student-card.view-medium .stat-label { font-size: 11px; color: #9ca3af; }

.student-card.view-medium .adopt-btn { display: none; }

.student-card.view-medium .adopt-pet-btn-medium { margin-top: auto; padding: 7px 20px; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); color: #FFFFFF; border: none; border-radius: 18px; cursor: pointer; font-size: 12px; font-weight: 500; box-shadow: 0 2px 8px rgba(79, 70, 229,0.3); transition: all 0.2s; align-self: center; }

.student-card.view-medium .adopt-pet-btn-medium:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(79, 70, 229,0.4); }

.student-card.view-small { display: flex; flex-direction: column; padding: 0; align-items: stretch; border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.02); background: #fff; border-radius: var(--radius-2xl); overflow: hidden; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1); }

.student-card.view-small .pet-area { flex: none; background: transparent; padding: 10px 12px 6px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; aspect-ratio: 1 / 1.12; border-bottom: 1px solid rgba(15,23,42,0.05); }

.student-card.view-small .pet-avatar { width: 92%; max-width: 120px; aspect-ratio: 1; height: auto; max-height: none; font-size: 55px; border-radius: 0; background: transparent; object-fit: contain; }

.student-card.view-small .student-info-area { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; justify-content: center; background: linear-gradient(to bottom, #F9FAFB, rgba(243,244,246,0.3)); }

.student-card.view-small .name-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }

.student-card.view-small .student-name { font-size: 14px; font-weight: 600; color: #111827; line-height: 1.2; }

.student-card.view-small .pet-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 2px; }

.student-card.view-small .pet-name { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.2; }

.student-card.view-small .pet-race { padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; line-height: 1.4; }

.student-card.view-small .level-badge { display: inline-flex; align-items: center; gap: 1px; height: 18px; padding: 0 6px; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%); color: #FFFFFF; border-radius: 4px; font-weight: 600; flex-shrink: 0; }

.student-card.view-small .level-badge .lv-text { font-size: 9px; font-weight: 700; font-style: italic; letter-spacing: 0.5px; line-height: 1; }

.student-card.view-small .level-badge .level-num { font-size: 12px; font-weight: 800; font-style: italic; line-height: 1; }

.student-card.view-small .progress-bar { height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }

.student-card.view-small .progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e 0%, #a3e635 100%); border-radius: 3px; transition: width 0.3s ease; min-width: 2px; }

.student-card.view-small .adopt-btn { display: none; }

.student-card.view-small .adopt-pet-btn-small { margin-top: auto; padding: 6px 18px; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 100%); color: #FFFFFF; border: none; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; box-shadow: 0 2px 6px rgba(79, 70, 229,0.25); transition: all 0.2s; align-self: center; }

.empty-state { text-align: center; padding: 60px 20px; }

.empty-icon { font-size: 60px; color: #ddd; margin-bottom: 20px; }

.empty-title { font-size: 20px; color: #666; margin-bottom: 10px; }

.student-card {
            display: flex; align-items: center; gap: 16px;
            padding: 20px 24px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid #f3f4f6;
            cursor: pointer;
            transition: all 0.15s;
            width: 100%;
            text-align: left;
            font-family: inherit;
        }

/* 修复：view-large/medium/small 为 flex-column + gap 继承 16px，pet-area 与 info-area 之间
   露出一条卡片背景缝（有小组色的学生显示为淡蓝横条——用户截图的"截断条条"）。卡片纵排不需要 gap。 */
.student-card.view-large,
.student-card.view-medium,
.student-card.view-small,
.student-card.view-auto { gap: 0; }

.student-card:hover {
            border-color: var(--brand-300);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
        }

.student-card .student-avatar {
            width: 64px; height: 64px;
            border-radius: 20px;
            background: #f9fafb;
            display: flex; align-items: center; justify-content: center;
            font-size: 36px;
            flex-shrink: 0;
            overflow: hidden;
        }

.student-card .student-info { flex: 1; }

.student-card .student-name {
            font-size: 18px; font-weight: 900; color: #111827;
        }

.student-card .student-meta {
            display: flex; align-items: center; gap: 12px;
            margin-top: 6px;
            font-size: 13px; color: #9ca3af; font-weight: 600;
        }

.student-card .student-meta .meta-pending { color: #C8A163; font-weight: 700; }

.student-card .student-arrow {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--brand-50);
            border: 1px solid var(--brand-300);
            display: flex; align-items: center; justify-content: center;
            color: var(--brand-500);
            font-size: 18px;
            flex-shrink: 0;
        }

.sort-row { margin-top:12px; display:flex; align-items:center; gap:8px; }

.sort-row__label { font-size:11px; font-weight:700; color:var(--slate-400); flex-shrink:0; }

.sort-row__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px; flex:1; }

.sort-btn { height:32px; border-radius:8px; font-size:12px; font-weight:900; border:1px solid var(--slate-200); background:#fff; color:var(--slate-500); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:all 0.15s; white-space:nowrap; }

.sort-btn.is-active { background:var(--brand-50); color:var(--brand-600); border-color:var(--brand-200); }

.filter-combobox {
            display: flex; align-items: center; gap: 8px;
            height: 38px; padding: 0 14px;
            background: #fff;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            color: #4B5563;
            font-size: 14px;
            font-weight: 500;
            min-width: 134px;
            cursor: pointer; font-family: inherit;
        }

.filter-combobox::after { content: '▾'; color: #9CA3AF; margin-left: auto; }

.sort-toggles {
            display: flex; gap: 6px; flex-wrap: wrap;
        }

.sort-toggles .sort-btn {
            height: 34px; padding: 0 16px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 10px;
            color: #6B7280;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer; font-family: inherit;
            transition: all .15s;
            white-space: nowrap; flex-shrink: 0;
        }

.sort-toggles .sort-btn:hover { background: var(--bg-subtle); }

.sort-toggles .sort-btn.active {
            background: var(--brand-50);
            color: var(--brand-600);
            border-color: var(--brand-300);
        }

.filter-chip {
            padding: 4px 12px;
            border: 1px solid var(--brand-500);
            color: var(--brand-500);
            border-radius: 10px;
            font-size: 13px;
            background: #fff4e5;
            cursor: pointer;
            font-family: inherit;
        }

.sort-row { display: flex; gap: 8px; flex-wrap: wrap; }

.sort-btn {
            height: 32px; padding: 0 14px;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 13px; font-weight: 600;
            color: var(--text-secondary);
            background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap; flex-shrink: 0;
            box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7);
            transition: all .25s var(--ease-out);
            position: relative; overflow: hidden;
        }

.sort-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 50%); pointer-events: none; border-radius: inherit; }

.sort-btn:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); transform: translateY(-1px); }

.sort-btn.active { color: #FFFFFF; border-color: transparent; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); box-shadow: 0 2px 10px rgba(79, 70, 229,0.28), inset 0 1px 0 rgba(255,255,255,0.18); font-weight: 700; }

.sort-btn:active { transform: scale(0.97); }

.level-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; }

.sort-btn { height: 32px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--border); background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); color: var(--text-secondary); cursor: pointer; transition: all .25s var(--ease-out); white-space: nowrap; flex-shrink: 0; box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7); position: relative; overflow: hidden; }

.sort-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 50%); pointer-events: none; border-radius: inherit; }

.sort-btn:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-600); transform: translateY(-1px); }

.sort-btn.active { color: #FFFFFF; border-color: transparent; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); box-shadow: 0 2px 10px rgba(79, 70, 229,0.28), inset 0 1px 0 rgba(255,255,255,0.18); font-weight: 700; }

.sort-btn:active { transform: scale(0.97); }

.empty-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; color: #999; }

.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }

.empty-text { font-size: 16px; color: #666; margin-bottom: 8px; }

.empty-desc { font-size: 13px; color: #999; }

/* ===== 领养宠物弹窗（参考站 1:1 复刻） ===== */
.adopt-pet-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1000; }
.adopt-pet-modal.active { display: flex; }
.adopt-pet-content {
    background: #fff;
    border-radius: 18px;
    width: 920px;
    max-width: 94vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
 margin: auto;}
/* 标题栏 */
.adopt-header {
    padding: 22px 32px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}
.adopt-title {
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    letter-spacing: 0.3px;
}
.adopt-title span { color: var(--brand-500); }
.adopt-close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.adopt-close-btn:hover { background: #e8e8e8; color: #333; }
/* 标签栏 */
.adopt-tabs-wrap {
    padding: 14px 28px 0;
    border-bottom: 1px solid #f0f0f0;
}
.adopt-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
}
.adopt-tabs::-webkit-scrollbar { display: none; }
.adopt-tab {
    flex-shrink: 0;
    padding: 7px 18px;
    border-radius: 20px;
    background: #f5f6fa;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: none;
    user-select: none;
}
.adopt-tab:hover { background: #eceef3; color: #333; }
.adopt-tab.active {
    background: linear-gradient(135deg, #ff8a50, #ff6b35);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(255,107,53,0.3);
}
/* 网格区 */
.adopt-grid-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
.adopt-grid-wrap::-webkit-scrollbar { width: 6px; }
.adopt-grid-wrap::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.adopt-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}
/* 宠物卡片 */
.adopt-card {
    background: #fff;
    border: 1.5px solid #eef0f4;
    border-radius: 14px;
    padding: 14px 8px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.adopt-card:hover {
    border-color: #d0d4dc;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.adopt-card.selected {
    border-color: #ff6b35;
    background: linear-gradient(180deg, #fff8f5 0%, #fff 100%);
    box-shadow: 0 4px 16px rgba(255,107,53,0.18);
}
.adopt-card-img {
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
}
.adopt-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.adopt-card-name {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}
.adopt-card.selected .adopt-card-name { color: var(--brand-600); font-weight: 600; }
/* 底部按钮 */
.adopt-footer {
    padding: 16px 28px 22px;
    border-top: 1px solid #f0f0f0;
}
.adopt-confirm-btn {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.adopt-confirm-btn:hover {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
}
.adopt-confirm-btn:active { transform: translateY(0); }

/* 领养弹窗动画关键帧 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes celebPop {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes adoptShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.random-pet-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1000; }

.random-pet-modal.active { display: flex; }

.random-pet-content { background: white; border-radius: 20px; width: 480px; max-height: 600px; display: flex; flex-direction: column; overflow: hidden;  margin: auto;}

.random-pet-header { padding: 24px 30px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }

.random-pet-header h3 { font-size: 18px; font-weight: 600; color: #333; margin: 0; }

.random-pet-header h3 span { color: var(--brand-500); font-weight: 700; }

.random-pet-header .close-btn { width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; cursor: pointer; font-size: 16px; color: #999; display: flex; align-items: center; justify-content: center; }

.random-pet-header .close-btn:hover { background: #eee; }

.random-pet-body { flex: 1; padding: 30px; display: flex; align-items: center; justify-content: center; }

.egg-container { position: relative; width: 260px; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.egg-inner { display: flex; flex-direction: column; align-items: center; transition: transform 0.1s; }

.egg-inner.drawing { animation: shake 0.1s infinite; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.egg-image { width: 180px; height: 220px; display: flex; align-items: center; justify-content: center; font-size: 120px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); box-shadow: 0 10px 40px rgba(0,0,0,0.15), inset 0 -10px 20px rgba(0,0,0,0.05); transition: all 0.3s; }

.egg-image.has-img { border-radius: 20px; background: #f9fafb; }

.egg-image.has-img img { width: 100%; height: 100%; object-fit: contain; }

.egg-image.drawing { animation: eggSpin 0.2s infinite; }

@keyframes eggSpin {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.05); }
    100% { transform: rotateY(360deg) scale(1); }
}

.egg-name { margin-top: 20px; font-size: 18px; font-weight: 600; color: #333; }

.drawing-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; border-radius: 20px; }

.drawing-text { font-size: 24px; font-weight: 700; color: var(--brand-500); animation: pulse 0.5s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.random-pet-footer { padding: 24px 30px; border-top: 1px solid #eee; }

.btn-draw { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%); color: #FFFFFF; border: none; border-radius: 16px; cursor: pointer; font-size: 18px; font-weight: 600; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4); transition: all 0.3s; }

.btn-draw:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(79, 70, 229, 0.5); }

.btn-draw:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-group { display: flex; gap: 12px; }

.btn-change { flex: 1; padding: 14px; background: white; color: var(--brand-500); border: 2px solid var(--brand-500); border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 600; transition: all 0.3s; }

.btn-change:hover { background: var(--brand-50); }

.btn-change:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-confirm { flex: 1; padding: 14px; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%); color: #FFFFFF; border: none; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 600; box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35); transition: all 0.3s; }

.btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45); }

/* ===================== 宠物旅行中状态 ===================== */
.pet-area.traveling {
    position: relative;
    overflow: hidden;
}

/* 暗色遮罩已移除：保持景点背景图清晰可见 */

/* 旅行标签 */
.pet-area.traveling .traveling-tag {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
    backdrop-filter: blur(8px);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #1e40af;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    animation: travelTagBounce 2s ease-in-out infinite;
    user-select: none;
}

.pet-area.traveling .traveling-tag:hover {
    transform: translateX(-50%) scale(1.06);
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    box-shadow: 0 4px 16px rgba(30,64,175,0.3), 0 0 0 1px rgba(255,255,255,0.7);
}

.pet-area.traveling .travel-end-hint {
    font-size: 10px;
    color: #f59e0b;
    font-weight: 500;
    opacity: 0.8;
}

@keyframes travelTagBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-2px); }
}

/* large 视图：标签稍大 */
.view-large .pet-area.traveling .traveling-tag {
    font-size: 13px;
    padding: 6px 16px;
    bottom: 10px;
}

/* medium 视图 */
.view-medium .pet-area.traveling .traveling-tag {
    font-size: 11px;
    padding: 4px 12px;
    bottom: 6px;
}

/* small 视图：更紧凑 */
.view-small .pet.area.traveling .traveling-tag,
.pet-area.traveling .traveling-tag {
    font-size: 10px;
    padding: 3px 10px;
    bottom: 4px;
}