/* Merged: tokens.css, animations.css, base.css, buttons.css, cards.css, hub.css, modals.css, toast.css */

/* --- tokens.css --- */
/* =========================================
   css/tokens.css — 白净版设计令牌 (Design Tokens)
   星火学苑控制台 · Clean White Theme
   ========================================= */

:root {
    /* --- 背景色 --- */
    --bg: #f0f0f0;
    --card: #ffffff;
    --card-img: #e8e8e8;

    /* --- 文字色 --- */
    --text: #2c2c2c;
    --text-sec: #888888;

    /* --- 边框 --- */
    --border: #e0e0e0;

    /* --- 主题色 --- */
    --accent: #4a90d9;
    --accent-light: #e8f1fb;
    --success: #27ae60;
    --danger: #e74c3c;
    --warn: #f39c12;

    /* --- 圆角规范 --- */
    --r: 12px;
    --r-lg: 14px;
    --r-pill: 50px;

    /* --- 兼容旧变量名（过渡期，供未更新的 JS 引用） --- */
    --bg-color: var(--bg);
    --card-bg: var(--card);
    --card-img-bg: var(--card-img);
    --card-name-bg: var(--card);
    --panel-bg: var(--bg);
    --bar-bg: #ffffff;
    --header-bg: var(--text);
    --header-text: #ffffff;
    --primary-color: var(--accent);
    --accent-color: var(--accent);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --text-primary: var(--text);
    --text-secondary: var(--text-sec);
    --text-on-primary: #ffffff;
    --border-color: var(--border);
    --border-card: var(--border);
    --divider-color: var(--bg);
    --star-color: var(--warn);
    --radius-sm: 8px;
    --radius-md: var(--r);
    --radius-lg: var(--r-lg);
    --radius-xl: 24px;
    --shadow: none;
}

/* --- animations.css --- */
/* css/animations.css - 全局动画库 */

/* --- 通用弹窗 --- */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- 火箭游戏：流星 --- */
@keyframes meteorFly {
    0% { transform: rotate(-35deg) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: rotate(-35deg) translateX(-150vw); opacity: 0; }
}


/* --- 火箭游戏：发射 --- */
@keyframes flyHigh {
    0% { transform: translateY(0) scale(1); }
    20% { transform: translateY(10px) scale(0.9); }
    100% { transform: translateY(-1200px) scale(1); }
}


/* --- Boss战：经验条强力闪烁 --- */
@keyframes xpGainFlash {
    0% { background-color: #ffffff; opacity: 1; }
    50% { background-color: #ffd700; opacity: 0.8; }
    100% { background-color: #76FF03; opacity: 1; }
}

/* --- Boss战：伤害数字旋转 --- */
@keyframes spinProjectile {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================================
   新增：垂钓模式专用动画 (从 fishing.css 移来)
   ========================================= */

/* 2. 鱼挣扎动画 */
@keyframes fishStruggle {
    from { transform: translateX(-50%) rotate(-15deg); }
    to { transform: translateX(-50%) rotate(15deg); }
}

/* 3. 鱼收杆飞升动画 (修复版) */
@keyframes flyToBag {
    0% { 
        /* ✅ 必须保留 translateX(-50%) 才能保持居中 */
        transform: translateX(-50%) scale(1) translateY(0); 
        opacity: 1; 
    }
    100% { 
        /* 上升同时也保持水平居中 */
        transform: translateX(-50%) scale(0.2) translateY(-800px); 
        opacity: 0; 
    }
}

/* 4. 名字泡泡弹出动画 (Q弹效果) */
/* 注意：这里必须包含 translateX(-50%) 以保持气泡水平居中 */
@keyframes bubblePop {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.5) translateY(-10px); 
    }
    60% {
        transform: translateX(-50%) scale(1.1) translateY(0); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1) translateY(0); 
    }
}


/* =========================================
   新增：垂钓模式 - 氛围特效动画
   ========================================= */

/* 1. 气泡上升动画 */
@keyframes bubbleRise {
    0% { 
        transform: translateY(0) scale(0.5); 
        opacity: 0; 
    }
    20% { 
        opacity: 0.8; 
    }
    100% { 
        transform: translateY(-200px) scale(1.2); 
        opacity: 0; 
    }
}

/* =========================================
   新增：玻璃流光特效 (Glass Sheen)
   ========================================= */

@keyframes glassSweep {
    0% { transform: translateX(-150%) skewX(-25deg); }
    100% { transform: translateX(150%) skewX(-25deg); }
}

/* --- base.css --- */
/* =========================================
   css/base.css — 全局重置 + 字体 + 触控优化 + 场景切换
   星火学苑控制台 · Clean White Theme
   ========================================= */

/* --- 全局重置 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-drag: none;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    font-family: "Microsoft YaHei", "PingFang SC", Tahoma, sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: var(--bg);
    color: var(--text);
    font-weight: 700;
    line-height: 1.5;
}

/* --- 触控一体机专用优化 --- */
button:active,
[class*="btn"]:active,
.class-selector:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s !important;
}

/* --- 场景切换逻辑 --- */
.scene {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s;
}

.scene.hidden {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    display: none !important;
}

.scene.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    display: flex !important;
}

/* --- 隐藏原生数字输入框小箭头 --- */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* --- buttons.css --- */
/* =========================================
   css/buttons.css — 统一按钮系统
   星火学苑控制台 · Clean White Theme
   ========================================= */

/* === 通用按钮基类 === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
    cursor: pointer; border: none; transition: opacity 0.15s;
    min-height: 44px; white-space: nowrap;
}

.btn:active { opacity: 0.7; transform: scale(0.97); }

/* --- 圆形图标按钮 --- */
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.1rem; border: none; background: transparent; }

/* --- 按钮颜色变体 --- */
.btn-white { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }

/* --- 激活状态 (优先级最高) --- */
.btn.active,
.btn-icon.active,
.btn-white.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

.btn-icon i,
.btn-icon i.fas,
.btn-icon i.fab {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 操作按钮 (胶囊形，旧系统兼容) --- */
.btn-rect {
    border: none;
    background: var(--text);
    color: #fff;
    padding: 10px 30px;
    border-radius: var(--r-pill);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    font-weight: bold;
}

.btn-rect:active {
    transform: scale(0.96);
    opacity: 0.85;
}

.btn-rect.cancel {
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border);
}

