/* base.css — auto-extracted from index.html
   Category: base
   Blocks: 1125
*/

:root {
    /* ══════════════════════════════════════
       糖果泡泡 · Candy Pop Design System
       马卡龙粉主色 + 薄荷/天空蓝/暖金/薰衣草辅色
       ══════════════════════════════════════ */

    /* 背景系统 — 奶油米调 */
    --bg-body: #F6F7F9;
    --bg-card: #FFFFFF;
    --bg-subtle: #F1F3F7;
    --bg-tint: #E4E7EC;
    --bg-overlay: rgba(17, 24, 39, 0.35);

    /* 边框 — 米色暖灰调 */
    --border: #E2E5EA;
    --border-hover: #D0D5DD;
    --border-focus: #818CF8;

    /* 文字层级 — 深蓝墨色 */
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;

    /* 品牌色 — 马卡龙黄（主操作/激活态） */
    --brand-50: #EEF2FF;
    --brand-100: #E0E7FF;
    --brand-200: #C7D2FE;
    --brand-300: #A5B4FC;
    --brand-400: #818CF8;
    --brand-500: #4F46E5;
    --brand-600: #4338CA;
    --brand-700: #3730A3;
    --brand-800: #312E81;

    /* 辅助色 — 薄荷绿（清新自然） */
    --teal-50: #ECFDF5;
    --teal-100: #D1FAE5;
    --teal-200: #A7F3D0;
    --teal-300: #34D399;
    --teal-400: #10B981;
    --teal-500: #059669;
    --teal-600: #047857;

    /* 强调色 — 暖金（奖励/能量/金币） */
    --gold-50: #FFF8E8;
    --gold-100: #FEF3C7;
    --gold-200: #FCD34D;
    --gold-400: #FBBF24;
    --gold-500: #F59E0B;
    --gold-600: #B45309;

    /* 珊瑚泡泡（CTA/重要操作点缀） */
    --coral-50: #FFEAF0;
    --coral-100: #FFC9D8;
    --coral-400: #FB7185;
    --coral-500: #E11D48;

    /* 天空蓝（信息/链接） */
    --sky-50: #EFF6FF;
    --sky-100: #BFDBFE;
    --sky-400: #60A5FA;
    --sky-500: #2563EB;

    /* 薰衣草紫（稀有/特殊） */
    --lavender-50: #F3E8FF;
    --lavender-100: #DDD6FE;
    --lavender-400: #7C3AED;
    --lavender-500: #7C3AED;

    /* 功能状态色 */
    --positive: #22C55E;
    --positive-bg: #ECFDF5;
    --warning: #F59E0B;
    --warning-bg: #FFFBEB;
    --negative: #EF4444;
    --negative-bg: #FEF2F2;
    --info: #2563EB;
    --info-bg: #EFF6FF;

    /* 圆角尺度 — 超大圆角更圆润可爱 */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* 字体 */
    --font-sans: 'Inter', -apple-system, 'PingFang SC', 'ui-sans-serif', system-ui, 'BlinkMacSystemFont', '"Segoe UI"', sans-serif;

    /* 阴影 — 暖中性柔和层次阴影 */
    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.06);
    --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 6px 16px rgba(17, 24, 39, 0.10), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.14), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 24px 48px rgba(17, 24, 39, 0.18), 0 8px 16px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 8px rgba(17, 24, 39, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.6);
    --shadow-hover: 0 8px 24px rgba(17, 24, 39, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.9);

    /* 过渡曲线 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 玻璃态 */
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-blur: blur(20px) saturate(1.5);

    /* 品牌光晕 — 卡片 hover 发光 */
    --glow-brand: 0 0 0 3px rgba(79, 70, 229, 0.14), 0 4px 16px rgba(79, 70, 229, 0.14);
    --glow-soft: 0 8px 30px rgba(17, 24, 39, 0.14);
    --glow-gold: 0 0 0 3px rgba(255, 180, 61, 0.14), 0 4px 16px rgba(255, 180, 61, 0.14);

    /* 背景渐变 */
    --bg-gradient: linear-gradient(135deg, #F6F7F9 0%, #FFFFFF 35%, #EEF2FF 65%, #F6F7F9 100%);
}

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

body { font-family: var(--font-sans); background: var(--bg-body); min-height: 100vh; color: var(--text-primary); -webkit-font-smoothing: antialiased; }

/* ============================================================
           统一设计系统 · Design System
           ============================================================ */

/* ── 排版 Typography ── */

.text-h1 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }

.text-h2 { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }

.text-h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }

.text-h4 { font-size: 15px; font-weight: 600; line-height: 1.4; }

.text-body { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--text-secondary); }

.text-sm { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-secondary); }

.text-xs { font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--text-muted); }

.text-mono { font-family: 'SF Mono','Fira Code','Consolas',monospace; }

/* ── 间距 Spacing ── */

.gap-2 { gap: 8px; }

.gap-3 { gap: 12px; }

.gap-4 { gap: 16px; }

.gap-5 { gap: 20px; }

.gap-6 { gap: 24px; }

.gap-8 { gap: 32px; }

.p-3 { padding: 12px; }

.p-4 { padding: 16px; }

.p-5 { padding: 20px; }

.p-6 { padding: 24px; }

.px-4 { padding-left: 16px; padding-right: 16px; }

.px-6 { padding-left: 24px; padding-right: 24px; }

/* ── 按钮系统 Button System（Premium 升级版） ── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: var(--radius-md); cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none; position: relative; overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 50%);
    pointer-events: none; border-radius: inherit;
}
.btn:active { transform: translateY(0) scale(0.97) !important; }

/* 尺寸 */
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-md { height: 38px; padding: 0 20px; font-size: 14px; }
.btn-lg { height: 46px; padding: 0 28px; font-size: 16px; border-radius: var(--radius-lg); }

/* Primary — 品牌渐变主按钮 */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 50%, var(--brand-600) 100%);
    color: #FFFFFF;
    box-shadow:
        0 2px 8px rgba(79, 70, 229,0.4),
        0 1px 2px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 22px rgba(79, 70, 229,0.5),
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.3);
    filter: brightness(1.03);
}

/* Secondary — 白底次按钮 */
.btn-secondary {
    background: linear-gradient(180deg, #ffffff 0%, #F9FAFB 100%);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-secondary:hover {
    background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
    border-color: var(--brand-300);
    color: var(--brand-600);
    box-shadow: 0 2px 8px rgba(79, 70, 229,0.12);
    transform: translateY(-1px);
}

/* Ghost — 透明幽灵按钮 */
.btn-ghost {
    background: transparent;
    color: var(--brand-500);
}
.btn-ghost:hover {
    background: var(--brand-50);
    color: var(--brand-600);
}

/* Outline — 描边按钮 */
.btn-outline {
    background: linear-gradient(180deg, #fff 0%, #F9FAFB 100%);
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
    border-color: var(--brand-400);
    color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: 0 2px 10px rgba(79, 70, 229,0.12);
    transform: translateY(-1px);
}

/* Danger — 危险操作 */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239,68,68,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.12);
}
.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,68,68,0.38);
    filter: brightness(1.05);
}

/* Success — 成功确认 */
.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(34,197,94,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.12);
}
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,197,94,0.38);
    filter: brightness(1.05);
}

/* Disabled */
.btn-disabled,
.btn:disabled {
    opacity: 0.42; cursor: not-allowed; pointer-events: none;
    filter: grayscale(0.3);
}

/* 图标按钮 */

.btn-icon { height: 36px; width: 36px; padding: 0; border-radius: var(--radius-sm); font-size: 16px; }

/* ── 卡片系统 Card System ── */

.card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); }

.card-hover:hover { box-shadow: var(--shadow-hover); border-color: var(--brand-300); transform: translateY(-2px); }

.card-dashed { border: 2px dashed var(--border); background: var(--bg-subtle); box-shadow: none; }

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

/* ── 标签 Tag ── */

.tag { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }

.tag-brand { background: var(--brand-50); color: var(--brand-600); }

.tag-gold { background: var(--gold-50); color: var(--gold-600); }

.tag-red { background: var(--red-50); color: var(--red-600); }

.tag-slate { background: #F3F4F6; color: #6B7280; }

/* ── 输入框 Input ── */

.input { height: 40px; padding: 0 14px; border: 2px solid var(--border); border-radius: var(--radius-md); font-size: 14px; background: var(--bg-subtle); transition: all 0.2s var(--ease-out); font-family: inherit; }

.input:focus { outline: none; border-color: var(--brand-400); background: white; box-shadow: 0 0 0 4px var(--brand-100); }

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

/* ── 分割线 Divider ── */

.divider { height: 1px; background: var(--border); margin: 16px 0; border: none; }

/* 自定义滚动条 */

.scrollbar-thin::-webkit-scrollbar { width: 8px; }

.scrollbar-thin::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }

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

/* ── 弹窗 UI 样式 (参考参考项目) ── */

/* 颜色 */

.bg-orange-50 { background-color: var(--brand-50); }

.bg-orange-500 { background-color: var(--brand-500); }

.bg-orange-600 { background-color: var(--brand-600); }

.bg-amber-50 { background-color: rgb(255, 251, 235); }

.bg-slate-50 { background-color: rgb(248, 250, 252); }

.bg-slate-100 { background-color: rgb(241, 245, 249); }

.bg-slate-200 { background-color: rgb(226, 232, 240); }

.bg-white { background-color: white; }

.text-orange-500 { color: var(--brand-500); }

.text-orange-600 { color: var(--brand-600); }

.text-amber-600 { color: rgb(217, 119, 6); }

.text-slate-300 { color: rgb(203, 213, 225); }

.text-slate-400 { color: rgb(148, 163, 184); }

.text-slate-500 { color: rgb(100, 116, 139); }

.text-slate-600 { color: rgb(71, 85, 105); }

.text-slate-700 { color: rgb(51, 65, 85); }

.text-slate-800 { color: rgb(30, 41, 59); }

.text-white { color: white; }

/* 边框 */

.border-orange-500 { border-color: var(--brand-500); }

.border-orange-300 { border-color: var(--brand-300); }

.border-slate-100 { border-color: rgb(241, 245, 249); }

.border-slate-200 { border-color: rgb(226, 232, 240); }

.border-transparent { border-color: transparent; }

/* 布局 */

.flex { display: flex; }

.flex-col { flex-direction: column; }

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

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.flex-1 { flex: 1; }

.grid { display: grid; }

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

.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* 间距 */

.gap-2 { gap: 8px; }

.gap-3 { gap: 12px; }

.gap-4 { gap: 16px; }

.gap-6 { gap: 24px; }

.p-3 { padding: 12px; }

.p-4 { padding: 16px; }

.p-6 { padding: 24px; }

.px-6 { padding-left: 24px; padding-right: 24px; }

.py-2 { padding-top: 8px; padding-bottom: 8px; }

.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }

.py-3 { padding-top: 12px; padding-bottom: 12px; }

.py-4 { padding-top: 16px; padding-bottom: 16px; }

.pt-2 { padding-top: 8px; }

.pt-5 { padding-top: 20px; }

.pb-3 { padding-bottom: 12px; }

.mt-0\.5 { margin-top: 2px; }

.mb-1 { margin-bottom: 4px; }

.mb-2 { margin-bottom: 8px; }

.mb-3 { margin-bottom: 12px; }

.mb-4 { margin-bottom: 16px; }

.mb-6 { margin-bottom: 24px; }

/* 字体 */

.text-xs { font-size: 12px; }

.text-sm { font-size: 14px; }

.text-base { font-size: 16px; }

.text-lg { font-size: 18px; }

.text-4xl { font-size: 2rem; }

.text-5xl { font-size: 2.5rem; }

.font-bold { font-weight: 700; }

.font-semibold { font-weight: 600; }

/* 圆角 */

.rounded-lg { border-radius: 8px; }

.rounded-xl { border-radius: 12px; }

.rounded-2xl { border-radius: 16px; }

.rounded-full { border-radius: 9999px; }

/* 阴影 */

.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* 其他 */

.overflow-hidden { overflow: hidden; }

.overflow-y-auto { overflow-y: auto; }

.hidden { display: none; }

.relative { position: relative; }

.absolute { position: absolute; }

.top-3 { top: 12px; }

.right-3 { right: 12px; }

.z-10 { z-index: 10; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.cursor-pointer { cursor: pointer; }

.backdrop-blur-sm { backdrop-filter: blur(4px); }

.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }

