/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 主系统 - 宝可梦风格背景 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    min-height: 100vh;
    color: #2a75bb;
    overflow-x: hidden;
    background: linear-gradient(180deg, #3d7dca 0%, #2a75bb 30%, #1e5a8e 100%);
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(255, 203, 5, 0.08) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
}

body::after {
    display: none;
}

.line-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.line-effect::before,
.line-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 203, 5, 0.4), transparent);
    transform: translate(-50%, -50%) rotate(15deg);
    box-shadow: 0 0 20px rgba(255, 203, 5, 0.3);
    animation: waveLine 8s ease-in-out infinite;
}

.line-effect::after {
    transform: translate(-50%, -50%) rotate(-15deg);
    background: linear-gradient(90deg, transparent, rgba(61, 125, 202, 0.5), transparent);
    box-shadow: 0 0 20px rgba(61, 125, 202, 0.3);
    animation-delay: 2s;
}

@keyframes waveLine {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(15deg) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) rotate(15deg) translateY(-20px);
    }
}

/* 光晕效果 - 宝可梦风格 */
.glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 203, 5, 0.08) 0%, transparent 70%),
        radial-gradient(circle at 70% 70%, rgba(61, 125, 202, 0.12) 0%, transparent 70%);
    z-index: -1;
    animation: glowPulse 10s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* 欢迎页面 - Prismatic Burst 背景由 final_aurora.css 控制 */
.welcome-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 主内容区域背景增强 */
.main-content {
    padding: 30px;
    min-height: calc(100vh - 72px);
    position: relative;
    z-index: 1;
}

.main-content::before {
    display: none;
}

.hidden {
    display: none !important;
}

/* 按钮 - 宝可梦风格 */
.btn {
    padding: 12px 24px;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

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

.btn-primary {
    background: #ffcb05;
    color: #1e5a8e;
    border-color: #c7a008;
    box-shadow: 0 4px 0 #c7a008;
}

.btn-primary:hover {
    box-shadow: 0 6px 0 #c7a008;
}

.btn-secondary {
    background: #2a75bb;
    color: #fff;
    border-color: #1e5a8e;
    box-shadow: 0 4px 0 #1e5a8e;
}

.btn-secondary:hover {
    box-shadow: 0 6px 0 #1e5a8e;
}

.btn-success {
    background: #ffcb05;
    color: #1e5a8e;
    border-color: #c7a008;
    box-shadow: 0 4px 0 #c7a008;
}

.btn-success:hover {
    box-shadow: 0 6px 0 #c7a008;
}

.btn-danger {
    background: #e3350d;
    color: #fff;
    border-color: #b32b0a;
    box-shadow: 0 4px 0 #b32b0a;
}

.btn-danger:hover {
    box-shadow: 0 6px 0 #b32b0a;
}

/* 与卡片上 +/- 经验按钮同色；禁用时弱化 */
.btn-primary:disabled,
.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.btn-primary:disabled:hover,
.btn-danger:disabled:hover {
    transform: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* 表单样式 - 宝可梦风格 */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    border: 4px solid #ffcb05;
    box-shadow: 0 6px 0 #c7a008, 0 8px 24px rgba(0, 0, 0, 0.15);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2a75bb;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 3px solid #2a75bb;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ffcb05;
    box-shadow: 0 0 0 2px rgba(255, 203, 5, 0.4);
}

/* 欢迎页面 - 由 final_aurora.css (Pixel Blast) 控制 */
.welcome-tabs {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-bottom: 20px;
}
.welcome-tab {
    padding: 10px 32px;
    border: 2px solid #ffcb05;
    background: #fff;
    color: #1e5a8e;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}
.welcome-tab:first-child { border-radius: 10px 0 0 10px; }
.welcome-tab:last-child { border-radius: 0 10px 10px 0; }
.welcome-tab.active {
    background: linear-gradient(135deg, #ffcb05, #f59e0b);
    color: #1e5a8e;
    border-color: #c7a008;
}

.welcome-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.welcome-buttons .btn {
    min-width: 120px;
}

/* 导航栏 - 宝可梦风格 */
.navbar {
    background: linear-gradient(180deg, #3d7dca 0%, #2a75bb 50%, #1e5a8e 100%);
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 12px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.nav-brand {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 0 #1e5a8e, -1px -1px 0 rgba(0,0,0,0.2);
    letter-spacing: 0.02em;
}

.nav-version {
    font-size: 13px;
    font-weight: 600;
    color: #ffcb05;
    margin-left: 10px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    border: 2px solid #ffcb05;
}

.nav-menu {
    display: flex;
    gap: 6px;
}

.nav-link {
    text-decoration: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    border: 2px solid transparent;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.nav-link.active {
    background: #ffcb05;
    color: #1e5a8e;
    border-color: #c7a008;
    text-shadow: none;
    box-shadow: 0 2px 0 #c7a008, inset 0 1px 0 rgba(255,255,255,0.5);
}

.nav-user {
    display: flex;
    align-items: center;
}

.user-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 12px;
    transition: background 0.2s ease;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.user-info:hover {
    background: rgba(255, 255, 255, 0.2);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #ffcb05;
    box-shadow: 0 2px 0 #c7a008;
}

.dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border: 3px solid #2a75bb;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    color: #2a75bb;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.dropdown-content a:first-child {
    border-radius: 9px 9px 0 0;
}

.dropdown-content a:last-child {
    border-radius: 0 0 9px 9px;
}

.dropdown-content a:hover {
    background: #ffcb05;
    color: #1e5a8e;
}

/* 主内容区域 */
.main-container {
    min-height: calc(100vh - 72px);
    position: relative;
}

.main-content {
    padding: 30px;
    min-height: calc(100vh - 72px);
    position: relative;
    z-index: 1;
}

.main-content::before {
    display: none;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 4px solid #ffcb05;
}

.page-header h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 2px 2px 0 #1e5a8e, -1px -1px 0 rgba(0,0,0,0.2);
}

/* 宠物图鉴页顶栏：标题左、操作按钮组整体靠右；极巨时「编辑」在左「新增」在右紧挨 */
#pet-management-page .page-header--pet-pokedex {
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
#pet-management-page .page-header--pet-pokedex .page-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    justify-content: flex-end;
}
#pet-management-page .page-header-gmax-actions {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* 学生网格布局 */
.students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.student-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.student-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 203, 5, 0.5), transparent);
    opacity: 0.8;
}