.btn-rect.cancel:active {
    background: var(--bg);
}

.btn-rect-success {
    background-color: var(--success);
    color: white;
}

.btn-rect-danger {
    background-color: var(--danger);
    color: white;
}

/* --- 小按钮 (旧系统兼容) --- */
.btn-small {
    padding: 8px 18px;
    border-radius: var(--r-pill);
    border: none;
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    transition: transform 0.1s;
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-small::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 48px);
    height: max(100%, 48px);
    background: transparent;
    z-index: 1;
}

.btn-small:active {
    transform: scale(0.96);
}

.btn-small.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn-small.btn-success {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/* --- 关闭按钮 (胶囊) --- */
.btn-close {
    border: 1.5px solid var(--border);
    background: #fff;
    padding: 10px 30px;
    border-radius: var(--r-pill);
    font-size: 1rem;
    cursor: pointer;
    color: var(--text);
    transition: transform 0.1s;
}

/* --- 关闭按钮 (圆形×) --- */
.btn-close-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-sec);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s, transform 0.1s;
}

.btn-close-small:active {
    opacity: 0.7;
    transform: scale(0.97);
}

/* --- 撤销按钮 (游戏侧栏) --- */
.btn-undo {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-undo:active {
    color: #fff;
    transform: rotate(-30deg);
}

.btn-undo.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- 返回按钮 (游戏侧栏) --- */
.btn-back {
    border: none;
    background: var(--accent);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.btn-back span {
    display: none;
}

/* --- 右侧栏 (游戏通用 Header) --- */
.game-header {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    z-index: 100;
    background: rgba(15, 22, 35, 0.9);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.game-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 1px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin-top: 20px;
}

/* 游戏场景侧边栏底部控制容器 */
.header-bottom-controls {
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* 游戏场景中的快捷功能按钮 */
.btn-game-icon {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-game-icon:active {
    color: var(--accent);
    transform: scale(0.95);
}

.btn-game-icon.active {
    color: var(--accent);
}

/* --- cards.css --- */
/* =========================================
   css/cards.css — 学生卡片 + 经验条 + 宠物/饰品显示
   星火学苑控制台 · Clean White Theme
   ========================================= */

/* --- 学生卡片包裹层 --- */
#scene-hub .student-card-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.1s ease-out;
}

#scene-hub .student-card-wrapper:active {
    transform: scale(0.96);
}

/* --- 学生卡片主体 --- */
#scene-hub .student-card {
    --xp: 0%;
    --xp-color: #7bb8f0;
    background: var(--card);
    border-radius: var(--r-lg);
    border: 2px solid #eceff2;
    border-right: none; /* 右侧边框改为经验条边框 */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    transition: background-color 0.1s ease-out;
}

/* XP 经验条 = 卡片右侧边框（轨道 + 填充） */
#scene-hub .student-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    background: rgba(44, 44, 44, 0.10); /* 轨道 */
    z-index: 6;
    pointer-events: none;
    border-top-right-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
}

#scene-hub .student-card::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6px;
    height: var(--xp);
    background: var(--xp-color); /* 填充 */
    z-index: 7;
    pointer-events: none;
    border-bottom-right-radius: var(--r-lg);
}

/* 流失惩罚经验欠款红条 */
#scene-hub .penalty-bar {
    position: absolute;
    right: 0;
    bottom: calc(var(--xp) - var(--penalty-xp, 0%));
    width: 6px;
    height: var(--penalty-xp, 0%);
    background: #e74c3c;
    z-index: 8;
    pointer-events: none;
    transition: height 0.3s, bottom 0.3s;
    border-bottom-right-radius: var(--r-lg);
}

#scene-hub .student-card-wrapper:active .student-card {
    background-color: var(--accent-light);
}

/* 缺勤状态 */
#scene-hub .student-card.absent {
    opacity: 0.35;
    background-color: var(--bg);
    border-color: var(--border);
    pointer-events: none;
}

/* 考勤模式 */
#scene-hub .student-card.attendance-mode {
    border-color: var(--accent);
    cursor: pointer;
    pointer-events: auto !important;
}

#scene-hub .student-card.attendance-mode.absent {
    border-color: var(--danger);
}

/* --- 等级角标 --- */
.level-badge {
    background: var(--text);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
}

/* --- 本赛季冠军徽章 --- */
.champion-badge {
    color: #f1c40f;
    font-size: 0.75rem;
    flex-shrink: 0;
    opacity: 0.9;
}

/* --- A1 极简无框布局：左右结构 --- */
.student-card-layout {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
}

.student-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- 右侧挂饰栏（无分割线/无槽边框） --- */
.student-card-right-col {
    --slot-gap: 1px;
    --slot-pad-y: 1px;
    --slot-pad-x: 2px;
    height: calc(100% - 4px);
    aspect-ratio: 1 / 3;
    width: auto;
    flex: 0 0 auto;
    border-left: none;
    background: transparent;
    padding: var(--slot-pad-y) var(--slot-pad-x);
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: stretch;
    gap: var(--slot-gap);
    margin-bottom: 4px;
    margin-right: 6px; /* 给右侧经验边框让位 */
    /* 防止人少时挂饰栏过大：限制总高度，保持 aspect-ratio 正方形 */
    max-height: 168px; /* 3 × 56px 正方形上限 */
    align-self: center; /* 触顶后垂直居中 */
}

.ornament-slot-a1 {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    background: #dfe3e8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* 放置底层提示图标 */
}

.ornament-slot-a1 .ornament-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #7f8893;
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
  width: auto;
  line-height: 1;
}

.ornament-slot-a1 img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.ornament-slot-a1 .ink-badge-icon {
    width: 90%;
    height: 90%;
    display: block;
    background-repeat: no-repeat;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* 三槽统一大小（取消第一槽特殊放大） */
.student-card-right-col .ornament-slot-a1:first-child img {
    width: 90%;
    height: 90%;
}

/* 空槽只保留极淡图标提示 */
.ornament-slot-a1.empty {
    opacity: 1;
}

.ornament-slot-a1.empty .ornament-hint {
    opacity: 0.48; /* 空槽更明显一点 */
}

#scene-hub .ornament-slot-a1.miner-treasure-slot {
    background: #fff;
    border: 1px solid #d7e2ef;
}