.transition-all { transition: all 0.2s ease; }

.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }

.hover\:bg-orange-50:hover { background-color: var(--brand-50); }

.hover\:bg-orange-600:hover { background-color: var(--brand-600); }

.hover\:border-orange-300:hover { border-color: var(--brand-300); }

.hover\:text-slate-700:hover { color: rgb(51, 65, 85); }

.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

.leading-none { line-height: 1; }

.pointer-events-auto { pointer-events: auto; }

.pointer-events-none { pointer-events: none; }

/* 定位布局 - modal overlay */
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-16 { top: 64px; }
.bottom-0 { bottom: 0; }
/* 宽高 */
.w-full { width: 100%; }
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }
.h-24 { height: 96px; }
.max-w-4xl { max-width: 56rem; }
/* 字号 */
.text-6xl { font-size: 3.75rem; }
/* padding 垂直 */
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
/* margin bottom */
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
/* opacity */
.opacity-70 { opacity: 0.7; }
/* z-index */
.z-50 { z-index: 50; }
/* bg-black overlay */
.bg-black\/40 { background-color: rgba(0,0,0,0.4); }

/* 弹窗胶囊标签按钮 (参考参考图样式) */

.modal-tab-btn { padding: 6px 14px; border: 1.5px solid #E5E7EB; border-radius: 8px; background: white; color: #6B7280; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }

.modal-tab-btn:hover { border-color: #FDBA74; color: #BE123C; }

.modal-tab-btn.active { border-color: #FDA4AF; color: #BE123C; background: #F3F4F6; }

/* 登录页面 — 童趣糖果系波浪渐变 */

/* 班级选择 */

/* 弹窗基础样式 */

/* 主应用 */

/* 顶部导航 - 弹性高度，内容自动换行 */

.top-nav { background: #fff; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border-bottom: 1px solid var(--border); min-height: 60px; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 10px; }

/* 主导航 - 自动换行 */

/* 主内容 */

/* 宠物大厅 */

.search-btn:hover { border-color: var(--brand-400); }

.tag-filter-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: white; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s var(--ease-out); }

.tag-filter-btn:hover { border-color: var(--brand-400); color: var(--brand-500); background: var(--brand-50); }

.tag-filter-btn.active { background: var(--brand-400); color: #FFFFFF; border-color: var(--brand-400); }

/* ====== 按钮增强（与上方 Button System 合并，此处为兼容旧 class 调用）====== */
.btn { padding: 10px 20px; border-radius: var(--radius-md); border: none; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 50%); pointer-events:none; border-radius:inherit; }
.btn:active { transform:scale(0.97) !important; }

.btn-primary { background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); color: #FFFFFF; box-shadow: 0 2px 8px rgba(79, 70, 229,0.38), inset 0 1px 0 rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.4); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(79, 70, 229,0.38); filter:brightness(1.04); }

.btn-secondary { background: linear-gradient(180deg, #fff, #f9fafb); color: var(--text-secondary); border: 1.5px solid var(--border); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: linear-gradient(180deg, #f9fafb, #f3f4f6); border-color: var(--brand-300); color: var(--brand-600); transform: translateY(-1px); }

.btn-outline { background: linear-gradient(180deg, #fff, #fafbfc); border: 1.5px solid var(--border); color: var(--text-secondary); box-shadow: var(--shadow-xs); }
.btn-outline:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); box-shadow: 0 2px 10px rgba(79, 70, 229,0.1); transform: translateY(-1px); }

.btn-primary-sm { padding: 6px 14px; border-radius: var(--radius-sm); background: var(--brand-400); color: #FFFFFF; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all 0.2s var(--ease-out); }

.btn-primary-sm:hover { background: var(--brand-500); }

.btn-outline-sm { padding: 6px 14px; border-radius: var(--radius-sm); background: white; border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; cursor: pointer; white-space: nowrap; }

.btn-outline-sm:hover { border-color: var(--brand-200); color: var(--brand-600); }

/* 学生卡片 */

/* 空状态 */

/* 极速记分面板 */

/* 学生详情弹窗 */

.go-house-btn { background: #FFFFFF; color: #5B7EF7; border: 1.5px solid #5B7EF7; padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; box-shadow: 0 4px 12px rgba(91,126,247,0.18); }

.go-house-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 70, 229,0.4); }

/* 成长记录条目样式 */

/* 能量面板样式 */

/* 宠物小屋 - v5 完整版 */

@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================================================
           排行榜 - 严格按截图实现
           ============================================================ */

/* 二级 Tab 栏 — 分段控制器（Segmented Control） */

.tabbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 24px;
    border-bottom: none;
}

/* 统一容器：灰色底 + 圆角，包裹所有选项 */
.tab-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #E5E7EB;
    padding: 4px;
    border-radius: 14px;
    box-shadow: inset 0 1px 3px rgba(45, 37, 35, 0.06), 0 1px 2px rgba(45, 37, 35, 0.03);
}

.tab-btn {
    font-size: 14px;
    padding: 8px 20px;
    position: relative;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1.4;
    color: #6B7280;
    white-space: nowrap;
    z-index: 1;
}

.tab-btn:hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.45);
}

/* 激活态：实色填充 + 高对比度深色字 */
.tab-btn.active {
    color: #FFFFFF;
    font-weight: 600;
    background: linear-gradient(135deg, #A5B4FC 0%, #4338CA 100%);
    border-radius: 10px;
    box-shadow:
        0 2px 8px rgba(67, 56, 202, 0.30),
        0 1px 2px rgba(67, 56, 202, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: none;
    z-index: 2;
    text-shadow: none;
}

/* 移除旧的下划线样式 */
.tab-btn.active::after {
    display: none;
}

.tab-divider { width: 1px; height: 20px; background: #E5E7EB; margin: 0 20px; }

/* 榜单头部 */

.board-header {
            display: flex; align-items: flex-start; justify-content: space-between;
            margin-bottom: 16px;
        }

.board-title { 
            font-size: 18px; 
            font-weight: 600; 
            color: #111827; 
            line-height: 1.5;
        }

.board-time  { 
            font-size: 13px; 
            color: #6B7280; 
            margin-top: 4px;
            display: block;
        }

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

/* 刷新按钮 - 按截图：浅色背景圆角按钮 */

.btn-icon-refresh {
            width: 34px; height: 34px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            color: var(--text-secondary); font-size: 17px;
            cursor: pointer; border: 1px solid var(--border);
            background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
            box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative; overflow: hidden;
        }

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

.btn-icon-refresh:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-500); box-shadow: 0 2px 10px rgba(79, 70, 229,0.18); transform: translateY(-1px); }

.btn-icon-refresh:active { transform: scale(0.94); }

/* 导出按钮 - 按截图：浅色背景带边框 */

.btn-export {
            height: 34px; padding: 0 18px; border: 1.5px solid var(--border);
            border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
            color: var(--text-secondary);
            background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
            box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7);
            cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-flex; align-items: center; justify-content: center;
            line-height: 1; white-space: nowrap;
            position: relative; overflow: hidden;
        }

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

.btn-export:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-600); box-shadow: 0 2px 10px rgba(79, 70, 229,0.16); transform: translateY(-1px); }

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

/* 列表行 */

/* 奖牌/排名 32x32 */

/* 头像/宠物图标 36x36 */

/* 姓名 */

/* 分数 */

/* 奖牌勋章（行末） */

/* 小组 PK 行 */

.team-item { flex-direction: column; height: auto; padding: 0; overflow: hidden; }

.team-head {
            height: 44px; padding: 0 20px;
            display: flex; align-items: center; gap: 16px; width: 100%;
            cursor: pointer; border: inherit; border-radius: inherit;
        }

.team-body {
            width: 100%;
            background: #F9FAFB;
            padding: 12px 20px 12px 60px;
            border-top: 1px dashed #E5E7EB;
            display: none; flex-direction: column; gap: 8px;
            font-size: 14px; color: #4B5563;
        }

.team-body.expanded { display: flex; }

.team-body .row { display: flex; justify-content: space-between; }

.team-body .row .name::before { content: '·  '; color: #6B7280; }

.team-toggle { margin-left: auto; font-size: 12px; color: #6B7280; }

/* 空状态 */

/* 成长记录 */

/* ============================================================
           成长记录 - 完全按照 growth-design-spec.md 规范实现
           ============================================================ */

/* 页面标题 */

.g-page-head { margin-top: 0; margin-bottom: 24px; display: flex; align-items: baseline; gap: 12px; }

.g-page-title { font-size: 22px; font-weight: 600; color: #111827; }

.g-page-sub   { font-size: 14px; color: #6B7280; }

/* 筛选 + 操作行 */

.g-filter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.g-filter-tabs { display: flex; gap: 8px; }

.g-filter-tab { height: 30px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); cursor: pointer; transition: all 0.25s var(--ease-out); font-family: inherit; white-space: nowrap; position: relative; overflow: hidden; box-shadow: var(--shadow-xs); }

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

.g-filter-tab:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); }

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

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

.g-btn-refresh { height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); cursor: pointer; transition: all 0.25s var(--ease-out); font-family: inherit; position: relative; overflow: hidden; box-shadow: var(--shadow-xs); }

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

.g-btn-refresh:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); box-shadow: 0 2px 10px rgba(79, 70, 229,0.16); }

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

.g-btn-export { height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); cursor: pointer; transition: all 0.25s var(--ease-out); font-family: inherit; position: relative; overflow: hidden; box-shadow: var(--shadow-xs); }

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

.g-btn-export:hover:not(:disabled) { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); box-shadow: 0 2px 10px rgba(79, 70, 229,0.16); }

.g-btn-export:active:not(:disabled) { transform: scale(0.97); }

.g-btn-export:disabled { opacity: .5; cursor: not-allowed; }

/* 统计卡片 2张 */

.g-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }

.g-stat-card { padding: 16px 20px; border-radius: 8px; display: flex; align-items: center; gap: 16px; }