.student-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 0 #c7a008, 0 12px 32px rgba(0, 0, 0, 0.12);
}

.pet-image-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto 16px;
}

.pet-image {
    width: 240px;
    height: 240px;
    margin: 0;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    border: 4px solid #ffcb05;
    background: #f8f9fa;
    box-shadow: 0 4px 0 #c7a008, 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 宠物受伤时的说话气泡 */
.pet-speech-bubble {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 12px;
    font-size: 14px;
    color: #e74c3c;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.3);
    max-width: 140px;
    line-height: 1.4;
    z-index: 2;
}

.pet-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid rgba(231, 76, 60, 0.3);
    border-bottom: 1px solid rgba(231, 76, 60, 0.3);
    transform: rotate(45deg);
}

/* 我好饿气泡（橙色） */
.pet-speech-bubble-hungry {
    color: #e67e22;
    border-color: rgba(230, 126, 34, 0.3);
}

.pet-speech-bubble-hungry::before {
    border-right-color: rgba(230, 126, 34, 0.3);
    border-bottom-color: rgba(230, 126, 34, 0.3);
}

/* 宠物阶段等级徽章 - 宝可梦风格 */
.pet-stage-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #ffcb05 0%, #ffed4e 50%, #ffcb05 100%);
    color: #1e5a8e;
    font-size: 14px;
    font-weight: 800;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 4px 0 #c7a008, 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid #c7a008;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes badge-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 宠物爱心生命值（我的世界风格）- 位于宠物图片右下角 */
.pet-hearts {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 2px;
    z-index: 2;
}