#scene-hub .ornament-slot-a1.miner-treasure-slot .ornament-hint {
    color: #7f8893;
    opacity: 0.28;
}

#scene-hub .ornament-slot-a1.rarity-stage-1 {
    border: 1px solid #d7e2ef;
    background: #fff;
}

#scene-hub .ornament-slot-a1.rarity-stage-2 {
    border: 1px solid #5bc5f2;
    background:
        radial-gradient(circle at 50% 24%, rgba(91, 197, 242, 0.22), transparent 46%),
        #eefaff;
}

#scene-hub .ornament-slot-a1.rarity-stage-3 {
    border: 1px solid #b47cff;
    background:
        radial-gradient(circle at 50% 24%, rgba(180, 124, 255, 0.24), transparent 46%),
        #f7f0ff;
}

#scene-hub .ornament-slot-a1.rarity-stage-4 {
    border: 1px solid #ffbd2e;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 214, 92, 0.38), transparent 48%),
        #fff6d9;
}

/* --- 宠物显示区域 --- */
.pet-display {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 8px;
}

.pet-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    will-change: transform;
}

.needs-pet-icon {
    font-size: 3rem;
    color: var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* --- 名字底部信息行 (对齐测试页的卡片信息单元) --- */
.card-info-cell {
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
    min-width: 0;
}

.student-name {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.hunger-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* 饥饿度：正式卡片只保留名字旁图标（不再显示底部饥饿条） */

/* --- 快捷加分选中状态 --- */
.student-card.quick-score-selected,
.rocket-card.quick-score-selected,
.boss-card.quick-score-selected,
.fishing-card.quick-score-selected,
.brawl-card.quick-score-selected {
    border: 3px solid var(--accent) !important;
}

#scene-hub .student-card-wrapper:has(.student-card.quick-score-selected) {
    transform: scale(1.02);
}

/* --- hub.css --- */
/* =========================================
   css/hub.css — Hub 底栏 + 网格布局 + 田字格/分组布局
   星火学苑控制台 · Clean White Theme
   ========================================= */

/* --- 主网格容器 --- */
.grid-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-rows, 1), minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    width: 100%;
    height: calc(100% - 64px);
    max-width: 100%;
    margin: 0;
    overflow: hidden !important;
}

/* --- Hub 底部控制栏 (白底 + 细边框) --- */
.control-bar {
    height: 64px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-top: 1.5px solid var(--border);
    border-radius: var(--r);
}

.control-bar-group {
    display: flex;
    gap: 6px;
    align-items: center;
    height: auto;
}

/* --- 班级选择器 --- */
.class-selector {
    padding: 10px 35px 10px 20px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--text);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: transform 0.1s;
    min-width: 140px;
}

.class-selector:active {
    border-color: var(--accent);
    transform: scale(0.96);
}

.class-selector:focus {
    border-color: var(--accent);
}

.class-selector::-ms-expand {
    display: none;
}

.custom-class-selector {
    position: relative;
    display: inline-block;
}

/* =========================================
   田字格模式 (Quadrant Layout)
   ========================================= */
#scene-hub .grid-container.quadrant-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    max-width: 100%;
    height: calc(100% - 64px);
    overflow: hidden;
    background: #d4d8db; /* 加深的灰色底色，以突出白色模块 */
    border-radius: var(--r-lg) var(--r-lg) 0 0; /* 适配大圆角 */
}

.hub-quadrant {
    background: #ffffff; /* 保留白色背景 */
    border: none; /* 彻底移除外边框 */
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.hub-quadrant-title {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    writing-mode: vertical-rl;
    text-orientation: upright; /* 让英文字母和数字直立显示 */
    letter-spacing: 4px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

/* 四个小组的颜色设定 */
.hub-quadrant-title.t1 { background: var(--accent); color: #fff; }
.hub-quadrant-title.t2 { background: var(--success); color: #fff; }
.hub-quadrant-title.t3 { background: var(--warn); color: #fff; }
.hub-quadrant-title.t4 { background: var(--danger); color: #fff; }

.hub-quadrant-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-rows, 1), minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    min-height: 0;
    overflow: hidden;
}

/* =========================================
   PC 大屏主页：宠物队伍准备大厅
   ========================================= */
#scene-hub {
    background: #0b1726;
}

#scene-hub .grid-container.quadrant-mode {
    height: calc(100% - 82px);
    padding: 8px;
    gap: 8px;
    background: #0b1726;
    border-radius: 0;
}

#scene-hub .hub-quadrant {
    position: relative;
    flex-direction: column;
    background: #fbfdff;
    border: 3px solid var(--team-color, #2d8fff);
    border-radius: 14px;
    overflow: hidden;
}

#scene-hub .hub-quadrant-title {
    width: 100%;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: 0;
    color: #07111f;
    background: #fbfdff;
    font-size: 1rem;
    line-height: 1;
}

#scene-hub .hub-quadrant-title .team-mark {
    min-width: 72px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 12px;
    background: var(--team-color, #2d8fff);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
}

#scene-hub .hub-quadrant.t1 {
    --team-color: #1976e8;
    --team-rgb: 25, 118, 232;
    --platform-light: #d9ecff;
    --platform-mid: #8dc6ff;
    --platform-inner: #78aee8;
    --platform-edge: #5aa6f2;
}

#scene-hub .hub-quadrant.t2 {
    --team-color: #1f9e43;
    --team-rgb: 31, 158, 67;
    --platform-light: #dcf6e3;
    --platform-mid: #99ddb0;
    --platform-inner: #7acb94;
    --platform-edge: #61bd7f;
}

#scene-hub .hub-quadrant.t3 {
    --team-color: #f59e0b;
    --team-rgb: 245, 158, 11;
    --platform-light: #fff0cb;
    --platform-mid: #ffd37a;
    --platform-inner: #efb557;
    --platform-edge: #f3bd4f;
}

