/* 由 web/build/gen-web-assets.mjs 生成,请勿手改。
   源:miniprogram/app.wxss + 各页 wxss + 各组件 wxss(组件样式带 [data-cmp] scope)。
   拼接顺序:
     app.wxss
     pages/plaza/plaza.wxss
     pages/publish/publish.wxss
     pages/feed/feed.wxss
     pages/mine/mine.wxss
     pages/detail/detail.wxss
     pages/appeal/appeal.wxss
     pages/profile/profile.wxss
     pages/album/album.wxss
     pages/guardians/guardians.wxss
     pages/magic/magic.wxss
     pages/battle/battle.wxss
     pages/shop/shop.wxss
     pages/bag/bag.wxss
     pages/garden/garden.wxss
     pages/admin/admin.wxss
     components/collection-modal/collection-modal.wxss
     components/level-badge/level-badge.wxss
     components/level-up-modal/level-up-modal.wxss
     components/post-card/post-card.wxss
*/

/* ===== app.wxss ===== */
/* 全局样式:暗色主题 + 通用 class + 六级段位金属渐变徽章 + 动画(设计文档 §3.5) */

.wx-page { /* 暗色主题变量(设计文档色值) */ --bg: #12121a; --card: #1c1c28; --card-2: #232332; --text: #e8e8f0; --text-dim: #8a8f98; --accent-purple: #a855f7; --accent-cyan: #4fd1c5; --danger: #f56565; background: #12121a; color: #e8e8f0; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; font-size: calc(28 * var(--rpx)); line-height: 1.5; min-height: 100vh; }

.wx-view, .wx-text, .wx-scroll-view, navigator, .wx-button, .wx-input, .wx-textarea, .wx-img { box-sizing: border-box; }

/* —— 通用布局 —— */
.row { display: flex; flex-direction: row; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.grow { flex: 1; }
.dim { color: #8a8f98; }
.muted { color: #8a8f98; font-size: calc(24 * var(--rpx)); }

.card { background: #1c1c28; border-radius: calc(20 * var(--rpx)); padding: calc(24 * var(--rpx)); margin: calc(20 * var(--rpx)) calc(24 * var(--rpx)); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.35); }

.divider { height: calc(1 * var(--rpx)); background: rgba(255, 255, 255, 0.06); margin: calc(16 * var(--rpx)) 0; }

/* —— 按钮 —— */
.btn-primary { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #ffffff; border-radius: calc(48 * var(--rpx)); padding: calc(22 * var(--rpx)) calc(40 * var(--rpx)); text-align: center; font-size: calc(30 * var(--rpx)); font-weight: 600; border: none; box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(168, 85, 247, 0.35); }
.btn-primary::after { border: none; }
.btn-primary[disabled] { opacity: 0.45; box-shadow: none; }

.btn-ghost { background: transparent; color: #4fd1c5; border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.5); border-radius: calc(48 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(40 * var(--rpx)); text-align: center; font-size: calc(28 * var(--rpx)); }
.btn-ghost::after { border: none; }

/* —— 六级段位徽章(纯 CSS 金属渐变,无图片资源)—— */
.badge { display: inline-flex; align-items: center; justify-content: center; border-radius: calc(999 * var(--rpx)); padding: calc(4 * var(--rpx)) calc(18 * var(--rpx)); font-size: calc(24 * var(--rpx)); font-weight: 700; color: #1c1c28; white-space: nowrap; line-height: 1.6; }

/* 废铁:哑光铁灰 */
.badge-scrap { background: linear-gradient(135deg, #9aa0aa, #8a8f98 50%, #6b7078); color: #f0f0f0; }
/* 青铜:金属渐变 */
.badge-bronze { background: linear-gradient(135deg, #e6b57f, #cd7f32 48%, #9c5f27); }
/* 白银:金属渐变 */
.badge-silver { background: linear-gradient(135deg, #ffffff, #c0c4cc 48%, #90949c); }
/* 黄金:金属渐变 + 微光 */
.badge-gold { background: linear-gradient(135deg, #ffe9a8, #f5a623 48%, #cf8a15); box-shadow: 0 0 calc(14 * var(--rpx)) rgba(245, 166, 35, 0.55); }
/* 铂金:金属渐变 + 流光 */
.badge-platinum { background: linear-gradient(135deg, #b6f7f0, #4fd1c5 48%, #2fa89e); box-shadow: 0 0 calc(16 * var(--rpx)) rgba(79, 209, 197, 0.6); }
/* 王者:紫金渐变 + 呼吸发光 */
.badge-king { background: linear-gradient(135deg, #e9d5ff, #a855f7 45%, #7c3aed); color: #ffffff; box-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.75); animation: king-glow 2.2s ease-in-out infinite; }
/* 未判级 / 未知:灰色态 */
.badge-unknown { background: #2a2a36; color: #8a8f98; box-shadow: none; }

/* —— 动画 keyframes —— */
@keyframes king-glow {
  0%, 100% { box-shadow: 0 0 calc(14 * var(--rpx)) rgba(168, 85, 247, 0.5); }
  50% { box-shadow: 0 0 calc(30 * var(--rpx)) rgba(168, 85, 247, 0.95); }
}

/* 判级揭晓:徽章弹出 */
@keyframes badge-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.badge-pop { animation: badge-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

/* 录音波纹 */
@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ripple { animation: ripple 1.4s ease-out infinite; }

/* 淡入 */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(calc(8 * var(--rpx))); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 0.25s ease-out; }

/* 凤凰图标(twemoji phoenix,CC-BY 4.0):头像占位与空态大图 */
.ph-img { width: 100%; height: 100%; border-radius: 50%; }
.empty-icon-img { width: calc(120 * var(--rpx)); height: calc(120 * var(--rpx)); margin-bottom: calc(24 * var(--rpx)); filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.35)); }

/* ===== pages/plaza/plaza.wxss ===== */
/* 广场页:排序 tab + 卡片流 + 空态(深色主题与段位风延续 app.wxss) */

.plaza-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

/* —— 顶部排序切换(吸顶) —— */
.sort-bar { position: sticky; top: 0; z-index: 10; background: #12121a; padding: calc(16 * var(--rpx)) calc(24 * var(--rpx)); border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.06); }

.sort-tab { flex: 1; text-align: center; padding: calc(14 * var(--rpx)) 0; margin: 0 calc(8 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #8a8f98; background: transparent; border-radius: calc(14 * var(--rpx)); transition: color 0.15s ease, background 0.15s ease; }

.sort-tab.active { color: #e8e8f0; font-weight: 700; background: #1c1c28; box-shadow: inset 0 calc(-6 * var(--rpx)) 0 #a855f7; }

/* —— 空态 —— */
.empty { padding: calc(160 * var(--rpx)) calc(48 * var(--rpx)) 0; }

.empty-icon { font-size: calc(120 * var(--rpx)); margin-bottom: calc(24 * var(--rpx)); filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.35)); }

.empty-text { font-size: calc(30 * var(--rpx)); color: #8a8f98; margin-bottom: calc(40 * var(--rpx)); }

.empty-btn { padding: calc(20 * var(--rpx)) calc(64 * var(--rpx)); }

/* —— 列表提示 —— */
.list-hint { text-align: center; font-size: calc(24 * var(--rpx)); color: #8a8f98; padding: calc(28 * var(--rpx)) 0; }

/* ===== pages/publish/publish.wxss ===== */
/* 发布页:类型 tab + 三通道面板 + 进度条(深色主题与段位风延续 app.wxss) */

.publish-page { min-height: 100vh; padding-bottom: calc(60 * var(--rpx)); }

/* —— 类型切换 tab —— */
.type-bar { padding: calc(20 * var(--rpx)) calc(16 * var(--rpx)) calc(4 * var(--rpx)); }

.type-tab { flex: 1; text-align: center; padding: calc(16 * var(--rpx)) 0; margin: 0 calc(8 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #8a8f98; background: #1c1c28; border-radius: calc(14 * var(--rpx)); transition: color 0.15s ease, box-shadow 0.15s ease; }

.type-tab.active { color: #e8e8f0; font-weight: 700; box-shadow: inset 0 calc(-6 * var(--rpx)) 0 #a855f7, 0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.25); }

/* —— 文字通道 —— */
.text-input { width: 100%; min-height: calc(320 * var(--rpx)); font-size: calc(30 * var(--rpx)); line-height: 1.7; color: #e8e8f0; }

.text-ph { color: #5a5f68; }

.text-foot { width: 100%; margin-top: calc(16 * var(--rpx)); }

.text-count { font-size: calc(24 * var(--rpx)); color: #4fd1c5; }

.text-count.full { color: #f56565; font-weight: 700; }

/* —— 语音通道 —— */
.audio-panel { padding: calc(64 * var(--rpx)) calc(24 * var(--rpx)); align-items: center; }

.ripple-wrap { position: relative; width: calc(200 * var(--rpx)); height: calc(200 * var(--rpx)); justify-content: center; align-items: center; margin-bottom: calc(32 * var(--rpx)); }

.ripple-ring { position: absolute; width: calc(160 * var(--rpx)); height: calc(160 * var(--rpx)); border-radius: 50%; border: calc(4 * var(--rpx)) solid rgba(168, 85, 247, 0.6); }

.ripple-core { width: calc(120 * var(--rpx)); height: calc(120 * var(--rpx)); border-radius: 50%; background: linear-gradient(135deg, #a855f7, #7c3aed); font-size: calc(52 * var(--rpx)); box-shadow: 0 0 calc(30 * var(--rpx)) rgba(168, 85, 247, 0.55); }

.record-time { font-size: calc(34 * var(--rpx)); font-weight: 700; color: #e8e8f0; margin-bottom: calc(40 * var(--rpx)); font-variant-numeric: tabular-nums; }

.record-time.recording { color: #a855f7; }

.audio-hint { margin-bottom: calc(40 * var(--rpx)); text-align: center; }

.audio-btn { min-width: calc(280 * var(--rpx)); text-align: center; margin: calc(8 * var(--rpx)) calc(16 * var(--rpx)); }

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

.btn-ghost.danger { color: #f56565; border-color: rgba(245, 101, 101, 0.5); }

/* —— 视频通道 —— */
.video-panel { padding: calc(24 * var(--rpx)); }

.video-player { width: 100%; height: calc(400 * var(--rpx)); border-radius: calc(16 * var(--rpx)); background: #000; }

.video-foot { width: 100%; margin-top: calc(20 * var(--rpx)); }

.video-repick { padding: calc(10 * var(--rpx)) calc(32 * var(--rpx)); font-size: calc(26 * var(--rpx)); }

.video-empty { padding: calc(96 * var(--rpx)) calc(24 * var(--rpx)); border: calc(2 * var(--rpx)) dashed rgba(138, 143, 152, 0.4); border-radius: calc(16 * var(--rpx)); align-items: center; }

.video-plus { font-size: calc(88 * var(--rpx)); margin-bottom: calc(20 * var(--rpx)); }

/* —— 提交区 —— */
.submit-area { padding: calc(32 * var(--rpx)) calc(24 * var(--rpx)) 0; display: flex; flex-direction: column; align-items: center; }

.progress-track { position: relative; width: 100%; height: calc(28 * var(--rpx)); background: #1c1c28; border-radius: calc(999 * var(--rpx)); overflow: hidden; margin-bottom: calc(28 * var(--rpx)); }

.progress-bar { height: 100%; background: linear-gradient(90deg, #7c3aed, #a855f7 60%, #4fd1c5); border-radius: calc(999 * var(--rpx)); transition: width 0.2s ease; }

.progress-text { position: absolute; right: calc(16 * var(--rpx)); top: 0; line-height: calc(28 * var(--rpx)); font-size: calc(20 * var(--rpx)); color: #e8e8f0; }

.submit-btn { width: 100%; }

.submit-hint { margin-top: calc(20 * var(--rpx)); text-align: center; }

/* ===== pages/feed/feed.wxss ===== */
/* 榜单页:头部 + TOP50 行(前三名皇冠发光)+ 空态(深色主题段位风延续 app.wxss) */

.feed-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

/* —— 头部 —— */
.lb-head { padding: calc(36 * var(--rpx)) calc(24 * var(--rpx)) calc(12 * var(--rpx)); }

.lb-title { font-size: calc(44 * var(--rpx)); font-weight: 800; letter-spacing: calc(2 * var(--rpx)); background: linear-gradient(135deg, #e9d5ff, #a855f7 45%, #4fd1c5); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.35)); }

.lb-sub { margin-top: calc(8 * var(--rpx)); letter-spacing: calc(4 * var(--rpx)); }

/* —— 榜单行 —— */
.lb-row { padding: calc(22 * var(--rpx)) calc(24 * var(--rpx)); margin: calc(16 * var(--rpx)) calc(24 * var(--rpx)); transition: transform 0.12s ease, opacity 0.12s ease; }

.lb-row-hover { opacity: 0.88; transform: scale(0.995); }

/* 前三名:大号行 + 发光边框 */
.lb-top { padding: calc(30 * var(--rpx)) calc(28 * var(--rpx)); margin: calc(20 * var(--rpx)) calc(24 * var(--rpx)); }
.lb-top.top1 { border: calc(2 * var(--rpx)) solid rgba(245, 166, 35, 0.65); box-shadow: 0 0 calc(28 * var(--rpx)) rgba(245, 166, 35, 0.3), 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.35); background: linear-gradient(135deg, #241f2c, #1c1c28 55%); }
.lb-top.top2 { border: calc(2 * var(--rpx)) solid rgba(192, 196, 204, 0.55); box-shadow: 0 0 calc(22 * var(--rpx)) rgba(192, 196, 204, 0.22), 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.35); }
.lb-top.top3 { border: calc(2 * var(--rpx)) solid rgba(205, 127, 50, 0.55); box-shadow: 0 0 calc(22 * var(--rpx)) rgba(205, 127, 50, 0.25), 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.35); }

/* 名次区 */
.lb-rank { width: calc(72 * var(--rpx)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.lb-crown { font-size: calc(48 * var(--rpx)); filter: drop-shadow(0 0 calc(12 * var(--rpx)) rgba(245, 166, 35, 0.55)); }
.top2 .lb-crown { filter: drop-shadow(0 0 calc(10 * var(--rpx)) rgba(192, 196, 204, 0.5)); }
.top3 .lb-crown { filter: drop-shadow(0 0 calc(10 * var(--rpx)) rgba(205, 127, 50, 0.5)); }

.lb-rank-num { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #8a8f98; font-variant-numeric: tabular-nums; }

/* 头像 */
.lb-avatar { width: calc(72 * var(--rpx)); height: calc(72 * var(--rpx)); border-radius: 50%; background: #2a2a36; flex-shrink: 0; margin-right: calc(20 * var(--rpx)); }
.lb-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: calc(34 * var(--rpx)); }
.lb-avatar-top { width: calc(96 * var(--rpx)); height: calc(96 * var(--rpx)); font-size: calc(44 * var(--rpx)); }
.top1 .lb-avatar-top { border: calc(3 * var(--rpx)) solid rgba(245, 166, 35, 0.7); }
.top2 .lb-avatar-top { border: calc(3 * var(--rpx)) solid rgba(192, 196, 204, 0.6); }
.top3 .lb-avatar-top { border: calc(3 * var(--rpx)) solid rgba(205, 127, 50, 0.6); }

/* 主区 */
.lb-main { overflow: hidden; }

.lb-nick { font-size: calc(28 * var(--rpx)); font-weight: 600; color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(320 * var(--rpx)); }
.lb-nick-top { font-size: calc(32 * var(--rpx)); font-weight: 800; }
.top1 .lb-nick-top { color: #f5a623; }

.lb-like { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: #8a8f98; }

.lb-summary { margin: calc(10 * var(--rpx)) 0; font-size: calc(26 * var(--rpx)); line-height: 1.6; color: #e8e8f0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lb-summary-ph { color: #8a8f98; font-style: italic; }

.lb-foot { width: 100%; margin-top: calc(4 * var(--rpx)); }

.lb-time { flex-shrink: 0; font-size: calc(22 * var(--rpx)); margin-left: calc(16 * var(--rpx)); }

/* —— 空态 —— */
.empty { padding: calc(140 * var(--rpx)) calc(48 * var(--rpx)) 0; }
.empty-icon { font-size: calc(120 * var(--rpx)); margin-bottom: calc(24 * var(--rpx)); filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(245, 166, 35, 0.4)); }
.empty-text { font-size: calc(30 * var(--rpx)); color: #8a8f98; margin-bottom: calc(40 * var(--rpx)); }
.empty-btn { padding: calc(20 * var(--rpx)) calc(64 * var(--rpx)); }

/* —— 列表提示 —— */
.list-hint { text-align: center; font-size: calc(24 * var(--rpx)); color: #8a8f98; padding: calc(28 * var(--rpx)) 0; }

/* ===== pages/mine/mine.wxss ===== */
/* 我的页:头部 + 申诉入口 + 提交列表(深色主题段位风延续 app.wxss) */

.mine-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

.row-hover { opacity: 0.88; }

/* —— 头部卡片 —— */
.mine-head { margin-top: calc(28 * var(--rpx)); padding: calc(30 * var(--rpx)) calc(28 * var(--rpx)); }

.mh-left { overflow: hidden; }

.mh-avatar { width: calc(108 * var(--rpx)); height: calc(108 * var(--rpx)); border-radius: 50%; background: #2a2a36; flex-shrink: 0; margin-right: calc(24 * var(--rpx)); border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.45); box-shadow: 0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.25); }

.mh-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: calc(52 * var(--rpx)); }

.mh-info { overflow: hidden; }

.mh-nick { font-size: calc(34 * var(--rpx)); font-weight: 700; color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(420 * var(--rpx)); margin-bottom: calc(6 * var(--rpx)); }

/* 反脆弱积分徽章行:段位称号 + 全局等级(小级/10)+ 总积分 */
.mh-rank { font-size: calc(24 * var(--rpx)); font-weight: 600; color: #a855f7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(460 * var(--rpx)); margin-bottom: calc(4 * var(--rpx)); text-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.35); }

.mh-arrow { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(40 * var(--rpx)); color: #8a8f98; }

/* —— 收集入口(2.0 Task 9):点亮图 / 守护神兽 两卡片,角标 n/12 —— */
.mine-entries { margin-top: calc(4 * var(--rpx)); }

.mine-entry { margin: calc(16 * var(--rpx)) calc(12 * var(--rpx)); padding: calc(22 * var(--rpx)) calc(12 * var(--rpx)); }
.mine-entry:first-child { margin-left: calc(24 * var(--rpx)); }
.mine-entry:last-child { margin-right: calc(24 * var(--rpx)); }

.me-emoji { font-size: calc(44 * var(--rpx)); line-height: 1.3; filter: drop-shadow(0 0 calc(10 * var(--rpx)) rgba(168, 85, 247, 0.35)); }

.me-name { margin-top: calc(6 * var(--rpx)); font-size: calc(26 * var(--rpx)); font-weight: 600; color: #e8e8f0; }

.me-badge { margin-top: calc(4 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #4fd1c5; font-variant-numeric: tabular-nums; }

/* —— 魔法卡片(魔法计划 Task 5):等级徽章 + 可用红心 —— */
.magic-card { margin: calc(4 * var(--rpx)) calc(24 * var(--rpx)) 0; padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.35); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(168, 85, 247, 0.15); }

.mc-left { overflow: hidden; }

.mc-emoji { flex-shrink: 0; font-size: calc(52 * var(--rpx)); line-height: 1.3; margin-right: calc(20 * var(--rpx)); filter: drop-shadow(0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.4)); }

.mc-title { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #a855f7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: calc(4 * var(--rpx)); text-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.35); }

.mc-hearts { font-size: calc(28 * var(--rpx)); font-weight: 700; color: #f56565; font-variant-numeric: tabular-nums; }

/* —— 魔法四宫格入口(魔法计划 Task 5):2×2,复用 me-emoji/me-name —— */
.magic-grid { display: flex; flex-wrap: wrap; padding: 0 calc(12 * var(--rpx)); }

.mg-cell { width: calc(50% - calc(24 * var(--rpx))); margin: calc(12 * var(--rpx)); padding: calc(22 * var(--rpx)) calc(12 * var(--rpx)); }

/* —— 我的申诉入口 —— */
.mine-link { padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); }

.ml-text { font-size: calc(28 * var(--rpx)); color: #4fd1c5; }

/* —— 提交列表行 —— */
.mine-row { padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); margin: calc(16 * var(--rpx)) calc(24 * var(--rpx)); }

.mr-title { overflow: hidden; margin-right: calc(16 * var(--rpx)); }

.mr-icon { flex-shrink: 0; font-size: calc(30 * var(--rpx)); margin-right: calc(12 * var(--rpx)); }

.mr-summary { font-size: calc(28 * var(--rpx)); color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mr-summary-ph { color: #8a8f98; font-style: italic; }

/* 状态徽标(非 JUDGED) */
.mr-tag { flex-shrink: 0; font-size: calc(24 * var(--rpx)); border-radius: calc(999 * var(--rpx)); padding: calc(4 * var(--rpx)) calc(18 * var(--rpx)); white-space: nowrap; }
.tag-pending { color: #4fd1c5; background: rgba(79, 209, 197, 0.12); border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.35); }
.tag-failed { color: #f56565; background: rgba(245, 101, 101, 0.12); border: calc(1 * var(--rpx)) solid rgba(245, 101, 101, 0.35); }

/* 底部:时间 + 行内操作 */
.mr-foot { width: 100%; margin-top: calc(16 * var(--rpx)); }

.mr-act { font-size: calc(24 * var(--rpx)); padding: calc(8 * var(--rpx)) calc(24 * var(--rpx)); border-radius: calc(999 * var(--rpx)); margin-left: calc(16 * var(--rpx)); }
.act-rejudge { color: #4fd1c5; border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.5); }
.act-del { color: #f56565; border: calc(1 * var(--rpx)) solid rgba(245, 101, 101, 0.5); }

/* —— 空态 / 加载提示 —— */
.empty { padding: calc(140 * var(--rpx)) calc(48 * var(--rpx)) 0; }
.empty-icon { font-size: calc(120 * var(--rpx)); margin-bottom: calc(24 * var(--rpx)); filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.4)); }
.empty-text { font-size: calc(30 * var(--rpx)); color: #8a8f98; margin-bottom: calc(40 * var(--rpx)); }
.empty-btn { padding: calc(20 * var(--rpx)) calc(64 * var(--rpx)); }

.list-hint { text-align: center; font-size: calc(24 * var(--rpx)); color: #8a8f98; padding: calc(28 * var(--rpx)) 0; }

/* —— 管理后台隐藏入口(admin 计划 Task 2):muted 色小字居中,上下留白 —— */
.admin-entry { text-align: center; font-size: calc(24 * var(--rpx)); color: #8a8f98; opacity: 0.7; padding: calc(48 * var(--rpx)) 0 calc(8 * var(--rpx)); }

/* ===== pages/detail/detail.wxss ===== */
/* 详情页:头部信息/媒体/判级结果/操作栏/评论区 + 底部固定输入条(深色主题段位风延续 app.wxss) */

.detail-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

/* —— 错误/空态 —— */
.empty { padding: calc(160 * var(--rpx)) calc(48 * var(--rpx)) 0; }
.empty-icon { font-size: calc(120 * var(--rpx)); margin-bottom: calc(24 * var(--rpx)); filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.35)); }
.empty-text { font-size: calc(30 * var(--rpx)); color: #8a8f98; margin-bottom: calc(40 * var(--rpx)); }
.empty-btn { padding: calc(20 * var(--rpx)) calc(64 * var(--rpx)); }

/* —— 头部信息 —— */
.dt-head { width: 100%; }
.dt-head-left { overflow: hidden; }

.dt-avatar { width: calc(80 * var(--rpx)); height: calc(80 * var(--rpx)); border-radius: 50%; background: #2a2a36; display: flex; align-items: center; justify-content: center; font-size: calc(40 * var(--rpx)); flex-shrink: 0; }

.dt-head-info { margin-left: calc(20 * var(--rpx)); overflow: hidden; }

.dt-nick { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(400 * var(--rpx)); }

.dt-owner-tag { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #4fd1c5; border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.5); border-radius: calc(999 * var(--rpx)); padding: calc(4 * var(--rpx)) calc(18 * var(--rpx)); }

/* —— 正文 —— */
.dt-text { margin-top: calc(24 * var(--rpx)); font-size: calc(30 * var(--rpx)); line-height: 1.8; color: #e8e8f0; word-break: break-all; white-space: pre-wrap; }

/* —— AUDIO 自绘播放条 —— */
.dt-audio { margin-top: calc(28 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)); background: #232332; border-radius: calc(20 * var(--rpx)); }

.dt-play-btn { width: calc(96 * var(--rpx)); height: calc(96 * var(--rpx)); border-radius: 50%; background: linear-gradient(135deg, #a855f7, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: calc(40 * var(--rpx)); margin-right: calc(20 * var(--rpx)); flex-shrink: 0; box-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.45); transition: transform 0.12s ease; }
.dt-play-btn.playing { animation: king-glow 2.2s ease-in-out infinite; }
.dt-play-hover { transform: scale(0.94); opacity: 0.9; }

.dt-seek { margin: calc(8 * var(--rpx)) 0 0; }

.dt-times { width: 100%; padding: 0 calc(4 * var(--rpx)); font-variant-numeric: tabular-nums; }

/* —— VIDEO —— */
.dt-video { margin-top: calc(28 * var(--rpx)); width: 100%; height: calc(400 * var(--rpx)); border-radius: calc(16 * var(--rpx)); background: #000; }

/* —— 判级结果区 —— */
.judge-card { padding: calc(40 * var(--rpx)) calc(24 * var(--rpx)); }

.judge-pending, .judge-result, .judge-failed { width: 100%; align-items: center; }

.judge-hourglass { font-size: calc(88 * var(--rpx)); margin-bottom: calc(16 * var(--rpx)); animation: hourglass-swing 1.6s ease-in-out infinite; }

@keyframes hourglass-swing {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

.judge-title { font-size: calc(32 * var(--rpx)); font-weight: 700; color: #e8e8f0; margin-bottom: calc(8 * var(--rpx)); }

.judge-sub { text-align: center; }

.pending-dots { margin-top: calc(24 * var(--rpx)); }

.pending-dot { width: calc(14 * var(--rpx)); height: calc(14 * var(--rpx)); border-radius: 50%; background: #a855f7; margin: 0 calc(10 * var(--rpx)); animation: dot-blink 1.2s ease-in-out infinite; }
.pending-dot:nth-child(2) { animation-delay: 0.2s; }
.pending-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-blink {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

.judge-badge-wrap { margin-bottom: calc(16 * var(--rpx)); }

.judge-time { margin-bottom: calc(20 * var(--rpx)); }

.judge-reason { width: 100%; margin-top: calc(8 * var(--rpx)); padding: calc(24 * var(--rpx)); background: #232332; border-left: calc(6 * var(--rpx)) solid #a855f7; border-radius: calc(12 * var(--rpx)); display: flex; flex-direction: column; }

.judge-reason-title { font-size: calc(26 * var(--rpx)); font-weight: 700; color: #4fd1c5; margin-bottom: calc(12 * var(--rpx)); }

.judge-reason-text { font-size: calc(28 * var(--rpx)); line-height: 1.7; color: #e8e8f0; }

.judge-failed-icon { font-size: calc(88 * var(--rpx)); margin-bottom: calc(16 * var(--rpx)); }

.judge-rejudge { margin-top: calc(32 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(64 * var(--rpx)); }
.judge-rejudge.disabled { opacity: 0.45; }

/* —— 操作栏 —— */
.action-card { padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); }

.like-btn { display: flex; flex-direction: row; align-items: center; padding: calc(12 * var(--rpx)) calc(32 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: #232332; border: calc(2 * var(--rpx)) solid transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.like-btn.liked { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 calc(18 * var(--rpx)) rgba(168, 85, 247, 0.35); }
.like-hover { opacity: 0.85; transform: scale(0.97); }

.like-icon { font-size: calc(44 * var(--rpx)); margin-right: calc(14 * var(--rpx)); }

.like-info { align-items: flex-start; }

.like-count { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; line-height: 1.2; }
.like-btn.liked .like-count { color: #a855f7; }

.like-label { font-size: calc(22 * var(--rpx)); color: #8a8f98; }

.action-right { flex-shrink: 0; }

.action-btn { margin-left: calc(16 * var(--rpx)); padding: calc(14 * var(--rpx)) calc(28 * var(--rpx)); font-size: calc(26 * var(--rpx)); }

.btn-ghost.danger { color: #f56565; border-color: rgba(245, 101, 101, 0.5); }

/* —— 评论区 —— */
.comments-card { padding-bottom: calc(8 * var(--rpx)); }

.comments-title { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; }

.comments-empty { padding: calc(40 * var(--rpx)) 0; text-align: center; }

.comment-item { padding: calc(20 * var(--rpx)) 0; border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.05); align-items: flex-start; }
.comment-item:last-of-type { border-bottom: none; }

.comment-avatar { width: calc(64 * var(--rpx)); height: calc(64 * var(--rpx)); border-radius: 50%; background: #2a2a36; display: flex; align-items: center; justify-content: center; font-size: calc(30 * var(--rpx)); flex-shrink: 0; margin-right: calc(16 * var(--rpx)); }

.comment-body { overflow: hidden; }

.comment-nick { font-size: calc(26 * var(--rpx)); font-weight: 600; color: #4fd1c5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(300 * var(--rpx)); }

.comment-time { font-size: calc(22 * var(--rpx)); margin-left: calc(16 * var(--rpx)); }

.comment-del { font-size: calc(22 * var(--rpx)); color: #f56565; margin-left: calc(20 * var(--rpx)); padding: calc(4 * var(--rpx)) calc(8 * var(--rpx)); }

.comment-content { margin-top: calc(8 * var(--rpx)); font-size: calc(28 * var(--rpx)); line-height: 1.6; color: #e8e8f0; word-break: break-all; }

.list-hint { text-align: center; font-size: calc(24 * var(--rpx)); color: #8a8f98; padding: calc(28 * var(--rpx)) 0; }

/* —— 观看积分 +N 上浮渐隐(一次性 CSS 动画,0.8s 播完由 js 收起)—— */
.points-float { position: fixed; left: 0; right: 0; top: 36%; z-index: 30; text-align: center; font-size: calc(48 * var(--rpx)); font-weight: 800; color: #4fd1c5; text-shadow: 0 0 calc(20 * var(--rpx)) rgba(79, 209, 197, 0.65); pointer-events: none; animation: points-float-up 0.8s ease-out forwards; }

@keyframes points-float-up {
  0% { opacity: 0; transform: translateY(calc(48 * var(--rpx))) scale(0.7); }
  22% { opacity: 1; transform: translateY(0) scale(1.15); }
  40% { transform: translateY(calc(-8 * var(--rpx))) scale(1); }
  100% { opacity: 0; transform: translateY(calc(-140 * var(--rpx))) scale(1); }
}

/* —— 底部固定输入条 —— */
.bottom-space { height: calc(140 * var(--rpx)); }

.comment-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: calc(16 * var(--rpx)) calc(24 * var(--rpx)) calc(calc(16 * var(--rpx)) + env(safe-area-inset-bottom)); background: #1c1c28; border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.06); box-shadow: 0 calc(-6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.35); }

.comment-input { flex: 1; height: calc(72 * var(--rpx)); background: #232332; border-radius: calc(999 * var(--rpx)); padding: 0 calc(28 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #e8e8f0; overflow: hidden; }

.comment-ph { color: #5a5f68; }

.comment-counter { flex-shrink: 0; margin: 0 calc(16 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #8a8f98; font-variant-numeric: tabular-nums; }
.comment-counter.full { color: #f56565; font-weight: 700; }

.comment-send { flex-shrink: 0; padding: calc(14 * var(--rpx)) calc(36 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: linear-gradient(135deg, #a855f7, #7c3aed); color: #ffffff; font-size: calc(28 * var(--rpx)); font-weight: 600; box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(168, 85, 247, 0.35); }
.comment-send.disabled { opacity: 0.4; box-shadow: none; }

/* ===== pages/appeal/appeal.wxss ===== */
/* 申诉页:两态 tab + 表单 + 记录列表(深色主题段位风延续 app.wxss) */

.appeal-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

.row-hover { opacity: 0.88; }

/* —— 两态 tab —— */
.ap-tabs { margin: calc(24 * var(--rpx)) calc(24 * var(--rpx)) calc(8 * var(--rpx)); background: #1c1c28; border-radius: calc(999 * var(--rpx)); padding: calc(8 * var(--rpx)); }

.ap-tab { flex: 1; text-align: center; font-size: calc(28 * var(--rpx)); color: #8a8f98; padding: calc(16 * var(--rpx)) 0; border-radius: calc(999 * var(--rpx)); transition: all 0.2s ease; }

.ap-tab-on { color: #ffffff; font-weight: 700; background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(168, 85, 247, 0.35); }

.ap-tab-off { opacity: 0.5; }

/* —— form 态 —— */
.ap-label { font-size: calc(24 * var(--rpx)); letter-spacing: calc(2 * var(--rpx)); margin-bottom: calc(14 * var(--rpx)); }

.ap-post-main { width: 100%; }

.ap-post-icon { flex-shrink: 0; font-size: calc(32 * var(--rpx)); margin-right: calc(14 * var(--rpx)); }

.ap-post-summary { font-size: calc(28 * var(--rpx)); color: #e8e8f0; line-height: 1.6; overflow: hidden; }

.ap-post-time { display: block; margin-top: calc(14 * var(--rpx)); }

.ap-warn-box { margin-top: calc(18 * var(--rpx)); padding: calc(14 * var(--rpx)) calc(20 * var(--rpx)); border-radius: calc(12 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: #f5a623; background: rgba(245, 166, 35, 0.1); border: calc(1 * var(--rpx)) solid rgba(245, 166, 35, 0.35); }

.ap-textarea { width: 100%; min-height: calc(240 * var(--rpx)); background: #232332; border-radius: calc(16 * var(--rpx)); padding: calc(20 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #e8e8f0; line-height: 1.6; }

.ap-ph { color: #8a8f98; }

.ap-count-row { width: 100%; margin-top: calc(14 * var(--rpx)); }

.ap-count { font-size: calc(24 * var(--rpx)); color: #8a8f98; font-variant-numeric: tabular-nums; }
.ap-count-full { color: #f56565; }

.ap-submit { margin-top: calc(28 * var(--rpx)); width: 100%; }

/* —— mine 态 —— */
.ap-item { padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); margin: calc(16 * var(--rpx)) calc(24 * var(--rpx)); }

.ap-status { font-size: calc(26 * var(--rpx)); font-weight: 700; border-radius: calc(999 * var(--rpx)); padding: calc(4 * var(--rpx)) calc(20 * var(--rpx)); white-space: nowrap; }
.ap-pending { color: #4fd1c5; background: rgba(79, 209, 197, 0.12); border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.35); }
.ap-upheld { color: #a855f7; background: rgba(168, 85, 247, 0.12); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.4); }
.ap-rejected { color: #f56565; background: rgba(245, 101, 101, 0.12); border: calc(1 * var(--rpx)) solid rgba(245, 101, 101, 0.35); }

.ap-reason { margin: calc(18 * var(--rpx)) 0; font-size: calc(27 * var(--rpx)); color: #e8e8f0; line-height: 1.6; }

.ap-levels { margin-bottom: calc(8 * var(--rpx)); }

.ap-arrow { margin: 0 calc(14 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #a855f7; font-weight: 700; }

.ap-note { margin-top: calc(14 * var(--rpx)); padding: calc(14 * var(--rpx)) calc(20 * var(--rpx)); border-radius: calc(12 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: #8a8f98; background: rgba(255, 255, 255, 0.04); border-left: calc(4 * var(--rpx)) solid rgba(168, 85, 247, 0.55); line-height: 1.6; }

.ap-handled { display: block; margin-top: calc(12 * var(--rpx)); font-size: calc(22 * var(--rpx)); }

/* —— 空态 / 提示 —— */
.empty { padding: calc(140 * var(--rpx)) calc(48 * var(--rpx)) 0; }
.empty-icon { font-size: calc(120 * var(--rpx)); margin-bottom: calc(24 * var(--rpx)); filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.4)); }
.empty-text { font-size: calc(30 * var(--rpx)); color: #8a8f98; }

.list-hint { text-align: center; font-size: calc(24 * var(--rpx)); color: #8a8f98; padding: calc(28 * var(--rpx)) 0; }

/* ===== pages/profile/profile.wxss ===== */
/* 个人资料页:头像(chooseAvatar)+ 昵称(nickname input)+ 保存(深色主题延续 app.wxss) */

.profile-page { min-height: 100vh; padding-top: calc(12 * var(--rpx)); padding-bottom: calc(40 * var(--rpx)); }

.pf-card { padding: calc(40 * var(--rpx)) calc(32 * var(--rpx)) calc(32 * var(--rpx)); }

/* —— 头像区 —— */
.pf-avatar-zone { padding: calc(8 * var(--rpx)) 0 calc(24 * var(--rpx)); }

/* button 复位:仅作为 chooseAvatar 触发容器 */
.pf-avatar-btn { background: transparent; padding: 0; margin: 0; border: none; line-height: 1; width: calc(176 * var(--rpx)); height: calc(176 * var(--rpx)); border-radius: 50%; }
.pf-avatar-btn::after { border: none; }

.pf-avatar { width: calc(176 * var(--rpx)); height: calc(176 * var(--rpx)); border-radius: 50%; background: #2a2a36; border: calc(3 * var(--rpx)) solid rgba(168, 85, 247, 0.55); box-shadow: 0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.3); }

.pf-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: calc(84 * var(--rpx)); }

.pf-avatar-tip { margin-top: calc(18 * var(--rpx)); }

.pf-temp-tip { margin-top: calc(10 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #f5a623; }

/* —— 昵称字段 —— */
.pf-field { display: flex; flex-direction: row; align-items: center; padding: calc(8 * var(--rpx)) 0; }

.pf-label { flex-shrink: 0; width: calc(120 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #8a8f98; }

.pf-input { flex: 1; background: #232332; border-radius: calc(14 * var(--rpx)); /* 原生 input 默认内容高度不足,上下 padding 会把文字裁掉——显式给高度并 box-sizing 收边 */ box-sizing: border-box; height: calc(76 * var(--rpx)); line-height: calc(76 * var(--rpx)); padding: 0 calc(22 * var(--rpx)); font-size: calc(30 * var(--rpx)); color: #e8e8f0; }

.pf-ph { color: #8a8f98; }

/* —— 反脆弱积分区块(2.0 Task 9):等级进度条 + 12 级称号纵向列表 —— */
.pf-points { padding: calc(28 * var(--rpx)) calc(28 * var(--rpx)) calc(24 * var(--rpx)); }

.pf-pts-head { width: 100%; }

.pf-pts-title { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; text-shadow: 0 0 calc(14 * var(--rpx)) rgba(168, 85, 247, 0.35); }

.pf-pts-total { font-size: calc(26 * var(--rpx)); font-weight: 700; color: #4fd1c5; font-variant-numeric: tabular-nums; }

/* 进度条:当前级内进度(levelProgressPercent%),紫→青渐变;满级金色 */
.pf-bar { width: 100%; height: calc(18 * var(--rpx)); margin-top: calc(20 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: #232332; overflow: hidden; }

.pf-bar-fill { height: 100%; border-radius: calc(999 * var(--rpx)); background: linear-gradient(90deg, #a855f7, #4fd1c5); box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.55); transition: width 0.4s ease-out; }
.pf-bar-fill.max { background: linear-gradient(90deg, #ffe9a8, #f5a623 55%, #cf8a15); box-shadow: 0 0 calc(14 * var(--rpx)) rgba(245, 166, 35, 0.65); }

.pf-pts-sub { display: block; margin-top: calc(14 * var(--rpx)); }

/* 12 级称号纵向列表(2.0 Task 9):达成点亮 / 当前高亮 / 未达成灰显 */
.pf-levels { width: 100%; margin-top: calc(24 * var(--rpx)); }

.pf-level { width: 100%; box-sizing: border-box; padding: calc(14 * var(--rpx)) calc(20 * var(--rpx)); border-radius: calc(14 * var(--rpx)); border: calc(2 * var(--rpx)) solid transparent; margin-top: calc(10 * var(--rpx)); align-items: center; }
.pf-level:first-child { margin-top: 0; }

.pf-lv-emoji { flex-shrink: 0; width: calc(56 * var(--rpx)); font-size: calc(36 * var(--rpx)); text-align: center; }

.pf-lv-mid { overflow: hidden; }

.pf-lv-title { font-size: calc(26 * var(--rpx)); color: #8a8f98; white-space: nowrap; }

.pf-lv-th { margin-top: calc(2 * var(--rpx)); font-size: calc(20 * var(--rpx)); color: #5a5f68; font-variant-numeric: tabular-nums; }

.pf-lv-mark { flex-shrink: 0; margin-left: calc(12 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #5a5f68; }
.pf-lv-mark.ok { color: #4fd1c5; }
.pf-lv-mark.cur { color: #a855f7; font-weight: 700; }

/* 已达成:点亮 */
.pf-level.done .pf-lv-emoji { filter: drop-shadow(0 0 calc(8 * var(--rpx)) rgba(79, 209, 197, 0.45)); }
.pf-level.done .pf-lv-title { color: #4fd1c5; }

/* 当前等级:高亮 + 呼吸光 */
.pf-level.current { border-color: rgba(168, 85, 247, 0.65); background: rgba(168, 85, 247, 0.1); animation: pf-lv-glow 2.2s ease-in-out infinite; }
.pf-level.current .pf-lv-emoji { filter: drop-shadow(0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.8)); }
.pf-level.current .pf-lv-title { color: #e8e8f0; font-weight: 700; }

@keyframes pf-lv-glow {
  0%, 100% { box-shadow: 0 0 calc(8 * var(--rpx)) rgba(168, 85, 247, 0.3); }
  50% { box-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.65); }
}

/* 未达成:灰显 */
.pf-level.locked { opacity: 0.35; }
.pf-level.locked .pf-lv-emoji { filter: grayscale(1); }

/* —— 保存 —— */
.pf-save { margin: calc(40 * var(--rpx)) calc(32 * var(--rpx)) 0; width: auto; }

.pf-note { text-align: center; margin-top: calc(24 * var(--rpx)); font-size: calc(22 * var(--rpx)); }

/* ===== pages/album/album.wxss ===== */
/* 点亮图页:深色主题(#12121a/#1c1c28/#a855f7/#4fd1c5)+ 金紫光效,
   稀有度分档配色与 collection-modal 一致(common 青 / rare 紫 / epic 金,spec §4.4);
   环形卡位坐标由 album.js 以 rpx 预计算(rpx 随屏宽缩放),此处只管卡面与光效。 */

.album-page { min-height: 100vh; padding-bottom: calc(48 * var(--rpx)); display: flex; flex-direction: column; align-items: center; }

/* —— 顶部:套名 + 进度 —— */
.album-head { margin-top: calc(32 * var(--rpx)); display: flex; flex-direction: column; align-items: center; }

.ah-title { display: flex; align-items: center; }

.ah-emoji { font-size: calc(44 * var(--rpx)); margin-right: calc(12 * var(--rpx)); line-height: 1; }

.ah-name { font-size: calc(40 * var(--rpx)); font-weight: 800; color: #e8e8f0; letter-spacing: calc(2 * var(--rpx)); text-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.5); }

.ah-progress { margin-top: calc(12 * var(--rpx)); font-size: calc(26 * var(--rpx)); color: #8a8f98; letter-spacing: calc(1 * var(--rpx)); }

.ah-progress-gold { color: #f5d78a; font-weight: 700; text-shadow: 0 0 calc(16 * var(--rpx)) rgba(245, 166, 35, 0.55); }

/* —— 环形区 —— */
.ring-wrap { margin-top: calc(24 * var(--rpx)); display: flex; justify-content: center; width: 100%; }

.ring { position: relative; flex-shrink: 0; }

/* 中心凤凰位:点亮=金色光晕呼吸 / 未点亮=暗色剪影 */
.phoenix { position: absolute; left: 50%; top: 50%; width: calc(240 * var(--rpx)); height: calc(240 * var(--rpx)); margin: calc(-120 * var(--rpx)) 0 0 calc(-120 * var(--rpx)); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.phoenix-emoji { font-size: calc(120 * var(--rpx)); line-height: 1; }

.phoenix-lit { background: radial-gradient(circle, rgba(245, 166, 35, 0.32) 0%, rgba(245, 166, 35, 0.1) 55%, transparent 75%); box-shadow: 0 0 calc(60 * var(--rpx)) rgba(245, 166, 35, 0.45), 0 0 calc(120 * var(--rpx)) rgba(168, 85, 247, 0.25); animation: phoenix-glow 2.4s ease-in-out infinite; }

.phoenix-lit .phoenix-emoji { filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(245, 166, 35, 0.8)); }

@keyframes phoenix-glow {
  0%, 100% { box-shadow: 0 0 calc(44 * var(--rpx)) rgba(245, 166, 35, 0.35), 0 0 calc(90 * var(--rpx)) rgba(168, 85, 247, 0.18); }
  50% { box-shadow: 0 0 calc(76 * var(--rpx)) rgba(245, 166, 35, 0.6), 0 0 calc(140 * var(--rpx)) rgba(168, 85, 247, 0.32); }
}

.phoenix-dark { background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%); }

.phoenix-dark .phoenix-emoji { filter: grayscale(1) brightness(0.35); opacity: 0.55; }

/* —— 12 卡:已点亮主题卡 / 未点亮暗剪影 —— */
.ring-card { position: absolute; border-radius: calc(18 * var(--rpx)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(6 * var(--rpx)); overflow: hidden; }

.rc-lit { background: linear-gradient(165deg, #2a2a3c, #1c1c28 60%, #232332); }

.rc-emoji { font-size: calc(48 * var(--rpx)); line-height: 1.1; }

.rc-img { width: calc(56 * var(--rpx)); height: calc(56 * var(--rpx)); }

.rc-name { margin-top: calc(6 * var(--rpx)); font-size: calc(20 * var(--rpx)); font-weight: 600; color: #e8e8f0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 稀有度边框光效(分档同 collection-modal) */
.rc-common { border: calc(2 * var(--rpx)) solid rgba(79, 209, 197, 0.55); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.45), 0 0 calc(12 * var(--rpx)) rgba(79, 209, 197, 0.22); }

.rc-rare { border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.75); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.45), 0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.4); }

.rc-epic { border: calc(3 * var(--rpx)) solid rgba(245, 166, 35, 0.85); box-shadow: 0 calc(4 * var(--rpx)) calc(18 * var(--rpx)) rgba(0, 0, 0, 0.5), 0 0 calc(22 * var(--rpx)) rgba(245, 166, 35, 0.45); animation: rc-epic-shine 2.2s ease-in-out infinite; }

@keyframes rc-epic-shine {
  0%, 100% { box-shadow: 0 calc(4 * var(--rpx)) calc(18 * var(--rpx)) rgba(0, 0, 0, 0.5), 0 0 calc(16 * var(--rpx)) rgba(245, 166, 35, 0.35); }
  50% { box-shadow: 0 calc(4 * var(--rpx)) calc(18 * var(--rpx)) rgba(0, 0, 0, 0.5), 0 0 calc(30 * var(--rpx)) rgba(245, 166, 35, 0.7); }
}

/* 未点亮:暗剪影 + 序号 */
.rc-dark { background: #181822; border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.06); }

.rc-seq { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #3d414b; }

/* —— 底部往期 chips —— */
.chips { margin-top: calc(32 * var(--rpx)); width: 100%; white-space: nowrap; padding: 0 calc(24 * var(--rpx)); }

.chip { display: inline-flex; align-items: center; margin-right: calc(16 * var(--rpx)); padding: calc(12 * var(--rpx)) calc(28 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: #8a8f98; background: #1c1c28; border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.08); }

.chip-active { color: #f5d78a; font-weight: 700; border-color: rgba(245, 166, 35, 0.6); background: rgba(245, 166, 35, 0.08); box-shadow: 0 0 calc(14 * var(--rpx)) rgba(245, 166, 35, 0.25); }

/* —— 未选套空态提示 —— */
.album-empty-tip { margin: calc(24 * var(--rpx)) calc(48 * var(--rpx)) 0; padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); border-radius: calc(20 * var(--rpx)); background: #1c1c28; border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.25); font-size: calc(24 * var(--rpx)); line-height: 1.7; color: #8a8f98; text-align: center; }

/* ===== pages/guardians/guardians.wxss ===== */
/* 守护神兽页:深色主题(#12121a/#1c1c28/#a855f7/#4fd1c5)+ 金紫光效,
   罗盘刻度/方位字为纯 CSS 装饰;神兽卡位与刻度坐标由 guardians.js 以 rpx
   预计算(rpx 随屏宽缩放),此处只管卡面、剪影两态与气泡动画。 */

.guardians-page { min-height: 100vh; padding-bottom: calc(48 * var(--rpx)); display: flex; flex-direction: column; align-items: center; }

/* —— 顶部:标题 + 进度 —— */
.gd-head { margin-top: calc(32 * var(--rpx)); display: flex; flex-direction: column; align-items: center; }

.gd-title { font-size: calc(40 * var(--rpx)); font-weight: 800; color: #e8e8f0; letter-spacing: calc(2 * var(--rpx)); text-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.5); }

.gd-progress { margin-top: calc(12 * var(--rpx)); font-size: calc(26 * var(--rpx)); color: #8a8f98; letter-spacing: calc(1 * var(--rpx)); }

.gd-progress-gold { color: #f5d78a; font-weight: 700; text-shadow: 0 0 calc(16 * var(--rpx)) rgba(245, 166, 35, 0.55); }

/* —— 罗盘区 —— */
.ring-wrap { margin-top: calc(24 * var(--rpx)); display: flex; justify-content: center; width: 100%; }

.ring { position: relative; flex-shrink: 0; }

/* 罗盘装饰环:外实线环 + 内虚线环 */
.compass-outer { position: absolute; left: calc(4 * var(--rpx)); top: calc(4 * var(--rpx)); right: calc(4 * var(--rpx)); bottom: calc(4 * var(--rpx)); border-radius: 50%; border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.35); box-shadow: 0 0 calc(30 * var(--rpx)) rgba(168, 85, 247, 0.15), inset 0 0 calc(30 * var(--rpx)) rgba(168, 85, 247, 0.08); pointer-events: none; }

.compass-inner { position: absolute; left: calc(62 * var(--rpx)); top: calc(62 * var(--rpx)); right: calc(62 * var(--rpx)); bottom: calc(62 * var(--rpx)); border-radius: 50%; border: calc(1 * var(--rpx)) dashed rgba(79, 209, 197, 0.22); pointer-events: none; }

/* 外圈刻度:元素底边=圆心(transform-origin 底部中心),顶边 12rpx 为可见刻线
   (半径 326-338);旋转角由 guardians.js 预计算(每 15° 一格,四正金色粗刻) */
.tick { position: absolute; left: 50%; width: calc(2 * var(--rpx)); margin-left: calc(-1 * var(--rpx)); transform-origin: 50% 100%; background: linear-gradient(to bottom, rgba(168, 85, 247, 0.5) calc(12 * var(--rpx)), transparent calc(12 * var(--rpx))); pointer-events: none; }

.tick-major { width: calc(4 * var(--rpx)); margin-left: calc(-2 * var(--rpx)); background: linear-gradient(to bottom, rgba(245, 166, 35, 0.85) calc(12 * var(--rpx)), transparent calc(12 * var(--rpx))); }

/* 四正方位字(left/top 为字心坐标,CSS 平移居中;半径 312,不与卡位/刻度相交) */
.dir-mark { position: absolute; transform: translate(-50%, -50%); font-size: calc(20 * var(--rpx)); font-weight: 700; color: rgba(168, 85, 247, 0.75); letter-spacing: 0; pointer-events: none; }

/* —— 中心 n/12 —— */
.gd-center { position: absolute; left: 50%; top: 50%; width: calc(220 * var(--rpx)); height: calc(220 * var(--rpx)); margin: calc(-110 * var(--rpx)) 0 0 calc(-110 * var(--rpx)); border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, rgba(28, 28, 40, 0.9) 70%); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }

.gc-count { font-size: calc(64 * var(--rpx)); font-weight: 800; color: #f5d78a; line-height: 1; text-shadow: 0 0 calc(20 * var(--rpx)) rgba(245, 166, 35, 0.5); }

.gc-total { font-size: calc(32 * var(--rpx)); font-weight: 600; color: #8a8f98; }

.gc-label { margin-top: calc(10 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #8a8f98; letter-spacing: calc(4 * var(--rpx)); }

/* —— 对话气泡:覆盖中心区,2.5s 自动消失(JS 定时),弹出动画 —— */
.bubble { position: absolute; left: 50%; top: 50%; width: calc(420 * var(--rpx)); transform: translate(-50%, -50%); padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)) calc(28 * var(--rpx)); border-radius: calc(24 * var(--rpx)); background: linear-gradient(165deg, #2a2a3c, #1c1c28 60%, #232332); border: calc(2 * var(--rpx)) solid rgba(245, 166, 35, 0.6); box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.6), 0 0 calc(24 * var(--rpx)) rgba(245, 166, 35, 0.25); display: flex; flex-direction: column; align-items: center; z-index: 10; animation: bubble-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 气泡下尾巴(装饰,深色对话气泡惯例) */
.bubble::after { content: ''; position: absolute; left: 50%; bottom: calc(-14 * var(--rpx)); width: 0; height: 0; margin-left: calc(-12 * var(--rpx)); border-left: calc(12 * var(--rpx)) solid transparent; border-right: calc(12 * var(--rpx)) solid transparent; border-top: calc(14 * var(--rpx)) solid rgba(245, 166, 35, 0.6); }

@keyframes bubble-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.bubble-emoji { font-size: calc(52 * var(--rpx)); line-height: 1.1; }

.bubble-name { margin-top: calc(6 * var(--rpx)); font-size: calc(24 * var(--rpx)); font-weight: 700; color: #f5d78a; }

.bubble-line { margin-top: calc(10 * var(--rpx)); font-size: calc(26 * var(--rpx)); line-height: 1.6; color: #e8e8f0; text-align: center; }

/* 专属魔法行(魔法计划 Task 5):紫色调与气泡金色主调区分 */
.bubble-magic { margin-top: calc(12 * var(--rpx)); padding-top: calc(12 * var(--rpx)); border-top: calc(1 * var(--rpx)) dashed rgba(168, 85, 247, 0.4); width: 100%; font-size: calc(22 * var(--rpx)); line-height: 1.6; color: #c4a3f0; text-align: center; }

/* —— 12 神兽卡:已获得彩色可点 / 未获得灰剪影+锁标 —— */
.beast { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(6 * var(--rpx)); overflow: hidden; z-index: 5; }

.beast-owned { background: linear-gradient(165deg, #2a2a3c, #1c1c28 60%, #232332); border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.75); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.45), 0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.4); }

.beast-emoji { font-size: calc(44 * var(--rpx)); line-height: 1.1; }

.beast-img { width: calc(56 * var(--rpx)); height: calc(56 * var(--rpx)); }

.beast-name { margin-top: calc(4 * var(--rpx)); font-size: calc(18 * var(--rpx)); font-weight: 600; color: #e8e8f0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 未获得:灰剪影 + 锁标 */
.beast-locked { background: #181822; border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.06); }

.beast-emoji-dim { filter: grayscale(1) brightness(0.35); opacity: 0.55; }

.beast-lock { position: absolute; right: calc(6 * var(--rpx)); bottom: calc(4 * var(--rpx)); font-size: calc(20 * var(--rpx)); line-height: 1; opacity: 0.8; }

/* —— 底部说明 —— */
.gd-tip { margin: calc(24 * var(--rpx)) calc(48 * var(--rpx)) 0; padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); border-radius: calc(20 * var(--rpx)); background: #1c1c28; border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.25); font-size: calc(24 * var(--rpx)); line-height: 1.7; color: #8a8f98; text-align: center; }

/* ===== pages/magic/magic.wxss ===== */
/* 脆弱场列表页(魔法系统 Task 4):暗色主题(#12121a 底、紫 #a855f7 强调,同 app.wxss) */

.magic-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

.fc-hover { opacity: 0.88; }

.list-hint { text-align: center; color: #8a8f98; font-size: calc(24 * var(--rpx)); padding: calc(24 * var(--rpx)) 0; }

/* —— 顶部魔法等级卡 —— */
.lvl-card { margin-top: calc(28 * var(--rpx)); padding: calc(28 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.35); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(168, 85, 247, 0.15); }

.lvl-left { overflow: hidden; }

.lvl-emoji { font-size: calc(64 * var(--rpx)); margin-right: calc(22 * var(--rpx)); filter: drop-shadow(0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.45)); }

.lvl-title { font-size: calc(32 * var(--rpx)); font-weight: 700; color: #a855f7; text-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.35); margin-bottom: calc(4 * var(--rpx)); }

.lvl-hearts { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(28 * var(--rpx)); font-weight: 600; color: #f56565; }

/* —— 场卡 —— */
.field-card { padding: calc(26 * var(--rpx)) calc(28 * var(--rpx)); }

.fc-locked { opacity: 0.55; }

.fc-left { overflow: hidden; }

.fc-emoji { font-size: calc(52 * var(--rpx)); margin-right: calc(20 * var(--rpx)); flex-shrink: 0; }

.fc-name { font-size: calc(30 * var(--rpx)); font-weight: 600; color: #e8e8f0; }

.fc-clear { margin-left: calc(10 * var(--rpx)); font-size: calc(24 * var(--rpx)); }

.fc-right { flex-shrink: 0; align-items: flex-end; margin-left: calc(16 * var(--rpx)); }

.fc-lock { font-size: calc(22 * var(--rpx)); color: #8a8f98; }

.fc-prog { font-size: calc(26 * var(--rpx)); font-weight: 700; color: #4fd1c5; }

.fc-arrow { margin-top: calc(6 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #a855f7; }

/* —— 怪兽列表(展开) —— */
.mon-list { margin-top: calc(8 * var(--rpx)); }

.mon-row { padding: calc(16 * var(--rpx)) calc(8 * var(--rpx)); border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.04); }

.mon-row:last-child { border-bottom: none; }

.mon-left { overflow: hidden; }

.mon-emoji { font-size: calc(36 * var(--rpx)); margin-right: calc(16 * var(--rpx)); flex-shrink: 0; }

.mon-name { font-size: calc(27 * var(--rpx)); color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mon-boss { flex-shrink: 0; margin-left: calc(12 * var(--rpx)); padding: calc(2 * var(--rpx)) calc(12 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(20 * var(--rpx)); font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #f56565, #c53030); }

.mon-stats { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #8a8f98; }

.mon-done { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #4fd1c5; }

.mon-dead .mon-emoji, .mon-dead .mon-name { opacity: 0.45; }

/* ===== pages/battle/battle.wxss ===== */
/* 轻回合制战斗页(魔法系统 Task 4 + 追加计划 Task 7 战斗动画 + Task 9 斗兽场视觉改版):
   深紫黑底 #161021、战斗区 salmon(#ff6b7d)圆角外框、底部深色条放操作区。
   竞技场(参照像素运作图,纯 CSS 不引入图片):大圆形同心三环 tan 色沙地(radial-gradient 硬分段)、
   中心 VS 徽章(深紫圆底 + 金色描边)、两侧三角旗(CSS 三角形 + 旗杆);玩家居左/魔兽居右水平对峙,
   角色上方 HP 文本/血条/名字牌(玩家绿·蓝边、魔兽金·品红边);角色立体化(大 emoji + 双层投影
   + 脚下椭圆阴影 + 微倾斜 + 浮动呼吸)。开战倒计时全屏覆盖 + 回合 10 秒计时条(VS 徽章下方)。
   动画全部 CSS keyframes + class 切换(fx-lunge/fx-hit/fx-lunge-mon/fx-die/fly-damage/shield-pop),
   魔法弹道用 CSS transition;不引入第三方库。 */

.battle-page { display: flex; flex-direction: column; min-height: 100vh; background: #161021; padding-bottom: calc(calc(180 * var(--rpx)) + env(safe-area-inset-bottom)); }

.act-hover { opacity: 0.85; }

/* —— 顶部回合/场名 tag(保留) —— */
.arena-top { margin: calc(24 * var(--rpx)) calc(32 * var(--rpx)) 0; }

.bz-tag { font-size: calc(22 * var(--rpx)); color: #8a8f98; }

/* —— 斗兽场:salmon 圆角外框 + 圆形沙地竞技场(追加计划 Task 9) —— */
.arena-frame { margin: calc(16 * var(--rpx)) calc(24 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(6 * var(--rpx)); border: calc(3 * var(--rpx)) solid #ff6b7d; border-radius: calc(32 * var(--rpx)); background: rgba(22, 16, 33, 0.6); box-shadow: 0 0 calc(24 * var(--rpx)) rgba(255, 107, 125, 0.16); }

.arena { position: relative; display: flex; align-items: center; justify-content: center; height: calc(680 * var(--rpx)); }

/* 圆形沙地:同心三环 tan 色(#ccb069 内圆 / #c2a260 中环 / #c9a867 外环带 #9c7c3c 描边) */
.arena-circle { position: relative; width: calc(640 * var(--rpx)); height: calc(640 * var(--rpx)); border-radius: 50%; border: calc(4 * var(--rpx)) solid #9c7c3c; background: radial-gradient(circle, #ccb069 0%, #ccb069 46%, #c2a260 46%, #c2a260 72%, #c9a867 72%, #c9a867 100%); box-shadow: inset 0 calc(-18 * var(--rpx)) calc(44 * var(--rpx)) rgba(60, 40, 10, 0.28); }

/* 两侧三角旗:旗杆细条 + CSS 三角形旗面(左蓝右品红) */
.flag { position: absolute; top: 50%; margin-top: calc(-55 * var(--rpx)); width: calc(6 * var(--rpx)); height: calc(110 * var(--rpx)); background: #8d939c; z-index: 1; }

.flag-l { left: calc(8 * var(--rpx)); }
.flag-r { right: calc(8 * var(--rpx)); }

.flag-l::before { content: ''; position: absolute; left: calc(6 * var(--rpx)); top: 0; border-top: calc(24 * var(--rpx)) solid transparent; border-bottom: calc(24 * var(--rpx)) solid transparent; border-left: calc(52 * var(--rpx)) solid #2f80ed; }

.flag-r::before { content: ''; position: absolute; right: calc(6 * var(--rpx)); top: 0; border-top: calc(24 * var(--rpx)) solid transparent; border-bottom: calc(24 * var(--rpx)) solid transparent; border-right: calc(52 * var(--rpx)) solid #d646d6; }

/* 中心 VS 徽章:深紫圆底 + 金色描边 + 金色粗体 VS */
.vs-badge { position: absolute; left: 50%; top: 50%; width: calc(150 * var(--rpx)); height: calc(150 * var(--rpx)); margin: calc(-75 * var(--rpx)) 0 0 calc(-75 * var(--rpx)); border-radius: 50%; background: #2b2135; border: calc(4 * var(--rpx)) solid #f5d78e; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 calc(24 * var(--rpx)) rgba(245, 215, 142, 0.35); z-index: 2; }

.vs-text { font-size: calc(52 * var(--rpx)); font-weight: 800; color: #f5d78e; letter-spacing: calc(4 * var(--rpx)); }

/* 回合 10 秒计时:VS 徽章下方,条 + 数字 10→1,≤3s 红闪(追加计划 Task 9) */
.turn-timer { position: absolute; left: 50%; top: calc(50% + calc(92 * var(--rpx))); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }

.tt-bar { width: calc(160 * var(--rpx)); height: calc(12 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: rgba(43, 33, 53, 0.85); border: calc(1 * var(--rpx)) solid rgba(245, 215, 142, 0.5); overflow: hidden; }

.tt-fill { height: 100%; border-radius: calc(999 * var(--rpx)); background: #f5d78e; transition: width 0.3s linear; }

.tt-num { margin-top: calc(6 * var(--rpx)); font-size: calc(30 * var(--rpx)); font-weight: 800; color: #2b2135; }

.tt-danger .tt-fill { background: #e74c3c; }

.tt-danger .tt-num { color: #c0392b; animation: tt-pulse 1s ease-in-out infinite; }

@keyframes tt-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* —— 对战单位:玩家居左 / 魔兽居右水平对峙;角色上方 HP 文本/血条/名字牌 —— */
.unit { position: absolute; top: calc(185 * var(--rpx)); display: flex; flex-direction: column; align-items: center; width: calc(190 * var(--rpx)); z-index: 3; }

.unit-player { left: calc(52 * var(--rpx)); }
.unit-mon { right: calc(52 * var(--rpx)); }

.unit-hp { font-size: calc(22 * var(--rpx)); font-weight: 700; }

.hp-text-player { color: #4cd964; }
.hp-text-mon { color: #e6c15a; }

/* 血条:白描边、暗红底、绿/金填充(0.35s width 过渡保留) */
.hp-bar { width: 100%; height: calc(16 * var(--rpx)); border: calc(2 * var(--rpx)) solid #ffffff; border-radius: calc(6 * var(--rpx)); background: #5a1620; overflow: hidden; }

.unit-bar { margin: calc(6 * var(--rpx)) 0; }

.hp-fill { height: 100%; transition: width 0.35s ease-out; }

.hp-player { background: #4cd964; }
.hp-mon { background: #e6c15a; }

/* 名字牌:深色徽章(玩家蓝边、魔兽品红边) */
.name-row { justify-content: center; }

.unit-name { font-size: calc(22 * var(--rpx)); font-weight: 700; color: #ffffff; background: #2b2135; padding: calc(4 * var(--rpx)) calc(14 * var(--rpx)); border-radius: calc(8 * var(--rpx)); }

.name-player { border: calc(2 * var(--rpx)) solid #2f80ed; }
.name-mon { border: calc(2 * var(--rpx)) solid #d646d6; }

.bz-boss { margin-left: calc(8 * var(--rpx)); padding: calc(2 * var(--rpx)) calc(12 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(18 * var(--rpx)); font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #f56565, #c53030); }

.pz-shield { margin-left: calc(8 * var(--rpx)); font-size: calc(20 * var(--rpx)); font-weight: 700; color: #4fd1c5; }

/* 角色立体化:大 emoji + 双层投影 + 脚下椭圆阴影(伪元素)+ 微倾斜 + 浮动呼吸 */
.unit-stage { position: relative; height: calc(170 * var(--rpx)); margin-top: calc(8 * var(--rpx)); display: flex; align-items: center; justify-content: center; }

.unit-stage::after { content: ''; position: absolute; bottom: calc(4 * var(--rpx)); left: 50%; margin-left: calc(-60 * var(--rpx)); width: calc(120 * var(--rpx)); height: calc(26 * var(--rpx)); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(30, 16, 4, 0.45) 0%, rgba(30, 16, 4, 0) 70%); }

.unit-emoji { position: relative; z-index: 1; font-size: calc(160 * var(--rpx)); line-height: 1.15; transform: perspective(calc(320 * var(--rpx))) rotateX(8deg); filter: drop-shadow(0 calc(10 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(26 * var(--rpx)) rgba(255, 214, 130, 0.35)); animation: unit-breathe 2.6s ease-in-out infinite; }

.unit-emoji-boss { font-size: calc(180 * var(--rpx)); filter: drop-shadow(0 calc(10 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(30 * var(--rpx)) rgba(245, 101, 101, 0.5)); }

@keyframes unit-breathe {
  0%, 100% { transform: perspective(calc(320 * var(--rpx))) rotateX(8deg) translateY(0); }
  50% { transform: perspective(calc(320 * var(--rpx))) rotateX(8deg) translateY(calc(-10 * var(--rpx))); }
}

/* —— 单位动画 class(battle.js 按 t=0/350/900/1200 时序切换,计划 Task 7;Task 9 适配水平对峙方向) —— */

/* 玩家前冲(左 → 右上朝魔兽) */
.fx-lunge { animation: fx-lunge 0.5s ease-in-out; }

@keyframes fx-lunge {
  0% { transform: translate(0, 0); }
  45% { transform: translate(calc(64 * var(--rpx)), calc(-24 * var(--rpx))) scale(1.06); }
  100% { transform: translate(0, 0); }
}

/* 魔兽反击前冲(右 → 左下朝玩家) */
.fx-lunge-mon { animation: fx-lunge-mon 0.5s ease-in-out; }

@keyframes fx-lunge-mon {
  0% { transform: translate(0, 0); }
  45% { transform: translate(calc(-64 * var(--rpx)), calc(24 * var(--rpx))) scale(1.06); }
  100% { transform: translate(0, 0); }
}

/* 受击抖动 + 红闪(emoji 泛红光) */
.fx-hit { animation: fx-hit 0.4s ease-in-out; }

@keyframes fx-hit {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(-14 * var(--rpx))); }
  45% { transform: translateX(calc(12 * var(--rpx))); }
  70% { transform: translateX(calc(-8 * var(--rpx))); }
}

.fx-hit .unit-emoji { animation: fx-flash 0.4s ease-in-out; }

@keyframes fx-flash {
  0%, 100% {
    filter: drop-shadow(0 calc(10 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(26 * var(--rpx)) rgba(255, 214, 130, 0.35));
  }
  35% {
    filter: drop-shadow(0 calc(10 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(30 * var(--rpx)) rgba(245, 101, 101, 0.95)) brightness(1.5);
  }
}

/* 怪兽消亡:缩小 + 淡出(✨ 星光同时弹闪),胜利弹层前播放 */
.fx-die { animation: fx-die 0.8s ease-in forwards; }

@keyframes fx-die {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  40% { transform: scale(1.12) rotate(-6deg); opacity: 1; filter: brightness(1.8); }
  100% { transform: scale(0.15) rotate(14deg); opacity: 0; }
}

.die-spark { position: absolute; font-size: calc(64 * var(--rpx)); animation: die-spark 0.8s ease-out forwards; }

@keyframes die-spark {
  0% { transform: scale(0.4); opacity: 0; }
  40% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* —— 伤害/回血/格挡飘字(fly-damage 上浮淡出;shield-pop 弹跳) —— */
.float-layer { position: absolute; top: calc(-16 * var(--rpx)); left: 0; right: 0; height: calc(80 * var(--rpx)); display: flex; justify-content: center; pointer-events: none; z-index: 5; }

.float-num { font-size: calc(40 * var(--rpx)); font-weight: 800; }

.fl-dmg { color: #f56565; text-shadow: 0 0 calc(12 * var(--rpx)) rgba(245, 101, 101, 0.6); animation: fly-damage 0.9s ease-out forwards; }

.fl-heal { color: #4ade80; text-shadow: 0 0 calc(12 * var(--rpx)) rgba(74, 222, 128, 0.55); animation: fly-damage 0.9s ease-out forwards; }

.fl-shield { color: #4fd1c5; text-shadow: 0 0 calc(12 * var(--rpx)) rgba(79, 209, 197, 0.6); animation: shield-pop 0.9s ease-out forwards; }

@keyframes fly-damage {
  0% { transform: translateY(calc(16 * var(--rpx))) scale(0.7); opacity: 0; }
  18% { transform: translateY(calc(-6 * var(--rpx))) scale(1.15); opacity: 1; }
  100% { transform: translateY(calc(-70 * var(--rpx))) scale(1); opacity: 0; }
}

@keyframes shield-pop {
  0% { transform: scale(0.3); opacity: 0; }
  30% { transform: scale(1.3); opacity: 1; }
  55% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* —— 魔法弹道:自玩家(左)飞向魔兽(右),CSS transition —— */
.projectile { position: absolute; left: calc(236 * var(--rpx)); top: 50%; margin-top: calc(-24 * var(--rpx)); z-index: 6; font-size: calc(44 * var(--rpx)); filter: drop-shadow(0 0 calc(14 * var(--rpx)) rgba(168, 85, 247, 0.8)); transform: translate(0, 0) scale(1); opacity: 1; transition: transform 0.3s ease-in, opacity 0.3s ease-in; pointer-events: none; }

.projectile-fly { transform: translate(calc(240 * var(--rpx)), 0) scale(1.25); opacity: 0.9; }

/* —— 开战倒计时覆盖层(Task 9):3→2→1→「⚔️ 开战!」每秒一跳,cd-a/cd-b 交替重触发 pop —— */
.open-cd-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 70; background: rgba(12, 7, 18, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; }

.open-cd-num { font-size: calc(220 * var(--rpx)); font-weight: 900; color: #f5d78e; text-shadow: 0 0 calc(40 * var(--rpx)) rgba(245, 215, 142, 0.6); }

.open-cd-go { font-size: calc(120 * var(--rpx)); }

.cd-a { animation: open-pop-a 0.95s ease-out; }
.cd-b { animation: open-pop-b 0.95s ease-out; }

@keyframes open-pop-a {
  0% { transform: scale(0.3); opacity: 0; }
  30% { transform: scale(1.15); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.95; }
}

@keyframes open-pop-b {
  0% { transform: scale(0.3); opacity: 0; }
  30% { transform: scale(1.15); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.95; }
}

/* —— 战斗日志:压缩为 2-3 行高半透明条(保留 scroll-view,现有逻辑不动) —— */
.log-strip { height: calc(136 * var(--rpx)); margin: 0 calc(24 * var(--rpx)) calc(16 * var(--rpx)); padding: calc(12 * var(--rpx)) calc(20 * var(--rpx)); background: rgba(20, 14, 28, 0.7); border-radius: calc(16 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(255, 107, 125, 0.15); }

.log-line { font-size: calc(24 * var(--rpx)); color: #c9c9d4; line-height: 1.7; word-break: break-all; }

/* —— 底部三按钮(固定深色条,拇指易达,现有交互保留) —— */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: #150f1e; border-top: calc(1 * var(--rpx)) solid rgba(255, 107, 125, 0.35); padding: calc(14 * var(--rpx)) calc(24 * var(--rpx)) calc(calc(14 * var(--rpx)) + env(safe-area-inset-bottom)); box-shadow: 0 calc(-6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.45); }

.act-btn { flex: 1; margin: 0 calc(12 * var(--rpx)); padding: calc(14 * var(--rpx)) 0; border-radius: calc(20 * var(--rpx)); background: #241a30; border: calc(1 * var(--rpx)) solid rgba(255, 107, 125, 0.35); }

.act-emoji { font-size: calc(44 * var(--rpx)); line-height: 1.2; }

.act-text { margin-top: calc(4 * var(--rpx)); font-size: calc(24 * var(--rpx)); font-weight: 600; color: #ff8fa0; }

/* —— 弹层遮罩与底部面板(神器/神兽,保留) —— */
.mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; background: rgba(0, 0, 0, 0.62); display: flex; flex-direction: column; justify-content: flex-end; }

.panel { background: #1c1526; border-radius: calc(28 * var(--rpx)) calc(28 * var(--rpx)) 0 0; padding: calc(28 * var(--rpx)) calc(24 * var(--rpx)) calc(calc(24 * var(--rpx)) + env(safe-area-inset-bottom)); max-height: 72vh; display: flex; flex-direction: column; animation: panel-up 0.22s ease-out; }

@keyframes panel-up {
  from { transform: translateY(40%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.panel-title { font-size: calc(28 * var(--rpx)); font-weight: 700; color: #ff8fa0; margin-bottom: calc(16 * var(--rpx)); text-align: center; }

.panel-list { max-height: 56vh; }

.panel-empty { text-align: center; padding: calc(40 * var(--rpx)) 0; }

.panel-row { display: flex; flex-direction: row; align-items: center; padding: calc(20 * var(--rpx)) calc(12 * var(--rpx)); border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.05); }

.panel-row:last-child { border-bottom: none; }

.pr-emoji { font-size: calc(44 * var(--rpx)); margin-right: calc(20 * var(--rpx)); flex-shrink: 0; }

.pr-info { overflow: hidden; }

.pr-name { font-size: calc(27 * var(--rpx)); font-weight: 600; color: #e8e8f0; margin-bottom: calc(2 * var(--rpx)); }

.pr-tier { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); padding: calc(2 * var(--rpx)) calc(14 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(20 * var(--rpx)); font-weight: 700; color: #1c1526; background: linear-gradient(135deg, #ffd9de, #ff6b7d); }

.pr-meta { margin-top: calc(4 * var(--rpx)); font-size: calc(22 * var(--rpx)); font-weight: 600; }

.pr-meta-ok { color: #4fd1c5; }

.pr-meta-lock { color: #8a8f98; }

.pr-disabled { opacity: 0.45; }

/* —— 胜利弹层(WON 保留:+1 击杀/升级动效/花园净化提示) —— */
.overlay-card { margin: auto calc(48 * var(--rpx)); background: #1c1526; border-radius: calc(28 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(255, 107, 125, 0.45); box-shadow: 0 calc(10 * var(--rpx)) calc(48 * var(--rpx)) rgba(255, 107, 125, 0.25); padding: calc(48 * var(--rpx)) calc(36 * var(--rpx)) calc(40 * var(--rpx)); }

.ov-emoji { font-size: calc(96 * var(--rpx)); line-height: 1.3; }

.ov-title { font-size: calc(40 * var(--rpx)); font-weight: 800; color: #ff8fa0; margin: calc(8 * var(--rpx)) 0 calc(16 * var(--rpx)); text-shadow: 0 0 calc(16 * var(--rpx)) rgba(255, 107, 125, 0.45); }

.ov-line { font-size: calc(27 * var(--rpx)); color: #e8e8f0; margin-bottom: calc(8 * var(--rpx)); text-align: center; }

.ov-level { display: inline-block; margin: calc(10 * var(--rpx)) 0; padding: calc(8 * var(--rpx)) calc(28 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(27 * var(--rpx)); font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.6); }

.ov-garden { font-size: calc(25 * var(--rpx)); color: #4fd1c5; margin-top: calc(6 * var(--rpx)); text-align: center; }

.ov-btns { margin-top: calc(32 * var(--rpx)); justify-content: center; }

.ov-btn { margin: 0 calc(12 * var(--rpx)); padding: calc(18 * var(--rpx)) calc(40 * var(--rpx)); font-size: calc(28 * var(--rpx)); }

/* —— 败北全屏浮层(Task 7):💀 挑战失败,1.6s 后自动返回(无按钮,不扣红心) —— */
.defeat-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 60; background: rgba(5, 5, 10, 0.92); animation: fade-in 0.3s ease-out; }

.defeat-emoji { font-size: calc(140 * var(--rpx)); line-height: 1.3; animation: defeat-drop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes defeat-drop {
  0% { transform: scale(0.3) translateY(calc(-60 * var(--rpx))); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.defeat-title { font-size: calc(52 * var(--rpx)); font-weight: 800; color: #f56565; margin-top: calc(20 * var(--rpx)); text-shadow: 0 0 calc(24 * var(--rpx)) rgba(245, 101, 101, 0.5); }

.defeat-sub { font-size: calc(26 * var(--rpx)); color: #8a8f98; margin-top: calc(14 * var(--rpx)); }

/* —— 空态 —— */
.empty { flex: 1; padding: calc(160 * var(--rpx)) 0; }

.empty-icon { font-size: calc(96 * var(--rpx)); margin-bottom: calc(20 * var(--rpx)); }

.empty-text { font-size: calc(28 * var(--rpx)); color: #8a8f98; margin-bottom: calc(28 * var(--rpx)); }

/* 神器面板空态:去兑换按钮(追加:空背包一键跳商店) */
.shop-jump-btn { margin-top: calc(20 * var(--rpx)); padding: calc(16 * var(--rpx)) calc(44 * var(--rpx)); font-size: calc(28 * var(--rpx)); }

/* ===== pages/shop/shop.wxss ===== */
/* 神器兑换商店(魔法系统 Task 5):暗色主题(#12121a 底、紫 #a855f7 强调,同 app.wxss) */

.shop-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

.sh-hover { opacity: 0.88; }

/* —— 顶部可用红心余额卡 —— */
.hearts-card { margin-top: calc(28 * var(--rpx)); padding: calc(28 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(245, 101, 101, 0.35); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(245, 101, 101, 0.12); }

.hc-label { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; margin-bottom: calc(4 * var(--rpx)); }

.hc-value { font-size: calc(36 * var(--rpx)); font-weight: 700; color: #f56565; font-variant-numeric: tabular-nums; }

.hc-arrow { margin-left: calc(12 * var(--rpx)); font-size: calc(40 * var(--rpx)); color: #8a8f98; }

/* —— 品阶筛选 tab(横向滚动) —— */
.tier-tabs { width: 100%; white-space: nowrap; }

.tt-row { padding: calc(8 * var(--rpx)) calc(24 * var(--rpx)); }

.tt-item { flex-shrink: 0; margin-right: calc(16 * var(--rpx)); padding: calc(10 * var(--rpx)) calc(26 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: #8a8f98; background: #1c1c28; border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.08); }

.tt-active { color: #ffffff; font-weight: 700; background: linear-gradient(135deg, #a855f7, #7c3aed); border-color: transparent; box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(168, 85, 247, 0.4); }

/* —— 神器行 —— */
.art-card { padding: calc(24 * var(--rpx)) calc(28 * var(--rpx)); }

.art-poor { opacity: 0.6; }

.art-left { overflow: hidden; }

.art-emoji { font-size: calc(52 * var(--rpx)); margin-right: calc(20 * var(--rpx)); flex-shrink: 0; filter: drop-shadow(0 0 calc(10 * var(--rpx)) rgba(168, 85, 247, 0.3)); }

.art-name { font-size: calc(29 * var(--rpx)); font-weight: 600; color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.art-effect { margin-top: calc(2 * var(--rpx)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.art-right { flex-shrink: 0; align-items: flex-end; margin-left: calc(16 * var(--rpx)); }

.art-price { font-size: calc(26 * var(--rpx)); font-weight: 700; color: #f56565; font-variant-numeric: tabular-nums; }

.art-buy { margin-top: calc(10 * var(--rpx)); padding: calc(8 * var(--rpx)) calc(30 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(24 * var(--rpx)); font-weight: 600; color: #ffffff; background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 calc(4 * var(--rpx)) calc(14 * var(--rpx)) rgba(168, 85, 247, 0.35); }

.art-buy-dim { color: #8a8f98; background: #2a2a36; box-shadow: none; }

/* —— 底部提示 —— */
.shop-tip { text-align: center; padding: calc(20 * var(--rpx)) calc(48 * var(--rpx)); }

/* ===== pages/bag/bag.wxss ===== */
/* 魔法背包页(魔法系统 Task 5):暗色主题(#12121a 底、紫 #a855f7 强调,同 app.wxss) */

.bag-page { min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); }

.bg-hover { opacity: 0.88; }

.list-hint { text-align: center; color: #8a8f98; font-size: calc(24 * var(--rpx)); padding: calc(24 * var(--rpx)) 0; }

.sec-title { font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; }

/* —— 魔法等级卡 —— */
.lvl-card { margin-top: calc(28 * var(--rpx)); padding: calc(28 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.35); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(168, 85, 247, 0.15); }

.lvl-left { overflow: hidden; }

.lvl-emoji { font-size: calc(64 * var(--rpx)); margin-right: calc(22 * var(--rpx)); filter: drop-shadow(0 0 calc(16 * var(--rpx)) rgba(168, 85, 247, 0.45)); }

.lvl-title { font-size: calc(32 * var(--rpx)); font-weight: 700; color: #a855f7; text-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.35); margin-bottom: calc(4 * var(--rpx)); }

/* 进度条:kills%10(每 10 杀升 1 级) */
.lvl-bar { margin-top: calc(20 * var(--rpx)); height: calc(14 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: #2a2a36; overflow: hidden; }

.lvl-bar-in { height: 100%; border-radius: calc(999 * var(--rpx)); background: linear-gradient(90deg, #a855f7, #4fd1c5); box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.5); transition: width 0.4s ease-out; }

/* —— 神器背包分组 —— */
.bag-group { margin-top: calc(4 * var(--rpx)); }

.bg-head { margin-top: calc(8 * var(--rpx)); }

.bg-emoji { font-size: calc(36 * var(--rpx)); margin-right: calc(14 * var(--rpx)); flex-shrink: 0; }

.bg-name { font-size: calc(28 * var(--rpx)); font-weight: 700; color: #4fd1c5; }

.bg-qty { font-size: calc(26 * var(--rpx)); font-weight: 700; color: #a855f7; font-variant-numeric: tabular-nums; }

.bg-effect { display: block; margin: calc(2 * var(--rpx)) 0 calc(4 * var(--rpx)) calc(50 * var(--rpx)); }

.bg-item { padding: calc(14 * var(--rpx)) 0; border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.04); }

.bg-item:last-child { border-bottom: none; }

.bg-item-left { overflow: hidden; }

.bg-item-emoji { font-size: calc(34 * var(--rpx)); margin-right: calc(14 * var(--rpx)); flex-shrink: 0; }

.bg-item-name { font-size: calc(27 * var(--rpx)); color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.bg-item-effect { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.bg-item-qty { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); font-size: calc(26 * var(--rpx)); font-weight: 700; color: #e8e8f0; font-variant-numeric: tabular-nums; }

/* 空背包 */
.bag-empty { padding: calc(48 * var(--rpx)) 0 calc(24 * var(--rpx)); }

.bag-empty-icon { font-size: calc(88 * var(--rpx)); margin-bottom: calc(16 * var(--rpx)); filter: drop-shadow(0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.4)); }

.bag-empty-btn { margin-top: calc(28 * var(--rpx)); padding: calc(16 * var(--rpx)) calc(56 * var(--rpx)); font-size: calc(28 * var(--rpx)); }

/* —— 十类别功能说明折叠区 —— */
.cat-arrow { font-size: calc(22 * var(--rpx)); color: #a855f7; }

.cat-row { margin-top: calc(20 * var(--rpx)); }

.cat-name { font-size: calc(27 * var(--rpx)); font-weight: 600; color: #e8e8f0; }

.cat-note { margin-top: calc(20 * var(--rpx)); padding-top: calc(16 * var(--rpx)); border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.06); }

/* —— 神兽魔法图鉴 —— */
.bst-row { margin-top: calc(22 * var(--rpx)); align-items: flex-start; }

.bst-emoji { font-size: calc(40 * var(--rpx)); margin-right: calc(16 * var(--rpx)); flex-shrink: 0; }

.bst-name { font-size: calc(27 * var(--rpx)); font-weight: 600; color: #e8e8f0; }

.bst-cost { margin-top: calc(2 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #f56565; }

/* ===== pages/garden/garden.wxss ===== */
/* 流星花园页(魔法系统 Task 5):暗色主题 + 满园阳光主题(金色渐变 + 花瓣飘落,spec §6) */

.garden-page { position: relative; min-height: 100vh; padding-bottom: calc(40 * var(--rpx)); overflow: hidden; }

/* —— 满园阳光主题:金色渐变天空(kills=120) —— */
.sunny-theme { background: linear-gradient(180deg, rgba(245, 166, 35, 0.32) 0%, rgba(255, 233, 168, 0.14) 34%, rgba(168, 85, 247, 0.06) 62%, transparent 88%); }

.gd-hover { opacity: 0.88; }

.list-hint { text-align: center; color: #8a8f98; font-size: calc(24 * var(--rpx)); padding: calc(24 * var(--rpx)) 0; }

/* —— 花瓣飘落动效(仅阳光主题;位置/时长/延迟由 garden.js PETALS 预计算 inline) —— */
.petals { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; }

.petal { position: absolute; top: calc(-60 * var(--rpx)); opacity: 0; animation-name: petal-fall; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes petal-fall {
  0% {
    transform: translateY(-6vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  50% {
    transform: translateY(52vh) translateX(calc(36 * var(--rpx))) rotate(180deg);
    opacity: 0.85;
  }
  100% {
    transform: translateY(108vh) translateX(calc(-24 * var(--rpx))) rotate(360deg);
    opacity: 0.35;
  }
}

/* —— 顶部净化总进度 —— */
.gd-head { margin-top: calc(28 * var(--rpx)); padding: calc(28 * var(--rpx)); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.35); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(168, 85, 247, 0.15); }

.sunny-theme .gd-head { border-color: rgba(245, 166, 35, 0.55); box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(245, 166, 35, 0.2); }

.gd-title { font-size: calc(32 * var(--rpx)); font-weight: 700; color: #a855f7; text-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.35); }

.sunny-theme .gd-title { color: #f5a623; text-shadow: 0 0 calc(14 * var(--rpx)) rgba(245, 166, 35, 0.5); }

.gd-total { font-size: calc(28 * var(--rpx)); font-weight: 700; color: #4fd1c5; font-variant-numeric: tabular-nums; }

.gd-bar { margin: calc(18 * var(--rpx)) 0 calc(12 * var(--rpx)); height: calc(14 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: #2a2a36; overflow: hidden; }

.gd-bar-in { height: 100%; border-radius: calc(999 * var(--rpx)); background: linear-gradient(90deg, #a855f7, #4fd1c5); box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.5); transition: width 0.4s ease-out; }

/* 满园:进度条切金色 */
.gd-bar-gold { background: linear-gradient(90deg, #f5a623, #ffe9a8); box-shadow: 0 0 calc(14 * var(--rpx)) rgba(245, 166, 35, 0.6); }

/* —— 中心涅槃樱(花坛 12,中心神树) —— */
.gd-center { margin: calc(8 * var(--rpx)) calc(24 * var(--rpx)) calc(4 * var(--rpx)); padding: calc(30 * var(--rpx)) calc(24 * var(--rpx)); border-radius: calc(20 * var(--rpx)); background: radial-gradient(circle at 50% 36%, rgba(168, 85, 247, 0.16), rgba(28, 28, 40, 0.9) 68%); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.3); }

.sunny-theme .gd-center { background: radial-gradient(circle at 50% 36%, rgba(245, 166, 35, 0.28), rgba(28, 28, 40, 0.9) 70%); border-color: rgba(245, 166, 35, 0.5); }

.gc-tree { font-size: calc(96 * var(--rpx)); line-height: 1.3; filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.5)); }

/* 满园:神树呼吸金光 */
.gc-tree-sunny { filter: drop-shadow(0 0 calc(30 * var(--rpx)) rgba(245, 166, 35, 0.75)); animation: tree-glow 2.4s ease-in-out infinite; }

@keyframes tree-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 calc(22 * var(--rpx)) rgba(245, 166, 35, 0.55)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 calc(38 * var(--rpx)) rgba(245, 166, 35, 0.95)); }
}

.gc-name { margin-top: calc(8 * var(--rpx)); font-size: calc(28 * var(--rpx)); font-weight: 700; color: #e8e8f0; }

.gc-state { margin-top: calc(4 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #8a8f98; }

/* —— 3×4 花坛格 —— */
.gd-grid { display: flex; flex-wrap: wrap; justify-content: center; margin-top: calc(12 * var(--rpx)); }

.gd-cell { width: calc(216 * var(--rpx)); margin: calc(9 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(10 * var(--rpx)) calc(16 * var(--rpx)); border-radius: calc(20 * var(--rpx)); background: #1c1c28; border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.06); box-shadow: 0 calc(6 * var(--rpx)) calc(18 * var(--rpx)) rgba(0, 0, 0, 0.3); }

/* 四态描边:荒芜灰 / 发芽青 / 开花紫 / 阳光金 */
.cell-barren { opacity: 0.55; }

.cell-sprouting { border-color: rgba(79, 209, 197, 0.45); }

.cell-blooming { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(168, 85, 247, 0.18); }

.cell-sunny { border-color: rgba(245, 166, 35, 0.65); background: linear-gradient(160deg, #23232f, #2c2418); box-shadow: 0 calc(6 * var(--rpx)) calc(22 * var(--rpx)) rgba(245, 166, 35, 0.25); }

.gcell-emoji { font-size: calc(52 * var(--rpx)); line-height: 1.3; }

/* 发芽进度条(kills%10/10,spec §6) */
.gcell-bar { margin-top: calc(8 * var(--rpx)); width: calc(120 * var(--rpx)); height: calc(8 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: #2a2a36; overflow: hidden; }

.gcell-bar-in { height: 100%; border-radius: calc(999 * var(--rpx)); background: linear-gradient(90deg, #4fd1c5, #a855f7); }

.gcell-path { margin-top: calc(10 * var(--rpx)); font-size: calc(22 * var(--rpx)); font-weight: 600; color: #e8e8f0; }

.gcell-flower { margin-top: calc(2 * var(--rpx)); font-size: calc(20 * var(--rpx)); color: #8a8f98; }

/* ===== pages/admin/admin.wxss ===== */
/* 管理后台页(admin 计划 Task 2):对齐 admin.html 暗色变量,移动单列布局,
   卡片圆角 16rpx+,弹层 mask 半透明 + 底部上滑面板,操作按钮放底部拇指易达 */

.admin-page { /* admin.html :root 同款变量(--bg 由全局 page #12121a 提供) */ --panel: #1c1c2a; --panel-2: #232336; --border: #2e2e45; --muted: #9a97ad; --gold: #e8b34b; --red: #ff5b5b; --green: #4bdc8a; --text-hi: #e8e6f0; min-height: 100vh; padding-bottom: calc(48 * var(--rpx)); }

.item-hover { opacity: 0.85; }

/* ===== 登录态 ===== */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(32 * var(--rpx)); }

.login-card { width: 100%; max-width: calc(640 * var(--rpx)); background: var(--panel); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(24 * var(--rpx)); padding: calc(64 * var(--rpx)) calc(48 * var(--rpx)); display: flex; flex-direction: column; }

.login-title { font-size: calc(40 * var(--rpx)); font-weight: 700; color: var(--text-hi); text-align: center; }

.login-sub { font-size: calc(24 * var(--rpx)); color: var(--muted); text-align: center; margin: calc(12 * var(--rpx)) 0 calc(48 * var(--rpx)); }

/* 原生 input 不吃上下 padding 撑高(文字被裁):显式 height+line-height+box-sizing(计划全局约束) */
.login-input { width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx)); box-sizing: border-box; padding: 0 calc(24 * var(--rpx)); background: #12121a; border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(16 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: var(--text-hi); margin-bottom: calc(24 * var(--rpx)); }

.login-ph { color: #5c5a70; }

.login-btn { width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx)); background: linear-gradient(135deg, #f0c264, #d99a2b); color: #1a1408; font-weight: 600; font-size: calc(30 * var(--rpx)); border: none; border-radius: calc(16 * var(--rpx)); margin-top: calc(8 * var(--rpx)); padding: 0; }
.login-btn::after { border: none; }
.login-btn[disabled] { opacity: 0.5; }

.login-hint { margin-top: calc(24 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: var(--muted); text-align: center; }

/* ===== 主视图:顶栏 + tab ===== */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(24 * var(--rpx)) calc(32 * var(--rpx)) calc(8 * var(--rpx)); }

.topbar-title { font-size: calc(34 * var(--rpx)); font-weight: 700; color: var(--text-hi); }

.topbar-gold { color: var(--gold); }

.logout-btn { flex-shrink: 0; font-size: calc(26 * var(--rpx)); color: var(--muted); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(999 * var(--rpx)); padding: calc(10 * var(--rpx)) calc(28 * var(--rpx)); }

.tabs { display: flex; padding: calc(20 * var(--rpx)) calc(32 * var(--rpx)) calc(8 * var(--rpx)); }

.tab { position: relative; background: var(--panel); border: calc(1 * var(--rpx)) solid var(--border); color: var(--muted); border-radius: calc(999 * var(--rpx)); padding: calc(14 * var(--rpx)) calc(28 * var(--rpx)); font-size: calc(26 * var(--rpx)); margin-right: calc(16 * var(--rpx)); }
.tab:last-child { margin-right: 0; }

.tab-active { color: var(--gold); border-color: var(--gold); font-weight: 600; }

.tab-badge { display: inline-block; min-width: calc(32 * var(--rpx)); background: var(--red); color: #ffffff; font-size: calc(20 * var(--rpx)); font-weight: 700; line-height: calc(32 * var(--rpx)); border-radius: calc(999 * var(--rpx)); padding: 0 calc(8 * var(--rpx)); margin-left: calc(8 * var(--rpx)); text-align: center; }

.tab-body { padding: calc(16 * var(--rpx)) calc(32 * var(--rpx)) 0; }

/* ===== 概览 ===== */
.stat-grid { display: flex; flex-wrap: wrap; margin: 0 calc(-8 * var(--rpx)); }

.stat-card { width: calc(50% - calc(16 * var(--rpx))); margin: calc(8 * var(--rpx)); background: var(--panel); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(16 * var(--rpx)); padding: calc(24 * var(--rpx)); display: flex; flex-direction: column; }

.stat-label { font-size: calc(24 * var(--rpx)); color: var(--muted); }

.stat-value { font-size: calc(48 * var(--rpx)); font-weight: 700; color: var(--text-hi); margin-top: calc(4 * var(--rpx)); font-variant-numeric: tabular-nums; }

/* 待处理申诉 > 0 红色强调 */
.stat-alert .stat-value { color: var(--red); }

.panel { background: var(--panel); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(16 * var(--rpx)); padding: calc(28 * var(--rpx)); margin-top: calc(24 * var(--rpx)); }

.panel-title { display: block; font-size: calc(28 * var(--rpx)); font-weight: 600; color: var(--gold); margin-bottom: calc(20 * var(--rpx)); }

.bar-row { display: flex; align-items: center; margin-bottom: calc(16 * var(--rpx)); }
.bar-row:last-child { margin-bottom: 0; }

.bar-name { flex: 0 0 calc(210 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: var(--muted); text-align: right; margin-right: calc(16 * var(--rpx)); }

.bar-track { flex: 1; height: calc(28 * var(--rpx)); background: #12121a; border-radius: calc(8 * var(--rpx)); overflow: hidden; }

.bar-fill { height: 100%; background: linear-gradient(90deg, #d99a2b, #f0c264); border-radius: calc(8 * var(--rpx)); }

.bar-count { flex: 0 0 calc(92 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: var(--text-hi); margin-left: calc(12 * var(--rpx)); font-variant-numeric: tabular-nums; }

/* ===== 申诉工作台 ===== */
.subtabs { display: flex; margin-bottom: calc(20 * var(--rpx)); }

.subtab { background: var(--panel-2); border: calc(1 * var(--rpx)) solid var(--border); color: var(--muted); border-radius: calc(12 * var(--rpx)); padding: calc(10 * var(--rpx)) calc(24 * var(--rpx)); font-size: calc(24 * var(--rpx)); margin-right: calc(12 * var(--rpx)); }
.subtab:last-child { margin-right: 0; }

.subtab-active { color: var(--text-hi); border-color: var(--gold); }

.appeal-item { background: var(--panel-2); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(16 * var(--rpx)); padding: calc(22 * var(--rpx)) calc(24 * var(--rpx)); margin-bottom: calc(16 * var(--rpx)); display: flex; flex-direction: column; }

.ai-row1 { display: flex; align-items: center; margin-bottom: calc(10 * var(--rpx)); }

.chip { display: inline-block; border-radius: calc(8 * var(--rpx)); padding: calc(2 * var(--rpx)) calc(14 * var(--rpx)); font-size: calc(22 * var(--rpx)); background: #12121a; border: calc(1 * var(--rpx)) solid var(--border); color: var(--gold); white-space: nowrap; }
.chip-PENDING { color: var(--gold); border-color: var(--gold); }
.chip-UPHELD { color: var(--green); border-color: var(--green); }
.chip-REJECTED { color: var(--red); border-color: var(--red); }

.ai-nick { font-size: calc(26 * var(--rpx)); color: var(--text-hi); margin-left: calc(14 * var(--rpx)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ai-summary { font-size: calc(26 * var(--rpx)); color: var(--text-hi); margin-bottom: calc(10 * var(--rpx)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ai-summary-ph { color: var(--muted); font-style: italic; }

.ai-meta { font-size: calc(22 * var(--rpx)); color: var(--muted); margin-top: calc(4 * var(--rpx)); }

/* ===== 用户列表 ===== */
.users-title { margin: calc(8 * var(--rpx)) 0 calc(20 * var(--rpx)); }

.user-item { background: var(--panel-2); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(16 * var(--rpx)); padding: calc(22 * var(--rpx)) calc(24 * var(--rpx)); margin-bottom: calc(16 * var(--rpx)); display: flex; flex-direction: column; }

.usr-row1 { display: flex; align-items: center; justify-content: space-between; }

.usr-nick { font-size: calc(28 * var(--rpx)); font-weight: 600; color: var(--text-hi); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: calc(16 * var(--rpx)); }

.usr-points { flex-shrink: 0; font-size: calc(24 * var(--rpx)); color: var(--gold); font-variant-numeric: tabular-nums; }

.usr-openid { font-size: calc(22 * var(--rpx)); color: var(--muted); margin-top: calc(4 * var(--rpx)); font-family: monospace; }

.usr-row2 { display: flex; align-items: center; justify-content: space-between; margin-top: calc(10 * var(--rpx)); }

.usr-level { font-size: calc(24 * var(--rpx)); color: #a855f7; }

.usr-time { font-size: calc(22 * var(--rpx)); color: var(--muted); }

.usr-login { margin-top: calc(4 * var(--rpx)); }

/* 从未登录:灰字 */
.usr-never { font-style: italic; opacity: 0.7; }

/* ===== 分页条 ===== */
.pager { display: flex; align-items: center; justify-content: center; margin-top: calc(20 * var(--rpx)); padding-bottom: calc(24 * var(--rpx)); }

.pager-btn { flex-shrink: 0; font-size: calc(24 * var(--rpx)); color: var(--muted); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(999 * var(--rpx)); padding: calc(10 * var(--rpx)) calc(28 * var(--rpx)); }

.pager-disabled { opacity: 0.35; }

.pager-info { font-size: calc(22 * var(--rpx)); color: var(--muted); margin: 0 calc(20 * var(--rpx)); }

.list-hint { text-align: center; font-size: calc(24 * var(--rpx)); color: var(--muted); padding: calc(48 * var(--rpx)) 0; }

/* ===== 申诉详情弹层:半透明 mask + 底部上滑面板 ===== */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 50; display: flex; align-items: flex-end; }

.modal-panel { width: 100%; max-height: 88vh; background: var(--panel); border: calc(1 * var(--rpx)) solid var(--border); border-bottom: none; border-radius: calc(24 * var(--rpx)) calc(24 * var(--rpx)) 0 0; padding: calc(28 * var(--rpx)) calc(28 * var(--rpx)) calc(calc(28 * var(--rpx)) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; animation: admin-slide-up 0.25s ease-out; }

@keyframes admin-slide-up {
  from {
    transform: translateY(40%);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(20 * var(--rpx)); }

.modal-title { font-size: calc(30 * var(--rpx)); font-weight: 700; color: var(--gold); }

.modal-scroll { max-height: 36vh; min-height: 0; }

.field { margin-bottom: calc(18 * var(--rpx)); display: flex; flex-direction: column; }

.field-k { font-size: calc(22 * var(--rpx)); color: var(--muted); margin-bottom: calc(6 * var(--rpx)); }

.field-v { font-size: calc(26 * var(--rpx)); color: var(--text-hi); white-space: pre-wrap; word-break: break-all; }

.post-headline { font-size: calc(22 * var(--rpx)); color: var(--muted); margin-bottom: calc(8 * var(--rpx)); }

.modal-divider { height: calc(1 * var(--rpx)); background: var(--border); margin: calc(20 * var(--rpx)) 0; }

/* ===== 裁决表单(PENDING,底部拇指易达)===== */
.judge-form { border-top: calc(1 * var(--rpx)) solid var(--border); padding-top: calc(20 * var(--rpx)); margin-top: calc(8 * var(--rpx)); }

.decision-row { display: flex; margin-bottom: calc(16 * var(--rpx)); }

.decision { flex: 1; text-align: center; font-size: calc(24 * var(--rpx)); color: var(--muted); background: var(--panel-2); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(12 * var(--rpx)); padding: calc(18 * var(--rpx)) calc(8 * var(--rpx)); }
.decision:first-child { margin-right: calc(16 * var(--rpx)); }

.decision-on { color: var(--green); border-color: var(--green); font-weight: 600; background: rgba(75, 220, 138, 0.08); }

.decision-on-rej { color: var(--red); border-color: var(--red); font-weight: 600; background: rgba(255, 91, 91, 0.08); }

.picker-box { display: flex; align-items: center; justify-content: space-between; width: 100%; height: calc(84 * var(--rpx)); line-height: calc(84 * var(--rpx)); box-sizing: border-box; background: #12121a; border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(12 * var(--rpx)); padding: 0 calc(24 * var(--rpx)); font-size: calc(26 * var(--rpx)); color: var(--text-hi); margin-bottom: calc(16 * var(--rpx)); overflow: hidden; white-space: nowrap; }

/* REJECTED 时 picker 禁用置灰 */
.picker-disabled { opacity: 0.4; }

.picker-arrow { color: var(--muted); margin-left: calc(12 * var(--rpx)); }

.note-wrap { position: relative; margin-bottom: calc(20 * var(--rpx)); }

.note-input { width: 100%; height: calc(140 * var(--rpx)); box-sizing: border-box; background: #12121a; border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(12 * var(--rpx)); padding: calc(16 * var(--rpx)) calc(24 * var(--rpx)); font-size: calc(26 * var(--rpx)); color: var(--text-hi); }

.note-count { position: absolute; right: calc(16 * var(--rpx)); bottom: calc(10 * var(--rpx)); font-size: calc(20 * var(--rpx)); color: var(--muted); }

.submit-btn { width: 100%; height: calc(92 * var(--rpx)); line-height: calc(92 * var(--rpx)); background: linear-gradient(135deg, #f0c264, #d99a2b); color: #1a1408; font-weight: 700; font-size: calc(30 * var(--rpx)); border: none; border-radius: calc(16 * var(--rpx)); padding: 0; }
.submit-btn::after { border: none; }
.submit-btn[disabled] { opacity: 0.5; }

.modal-actions { border-top: calc(1 * var(--rpx)) solid var(--border); padding-top: calc(20 * var(--rpx)); margin-top: calc(8 * var(--rpx)); }

.close-btn { width: 100%; height: calc(84 * var(--rpx)); line-height: calc(84 * var(--rpx)); background: transparent; color: var(--muted); border: calc(1 * var(--rpx)) solid var(--border); border-radius: calc(16 * var(--rpx)); font-size: calc(28 * var(--rpx)); padding: 0; }
.close-btn::after { border: none; }

/* ===== components/collection-modal/collection-modal.wxss ===== */
/* 收集弹窗三态组件:深色主题(#12121a/#1c1c28/#a855f7/#4fd1c5)+ 金紫光效,
   动画纯 CSS keyframes(惯例同 level-up-modal)。
   稀有度光效分档(spec §4.4):common 青紫 / rare 紫 / epic 金;拼图卡翻转动效 rotateY。 */

/* —— 遮罩 —— */
[data-cmp="collection-modal"] .cm-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 998; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 16, 0.85); animation: cm-mask-in 0.25s ease-out; }

@keyframes cm-mask-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-cmp="collection-modal"] .cm-hint { margin-top: calc(32 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #5a5f68; }

/* —— 卡面展示区(piece/beast 共用):光晕 + 翻转卡 —— */
[data-cmp="collection-modal"] .cm-flip-zone { position: relative; width: calc(360 * var(--rpx)); height: calc(440 * var(--rpx)); display: flex; align-items: center; justify-content: center; margin: calc(24 * var(--rpx)) 0 calc(8 * var(--rpx)); }

[data-cmp="collection-modal"] .cm-flip-glow { position: absolute; left: 50%; top: 50%; width: calc(340 * var(--rpx)); height: calc(340 * var(--rpx)); margin: calc(-170 * var(--rpx)) 0 0 calc(-170 * var(--rpx)); border-radius: 50%; animation: cm-glow-pulse 1.8s ease-in-out infinite; }
[data-cmp="collection-modal"] .cm-glow-common { background: radial-gradient(circle, rgba(79, 209, 197, 0.4) 0%, rgba(79, 209, 197, 0.12) 45%, transparent 70%); }
[data-cmp="collection-modal"] .cm-glow-rare { background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(168, 85, 247, 0.18) 45%, transparent 70%); }
[data-cmp="collection-modal"] .cm-glow-epic { background: radial-gradient(circle, rgba(245, 166, 35, 0.6) 0%, rgba(245, 166, 35, 0.2) 45%, transparent 70%); }
[data-cmp="collection-modal"] .cm-glow-beast { background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, rgba(245, 166, 35, 0.16) 50%, transparent 72%); }

@keyframes cm-glow-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.65; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* 翻转卡:rotateY 180°→0° 翻入(新卡揭晓动效) */
[data-cmp="collection-modal"] .cm-card { position: relative; width: calc(300 * var(--rpx)); height: calc(400 * var(--rpx)); border-radius: calc(28 * var(--rpx)); display: flex; align-items: center; justify-content: center; background: linear-gradient(165deg, #2a2a3c, #1c1c28 60%, #232332); animation: cm-card-flip 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; backface-visibility: hidden; }

@keyframes cm-card-flip {
  0% { transform: perspective(calc(1200 * var(--rpx))) rotateY(180deg) scale(0.6); opacity: 0; }
  60% { transform: perspective(calc(1200 * var(--rpx))) rotateY(-12deg) scale(1.04); opacity: 1; }
  100% { transform: perspective(calc(1200 * var(--rpx))) rotateY(0) scale(1); opacity: 1; }
}

/* 稀有度边框光效分档 */
[data-cmp="collection-modal"] .cm-card-common { border: calc(2 * var(--rpx)) solid rgba(79, 209, 197, 0.55); box-shadow: 0 calc(12 * var(--rpx)) calc(44 * var(--rpx)) rgba(0, 0, 0, 0.55), 0 0 calc(28 * var(--rpx)) rgba(79, 209, 197, 0.25); }
[data-cmp="collection-modal"] .cm-card-rare { border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.75); box-shadow: 0 calc(12 * var(--rpx)) calc(44 * var(--rpx)) rgba(0, 0, 0, 0.55), 0 0 calc(36 * var(--rpx)) rgba(168, 85, 247, 0.45); }
[data-cmp="collection-modal"] .cm-card-epic { border: calc(3 * var(--rpx)) solid rgba(245, 166, 35, 0.85); box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0, 0, 0, 0.6), 0 0 calc(48 * var(--rpx)) rgba(245, 166, 35, 0.5); animation: cm-card-flip 0.8s cubic-bezier(0.22, 1, 0.36, 1) both, cm-epic-shine 2s ease-in-out 0.9s infinite; }
[data-cmp="collection-modal"] .cm-card-beast { border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.7); box-shadow: 0 calc(12 * var(--rpx)) calc(44 * var(--rpx)) rgba(0, 0, 0, 0.55), 0 0 calc(36 * var(--rpx)) rgba(168, 85, 247, 0.4); }

@keyframes cm-epic-shine {
  0%, 100% { box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0, 0, 0, 0.6), 0 0 calc(32 * var(--rpx)) rgba(245, 166, 35, 0.4); }
  50% { box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0, 0, 0, 0.6), 0 0 calc(64 * var(--rpx)) rgba(245, 166, 35, 0.75); }
}

[data-cmp="collection-modal"] .cm-card-emoji { font-size: calc(150 * var(--rpx)); line-height: 1; filter: drop-shadow(0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.55)); }

[data-cmp="collection-modal"] .cm-card-img { width: calc(220 * var(--rpx)); height: calc(220 * var(--rpx)); }

/* —— piece 态文案 —— */
[data-cmp="collection-modal"] .cm-piece { display: flex; flex-direction: column; align-items: center; padding: 0 calc(48 * var(--rpx)); }

[data-cmp="collection-modal"] .cm-piece-set { font-size: calc(26 * var(--rpx)); color: #8a8f98; letter-spacing: calc(2 * var(--rpx)); }

[data-cmp="collection-modal"] .cm-piece-name { margin-top: calc(16 * var(--rpx)); font-size: calc(44 * var(--rpx)); font-weight: 800; color: #e8e8f0; text-shadow: 0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.65); animation: cm-text-in 0.5s ease-out 0.5s both; }

[data-cmp="collection-modal"] .cm-piece-rarity { margin-top: calc(12 * var(--rpx)); padding: calc(6 * var(--rpx)) calc(28 * var(--rpx)); border-radius: calc(999 * var(--rpx)); font-size: calc(24 * var(--rpx)); font-weight: 600; animation: cm-text-in 0.5s ease-out 0.65s both; }
[data-cmp="collection-modal"] .cm-rarity-common { color: #4fd1c5; border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.5); background: rgba(79, 209, 197, 0.08); }
[data-cmp="collection-modal"] .cm-rarity-rare { color: #d8b4fe; border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.1); }
[data-cmp="collection-modal"] .cm-rarity-epic { color: #f5d78a; border: calc(1 * var(--rpx)) solid rgba(245, 166, 35, 0.65); background: rgba(245, 166, 35, 0.1); }

@keyframes cm-text-in {
  from { transform: translateY(calc(20 * var(--rpx))) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* —— chooseSet 态:10 套预览网格(2 列×5 行) —— */
[data-cmp="collection-modal"] .cm-choose { width: calc(640 * var(--rpx)); max-height: 82vh; padding: calc(44 * var(--rpx)) calc(36 * var(--rpx)) calc(36 * var(--rpx)); background: linear-gradient(165deg, #232332, #1c1c28); border: calc(2 * var(--rpx)) solid rgba(168, 85, 247, 0.5); border-radius: calc(32 * var(--rpx)); box-shadow: 0 calc(16 * var(--rpx)) calc(56 * var(--rpx)) rgba(0, 0, 0, 0.6), 0 0 calc(40 * var(--rpx)) rgba(168, 85, 247, 0.2); display: flex; flex-direction: column; align-items: center; animation: cm-panel-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes cm-panel-pop {
  0% { transform: scale(0.7) translateY(calc(30 * var(--rpx))); opacity: 0; }
  60% { transform: scale(1.03) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

[data-cmp="collection-modal"] .cm-choose-title { font-size: calc(38 * var(--rpx)); font-weight: 800; color: #e8e8f0; text-shadow: 0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.55); }

[data-cmp="collection-modal"] .cm-choose-sub { margin-top: calc(12 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #8a8f98; text-align: center; line-height: 1.6; }

[data-cmp="collection-modal"] .cm-grid { margin-top: calc(28 * var(--rpx)); width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(18 * var(--rpx)); }

[data-cmp="collection-modal"] .cm-grid-item { display: flex; align-items: center; padding: calc(20 * var(--rpx)) calc(22 * var(--rpx)); border-radius: calc(20 * var(--rpx)); background: linear-gradient(150deg, #262636, #1e1e2c); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.28); transition: border-color 0.15s ease; }

[data-cmp="collection-modal"] .cm-grid-item-hover { border-color: rgba(245, 166, 35, 0.8); background: linear-gradient(150deg, #2e2a3c, #232038); }

[data-cmp="collection-modal"] .cm-grid-emoji { font-size: calc(48 * var(--rpx)); line-height: 1; margin-right: calc(16 * var(--rpx)); }

[data-cmp="collection-modal"] .cm-grid-name { font-size: calc(28 * var(--rpx)); font-weight: 600; color: #e8e8f0; }

/* —— beast 态:神兽卡 + 对话气泡 —— */
[data-cmp="collection-modal"] .cm-beast { display: flex; flex-direction: column; align-items: center; padding: 0 calc(48 * var(--rpx)); }

[data-cmp="collection-modal"] .cm-beast-name { margin-top: calc(16 * var(--rpx)); font-size: calc(44 * var(--rpx)); font-weight: 800; color: #f5d78a; text-shadow: 0 0 calc(26 * var(--rpx)) rgba(245, 166, 35, 0.65); animation: cm-text-in 0.5s ease-out 0.5s both; }

/* 红心说明行(需求第5条:红心=每满10000分,化作守护神兽) */
[data-cmp="collection-modal"] .cm-beast-heart { margin-top: calc(12 * var(--rpx)); font-size: calc(24 * var(--rpx)); color: #ff6b81; animation: cm-text-in 0.5s ease-out 0.7s both; }

[data-cmp="collection-modal"] .cm-bubble { margin-top: calc(28 * var(--rpx)); max-width: calc(560 * var(--rpx)); padding: calc(24 * var(--rpx)) calc(32 * var(--rpx)); border-radius: calc(24 * var(--rpx)); background: linear-gradient(150deg, #2a2a3c, #211f30); border: calc(1 * var(--rpx)) solid rgba(79, 209, 197, 0.45); box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.5), 0 0 calc(20 * var(--rpx)) rgba(79, 209, 197, 0.15); animation: cm-bubble-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }

[data-cmp="collection-modal"] .cm-bubble-text { font-size: calc(28 * var(--rpx)); line-height: 1.7; color: #c9cdd6; }

@keyframes cm-bubble-in {
  0% { transform: translateY(calc(16 * var(--rpx))) scale(0.85); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== components/level-badge/level-badge.wxss ===== */
/* 组件只补尺寸与排版;金属渐变 .badge-* 定义在 app.wxss(经 styleIsolation:apply-shared 生效) */

[data-cmp="level-badge"] .badge-emoji { margin-right: calc(6 * var(--rpx)); line-height: 1; }

[data-cmp="level-badge"] .badge-label { font-weight: 700; letter-spacing: calc(1 * var(--rpx)); }

/* 小尺寸(卡片/列表用) */
[data-cmp="level-badge"] .badge-sm { padding: calc(2 * var(--rpx)) calc(14 * var(--rpx)); font-size: calc(20 * var(--rpx)); border-radius: calc(999 * var(--rpx)); }
[data-cmp="level-badge"] .badge-sm .badge-emoji { font-size: calc(20 * var(--rpx)); margin-right: calc(4 * var(--rpx)); }

/* 大尺寸(详情揭晓/榜单前三用) */
[data-cmp="level-badge"] .badge-lg { padding: calc(12 * var(--rpx)) calc(32 * var(--rpx)); font-size: calc(34 * var(--rpx)); border-radius: calc(999 * var(--rpx)); }
[data-cmp="level-badge"] .badge-lg .badge-emoji { font-size: calc(36 * var(--rpx)); margin-right: calc(10 * var(--rpx)); }

/* 未判级灰色态:弱化 */
[data-cmp="level-badge"] .badge-unknown { opacity: 0.85; }

/* ===== components/level-up-modal/level-up-modal.wxss ===== */
/* 升级祝贺组件(2.0 两档):深色主题(#12121a/#1c1c28/#a855f7/#4fd1c5),动画纯 CSS keyframes。
   三态渲染:lum-card 轻祝贺(Lv1-6)/ lum-luxe-panel 华丽揭晓(Lv7-12,金边+粒子)/ lum-max 金色加冕。 */

/* —— 遮罩 —— */
[data-cmp="level-up-modal"] .lum-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 16, 0.82); animation: lum-mask-in 0.25s ease-out; }
/* 轻祝贺遮罩稍浅,不打断浏览 */
[data-cmp="level-up-modal"] .lum-mask-light { background: rgba(10, 10, 16, 0.55); }

@keyframes lum-mask-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* —— Lv1-6:居中卡片轻祝贺 —— */
[data-cmp="level-up-modal"] .lum-card { width: calc(560 * var(--rpx)); padding: calc(48 * var(--rpx)) calc(40 * var(--rpx)) calc(36 * var(--rpx)); background: linear-gradient(160deg, #232332, #1c1c28); border: calc(1 * var(--rpx)) solid rgba(168, 85, 247, 0.45); border-radius: calc(28 * var(--rpx)); box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0, 0, 0, 0.55), 0 0 calc(32 * var(--rpx)) rgba(168, 85, 247, 0.22); display: flex; flex-direction: column; align-items: center; animation: lum-card-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes lum-card-pop {
  0% { transform: scale(0.6) translateY(calc(30 * var(--rpx))); opacity: 0; }
  60% { transform: scale(1.05) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 卡片徽章区:Lv5 涅槃凤凰在 emoji 后叠加 phoenix.png 呼应 */
[data-cmp="level-up-modal"] .lum-card-badge { position: relative; display: flex; align-items: center; justify-content: center; width: calc(160 * var(--rpx)); height: calc(160 * var(--rpx)); margin-bottom: calc(8 * var(--rpx)); }

[data-cmp="level-up-modal"] .lum-card-phoenix { position: absolute; width: calc(150 * var(--rpx)); height: calc(150 * var(--rpx)); opacity: 0.35; filter: drop-shadow(0 0 calc(20 * var(--rpx)) rgba(168, 85, 247, 0.6)); animation: lum-phoenix-rise 2.4s ease-in-out infinite; }

[data-cmp="level-up-modal"] .lum-card-emoji { position: relative; font-size: calc(88 * var(--rpx)); line-height: 1; }

@keyframes lum-phoenix-rise {
  0%, 100% { transform: translateY(calc(6 * var(--rpx))) scale(0.96); }
  50% { transform: translateY(calc(-8 * var(--rpx))) scale(1.04); }
}

[data-cmp="level-up-modal"] .lum-card-title { font-size: calc(36 * var(--rpx)); font-weight: 700; color: #4fd1c5; }

[data-cmp="level-up-modal"] .lum-card-lv { margin-top: calc(10 * var(--rpx)); font-size: calc(30 * var(--rpx)); font-weight: 700; color: #e8e8f0; font-variant-numeric: tabular-nums; }

[data-cmp="level-up-modal"] .lum-card-rank { margin-top: calc(8 * var(--rpx)); font-size: calc(26 * var(--rpx)); font-weight: 600; color: #a855f7; }

[data-cmp="level-up-modal"] .lum-card-msg { margin-top: calc(20 * var(--rpx)); font-size: calc(26 * var(--rpx)); color: #8a8f98; text-align: center; line-height: 1.6; }

[data-cmp="level-up-modal"] .lum-card-hint { margin-top: calc(28 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #5a5f68; }

/* —— Lv7-12 华丽档 / 满级:全屏揭晓 —— */
[data-cmp="level-up-modal"] .lum-full { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 calc(48 * var(--rpx)); }

/* 华丽档金边面板(原"跨段位全屏"档并入 level 档后的升级视觉) */
[data-cmp="level-up-modal"] .lum-luxe-panel { width: calc(620 * var(--rpx)); padding: calc(56 * var(--rpx)) calc(40 * var(--rpx)) calc(48 * var(--rpx)); background: linear-gradient(165deg, #262233, #1c1c28 55%, #231d2e); border: calc(2 * var(--rpx)) solid rgba(245, 166, 35, 0.55); border-radius: calc(36 * var(--rpx)); box-shadow: 0 calc(16 * var(--rpx)) calc(56 * var(--rpx)) rgba(0, 0, 0, 0.6), 0 0 calc(44 * var(--rpx)) rgba(245, 166, 35, 0.18), inset 0 0 calc(32 * var(--rpx)) rgba(168, 85, 247, 0.08); display: flex; flex-direction: column; align-items: center; animation: lum-card-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* 徽章区:光环 + emoji + 粒子 */
[data-cmp="level-up-modal"] .lum-badge-zone { position: relative; width: calc(320 * var(--rpx)); height: calc(320 * var(--rpx)); display: flex; align-items: center; justify-content: center; margin-bottom: calc(32 * var(--rpx)); }

[data-cmp="level-up-modal"] .lum-glow { position: absolute; left: 50%; top: 50%; width: calc(300 * var(--rpx)); height: calc(300 * var(--rpx)); margin: calc(-150 * var(--rpx)) 0 0 calc(-150 * var(--rpx)); border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(168, 85, 247, 0.18) 45%, transparent 70%); animation: lum-glow-pulse 1.8s ease-in-out infinite; }
[data-cmp="level-up-modal"] .lum-glow-gold { background: radial-gradient(circle, rgba(245, 166, 35, 0.6) 0%, rgba(245, 166, 35, 0.2) 45%, transparent 70%); }

@keyframes lum-glow-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.65; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* 粒子加密(Lv7-12):8 颗金紫星点环绕徽章漂浮闪烁 */
[data-cmp="level-up-modal"] .lum-sparks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

[data-cmp="level-up-modal"] .lum-spark { position: absolute; width: calc(10 * var(--rpx)); height: calc(10 * var(--rpx)); border-radius: 50%; background: #f5d78a; box-shadow: 0 0 calc(12 * var(--rpx)) rgba(245, 166, 35, 0.9); animation: lum-spark-float 2.6s ease-in-out infinite; }
[data-cmp="level-up-modal"] .lum-spark-1 { left: 12%; top: 22%; animation-delay: 0s; }
[data-cmp="level-up-modal"] .lum-spark-2 { left: 82%; top: 18%; animation-delay: 0.35s; background: #d8b4fe; box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.9); }
[data-cmp="level-up-modal"] .lum-spark-3 { left: 24%; top: 74%; animation-delay: 0.7s; }
[data-cmp="level-up-modal"] .lum-spark-4 { left: 72%; top: 78%; animation-delay: 1.05s; background: #d8b4fe; box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.9); }
[data-cmp="level-up-modal"] .lum-spark-5 { left: 48%; top: 4%; animation-delay: 1.4s; }
[data-cmp="level-up-modal"] .lum-spark-6 { left: 4%; top: 50%; animation-delay: 1.75s; background: #d8b4fe; box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.9); }
[data-cmp="level-up-modal"] .lum-spark-7 { left: 92%; top: 48%; animation-delay: 2.1s; }
[data-cmp="level-up-modal"] .lum-spark-8 { left: 46%; top: 94%; animation-delay: 2.45s; background: #d8b4fe; box-shadow: 0 0 calc(12 * var(--rpx)) rgba(168, 85, 247, 0.9); }

@keyframes lum-spark-float {
  0%, 100% { transform: translateY(0) scale(0.7); opacity: 0.35; }
  50% { transform: translateY(calc(-14 * var(--rpx))) scale(1.25); opacity: 1; }
}

[data-cmp="level-up-modal"] .lum-badge-emoji { position: relative; font-size: calc(150 * var(--rpx)); line-height: 1; filter: drop-shadow(0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.75)); }

/* 徽章揭晓:放大弹出 + 定格微光 */
[data-cmp="level-up-modal"] .lum-badge-pop { animation: lum-badge-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1), lum-badge-breathe 2.2s ease-in-out 0.7s infinite; }

@keyframes lum-badge-pop {
  0% { transform: scale(0.2); opacity: 0; }
  55% { transform: scale(1.3); opacity: 1; }
  75% { transform: scale(0.94); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes lum-badge-breathe {
  0%, 100% { filter: drop-shadow(0 0 calc(18 * var(--rpx)) rgba(168, 85, 247, 0.55)); }
  50% { filter: drop-shadow(0 0 calc(38 * var(--rpx)) rgba(168, 85, 247, 0.95)); }
}

/* 标题与文案 */
[data-cmp="level-up-modal"] .lum-title { font-size: calc(46 * var(--rpx)); font-weight: 800; color: #e8e8f0; text-align: center; text-shadow: 0 0 calc(24 * var(--rpx)) rgba(168, 85, 247, 0.65); }
[data-cmp="level-up-modal"] .lum-title-pop { animation: lum-title-in 0.5s ease-out 0.35s both; }
[data-cmp="level-up-modal"] .lum-title-gold { color: #f5a623; text-shadow: 0 0 calc(28 * var(--rpx)) rgba(245, 166, 35, 0.75); }

@keyframes lum-title-in {
  from { transform: translateY(calc(24 * var(--rpx))) scale(0.85); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

[data-cmp="level-up-modal"] .lum-sub { margin-top: calc(12 * var(--rpx)); font-size: calc(28 * var(--rpx)); color: #4fd1c5; font-weight: 600; font-variant-numeric: tabular-nums; }

[data-cmp="level-up-modal"] .lum-msg { margin-top: calc(24 * var(--rpx)); font-size: calc(28 * var(--rpx)); line-height: 1.7; color: #8a8f98; text-align: center; max-width: calc(600 * var(--rpx)); }
[data-cmp="level-up-modal"] .lum-msg-gold { color: #e6c98a; }

/* 满级加冕:皇冠 + 金色氛围(徽章光晕由紫转金) */
[data-cmp="level-up-modal"] .lum-max .lum-badge-emoji { filter: drop-shadow(0 0 calc(26 * var(--rpx)) rgba(245, 166, 35, 0.85)); }
[data-cmp="level-up-modal"] .lum-max .lum-badge-pop { animation: lum-badge-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1), lum-badge-breathe-gold 2.2s ease-in-out 0.7s infinite; }

@keyframes lum-badge-breathe-gold {
  0%, 100% { filter: drop-shadow(0 0 calc(18 * var(--rpx)) rgba(245, 166, 35, 0.55)); }
  50% { filter: drop-shadow(0 0 calc(40 * var(--rpx)) rgba(245, 166, 35, 0.95)); }
}

[data-cmp="level-up-modal"] .lum-crown { font-size: calc(88 * var(--rpx)); margin-bottom: calc(8 * var(--rpx)); animation: lum-crown-drop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both, lum-crown-shine 2s ease-in-out 0.8s infinite; }

@keyframes lum-crown-drop {
  0% { transform: translateY(calc(-60 * var(--rpx))) scale(0.5); opacity: 0; }
  70% { transform: translateY(calc(6 * var(--rpx))) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes lum-crown-shine {
  0%, 100% { filter: drop-shadow(0 0 calc(12 * var(--rpx)) rgba(245, 166, 35, 0.5)); }
  50% { filter: drop-shadow(0 0 calc(30 * var(--rpx)) rgba(245, 166, 35, 0.95)); }
}

/* 关闭按钮 */
[data-cmp="level-up-modal"] .lum-btn { margin-top: calc(48 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(72 * var(--rpx)); border-radius: calc(999 * var(--rpx)); background: linear-gradient(135deg, #a855f7, #7c3aed); color: #ffffff; font-size: calc(30 * var(--rpx)); font-weight: 600; box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(168, 85, 247, 0.45); animation: lum-title-in 0.4s ease-out 0.6s both; }
/* 华丽档按钮:金紫双色 */
[data-cmp="level-up-modal"] .lum-btn-luxe { background: linear-gradient(135deg, #f5d78a, #f5a623 50%, #a855f7); color: #1c1c28; box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(245, 166, 35, 0.45); }
[data-cmp="level-up-modal"] .lum-btn-gold { background: linear-gradient(135deg, #ffe9a8, #f5a623 48%, #cf8a15); color: #1c1c28; box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(245, 166, 35, 0.5); }

/* ===== components/post-card/post-card.wxss ===== */
/* 卡片布局与已赞高亮;.card/.badge/.fade-in 基础样式来自 app.wxss */

[data-cmp="post-card"] .post-card { margin: calc(20 * var(--rpx)) calc(24 * var(--rpx)); transition: transform 0.12s ease, opacity 0.12s ease; }
[data-cmp="post-card"] .post-card-hover { opacity: 0.88; transform: scale(0.995); }

[data-cmp="post-card"] .pc-head { width: 100%; }

[data-cmp="post-card"] .pc-avatar { width: calc(64 * var(--rpx)); height: calc(64 * var(--rpx)); border-radius: 50%; background: #2a2a36; flex-shrink: 0; }
[data-cmp="post-card"] .pc-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: calc(32 * var(--rpx)); }

[data-cmp="post-card"] .pc-nick { margin-left: calc(16 * var(--rpx)); font-size: calc(28 * var(--rpx)); font-weight: 600; color: #e8e8f0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(320 * var(--rpx)); }

[data-cmp="post-card"] .pc-type { flex-shrink: 0; margin-left: calc(16 * var(--rpx)); }
[data-cmp="post-card"] .pc-type-icon { font-size: calc(30 * var(--rpx)); }
[data-cmp="post-card"] .pc-duration { margin-left: calc(8 * var(--rpx)); font-size: calc(22 * var(--rpx)); color: #8a8f98; }

[data-cmp="post-card"] .pc-summary { margin: calc(18 * var(--rpx)) 0; font-size: calc(28 * var(--rpx)); line-height: 1.6; color: #e8e8f0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

[data-cmp="post-card"] .pc-foot { width: 100%; margin-top: calc(8 * var(--rpx)); }
[data-cmp="post-card"] .pc-counts { align-items: center; flex-shrink: 0; }
[data-cmp="post-card"] .pc-count { font-size: calc(24 * var(--rpx)); color: #8a8f98; margin-left: calc(24 * var(--rpx)); }
[data-cmp="post-card"] .pc-count.liked { color: #a855f7; font-weight: 700; }
[data-cmp="post-card"] .pc-time { font-size: calc(22 * var(--rpx)); color: #8a8f98; margin-left: calc(24 * var(--rpx)); }