.pet-heart {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pet-heart.filled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e74c3c'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.pet-heart.empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e74c3c' stroke-width='2'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* 开心状态气泡（爱心/笑脸） */
.pet-speech-bubble-happy {
    padding: 6px 10px;
    font-size: 18px;
    color: #333;
    border-color: rgba(52, 199, 89, 0.3);
    background: #fff;
}

.pet-speech-bubble-happy::before {
    border-right-color: rgba(52, 199, 89, 0.3);
    border-bottom-color: rgba(52, 199, 89, 0.3);
}

.student-info h3 {
    color: #2a75bb;
    margin-bottom: 4px;
    font-size: 22px;
    font-weight: 700;
}

.student-info p {
    color: #1e5a8e;
    margin-bottom: 12px;
    font-size: 17px;
}

.pet-stats {
    background: rgba(255, 203, 5, 0.15);
    color: #1e5a8e;
    padding: 14px 16px;
    border-radius: 14px;
    margin: 0 0 16px;
    border: 2px solid #ffcb05;
}

.pet-stats p {
    margin: 6px 0;
    font-size: 15px;
    color: #1e5a8e;
}

/* ===== 学号左上角徽章 ===== */
.card-student-number {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 16px;
    font-weight: 900;
    color: #1e5a8e;
    background: rgba(255, 203, 5, 0.85);
    padding: 2px 10px;
    border-radius: 8px;
    z-index: 3;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* ===== 饥饿条 + 清洁度条 ===== */
.care-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.care-bar-label {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
    min-width: 52px;
}
.care-bar {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}
.care-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width .4s ease;
}
.care-bar-hunger {
    background: linear-gradient(90deg, #ef4444, #f97316, #22c55e);
}
.care-bar-clean {
    background: linear-gradient(90deg, #6b7280, #60a5fa, #38bdf8);
}
.care-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s;
    flex-shrink: 0;
    padding: 0;
}
.care-btn:hover { transform: scale(1.15); }
.care-btn-feed { background: #fef3c7; }
.care-btn-bath { background: #dbeafe; }

/* ===== 危险气泡（≤30%饥饿） ===== */
.pet-speech-bubble-danger {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.4);
    animation: dangerPulse 1.2s infinite;
}
.pet-speech-bubble-danger::before {
    border-right-color: rgba(220, 38, 38, 0.4);
    border-bottom-color: rgba(220, 38, 38, 0.4);
}
@keyframes dangerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes sickPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== 宠物脏污特效（仅毛毛虫爬行） ===== */
.pet-dirty-overlay {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.pet-dirty-light .pet-image,
img.pet-dirty-light {
    filter: brightness(0.95);
}
.pet-dirty-medium .pet-image,
img.pet-dirty-medium {
    filter: brightness(0.88) contrast(0.95);
}
.pet-dirty-heavy .pet-image,
img.pet-dirty-heavy {
    filter: brightness(0.75) contrast(0.9) saturate(0.8);
}
.pet-bug {
    position: absolute;
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.pet-bug-1 { animation: bugCrawl1 4s infinite; }
.pet-bug-2 { animation: bugCrawl2 5s infinite 0.8s; }
.pet-bug-3 { animation: bugCrawl3 3.5s infinite 1.5s; }
.pet-bug-4 { animation: bugCrawl4 6s infinite 0.3s; }
.pet-bug-5 { animation: bugCrawl5 4.5s infinite 2s; }
@keyframes bugCrawl1 {
    0% { top: 80%; left: -10%; transform: rotate(30deg); }
    50% { top: 30%; left: 60%; transform: rotate(100deg); }
    100% { top: 80%; left: 110%; transform: rotate(30deg); }
}
@keyframes bugCrawl2 {
    0% { top: 20%; left: 110%; transform: rotate(-150deg) scaleX(-1); }
    50% { top: 60%; left: 40%; transform: rotate(-90deg) scaleX(-1); }
    100% { top: 20%; left: -10%; transform: rotate(-150deg) scaleX(-1); }
}
@keyframes bugCrawl3 {
    0% { top: -10%; left: 50%; transform: rotate(180deg); }
    50% { top: 50%; left: 20%; transform: rotate(220deg); }
    100% { top: 110%; left: 50%; transform: rotate(180deg); }
}
@keyframes bugCrawl4 {
    0% { top: 90%; left: 80%; transform: rotate(-60deg); }
    33% { top: 40%; left: 70%; transform: rotate(-120deg); }
    66% { top: 20%; left: 30%; transform: rotate(-60deg); }
    100% { top: 90%; left: 10%; transform: rotate(0deg); }
}
@keyframes bugCrawl5 {
    0% { top: 50%; left: -10%; transform: rotate(45deg); }
    50% { top: 70%; left: 80%; transform: rotate(90deg); }
    100% { top: 50%; left: 110%; transform: rotate(45deg); }
}

/* 距离进化提示 */
.exp-to-next-hint {
    font-size: 9px;
    color: #1e5a8e;
    margin: 0 0 6px 0;
}

/* 经验值数字突出显示 */
.pet-stats .exp-value {
    font-size: 22px;
    font-weight: 700;
    color: #2a75bb;
    margin-bottom: 8px;
}

.stage-name-display {
    color: #2a75bb;
    font-weight: 700;
    font-size: 18px;
}

.experience-bar {
    height: 24px;
    background: rgba(30, 90, 142, 0.2);
    border-radius: 12px;
    overflow: hidden;
    margin: 12px 0;
    position: relative;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #2a75bb;
}

.experience-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffcb05 0%, #ffed4e 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(255, 203, 5, 0.5);
}

.experience-percent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: 700;
    color: #1e5a8e;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 2;
}

.exp-controls {
    display: flex;
    gap: 12px;
    margin-top: 0;
    justify-content: center;
}

.exp-btn {
    flex: 1;
    max-width: 80px;
    padding: 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-btn.add {
    background: #ffcb05;
    color: #1e5a8e;
    border: 3px solid #c7a008;
    box-shadow: 0 4px 0 #c7a008;
}

.exp-btn.reduce {
    background: #e3350d;
    color: #fff;
    border: 3px solid #b32b0a;
    box-shadow: 0 4px 0 #b32b0a;
}

/* 类选择器样式 - 宝可梦风格 */
.class-selector {
    margin-bottom: 20px;
}

.class-selector select {
    padding: 12px 20px;
    border: 3px solid #2a75bb;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    min-width: 200px;
    color: #1e5a8e;
    font-weight: 600;
}

.class-selector select:focus {
    border-color: #ffcb05;
    outline: none;
}

/* 删除班级页面特殊样式 */
#delete-class-page .class-list {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

#delete-class-page .class-list select {
    padding: 12px 25px;
    min-width: 250px;
    font-size: 16px;
    height: 46px; /* 与按钮高度匹配 */
    box-sizing: border-box;
}

#delete-class-page .btn-danger {
    height: 46px;
    padding: 12px 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 添加方法样式 - 宝可梦风格 */
.add-method {
    margin: 30px 0;
    padding: 25px;
    background: #fff;
    border-radius: 16px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 20px rgba(0, 0, 0, 0.1);
}

.add-method h3 {
    color: #2a75bb;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
}

.help-text {
    color: #1e5a8e;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

/* 商店样式 - 宝可梦风格 */
.shop-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.shop-item {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.shop-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 #c7a008, 0 10px 28px rgba(0, 0, 0, 0.12);
}

.shop-item h3 {
    color: #2a75bb;
    margin-bottom: 10px;
    font-weight: 700;
}

.shop-item p {
    color: #1e5a8e;
    margin-bottom: 15px;
}

.item-cost {
    background: #ffcb05;
    color: #1e5a8e;
    padding: 8px 15px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 700;
    border: 2px solid #c7a008;
    box-shadow: 0 2px 0 #c7a008;
}

.shop-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.shop-item .item-actions {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.purchase-btn {
    padding: 12px 40px;
    background: #2a75bb;
    color: #fff;
    border: 3px solid #1e5a8e;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 0 #1e5a8e;
}

.purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1e5a8e;
}

/* 对战样式 - 宝可梦风格 */
.battle-area {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 24px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
}

.battle-setup {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.fighter-selection {
    flex: 1;
    min-width: 200px;
}

.fighter-selection h3 {
    color: #2a75bb;
    margin-bottom: 15px;
    font-weight: 700;
}

.vs {
    font-size: 36px;
    font-weight: bold;
    color: #ffcb05;
    text-shadow: 2px 2px 0 #1e5a8e, -1px -1px 0 rgba(0,0,0,0.2);
}

.battle-btn {
    padding: 15px 40px;
    font-size: 18px;
    margin: 20px 0;
}

.battle-result {
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

.battle-result.success {
    background: #ffcb05;
    color: #1e5a8e;
    border: 3px solid #c7a008;
    box-shadow: 0 4px 0 #c7a008;
}

.battle-result.error {
    background: #e3350d;
    color: #fff;
    border: 3px solid #b32b0a;
    box-shadow: 0 4px 0 #b32b0a;
}

.battle-history {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 20px rgba(0, 0, 0, 0.08);
}

.battle-history h3 {
    color: #2a75bb;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.history-item {
    background: rgba(255, 203, 5, 0.12);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 2px solid #ffcb05;
    border-left: 4px solid #2a75bb;
}

/* 学生列表样式 - 宝可梦风格 */
.students-list {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    margin-top: 20px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 6px 20px rgba(0, 0, 0, 0.08);
}

.student-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255, 203, 5, 0.1);
    border-radius: 12px;
    margin-bottom: 10px;
    border: 2px solid #ffcb05;
}

.student-item:hover {
    background: rgba(255, 203, 5, 0.2);
}

/* 空数据提示 - 宝可梦风格 */
.no-data {
    text-align: center;
    padding: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    border: 4px solid #ffcb05;
    border-radius: 16px;
    margin: 20px 0;
    box-shadow: 0 4px 0 #c7a008, inset 0 1px 0 rgba(255,255,255,0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        height: auto;
        padding: 16px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        margin: 12px 0;
        gap: 6px;
    }
    
    .nav-link {
        margin: 2px;
        padding: 8px 14px;
        font-size: 15px;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .pixel-title {
        font-size: 2.5rem;
    }
    
    .students-grid {
        grid-template-columns: 1fr;
    }
    
    .shop-items-grid {
        grid-template-columns: 1fr;
    }
    
    .battle-setup {
        flex-direction: column;
    }
    
    .welcome-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .welcome-buttons .btn {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .pixel-title {
        font-size: 2rem;
    }
    
    .form-container {
        padding: 20px;
        margin: 10px;
    }
    
    .student-card {
        padding: 15px;
    }
    
    .pet-image {
        width: 100px;
        height: 100px;
    }
}

/* 宠物图鉴区域 - 宝可梦图鉴风格 */
.pokedex-tabs, .pet-types-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.pokedex-tab, .pet-type-tab {
    padding: 8px 16px;
    border: 2px solid #ffcb05;
    border-radius: 8px;
    background: rgba(255,203,5,0.2);
    color: #1e5a8e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pokedex-tab:hover, .pet-type-tab:hover {
    background: rgba(255,203,5,0.4);
}
.pokedex-tab.active, .pet-type-tab.active {
    background: #ffcb05;
    color: #1e5a8e;
}

.pet-pokedex-section {
    margin-bottom: 32px;
}

.pokedex-container {
    display: flex;
    gap: 24px;
    background: #fff;
    border: 4px solid #ffcb05;
    border-radius: 20px;
    box-shadow: 0 6px 0 #c7a008, 0 10px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.pokedex-list-wrapper {
    flex: 0 0 220px;
    border-right: 4px solid #ffcb05;
    background: linear-gradient(180deg, #2a75bb 0%, #1e5a8e 100%);
}

.pokedex-list-header {
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #ffcb05;
    text-align: center;
    border-bottom: 3px solid #ffcb05;
    text-shadow: 1px 1px 0 #1e5a8e;
}

.pokedex-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
}

.pokedex-list::-webkit-scrollbar {
    width: 8px;
}

.pokedex-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.pokedex-list::-webkit-scrollbar-thumb {
    background: #ffcb05;
    border-radius: 4px;
}

.pokedex-list-item {
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.pokedex-list-item:hover {
    background: rgba(255, 203, 5, 0.2);
}

.pokedex-list-item.selected {
    background: rgba(255, 203, 5, 0.35);
    border-left-color: #ffcb05;
    color: #ffcb05;
}

.pokedex-list-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

/* 首领图鉴：左侧目录高度与右侧卡片区域对齐，仅内容超出时底部出现滚动条 */
.pokedex-container.pokedex-container--boss {
    align-items: stretch;
}

/* overflow:hidden + min-height:0：避免「最小高度=整份目录」把整行撑开，行高由右侧卡片决定 */
.pokedex-container.pokedex-container--boss > .pokedex-list-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
}

.pokedex-container.pokedex-container--boss > .pokedex-card-wrapper {
    min-height: 0;
    align-self: stretch;
}

.pokedex-container.pokedex-container--boss .pokedex-list-header {
    flex-shrink: 0;
}

.pokedex-container.pokedex-container--boss .pokedex-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.pokedex-card-wrapper {
    flex: 1;
    min-width: 280px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pokedex-card {
    width: 100%;
    max-width: 360px;
}

.pokedex-card-placeholder {
    text-align: center;
    color: #8e8e93;
    font-size: 16px;
    padding: 60px 20px;
}

.pokedex-card-inner {
    background: linear-gradient(180deg, #3d7dca 0%, #2a75bb 50%, #1e5a8e 100%);
    border: 4px solid #ffcb05;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 0 #c7a008, inset 0 1px 0 rgba(255,255,255,0.2);
}

.pokedex-card-image {
    text-align: center;
    margin-bottom: 20px;
}

.pokedex-card-image img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border: 4px solid #ffcb05;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 0 #c7a008;
}

.pokedex-card-name {
    font-size: 24px;
    font-weight: 800;
    color: #ffcb05;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 2px 2px 0 #1e5a8e;
}

/* 首领图鉴：地图 / 关卡 / 攻防血与暴击闪避（右侧大卡蓝底上用白字） */
.pokedex-card-meta {
    font-size: 14px;
    margin: 8px 0;
    text-align: left;
    line-height: 1.65;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.pokedex-card-meta div {
    color: #fff;
}

.pokedex-card-desc {
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
    text-align: center;
}

/* 极巨首领图鉴：攻防与生命等数值居中，删除按钮居中 */
.pokedex-card.pokedex-card--gigantamax .pokedex-card-meta {
    text-align: center;
}
.pokedex-card.pokedex-card--gigantamax .pokedex-card-meta div {
    text-align: center;
}
.pokedex-card.pokedex-card--gigantamax .pokedex-card-gmax-delete {
    display: block;
    margin: 16px auto 0;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .pokedex-container {
        flex-direction: column;
    }
    .pokedex-list-wrapper {
        border-right: none;
        border-bottom: 4px solid #ffcb05;
        flex: none;
    }
    .pokedex-list {
        max-height: 200px;
    }
    /* 首领：窄屏下列表仍与下方卡片区视觉协调，限制左栏最大高度避免过长 */
    .pokedex-container.pokedex-container--boss .pokedex-list-wrapper {
        max-height: min(50vh, 320px);
    }
    .pokedex-container.pokedex-container--boss .pokedex-list {
        max-height: none;
    }
}

/* 宠物管理系统样式 - 宝可梦风格 */
.pet-management-section {
    margin: 20px 0;
}

.create-pet-btn {
    background: #ffcb05;
    color: #1e5a8e;
    padding: 12px 24px;
    border: 3px solid #c7a008;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 0 #c7a008;
}

.create-pet-btn:hover {
    box-shadow: 0 6px 0 #c7a008;
    transform: translateY(-2px);
}

.pet-types-grid {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

/* 教师端 · 宠物图鉴「首领」列表：横向排列，排满自动换行 */
#boss-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 20px;
}

#boss-cards-container .boss-card-item {
    flex: 0 0 auto;
    width: 148px;
    padding: 12px 10px 14px;
    background: #fff;
    border-radius: 12px;
    border: 3px solid #ffcb05;
    box-shadow: 0 3px 0 #c7a008, 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

#boss-cards-container .boss-card-thumb {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

#boss-cards-container .boss-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#boss-cards-container .boss-card-placeholder {
    font-size: 13px;
    color: #94a3b8;
    padding: 8px;
}

#boss-cards-container .boss-card-map {
    margin-top: 10px;
    font-weight: 700;
    color: #1e5a8e;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-all;
}

#boss-cards-container .boss-card-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

/* 教师端 · 极巨首领缩略卡（与首领列表同款黄框；选中描蓝边） */
#gigantamax-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 20px;
}

#gigantamax-cards-container .boss-card-item--gmax {
    flex: 0 0 auto;
    width: 148px;
    padding: 12px 10px 14px;
    background: #fff;
    border-radius: 12px;
    border: 3px solid #ffcb05;
    box-shadow: 0 3px 0 #c7a008, 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#gigantamax-cards-container .boss-card-item--gmax:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #c7a008, 0 6px 16px rgba(0, 0, 0, 0.1);
}

#gigantamax-cards-container .boss-card-item--gmax.boss-card-item--selected {
    border-color: #2a75bb;
    box-shadow: 0 0 0 3px rgba(42, 117, 187, 0.35), 0 3px 0 #c7a008;
}

#gigantamax-cards-container .boss-card-thumb {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gigantamax-cards-container .boss-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#gigantamax-cards-container .boss-card-placeholder {
    font-size: 13px;
    color: #94a3b8;
    padding: 8px;
}

#gigantamax-cards-container .boss-card-map {
    margin-top: 10px;
    font-weight: 700;
    color: #1e5a8e;
    font-size: 14px;
    line-height: 1.3;
}