#scene-hub .hub-quadrant.t4 {
    --team-color: #ef3d3d;
    --team-rgb: 239, 61, 61;
    --platform-light: #ffe0e0;
    --platform-mid: #ffaaaa;
    --platform-inner: #df8585;
    --platform-edge: #f08c8c;
}

#scene-hub .hub-quadrant-grid {
    flex: 1;
    --hub-card-gap: 8px;
    --hub-cols: 1;
    --hub-card-width: 188px;
    --hub-card-height: 334px;
    display: grid;
    grid-template-columns: repeat(var(--hub-cols), var(--hub-card-width));
    grid-template-rows: none;
    grid-auto-rows: var(--hub-card-height);
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: var(--hub-card-gap);
    padding: 7px 10px 12px;
    min-height: 0;
    overflow: hidden;
}

#scene-hub .hub-quadrant-grid > .student-card-wrapper {
    min-width: 0;
    width: var(--hub-card-width);
    height: var(--hub-card-height);
}

#scene-hub .grid-container:not(.quadrant-mode) {
    --hub-cols: 1;
    --hub-card-width: 230px;
    --hub-card-height: 409px;
    grid-template-columns: repeat(var(--hub-cols), var(--hub-card-width));
    grid-auto-rows: var(--hub-card-height);
    grid-template-rows: none;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    gap: 10px;
}

#scene-hub .grid-container:not(.quadrant-mode).hub-few-students {
    gap: 12px;
}

#scene-hub .grid-container:not(.quadrant-mode) > .student-card-wrapper {
    width: var(--hub-card-width);
    height: var(--hub-card-height);
}

#scene-hub .student-card {
    border: 1.5px solid rgba(25, 118, 232, 0.22);
    border-right: 1.5px solid rgba(25, 118, 232, 0.22);
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

#scene-hub .penalty-bar {
    display: none;
}

#scene-hub .student-card::after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 4px;
    background: rgba(var(--team-rgb, 25, 118, 232), 0.16);
    border-top-right-radius: 0;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    z-index: 5;
    pointer-events: none;
}

#scene-hub .student-card::before {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: auto;
    bottom: 0;
    width: var(--xp);
    height: 4px;
    background: var(--team-color, #1976e8);
    border-top-right-radius: 0;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 4px;
    z-index: 6;
    pointer-events: none;
}

#scene-hub .student-card-layout {
    position: absolute;
    inset: 0;
    display: block;
}

#scene-hub .student-slot-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--team-color, #1976e8);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

#scene-hub .student-card-main {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#scene-hub .pet-display {
    --hub-platform-bottom: 8px;
    --hub-pet-offset: 9px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 8px 10px;
    align-items: flex-end;
    position: relative;
    isolation: isolate;
}

#scene-hub .pet-img {
    width: 92%;
    height: 92%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transform: translateY(var(--hub-pet-offset));
}

#scene-hub .pet-display::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: var(--hub-platform-bottom);
    width: 82%;
    height: 25px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--platform-light, #d9ecff);
    border: 1px solid var(--platform-edge, #5aa6f2);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.72),
        inset 0 -6px 0 var(--platform-mid, #8dc6ff);
    z-index: 1;
    pointer-events: none;
}

#scene-hub .pet-display::after {
    display: none;
}

#scene-hub .student-card.needs-pet .pet-display::before,
#scene-hub .student-card.needs-pet .pet-display::after {
    display: none;
}

#scene-hub .card-info-cell {
    min-height: 32px;
    padding: 3px 5px 4px;
    gap: 5px;
    margin: 0;
    overflow: visible;
}

#scene-hub .level-badge {
    padding: 2px 5px;
    border-radius: 5px;
    background: #07111f;
    font-size: 0.64rem;
    line-height: 1.1;
}

#scene-hub .student-name {
    max-width: 86px;
    font-size: 1rem;
    line-height: 1.25;
    padding-bottom: 1px;
}

#scene-hub .hunger-icon {
    font-size: 0.75rem;
}

#scene-hub .student-card-right-col {
    width: auto;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 2px;
    margin: 0 7px 7px;
    padding: 0;
}

#scene-hub .ornament-slot-a1 {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    border: 1px solid #d7e2ef;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

#scene-hub .ornament-slot-a1 .ornament-hint {
    font-size: 0.9rem;
    opacity: 0.28;
}

#scene-hub .ornament-slot-a1.empty .ornament-hint {
    opacity: 0.42;
}

#scene-hub .ornament-slot-a1.miner-treasure-slot {
    background: #fff;
    border-color: #d7e2ef;
}

#scene-hub .ornament-slot-a1.miner-treasure-slot .ornament-hint {
    color: #7f8893;
    opacity: 0.28;
}

#scene-hub .ornament-slot-a1.rarity-stage-1 {
    border-color: #d7e2ef;
    background: #fff;
}

#scene-hub .ornament-slot-a1.rarity-stage-2 {
    border-color: #5bc5f2;
    background:
        radial-gradient(circle at 50% 24%, rgba(91, 197, 242, 0.22), transparent 46%),
        #eefaff;
}

#scene-hub .ornament-slot-a1.rarity-stage-3 {
    border-color: #b47cff;
    background:
        radial-gradient(circle at 50% 24%, rgba(180, 124, 255, 0.24), transparent 46%),
        #f7f0ff;
}

#scene-hub .ornament-slot-a1.rarity-stage-4 {
    border-color: #ffbd2e;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 214, 92, 0.38), transparent 48%),
        #fff6d9;
}

#scene-hub .ornament-slot-a1.ink-badge-slot.ink-rarity-common {
    border-color: #b8c4d2;
    background:
        radial-gradient(circle at 50% 24%, rgba(170, 190, 210, 0.24), transparent 48%),
        #f3f6fa;
}

#scene-hub .ornament-slot-a1.ink-badge-slot.ink-rarity-rare {
    border-color: #35c978;
    background:
        radial-gradient(circle at 50% 24%, rgba(56, 211, 132, 0.24), transparent 48%),
        #ecfff4;
}

#scene-hub .ornament-slot-a1.ink-badge-slot.ink-rarity-epic {
    border-color: #b47cff;
    background:
        radial-gradient(circle at 50% 24%, rgba(180, 124, 255, 0.26), transparent 48%),
        #f7f0ff;
}