.g-stat-card.energy { background: #E8F8E7; }

.g-stat-card.coin   { background: #FFF4D6; }

.g-stat-num { font-size: 32px; font-weight: 700; line-height: 1; }

.g-stat-card.energy .g-stat-num { color: #00B42A; }

.g-stat-card.coin   .g-stat-num { color: #B07A00; }

.g-stat-label { font-size: 14px; color: #4B5563; }

/* 流水列表 */

.g-log-list { display: flex; flex-direction: column; gap: 12px; }

.g-log-item { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; padding: 12px 20px; display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 16px; }

.g-log-dot { width: 8px; height: 8px; border-radius: 50%; justify-self: center; }

.g-log-dot.pos { background: #00B42A; box-shadow: 0 0 0 4px #E8F8E7; }

.g-log-dot.neg { background: #F53F3F; box-shadow: 0 0 0 4px #FFECE8; }

.g-log-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

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

.g-log-name { font-size: 16px; font-weight: 600; color: #111827; }

.g-log-type { font-size: 12px; padding: 1px 6px; border-radius: 4px; color: #4B5563; background: #F5F6F8; }

.g-log-detail { font-size: 14px; color: #4B5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-log-line2 { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #6B7280; }

.g-log-amount { font-size: 16px; font-weight: 700; min-width: 56px; text-align: right; }

.g-log-amount.pos { color: #00B42A; }

.g-log-amount.neg { color: #F53F3F; }

.g-log-time { font-size: 12px; color: #6B7280; }

.g-btn-undo { height: 24px; padding: 0 8px; font-size: 12px; color: #4B5563; border: 1px solid #E5E7EB; border-radius: 4px; background: #FFFFFF; cursor: pointer; transition: all 0.15s; font-family: inherit; }

.g-btn-undo:hover { color: #F53F3F; border-color: #F53F3F; }

/* 空状态 */

.g-empty { padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #6B7280; }

.g-empty .g-empty-icon { font-size: 48px; }

/* ============================================================
           勋章频道 - v3 真实代码还原（SPA 源码反编译版）
           响应式网格、稀有度渐变外圈+动画、空槽位、数量徽标
           ============================================================ */

/* ---- 频道页头 ---- */

/* ---- Tab 容器（pill 形） ---- */

/* ---- 图鉴主容器(.codex) ---- */

/* ---- 开盒主容器(无背景无边框) ---- */

/* ---- 顶部操作栏（已由 v4 badge-detail-bar 替代） ---- */

/* ====================================================================
           ★ 核心：勋章网格（响应式）
           ≥1280=7列, ≥1024=6, ≥768=5, ≥640=4, 否则 3
           单页 = 列数 × 6 行
           ==================================================================== */

/* ====================================================================
           勋章卡（Ib 组件还原）
           ==================================================================== */

/* ---- 1. 空槽位 (isEmpty) ---- */

/* ---- 2. 已拥有 ---- */

/* 图标外圈：p-[3px] 圆环 + 内圆 */

/* ---- 4 档稀有度视觉 ---- */

/* 史诗 EPIC：紫红渐变外圈 + epicPulse 动画 (v4：#f0abfc→#7c3aed) */

@keyframes epicPulse { 0%,100%{opacity:1} 50%{opacity:0.85} }

/* 稀有 RARE：紫色外圈 + 蓝青光晕 (v4 修正：真实截图证据) */

/* 传奇 LEGENDARY：金渐变外圈 + 流光动画 */

@keyframes rarityShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* 普通 COMMON：灰底 + 细外圈 */

/* 稀有度名称标签 */

/* ---- 数量徽标 (quantity > 1) ---- */

/* ---- 分页器 ---- */

/* ---- 全班概览（已由 v4 student-card 替代） ---- */

/* ---- 空状态 ---- */

/* ---- 开盒Tab ---- */

/* ====================================================================
           v4 新增组件：频道主页学生卡 + 稀有度筛选 + 弹窗 + 开盒流程
           ==================================================================== */

/* ---- 频道主页下拉选择器 (v4: 图01/02) ---- */

/* 下拉菜单 */

/* ---- 频道主页统计卡片 (v4: 图03 三卡片布局) ---- */

/* ---- 频道主页学生卡 (v4: 图01 截图还原) ---- */

/* ---- 学生详情页操作栏 (v4: 图03/05) ---- */

/* ---- 稀有度筛选 (v4: 图03/05 pill容器+1px灰描边) ---- */

/* ---- 新勋章获取弹窗 (v4: 图07) ---- */

/* =============================================================
           小卖部 - v9 还原（基于 shop-v9.css / shop-v9.html）
           关键：盲盒左右分栏(42%+1fr)、白底、品牌色var(--brand-500)
           ============================================================= */

/* ---- 二级 Tab ---- */

/* ---- 页面头部 ---- */

.toolbar-btn {
            height: 38px; padding: 0 18px;
            border-radius: 9999px;
            font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: inherit;
            display: flex; align-items: center; gap: 6px;
            white-space: nowrap;
            transition: all .25s var(--ease-out);
            border: 1.5px solid var(--border);
            background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
            color: var(--text-secondary);
            box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7);
            letter-spacing: 0.3px;
            position: relative; overflow: hidden;
        }

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

.toolbar-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 70, 229,0.14); border-color: var(--brand-300); color: var(--brand-600); background: linear-gradient(180deg, #fff 0%, var(--brand-50) 100%); }

.toolbar-btn:active { transform: translateY(0) scale(0.97); }

/* ---- 统计概览卡 ---- */

/* ---- 商品分区通用 ---- */

/* ---- 普通商品卡（6列，h≈218） ---- */

.normal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 14px;
            row-gap: 18px;
        }

.item-card {
            height: 180px;
            padding: 14px 10px 12px;
            background: #FFFEFE;
            border: 1px solid #F3F4F6;
            border-radius: 14px;
            display: flex; flex-direction: column; align-items: center;
            gap: 5px;
            text-align: center;
            cursor: pointer;
            font-family: inherit;
            transition: all .2s;
            box-shadow: 0 1px 3px rgba(15,23,42,0.04);
        }

.item-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px -8px rgba(15,23,42,0.1);
            border-color: var(--brand-500);
        }

.item-emoji { font-size: 40px; line-height: 1; margin-top: 2px; }

.item-name {
            font-size: 12px; font-weight: 500;
            color: #111827;
            line-height: 1.25;
        }

.item-price {
            display: flex; align-items: baseline; gap: 2px;
            margin-top: 1px;
        }

.item-price .num { font-size: 20px; font-weight: 800; color: var(--brand-500); line-height: 1; }

.item-price .unit { color: #6B7280; font-size: 11px; }

.item-stock {
            font-size: 11px; color: #6B7280;
            background: #F9FAFB;
            padding: 2px 8px;
            border-radius: 99px;
            margin-top: auto;
        }

/* ---- 勋章卡（grid 2列，h≈214） ---- */

/* =============================================================
           小卖部弹窗系统 - 基于参考站 shop-v10-modals.css
           ============================================================= */

/* ---- 兼容色变量（糖果泡泡主题） ---- */

:root {
          --brand-50:  #EEF2FF; --brand-100: #E0E7FF; --brand-400: #818CF8;
          --brand-500: #4F46E5; --brand-600: #4338CA; --brand-700: #3730A3;
          --slate-50:  #F6F7F9; --slate-100: #F1F3F7; --slate-200: #E2E5EA;
          --slate-300: #D0D5DD; --slate-400: #9CA3AF; --slate-500: #6B7280;
          --slate-600: #5C5C7A; --slate-700: #42425C; --slate-800: #2B2B3C;
          --slate-900: #1A1A28;
          --emerald-50: #E7F6EC; --emerald-500: #22C55E; --emerald-600: #16A34A;
          --red-50:  #FEF2F2; --red-500: #EF4444; --red-600: #DC2626;
          --amber-50: var(--gold-50); --amber-400: var(--gold-400); --amber-600: var(--gold-600); --amber-700: #926604;
          --coral-50: #FFEAF0; --coral-400: #FB7185; --coral-500: #E11D48;
          --sky-50: #EFF6FF; --sky-400: #60A5FA; --sky-500: #2563EB;
          --lavender-50: #F2EEFE; --lavender-400: #7C3AED; --lavender-500: #7C3AED;
          --yellow-100: #FEF3C7; --yellow-700: #92400E;
          --blue-50: #EFF6FF; --blue-100: #BFDBFE; --blue-200: #93C5FD;
          --blue-500: #2563EB; --blue-700: #1D4ED8;
        }

/* ---- 通用弹窗容器 ---- */

@keyframes modalFadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

@keyframes modalSlideUp {
          from { opacity: 0; transform: translateY(24px) scale(0.96); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }

/* ---- 统一弹窗头部 ---- */

/* ---- 统一按钮系统（Premium 升级） ---- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; font-weight: 700;
    border: 0; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 12px;
    font-size: 14px;
    white-space: nowrap;
    user-select: none;
    position: relative; overflow: hidden;
}
.btn::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 50%);
    pointer-events:none; border-radius:inherit;
}
.btn:active { transform: scale(0.97) !important; }

.btn--sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }

.btn--md { height: 40px; padding: 0 16px; }

.btn--lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: 14px; }

.btn--full { width: 100%; }

/* Primary - 橙色主按钮 */

.btn-primary {
          background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
          color: #FFFFFF;
          box-shadow: 0 2px 8px rgba(79, 70, 229,0.3);
          border: 1px solid rgba(79, 70, 229,0.4);
        }

.btn-primary:hover:not(:disabled) {
          background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
          box-shadow: 0 4px 16px rgba(79, 70, 229,0.35);
          transform: translateY(-1px);
        }

.btn-primary:disabled { background: var(--slate-200); color: var(--slate-400); cursor: not-allowed; box-shadow: none; }

/* Secondary - 白色次按钮 */

.btn-secondary {
          background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
          color: var(--slate-600);
          border: 1.5px solid rgba(226,232,240,0.9);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

.btn-secondary:hover {
          background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
          border-color: rgba(203,213,225,1);
        }

/* Danger - 红色危险按钮 */

.btn-danger {
          background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
          color: #fff;
          box-shadow: 0 2px 8px rgba(239,68,68,0.25);
          border: 1px solid rgba(239,68,68,0.3);
        }

.btn-danger:hover:not(:disabled) {
          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
          box-shadow: 0 4px 16px rgba(239,68,68,0.35);
          transform: translateY(-1px);
        }

/* Success - 绿色成功按钮 */

.btn-success {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          color: #fff;
          box-shadow: 0 2px 8px rgba(16,185,129,0.25);
          border: 1px solid rgba(16,185,129,0.3);
        }

.btn-success:hover:not(:disabled) {
          background: linear-gradient(135deg, #059669 0%, #047857 100%);
          box-shadow: 0 4px 16px rgba(16,185,129,0.35);
          transform: translateY(-1px);
        }

.btn-success:disabled { background: var(--slate-200); color: var(--slate-400); cursor: not-allowed; box-shadow: none; }

/* Ghost - 透明按钮 */

.btn-ghost { background: transparent; color: var(--slate-500); }

.btn-ghost:hover { background: var(--slate-100); color: var(--slate-700); }

/* Pill 胶囊按钮 */

.btn-pill { border-radius: 9999px; }

/* ---- 统一表单控件 ---- */

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
          font-size: 13px; font-weight: 600; color: var(--slate-600);
          letter-spacing: 0.2px;
        }

.form-input {
          height: 46px; padding: 0 16px;
          border-radius: 12px;
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          border: 1.5px solid rgba(226,232,240,0.9);
          color: var(--slate-800);
          font-size: 14px; font-weight: 500;
          outline: none;
          transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
          font-family: inherit;
          width: 100%;
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

.form-input::placeholder { color: var(--slate-400); font-weight: 400; }

.form-input:focus {
          border-color: var(--brand-400);
          box-shadow:
            0 0 0 3px var(--brand-50),
            0 2px 8px rgba(79, 70, 229,0.1);
          background: #ffffff;
        }

.form-input--price { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }

.form-input--password { letter-spacing: 4px; }

.form-card {
          border-radius: 16px;
          border: 1px solid rgba(226,232,240,0.9);
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          padding: 18px;
          display: flex; flex-direction: column; gap: 14px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

/* ---- 卡片容器 ---- */

.card {
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          border: 1.5px solid rgba(226,232,240,0.9);
          border-radius: 14px;
          padding: 16px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

/* ---- 管理商品 ---- */

/* ---- 新增商品（统一弹窗 form-section） ---- */

.form-hint { color: var(--slate-400); font-size: 12px; margin-left: 12px; }

/* ---- Emoji 选择器 ---- */

.emoji-grid {
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          gap: 4px;
          padding: 10px;
          background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
          border-radius: 12px;
          border: 1px solid rgba(226,232,240,0.9);
        }

@media (min-width: 640px) { .emoji-grid { grid-template-columns: repeat(12, 1fr); } }

.emoji-cell {
          font-size: 20px;
          width: 34px; height: 34px;
          display: flex;
          align-items: center; justify-content: center;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.15s;
          background: transparent;
          border: 2px solid transparent;
        }

.emoji-cell:hover { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.emoji-cell.selected {
          background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
          border-color: var(--brand-400);
          box-shadow: 0 2px 8px rgba(79, 70, 229,0.15);
        }

.btn-more-emoji {
          margin-top: 10px;
          width: 100%;
          padding: 9px;
          background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
          border: 1.5px dashed rgba(203,213,225,1);
          color: var(--slate-500);
          border-radius: 10px;
          font-size: 13px;
          cursor: pointer;
          transition: all 0.15s;
          font-weight: 600;
        }

.btn-more-emoji:hover { background: #f3f4f6; color: var(--slate-600); }

/* ---- 类型栏（3 选 1） ---- */

.type-bar {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          margin-bottom: 20px;
        }

.type-card {
          border: 2px solid rgba(226,232,240,0.9);
          border-radius: 12px;
          padding: 14px 6px;
          text-align: center;
          cursor: pointer;
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

.type-card:hover { border-color: var(--brand-300); }

.type-card.selected {
          border-color: var(--brand-400);
          background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
          box-shadow: 0 2px 8px rgba(79, 70, 229,0.15);
        }

.type-card-icon { font-size: 24px; margin-bottom: 6px; }

.type-card-label { font-size: 13px; color: var(--slate-500); font-weight: 600; }

.type-card.selected .type-card-label { color: var(--brand-700); font-weight: 700; }

/* ---- 图标预览 ---- */

.icon-preview-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.icon-preview {
          font-size: 28px;
          width: 56px; height: 56px;
          display: flex; align-items: center; justify-content: center;
          background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
          border: 2px solid var(--brand-400);
          border-radius: 14px;
          box-shadow: 0 2px 8px rgba(79, 70, 229,0.12);
        }

.icon-input {
          width: 56px; height: 56px;
          font-size: 28px;
          text-align: center;
          border: 2px solid var(--brand-400);
          border-radius: 14px;
          background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
          outline: none;
          font-family: inherit;
          box-shadow: 0 2px 8px rgba(79, 70, 229,0.12);
        }
.icon-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(79, 70, 229,0.15); }

/* ---- 表单面板切换 ---- */

.form-pane { animation: paneFadeIn 0.18s ease; }

@keyframes paneFadeIn { from { opacity: 0.5; } to { opacity: 1; } }

/* ---- 勋章选择器 ---- */

/* ---- 输入框+图标前缀 ---- */

.input-with-icon {
          position: relative;
          display: flex;
          align-items: center;
        }

.input-prefix-icon {
          position: absolute;
          left: 14px;
          font-size: 16px;
          pointer-events: none;
          z-index: 1;
        }

.input-with-icon .form-input { padding-left: 40px; }

.form-input-narrow { width: 160px; margin-top: 10px; }

/* ---- 库存分段控件（编辑弹窗用） ---- */

.seg-control { display: flex; gap: 10px; }

.seg-btn {
          flex: 1; padding: 10px 0;
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          border: 1.5px solid rgba(226,232,240,0.9);
          color: var(--slate-500); font-weight: 600;
          border-radius: 10px; font-size: 14px;
          cursor: pointer; transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

.seg-btn:hover {
          border-color: rgba(203,213,225,1);
          background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
        }

.seg-btn.active {
          background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
          border-color: var(--brand-400);
          color: var(--brand-700);
          box-shadow: 0 2px 8px rgba(79, 70, 229,0.15);
        }

/* ---- 班币管理 / 拍卖结算 共用左右分栏 ---- */

.split-left {
          padding: 24px 28px;
          min-height: 0;
          border-right: 1px solid rgba(241,245,249,0.9);
          display: flex;
          background: #ffffff;
        }

.split-right {
          display: flex; flex-direction: column; gap: 18px;
          padding: 24px;
          background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
          min-height: 0; overflow-y: auto;
          border-left: 1px solid rgba(241,245,249,0.6);
        }

.student-grid { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }

@media (min-width: 1024px) { .student-grid { grid-template-columns: repeat(3, 1fr); } }

.student-tile {
          height: 66px; border-radius: var(--radius-lg);
          padding: 0 14px; display: flex; align-items: center; gap: 12px;
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
          text-align: left;
          box-shadow: var(--shadow-sm);
          border: 1px solid rgba(226,232,240,0.9);
        }

.student-tile:hover {
          border-color: rgba(203,213,225,1);
          background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
          box-shadow: 0 3px 8px rgba(0,0,0,0.08);
          transform: translateY(-1px);
        }

.student-tile.is-selected {
          border-color: var(--brand-400);
          background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
          box-shadow: 0 3px 12px rgba(79, 70, 229,0.15);
        }

.student-tile.is-selected .student-tile__check { color:#fff !important; background:var(--brand-500) !important; border-color:var(--brand-500) !important; }

.student-tile__check {
          width: 23px; height: 23px; border-radius: 8px;
          border: 1.5px solid rgba(226,232,240,0.9);
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          display: flex; align-items: center; justify-content: center;
          font-size: 12px; font-weight: 900; color: transparent; flex-shrink: 0;
          box-shadow: 0 1px 3px rgba(0,0,0,0.06);
          transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
        }

.student-tile__name { font-weight: 600; color: var(--slate-800); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }

.student-tile__diff { font-size: 12px; color: var(--slate-400); margin-top: 2px; display: flex; align-items: center; justify-content: space-between; font-variant-numeric: tabular-nums; }

.student-tile__diff--up { color: var(--emerald-600); font-weight: 700; }

.student-tile__diff--down { color: var(--red-600); font-weight: 700; }

.select-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-shrink: 0; }

.select-bar__title { font-size: 14px; font-weight: 700; color: var(--slate-700); }

.select-bar__count { font-size: 12px; color: var(--slate-400); font-weight: 500; }

.btn-select-all {
          padding: 7px 14px; border-radius: 10px;
          border: 1.5px solid rgba(226,232,240,0.9);
          background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
          color: var(--slate-600); font-size: 12px; font-weight: 700;
          cursor: pointer; display: flex; align-items: center; gap: 6px;
          transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
          box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

.btn-select-all:hover {
          background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
          border-color: rgba(203,213,225,1);
        }

/* 发/扣班币 toggle */

.password-card {
          border-radius: 16px;
          border: 1px solid rgba(226,232,240,0.9);
          background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
          padding: 18px;
          display: flex; flex-direction: column; gap: 14px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

.password-card__head { display: flex; align-items: flex-start; gap: 12px; }

.password-card__lock {
          width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
          display: flex; align-items: center; justify-content: center; font-size: 20px;
          background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
          border: 1px solid #fed7aa;
          box-shadow: 0 2px 6px rgba(249,115,22,0.12);
        }

.password-card__heading { min-width: 0; }

.password-card__title { font-size: 14px; font-weight: 700; color: var(--slate-800); }

.password-card__hint { font-size: 11px; line-height: 1.6; color: var(--slate-400); margin-top: 2px; }

.password-card__user {
          color: var(--brand-600); font-weight: 700;
          background: var(--brand-50); padding: 0 5px; border-radius: 5px;
          font-size: 11px;
        }

.password-input-wrap {
          position: relative; display: flex; align-items: center;
        }

.password-input-wrap__icon {
          position: absolute; left: 13px; font-size: 15px; pointer-events: none; opacity: 0.7;
        }

.password-input-wrap .form-input--password {
          padding-left: 38px; height: 44px; font-size: 15px;
          border-radius: 12px;
        }

.password-card__error {
          color: #e74c3c; font-size: 12px; line-height: 1.5;
          display: none; margin: -4px 0 0;
          padding: 8px 12px; border-radius: 10px;
          background: #fef2f2; border: 1px solid #fecaca;
        }

#btn-coin-unlock.is-verified {
          background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
          border-color: #059669 !important;
          box-shadow: 0 4px 12px rgba(16,185,129,0.25);
          cursor: default;
        }

.impact-card {
          border-radius: 16px;
          background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
          border: 1px solid rgba(226,232,240,0.9);
          padding: 18px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

.impact-card__label { font-size: 12px; font-weight: 700; color: var(--slate-500); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.impact-card__row { display: flex; align-items: center; gap: 8px; }

.impact-card__num { font-size: 26px; font-weight: 900; color: var(--slate-900); }

.impact-card__num--up { color: var(--emerald-500); font-variant-numeric: tabular-nums; }

.impact-card__num--down { color: var(--red-500); font-variant-numeric: tabular-nums; }

.impact-card__unit { font-size: 14px; color: var(--slate-400); }

.impact-card__sep { margin: 0 4px; color: var(--slate-300); }

/* ---- 统一弹窗顶部 Banner ---- */

/* ---- 发送/拍卖金币图标 ---- */

/* ---- 购买确认抽屉 (参照参考站 shop-v10-modals.css 复刻) ---- */

#drawer-buy.modal-drawer-overlay {
          position:fixed; inset:0;
          background: rgba(15,23,42,0.3);
          z-index:1200;
          display:none;
        }

#drawer-buy.modal-drawer-overlay.is-open { display:block; }

#drawer-buy .modal-drawer {
          position:fixed; right:0; top:0; bottom:0;
          width:min(420px,100vw);
          background: #fff;
          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
          z-index:1201; display:flex; flex-direction:column;
          transform:translateX(100%); transition:transform 0.25s ease;
        }

#drawer-buy.modal-drawer-overlay.is-open .modal-drawer { transform:translateX(0); }

/* 关闭动画阶段：overlay保持可见，抽屉滑出（写在is-open后面，同优先级覆盖） */
#drawer-buy.modal-drawer-overlay.is-closing { display:block; }
#drawer-buy.modal-drawer-overlay.is-closing .modal-drawer { transform:translateX(100%); }

#drawer-buy .modal-drawer__header {
          padding:16px 20px;
          border-bottom:1px solid var(--slate-100);
          display:flex; align-items:center; justify-content:space-between;
          flex-shrink:0;
        }

#drawer-buy .modal-drawer__title { font-size:18px; font-weight:900; color:var(--slate-900); margin:0; }

#drawer-buy .modal-drawer__close {
          width:36px; height:36px; border-radius:12px;
          color:var(--slate-400); background:transparent;
          border:0; cursor:pointer; font-size:20px; line-height:1;
          transition:all 0.15s;
          display:flex; align-items:center; justify-content:center;
        }

#drawer-buy .modal-drawer__close:hover {
          background:var(--slate-100);
          color:var(--slate-600);
        }

.buy-product-row {
          padding:16px 20px;
          border-bottom:1px solid var(--slate-100);
          display:flex; align-items:center; gap:12px;
          flex-shrink:0;
        }

.buy-product-icon {
          width:64px; height:64px; border-radius:16px;
          background:linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
          box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
          display:flex; align-items:center; justify-content:center;
          border:1px solid var(--brand-100);
        }

.buy-product-name { font-weight:900; color:var(--slate-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.buy-product-price { margin-top:4px; display:flex; align-items:center; gap:4px; }

.buy-product-price__num { font-weight:900; color:var(--brand-500); font-size:20px; }

.buy-product-price__unit { color:var(--slate-400); font-size:12px; }

.buy-qty-row { margin-top:16px; border-radius:16px; border:1px solid var(--brand-100); background:rgba(255,247,237,0.6); padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }

.buy-qty-row__label { font-size:14px; font-weight:700; color:var(--slate-600); }

.qty-stepper { display:flex; align-items:center; background:var(--slate-100); border-radius:12px; overflow:hidden; }

.qty-stepper__btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--slate-500); background:transparent; border:0; cursor:pointer; font-size:16px; font-weight:700; transition:background 0.15s; }

.qty-stepper__btn:hover:not(:disabled) { background:var(--slate-200); }

.qty-stepper__btn:disabled { opacity:0.3; cursor:not-allowed; }

.qty-stepper__input { width:44px; height:36px; text-align:center; background:transparent; border:0; color:var(--slate-800); font-size:14px; font-weight:700; outline:none; }

.buy-select-header { padding:12px 20px; border-bottom:1px solid var(--slate-100); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; }

.buy-select-header__title { font-size:14px; font-weight:900; color:var(--slate-700); }

.btn-filter-affordable { height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-500); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.15s; }

.btn-filter-affordable__check { width:16px; height:16px; border-radius:4px; border:1px solid var(--slate-300); display:flex; align-items:center; justify-content:center; font-size:10px; background:#fff; color:transparent; flex-shrink:0; }

.buy-student-list { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; touch-action:pan-y; }

.buy-student-tile { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; font-size:14px; background:var(--slate-50); cursor:pointer; transition:all 0.15s; text-align:left; border:1px solid transparent; width:100%; }

.buy-student-tile:hover { background:var(--slate-100); }

.buy-student-tile.is-selected { background:var(--brand-50); border-color:var(--brand-200); }

.buy-student-tile:disabled { opacity:0.45; cursor:not-allowed; }

.buy-student-tile__check { width:20px; height:20px; border-radius:6px; border:1px solid var(--slate-200); background:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:transparent; flex-shrink:0; }

.buy-student-tile.is-selected .buy-student-tile__check { background:var(--brand-500); border-color:var(--brand-500); color:#FFFFFF; }

.buy-student-tile__avatar { width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--slate-400); }

.buy-student-tile__name { flex:1; text-align:left; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.buy-student-tile__price { text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }

.buy-student-tile__price-num { display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:12px; font-weight:900; color:var(--brand-500); }

.buy-student-tile__price-after { font-size:10px; font-weight:700; color:var(--slate-400); text-align:right; margin-top:2px; }

.buy-student-tile__price-after--negative { color:var(--red-500); }

.buy-footer { padding:20px; border-top:1px solid var(--slate-100); display:flex; flex-direction:column; gap:8px; flex-shrink:0; }

.buy-footer__summary { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--slate-400); font-weight:700; }

.btn-buy-confirm { width:100%; padding:12px 0; border-radius:12px; font-weight:900; font-size:14px; border:0; cursor:pointer; transition:all 0.15s; }

.btn-buy-confirm:disabled { background:var(--slate-100); color:var(--slate-400); cursor:not-allowed; }

.btn-buy-confirm:not(:disabled) { background:var(--brand-500); color:#FFFFFF; }

.btn-buy-confirm:not(:disabled):hover { background:var(--brand-600); }

.buy-footer__hint { font-size:10px; text-align:center; color:var(--slate-400); }

/* ---- 盲盒购买抽屉 (drawer-blindbox，风格对标参考站) ---- */

#drawer-blindbox.modal-drawer-overlay {
          position:fixed; inset:0;
          background: rgba(15,23,42,0.3);
          z-index:1200;
          display:none;
        }

#drawer-blindbox.modal-drawer-overlay.is-open { display:block; }

#drawer-blindbox .modal-drawer {
          position:fixed; right:0; top:0; bottom:0;
          width:min(420px,100vw);
          background: #fff;
          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
          z-index:1201; display:flex; flex-direction:column;
          transform:translateX(100%); transition:transform 0.25s ease;
        }

#drawer-blindbox.modal-drawer-overlay.is-open .modal-drawer { transform:translateX(0); }

/* 关闭动画阶段（写在 is-open 后面，同优先级覆盖） */
#drawer-blindbox.modal-drawer-overlay.is-closing { display:block; }
#drawer-blindbox.modal-drawer-overlay.is-closing .modal-drawer { transform:translateX(100%); }

#drawer-blindbox .modal-drawer__header {
          padding:16px 20px;
          border-bottom:1px solid var(--slate-100);
          display:flex; align-items:center; justify-content:space-between;
          flex-shrink:0;
        }

#drawer-blindbox .modal-drawer__title { font-size:18px; font-weight:900; color:var(--slate-900); margin:0; }

#drawer-blindbox .modal-drawer__close {
          width:36px; height:36px; border-radius:12px;
          color:var(--slate-400); background:transparent;
          border:0; cursor:pointer; font-size:20px; line-height:1;
          transition:all 0.15s;
          display:flex; align-items:center; justify-content:center;
        }

#drawer-blindbox .modal-drawer__close:hover {
          background:var(--slate-100);
          color:var(--slate-600);
        }

/* 仅覆盖确认按钮颜色为盲盒紫色主题 */

#drawer-blindbox .btn-buy-confirm:not(:disabled) {
          background: linear-gradient(135deg, #7C3AED 0%, #7C3AED 100%);
        }
#drawer-blindbox .btn-buy-confirm:not(:disabled):hover {
          background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
        }

#drawer-blindbox .buy-product-icon {
          background:linear-gradient(135deg, #EEE 0%, #DDD 100%);
        }

/* ---- 次级页面容器 ---- */

/* ---- 页面标题区 ---- */

/* ---- 通用工具栏行 ---- */

/* ---- 兑换记录表格 ---- */

.records-table-wrap {
            padding: 0 20px 60px;
            background: #fff;
        }

.records-table {
            margin-top: 24px;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

.records-table thead th {
            text-align: left;
            padding: 14px 16px;
            font-size: 14px;
            font-weight: 600;
            color: #6B7280;
            background: #F9FAFB;
            border-bottom: 1px solid #E5E7EB;
        }

.records-table thead th:first-child { border-radius: 8px 0 0 0; }

.records-table thead th:last-child { border-radius: 0 8px 0 0; }

.records-table tbody td {
            padding: 16px;
            font-size: 14px;
            color: #111827;
            border-bottom: 1px solid #F3F4F6;
            vertical-align: middle;
        }

.records-table tbody tr:hover { background: #F9FAFB; }

.records-table .student-cell {
            display: flex; align-items: center; gap: 12px;
        }

.records-table .student-avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: #EFF6FF;
            color: #2563EB;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
        }

.records-table .coin-change {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 4px 12px;
            background: #FEF2F2;
            color: #DC2626;
            border-radius: 9999px;
            font-weight: 700;
            font-size: 13px;
        }

.records-table .coin-change.positive {
            background: var(--brand-50);
            color: var(--brand-500);
        }

/* ---- 班币总览 ---- */

.rich-list {
            padding: 20px 20px 60px;
            background: #fff;
        }

.rich-row {
            display: flex; align-items: center;
            padding: 18px 20px;
            background: #fff;
            border: 1px solid #F3F4F6;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: all .15s;
        }

.rich-row:hover { border-color: var(--brand-200); box-shadow: 0 2px 8px rgba(79, 70, 229,0.08); }

.rich-rank {
            width: 48px;
            font-size: 20px;
            font-weight: 700;
            color: #6B7280;
            text-align: center;
        }

.rich-row:nth-child(1) .rich-rank { color: var(--brand-500); }

.rich-row:nth-child(2) .rich-rank { color: #2563EB; }

.rich-row:nth-child(3) .rich-rank { color: #4B5563; }

.rich-avatar {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: #EFF6FF;
            color: #2563EB;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            margin-right: 16px;
            flex-shrink: 0;
        }

.rich-name {
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            color: #111827;
        }

.rich-coin {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 6px 16px;
            background: var(--brand-50);
            color: var(--brand-500);
            border-radius: 9999px;
            font-size: 16px;
            font-weight: 700;
        }

/* ---- 抽奖 - 三级 Tab ---- */

.third-tabs {
            display: flex; align-items: center;
            height: 48px; padding: 0 20px;
            background: #fff;
            border-bottom: 1px solid #F3F4F6;
            gap: 32px;
        }

.third-tab {
            height: 100%;
            display: flex; align-items: center;
            color: #6B7280;
            font-size: 14px;
            font-weight: 600;
            position: relative;
            padding: 0 4px;
            background: none; border: none; cursor: pointer;
            font-family: inherit;
        }

.third-tab:hover { color: #111827; }

.third-tab.active { color: #111827; }

.third-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: #111827;
            border-radius: 2px 2px 0 0;
        }

.create-lottery-btn {
            display: inline-flex; align-items: center; gap: 6px;
            height: 38px; padding: 0 18px;
            background: var(--brand-500);
            color: #FFFFFF;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            border: none; cursor: pointer; font-family: inherit;
            transition: all .15s;
        }

.create-lottery-btn:hover { background: #D9A400; }

.lottery-empty {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 100px 20px;
            background: #fff;
            min-height: 300px;
        }

.lottery-empty-icon {
            font-size: 56px;
            margin-bottom: 14px;
            opacity: 0.3;
        }

.lottery-empty-text {
            font-size: 15px;
            color: #6B7280;
        }

.purchase-drawer {
            position: fixed;
            top: 0; right: 0;
            width: 400px; height: 100vh;
            background: #fff;
            box-shadow: -8px 0 24px rgba(0,0,0,0.12);
            transform: translateX(100%);
            transition: transform .25s ease-out;
            z-index: 1000;
            display: flex; flex-direction: column;
        }

.purchase-drawer.open { transform: translateX(0); }

.pd-header {
            display: flex; align-items: center; justify-content: space-between;
            height: 64px; padding: 0 24px;
            border-bottom: 1px solid #ececec;
            flex-shrink: 0;
        }

.pd-title { font-size: 18px; font-weight: 600; color: #2c2c2c; }

.pd-close {
            width: 36px; height: 36px;
            border-radius: 50%;
            font-size: 22px;
            color: #8a8a8a;
            background: none; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }

.pd-close:hover { background: #f5f5f7; }

.pd-body {
            flex: 1; overflow-y: auto;
            padding: 24px;
        }

.pd-price {
            display: flex; align-items: baseline; gap: 4px;
            margin-bottom: 24px;
        }

.pd-amount { font-size: 44px; font-weight: 700; color: var(--brand-500); }

.pd-currency { color: #8a8a8a; font-size: 15px; }

.pd-row {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap; gap: 8px;
        }

.pd-label { color: #8a8a8a; font-size: 14px; }

.qty-stepper {
            display: flex; align-items: center; gap: 8px;
        }

.qty-btn {
            width: 36px; height: 36px;
            border: 1px solid #ececec;
            border-radius: 10px;
            font-size: 18px;
            background: #fff;
            color: #4a4a4a;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }

.qty-btn:disabled { color: #b8b8b8; cursor: not-allowed; }

.qty-input {
            width: 44px; height: 36px;
            text-align: center;
            border: 1px solid #ececec;
            border-radius: 10px;
            font-size: 15px;
            font-family: inherit;
        }

.student-list { list-style: none; margin-top: 8px; padding: 0; }

.student-row {
            width: 100%; height: 38px; padding: 0 16px;
            display: flex; align-items: center; gap: 12px;
            border: 1px solid #ececec;
            border-radius: 10px;
            margin-bottom: 6px;
            font-size: 14px;
            text-align: left;
            background: #fff;
            cursor: pointer;
            font-family: inherit;
        }

.student-row[data-affordable="true"] { border-color: #52c41a; }

.student-row[data-affordable="true"] .check { color: #52c41a; }

.student-row[data-affordable="true"] .balance { color: #8a8a8a; margin-left: auto; }

.student-row[disabled] {
            opacity: 0.5; cursor: not-allowed;
        }

.student-row[disabled] .check { color: #b8b8b8; }

.student-row[disabled] .balance { color: #ff5e8a; margin-left: auto; }

.check { font-size: 14px; }

.pd-footer {
            padding: 16px 24px;
            border-top: 1px solid #ececec;
            flex-shrink: 0;
        }

.pd-summary {
            display: flex; justify-content: space-between;
            margin-bottom: 12px;
            font-size: 14px;
            color: #8a8a8a;
        }

.pd-confirm {
            width: 100%; height: 48px;
            background: var(--brand-500);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }

.pd-confirm:disabled {
            background: #ececec;
            color: #b8b8b8;
            cursor: not-allowed;
        }

/* 老师工具箱 — 1:1 像素级复刻 banchong.cn */

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

@media (min-width: 640px) { .tools-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (min-width: 768px) { .tools-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } }

/* 工具详情页 — 不再限制高度，由内容自然撑开，外层 #main-app { min-height: 100vh } 兜底 */

#toolbox-detail-view { display: flex; flex-direction: column; min-height: 0; }

/* 随机点名 */

.random-call-container { text-align: center; padding: 40px 20px; }

.random-call-display {
            width: 300px; height: 300px; border-radius: 50%; margin: 0 auto 30px;
            background: linear-gradient(135deg,#dbeafe,#bfdbfe); display: flex;
            align-items: center; justify-content: center; font-size: 72px; font-weight: 900;
            color: #1e40af; position: relative; box-shadow: 0 0 0 8px #eff6ff, 0 4px 20px rgba(59,130,246,0.15);
            transition: transform 0.1s; user-select: none;
        }

.random-call-display.running { animation: spinName 0.08s steps(1) infinite; }

.random-call-display.stopped { animation: bounceIn 0.5s ease; }

@keyframes bounceIn {
            0%{transform:scale(1.4)} 50%{transform:scale(0.9)} 100%{transform:scale(1)}
        }

.random-call-display.winner { background: linear-gradient(135deg,var(--gold-100),var(--gold-200)); color: var(--gold-600); box-shadow: 0 0 0 8px var(--gold-50), 0 4px 30px rgba(79, 70, 229,0.2); }

.random-call-btn {
            padding: 14px 48px; font-size: 18px; font-weight: 700; border-radius: 12px;
            border: none; cursor: pointer; transition: all 0.2s; margin: 0 10px;
        }

.rc-start { background: #2563eb; color: #fff; }

.rc-start:hover { background: #2563eb; }

.rc-stop { background: #ef4444; color: #fff; }

.rc-stop:hover { background: #dc2626; }

.rc-score-panel { display: flex; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }

.rc-score-btn {
            width: 60px; height: 60px; border-radius: 12px; border: 2px solid #e5e7eb;
            background: #fff; font-size: 22px; cursor: pointer; transition: all 0.15s;
            display: flex; align-items: center; justify-content: center;
        }

.rc-score-btn:hover { border-color: #2563eb; background: #eff6ff; transform: scale(1.1); }

.rc-score-btn.excellent { border-color: #22c55e; color: #16a34a; }

.rc-score-btn.good { border-color: #2563eb; color: #2563eb; }

.rc-score-btn.ok { border-color: #eab308; color: #ca8a04; }

.rc-score-btn.bad { border-color: #ef4444; color: #dc2626; }

.rc-history {
            margin-top: 30px; max-height: 200px; overflow-y: auto; text-align: left;
            background: #f9fafb; border-radius: 12px; padding: 16px;
        }

.rc-history-item { padding: 6px 0; font-size: 14px; color: #4B5563; border-bottom: 1px solid #f3f4f6; }

/* 计时器 */

.timer-container { text-align: center; padding: 20px; }

.timer-big-display {
            font-size: 120px; font-weight: 200; color: #111827; font-variant-numeric: tabular-nums;
            font-family: 'SF Mono', 'Menlo', monospace; line-height: 1.2; margin: 30px 0;
        }

.timer-type-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }

.timer-type-tab {
            padding: 8px 20px; border-radius: 8px; border: 1px solid #e5e7eb;
            background: #fff; font-size: 14px; cursor: pointer; transition: all 0.15s;
        }

.timer-type-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.timer-presets { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.timer-preset {
            padding: 6px 16px; border-radius: 8px; border: 1px solid #e5e7eb;
            background: #fff; font-size: 13px; cursor: pointer; transition: all 0.15s;
        }

.timer-preset:hover { border-color: #2563eb; color: #2563eb; }

.timer-ctrl-btns { display: flex; justify-content: center; gap: 12px; }

.timer-ctrl-btn {
            padding: 12px 32px; border-radius: 10px; border: none; font-size: 16px;
            font-weight: 600; cursor: pointer; transition: all 0.15s;
        }

.timer-ctrl-btn.start { background: #22c55e; color: #fff; }

.timer-ctrl-btn.pause { background: #eab308; color: #fff; }

.timer-ctrl-btn.reset { background: #ef4444; color: #fff; }

.timer-ctrl-btn.lap { background: #2563eb; color: #fff; }

.timer-laps { margin-top: 20px; text-align: left; max-height: 200px; overflow-y: auto; }

.timer-lap-item { padding: 8px 16px; background: #f9fafb; border-radius: 8px; margin-bottom: 4px; font-size: 14px; font-family: monospace; }

/* 作业消消乐 */

.hw-container { padding: 10px; }

.hw-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.hw-stats { font-size: 14px; color: #6b7280; }

.hw-stats strong { color: #111827; font-size: 18px; }

.hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }

.hw-tile {
            padding: 20px 12px; border-radius: 12px; text-align: center; cursor: pointer;
            font-size: 15px; font-weight: 600; transition: all 0.2s;
            background: #fff; border: 2px solid #e5e7eb; color: #4B5563;
        }

.hw-tile.done { background: #f0fdf4; border-color: #22c55e; color: #16a34a; text-decoration: line-through; }

.hw-tile:hover { transform: scale(1.05); }

.hw-reset-btn {
            padding: 8px 20px; border-radius: 8px; border: 1px solid #e5e7eb;
            background: #fff; font-size: 13px; cursor: pointer; color: #6b7280;
        }

.hw-reset-btn:hover { background: #fee2e2; border-color: #ef4444; color: #dc2626; }

/* 抽奖 */

.lottery-container { text-align: center; padding: 20px; }

.lottery-wheel-wrap { position: relative; display: inline-block; margin: 20px 0; }

.lottery-wheel { transition: transform 4s cubic-bezier(0.17,0.67,0.12,0.99); }

.lottery-pointer {
            position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
            font-size: 36px; z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
        }

.lottery-result { font-size: 24px; font-weight: 700; margin: 16px 0; color: #111827; min-height: 36px; }

.lottery-btn {
            padding: 14px 48px; font-size: 18px; font-weight: 700; border-radius: 12px;
            border: none; background: #7c3aed; color: #fff; cursor: pointer; transition: all 0.2s;
        }

.lottery-btn:hover { background: #7c3aed; }

.lottery-btn:disabled { background: #d1d5db; cursor: not-allowed; }

.lottery-game-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.lottery-game-tab {
            padding: 6px 14px; border-radius: 8px; border: 1px solid #e5e7eb;
            background: #fff; font-size: 13px; cursor: pointer;
        }

.lottery-game-tab.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* 瞳力挑战 */

.vision-container { text-align: center; padding: 20px; }

.vision-ball {
            width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #818cf8, #3730a3);
            position: absolute; box-shadow: 0 4px 15px rgba(99,102,241,0.3);
            transition: all 1.5s ease-in-out;
        }

.vision-area { position: relative; width: 100%; height: 400px; background: #111827; border-radius: 16px; overflow: hidden; margin: 20px 0; }

.vision-info { font-size: 14px; color: #6b7280; margin: 10px 0; }

/* 证书 */

.cert-container { text-align: center; padding: 20px; max-width: 800px; margin: 0 auto; }

.cert-preview {
            border: 6px solid var(--brand-100); border-radius: 24px; padding: 44px 40px;
            background: linear-gradient(135deg,#fffbeb,var(--sun-100)); position: relative;
            box-shadow: 0 12px 40px rgba(79, 70, 229, 0.18), inset 0 0 0 2px #fff;
        }

.cert-preview::before {
            content: ''; position: absolute; inset: 12px;
            border: 2px dashed rgba(180, 83, 9, 0.35); border-radius: 16px;
            pointer-events: none;
        }

.cert-preview h2 { font-size: 28px; color: var(--gold-700); margin: 0 0 10px; }

.cert-preview h3 { font-size: 20px; color: #b45309; margin: 0 0 20px; }

.cert-preview .cert-name { font-size: 32px; font-weight: 900; color: #78350f; margin: 20px 0; }

.cert-preview .cert-detail { font-size: 16px; color: #78350f; line-height: 2; }

.cert-select { margin: 20px 0; padding: 10px 20px; font-size: 16px; border-radius: 8px; border: 1px solid #e5e7eb; }

.cert-btn {
            padding: 10px 24px; border-radius: 8px; border: none; background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
            color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; margin: 0 6px;
            box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
        }

.cert-btn:hover { filter: brightness(1.1); }

/* 班主任署名。
   注意：这里沿用改造前的 var(--gold-700)（该变量实际未定义 → 按继承色渲染），
   目的是让证书外观与改造前完全一致；若要显示金色，把它换成 var(--gold-600)。 */
.cert-preview .cert-sign { margin-top: 24px; font-size: 14px; color: var(--gold-700); }

/* 证书操作区：班主任姓名输入 / 翻页 / 打印（打印时整体隐藏） */
.cert-controls {
            display: flex; justify-content: center; align-items: center; gap: 12px;
            flex-wrap: wrap; margin-bottom: 20px;
        }

.cert-field-label { font-size: 14px; color: var(--text-secondary); }

.cert-field-input {
            font-size: 15px; color: var(--text-primary); text-align: center;
            padding: 8px 14px; min-width: 150px; background: #fff;
            border: 1px solid var(--border); border-radius: 8px;
        }

.cert-field-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }

.cert-field-hint { font-size: 12px; color: var(--text-secondary); }

@media print {
  /* 打印证书时隐藏操作区，只留证书本体 */
  .cert-controls { display: none !important; }
}

/* 评语 */

.spark-container { padding: 20px; max-width: 700px; margin: 0 auto; }

.spark-gen-btn {
            padding: 12px 32px; border-radius: 10px; border: none; background: linear-gradient(135deg,#0ea5e9,#C8A163);
            color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin: 16px 0;
        }

.spark-card {
            background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px;
            margin: 12px 0; text-align: left; font-size: 15px; line-height: 1.8; color: #374151;
        }

.spark-card .spark-name { font-weight: 700; color: #111827; margin-bottom: 8px; font-size: 17px; }

/* === 静音挑战 & 噪音挑战 像素对标 === */

.challenge-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.35); z-index: 9999; display: flex;
            align-items: center; justify-content: center;
        }

.challenge-modal {
            background: #fff; border-radius: 12px; padding: 28px 32px;
            width: 420px; max-width: 92vw; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
        }

.challenge-modal h3 {
            font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 22px;
            display: flex; align-items: center; justify-content: space-between;
        }

.challenge-modal .close-btn {
            width: 28px; height: 28px; border-radius: 6px; border: none;
            background: #f3f4f6; font-size: 16px; cursor: pointer; color: #9ca3af;
            display: flex; align-items: center; justify-content: center; line-height: 1;
        }

.challenge-modal .close-btn:hover { background: #e5e7eb; color: #6b7280; }

.challenge-field { margin-bottom: 18px; }

.challenge-field label {
            display: block; font-size: 13px; font-weight: 500; color: #6b7280; margin-bottom: 6px;
        }

.challenge-select {
            width: 100%; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
            font-size: 14px; color: #111827; background: #fff; cursor: pointer; outline: none;
        }

.challenge-select:focus { border-color: #2563eb; }

.challenge-slider-row {
            display: flex; align-items: center; gap: 10px;
        }

.challenge-slider-row input[type="range"] {
            flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
            background: #e5e7eb; border-radius: 2px; outline: none;
        }

.challenge-slider-row input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
            background: #2563eb; cursor: pointer; box-shadow: 0 2px 4px rgba(59,130,246,0.25);
        }

.challenge-slider-val {
            min-width: 44px; text-align: center; font-size: 13px; font-weight: 600; color: #111827;
            background: #f3f4f6; border-radius: 6px; padding: 3px 6px;
        }

.challenge-start-btn {
            width: 100%; padding: 12px; border: none; border-radius: 24px;
            background: #2563eb; color: #fff; font-size: 15px; font-weight: 600;
            cursor: pointer; transition: background 0.15s; letter-spacing: 0.02em;
        }

.challenge-start-btn:hover { background: #2563eb; }

.challenge-start-btn:disabled { background: #9ca3af; cursor: not-allowed; }

/* 噪音挑战 Split Layout */

.loud-split { display: flex; gap: 20px; min-height: 100%; align-items: flex-start; }

.loud-left {
            flex: 1; display: flex; flex-direction: column; align-items: center;
            background: #fff; border-radius: 12px;
            border: 1px solid #e8ecf1; padding: 28px 24px 24px; position: relative;
            min-width: 0; overflow: visible;
        }

.loud-right {
            width: 260px; flex-shrink: 0; background: #fff; border-radius: 12px;
            border: 1px solid #e8ecf1; padding: 22px 20px; overflow: visible;
            display: flex; flex-direction: column;
        }

.loud-right h4 { font-size: 14px; font-weight: 600; color: #111827; margin: 0 0 14px; }

.loud-section-divider {
            height: 1px; background: #e8ecf1; margin: 12px 0 14px; border: none;
        }

.loud-setting-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 0; font-size: 13px; color: #4B5563; min-height: 36px;
        }

.loud-stepper {
            display: flex; align-items: center; gap: 0;
        }

.loud-stepper .step-btn {
            width: 30px; height: 28px; border: 1px solid #dde1e7; background: #f9fafb;
            font-size: 15px; cursor: pointer; color: #6b7280; display: flex;
            align-items: center; justify-content: center; line-height: 1; user-select: none;
        }

.loud-stepper .step-btn:first-child { border-radius: 5px 0 0 5px; }

.loud-stepper .step-btn:last-child { border-radius: 0 5px 5px 0; }

.loud-stepper .step-btn:hover { background: #eef2f6; }

.loud-stepper .step-btn:active { background: #e5e7eb; }

.loud-stepper .step-val {
            min-width: 38px; text-align: center; padding: 0 8px; font-weight: 600;
            font-size: 14px; border-top: 1px solid #dde1e7; border-bottom: 1px solid #dde1e7;
            line-height: 26px; color: #111827; background: #fff;
        }

.loud-toggle {
            width: 44px; height: 24px; border-radius: 12px; border: none;
            background: #d1d5db; position: relative; cursor: pointer; padding: 0;
            transition: background 0.18s; flex-shrink: 0; outline: none;
        }

.loud-toggle.on { background: #2563eb; }

.loud-toggle::after {
            content: ''; position: absolute; top: 2px; left: 2px;
            width: 20px; height: 20px; border-radius: 50%; background: #fff;
            transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
        }

.loud-toggle.on::after { transform: translateX(20px); }

.loud-gauge-wrap {
            position: relative; width: 100%; max-width: 360px; 
            aspect-ratio: 360/220; margin-bottom: 0;
        }

.loud-gauge-wrap svg { width: 100%; height: 100%; }

.loud-gauge-val {
            position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
            font-size: 68px; font-weight: 700; color: #111827; line-height: 1;
            font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
        }

.loud-title-row {
            width: 100%; display: flex; align-items: flex-start; gap: 8px;
            margin-bottom: 2px; padding: 0 4px;
        }

.loud-title-icon { font-size: 22px; line-height: 1.3; flex-shrink: 0; }

.loud-title-text { flex: 1; }

.loud-title-text .main { font-size: 16px; font-weight: 600; color: #111827; }

.loud-title-text .sub { font-size: 12px; color: #9ca3af; margin-top: 2px; }

.loud-ctrl-area {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            width: 100%; max-width: 260px;
        }

.loud-ctrl-area .challenge-start-btn.loud-play-btn {
            width: 180px; padding: 11px; font-size: 15px; letter-spacing: 0.03em;
            transition: all 0.15s;
        }

.loud-ctrl-area .challenge-start-btn.loud-play-btn.running {
            background: #ef4444;
        }

.loud-warning {
            font-size: 12px; color: #C8A163; margin: 0; display: flex;
            align-items: center; gap: 4px;
        }

.loud-foot-btns { display: flex; gap: 8px; }

.loud-foot-btn {
            padding: 6px 14px; border-radius: 6px; border: 1px solid #dde1e7;
            background: #fff; font-size: 12px; cursor: pointer; color: #6b7280;
            transition: all 0.12s;
        }

.loud-foot-btn:hover { background: #f9fafb; border-color: #d1d5db; }

.loud-history-link {
            font-size: 12px; color: #acb8c8; text-align: right; cursor: pointer;
            margin-top: auto; padding-top: 12px;
        }

.loud-history-link:hover { color: #2563eb; }

/* 静音挑战监控 */

.quiet-monitor {
            text-align: center; padding: 32px 24px;
            display: flex; flex-direction: column; align-items: center;
        }

.quiet-level-bar {
            width: 300px; max-width: 90%; height: 10px; background: #e8ecf1;
            border-radius: 5px; margin: 20px auto; overflow: hidden;
        }

.quiet-level-fill {
            height: 100%; border-radius: 5px; transition: width 0.08s, background 0.3s;
        }

.quiet-pet { font-size: 72px; transition: transform 0.3s; line-height: 1.2; }

.quiet-pet.angry { animation: petShake 0.5s ease; }

@keyframes petShake {
            0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)}
        }

.quiet-timer-display {
            font-size: 52px; font-weight: 300; color: #111827;
            font-family: 'SF Mono','Menlo','Consolas',monospace; letter-spacing: 0.04em;
        }

.quiet-fail-flash {
            animation: failFlash 0.6s ease 3;
        }

@keyframes failFlash {
            0%,100%{background:transparent} 50%{background:rgba(239,68,68,0.08)}
        }

.quiet-status-text { font-size: 15px; margin-top: 6px; font-weight: 500; }

.quiet-subtitle { font-size: 13px; color: #9ca3af; margin-top: 4px; }

/* 静音挑战 — 超级挑战区块 */

.quiet-super-section {
            padding: 10px 0 6px;
            margin: 4px 0;
        }

.quiet-super-title {
            font-size: 13px; font-weight: 600; color: #111827;
            margin-bottom: 2px;
        }

.quiet-super-desc {
            font-size: 11px; color: #9ca3af;
        }

/* 养育统计 */

.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.stats-table th { background: #f3f4f6; padding: 10px 14px; text-align: left; font-weight: 600; color: #4B5563; }

.stats-table td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; }

.stats-summary { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }

.stats-card {
            flex: 1; min-width: 150px; background: #fff; border-radius: 12px;
            padding: 20px; border: 1px solid #e5e7eb; text-align: center;
        }

.stats-card .sc-num { font-size: 32px; font-weight: 700; color: #111827; }

.stats-card .sc-label { font-size: 13px; color: #6b7280; margin-top: 4px; }

/* 班级管理 - v19 1:1 复刻 banchong.cn/setting */

.management-layout { display: flex; flex: 1; height: 100%; }

/* 左侧边栏 - 精确 224px */

.management-sidebar { width: 224px; background: white; border-right: 1px solid #f3f4f6; flex-shrink: 0; overflow-y: auto; padding: 16px 12px; }

.sidebar-section-title { font-size: 12px; color: #9ca3af; padding: 8px 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }

.sidebar-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; color: #4B5563; transition: all .15s; position: relative; width: 100%; text-align: left; border: none; background: none; font-family: inherit; }

.sidebar-menu-item:hover { background: #f3f4f6; color: #111827; }

.sidebar-menu-item.active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; }

.sidebar-menu-item .menu-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }

.sidebar-menu-item .menu-text { flex: 1; }

.sidebar-menu-item .menu-arrow { font-size: 12px; color: #e5e7eb; }

.sidebar-menu-item.active .menu-arrow { color: var(--brand-600); }

/* VIP推广条 */

.vip-banner { margin: 12px; padding: 12px; background: linear-gradient(90deg, var(--sun-100), #fbbf24); border-radius: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--gold-700); }

.vip-banner .vip-icon { font-size: 18px; }

.vip-banner .vip-text { font-size: 12px; font-weight: 500; }

.vip-banner .vip-tag { font-size: 10px; background: var(--brand-600); color: white; padding: 1px 6px; border-radius: 4px; margin-left: auto; }

/* 工具栏 (VIP 推广条 - 36px) */

.mgmt-toolbar { height: 36px; background: var(--sun-100); border-bottom: 1px solid #F5DEB3; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 13px; flex-shrink: 0; }

.mgmt-toolbar .toolbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--gold-700); }

.mgmt-toolbar .toolbar-left span.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mgmt-toolbar .toolbar-link { font-weight: 500; color: var(--gold-700); flex-shrink: 0; text-decoration: none; font-size: 14px; }

/* 主内容区 */

.management-content { flex: 1; display: flex; flex-direction: column; background: #F9FAFB; overflow: hidden; }

.content-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: white; border-bottom: 1px solid #f3f4f6; box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.05) 0px 1px 2px 0px; flex-shrink: 0; }

.content-header h2 { font-size: 18px; font-weight: 600; color: #111827; margin: 0; }

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

.roster-search-input { padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 24px; font-size: 14px; color: #111827; outline: none; width: 220px; transition: border-color 0.2s; background: #fff; }

.roster-search-input:focus { border-color: var(--brand-500); }

.roster-search-input::placeholder { color: #9ca3af; }

.btn-batch-import { padding: 8px 16px; font-size: 14px; border-radius: 8px; background: transparent; color: #4B5563; border: 1px solid #e5e7eb; cursor: pointer; font-weight: 500; transition: all 0.2s; }

.btn-batch-import:hover { border-color: #d1d5db; color: #111827; background: #f9fafb; }

.btn-add-student-primary { padding: 8px 20px; font-size: 14px; border-radius: 8px; background: var(--brand-500); color: #FFFFFF; border: none; cursor: pointer; font-weight: 500; transition: all 0.2s; }

.btn-add-student-primary:hover { background: var(--brand-600); }

.content-body { flex: 1; padding: 24px; overflow-y: auto; background: #F9FAFB; }

.management-tab-content { height: 100%; display: none; }

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

/* ---- 标签管理 ---- */

.tag-area { min-height: 300px; }

.tag-card { border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; transition: all .2s; background: #fff; }

.tag-card:hover { border-color: var(--gold-400); box-shadow: 0 1px 4px rgba(0,0,0,.06); }

.tag-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; }

.tag-member-btn { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; border: 1px solid var(--gold-200); background: var(--gold-50); color: var(--gold-700); transition: all .15s; cursor: pointer; }

.tag-member-btn:hover { background: var(--sun-100); }

.tag-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 20px; }

.tag-empty-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-50); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 16px; }

.tag-empty-title { font-size: 15px; font-weight: 600; color: #374151; margin-bottom: 8px; }

.tag-empty-desc { font-size: 13px; color: #9CA3AF; margin-bottom: 24px; max-width: 400px; }

.tag-empty-btn { padding: 10px 20px; background: var(--brand-50); color: var(--brand-600); font-size: 13px; font-weight: 700; border-radius: 12px; border: 1px solid var(--brand-300); cursor: pointer; transition: all .15s; }

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

/* 标签管理弹窗 */

.tag-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); backdrop-filter: blur(4px); z-index: 2000; display: none; }

.tag-modal-overlay.show { display: block; }

.tag-modal-wrap { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 24px; pointer-events: none; z-index: 2001; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.tag-modal-wrap.show { display: flex; }

.tag-modal-card { pointer-events: auto; background: #fff; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; width: 100%; margin: auto; max-height: calc(100vh - 48px); }

.tag-modal-card.max-w-sm { max-width: 384px; }

.tag-modal-card.max-w-lg { max-width: 620px; }

.tag-modal-card.max-w-2xl { max-width: 672px; }

.tag-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.05); color: #6B7280; border: none; cursor: pointer; z-index: 10; }

.tag-modal-close:hover { background: rgba(0,0,0,.1); }

.tag-modal-header { padding: 24px 24px 12px; }

.tag-modal-body { padding: 0 24px 16px; flex: 1; overflow-y: auto; }

.tag-modal-footer { display: flex; border-top: 1px solid #F3F4F6; }

.tag-modal-footer button { flex: 1; padding: 14px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: all .15s; }

.tag-modal-footer .cancel { color: #9CA3AF; background: transparent; }

.tag-modal-footer .cancel:hover { background: #F9FAFB; }

.tag-modal-footer .confirm { color: #fff; background: var(--brand-400); border-radius: 0 0 16px 0; }

.tag-modal-footer .confirm:hover { background: var(--brand-500); }

.tag-search-wrap { position: relative; margin-bottom: 12px; }

.tag-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9CA3AF; }

.tag-search-input { width: 100%; padding: 10px 12px 10px 38px; border-radius: 12px; border: 1px solid #E5E7EB; background: #F3F4F6; font-size: 13px; outline: none; transition: all .2s; box-sizing: border-box; }

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

.tag-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: sticky; top: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); padding: 4px 0; z-index: 1; }

.tag-section-dot { width: 6px; height: 16px; border-radius: 999px; flex-shrink: 0; }

.tag-section-label { font-size: 13px; font-weight: 700; color: #374151; }

.tag-student-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }

@media (min-width: 640px) { .tag-student-grid { grid-template-columns: repeat(4,1fr); } }

.tag-student-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 10px; border-radius: 12px; border: 1px solid; font-size: 13px; text-align: left; cursor: pointer; transition: all .15s; height: 66px; box-sizing: border-box; }

.tag-student-btn-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.tag-student-name { font-weight: 500; }

.tag-student-code { font-size: 11px; color: #9CA3AF; }

.tag-student-hint { font-size: 10px; margin-top: 2px; }

.tag-check-icon { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.tag-check-icon.checked { background: var(--brand-400); border: 1px solid var(--brand-400); }

.tag-check-icon.unchecked { background: #fff; border: 1px solid #D1D5DB; }

/* ---- 勋章管理 ---- */

.btn-edit-level { height: 32px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; background: white; color: #4B5563; border: 1px solid #e5e7eb; cursor: pointer; transition: all .15s; }

.btn-edit-level:hover { background: #f9fafb; border-color: #d1d5db; color: #111827; }

.level-edit-input { height: 32px; padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px; font-weight: 500; color: #111827; outline: none; transition: border-color .15s; }

.level-edit-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(79, 70, 229,.15); }

.level-num { font-weight: 600; color: #111827; font-size: 14px; }

.level-stage { font-size: 13px; color: #6b7280; }

.increment-value { font-size: 14px; color: #9ca3af; }

.increment-value.positive { color: #22c55e; }

.btn-level-edit, .btn-level-save, .btn-level-cancel { padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; border: none; transition: all .2s; }

.btn-level-edit { background: #f3f4f6; color: #6b7280; }

.btn-level-edit:hover { background: #e5e7eb; }

.btn-level-save { background: var(--brand-600); color: white; }

.btn-level-save:hover { background: #c2410c; }

.btn-level-cancel { background: #f3f4f6; color: #6b7280; margin-left: 6px; }

.btn-level-cancel:hover { background: #e5e7eb; }

.level-edit-input { padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px; outline: none; }

.level-edit-input:focus { border-color: var(--brand-600); }

.btn-level-reset { padding: 8px 20px; background: #f3f4f6; color: #6b7280; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .2s; }

.btn-level-reset:hover { background: #e5e7eb; }

.roster-table { width: 100%; background: white; border-radius: 12px; overflow: hidden; box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.05) 0px 1px 2px 0px; border: 1px solid #f3f4f6; }

.roster-thead { display: grid; grid-template-columns: 110px 110px 110px 155px 1fr 113px 113px; padding: 12px 24px; background: #f9fafb; font-weight: 500; color: #6b7280; font-size: 13px; border-bottom: 1px solid #f3f4f6; height: 44.5px; align-items: center; }

.roster-row { display: grid; grid-template-columns: 110px 110px 110px 155px 1fr 113px 113px; padding: 10px 24px; border-bottom: 1px solid #f3f4f6; align-items: center; background: white; min-height: 49px; transition: background .15s; }

.roster-row:hover { background: #f9fafb; }

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

.roster-cell { font-size: 14px; color: #111827; }

.roster-cell.muted { color: #9ca3af; font-size: 13px; }

.roster-cell.pet-name { color: var(--brand-600); font-size: 13px; font-weight: 500; }

.roster-cell.position { color: #6b7280; font-size: 13px; }

.roster-actions { display: flex; gap: 4px; justify-content: flex-end; }

.roster-empty { color: #999; font-size: 14px; }

.action-btn { width: 30px; height: 30px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: background 0.2s; }

.action-btn.edit { color: #6b7280; }

.action-btn.edit:hover { background: #f3f4f6; color: #374151; }

.action-btn.delete { color: #9ca3af; }

.action-btn.delete:hover { background: #fef2f2; color: #ef4444; }

/* 宠物胶囊 - 精确匹配 banchong.cn */

.pet-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 12px; color: #111827; }

.pet-pill.orange { background: var(--brand-50); color: var(--brand-600); }

.pet-change-btn { font-size: 12px; color: #6b7280; cursor: pointer; background: none; border: none; padding: 2px 4px; }

.pet-change-btn:hover { color: #374151; }

/* 性别标签 */

.gender-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; }

.gender-tag.male { background: #dbeafe; color: #1e40af; }

.gender-tag.female { background: #fce7f3; color: #9d174d; }

.gender-tag.none { background: #f3f4f6; color: #6b7280; }

/* 能量数字 */

/* 等宽数字 */

.number-badge { font-variant-numeric: tabular-nums; }

/* 积分规则样式 - 1:1 复刻 banchong.cn/setting/rules */

/* tab 组 */

.tab-group { display: inline-flex; background: #f3f4f6; padding: 2px; border-radius: 8px; border: 1px solid #e5e7eb; }

.tab-pill { height: 28px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: all .15s; }

.tab-pill.active { background: white; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.tab-pill.inactive { color: #6b7280; }

.tab-pill.inactive:hover { color: #111827; }

/* 规则卡片 */

.rule-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; height: 70px; transition: all .15s; }

.rule-card:hover { border-color: var(--brand-500); box-shadow: 0 1px 4px rgba(79, 70, 229,.05); }

.rule-num { width: 24px; height: 24px; border-radius: 50%; background: #f3f4f6; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

.rule-emoji { font-size: 28px; line-height: 1; }

.rule-name { font-size: 14px; font-weight: 600; color: #111827; }

/* 分数 pill */

.score-pill { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }

.score-pill.positive { background: var(--sun-100); color: var(--gold-700); }

.score-pill.negative { background: #fee2e2; color: #991b1b; }

/* 分类下拉 */

.cat-select { height: 26px; padding: 4px 8px; font-size: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; color: #111827; cursor: pointer; }

.cat-select:hover { border-color: #d1d5db; }

/* 操作按钮 */

.op-btn-icon-only { width: 30px; height: 30px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary, #9ca3af); cursor: pointer; border: 1px solid transparent; background: transparent; transition: all .25s var(--ease-out); position: relative; overflow: hidden; }

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

.op-btn-icon-only:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); box-shadow: 0 2px 8px rgba(79, 70, 229,0.12); }

.op-btn-icon-only:active { transform: scale(0.92); }

/* 新增分类输入 */

.new-cat-input { height: 44px; padding: 10px 40px 10px 12px; border: 2px solid #d1d5db; border-radius: 12px; font-size: 14px; color: #111827; outline: none; transition: border-color .2s; }

.new-cat-input:focus { border-color: var(--brand-500); }

.new-cat-input::placeholder { color: #9ca3af; }

/* 排序按钮 */

/* 小组管理样式 - 1:1 复刻 banchong.cn/setting/groups */

/* 小组卡片 */

/* 头像 */

/* 小组名 */

/* 成员数 pill */

.member-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; background: #f3f4f6; color: #4B5563; font-size: 12px; font-weight: 500; }

/* 认领提示 */

.claim-hint { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--brand-600); background: var(--brand-50); padding: 4px 8px; border-radius: 6px; }

/* 操作按钮 */

.op-btn { height: 34px; padding: 0 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; transition: all .25s var(--ease-out); white-space: nowrap; position: relative; overflow: hidden; }

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

.op-btn-secondary { border: 1.5px solid var(--border); color: var(--text-secondary); background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.7); }

.op-btn-secondary:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-600); box-shadow: 0 2px 10px rgba(79, 70, 229,0.14); transform: translateY(-1px); }

.op-btn-primary { background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); color: #FFFFFF; box-shadow: 0 2px 8px rgba(79, 70, 229,0.28), inset 0 1px 0 rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.15); }

.op-btn-primary:hover { box-shadow: 0 6px 20px rgba(79, 70, 229,0.36); filter: brightness(1.04); transform: translateY(-1px); }

.op-btn-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--text-tertiary, #9ca3af); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent; background: transparent; transition: all .25s var(--ease-out); position: relative; overflow: hidden; }

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

.op-btn-icon:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); box-shadow: 0 2px 8px rgba(79, 70, 229,0.12); }

.op-btn-icon:active { transform: scale(0.92); }

/* 新增规则按钮 */

.btn-add-rule { height: 34px; padding: 0 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); color: white; border: 1px solid rgba(255,255,255,0.15); cursor: pointer; transition: all .25s var(--ease-out); white-space: nowrap; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(79, 70, 229,0.28), inset 0 1px 0 rgba(255,255,255,0.18); }

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

.btn-add-rule:hover { box-shadow: 0 6px 20px rgba(79, 70, 229,0.36); filter: brightness(1.04); transform: translateY(-1px); }

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

/* flex 工具类 */

.flex { display: flex; }

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

.justify-between { justify-content: space-between; }

.gap-2 { gap: 8px; }

.gap-3 { gap: 12px; }

.gap-4 { gap: 16px; }

.gap-1\.5 { gap: 6px; }

.mb-3 { margin-bottom: 12px; }

.mb-4 { margin-bottom: 16px; }

.mb-1 { margin-bottom: 4px; }

.space-y-2 > * + * { margin-top: 8px; }

.text-base { font-size: 16px; }

.font-semibold { font-weight: 600; }

.text-slate-700 { color: #374151; }

.text-slate-500 { color: #6b7280; }

.w-4 { width: 16px; }

.h-4 { height: 16px; }

.w-3\.5 { width: 14px; }

.h-3\.5 { height: 14px; }

.grid { display: grid; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.shrink-0 { flex-shrink: 0; }

.min-w-0 { min-width: 0; }

.flex-1 { flex: 1; }

/* 宠物分类弹窗（旧版保留兼容，新版用 adopt-tab / adopt-card 体系） */

.pet-categories { padding: 20px 30px; border-bottom: 1px solid #eee; display: flex; gap: 10px; overflow-x: auto; }

.pet-category { padding: 8px 16px; border-radius: 20px; background: #f0f0f0; cursor: pointer; font-size: 14px; }

.pet-category.active { background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%); color: #FFFFFF; }

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

.pet-item { background: #f8f9fa; border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; overflow: hidden; }

.pet-item.selected { background: #e3f2fd; border: 2px solid var(--brand-500); }

.pet-item-image { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-300) 100%); display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 10px; }

.pet-item > div:last-child { font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === 宠物图鉴卡片 === */

.pet-series-tag { transition: all .15s; cursor: pointer; }

.pet-series-tag:hover { transform: translateY(-1px); }

.pet-series-tag.active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Tailwind 兼容 - 弹窗 hidden 类 */

.hidden { display: none !important; }

.fixed { position: fixed; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.inset-x-0 { left: 0; right: 0; }

.bg-black\/40 { background-color: rgba(0,0,0,0.4); }

.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.flex { display: flex; }

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

.justify-center { justify-content: center; }

.flex-col { flex-direction: column; }

.p-6 { padding: 24px; }

.px-6 { padding-left: 24px; padding-right: 24px; }

.py-2 { padding-top: 8px; padding-bottom: 8px; }

.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }

.py-4 { padding-top: 16px; padding-bottom: 16px; }

.pt-2 { padding-top: 8px; }

.pt-5 { padding-top: 20px; }

.pb-3 { padding-bottom: 12px; }

.gap-2 { gap: 8px; }

.gap-4 { gap: 16px; }

.gap-6 { gap: 24px; }

.gap-3 { gap: 12px; }

.overflow-hidden { overflow: hidden; }

.overflow-y-auto { overflow-y: auto; }

.pointer-events-none { pointer-events: none; }

.pointer-events-auto { pointer-events: auto; }

.rounded-2xl { border-radius: 16px; }

.rounded-xl { border-radius: 12px; }

.rounded-lg { border-radius: 8px; }

.rounded-full { border-radius: 9999px; }

.border { border: 1px solid #e5e7eb; }

.border-2 { border-width: 2px; }

.border-b { border-bottom: 1px solid #e5e7eb; }

.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }

.border-transparent { border-color: transparent; }

.border-orange-500 { border-color: var(--brand-500); }

.border-slate-200 { border-color: #e5e7eb; }

.border-slate-100 { border-color: #f3f4f6; }

.bg-white { background-color: #fff; }

.bg-slate-100 { background-color: #f3f4f6; }

.bg-orange-50 { background-color: var(--brand-50); }

.bg-orange-500 { background-color: var(--brand-500); }

.text-white { color: #fff; }

.text-slate-800 { color: #111827; }

.text-slate-700 { color: #374151; }

.text-slate-500 { color: #6b7280; }

.text-slate-400 { color: #9ca3af; }

.text-amber-600 { color: #d97706; }

.text-orange-600 { color: var(--brand-600); }

.text-xs { font-size: 12px; }

.text-sm { font-size: 14px; }

.text-base { font-size: 16px; }

.text-lg { font-size: 18px; }

.text-2xl { font-size: 24px; }

.text-4xl { font-size: 36px; }

.text-5xl { font-size: 48px; }

.font-semibold { font-weight: 600; }

.font-bold { font-weight: 700; }

.leading-none { line-height: 1; }

.tracking-tight { letter-spacing: -0.025em; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.w-full { width: 100%; }

.w-8 { width: 32px; }

.w-4 { width: 16px; }

.h-8 { height: 32px; }

.h-4 { height: 16px; }

.h-24 { height: 96px; }

.max-w-4xl { max-width: 896px; }

.relative { position: relative; }

.absolute { position: absolute; }

.top-3 { top: 12px; }

.right-3 { right: 12px; }

.top-16 { top: 64px; }

.z-10 { z-index: 10; }

.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

.hover\:bg-slate-100:hover { background-color: #f3f4f6; }

.hover\:bg-orange-600:hover { background-color: var(--brand-600); }

.hover\:text-slate-700:hover { color: #374151; }

.hover\:border-orange-300:hover { border-color: var(--brand-300); }

.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

.transition-all { transition: all 0.2s; }

.cursor-pointer { cursor: pointer; }

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

.mb-1 { margin-bottom: 4px; }

.mb-2 { margin-bottom: 8px; }

.mb-3 { margin-bottom: 12px; }

.mb-4 { margin-bottom: 16px; }

.mb-6 { margin-bottom: 24px; }

.mt-0\.5 { margin-top: 2px; }

.grid { display: grid; }

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

.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* ── 密码框小眼睛（显示/隐藏密码）2026-09-11 ── */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.pw-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  padding: 0; display: flex; align-items: center; justify-content: center;
  color: #9CA3AF; border-radius: 6px; transition: color 0.15s, background 0.15s;
  line-height: 1; user-select: none;
}
.pw-eye:hover { color: var(--brand-500, #4F6BFF); background: rgba(0,0,0,0.04); }
.pw-eye svg { width: 18px; height: 18px; display: block; }
/* 登录页深色弹窗里微调 */
.login-input.pw-target { padding-right: 42px; }