#gigantamax-cards-container .boss-card-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.pet-type-row {
    display: flex;
    align-items: stretch;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 4px 16px rgba(0, 0, 0, 0.06);
    min-height: 280px;
}

.pet-stages-container {
    display: flex;
    gap: 16px;
    flex: 1;
    justify-content: space-around;
    flex-wrap: wrap;
}

.pet-stage-box {
    width: 160px;
    min-height: 240px;
    border: 3px dashed #2a75bb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
}

.pet-stage-box:hover {
    border-color: #ffcb05;
    transform: scale(1.05);
}

.pet-stage-box.has-image {
    border: 3px solid #ffcb05;
    box-shadow: 0 2px 0 #c7a008;
}

.pet-stage-box.has-image:hover {
    border-color: #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 0 15px rgba(255, 203, 5, 0.3);
}

.pet-stage-image {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin-bottom: 4px;
}

.stage-label {
    position: absolute;
    bottom: 8px;
    left: 6px;
    background: #2a75bb;
    color: #fff;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
    border: 2px solid #1e5a8e;
}

.pet-info {
    flex: 1;
    min-width: 150px;
}

.pet-name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    color: #2a75bb;
}

.pet-description {
    font-size: 14px;
    color: #1e5a8e;
    margin-bottom: 5px;
}