#scene-hub .ornament-slot-a1.ink-badge-slot.ink-rarity-legendary {
    border-color: #ffbd2e;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 214, 92, 0.38), transparent 48%),
        #fff6d9;
}

#scene-hub .ornament-slot-a1.ink-badge-slot.ink-rarity-mythic {
    border-color: #35d7ff;
    background:
        radial-gradient(circle at 30% 24%, rgba(91, 222, 255, 0.34), transparent 42%),
        radial-gradient(circle at 72% 28%, rgba(255, 130, 220, 0.22), transparent 42%),
        #eefbff;
}

#scene-hub .control-bar {
    height: 82px;
    margin: 0 8px 8px;
    padding: 8px 12px;
    border: 2px solid #21344c;
    border-radius: 16px;
    background: #0b1726;
}

#scene-hub .control-bar-group {
    gap: 10px;
}

#scene-hub .btn-white {
    width: 58px;
    height: 58px;
    padding: 0;
    border: 2px solid #30445f;
    border-radius: 12px;
    background: #152235;
    color: #eaf3ff;
    font-size: 1.45rem;
}

#scene-hub .btn-white.active,
#scene-hub .btn-icon.active {
    background: #2b7fe6 !important;
    border-color: #6bb2ff !important;
    color: #fff !important;
}

@media (max-height: 760px), (max-width: 1360px) {
    #scene-hub .hub-quadrant-grid {
        --hub-card-gap: 7px;
        padding: 7px 9px 10px;
    }

    #scene-hub .pet-display {
        --hub-platform-bottom: 7px;
        --hub-pet-offset: 8px;
        padding: 10px 8px;
    }

    #scene-hub .pet-img {
        width: 88%;
        height: 88%;
    }

    #scene-hub .card-info-cell {
        min-height: 30px;
        padding: 2px 5px 3px;
    }

    #scene-hub .student-card-right-col {
        margin-bottom: 6px;
    }
}

/* =========================================
   动态分组网格布局
   ========================================= */

/* --- 1组: 单一全屏 --- */
.quadrant-mode.groups-1,
.grouped-mode.groups-1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}

/* --- 2组: 单行水平平分 --- */
.quadrant-mode.groups-2,
.grouped-mode.groups-2 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
}

/* --- 3组: 上2下1，下排居中且等宽 --- */
.quadrant-mode.groups-3,
.grouped-mode.groups-3 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

.quadrant-mode.groups-3 > *:nth-child(3),
.grouped-mode.groups-3 > *:nth-child(3) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
}

#scene-hub .grid-container.quadrant-mode.groups-3 > *:nth-child(3) { width: calc(50% - 4px) !important; }
#scene-game-rocket .grid-container.game-grid.quadrant-mode.groups-3 > *:nth-child(3) { width: 50% !important; }
.boss-grid.grouped-mode.groups-3 > *:nth-child(3) { width: calc(50% - 1px) !important; }
.fishing-grid.quadrant-mode.groups-3 > *:nth-child(3) { width: calc(50% - 1px) !important; }

#scene-hub .grid-container.quadrant-mode.groups-2 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    justify-items: stretch;
}

#scene-hub .grid-container.quadrant-mode.groups-2 > .hub-quadrant {
    width: auto !important;
}

#scene-hub .grid-container.quadrant-mode.groups-2:not(.groups-2-stacked) .student-name {
    max-width: 100px;
    font-size: 1.08rem;
}

#scene-hub .grid-container.quadrant-mode.groups-2:not(.groups-2-stacked) .level-badge {
    font-size: 0.68rem;
}

#scene-hub .grid-container.quadrant-mode.groups-2.groups-2-stacked {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    justify-items: center;
}

#scene-hub .grid-container.quadrant-mode.groups-2.groups-2-stacked > .hub-quadrant {
    width: var(--hub-group-width, 100%) !important;
    max-width: 100%;
}

#scene-hub .grid-container.quadrant-mode.groups-3 {
    justify-items: center;
}

#scene-hub .grid-container.quadrant-mode.groups-3 > .hub-quadrant {
    width: var(--hub-group-width, calc(50% - 4px)) !important;
}

#scene-hub .grid-container.quadrant-mode.groups-3 > *:nth-child(3) {
    width: var(--hub-group-width, calc(50% - 4px)) !important;
}

#scene-hub .grid-container.quadrant-mode.hub-groups-row {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: 1fr !important;
    justify-items: stretch;
}

#scene-hub .grid-container.quadrant-mode.hub-groups-row > .hub-quadrant {
    width: auto !important;
}

#scene-hub .grid-container.quadrant-mode.hub-groups-row > *:nth-child(3) {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: auto !important;
}

#scene-hub .grid-container.quadrant-mode.hub-few-groups .hub-quadrant-grid {
    --hub-card-gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
}

#scene-hub .grid-container.quadrant-mode.hub-single-active-group .student-name,
#scene-hub .grid-container.quadrant-mode.hub-few-groups .student-name {
    max-width: 112px;
}

/* --- 针对 Rocket 的十字线边框 --- */
.grid-container.game-grid.quadrant-mode.groups-1 .rocket-quadrant { border: none !important; }