.pet-stats {
    font-size: 12px;
    color: #1e5a8e;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 16px;
    width: 80%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    border: 4px solid #ffcb05;
    box-shadow: 0 6px 0 #c7a008, 0 8px 32px rgba(0, 0, 0, 0.2);
}

.close {
    color: #2a75bb;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #e3350d;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.image-upload-area {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.image-upload-area:hover {
    border-color: #ffcb05;
}

.image-preview {
    max-width: 100px;
    max-height: 100px;
    margin-top: 10px;
    display: none;
}

.submit-btn {
    background: #ffcb05;
    color: #1e5a8e;
    padding: 12px 24px;
    border: 3px solid #c7a008;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    box-shadow: 0 4px 0 #c7a008;
}

.submit-btn:hover {
    box-shadow: 0 6px 0 #c7a008;
    transform: translateY(-2px);
}

.submit-btn:disabled {
    background: #ccc;
    border-color: #999;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

.loading {
    display: none;
    text-align: center;
    padding: 20px;
}

.error-message {
    color: #e3350d;
    background: rgba(227, 53, 13, 0.15);
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    display: none;
    border: 2px solid #e3350d;
}

.success-message {
    color: #1e5a8e;
    background: rgba(255, 203, 5, 0.2);
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    display: none;
    border: 2px solid #ffcb05;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .pet-type-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .pet-stages-container {
        display: flex;
        overflow-x: auto;
        padding: 10px 0;
    }
    
    .pet-stage-box {
        min-width: 80px;
        height: 80px;
    }
    
    .modal-content {
        width: 95%;
        margin: 2% auto;
    }
}
/* 学生卡片宠物图片 - 方形大图 宝可梦风格 */
.student-card .pet-image {
    width: 240px;
    height: 240px;
    border-radius: 12px;
    object-fit: cover;
    border: 4px solid #ffcb05;
    margin-bottom: 16px;
    box-shadow: 0 4px 0 #c7a008, 0 6px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.student-card:hover .pet-image {
    transform: scale(1.03);
    box-shadow: 0 6px 0 #c7a008, 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 宠物管理页面的阶段图片也超大 */
.pet-stage-box {
    width: 200px;
    height: 200px;
    border-radius: 15px;
}

.pet-stage-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* 宠物信息文字 */
.pet-stats p {
    color: #4a4a4a;
    font-size: 13px;
    margin: 6px 0;
}

.pet-stats p:first-child {
    font-weight: 700;
    font-size: 22px;
    color: #1c1c1e;
}

/* 经验值条 - 宝可梦风格（已在上面统一定义） */

/* 卡片背景 - 宝可梦风格（已在上面统一定义） */

/* 响应式调整 */
@media (max-width: 768px) {
    .student-card .pet-image {
        width: 180px;
        height: 180px;
    }
    
    .pet-stage-box {
        width: 180px;
        height: 180px;
    }
    
    .student-card {
        padding: 18px;
    }
}

/* ========== 宠物阶段名称输入框样式 - 宝可梦风格 ========== */
.stage-name-input {
    width: 100%;
    margin-top: 8px;
    padding: 5px 8px;
    border: 2px solid #2a75bb;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    transition: all 0.2s ease;
    background: #fff;
    box-sizing: border-box;
}

.stage-name-input:focus {
    outline: none;
    border-color: #ffcb05;
    box-shadow: 0 0 0 2px rgba(255, 203, 5, 0.4);
}

.stage-name-input:hover {
    border-color: #ffcb05;
}

.pet-stage-box.has-image .stage-name-input {
    border-color: #ffcb05;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .stage-name-input {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* ========== 宠物排行榜样式 ========== */
#pet-ranking-page .class-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ranking-type-btn {
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: 3px solid #2a75bb;
    background: #fff;
    color: #2a75bb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ranking-type-btn:hover {
    border-color: #ffcb05;
    color: #1e5a8e;
}

.ranking-type-btn.active {
    background: #ffcb05;
    border-color: #c7a008;
    color: #1e5a8e;
    box-shadow: 0 4px 0 #c7a008;
}

.ranking-container {
    margin-top: 20px;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ranking-item {
    display: grid;
    grid-template-columns: 80px 100px 100px 100px 100px 1fr 1fr 150px;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 20px 25px;
    border: 4px solid #ffcb05;
    box-shadow: 0 4px 0 #c7a008, 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ranking-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 0 #c7a008, 0 6px 24px rgba(0, 0, 0, 0.1);
}

/* 前三名特殊样式 - 宝可梦风格 */
.ranking-item.rank-1 {
    background: linear-gradient(135deg, #ffcb05 0%, #ffed4e 100%);
    border-color: #c7a008;
    box-shadow: 0 6px 0 #c7a008, 0 8px 30px rgba(255, 203, 5, 0.4);
}

.ranking-item.rank-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    border-color: #999;
    box-shadow: 0 6px 0 #999, 0 8px 30px rgba(192, 192, 192, 0.4);
}

.ranking-item.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 100%);
    border-color: #a66b28;
    box-shadow: 0 6px 0 #a66b28, 0 8px 30px rgba(205, 127, 50, 0.4);
}