.grid-container.game-grid.quadrant-mode.groups-2 .rocket-quadrant { border: none !important; }
.grid-container.game-grid.quadrant-mode.groups-2 .rocket-quadrant:nth-child(1) {
    border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.grid-container.game-grid.quadrant-mode.groups-3 .rocket-quadrant { border: none !important; }
.grid-container.game-grid.quadrant-mode.groups-3 .rocket-quadrant:nth-child(1) {
    border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}
.grid-container.game-grid.quadrant-mode.groups-3 .rocket-quadrant:nth-child(2) {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* =========================================
   饥饿度视觉反馈
   ========================================= */

/* 饥饿度视觉：名字旁图标 + 底部进度条（不再使用灰色遮罩） */
.pet-display {
    position: relative;
}

/* 饥饿表情图标（名字旁内联显示） */
.hunger-icon {
    font-size: inherit;
    margin-left: 2px;
    vertical-align: baseline;
}

/* --- spacer 工具类 --- */
.spacer { flex: 1; }

/* --- modals.css --- */
/* =========================================
   css/modals.css — 弹窗通用 + 所有特例弹窗
   星火学苑控制台 · Clean White Theme
   ========================================= */

/* =========================================
   1. 通用弹窗基础
   ========================================= */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: var(--r-lg);
    width: 90%;
    max-width: 600px;
    text-align: center;
    border: 1.5px solid var(--border);
    color: var(--text);
    position: relative;
}

/* 弹窗头部 */
.modal-content h2,
.modal-content h3 {
    color: var(--text);
}

/* 通用弹窗头部栏 (纯白版) */
.manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background: #fff;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* 黑色胶囊状标题 */
.modal-content .manager-header h2,
.manager-header h2 {
    margin: 0;
    color: #fff;
    background: var(--text);
    padding: 8px 20px;
    border-radius: var(--r-pill);
    font-weight: 900;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 工具栏 */
.manager-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background: var(--bg);
    padding: 10px 20px;
    border-radius: 0;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;
}

.manager-toolbar .btn-small {
    border-radius: var(--r-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 二级弹窗层级 */
#custom-modal {
    z-index: 6000 !important;
}

#custom-modal .modal-content {
    background: #fff;
    border: 1.5px solid var(--border);
    color: var(--text);
    max-width: 400px;
    padding: 30px 24px;
}

#custom-modal .cm-message {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text);
}

#custom-modal .modal-content {
    background: #fff;
    border: 1.5px solid var(--border);
    color: var(--text);
}

#custom-modal .cm-input {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1.5px solid var(--border) !important;
}

#modal-create-tag {
    z-index: 4500 !important;
}

/* =========================================
   2. 游戏选择弹窗
   ========================================= */
.game-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 20px 0;
}

.game-card {
    background: #fff;
    border-radius: var(--r-lg);
    width: 120px;
    cursor: pointer;
    transition: transform 0.1s;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

.game-card:active {
    transform: scale(0.96);
    border-color: var(--accent);
}

.game-card .icon-box {
    background: var(--card-img);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #aaa;
    margin: 5px;
    border-radius: 16px;
}

.game-card h3 {
    text-align: center;
    padding: 6px 4px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
    margin: 0;
    background: transparent;
}

.game-card p {
    text-align: center;
    padding: 0 4px 6px;
    font-size: 0.7rem;
    color: var(--text-sec);
    margin: 0;
}

.game-card-miner {
    width: 180px;
}

.game-card-actions {
    display: flex;
    gap: 8px;
    padding: 0 10px 12px;
}

.game-card-mode-btn {
    flex: 1;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
    color: #5b3411;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 8px 4px;
    cursor: pointer;
}

.game-card-mode-btn.alt {
    background: linear-gradient(180deg, #dbeafe 0%, #60a5fa 100%);
    color: #102a4d;
}

.game-card-mode-btn:active {
    transform: scale(0.97);
}

/* =========================================
   3. 蛋选择弹窗
   ========================================= */
.egg-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px 0;
    max-height: 60vh;
    overflow-y: auto;
}

.egg-option {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 10px;
    border: 1.5px solid var(--border);
    transition: transform 0.1s;
}

.egg-option:active {
    transform: scale(0.96);
    border-color: var(--accent);
}

.egg-option img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.egg-name {
    margin-top: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-sec);
}

/* =========================================
   4. 班级与分组管理弹窗
   ========================================= */
.class-manager-content {
    max-width: 1200px !important;
    width: 95% !important;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.class-controls, .student-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.manager-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    min-height: 0;
    padding: 15px;
}

/* 顶部学生池 */
.student-pool {
    flex: 0 0 auto;
    background: var(--bg);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--border);
    max-height: 40%;
}

.pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: var(--bg);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 1px solid var(--border);
}

.pool-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text);
}

.pool-count {
    background: var(--accent);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--r);
    font-size: 0.9rem;
    font-weight: bold;
}

.student-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}

.manager-student-item {
    background: #fff;
    padding: 0 4px 0 16px;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: 1.5px solid var(--border);
    transition: transform 0.1s;
    height: 46px;
}

.manager-student-item:active { transform: scale(0.96); }
.manager-student-item.selected {
    border-color: var(--accent);
    background: var(--accent-light);
    transform: scale(1.02);
}

.student-name-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-name-badge .name {
    font-weight: bold;
    font-size: 1.25rem;
    white-space: nowrap;
    padding-right: 8px;
    color: var(--text);
}

.btn-edit-student {
    background: none;
    border: none;
    color: var(--text-sec);
    font-size: 1rem;
    cursor: pointer;
    padding: 10px 12px;
    line-height: 1;
    border-radius: 15px;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-edit-student:active {
    background: var(--bg);
    color: var(--accent);
}

.btn-delete-student {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    border-radius: 15px;
}

.btn-delete-student:active {
    background: var(--bg);
}

/* 底部小组区域 */
.group-quadrants {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: 15px;
    overflow-y: auto;
    padding-bottom: 10px;
    align-content: start;
}

.group-box {
    flex: 1;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.1s;
    overflow: hidden;
}

.group-box:active {
    background: var(--accent-light);
    border-color: var(--accent);
}

.group-box.flash-success { background: #d4edda; border-color: #28a745; }
.group-box.flash-error { background: #f8d7da; border-color: #dc3545; }

.group-box h4 {
    margin: 0;
    padding: 8px 14px;
    background: var(--bg);
    border-bottom: 1.5px solid var(--border);
    text-align: center;
    color: var(--text);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-members {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: stretch;
    gap: 5px;
    overflow-y: auto;
    pointer-events: none;
}

.group-student-tag {
    flex: 0 0 auto;
    height: 46px;
    background: var(--bg);
    border: none;
    padding: 6px 10px 6px 14px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    white-space: nowrap;
    color: var(--text);
}

.group-student-tag .order-num {
    color: var(--text-sec);
    font-size: 0.75rem;
    margin-right: 4px;
}

.group-student-tag .name {
    padding-right: 4px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remove-from-group {
    background: none;
    border: none;
    color: var(--danger);
    font-weight: bold;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-from-group:active {
    background: var(--bg);
}

/* =========================================
   5. 课堂统计弹窗
   ========================================= */
#modal-class-stats .modal-content {
    max-width: 1200px;
    width: 95vw;
    height: auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--border);
    padding: 0 !important;
    overflow: hidden;
}

#modal-class-stats .manager-header {
    margin-bottom: 0;
    flex-shrink: 0;
}

#modal-class-stats .manager-header h2 {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    margin: 0;
}

.stats-title {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    margin: 0;
}

/* 分栏布局 */
.stats-layout {
    display: flex;
    min-height: 550px;
}
.stats-left {
    flex: 2.8;
    padding: 20px 30px 20px 20px;
    background: #fff;
    border-right: 2px dashed #ccc;
}
.stats-right-wrap {
    flex: 1;
    position: relative;
    min-width: 300px;
}
.stats-right {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 20px 20px 20px 30px;
    background: #fff;
    overflow-y: auto;
}

/* 自定义滚动条 */
.stats-scrollable::-webkit-scrollbar {
    width: 8px;
}
.stats-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.stats-scrollable::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}
.stats-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--text-sec);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-content: start;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title span {
    color: var(--text-sec);
    font-size: 0.85rem;
    font-weight: normal;
}

/* 排名条通用样式 */
.rank-groups { display: flex; gap: 12px; }
.rank-group { flex: 1; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; }
.rank-group-title {
    padding: 8px 12px; font-weight: 700; font-size: 0.9rem;
    border-bottom: 1.5px solid var(--border); background: var(--bg);
    display: flex; align-items: center; gap: 6px;
    color: var(--text);
}
.rank-row {
    display: flex; align-items: center; padding: 8px 12px; gap: 10px;
    border-bottom: 1px solid #f0f0f0; font-size: 1.05rem;
    color: var(--text);
    transition: background-color 0.2s;
}
.rank-row.top-1 { background-color: rgba(241, 196, 15, 0.12); }
.rank-row.top-2 { background-color: rgba(189, 195, 199, 0.2); }
.rank-row.top-3 { background-color: rgba(205, 127, 50, 0.12); }
.rank-row:last-child { border-bottom: none; }
.rank-num { width: 24px; text-align: center; font-weight: 700; color: var(--text-sec); }
.rank-name { flex: 1; font-weight: 800; }
.rank-xp { color: var(--text-sec); font-weight: 600; font-size: 0.85rem; }

.stats-footer {
    text-align: center;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    margin-top: 0;
    display: flex;
    justify-content: center;
}

.stats-footer .btn-rect {
    font-size: 1.1rem;
    padding: 10px 40px;
}

/* =========================================
   6. Boss 盲盒弹窗
   ========================================= */
#modal-boss-loot .modal-content {
    max-width: 900px;
    background: #fff;
    border: 1.5px solid var(--border);
}

.loot-title-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.loot-title {
    color: var(--warn);
    font-size: 2.2rem;
    grid-column: 2;
    margin: 0;
}

.loot-subtitle {
    color: var(--text-sec);
    font-size: 1.2rem;
    margin-top: 10px;
}

.loot-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    justify-self: start;
    margin: 0;
    padding: 8px 18px;
    border-radius: 10px;
    background: rgba(244, 143, 22, 0.15);
    border: 2px solid rgba(244, 143, 22, 0.55);
    color: var(--warn);
    font-size: clamp(1.7rem, 2.8vmin, 2.3rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.loot-countdown.is-warning {
    background: rgba(231, 76, 60, 0.16);
    border-color: rgba(231, 76, 60, 0.5);
    color: #c0392b;
}

.modal-loot-content {
    max-width: 900px;
    background: #fff;
    border: 1.5px solid var(--border);
}

.loot-header {
    text-align: center;
    margin-bottom: 20px;
}

.loot-students-flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.loot-footer {
    text-align: center;
    display: flex;
    justify-content: center;
}

/* =========================================
   7. 全局设置弹窗 (已抽离到 settings.css)
   ========================================= */

/* =========================================
   8. 玩法说明弹窗
   ========================================= */
#modal-how-to-play .modal-content {
    max-width: 90vw;
    width: 90vw;
    height: 90vh;
    padding: 3vmin;
    background: #fff;
    border: 1.5px solid var(--border);
    text-align: left;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.howto-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vmin;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5vmin;
    flex-shrink: 0;
}

.howto-header h2 {
    margin: 0;
    color: var(--accent);
    font-size: 3.5vmin;
    letter-spacing: 0.2vmin;
}

.howto-content {
    max-width: 90vw;
    width: 90vw;
    height: 90vh;
    padding: 3vmin;
    background: #fff;
    border: 1.5px solid var(--border);
    text-align: left;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vmin;
    flex: 1;
    min-height: 0;
}

.howto-col {
    display: flex;
    flex-direction: column;
    gap: 1.5vmin;
    min-height: 0;
}