.ranking-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #2a75bb;
}

.medal-icon {
    font-size: 28px;
    margin-bottom: 5px;
}

.rank-num {
    font-size: 16px;
    color: #666;
}

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

.pet-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffcb05;
    background: #f8f9fa;
    box-shadow: 0 4px 0 #c7a008, 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.pet-thumbnail:hover {
    transform: scale(1.1);
}

.ranking-stage-name {
    font-size: 15px;
    font-weight: 600;
    color: #2a75bb;
}

.ranking-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #1e5a8e;
}

.ranking-stats-rate {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #1e5a8e;
}

.ranking-attack, .ranking-health, .ranking-crit, .ranking-evade {
    white-space: nowrap;
}

.ranking-student-number,
.ranking-student-name {
    font-size: 18px;
    color: #2a75bb;
    font-weight: 700;
    text-align: left;
    margin-left: 16px;
}

.ranking-student-number {
    font-size: 16px;
    color: #1e5a8e;
}

.ranking-experience {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #2a75bb;
    padding: 12px 20px;
    border-radius: 12px;
    color: #fff;
    border: 3px solid #1e5a8e;
    box-shadow: 0 4px 0 #1e5a8e;
}

.exp-label {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.exp-value {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .ranking-item {
        grid-template-columns: 60px 80px 80px 90px 90px 1fr 110px;
        gap: 12px;
    }
    
    .ranking-student-number {
        display: none;
    }
    
    .ranking-stage-name { font-size: 13px; }
    .ranking-stats, .ranking-stats-rate { font-size: 12px; }
}

@media (max-width: 768px) {
    .ranking-item {
        grid-template-columns: 50px 60px 1fr 100px;
        gap: 10px;
        padding: 15px;
    }
    
    .ranking-stage-name, .ranking-stats, .ranking-stats-rate { display: none; }
    
    .ranking-student-name {
        grid-row: 1;
        grid-column: 2 / 4;
        text-align: left;
        font-size: 16px;
    }
    
    .ranking-experience {
        grid-row: 2;
        grid-column: 2 / 4;
        padding: 8px 15px;
    }
    
    .pet-thumbnail {
        width: 60px;
        height: 60px;
    }
}

/* 学生记录页内标签（加减分 / 奖章 / 对战记录）— 高对比分段样式 */
.performance-subtabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 18px 0 16px;
    padding: 6px;
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 14px;
    border: 3px solid #64748b;
    box-shadow: 0 4px 0 #475569, 0 8px 24px rgba(15, 23, 42, 0.18);
}

.performance-subtab {
    padding: 14px 32px;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: #334155;
    border-radius: 10px;
    margin: 0 4px;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s;
    border: 3px solid transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.performance-subtab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    border-color: #94a3b8;
}

.performance-subtab.active {
    color: #0c1929;
    background: linear-gradient(180deg, #ffeb3b 0%, #ffcb05 45%, #f59e0b 100%);
    border-color: #d97706;
    box-shadow: 0 3px 0 #b45309, 0 6px 16px rgba(245, 158, 11, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.performance-subtab.active:hover {
    color: #0c1929;
    transform: translateY(-1px);
}

.performance-subpanel {
    padding-top: 8px;
}

/* 学生记录页面 */
.performance-students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    padding: 20px 0;
}

.performance-student-card {
    background: #fff;
    border: 3px solid #ffcb05;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 0 #c7a008;
}

.performance-student-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 #c7a008, 0 8px 20px rgba(0,0,0,0.1);
}

.perf-card-number {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.perf-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1e5a8e;
}

/* 对战记录模态框 */
.battle-record-modal-content {
    max-width: 640px;
    width: 92%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.battle-record-list {
    overflow-y: auto;
    flex: 1;
    margin-top: 12px;
    padding-right: 6px;
}

.battle-record-item {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #f8fafc;
}

.battle-record-time {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
}

.battle-record-vs {
    font-size: 15px;
    margin-bottom: 6px;
    color: #1e293b;
}

.battle-record-result {
    font-size: 14px;
    margin-bottom: 8px;
}

.battle-win {
    color: #16a34a;
    font-weight: 700;
}

.battle-record-scores {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

.battle-record-mode-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    margin-right: 6px;
    vertical-align: middle;
}
.battle-record-mode-tag.personal {
    background: #e0f2fe;
    color: #0369a1;
}
.battle-record-mode-tag.team {
    background: #fef3c7;
    color: #b45309;
}
.battle-record-item-team {
    border-color: #fcd34d;
    background: #fffbeb;
}

/* 学生加减分记录模态框 - 大尺寸 */
#student-record-modal .modal-content,
#student-record-modal .student-record-modal-content {
    max-width: 1100px !important;
    width: 90% !important;
    min-width: 900px !important;
    min-height: 580px !important;
    padding: 28px 36px;
}

.record-date-picker-wrap {
    margin-bottom: 16px;
}

.record-date-picker-wrap input[type="date"] {
    padding: 8px 12px;
    border: 2px solid #2a75bb;
    border-radius: 8px;
    font-size: 14px;
}

.student-record-layout {
    display: flex;
    gap: 24px;
}

.student-record-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#student-record-modal .record-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

#student-record-modal .record-section .record-list {
    display: flex;
    flex-direction: column;
}

#student-record-modal .record-section .record-list .no-data {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
}

#student-record-modal .student-record-right {
    flex: 1;
    min-width: 420px;
    display: flex;
    flex-direction: column;
}

#student-record-modal .record-chart-wrap {
    flex: 1;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.record-section h3 {
    font-size: 16px;
    color: #1e5a8e;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #ffcb05;
}

.record-list {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
}

#student-record-modal .record-list {
    flex: 1;
    min-height: 340px;
    max-height: 420px;
    overflow-y: auto;
}

.record-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    font-size: 14px;
}

.record-add-item {
    background: rgba(34, 197, 94, 0.15);
    border-left: 4px solid #22c55e;
}

.record-reduce-item {
    background: rgba(239, 68, 68, 0.15);
    border-left: 4px solid #ef4444;
}

.record-reason {
    flex: 1;
}

.record-points {
    font-weight: 700;
}

.record-add-item .record-points { color: #22c55e; }
.record-reduce-item .record-points { color: #ef4444; }

.record-time {
    font-size: 12px;
    color: #666;
}

.record-chart-wrap {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    overflow: hidden;
}

.record-chart-wrap canvas {
    display: block;
    max-width: 100%;
}

@media (max-width: 992px) {
    #student-record-modal .modal-content {
        min-width: 95% !important;
    }
}

/* 课堂工具页面 */
.tools-hint {
    color: #666;
    font-size: 14px;
    margin-top: 8px;
}

/* 课堂工具页标题区为深色底，提示与 h2 同为白色 */
#classroom-tools-page .page-header .tools-hint {
    color: #fff;
    text-shadow: 1px 1px 0 #1e5a8e;
}

.classroom-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.tool-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid #e5e7eb;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(42, 117, 187, 0.2);
    border-color: #ffcb05;
}

.tool-card-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.tool-card h3 {
    color: #2a75bb;
    margin-bottom: 8px;
    font-size: 18px;
}

.tool-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* 扭蛋机弹窗 */
.gashapon-modal-content {
    max-width: 420px;
    text-align: center;
}

.gashapon-machine {
    position: relative;
    margin: 24px 0;
}

.gashapon-body {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 16px;
    padding: 20px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.3);
    border: 4px solid #922b21;
}

.gashapon-window {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 24px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #333;
}

.gashapon-capsule {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ffcb05 0%, #f59e0b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #1e5a8e;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 3px solid #e5a00d;
    padding: 4px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gashapon-capsule.spinning {
    animation: capsuleSpin 2.5s ease-out forwards;
}

@keyframes capsuleSpin {
    0% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(180deg) scale(1.1); }
    40% { transform: rotate(360deg) scale(1); }
    60% { transform: rotate(540deg) scale(1.1); }
    80% { transform: rotate(720deg) scale(1); }
    100% { transform: rotate(900deg) scale(1); }
}

.gashapon-chute {
    height: 20px;
    background: #333;
    margin-top: 8px;
    border-radius: 4px;
}

.gashapon-knob {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffcb05 0%, #f59e0b 100%);
    border: 4px solid #e5a00d;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #1e5a8e;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.15s;
}

.gashapon-knob:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
}

.gashapon-knob:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.gashapon-hint {
    color: #666;
    font-size: 14px;
    margin-top: 12px;
}