.howto-card {
    background: var(--bg);
    padding: 2vmin;
    border-radius: var(--r-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: 0;
}

.howto-card h3 {
    margin: 0 0 1.5vmin 0;
    font-size: 2.5vmin;
}

.howto-card p {
    margin: 0;
    color: var(--text);
}

.howto-text {
    margin: 0 0 1vmin 0;
    font-size: 1.8vmin;
    color: var(--text);
}

.howto-tip {
    font-size: 1.6vmin;
    color: var(--text-sec);
    border-top: 1px dashed var(--border);
    padding-top: 1vmin;
    margin-top: 1vmin;
}

.howto-glory-card {
    background: var(--bg);
    padding: 2.5vmin;
    border-radius: var(--r-lg);
    border: 1.5px solid var(--border);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vmin;
    box-sizing: border-box;
    min-height: 0;
}

.howto-glory-title {
    margin: 0;
    color: var(--warn);
    font-size: 2.8vmin;
    text-align: center;
    flex-shrink: 0;
}

.howto-glory-item {
    flex-shrink: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.howto-glory-item p {
    margin: 0;
    color: var(--text);
    font-size: 1.8vmin;
    line-height: 1.4;
}

.howto-glory-label {
    color: var(--warn);
    font-size: 2.2vmin;
    display: block;
    margin-bottom: 0.5vmin;
}

.howto-footer {
    text-align: center;
    margin-top: 2vmin;
    padding-top: 2vmin;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.howto-cta {
    color: var(--accent);
    font-weight: bold;
    font-size: 2.4vmin;
    margin: 0;
    letter-spacing: 0.1vmin;
}

/* =========================================
   9. 批量编辑弹窗
   ========================================= */
#modal-batch-edit .modal-content {
    max-width: 600px;
    background: #fff;
    border: 1.5px solid var(--border);
}

#modal-batch-edit textarea {
    width: 100%;
    height: 250px;
    padding: 15px;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    font-size: 1.1rem;
    resize: none;
    margin-bottom: 20px;
    font-family: inherit;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
}

.modal-batch-edit-content {
    max-width: 600px;
}

.batch-edit-desc {
    text-align: left;
    color: var(--text-sec);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.batch-edit-warning {
    color: var(--danger);
}

.batch-edit-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* =========================================
   10. 新建标签弹窗
   ========================================= */
#modal-create-tag .modal-content {
    max-width: 400px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
}

#modal-create-tag h3 {
    color: var(--text);
    margin: 0 0 20px 0;
    font-size: 1.3rem;
    text-align: center;
    background: var(--text);
    color: #fff;
    padding: 8px 20px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tag-stage-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.tag-stage-selector label {
    color: var(--text);
    cursor: pointer;
}

.tag-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.tag-input:focus {
    outline: none;
    border-color: var(--accent);
}

.tag-input::placeholder {
    color: var(--text-sec);
}

.tag-create-actions {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.tag-create-actions .btn-rect {
    flex: 1;
}

/* =========================================
   11. 通用对话框
   ========================================= */
.modal-dialog-content {
    max-width: 400px;
    text-align: center;
    padding: 30px 24px;
}

.cm-message {
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

.cm-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    text-align: center;
}

.cm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cm-buttons button {
    flex: 1;
}

/* =========================================
   12. 图鉴收藏弹窗 (Collection / 冒险基地)
   ========================================= */
.collection-content {
    max-width: 1000px !important;
    width: 95% !important;
    height: auto !important; /* 移除死高度以贴合内部 */
    background: transparent !important; /* 透明背景，让内部的 ps-container 接管 */
    border: none !important; /* 移除白边框 */
    padding: 0 !important;
    overflow: visible !important; /* 允许悬浮关闭按钮超出 */
    display: flex;
    flex-direction: column;
}

/* 隐藏不再需要的旧顶栏和顶级标签页，由冒险基地内部接管 */
.collection-header {
    display: none !important;
}

.collection-main-tabs {
    display: none !important;
}

.main-tab-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text-sec);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s;
    outline: none;
    position: relative;
}

.main-tab-btn:active {
    background: var(--bg);
    color: var(--text);
}

.main-tab-btn.active {
    color: var(--accent);
}

.main-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--accent);
    border-radius: 3px;
}

.collection-game-container {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.collection-game-container.active {
    display: flex;
}

/* 标签页导航 (Tabs) */
.aquarium-tabs {
    display: flex;
    background: #fff;
    padding: 0;
    border-bottom: 1.5px solid var(--border);
}

.tab-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text-sec);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.1s;
    border-radius: 0;
    margin-right: 0;
    text-align: center;
    position: relative;
}

.tab-btn.active {
    color: var(--accent);
    transform: none;
    background: transparent;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--accent);
    border-radius: 3px;
}

.tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: #fff;
    touch-action: pan-y;
}

.tab-content::-webkit-scrollbar {
    width: 8px;
}

.tab-content::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb:active {
    background: var(--text-sec);
}

.tab-content.hidden {
    display: none;
}

/* 图鉴网格 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}

/* 鱼卡片 / 火箭卡片 */
.fish-card,
.rocket-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 0;
    padding-bottom: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.1s;
    color: var(--text);
    overflow: hidden;
}

.fish-card:active,
.rocket-card:active {
    transform: scale(0.96);
    border-color: var(--accent);
}

.fish-card.locked {
    background: var(--bg);
    border: 1.5px solid var(--border);
    opacity: 0.8;
    justify-content: center;
}

.fish-card.locked::before {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 4rem;
    font-weight: 900;
    color: var(--border);
    z-index: 1;
}

.fish-card.locked img {
    visibility: hidden;
}

.fish-card img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    margin: 5px;
    background: var(--card-img);
    border-radius: var(--r);
}

.fish-card.locked img {
    background: var(--bg);
}

.fish-count-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: bold;
}

/* 火箭/鱼卡片装备按钮 */
.rocket-card .btn-equip,
.fish-card .btn-equip,
.fishing-card .btn-equip {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 5px 15px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s;
    font-weight: 700;
}

.rocket-card .btn-equip:active,
.fish-card .btn-equip:active,
.fishing-card .btn-equip:active {
    transform: translateX(-50%) scale(0.96);
}

.rocket-card .btn-equip.equipped,
.fish-card .btn-equip.equipped,
.fishing-card .btn-equip.equipped {
    background: var(--text-sec);
    color: white;
    cursor: pointer;
}

.rocket-card.equipped {
    border: 1.5px solid var(--accent);
}

.rocket-card img {
    height: 100px;
    width: auto;
    object-fit: contain;
    margin: 5px;
    background: var(--card-img);
    border-radius: var(--r);
    padding: 10px;
}

/* --- 倒计时冒号 --- */
.timer-colon {
    font-weight: bold;
    color: var(--text);
    margin: 0 5px;
    font-size: 1.3rem;
}

/* --- toast.css --- */
/* =========================================
   css/toast.css — Toast 提示系统
   星火学苑控制台 · Clean White Theme
   黑底白字，正数绿色 #5eea8d，负数红色 #ff6b6b
   ========================================= */

#global-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.toast-msg {
    background: var(--text);
    border: none;
    border-radius: 16px;
    padding: 12px 28px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 14px;

    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    will-change: transform, opacity;
}

.toast-msg.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.toast-msg .toast-name {
    color: #fff;
}

.toast-msg .toast-reason {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 400;
}

.toast-msg .toast-xp {
    font-size: 1.6rem;
    font-weight: 900;
}

.toast-msg .toast-xp.positive {
    color: #5eea8d;
}

.toast-msg .toast-xp.negative {
    color: #ff6b6b;
}