/* ===== 答题闯关弹窗 ===== */
.quiz-challenge-modal-content {
    max-width: 640px;
    width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px 32px 24px;
}
.qc-progress {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 12px;
}
.qc-question {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 20px;
}
.qc-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.qc-opt {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    gap: 12px;
}
.qc-opt:hover {
    border-color: #2a75bb;
    background: #f0f7ff;
}
.qc-opt-label {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #334155;
}
.qc-opt-text {
    font-size: 15px;
    color: #334155;
    line-height: 1.4;
}
.qc-opt-correct {
    border-color: #16a34a !important;
    background: #dcfce7 !important;
}
.qc-opt-correct .qc-opt-label {
    background: #16a34a;
    color: #fff;
}
.qc-opt-wrong {
    border-color: #dc2626 !important;
    background: #fee2e2 !important;
}
.qc-opt-wrong .qc-opt-label {
    background: #dc2626;
    color: #fff;
}
.qc-explain {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.qc-explain-correct {
    background: #dcfce7;
    color: #166534;
}
.qc-explain-wrong {
    background: #fee2e2;
    color: #991b1b;
}
.qc-btn-row {
    text-align: right;
}
.qc-summary-line {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 8px;
}
.qc-summary-exp {
    font-size: 18px;
    color: #2a75bb;
    margin-bottom: 8px;
}
.qc-summary-saved {
    color: #16a34a;
    font-size: 15px;
    margin-top: 8px;
}
.qc-summary-err {
    color: #dc2626;
    font-size: 14px;
    margin-top: 8px;
}
.qc-review-title {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin: 20px 0 10px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.qc-review-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.qc-review-q {
    font-size: 14px;
    color: #0f172a;
    line-height: 1.5;
    margin-bottom: 4px;
}
.qc-icon-ok { color: #16a34a; font-weight: 700; }
.qc-icon-fail { color: #dc2626; font-weight: 700; }
.qc-review-wrong {
    font-size: 13px;
    color: #dc2626;
    margin-left: 20px;
}
.qc-review-right {
    font-size: 13px;
    color: #16a34a;
    font-weight: 600;
    margin-left: 20px;
}
.qc-review-explain {
    font-size: 13px;
    color: #64748b;
    margin-left: 20px;
    margin-top: 2px;
}

.update-notes-content {
    text-align: left;
    line-height: 1.8;
    color: #333;
}

.update-notes-content p {
    margin-bottom: 12px;
}

/* 学生奖章墙（道馆徽章盒风格；卡片布局与 student_portal 奖章页一致） */
.medal-wall-modal-content {
    max-width: min(1120px, 96vw);
    width: 96%;
    min-height: 420px;
    max-height: min(92vh, 900px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background: linear-gradient(165deg, #1a2744 0%, #0f172a 45%, #1e293b 100%);
    color: #e2e8f0;
    border: 4px solid #334155;
    box-shadow: inset 0 0 0 2px #475569, 0 12px 40px rgba(0, 0, 0, 0.45);
    border-radius: 16px;
}

/* 教师端：奖章墙弹窗几乎占满视口（覆盖 modal.css 中 .modal-content 的 max-width:500px），内容区可滚动 */
#student-medals-wall-modal.modal {
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

#student-medals-wall-modal .medal-wall-modal-content.modal-content {
    width: min(98vw, 1600px) !important;
    max-width: min(98vw, 1600px) !important;
    height: min(96vh, 1400px) !important;
    max-height: 96vh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px 22px 24px !important;
    margin: 0 auto;
}

#student-medals-wall-modal .medal-wall-case {
    margin-top: 10px;
    min-height: 0;
}

.medal-wall-modal-content h2 {
    color: #f8fafc;
    margin-top: 0;
}

.medal-wall-modal-content .close {
    color: #94a3b8;
}

.medal-wall-modal-content .close:hover {
    color: #f8fafc;
}

.medal-wall-subtitle {
    font-size: 15px;
    color: #cbd5e1;
    margin: 0 0 16px;
    line-height: 1.5;
}

.medal-wall-case {
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.medal-case-empty-hint {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 16px;
}

.medal-case-frame {
    background: radial-gradient(ellipse at center, #0b1220 0%, #020617 100%);
    border-radius: 14px;
    padding: 18px 14px 22px;
    border: 3px solid #1e3a5f;
    box-shadow: inset 0 4px 24px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.medal-case-frame-muted {
    opacity: 0.85;
    margin-top: 12px;
}

.medal-case-grid {
    display: grid;
    /* minmax(0,1fr) 避免子项最小内容宽度把列撑出容器（四列溢出） */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .medal-case-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.medal-slot {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 4px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.medal-slot-ring {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.35);
    box-sizing: border-box;
    pointer-events: none;
}

.medal-slot-earned {
    background: radial-gradient(circle at 30% 25%, #fef08a 0%, #ca8a04 35%, #854d0e 75%, #422006 100%);
    /* 不用向外偏移的 box-shadow，避免视觉上凸出格子/深蓝底区域 */
    box-shadow: inset 0 -4px 0 rgba(113, 63, 18, 0.5), 0 2px 10px rgba(0, 0, 0, 0.28);
}

.medal-slot-earned .medal-slot-ring {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.22);
}

.medal-slot-empty {
    background: rgba(15, 23, 42, 0.6);
}

.medal-slot-empty .medal-slot-ring {
    border-style: dashed;
    border-color: rgba(71, 85, 105, 0.6);
}

.medal-slot-icon {
    position: relative;
    z-index: 1;
    font-size: 22px;
    color: #fef9c3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    line-height: 1;
    margin-bottom: 2px;
}

.medal-slot-title {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 800;
    color: #1c1917;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.medal-slot-student {
    position: relative;
    z-index: 1;
    font-size: 8px;
    font-weight: 700;
    color: #422006;
    margin-top: 1px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.medal-slot-meta {
    position: relative;
    z-index: 1;
    font-size: 9px;
    color: #292524;
    opacity: 0.9;
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.medal-slot-date {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 600;
    color: #422006;
    margin-top: 2px;
}

.medal-wall-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 18px 0 10px;
}

.medal-wall-section-title--challenge {
    margin-top: 22px;
}

.medal-slot--pet-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.medal-slot--pet-image.medal-slot-earned {
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.35);
}

.medal-slot-pet-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 6px 4px 7px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
    border-radius: 0 0 50% 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    min-height: 42%;
    box-sizing: border-box;
}

.medal-slot--pet-image .medal-slot-title {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    -webkit-line-clamp: 3;
}

.medal-slot--pet-image .medal-slot-student,
.medal-slot--pet-image .medal-slot-meta,
.medal-slot--pet-image .medal-slot-date {
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.medal-slot--pet-image .medal-slot-student {
    color: #f8fafc;
}

.medal-slot--pet-image .medal-slot-date {
    color: #cbd5e1;
}

/* 分组队伍 · 教师端 */
.teacher-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.team-card {
    background: #fff;
    border: 4px solid #ffcb05;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 0 #c7a008, 0 8px 24px rgba(0,0,0,0.1);
}
.team-card-title {
    color: #2a75bb;
    margin-bottom: 12px;
    font-size: 18px;
}
.team-card-members {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.team-member-chip {
    display: flex;
    align-items: center;
    gap: 12px;
}
.team-member-chip img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffcb05;
}
.team-member-meta {
    font-size: 14px;
    color: #1e5a8e;
}
.team-member-power {
    font-weight: 700;
    color: #2a75bb;
}
.team-cap-badge {
    background: #2a75bb;
    color: #ffcb05;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 4px;
}
.team-card-total {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px dashed #ffcb05;
    font-size: 16px;
    color: #1e5a8e;
}
/* 分组队伍弹窗：底部按钮固定，组员表格区域单独滚轮 */
.modal-content.team-group-modal {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 720px);
    overflow: hidden;
}
.team-group-modal-title {
    flex-shrink: 0;
    margin-top: 0;
}
.team-group-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}
.team-modal-members-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.team-modal-members-wrap > label {
    flex-shrink: 0;
}
.team-member-pick-list {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: min(320px, 42vh);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
    background: #fafafa;
}
.team-member-pick-empty {
    margin: 12px !important;
    padding: 8px;
}
.team-member-pick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #1e5a8e;
}
.team-member-pick-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e8f2fa;
    color: #1e5a8e;
    font-weight: 700;
    text-align: left;
    padding: 10px 8px;
    border-bottom: 2px solid #2a75bb;
    box-shadow: 0 1px 0 rgba(42, 117, 187, 0.12);
}
.team-member-pick-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    background: #fafafa;
}
.team-member-pick-table tbody tr.team-member-pick-tr:not(.team-member-pick-row-captain) {
    cursor: pointer;
}
.team-member-pick-table tbody tr:hover td {
    background: rgba(42, 117, 187, 0.07);
}
.team-member-pick-table .col-check {
    width: 52px;
    text-align: center;
}
.team-member-pick-table .col-power {
    width: 64px;
    text-align: right;
    font-weight: 600;
    color: #2a75bb;
}
.team-member-pick-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
}
.team-member-pick-row-captain td {
    color: #64748b;
}
.team-member-pick-row-captain input[type="checkbox"] {
    cursor: not-allowed;
}
.team-group-modal-actions {
    flex-shrink: 0;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 2px dashed #ffcb05;
    background: #fff;
}
.battle-mode-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.battle-mode-tab {
    background: #fff;
    border: 3px solid #2a75bb;
    color: #2a75bb;
}
.battle-mode-tab.active {
    background: #ffcb05;
    border-color: #c7a008;
    color: #1e5a8e;
    font-weight: 800;
}
.season-rank-team-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2a75bb, #1e5a8e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 3px solid #ffcb05;
    box-shadow: 0 2px 0 #c7a008;
}