/* ===== 无畏契约皮肤站 - 游戏风格主题 ===== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --bg-deep: #0a0e14;
  --bg-surface: #111620;
  --bg-card: #161d2a;
  --bg-elevated: #1b2332;
  --border-subtle: #1e2a3a;
  --border-glow: #ff4655;
  --text-primary: #ece8e0;
  --text-secondary: #8b939a;
  --text-muted: #555d66;
  --accent: #ffd65e;
  --red: #ff4655;
  --red-glow: rgba(255,70,85,0.4);
  --orange: #f0b232;
  --orange-glow: rgba(240,178,50,0.5);
  --purple: #d154c9;
  --purple-glow: rgba(209,84,201,0.4);
  --blue: #3daee0;
  --blue-glow: rgba(61,174,224,0.4);
  --green: #5a9e6f;
  --green-glow: rgba(90,158,111,0.4);
  --gold: #f0b232;
  --silver: #b0bec5;
  --bronze: #cd7f32;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-md: 8px;
  --max-width: 420px;
}

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

body {
  font-family: -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,70,85,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(240,178,50,0.04) 0%, transparent 50%);
}

#app {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
}

/* ===== Header ===== */
.header {
  position: sticky; top:0; z-index:100;
  display:flex; align-items:center;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(17,22,32,0.98) 0%, rgba(17,22,32,0.85) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}
.header-back, .header-action {
  background: none; border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 16px; cursor: pointer;
  padding: 6px 10px; border-radius: var(--radius-sm);
  transition: all 0.2s;
}
.header-back:hover, .header-action:hover {
  border-color: var(--red); color: var(--red); box-shadow: 0 0 12px var(--red-glow);
}
.header-title {
  flex:1; font-size: 18px; font-weight: 700; text-align: center;
  letter-spacing: 0.5px;
  font-family: 'Rajdhani', -apple-system, sans-serif;
  text-transform: uppercase;
}

/* ===== Main Content ===== */
.main-content { flex:1; overflow-y:auto; padding:16px; padding-bottom:80px; }
.page { display:none; animation:fadeIn 0.3s ease; }
.page.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ===== Shop ===== */
.shop-header { text-align:center; margin-bottom:20px; }
.shop-countdown {
  font-size: 15px; color: var(--accent); margin-bottom: 4px;
  font-family: 'Rajdhani', monospace; font-weight: 600; letter-spacing: 1px;
  text-shadow: 0 0 20px rgba(255,214,94,0.3);
}
.shop-date { font-size: 12px; color: var(--text-muted); }
.link-entry {
  font-size: 12px; color: var(--blue); cursor: pointer; font-weight: 600;
  transition: color 0.2s;
}
.link-entry:hover { color: #5cc8ff; text-shadow: 0 0 8px rgba(61,174,224,0.3); }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:50px 20px; }
.empty-icon { font-size: 56px; margin-bottom: 14px; opacity: 0.6; }
.empty-state p { color: var(--text-secondary); margin-bottom: 4px; font-size: 14px; }

/* ===== Cards ===== */
.skin-cards { display:flex; flex-direction:column; gap: 14px; margin-bottom: 20px; }

.skin-card {
  background: linear-gradient(135deg, rgba(22,29,42,0.9), rgba(27,35,50,0.9));
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all 0.25s ease;
  position: relative;
  backdrop-filter: blur(8px);
}
.skin-card::before {
  content: '';
  position: absolute; inset: -1px; border-radius: var(--radius);
  opacity: 0; transition: opacity 0.25s;
  z-index: -1;
}
.skin-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.skin-card:active { transform: scale(0.98); }

.skin-card-image {
  width: 100%; height: 130px; object-fit: contain;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
  padding: 12px;
}
.skin-card-info {
  padding: 10px 12px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--border-subtle);
}
.skin-card-name { font-size: 13px; font-weight: 600; line-height: 1.3; flex:1; }
.skin-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.skin-card-price {
  font-size: 14px; font-weight: 700; color: var(--accent); white-space:nowrap;
  font-family: 'Rajdhani', monospace;
}

/* 模拟器 */
.simulator-info { text-align: center; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }

/* 翻牌网格 */
.flip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px; perspective: 1000px;
}
.flip-card {
  aspect-ratio: 3/4; cursor: pointer;
}
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-inner.flipped { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius); overflow: hidden;
}
/* 卡背 */
.flip-front {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 2px solid rgba(255,70,85,0.3);
  display: flex; align-items: center; justify-content: center;
}
.flip-card-back-pattern {
  font-size: 48px; font-weight: 900; color: rgba(255,70,85,0.4);
  font-family: 'Rajdhani', monospace; user-select: none;
}
/* 正面 */
.flip-back {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
}
.flip-card-img {
  flex: 1; width: 100%; object-fit: contain;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.1) 100%);
  padding: 8px; min-height: 0;
}
.flip-card-name {
  padding: 8px 10px 2px; font-size: 11px; font-weight: 600; line-height: 1.3;
  text-align: center;
}
.flip-card-meta {
  padding: 0 10px 8px; font-size: 10px; color: var(--text-muted);
  text-align: center;
}

/* 商店卡片已拥有按钮 */
.shop-owned-bar {
  padding: 0 16px 12px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--border-subtle);
}
.shop-owned-btn {
  width: 100%; padding: 8px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface); color: var(--text-muted);
  transition: all 0.2s;
}
.shop-owned-btn:hover {
  border-color: var(--green); color: var(--green);
}
.shop-owned-btn.active {
  background: rgba(90,158,111,0.15); border-color: var(--green);
  color: var(--green); box-shadow: 0 0 8px rgba(90,158,111,0.2);
}

/* Tier tags */
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 2px;
  font-size: 10px; font-weight: 700; margin-right: 6px;
  letter-spacing: 0.5px; vertical-align: middle;
}
.tier-icon { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.tag-Ultra {
  background: rgba(240,178,50,0.15); color: var(--orange);
  box-shadow: 0 0 8px rgba(240,178,50,0.2);
}
.tag-Premium {
  background: rgba(209,84,201,0.15); color: var(--purple);
  box-shadow: 0 0 8px rgba(209,84,201,0.2);
}
.tag-Deluxe {
  background: rgba(90,158,111,0.15); color: var(--green);
  box-shadow: 0 0 8px rgba(90,158,111,0.2);
}
.tag-Select {
  background: rgba(61,174,224,0.15); color: var(--blue);
  box-shadow: 0 0 8px rgba(61,174,224,0.2);
}
.tag-Exclusive {
  background: rgba(239,139,59,0.15); color: #ef8b3b;
  box-shadow: 0 0 8px rgba(239,139,59,0.2);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items:center; justify-content:center; gap:6px;
  padding: 13px 24px; border-radius: var(--radius);
  font-size: 14px; font-weight: 700; border: none; cursor: pointer;
  transition: all 0.25s; width: 100%;
  letter-spacing: 0.5px;
  font-family: 'Rajdhani', -apple-system, sans-serif;
  text-transform: uppercase;
}
.btn-primary {
  background: linear-gradient(135deg, #ff4655, #e03a48);
  color: white;
  box-shadow: 0 4px 20px rgba(255,70,85,0.25);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(255,70,85,0.4);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97); }

.btn-outline {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.btn-outline:hover {
  border-color: var(--red); color: var(--red);
  box-shadow: 0 0 16px rgba(255,70,85,0.15);
}

/* ===== Gallery ===== */
.search-bar { display:flex; gap:8px; margin-bottom:4px; }
.search-bar input {
  flex:1; min-width:0; height:38px; box-sizing:border-box; padding: 0 14px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); color: var(--text-primary); font-size: 13px;
  outline: none; transition: border-color 0.2s;
}
.search-bar input:focus { border-color: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.search-bar input::placeholder { color: var(--text-muted); }

/* 武器筛选按钮（在搜索栏右侧） */
.search-bar .weapon-filter-bar {
  display:flex; align-items:center; justify-content:center; gap:4px; flex-shrink:0;
  height:38px; box-sizing:border-box; padding: 0 12px; border-radius: var(--radius);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  cursor: pointer; font-size: 12px; color: var(--text-secondary);
  white-space:nowrap; transition: border-color 0.2s;
}
.search-bar .weapon-filter-bar:active { border-color: var(--red); }

/* Gallery grid */
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); column-gap:12px; row-gap:6px; }
.gallery-tier-tabs { display:flex; gap:4px; margin-bottom: 16px; }
.gallery-tier-tabs .tab-item2 { flex:1; }

/* 品质图标 */
.tab-item2 .tier-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
/* 品质标签紧凑模式（图标+数字） */
.tab-item2.tier-icon-only { font-size: 11px; padding: 6px 4px; display:inline-flex; align-items:center; justify-content:center; gap:2px; }
.tab-item2.tier-icon-only .tier-icon { width: 14px; height: 14px; margin:0; flex-shrink:0; }
.tab-item2.tier-icon-only .tier-cnt { font-size: 10px; font-weight: 700; }

/* 武器筛选按钮 */
.weapon-filter-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding: 9px 14px; margin-bottom: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); cursor: pointer; font-size: 13px;
  color: var(--text-primary); transition: border-color 0.2s;
}
.weapon-filter-bar:active { border-color: var(--red); }

/* 武器筛选弹出层 */
.weapon-overlay {
  display:none; position:fixed; inset:0; z-index:900;
  background: rgba(0,0,0,0.5); animation: fadeIn 0.25s ease;
}
.weapon-panel {
  position:fixed; left:0; right:0; bottom:0; z-index:901;
  max-height:60vh; background: var(--bg-card);
  border-radius: 8px 8px 0 0;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column;
}
.weapon-panel.active { transform: translateY(0); }
.weapon-panel-header {
  padding: 14px 18px; font-size: 14px; font-weight: 600; flex-shrink:0;
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
.weapon-panel-body { overflow-y:auto; padding: 12px 16px 20px; }
.wp-group { margin-bottom: 14px; }
.wp-group-title {
  font-size: 12px; color: var(--text-muted); margin-bottom: 6px;
  padding-left: 2px; font-weight: 600;
}
.wp-group-tags { display:flex; flex-wrap:wrap; gap:6px; }
.wp-sub-item {
  padding: 8px 16px; font-size: 12px; border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s; white-space:nowrap;
}
.wp-sub-item:hover { color: var(--text-primary); }
.wp-sub-item.active { background: linear-gradient(135deg, rgba(255,70,85,0.2), rgba(255,70,85,0.1)); color: var(--red); font-weight: 600; }

/* 稀有度标签 active 颜色 —— 各品质专属色 */
.tab-item2.tier-active-Ultra { background: linear-gradient(135deg, rgba(240,178,50,0.25), rgba(255,107,26,0.15)); color: var(--orange); border-color: var(--orange); box-shadow: 0 0 14px var(--orange-glow); }
.tab-item2.tier-active-Premium { background: linear-gradient(135deg, rgba(209,84,201,0.25), rgba(160,36,176,0.15)); color: var(--purple); border-color: var(--purple); box-shadow: 0 0 14px var(--purple-glow); }
.tab-item2.tier-active-Select { background: linear-gradient(135deg, rgba(61,174,224,0.25), rgba(0,119,182,0.15)); color: var(--blue); border-color: var(--blue); box-shadow: 0 0 14px var(--blue-glow); }
.tab-item2.tier-active-Deluxe { background: linear-gradient(135deg, rgba(90,158,111,0.25), rgba(61,122,79,0.15)); color: var(--green); border-color: var(--green); box-shadow: 0 0 14px var(--green-glow); }
.tab-item2.tier-active-Exclusive { background: linear-gradient(135deg, rgba(239,139,59,0.25), rgba(200,100,30,0.15)); color: #ef8b3b; border-color: #ef8b3b; box-shadow: 0 0 14px rgba(239,139,59,0.35); }

/* ===== 图鉴卡片（新参考图：图片与文字分离） ===== */
.gallery-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s ease;
}
.gallery-card:hover { transform: translateY(-2px); }
.gallery-card:active { transform: scale(0.97); }

/* 品质颜色变量 */
.gallery-card.tier-Ultra { --tier-rgb: 240,178,50; }
.gallery-card.tier-Premium { --tier-rgb: 209,84,201; }
.gallery-card.tier-Deluxe { --tier-rgb: 90,158,111; }
.gallery-card.tier-Select { --tier-rgb: 61,174,224; }
.gallery-card.tier-Exclusive { --tier-rgb: 239,139,59; }

/* 图片卡片：直角容器 */
.gallery-image-card {
  background: #1a1f28;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
/* 底部品质色条（两端40%透明，渐变均匀过渡） */
.gallery-image-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--tier-rgb), 0.4) 0%,
    rgba(var(--tier-rgb), 1) 20%,
    rgba(var(--tier-rgb), 1) 80%,
    rgba(var(--tier-rgb), 0.4) 100%
  );
  pointer-events: none;
}

/* 图片区：从左到右品质渐变 */
.gallery-card-image-wrap {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  background: linear-gradient(to top,
    rgba(var(--tier-rgb), 0.18) 0%,
    transparent 100%
  );
}
/* SVG 形状背景 */
.gallery-card-image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MjMiIGhlaWdodD0iNDMwLjUiIHZpZXdCb3g9IjAgMCA1MjMgNDMwLjUiPjxwYXRoIGQ9Ik0yOTQuNjQ3NDksMjgxLjIzOTMyQzI5My41ODYxNSwyODIuNTQ2NDUsMjk0LjUxNjQyLDI4NC41LDI5Ni4yMDAxNiwyODQuNUw0NjMuMDI0NjYsMjg0LjVDNDYzLjY0MDIzLDI4NC41LDQ2NC4yMjE1MywyODQuMjE2NTIsNDY0LjYwMDU2LDI4My43MzE1MUw1MjIuNTc1ODcsMjA5LjU0MjcxQzUyMi44NTA3MSwyMDkuMTkxMDQsNTIzLDIwOC43NTc1NCw1MjMsMjA4LjMxMTIyTDUyMyw1LjYzNjExNTFDNTIzLDMuNzUyODA3OSw1MjAuNjM0NDYsMi45MTMzODk5LDUxOS40NDczMyw0LjM3NTQ0MzlMMjk0LjY0NzQ5LDI4MS4yMzkzMlpNMCw1LjY3NDU5MzlMMCwyMDguMzAzNzFDMCwyMDguNzU0NjQsMC4xNTIzNzk2NiwyMDkuMTkyMzIsMC40MzI0MTA4MSwyMDkuNTQ1NzVMMTc0Ljg5OTQ0LDQyOS43NDIwM0MxNzUuMjc4ODEsNDMwLjIyMDgzLDE3NS44NTYxOSw0MzAuNSwxNzYuNDY3MDQsNDMwLjVMMzQyLjMyMjg4LDQzMC41QzM0NC4wMDI2Niw0MzAuNSwzNDQuOTM0MTQsNDI4LjU1NDUzLDM0My44ODA5Miw0MjcuMjQ1OTdMMy41NTgwMTc3LDQuNDIwNTY3NUMyLjM3NDQ4MjYsMi45NTAxMjcxLDAsMy43ODcwMTIzLDAsNS42NzQ1OTM5WiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1vcGFjaXR5PSIxIi8+PC9zdmc+") center/40% no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.gallery-card-image {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* 右上角品质图标 */
.gallery-tier-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  z-index: 2;
}
.gallery-tier-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* 文字区域：图片卡片下方 */
.gallery-card-text {
  padding: 8px 2px 4px;
}
.gallery-card-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--text-primary);
}
.gallery-card-price {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gallery-card-price::before {
  content: '';
  width: 12px; height: 12px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48cGF0aCBkPSJNMzYsMThDMzYsMjcuOTQxMTI2LDI3Ljk0MTEyNiwzNiwxOCwzNkM4LjA1ODg3NDEsMzYsMCwyNy45NDExMjYsMCwxOEMwLDguMDU4ODc0MSw4LjA1ODg3NDEsMCwxOCwwQzI3Ljk0MTEyNiwwLDM2LDguMDU4ODc0MSwzNiwxOFpNMzUsMThDMzUsOC42MTExNTg0LDI3LjM4ODg0MiwxLDE4LDFDOC42MTExNTg0LDEsMSw4LjYxMTE1ODQsMSwxOEMxLDI3LjM4ODg0Miw4LjYxMTE1ODQsMzUsMTgsMzVDMjcuMzg4ODQyLDM1LDM1LDI3LjM4ODg0MiwzNSwxOFpNNi45MDQxMTM4LDE4LjcyMTQyMkw2LjkwNDExMzgsOS44NjMwMzcxTDIxLjkzMzQyNiwyOC4xMDk2MTJMMTQuNTE2MzYyLDI4LjEwOTYxMkw2LjkwNDExMzgsMTguNzIxNDIyWk0yNy4wMjk5NDcsMjEuOTIxNDU5TDE5LjU2OTUwOCwyMS45MjE0NTlMMjkuNTg5MDQ2LDkuODYzMDM3MUwyOS41ODkwNDYsMTguNzIxNDIyTDI3LjAyOTk0NywyMS45MjE0NTlaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGZpbGwtb3BhY2l0eT0iMSIvPjwvc3ZnPg==") center/contain no-repeat;
}
.gallery-owned-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--green); color: white; font-size: 8px;
  padding: 2px 6px; border-radius: 2px; font-weight: 700;
}
.load-more { text-align:center; margin-top: 16px; }

/* ===== Tabs ===== */
.tabs { display:flex; gap: 4px; flex-wrap: wrap; }
.tab-item2 {
  font-size: 12px; padding: 7px 16px; border-radius: var(--radius);
  background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  transition: all 0.2s; font-weight: 600;
}
.tab-item2:hover { color: var(--text-secondary); border-color: var(--border-subtle); }
.tab-item2.active {
  background: linear-gradient(135deg, rgba(255,70,85,0.2), rgba(255,70,85,0.1));
  color: var(--red); border-color: var(--red);
  box-shadow: 0 0 12px rgba(255,70,85,0.2);
}

/* ===== Detail ===== */
.detail-hero {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}
.detail-hero-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.15) 100%);
  display: block;
}
.detail-header { text-align: left; margin-bottom: 20px; padding: 0 4px; }
.detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}
.detail-title-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.detail-name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.detail-name {
  font-size: 20px; font-weight: 700;
  font-family: 'Alimama ShuHeiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-tier-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.detail-price {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.detail-price::before {
  content: '';
  width: 15px; height: 15px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48cGF0aCBkPSJNMzYsMThDMzYsMjcuOTQxMTI2LDI3Ljk0MTEyNiwzNiwxOCwzNkM4LjA1ODg3NDEsMzYsMCwyNy45NDExMjYsMCwxOEMwLDguMDU4ODc0MSw4LjA1ODg3NDEsMCwxOCwwQzI3Ljk0MTEyNiwwLDM2LDguMDU4ODc0MSwzNiwxOFpNMzUsMThDMzUsOC42MTExNTg0LDI3LjM4ODg0MiwxLDE4LDFDOC42MTExNTg0LDEsMSw4LjYxMTE1ODQsMSwxOEMxLDI3LjM4ODg0Miw4LjYxMTE1ODQsMzUsMTgsMzVDMjcuMzg4ODQyLDM1LDM1LDI3LjM4ODg0MiwzNSwxOFpNNi45MDQxMTM4LDE4LjcyMTQyMkw2LjkwNDExMzgsOS44NjMwMzcxTDIxLjkzMzQyNiwyOC4xMDk2MTJMMTQuNTE2MzYyLDI4LjEwOTYxMkw2LjkwNDExMzgsMTguNzIxNDIyWk0yNy4wMjk5NDcsMjEuOTIxNDU5TDE5LjU2OTUwOCwyMS45MjE0NTlMMjkuNTg5MDQ2LDkuODYzMDM3MUwyOS41ODkwNDYsMTguNzIxNDIyTDI3LjAyOTk0NywyMS45MjE0NTlaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGZpbGwtb3BhY2l0eT0iMSIvPjwvc3ZnPg==") center/contain no-repeat;
}
.detail-title-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.btn-icon-fav, .btn-icon-owned {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-icon-fav:hover { border-color: var(--red); }
.btn-icon-fav.active { background: var(--red); border-color: var(--red); }
.btn-icon-owned:hover { border-color: var(--green); }
.btn-icon-owned.active { background: var(--green); border-color: var(--green); }

.detail-section { margin-bottom: 22px; }
.detail-section h3 {
  font-size: 16px; font-weight: 400; margin-bottom: 12px;
  color: var(--text-primary);
  font-family: 'Rajdhani', -apple-system, sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
}
.chroma-list { display:flex; gap: 10px; overflow-x:auto; padding-bottom: 8px; }
.chroma-item { flex-shrink:0; width: 80px; text-align:center; }
.chroma-image {
  width: 80px; height: 60px; object-fit: contain;
  background: var(--bg-surface); border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); margin-bottom: 4px;
}
.chroma-name { font-size: 12px; color: var(--text-muted); }
.level-list { display:flex; flex-direction:column; gap: 8px; }
.level-item {
  display:flex; align-items:center; gap: 12px;
  padding: 10px 14px; background: var(--bg-card);
  border-radius: var(--radius); border: 1px solid var(--border-subtle);
}
.level-icon { font-size: 20px; width: 32px; text-align:center; }
.level-name { font-size: 13px; font-weight: 600; }
.level-type { font-size: 11px; color: var(--text-muted); }

/* 同套装皮肤 */
.set-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.set-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.set-card {
  flex-shrink: 0; width: 100px; text-align: center;
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border-subtle); padding: 10px 8px 8px;
  cursor: pointer; transition: all 0.2s;
}
.set-card:hover { transform: translateY(-2px); }
.set-card.active {
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(255,70,85,0.25);
}
.set-card-img {
  width: 72px; height: 72px; object-fit: contain;
  background: linear-gradient(135deg, rgba(255,70,85,0.06), rgba(240,178,50,0.06));
  border-radius: var(--radius-sm); margin-bottom: 6px;
}
.set-card-name {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px; line-height: 1.3;
}
.set-card-tier { font-size: 10px; }

/* Reviews */
/* Section header with sort toggle */
.detail-section-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.detail-section-header h3 { margin: 0; }
.sort-toggle {
  display: flex; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border-subtle); flex-shrink: 0;
}
.sort-btn {
  font-size: 12px; padding: 4px 10px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: none; transition: all 0.2s ease; line-height: 1.4;
}
.sort-btn + .sort-btn { border-left: 1px solid var(--border-subtle); }
.sort-btn.active {
  background: var(--red); color: #fff;
}
.sort-btn:not(.active):hover { color: var(--text-secondary); background: var(--bg-surface); }
.sort-btn:not(.active):active { background: var(--bg-elevated); }
.review-form {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; border: 1px solid var(--border-subtle);
}
.review-form textarea {
  width: 100%; padding: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 13px; margin-bottom: 8px; outline: none;
  resize: vertical; min-height: 56px; font-family: inherit;
}
.review-form textarea:focus { border-color: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.review-form .form-actions { display: flex; align-items: center; gap: 8px; }
.review-form .btn-upload-img {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 13px; padding: 6px 12px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s;
}
.review-form .btn-upload-img:hover { border-color: var(--accent); color: var(--accent); }
.review-item {
  padding: 12px 0; margin-bottom: 0;
  border: none;
  background: transparent;
  display: flex; gap: 10px; align-items: flex-start;
  position: relative;
}
.review-item::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
}
.review-author { display: none; }
.review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--red); object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
/* 空 src 时隐藏破裂图，显示背景上的占位符 */
.review-avatar[src=""], .review-avatar:not([src]) {
  visibility: hidden;
}
.review-avatar[src=""]::after, .review-avatar:not([src])::after {
  content: ''; visibility: visible;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2a3340; border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%238b939a'/%3E%3Cpath d='M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8' fill='%238b939a'/%3E%3C/svg%3E");
  background-size: 22px; background-repeat: no-repeat; background-position: center;
}
.review-main { flex: 1; min-width: 0; }
.review-head {
  display: flex; align-items: center; gap: 8px;
}
.review-name { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.review-time { font-size: 11px; color: var(--text-muted); flex: 1; min-width: 0; }
.review-comment { font-size: 14px; line-height: 1.5; color: var(--text-primary); margin-bottom: 4px; }
.review-date { display: none; }
.review-actions { display: flex; gap: 12px; margin-top: 6px; }
/* 点赞按钮 */
.review-like-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  background: none; border: none; padding: 2px 4px;
  border-radius: 4px; transition: all 0.2s;
  flex-shrink: 0; line-height: 1;
}
.review-like-btn:hover { color: var(--text-secondary); transform: scale(1.05); }
.review-like-btn .like-icon {
  transition: transform 0.25s ease-out, fill 0.2s ease;
  fill: none; stroke: currentColor; stroke-width: 2;
  flex-shrink: 0;
}
.review-like-btn .like-count { font-size: 12px; }
/* 点赞态：实心红色 */
.review-like-btn.liked { color: var(--red); }
.review-like-btn.liked .like-icon {
  fill: var(--red); stroke: var(--red);
}
.review-like-btn.liked:hover { color: var(--red); }
/* 弹跳动画 */
.review-like-btn.like-bounce .like-icon {
  animation: likeBounce 0.3s ease-out;
}
@keyframes likeBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.review-reply-btn {
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  background: none; border: none; padding: 0; transition: color 0.2s;
}
.review-reply-btn:hover { color: var(--accent); }
.review-reply-count {
  font-size: 12px; color: var(--accent); cursor: pointer;
  background: none; border: none; padding: 0;
}
.review-reply-count:hover { text-decoration: underline; }
/* 图片网格 */
.review-images { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.review-images img {
  width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); cursor: pointer; transition: transform 0.2s;
}
.review-images img:hover { transform: scale(1.05); }
/* 图片预览（上传前） */
.image-preview-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.image-preview-item {
  position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border-subtle);
}
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.image-preview-del {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--red);
  color: #fff; font-size: 10px; line-height: 18px; text-align: center;
  cursor: pointer; border: none;
}
/* 回复区 */
.reply-form-wrap {
  margin-top: 8px; padding-left: 46px;
}
.reply-form-wrap textarea { min-height: 40px; font-size: 12px; }
.reply-list { margin-top: 4px; }
.reply-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 0; border: none;
  margin-bottom: 0;
}
.reply-item .review-avatar { width: 28px; height: 28px; }
.reply-item .review-avatar[src=""]::after, .reply-item .review-avatar:not([src])::after { background-size: 16px; }
.reply-item .review-name { font-size: 12px; }
.reply-item .review-comment { font-size: 13px; }
.reply-item .review-time { font-size: 10px; }
/* 未登录提示 */
.review-login-hint {
  text-align: center; padding: 20px; color: var(--text-muted); font-size: 13px;
}

/* ===== Leaderboard ===== */
.lb-card {
  background: transparent; border-radius: 0;
  padding: 10px 12px; margin-bottom: 8px; display: flex; gap: 10px;
  align-items: center; font-size: 11px; cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.lb-card:hover { background: rgba(255,255,255,0.03); }
/* 前三名金银铜 */
.lb-card.podium-gold {
  border-left: 1px solid rgba(240,178,50,0.6);
  background: linear-gradient(90deg, rgba(240,178,50,0.16) 0%, rgba(240,178,50,0) 40%);
}
.lb-card.podium-silver {
  border-left: 1px solid rgba(176,190,197,0.5);
  background: linear-gradient(90deg, rgba(176,190,197,0.16) 0%, rgba(176,190,197,0) 40%);
}
.lb-card.podium-bronze {
  border-left: 1px solid rgba(205,127,50,0.5);
  background: linear-gradient(90deg, rgba(205,127,50,0.16) 0%, rgba(205,127,50,0) 40%);
}
.lb-rank {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; flex-shrink: 0;
  font-family: 'Rajdhani', monospace;
  color: var(--text-secondary);
}
.lb-rank-1 { background: linear-gradient(135deg, #f0b232, #ffd65e); color: #1a1a1a; box-shadow: 0 0 16px rgba(240,178,50,0.5); }
.lb-rank-2 { background: linear-gradient(135deg, #b0bec5, #cfd8dc); color: #1a1a1a; box-shadow: 0 0 12px rgba(176,190,197,0.4); }
.lb-rank-3 { background: linear-gradient(135deg, #cd7f32, #e8a860); color: #1a1a1a; box-shadow: 0 0 12px rgba(205,127,50,0.4); }
.lb-rank-o { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.lb-img {
  width: 88px; height: 48px; border-radius: 0; flex-shrink: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; object-fit: contain;
  border: none;
}
.lb-tier-icon { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 3px; }
.lb-info { flex:1; }
.lb-name { font-weight: 600; font-size: 12px; }
.lb-meta { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
.lb-rate { font-size: 16px; font-weight: 700; color: var(--red); font-family: 'Rajdhani', monospace; }
.lb-rate-sub { font-size: 9px; color: var(--text-muted); }

/* ===== History ===== */
.date-row {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 12px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.date-row:hover { border-color: rgba(255,255,255,0.15); }
.date-row .date { font-weight: 600; font-size: 12px; margin-bottom: 6px; color: var(--text-secondary); }
.date-skins { display:flex; gap: 4px; flex-wrap:wrap; }
.date-skin-tag {
  padding: 3px 10px; border-radius: 2px; font-size: 10px;
  background: var(--bg-elevated); color: var(--text-muted);
  font-weight: 500;
}

.freq-card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 6px; display: flex; gap: 10px;
  align-items: center; font-size: 11px; cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.freq-card:hover { border-color: rgba(255,255,255,0.15); }
.freq-count {
  font-size: 22px; font-weight: 700; color: var(--red); width: 36px;
  text-align: center; flex-shrink: 0;
  font-family: 'Rajdhani', monospace;
}

.missing-card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 6px; display: flex; gap: 10px;
  align-items: center; font-size: 11px; cursor: pointer;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--red);
  transition: all 0.2s;
}
.missing-card.owned {
  border-left-color: var(--green); opacity: 0.5;
}
.missing-card:hover { border-color: rgba(255,255,255,0.15); }

/* ===== Settings ===== */
/* 页面顶部背景：用户参考图 + 顶部清晰向下渐隐 */
#page-settings {
  position: relative;
  overflow: hidden;
  margin: -16px -16px 0 -16px;
  padding: 16px 16px 0 16px;
}
#page-settings::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background:
    linear-gradient(180deg, rgba(13,17,24,0.25) 0%, rgba(13,17,24,0.70) 55%, rgba(13,17,24,0.95) 100%),
    url(/img/settings-bg.png) no-repeat right top / cover;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
#page-settings > * {
  position: relative;
  z-index: 1;
}
/* ===== 第一栏：用户信息 ===== */
.profile-card {
  padding: 16px 0 12px; margin-bottom: 0;
}
.profile-top {
  display: flex; align-items: center; gap: 14px;
}
.profile-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: #2a3340; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%238b939a'/%3E%3Cpath d='M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8' fill='%238b939a'/%3E%3C/svg%3E");
  background-size: 30px; background-repeat: no-repeat; background-position: center;
}
.profile-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.profile-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.profile-rank-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-secondary);
}
.profile-rank-icon-sm { width: 16px; height: 16px; object-fit: contain; }

/* ===== 第二栏：统计数字 ===== */
.profile-stats {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.profile-stat {
  flex: 1; text-align: center;
  padding: 14px 6px;
}
.profile-stat-val { font-size: 22px; font-weight: 400; color: var(--text-primary); font-family: Rajdhani, sans-serif; }
.profile-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ===== 第三栏：贡献榜卡片 ===== */
.profile-contribution-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, rgba(56,79,120,0.65) 0%, rgba(56,79,120,0.95) 100%);
  border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px;
  cursor: pointer; transition: all 0.2s;
  position: relative; overflow: hidden;
}
.profile-contribution-card:active { opacity: 0.9; transform: scale(0.98); }
.profile-contribution-left { position: relative; z-index: 1; flex: 1; }
.profile-contribution-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.profile-contribution-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.profile-contribution-img {
  height: 56px; width: auto; object-fit: contain;
  position: relative; z-index: 1;
}

/* ===== 第四栏：功能入口 ===== */
.entry-card {
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  padding: 16px 0 12px; margin-bottom: 12px;
}
.entry-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 4px;
}
.entry-item {
  text-align: center; cursor: pointer;
  font-size: 12px; font-weight: 500;
  transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-secondary);
  padding: 10px 4px;
}
.entry-item:hover { transform: translateY(-1px); }
.entry-item:active { opacity: 0.8; }
.entry-icon {
  display: block; width: 30px; height: 30px;
  background: var(--red);
  mask-size: cover; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
/* 功能图标面性 SVG masks */
.entry-icon-vpcalc {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M781.952 203.776h-234.24v309.376c0 11.776 9.6 21.376 21.376 21.376h309.376V300.16c0-53.248-43.264-96.384-96.512-96.384zm0.512 183.04H644.736c-9.6 0-18.176-7.168-18.688-16.768-0.512-10.24 7.552-18.688 17.792-18.688h137.728c9.6 0 18.176 7.168 18.688 16.768 0.384 10.24-7.68 18.688-17.792 18.688zM272.256 203.776a96.64 96.64 0 00-96.64 96.64v233.984c0 0.128 0.128 0.128 0.128 0.128h309.248c11.776 0 21.376-9.6 21.376-21.376V203.904c0-0.128-0.128-0.128-0.128-0.128H272.256zm142.976 189.056h-50.304l-0.128 0.128v50.432c0 8.832-5.888 17.024-14.592 18.432-11.264 1.92-20.992-6.656-20.992-17.536V392.96c0-0.128-0.128-0.128-0.128-0.128h-50.944c-7.808 0-15.232-4.736-17.536-12.16-3.712-12.16 5.248-23.424 16.896-23.424h51.456l0.128-0.128v-50.304c0-9.728 7.296-18.432 16.896-18.944 10.112-0.384 18.56 7.68 18.56 17.792v51.456c0 0.128 0.128 0.128 0.128 0.128h51.456c10.112 0 18.176 8.448 17.792 18.56-0.256 9.728-9.088 17.024-18.688 17.024zM547.712 595.84v309.376H782.08c53.248 0 96.384-43.136 96.384-96.384V574.336H569.088c-11.904 0-21.376 9.6-21.376 21.504zm177.152 198.912c0 10.112-8.192 18.176-18.176 18.176h-1.28c-10.112 0-18.176-8.192-18.176-18.176v-1.28c0-10.112 8.192-18.176 18.176-18.176h1.28c10.112 0 18.176 8.192 18.176 18.176v1.28zm-37.76-121.856c0-10.112 8.192-18.176 18.176-18.176h1.28c10.112 0 18.176 8.192 18.176 18.176v1.28c0 10.112-8.192 18.176-18.176 18.176h-1.28c-10.112 0-18.176-8.192-18.176-18.176v-1.28zm-49.28 43.136h137.728c9.6 0 18.176 7.168 18.688 16.768 0.512 10.24-7.552 18.688-17.792 18.688H638.72c-9.6 0-18.176-7.168-18.688-16.768a17.792 17.792 0 0117.792-18.688zM175.744 574.336v234.368c0 53.248 43.136 96.384 96.384 96.384h234.368V595.84c0-11.776-9.6-21.376-21.376-21.376H175.744zm232.832 195.968c7.168 7.168 6.912 18.944-0.64 25.728-7.168 6.4-18.304 5.376-25.088-1.408l-35.84-35.84-35.84 35.84c-6.784 6.784-17.92 7.808-25.088 1.408-7.68-6.912-7.808-18.56-0.64-25.728l36.48-36.48-35.968-35.968c-6.016-6.016-7.552-15.744-2.688-22.912 6.528-9.6 19.584-10.496 27.392-2.688l36.48 36.48 35.84-35.84c6.784-6.784 17.92-7.808 25.088-1.408 7.68 6.912 7.808 18.56 0.64 25.728l-36.48 36.48 36.352 36.608z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M781.952 203.776h-234.24v309.376c0 11.776 9.6 21.376 21.376 21.376h309.376V300.16c0-53.248-43.264-96.384-96.512-96.384zm0.512 183.04H644.736c-9.6 0-18.176-7.168-18.688-16.768-0.512-10.24 7.552-18.688 17.792-18.688h137.728c9.6 0 18.176 7.168 18.688 16.768 0.384 10.24-7.68 18.688-17.792 18.688zM272.256 203.776a96.64 96.64 0 00-96.64 96.64v233.984c0 0.128 0.128 0.128 0.128 0.128h309.248c11.776 0 21.376-9.6 21.376-21.376V203.904c0-0.128-0.128-0.128-0.128-0.128H272.256zm142.976 189.056h-50.304l-0.128 0.128v50.432c0 8.832-5.888 17.024-14.592 18.432-11.264 1.92-20.992-6.656-20.992-17.536V392.96c0-0.128-0.128-0.128-0.128-0.128h-50.944c-7.808 0-15.232-4.736-17.536-12.16-3.712-12.16 5.248-23.424 16.896-23.424h51.456l0.128-0.128v-50.304c0-9.728 7.296-18.432 16.896-18.944 10.112-0.384 18.56 7.68 18.56 17.792v51.456c0 0.128 0.128 0.128 0.128 0.128h51.456c10.112 0 18.176 8.448 17.792 18.56-0.256 9.728-9.088 17.024-18.688 17.024zM547.712 595.84v309.376H782.08c53.248 0 96.384-43.136 96.384-96.384V574.336H569.088c-11.904 0-21.376 9.6-21.376 21.504zm177.152 198.912c0 10.112-8.192 18.176-18.176 18.176h-1.28c-10.112 0-18.176-8.192-18.176-18.176v-1.28c0-10.112 8.192-18.176 18.176-18.176h1.28c10.112 0 18.176 8.192 18.176 18.176v1.28zm-37.76-121.856c0-10.112 8.192-18.176 18.176-18.176h1.28c10.112 0 18.176 8.192 18.176 18.176v1.28c0 10.112-8.192 18.176-18.176 18.176h-1.28c-10.112 0-18.176-8.192-18.176-18.176v-1.28zm-49.28 43.136h137.728c9.6 0 18.176 7.168 18.688 16.768 0.512 10.24-7.552 18.688-17.792 18.688H638.72c-9.6 0-18.176-7.168-18.688-16.768a17.792 17.792 0 0117.792-18.688zM175.744 574.336v234.368c0 53.248 43.136 96.384 96.384 96.384h234.368V595.84c0-11.776-9.6-21.376-21.376-21.376H175.744zm232.832 195.968c7.168 7.168 6.912 18.944-0.64 25.728-7.168 6.4-18.304 5.376-25.088-1.408l-35.84-35.84-35.84 35.84c-6.784 6.784-17.92 7.808-25.088 1.408-7.68-6.912-7.808-18.56-0.64-25.728l36.48-36.48-35.968-35.968c-6.016-6.016-7.552-15.744-2.688-22.912 6.528-9.6 19.584-10.496 27.392-2.688l36.48 36.48 35.84-35.84c6.784-6.784 17.92-7.808 25.088-1.408 7.68 6.912 7.808 18.56 0.64 25.728l-36.48 36.48 36.352 36.608z'/%3E%3C/svg%3E");
  transform: scale(1.235);
}
.entry-icon-roulette {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M538.5 381.13l-26-126.76-24.08 126.37c-26.2 4.72-51.44 17.24-71.67 37.47-52.88 52.88-52.88 138.61 0 191.49 52.88 52.88 138.61 52.88 191.49 0 52.88-52.88 52.88-138.61 0-191.49-19.84-19.74-44.21-32.07-69.74-37.08z'/%3E%3Cpath d='M512.5 20.88c-272.41 0-493.18 220.77-493.18 493.18 0 272.4 220.77 493.17 493.18 493.17 272.4 0 493.17-220.77 493.17-493.17 0-272.41-220.77-493.18-493.17-493.18zm305.15 798.33L625.68 627.14c-20.62 20.52-45.47 34.39-71.67 41.42l70.32 262.48c-36.22 9.73-73.59 14.54-111.74 14.54-38.14 0-75.52-4.91-111.74-14.54l70.32-262.48c-26.2-6.94-51.05-20.81-71.66-41.42L207.34 819.21c-39.69-39.69-70.8-85.82-92.47-137.16-7.8-18.4-14.25-37.18-19.36-56.26l262.38-70.31c-7.22-27.16-7.22-55.77 0-82.84L95.51 402.32c5.1-19.07 11.56-37.86 19.36-56.26 21.77-51.34 52.88-97.57 92.47-137.16l191.98 191.98c20.61-20.52 45.46-34.39 71.66-41.42L400.76 97.07c36.22-9.63 73.59-14.55 111.74-14.55 38.14 0 75.52 4.91 111.73 14.55l-70.31 262.38c26.2 7.03 51.05 20.81 71.66 41.42L817.55 208.8c39.69 39.69 70.8 85.83 92.47 137.17a426.21 426.21 0 0119.36 56.25L666.9 472.54c7.22 27.07 7.22 55.67 0 82.84l262.48 70.31a425.71 425.71 0 01-19.36 56.25c-21.57 51.45-52.78 97.58-92.37 137.27z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M538.5 381.13l-26-126.76-24.08 126.37c-26.2 4.72-51.44 17.24-71.67 37.47-52.88 52.88-52.88 138.61 0 191.49 52.88 52.88 138.61 52.88 191.49 0 52.88-52.88 52.88-138.61 0-191.49-19.84-19.74-44.21-32.07-69.74-37.08z'/%3E%3Cpath d='M512.5 20.88c-272.41 0-493.18 220.77-493.18 493.18 0 272.4 220.77 493.17 493.18 493.17 272.4 0 493.17-220.77 493.17-493.17 0-272.41-220.77-493.18-493.17-493.18zm305.15 798.33L625.68 627.14c-20.62 20.52-45.47 34.39-71.67 41.42l70.32 262.48c-36.22 9.73-73.59 14.54-111.74 14.54-38.14 0-75.52-4.91-111.74-14.54l70.32-262.48c-26.2-6.94-51.05-20.81-71.66-41.42L207.34 819.21c-39.69-39.69-70.8-85.82-92.47-137.16-7.8-18.4-14.25-37.18-19.36-56.26l262.38-70.31c-7.22-27.16-7.22-55.77 0-82.84L95.51 402.32c5.1-19.07 11.56-37.86 19.36-56.26 21.77-51.34 52.88-97.57 92.47-137.16l191.98 191.98c20.61-20.52 45.46-34.39 71.66-41.42L400.76 97.07c36.22-9.63 73.59-14.55 111.74-14.55 38.14 0 75.52 4.91 111.73 14.55l-70.31 262.38c26.2 7.03 51.05 20.81 71.66 41.42L817.55 208.8c39.69 39.69 70.8 85.83 92.47 137.17a426.21 426.21 0 0119.36 56.25L666.9 472.54c7.22 27.07 7.22 55.67 0 82.84l262.48 70.31a425.71 425.71 0 01-19.36 56.25c-21.57 51.45-52.78 97.58-92.37 137.27z'/%3E%3C/svg%3E");
}
.entry-icon-agent {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M266.162538 447.060294l175.739368-58.267506-20.496452-256.377025L145.137502 264.705851S161.955103 467.602446 161.955103 608.141384L120.642299 646.472263l47.74508 187.232918 236.840273 190.283394 3.644575-333.472933-142.709689-78.512607V447.060294zM862.079172 608.141384c0-140.527514 16.817602-343.435534 16.817601-343.435533L602.583121 132.392913l-20.496452 256.377025 175.739368 58.267506v164.965591l-142.663989 78.512607 3.644575 333.472933 236.840273-190.283394 47.74508-187.232918zM511.994287 0l-81.083232 72.868657 40.547329 598.955684 40.535903 37.999553 40.547329-37.999553 40.547329-598.955684L511.994287 0z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M266.162538 447.060294l175.739368-58.267506-20.496452-256.377025L145.137502 264.705851S161.955103 467.602446 161.955103 608.141384L120.642299 646.472263l47.74508 187.232918 236.840273 190.283394 3.644575-333.472933-142.709689-78.512607V447.060294zM862.079172 608.141384c0-140.527514 16.817602-343.435534 16.817601-343.435533L602.583121 132.392913l-20.496452 256.377025 175.739368 58.267506v164.965591l-142.663989 78.512607 3.644575 333.472933 236.840273-190.283394 47.74508-187.232918zM511.994287 0l-81.083232 72.868657 40.547329 598.955684 40.535903 37.999553 40.547329-37.999553 40.547329-598.955684L511.994287 0z'/%3E%3C/svg%3E");
}
.entry-icon-crosshair {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M912 478.6v66.7c0 9-3.3 16.9-9.9 23.4-6.6 6.6-14.5 9.9-23.4 9.9h-74.5c-12.8 55.9-39.7 104.3-80.5 145-40.9 40.9-89.2 67.6-145 80.5v74.5c0 9-3.3 16.9-9.9 23.4s-14.5 9.9-23.4 9.9h-66.7c-9 0-16.9-3.3-23.4-9.9s-9.9-14.5-9.9-23.4v-74.5c-55.9-12.8-104.3-39.7-145-80.5-40.9-40.8-67.6-89.2-80.5-145h-74.5c-9 0-16.9-3.3-23.4-9.9-6.6-6.6-9.9-14.4-9.9-23.4v-66.7c0-9 3.3-16.9 9.9-23.4 6.6-6.6 14.4-9.9 23.4-9.9h74.5c12.8-55.9 39.7-104.3 80.5-145 40.8-40.8 89.2-67.6 145-80.5v-74.5c0-9 3.3-16.9 9.9-23.4 6.6-6.6 14.4-9.9 23.4-9.9h66.7c9 0 16.9 3.3 23.4 9.9 6.6 6.6 9.9 14.5 9.9 23.4v74.5c55.9 12.8 104.3 39.7 145 80.5 40.8 40.9 67.6 89.2 80.5 145h74.5c9 0 16.9 3.3 23.4 9.9 6.5 6.6 9.9 14.5 9.9 23.4zM735.4 578.7h-56.7c-9 0-16.9-3.3-23.4-9.9-6.6-6.6-9.9-14.4-9.9-23.4v-66.7c0-9 3.3-16.9 9.9-23.4s14.4-9.9 23.4-9.9h56.7c-11.1-37.5-30.7-70.2-58.6-98.2-27.9-27.9-60.7-47.4-98.2-58.6v56.7c0 9-3.3 16.9-9.9 23.4s-14.5 9.9-23.4 9.9h-66.7c-9 0-16.9-3.3-23.4-9.9s-9.9-14.4-9.9-23.4v-56.7c-37.5 11.1-70.2 30.7-98.2 58.6-27.9 27.9-47.4 60.7-58.6 98.2h56.7c9 0 16.9 3.3 23.4 9.9s9.9 14.5 9.9 23.4v66.7c0 9-3.3 16.9-9.9 23.4-6.6 6.6-14.5 9.9-23.4 9.9h-56.9c11.1 37.5 30.7 70.2 58.6 98.2 27.9 27.9 60.7 47.4 98.2 58.6v-56.7c0-9 3.3-16.9 9.9-23.4 6.6-6.6 14.4-9.9 23.4-9.9h66.7c9 0 16.9 3.3 23.4 9.9s9.9 14.5 9.9 23.4v56.7c37.5-11.1 70.2-30.7 98.2-58.6 28.1-28 47.6-60.8 58.8-98.2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M912 478.6v66.7c0 9-3.3 16.9-9.9 23.4-6.6 6.6-14.5 9.9-23.4 9.9h-74.5c-12.8 55.9-39.7 104.3-80.5 145-40.9 40.9-89.2 67.6-145 80.5v74.5c0 9-3.3 16.9-9.9 23.4s-14.5 9.9-23.4 9.9h-66.7c-9 0-16.9-3.3-23.4-9.9s-9.9-14.5-9.9-23.4v-74.5c-55.9-12.8-104.3-39.7-145-80.5-40.9-40.8-67.6-89.2-80.5-145h-74.5c-9 0-16.9-3.3-23.4-9.9-6.6-6.6-9.9-14.4-9.9-23.4v-66.7c0-9 3.3-16.9 9.9-23.4 6.6-6.6 14.4-9.9 23.4-9.9h74.5c12.8-55.9 39.7-104.3 80.5-145 40.8-40.8 89.2-67.6 145-80.5v-74.5c0-9 3.3-16.9 9.9-23.4 6.6-6.6 14.4-9.9 23.4-9.9h66.7c9 0 16.9 3.3 23.4 9.9 6.6 6.6 9.9 14.5 9.9 23.4v74.5c55.9 12.8 104.3 39.7 145 80.5 40.8 40.9 67.6 89.2 80.5 145h74.5c9 0 16.9 3.3 23.4 9.9 6.5 6.6 9.9 14.5 9.9 23.4zM735.4 578.7h-56.7c-9 0-16.9-3.3-23.4-9.9-6.6-6.6-9.9-14.4-9.9-23.4v-66.7c0-9 3.3-16.9 9.9-23.4s14.4-9.9 23.4-9.9h56.7c-11.1-37.5-30.7-70.2-58.6-98.2-27.9-27.9-60.7-47.4-98.2-58.6v56.7c0 9-3.3 16.9-9.9 23.4s-14.5 9.9-23.4 9.9h-66.7c-9 0-16.9-3.3-23.4-9.9s-9.9-14.4-9.9-23.4v-56.7c-37.5 11.1-70.2 30.7-98.2 58.6-27.9 27.9-47.4 60.7-58.6 98.2h56.7c9 0 16.9 3.3 23.4 9.9s9.9 14.5 9.9 23.4v66.7c0 9-3.3 16.9-9.9 23.4-6.6 6.6-14.5 9.9-23.4 9.9h-56.9c11.1 37.5 30.7 70.2 58.6 98.2 27.9 27.9 60.7 47.4 98.2 58.6v-56.7c0-9 3.3-16.9 9.9-23.4 6.6-6.6 14.4-9.9 23.4-9.9h66.7c9 0 16.9 3.3 23.4 9.9s9.9 14.5 9.9 23.4v56.7c37.5-11.1 70.2-30.7 98.2-58.6 28.1-28 47.6-60.8 58.8-98.2z'/%3E%3C/svg%3E");
  transform: scale(1.3);
}
.entry-icon-simulator {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M856.576 0H167.424C123.392 0 87.04 38.912 87.04 86.528V936.96c0 47.616 36.352 86.528 80.384 86.528h689.152c44.032 0 80.384-38.912 80.384-86.528V86.528C936.96 38.912 900.608 0 856.576 0zm-184.32 619.008c-27.648 29.184-57.856 34.816-66.56 35.84-27.648 3.584-57.856-8.704-81.408-25.6 9.216 27.648 25.088 60.928 53.248 89.6 8.192 8.192 1.024 22.528-10.24 22.528H456.704c-10.752 0-17.92-14.336-10.24-22.528 26.624-28.672 42.496-60.928 52.224-88.064-19.456 14.336-44.032 24.576-68.096 24.576-3.072 0-6.656 0-9.728-0.512-8.704-1.024-39.424-6.656-67.584-35.328-18.432-18.944-40.96-54.272-40.96-113.152 0-43.52 23.04-92.16 68.608-145.408 35.328-40.96 76.8-75.264 102.912-91.136 17.92-11.264 40.448-11.264 58.368 0 24.576 15.36 65.536 48.128 101.888 89.6 45.056 52.224 68.096 101.376 68.096 146.944-0.512 58.368-22.016 93.696-39.936 112.64z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M856.576 0H167.424C123.392 0 87.04 38.912 87.04 86.528V936.96c0 47.616 36.352 86.528 80.384 86.528h689.152c44.032 0 80.384-38.912 80.384-86.528V86.528C936.96 38.912 900.608 0 856.576 0zm-184.32 619.008c-27.648 29.184-57.856 34.816-66.56 35.84-27.648 3.584-57.856-8.704-81.408-25.6 9.216 27.648 25.088 60.928 53.248 89.6 8.192 8.192 1.024 22.528-10.24 22.528H456.704c-10.752 0-17.92-14.336-10.24-22.528 26.624-28.672 42.496-60.928 52.224-88.064-19.456 14.336-44.032 24.576-68.096 24.576-3.072 0-6.656 0-9.728-0.512-8.704-1.024-39.424-6.656-67.584-35.328-18.432-18.944-40.96-54.272-40.96-113.152 0-43.52 23.04-92.16 68.608-145.408 35.328-40.96 76.8-75.264 102.912-91.136 17.92-11.264 40.448-11.264 58.368 0 24.576 15.36 65.536 48.128 101.888 89.6 45.056 52.224 68.096 101.376 68.096 146.944-0.512 58.368-22.016 93.696-39.936 112.64z'/%3E%3C/svg%3E");
  transform: scale(0.9);
}
.entry-icon-skinspk {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1028 1024'%3E%3Cpath d='M458.565818 300.730182H85.899636L4.398545 764.951273h158.068364l32.930909-147.991273h277.597091l46.242909-263.540364-60.672-52.689454zm-114.013091 231.773091h-141.265454l25.739636-146.618182h141.265455l-25.739637 146.618182zm448.930909-16.896l234.938182-204.078546h-159.418182l-189.486545 163.514182 31.069091-177.035636h-141.242182l-81.966545 466.920727h141.265454l36.165818-206.103273 150.853818 202.053273h131.84l37.143273-62.161454h-52.456727l-138.705455-183.109818z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1028 1024'%3E%3Cpath d='M458.565818 300.730182H85.899636L4.398545 764.951273h158.068364l32.930909-147.991273h277.597091l46.242909-263.540364-60.672-52.689454zm-114.013091 231.773091h-141.265454l25.739636-146.618182h141.265455l-25.739637 146.618182zm448.930909-16.896l234.938182-204.078546h-159.418182l-189.486545 163.514182 31.069091-177.035636h-141.242182l-81.966545 466.920727h141.265454l36.165818-206.103273 150.853818 202.053273h131.84l37.143273-62.161454h-52.456727l-138.705455-183.109818z'/%3E%3C/svg%3E");
}

/* ===== 第五栏：其他服务 ===== */
.profile-other-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.profile-other-card:active { opacity: 0.9; }
.profile-other-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--text-muted);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
.profile-other-info { flex: 1; }
.profile-other-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.profile-other-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===== Highlight bar ===== */
.highlight-bar {
  background: rgba(240,178,50,0.08); border: 1px solid rgba(240,178,50,0.3);
  border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 12px; font-size: 11px; text-align: center;
  color: var(--orange);
}
.badge-tag {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}
.badge-god { background: linear-gradient(135deg, #f0b232, #ff6b35); color: #1a1a1a; box-shadow: 0 0 12px rgba(240,178,50,0.4); }
.badge-lucky { background: rgba(201,182,255,0.2); color: #c9b6ff; border: 1px solid rgba(201,182,255,0.3); }
.badge-nice { background: rgba(184,230,255,0.2); color: #b8e6ff; border: 1px solid rgba(184,230,255,0.3); }
.badge-finally { background: var(--bg-elevated); color: var(--text-muted); }

/* ===== Tab Bar ===== */
.tab-bar {
  position: fixed; bottom:0; left:50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-width);
  display: flex;
  background: linear-gradient(0deg, rgba(17,22,32,0.98) 0%, rgba(17,22,32,0.9) 100%);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 100;
}
.tab-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding: 4px 0; cursor: pointer;
  color: var(--text-muted); transition: all 0.2s;
}
.tab-item.active { color: var(--red); }
.tab-icon {
  width: 24px; height: 24px; margin-bottom: 3px;
  background: currentColor;
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
/* 排行榜图标 - 火焰 */
.tab-icon-leaderboard {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
}
.tab-item.active .tab-icon-leaderboard {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
}
/* 图鉴图标 */
.tab-icon-gallery {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.tab-item.active .tab-icon-gallery {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='black' x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect fill='black' x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect fill='black' x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect fill='black' x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='black' x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect fill='black' x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect fill='black' x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect fill='black' x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
/* 我的图标 */
.tab-icon-settings {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 22c0-4.418 3.582-8 8-8s8 3.582 8 8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 22c0-4.418 3.582-8 8-8s8 3.582 8 8'/%3E%3C/svg%3E");
}
.tab-item.active .tab-icon-settings {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='black' cx='12' cy='8' r='4'/%3E%3Cpath fill='black' d='M4 22c0-4.418 3.582-8 8-8s8 3.582 8 8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='black' cx='12' cy='8' r='4'/%3E%3Cpath fill='black' d='M4 22c0-4.418 3.582-8 8-8s8 3.582 8 8'/%3E%3C/svg%3E");
}
.tab-label { font-size: 11px; font-weight: 400; letter-spacing: 0.5px; }

/* ===== Toast ===== */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  padding: 12px 28px;
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 24px; font-size: 13px; font-weight: 600;
  z-index: 1000; opacity: 0; transition: all 0.3s;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(4px); }
.toast.error {
  background: linear-gradient(135deg, rgba(255,70,85,0.9), rgba(224,58,72,0.9));
  border-color: var(--red); color: white;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== 炫彩预览区（已废弃，保留兼容） ===== */
.chroma-preview {
  position: relative;
  width: 100%;
  background: var(--bg-surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  margin-bottom: 12px;
}
.chroma-preview-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.2) 100%);
}
.chroma-play-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,70,85,0.9);
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255,70,85,0.4);
  transition: all 0.2s;
  z-index: 5;
}
.chroma-play-btn:hover {
  background: #ff4655;
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(255,70,85,0.6);
}

/* 炫彩横向滚动列表 */
.chroma-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.chroma-thumb {
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius);
  padding: 6px;
  border: 1px solid transparent;
  transition: all 0.2s;
  background: var(--bg-card);
}
.chroma-thumb:hover {
  border-color: rgba(255,255,255,0.2);
}
.chroma-thumb.active {
  border-color: var(--red);
  background: rgba(255,70,85,0.1);
  box-shadow: 0 0 12px rgba(255,70,85,0.3);
}
.chroma-thumb-img {
  width: 100%;
  height: 48px;
  object-fit: contain;
  margin-bottom: 4px;
  border-radius: 2px;
}
.chroma-thumb-name {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 详情视频区（独立section） ===== */
.detail-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.detail-play-btn {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 5;
}
.detail-play-btn:hover {
  background: rgba(255,70,85,0.85);
  border-color: var(--red);
  transform: scale(1.1);
}
.detail-video-player {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  border-radius: 0;
}
.detail-video-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--bg-card);
}
/* 等级Tab在视频区下面，不需要滚动条时自然铺满 */
#levelVideoTabs {
  padding: 8px 8px;
  margin: 0;
  background: var(--bg-card);
}

/* ===== 等级特效区 ===== */
.level-scroll {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.level-card {
  flex: 1 1 0;
  min-width: 60px;
  max-width: 90px;
  min-height: 72px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.level-card:hover {
  border-color: var(--red);
  box-shadow: 0 0 16px rgba(255,70,85,0.2);
  transform: translateY(-2px);
}
.level-card-rank {
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
  font-family: 'Rajdhani', monospace;
}
.level-card-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.2;
}
.level-card-play {
  font-size: 12px;
  color: var(--red);
  margin-top: 2px;
}
.level-card-novideo {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* 等级Tab标签（Lv.1 Lv.2 ...） */
.level-tag {
  padding: 4px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Rajdhani', monospace;
  white-space: nowrap;
}
.level-tag:hover {
  color: white;
  border-color: rgba(255,255,255,0.3);
}
.level-tag.active {
  color: white;
  background: rgba(255,70,85,0.15);
  border-color: var(--red);
}
/* 等级视频Tab选中态（兼容旧 .level-card） */
#levelVideoTabs .level-card.active {
  border-color: var(--red);
  background: rgba(255,70,85,0.1);
  box-shadow: 0 0 12px rgba(255,70,85,0.3);
}
/* 排名区域 */
.ranking-loading {
  font-size: 13px;
  color: var(--text-muted);
}
.ranking-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 0;
}

/* ===== 排名卡片 ===== */
.ranking-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  display: flex;
  align-items: stretch;
  gap: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.ranking-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,70,85,0.08);
}

/* 左侧勋章 */
.ranking-card-badge {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a3340, #1e2630);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.ranking-card:hover .ranking-card-badge {
  transform: scale(1.05);
}
.ranking-medal {
  font-size: 28px;
  line-height: 1;
}
.ranking-badge-num {
  font-family: 'Rajdhani', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

/* 右侧信息区 */
.ranking-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 顶部行：排名文字 + Elo 徽章 */
.ranking-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ranking-rank-text {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.ranking-elo-badge {
  font-family: 'Rajdhani', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  background: rgba(255,215,0,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,215,0,0.15);
}

/* 进度条 */
.ranking-progress {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.ranking-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), #ff7043, #ffd700);
  border-radius: 2px;
  transition: width 0.6s ease;
  position: relative;
}
.ranking-progress-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
}
.ranking-progress-label {
  font-size: 12px;
  color: var(--text-muted);
}
.ranking-progress-label strong {
  color: var(--text-primary);
  font-family: 'Rajdhani', monospace;
  font-size: 14px;
}

/* 统计行 */
.ranking-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.ranking-stat {
  color: var(--text-muted);
}
.ranking-stat strong {
  color: var(--text-primary);
  font-family: 'Rajdhani', monospace;
  font-size: 13px;
}
.ranking-stat.win-rate strong { color: #4fc3f7; }
.ranking-stat.wins { color: #81c784; }
.ranking-stat.losses { color: #ef5350; }

/* 底部查看链接 */
.ranking-card-footer {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 2px;
  transition: color 0.2s;
}
.ranking-card:hover .ranking-card-footer {
  color: var(--accent);
}
.ranking-arrow {
  font-size: 16px;
  transition: transform 0.2s;
  display: inline-block;
}
.ranking-card:hover .ranking-arrow {
  transform: translateX(3px);
}

/* 等级详情列表 */
.level-list-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.level-item-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.level-item-rank {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  font-family: 'Rajdhani', monospace;
  min-width: 36px;
}
.level-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== 视频弹窗 ===== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}
.video-container {
  position: relative;
  width: 95%;
  max-width: 500px;
  z-index: 1;
  animation: modalIn 0.3s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.video-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 2;
}
.video-close:hover { opacity: 1; }
.video-player {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  background: #000;
  display: block;
  outline: none;
}

/* ===== 皮肤轮盘 ===== */
.roulette-controls {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 16px; border: 1px solid var(--border-subtle); margin-bottom: 16px;
}
.roulette-select-group { margin-bottom: 12px; }
.roulette-select-group label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
.roulette-select {
  width: 100%; padding: 10px 14px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  color: var(--text-primary); font-size: 14px; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b939a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.roulette-select:focus { border-color: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.roulette-tier-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.roulette-weapon-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.roulette-weapon-chip {
  padding: 5px 4px; border-radius: var(--radius); font-size: 12px; font-weight: 600; text-align: center;
  cursor: pointer; background: var(--bg-surface); color: var(--text-muted);
  border: 1px solid var(--border-subtle); transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.roulette-weapon-chip:hover { border-color: rgba(255,255,255,0.2); color: var(--text-secondary); }
.roulette-weapon-chip.active {
  background: linear-gradient(135deg, rgba(255,70,85,0.2), rgba(255,70,85,0.1));
  color: var(--red); border-color: var(--red); box-shadow: 0 0 8px rgba(255,70,85,0.2);
}
.roulette-tier-chip {
  padding: 7px 4px; border-radius: var(--radius); font-size: 11px; font-weight: 600;
  cursor: pointer; background: var(--bg-surface); color: var(--text-muted);
  border: 1px solid var(--border-subtle); transition: all 0.2s;
  text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px;
}
.roulette-tier-icon { width: 14px; height: 14px; object-fit: contain; }
.roulette-tier-chip:hover { border-color: rgba(255,255,255,0.2); color: var(--text-secondary); }
.roulette-tier-chip.active {
  background: linear-gradient(135deg, rgba(255,70,85,0.2), rgba(255,70,85,0.1));
  color: var(--red); border-color: var(--red); box-shadow: 0 0 8px rgba(255,70,85,0.2);
}
.roulette-spin-btn { margin-top: 8px; }
.roulette-result { margin-top: 16px; }
/* ===== 皮肤轮盘卡片（对齐图鉴卡片风格） ===== */
.roulette-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: none; transition: transform 0.2s ease; backdrop-filter: none;
}
.roulette-card:hover { transform: translateY(-2px); }
.roulette-card:active { transform: scale(0.97); }
.roulette-card.animate-spin-result { animation: rouletteSpin 0.6s ease-out; }

/* 品质颜色变量 */
.roulette-card.tier-Ultra { --tier-rgb: 240,178,50; }
.roulette-card.tier-Premium { --tier-rgb: 209,84,201; }
.roulette-card.tier-Deluxe { --tier-rgb: 90,158,111; }
.roulette-card.tier-Select { --tier-rgb: 61,174,224; }
.roulette-card.tier-Exclusive { --tier-rgb: 239,139,59; }

/* 图片容器 */
.roulette-card-image-wrap {
  background: #1a1f28;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* 品质渐变背景 */
.roulette-card-image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--tier-rgb), 0.18) 0%, transparent 100%);
  z-index: 0;
}
/* SVG 水印 */
.roulette-card-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MjMiIGhlaWdodD0iNDMwLjUiIHZpZXdCb3g9IjAgMCA1MjMgNDMwLjUiPjxwYXRoIGQ9Ik0yOTQuNjQ3NDksMjgxLjIzOTMyQzI5My41ODYxNSwyODIuNTQ2NDUsMjk0LjUxNjQyLDI4NC41LDI5Ni4yMDAxNiwyODQuNUw0NjMuMDI0NjYsMjg0LjVDNDYzLjY0MDIzLDI4NC41LDQ2NC4yMjE1MywyODQuMjE2NTIsNDY0LjYwMDU2LDI4My43MzE1MUw1MjIuNTc1ODcsMjA5LjU0MjcxQzUyMi44NTA3MSwyMDkuMTkxMDQsNTIzLDIwOC43NTc1NCw1MjMsMjA4LjMxMTIyTDUyMyw1LjYzNjExNTFDNTIzLDMuNzUyODA3OSw1MjAuNjM0NDYsMi45MTMzODk5LDUxOS40NDczMyw0LjM3NTQ0MzlMMjk0LjY0NzQ5LDI4MS4yMzkzMlpNMCw1LjY3NDU5MzlMMCwyMDguMzAzNzFDMCwyMDguNzU0NjQsMC4xNTIzNzk2NiwyMDkuMTkyMzIsMC40MzI0MTA4MSwyMDkuNTQ1NzVMMTc0Ljg5OTQ0LDQyOS43NDIwM0MxNzUuMjc4ODEsNDMwLjIyMDgzLDE3NS44NTYxOSw0MzAuNSwxNzYuNDY3MDQsNDMwLjVMMzQyLjMyMjg4LDQzMC41QzM0NC4wMDI2Niw0MzAuNSwzNDQuOTM0MTQsNDI4LjU1NDUzLDM0My44ODA5Miw0MjcuMjQ1OTdMMy41NTgwMTc3LDQuNDIwNTY3NUMyLjM3NDQ4MjYsMi45NTAxMjcxLDAsMy43ODcwMTIzLDAsNS42NzQ1OTM5WiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1vcGFjaXR5PSIxIi8+PC9zdmc+") center/40% no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
/* 底部品质色条 */
.roulette-card-image-wrap::before {
  z-index: 1;
}
.roulette-tier-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--tier-rgb), 0.4) 0%,
    rgba(var(--tier-rgb), 1) 20%,
    rgba(var(--tier-rgb), 1) 80%,
    rgba(var(--tier-rgb), 0.4) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.roulette-card-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* 右上角品质图标 */
.roulette-tier-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  z-index: 3;
}
.roulette-tier-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* 文字区域 */
.roulette-card-info {
  padding: 10px 12px 12px;
  text-align: center;
  background: var(--bg-card);
  border-radius: 0 0 var(--radius) var(--radius);
}
.roulette-card-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--text-primary);
}
.roulette-card-meta {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.roulette-card-meta::before {
  content: '';
  width: 12px; height: 12px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48cGF0aCBkPSJNMzYsMThDMzYsMjcuOTQxMTI2LDI3Ljk0MTEyNiwzNiwxOCwzNkM4LjA1ODg3NDEsMzYsMCwyNy45NDExMjYsMCwxOEMwLDguMDU4ODc0MSw4LjA1ODg3NDEsMCwxOCwwQzI3Ljk0MTEyNiwwLDM2LDguMDU4ODc0MSwzNiwxOFpNMzUsMThDMzUsOC42MTExNTg0LDI3LjM4ODg0MiwxLDE4LDFDOC42MTExNTg0LDEsMSw4LjYxMTE1ODQsMSwxOEMxLDI3LjM4ODg0Miw4LjYxMTE1ODQsMzUsMTgsMzVDMjcuMzg4ODQyLDM1LDM1LDI3LjM4ODg0MiwzNSwxOFpNNi45MDQxMTM4LDE4LjcyMTQyMkw2LjkwNDExMzgsOS44NjMwMzcxTDIxLjkzMzQyNiwyOC4xMDk2MTJMMTQuNTE2MzYyLDI4LjEwOTYxMkw2LjkwNDExMzgsMTguNzIxNDIyWk0yNy4wMjk5NDcsMjEuOTIxNDU5TDE5LjU2OTUwOCwyMS45MjE0NTlMMjkuNTg5MDQ2LDkuODYzMDM3MUwyOS41ODkwNDYsMTguNzIxNDIyTDI3LjAyOTk0NywyMS45MjE0NTlaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGZpbGwtb3BhY2l0eT0iMSIvPjwvc3ZnPg==") center/contain no-repeat;
}

@keyframes rouletteSpin {
  0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
  50% { transform: scale(1.05) rotateY(-10deg); opacity: 0.8; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

/* ===== 皮肤PK ===== */
/* ===== 个人贡献状态栏 ===== */
.rank-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(255,70,85,0.1), rgba(255,70,85,0.04));
  border: 1px solid rgba(255,70,85,0.2);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.rank-bar-left { display: flex; align-items: center; gap: 10px; }
.rank-bar-icon { font-size: 28px; line-height: 1; }
.rank-icon-img { width: 28px; height: 28px; object-fit: contain; }
.rank-bar-info { display: flex; flex-direction: column; gap: 2px; }
.rank-bar-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.rank-bar-sub { font-size: 11px; color: var(--text-muted); }
.rank-bar-right { text-align: right; min-width: 100px; }
.rank-bar-daily { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.rank-bar-progress {
  width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden;
}
.rank-bar-progress-fill {
  height: 100%; background: var(--red); border-radius: 2px; transition: width 0.5s ease;
}

/* 贡献飘字 */
.contribution-toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.85); color: #4cff4c; font-size: 14px; font-weight: 700;
  padding: 8px 18px; border-radius: var(--radius); z-index: 999;
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
}
.contribution-toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* 升级庆祝弹窗 */
.rank-up-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s;
}
.rank-up-popup {
  background: var(--bg-card); border: 1px solid rgba(255,70,85,0.3);
  border-radius: var(--radius); padding: 32px 28px; text-align: center;
  max-width: 320px; width: 85%;
  animation: rankUpPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes rankUpPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.rank-up-emoji { font-size: 56px; margin-bottom: 8px; }
.rank-up-badge {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 8px;
  margin-bottom: 12px;
}
.rank-up-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.rank-up-quote { font-size: 13px; color: var(--text-muted); font-style: italic; margin-bottom: 20px; }
.rank-up-btn { width: 100%; }

/* PK结果贡献总结 */
.rank-session-summary {
  background: rgba(255,255,255,0.04); border-radius: var(--radius);
  padding: 4px 12px; margin-top: 12px;
}
.rank-session-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-secondary); padding: 10px 0;
}
.rank-session-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.rank-session-gain { color: #4cff4c; font-weight: 700; }

/* ===== 个人贡献状态栏 END ===== */

.pk-header { margin-bottom: 14px; }
.pk-weapon-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.pk-weapon-label {
  font-size: 15px; font-weight: 700; color: var(--accent);
  font-family: 'Rajdhani', -apple-system, sans-serif; letter-spacing: 1px;
}
.pk-weapon-reroll {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 16px; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-sm); transition: all 0.2s;
}
.pk-weapon-reroll:hover { border-color: var(--red); color: var(--red); }

.pk-progress { margin-bottom: 14px; }
.pk-round-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--red);
  margin-bottom: 6px; font-family: 'Rajdhani', monospace; letter-spacing: 1px;
}
.pk-round-done { color: var(--accent); }
.pk-progress-bar {
  height: 4px; border-radius: 2px; background: var(--bg-elevated); overflow: hidden;
}
.pk-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  transition: width 0.3s ease;
}

.pk-empty { text-align: center; padding: 40px 20px; }
.pk-empty p { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; }
.pk-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; }

/* PK 卡片区域 */
.pk-cards {
  display: flex; align-items: stretch; gap: 8px;
}

/* ===== PK 皮肤卡片（图鉴风格） ===== */
.pk-card {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  background: #1a1f28;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}
/* 品质颜色变量 */
.pk-card.tier-Ultra { --tier-rgb: 240,178,50; }
.pk-card.tier-Premium { --tier-rgb: 209,84,201; }
.pk-card.tier-Deluxe { --tier-rgb: 90,158,111; }
.pk-card.tier-Select { --tier-rgb: 61,174,224; }
.pk-card.tier-Exclusive { --tier-rgb: 239,139,59; }

.pk-card:hover { transform: translateY(-2px); }
.pk-card:active { transform: scale(0.97); }

/* 图片区：品质渐变背景 + SVG纹理 */
.pk-card-img-wrap {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  background: linear-gradient(to top,
    rgba(var(--tier-rgb, 255,255,255), 0.14) 0%,
    transparent 100%
  );
}
.pk-card-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MjMiIGhlaWdodD0iNDMwLjUiIHZpZXdCb3g9IjAgMCA1MjMgNDMwLjUiPjxwYXRoIGQ9Ik0yOTQuNjQ3NDksMjgxLjIzOTMyQzI5My41ODYxNSwyODIuNTQ2NDUsMjk0LjUxNjQyLDI4NC41LDI5Ni4yMDAxNiwyODQuNUw0NjMuMDI0NjYsMjg0LjVDNDYzLjY0MDIzLDI4NC41LDQ2NC4yMjE1MywyODQuMjE2NTIsNDY0LjYwMDU2LDI4My43MzE1MUw1MjIuNTc1ODcsMjA5LjU0MjcxQzUyMi44NTA3MSwyMDkuMTkxMDQsNTIzLDIwOC43NTc1NCw1MjMsMjA4LjMxMTIyTDUyMyw1LjYzNjExNTFDNTIzLDMuNzUyODA3OSw1MjAuNjM0NDYsMi45MTMzODk5LDUxOS40NDczMyw0LjM3NTQ0MzlMMjk0LjY0NzQ5LDI4MS4yMzkzMlpNMCw1LjY3NDU5MzlMMCwyMDguMzAzNzFDMCwyMDguNzU0NjQsMC4xNTIzNzk2NiwyMDkuMTkyMzIsMC40MzI0MTA4MSwyMDkuNTQ1NzVMMTc0Ljg5OTQ0LDQyOS43NDIwM0MxNzUuMjc4ODEsNDMwLjIyMDgzLDE3NS44NTYxOSw0MzAuNSwxNzYuNDY3MDQsNDMwLjVMMzQyLjMyMjg4LDQzMC41QzM0NC4wMDI2Niw0MzAuNSwzNDQuOTM0MTQsNDI4LjU1NDUzLDM0My44ODA5Miw0MjcuMjQ1OTdMMy41NTgwMTc3LDQuNDIwNTY3NUMyLjM3NDQ4MjYsMi45NTAxMjcxLDAsMy43ODcwMTIzLDAsNS42NzQ1OTM5WiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1vcGFjaXR5PSIxIi8+PC9zdmc+") center/40% no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
/* 图片区底部品质色条 */
.pk-card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--tier-rgb), 0.4) 0%,
    rgba(var(--tier-rgb), 1) 20%,
    rgba(var(--tier-rgb), 1) 80%,
    rgba(var(--tier-rgb), 0.4) 100%
  );
  pointer-events: none;
  z-index: 2;
}
.pk-card-img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
/* 右上角品质图标 */
.pk-tier-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  z-index: 2;
}
.pk-tier-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* 文字区 */
.pk-card-text {
  padding: 8px 8px 10px;
  text-align: center;
}
.pk-card-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.pk-card-text .tag {
  margin-bottom: 6px;
  display: inline-block;
}
.pk-card-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}
.pk-badge-champion { background: rgba(240,178,50,0.2); color: var(--orange); border: 1px solid rgba(240,178,50,0.3); }
.pk-badge-new { background: rgba(61,174,224,0.2); color: var(--blue); border: 1px solid rgba(61,174,224,0.3); }
.pk-badge-vs { background: rgba(255,70,85,0.15); color: var(--red); border: 1px solid rgba(255,70,85,0.25); }

/* VS 分隔 */
.pk-vs {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 36px; font-size: 14px; font-weight: 900; color: var(--red);
  font-family: 'Rajdhani', monospace; letter-spacing: 1px;
  text-shadow: 0 0 12px var(--red-glow);
}

/* 冠军展示 */
.pk-champion {
  text-align: center; padding: 16px 14px;
  background: linear-gradient(180deg, rgba(240,178,50,0.08) 0%, transparent 100%);
  border-radius: var(--radius); border: 1px solid rgba(240,178,50,0.2);
  margin-bottom: 12px;
}
.pk-champion-crown { font-size: 18px; font-weight: 500; color: var(--orange); margin-bottom: 6px; letter-spacing: 2px; }
@keyframes crownBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.pk-champion-img {
  width: 100%; max-width: 280px; max-height: 100px; object-fit: contain;
  margin: 0 auto 8px; display: block;
}
.pk-champion-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pk-champion-tier-icon { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.pk-champion-meta { font-size: 12px; color: var(--text-primary); margin-bottom: 6px; }
.pk-champion-stats {
  font-size: 12px; color: var(--accent); font-weight: 600;
  font-family: 'Rajdhani', monospace; letter-spacing: 1px;
}

/* 被击败列表 */
.pk-defeated-title {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px; font-family: 'Rajdhani', -apple-system, sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
}
.pk-defeated-list { max-height: 240px; overflow-y: auto; }
.pk-defeated-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: 4px;
  border: 1px solid var(--border-subtle);
}
.pk-defeated-img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius); background: var(--bg-surface); }
.pk-defeated-name { flex: 1; font-size: 12px; font-weight: 600; }

/* ===== 特工选择器 ===== */
.agent-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }

/* 展开/收起筛选栏 */
.agent-filter-section { margin-bottom: 14px; }
.agent-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  cursor: pointer; transition: all 0.2s; user-select: none;
}
.agent-filter-bar:hover { border-color: rgba(255,255,255,0.2); }
.agent-filter-info { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.agent-filter-arrow { font-size: 11px; color: var(--text-muted); transition: transform 0.2s; }

/* 展开面板 - 特工头像列表 */
.agent-filter-panel {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px; margin-top: 8px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); max-height: 280px; overflow-y: auto;
}
.agent-filter-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 64px; padding: 8px 4px 6px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 2px solid var(--border-subtle);
  cursor: pointer; transition: all 0.15s; position: relative;
}
.agent-filter-chip:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
.agent-filter-chip.excluded {
  opacity: 0.4; border-color: transparent; background: var(--bg-surface);
}
.agent-chip-img-wrap {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.12);
}
.agent-filter-chip.excluded .agent-chip-img-wrap {
  border-color: transparent; filter: grayscale(0.6);
}
.agent-chip-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-chip-name { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.1; }
.agent-chip-x, .agent-chip-check {
  position: absolute; top: -2px; right: -2px; width: 16px; height: 16px;
  border-radius: 50%; font-size: 9px; display: flex; align-items: center;
  justify-content: center; color: white; line-height: 1;
}
.agent-chip-check { background: var(--green); }
.agent-chip-x { background: var(--red); opacity: 0.7; }

.agent-pick-btn { width: 100%; margin-bottom: 0; }

/* 随机结果 */
.agent-result-card {
  background: transparent; border-radius: 0;
  padding: 0; text-align: center; border: none;
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.agent-result-full {
  width: 100%; max-width: 440px; max-height: 65vh; margin: 0 auto 8px;
  display: block; border-radius: 0;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)); object-fit: contain;
}
/* 图片加载完成后淡入 */
.agent-img-loaded {
  animation: imgFadeIn 0.35s ease-out;
}
@keyframes imgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.agent-result-name {
  font-size: 32px; font-weight: 700; font-family: 'Rajdhani', -apple-system, sans-serif;
  text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px;
}
.agent-result-role {
  font-size: 16px; font-weight: 700; font-family: 'Rajdhani', -apple-system, sans-serif;
  text-transform: uppercase; letter-spacing: 2px;
}
.animate-pop { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ===== PK投票排行榜 ===== */
.pkvote-banner {
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(255,70,85,0.15), rgba(240,178,50,0.1));
  border: 1px solid rgba(255,70,85,0.25); border-radius: var(--radius);
  cursor: pointer; transition: all 0.2s;
}
.pkvote-banner:active { transform: scale(0.98); background: linear-gradient(135deg, rgba(255,70,85,0.2), rgba(240,178,50,0.15)); }
.pkvote-banner-left { font-size: 28px; }
.pkvote-banner-right { font-size: 16px; color: var(--text-muted); }
.pkvote-banner-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pkvote-banner-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
/* 排行榜总览页 banner */
.pkvote-banner-inner {
  display:flex; align-items:center; gap:12px;
  padding: 16px 18px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(255,70,85,0.3), rgba(240,178,50,0.2));
  border: 1px solid rgba(255,70,85,0.4); border-radius: var(--radius);
  box-shadow: 0 0 20px rgba(255,70,85,0.15);
  cursor: pointer; transition: all 0.25s ease;
}
.pkvote-banner-inner .pkvote-banner-left { font-size: 34px; }
.pkvote-banner-inner .pkvote-banner-title { font-size: 16px; }
.pkvote-banner-inner .pkvote-banner-sub { font-size: 12px; }
.pkvote-banner-inner:hover {
  box-shadow: 0 0 28px rgba(255,70,85,0.3);
  border-color: rgba(255,70,85,0.6);
}
.pkvote-banner-inner:active { transform: scale(0.98); }
/* 武器卡片网格 */
.pkv-weapon-grid { display: flex; flex-direction: column; gap: 10px; }

/* ===== 排行榜卡片标题 ===== */
.pkv-card-title {
  font-size: 15px; font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.pkv-card-small .pkv-card-title {
  padding: 0 10px;
}

/* ===== 前三名文字行 ===== */
.pkv-top3-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.pkv-top3-medal {
  flex-shrink: 0;
  font-size: 13px;
  width: 18px;
  text-align: center;
}
.pkv-top3-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pkv-top3-elo {
  flex-shrink: 0;
  font-family: 'Rajdhani', monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* 三大重点武器：独占一行大卡片 */
.pkv-card-featured {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
/* 背景套装图 - 用 ::before 承载，独立渐变透明 */
.pkv-card-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bundle-bg) right top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 50%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
  z-index: 0;
}
.pkv-card-featured > * { position: relative; z-index: 1; }
.pkv-card-featured::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 96px; height: 96px;
  background: var(--icon) center/contain no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}
.pkv-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  height: 44px;
}
.pkv-champion-badge {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface);
  border-radius: var(--radius);
  font-size: 18px;
  flex-shrink: 0;
}
.pkv-card-featured-info {
  flex: 1; min-width: 0;
}
.pkv-card-featured-name {
  font-size: 14px; font-weight: 400; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pkv-card-featured-meta {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
  font-family: 'Rajdhani', monospace;
}

/* 其他武器：两列网格 */
.pkv-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pkv-card-small {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  padding: 14px 0 12px;
  position: relative;
  overflow: hidden;
}
/* 小卡片背景套装图 */
.pkv-card-small::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bundle-bg) right top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0) 50%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
  z-index: 0;
}
.pkv-card-small > * { position: relative; z-index: 1; }
.pkv-card-small:hover { }
.pkv-card-small::after {
  content: '';
  position: absolute;
  top: -8px; right: 4px;
  width: 64px; height: 64px;
  background: var(--icon) center/contain no-repeat;
  opacity: 1;
  pointer-events: none;
}
.pkv-card-small .pkv-top3-item {
  padding: 2px 10px;
}

.pkv-card-featured .pkv-top3-item {
  font-size: 12px;
}
/* 旧样式保留兼容 */
.pkv-wcard {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: all 0.2s;
}
.pkv-wcard:hover { border-color: var(--red); transform: translateY(-2px); }
.pkv-wcard-img { width:100%; height:100px; object-fit:contain; background:var(--bg-surface); }
.pkv-wcard-info { padding: 8px 10px; }
.pkv-wcard-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pkv-wcard-top { font-size: 10px; color: var(--text-secondary); margin-top: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pkv-wcard-rating { font-size: 10px; color: var(--accent); font-weight: 700; margin-top: 2px; }
.pkvote-ranking { margin-top: 16px; }
.pkv-ranking-list .lb-card { cursor: pointer; transition: all 0.2s; }
.pkv-ranking-list .lb-card:hover { background: var(--bg-surface); }

/* ===== 领奖台 ===== */
.podium-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 36px 0 16px;
}
.podium-card {
  position: relative;
  width: 120px;
  border-radius: var(--radius);
  border: none;
  background: linear-gradient(180deg, rgba(40,45,55,0.8) 0%, rgba(25,30,38,0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: visible;
}
.podium-card.podium-placeholder { visibility: hidden; }
.podium-rank-1 {
  height: 190px;
  width: 130px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255,215,0,0.32) 0%, rgba(255,180,0,0) 100%);
}
.podium-rank-2 {
  height: 150px;
  background: linear-gradient(180deg, rgba(192,192,192,0.32) 0%, rgba(160,160,160,0) 100%);
}
.podium-rank-3 {
  height: 150px;
  background: linear-gradient(180deg, rgba(205,127,50,0.32) 0%, rgba(180,100,30,0) 100%);
}
.podium-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 126px;
  margin-top: -30px;
  margin-bottom: -30px;
  pointer-events: none;
}
.podium-rank-1 .podium-img-wrap {
  height: 132px;
  margin-top: -30px;
  margin-bottom: -30px;
}
.podium-img {
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.podium-card-body {
  margin-top: 0;
  padding: 4px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  width: 100%;
}
.podium-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
  position: relative;
  z-index: 3;
}
.podium-rank-num {
  font-size: 30px;
  font-weight: 400;
  font-style: normal;
  font-family: 'Anton', 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-text-stroke: 2px currentColor;
  transform: skewX(-4deg);
  display: inline-block;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: 1px;
}
.podium-rank-1 .podium-rank-num {
  font-size: 38px;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.podium-rank-2 .podium-rank-num {
  color: #c0c0c0;
  text-shadow: 0 0 8px rgba(192,192,192,0.3);
}
.podium-rank-3 .podium-rank-num {
  color: #cd7f32;
  text-shadow: 0 0 8px rgba(205,127,50,0.3);
}
.podium-rank-deco {
  display: inline-block;
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M256 1024h229.4784c62.976 0 121.344-33.1776 153.6-87.3472l27.9552-46.7968H445.6448c-56.6272 0-109.8752 26.7264-143.5648 72.192L256 1024z m493.2608-428.4416l-12.288 58.6752c-11.9808 56.832-49.4592 103.1168-99.4304 123.0848l-217.088 86.528 24.7808-79.2576c15.4624-49.152 50.2784-88.064 94.9248-105.7792l209.1008-83.2512zM766.1568 317.44l0.1024 60.3136c0.1024 58.2656-26.7264 112.5376-71.3728 144.1792L534.528 648.4992l7.8848-83.3536c4.9152-51.6096 30.72-97.9968 70.656-126.1568L766.0544 317.44zM711.8848 97.28l17.7152 38.912c16.9984 37.376 10.6496 81.408-16.9984 116.736l-95.6416 135.0656-17.7152-56.32c-11.0592-34.816-3.072-73.4208 21.504-104.8576L711.8848 97.28zM589.824 0l20.48 18.432c19.6608 17.8176 26.7264 46.3872 18.7392 76.0832l-24.576 110.592-24.8832-29.0816c-15.36-18.0224-20.1728-43.8272-13.0048-70.2464L589.824 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.podium-rank-deco:first-child {
  transform: scaleX(-1);
}
.podium-rank-1 .podium-rank-badge {
  padding-top: 14px;
}
.podium-rank-1 .podium-rank-deco { background: #ffd700; }
.podium-rank-2 .podium-rank-deco { background: #c0c0c0; }
.podium-rank-3 .podium-rank-deco { background: #cd7f32; }
.podium-name {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.podium-tier-icon {
  width: 14px; height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: -2px;
  margin-right: 4px;
}
.podium-list-tier-icon {
  width: 14px; height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: -2px;
  margin-right: 4px;
}
.podium-rank-1 .podium-name {
  font-size: 12px;
  font-weight: 500;
}
.podium-elo {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: 'Rajdhani', monospace;
}
.podium-elo span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-right: 4px;
}
.podium-rank-1 .podium-elo {
  color: var(--gold);
}
.podium-rank-1 .podium-elo span {
  color: rgba(240,178,50,0.7);
}

/* 4-N 列表 */
.podium-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.podium-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent) 1;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
}
.podium-list-rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 24px;
  text-align: center;
}
.podium-list-img {
  width: 90px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: auto;
}
.podium-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  margin-top: -2px;
}
.podium-list-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podium-list-tier-icon {
  width: 14px; height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.podium-list-elo {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: 'Rajdhani', monospace;
  flex-shrink: 0;
}

.pkranking-header {
  font-size: 26px; font-weight: 900; color: var(--red);
  font-family: 'Alimama ShuHeiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  text-align: center;
  padding: 20px 0 4px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* 排行榜页面弥散光晕背景 */
#page-pkranking {
  position: relative;
  overflow: hidden;
  margin: -16px -16px 0 -16px;
  padding: 16px 16px 0 16px;
}
#page-pkranking::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255,70,85,0.5) 0%, rgba(255,70,85,0.12) 30%, transparent 60%),
    radial-gradient(ellipse 110% 90% at 100% 0%, rgba(255,100,60,0.4) 0%, rgba(255,100,60,0.10) 30%, transparent 60%),
    radial-gradient(ellipse 25% 20% at 50% 25%, rgba(255,70,85,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 20% 15% at 70% 35%, rgba(255,130,50,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* 套装图单独一层，带渐变透明 */
#page-pkranking::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: var(--top-bundle-bg) right top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 60%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 0;
}
#page-pkranking > * { position: relative; z-index: 1; }
.pkranking-header::before,
.pkranking-header::after {
  content: '';
  display: inline-block;
  width: 28px; height: 28px;
  background: var(--red);
  flex-shrink: 0;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M256 1024h229.4784c62.976 0 121.344-33.1776 153.6-87.3472l27.9552-46.7968H445.6448c-56.6272 0-109.8752 26.7264-143.5648 72.192L256 1024z m493.2608-428.4416l-12.288 58.6752c-11.9808 56.832-49.4592 103.1168-99.4304 123.0848l-217.088 86.528 24.7808-79.2576c15.4624-49.152 50.2784-88.064 94.9248-105.7792l209.1008-83.2512zM766.1568 317.44l0.1024 60.3136c0.1024 58.2656-26.7264 112.5376-71.3728 144.1792L534.528 648.4992l7.8848-83.3536c4.9152-51.6096 30.72-97.9968 70.656-126.1568L766.0544 317.44zM711.8848 97.28l17.7152 38.912c16.9984 37.376 10.6496 81.408-16.9984 116.736l-95.6416 135.0656-17.7152-56.32c-11.0592-34.816-3.072-73.4208 21.504-104.8576L711.8848 97.28zM589.824 0l20.48 18.432c19.6608 17.8176 26.7264 46.3872 18.7392 76.0832l-24.576 110.592-24.8832-29.0816c-15.36-18.0224-20.1728-43.8272-13.0048-70.2464L589.824 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pkranking-header::before {
  transform: scaleX(-1);
}

/* ===== 贡献榜 ===== */
#page-peakranking {
  position: relative;
  overflow: hidden;
  margin: -16px -16px 0 -16px;
  padding: 16px 16px 0 16px;
}
#page-peakranking::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255,70,85,0.5) 0%, rgba(255,70,85,0.12) 30%, transparent 60%),
    radial-gradient(ellipse 110% 90% at 100% 0%, rgba(255,100,60,0.4) 0%, rgba(255,100,60,0.10) 30%, transparent 60%),
    radial-gradient(ellipse 25% 20% at 50% 25%, rgba(255,70,85,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 20% 15% at 70% 35%, rgba(255,130,50,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#page-peakranking > * { position: relative; z-index: 1; }
#page-peakranking .pkranking-header { padding: 20px 0 32px; }
.peak-ranking-desc {
  font-size: 12px; color: var(--text-muted); margin-bottom: 14px; margin-top: -8px;
}
.peak-ranking-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none;
  border-radius: 0; padding: 10px 12px; margin-bottom: 8px;
  transition: all 0.2s;
}
.peak-ranking-item:hover { background: rgba(255,255,255,0.03); }
/* 前三名金银铜 */
.peak-ranking-item.podium-gold {
  border-left: 1px solid rgba(240,178,50,0.6);
  background: linear-gradient(90deg, rgba(240,178,50,0.16) 0%, rgba(240,178,50,0) 40%);
}
.peak-ranking-item.podium-silver {
  border-left: 1px solid rgba(176,190,197,0.5);
  background: linear-gradient(90deg, rgba(176,190,197,0.16) 0%, rgba(176,190,197,0) 40%);
}
.peak-ranking-item.podium-bronze {
  border-left: 1px solid rgba(205,127,50,0.5);
  background: linear-gradient(90deg, rgba(205,127,50,0.16) 0%, rgba(205,127,50,0) 40%);
}
.peak-ranking-me {
}
.peak-ranking-rank {
  font-size: 12px; font-weight: 500; min-width: 28px; text-align: center;
  color: var(--text-secondary);
}
.peak-ranking-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.peak-ranking-info { flex: 1; }
.peak-ranking-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.peak-ranking-title { font-size: 11px; color: var(--text-muted); }
.peak-me-tag {
  font-size: 10px; background: var(--red); color: #fff; padding: 1px 6px;
  border-radius: 4px; margin-left: 4px;
}
.peak-ranking-contrib {
  font-size: 14px; font-weight: 600; color: var(--accent);
  font-family: Rajdhani, sans-serif;
}

/* 底部固定：我的排名 */
.peak-ranking-me-bar {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-width);
  background: rgba(17,22,32,0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  z-index: 99;
  padding: 0 16px;
  box-sizing: border-box;
}
.peak-ranking-me-bar .peak-ranking-item {
  margin-bottom: 0;
  border-bottom: none;
  padding: 10px 12px;
}

/* ===== 职业选手准星 ===== */
.crosshair-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.crosshair-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.crosshair-card:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* 预览区域 */
.crosshair-preview-wrap {
  flex-shrink: 0;
  margin-bottom: 0;
}
.crosshair-scene {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.2s;
}
.crosshair-scene:hover {
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(255,70,85,0.25);
  transform: scale(1.08);
  z-index: 2;
}
.crosshair-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.crosshair-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080e18;
}

/* 右侧信息区 */
.crosshair-body {
  flex: 1;
  min-width: 0;
}
.crosshair-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.crosshair-player {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Rajdhani', -apple-system, sans-serif;
  color: var(--text-primary);
}
.crosshair-team {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
.crosshair-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

/* 卡片底部：代码 + 复制 */
.crosshair-footer {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.crosshair-code {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: var(--text-secondary);
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.crosshair-copy-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.crosshair-copy-btn:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}
.crosshair-copy-btn.copied {
  background: rgba(90,158,111,0.15);
  border-color: var(--green);
  color: var(--green);
}

/* 移动端适配 */
@media (max-width: 380px) {
  .crosshair-card { padding: 12px; gap: 10px; }
  .crosshair-scene { width: 100px; height: 100px; }
  .crosshair-code { font-size: 9px; }
}

/* ===== 心愿单总花费 ===== */
.fav-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(240,178,50,0.1), rgba(240,178,50,0.05));
  border: 1px solid rgba(240,178,50,0.3); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.fav-total-vp {
  font-size: 18px; font-weight: 700; color: var(--accent);
  font-family: 'Rajdhani', monospace; text-shadow: 0 0 12px rgba(255,214,94,0.3);
}

/* ===== 图片骨架屏 ===== */
.skin-card-image, .gallery-card-image, .detail-image, .lb-img,
.flip-card-img, .pk-card-img, .pk-champion-img, .pk-defeated-img,
.roulette-card-image, .chroma-image, .chroma-preview-img, .chroma-thumb-img {
  background: var(--bg-surface);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skin-card-image[data-loaded], .gallery-card-image[data-loaded], .detail-image[data-loaded],
.lb-img[data-loaded], .flip-card-img[data-loaded], .pk-card-img[data-loaded],
.pk-champion-img[data-loaded], .pk-defeated-img[data-loaded],
.roulette-card-image[data-loaded], .chroma-image[data-loaded],
.chroma-preview-img[data-loaded], .chroma-thumb-img[data-loaded] {
  animation: none; background: transparent;
}
@keyframes skeletonPulse {
  0%, 100% { background-color: var(--bg-surface); }
  50% { background-color: var(--bg-elevated); }
}

/* ============ VP 计算器 ============ */
.vpcalc-modes {
  display: flex; gap: 0; margin: 12px 0 16px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 4px;
}
.vpcalc-mode-tab {
  flex: 1; text-align: center; padding: 10px 8px; font-size: 14px; font-weight: 600;
  border-radius: var(--radius); cursor: pointer; color: var(--text-secondary); transition: all 0.2s;
}
.vpcalc-mode-tab:hover:not(.active) { background: var(--bg-elevated); color: var(--text-primary); }
.vpcalc-mode-tab.active {
  background: linear-gradient(135deg, var(--red), #e03a48);
  color: #fff; box-shadow: 0 2px 8px rgba(255,70,85,0.3);
}
.vpcalc-add-btn {
  width: 100%; margin-bottom: 12px; font-size: 15px; padding: 12px;
}
.vpcalc-skin-list { display: flex; flex-direction: column; gap: 8px; }
.calc-skin-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.calc-skin-item:hover { background: var(--bg-elevated); border-color: rgba(255,70,85,0.25); }
.calc-skin-img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
.calc-skin-info { flex: 1; min-width: 0; }
.calc-skin-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-skin-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.calc-skin-del {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,70,85,0.12); color: var(--red); font-size: 14px; transition: background 0.15s, transform 0.15s;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.calc-skin-del:hover { background: rgba(255,70,85,0.22); }
.calc-skin-del:active { transform: scale(0.92); }
.vp-unknown { color: #f59e0b; font-size: 11px; }
.vpcalc-summary {
  margin-top: 16px; padding: 18px;
  background: linear-gradient(135deg, rgba(255,70,85,0.10), rgba(255,70,85,0.03)), var(--bg-card);
  border: 1px solid rgba(255,70,85,0.22); border-radius: var(--radius); color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.vpcalc-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-secondary); }
.vpcalc-summary-total { font-size: 34px; font-weight: 800; opacity: 1; color: var(--accent); font-family: 'Rajdhani', sans-serif; letter-spacing: 0.5px; }
.vpcalc-summary-total .unit { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-left: 4px; font-family: inherit; letter-spacing: 0; }
.vpcalc-rec { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.vpcalc-rec-empty { font-size: 13px; opacity: 0.6; text-align: center; padding: 8px; }
.vpcalc-rec-bundles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vpcalc-bundle-chip {
  background: rgba(255,214,94,0.12); border: 1px solid rgba(255,214,94,0.18); padding: 6px 10px; border-radius: var(--radius);
  font-size: 13px; display: flex; flex-direction: column; gap: 2px; color: var(--text-primary);
}
.vpcalc-bundle-chip small { font-size: 11px; opacity: 0.7; color: var(--text-secondary); }
.vpcalc-rec-total { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--accent); }
.vpcalc-rec-rate { font-size: 12px; opacity: 0.7; color: var(--text-secondary); }
.vpcalc-rec-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); }
.vpcalc-clear {
  margin-top: 12px; width: 100%; font-size: 13px; border-color: rgba(255,70,85,0.3); color: #ff9aa3;
}
.vpcalc-clear:hover { background: rgba(255,70,85,0.1); }
.vpcalc-convert-tabs {
  display: flex; gap: 0; margin-bottom: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 4px;
}
.vpcalc-convert-tab {
  flex: 1; text-align: center; padding: 8px; font-size: 13px; font-weight: 600;
  border-radius: var(--radius); cursor: pointer; color: var(--text-secondary); transition: all 0.2s;
}
.vpcalc-convert-tab:hover:not(.active) { background: var(--bg-elevated); color: var(--text-primary); }
.vpcalc-convert-tab.active { background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(255,70,85,0.25); }
.vpcalc-convert-input {
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
}
.vpcalc-convert-input input {
  flex: 1; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-primary); font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.vpcalc-convert-input input:focus { border-color: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.vpcalc-convert-unit {
  font-size: 15px; font-weight: 700; color: var(--accent); min-width: 30px; text-align: center;
}
.vpcalc-convert-input .btn { white-space: nowrap; }
.vpcalc-bundle-table {
  margin-top: 14px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-surface);
}
.vpcalc-bundle-row { display: flex; padding: 8px 12px; font-size: 13px; }
.vpcalc-bundle-row:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
.vpcalc-bundle-row span:first-child { flex: 1; font-weight: 600; }
.vpcalc-bundle-row span:nth-child(2) { width: 70px; text-align: right; }
.vpcalc-bundle-row span:nth-child(3) { width: 50px; text-align: right; color: var(--text-secondary); }
.vpcalc-bundle-head { background: var(--bg-elevated); font-weight: 600; color: var(--text-secondary); font-size: 12px; }
#vpConvertResult { margin-top: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
#vpConvertResult .vpcalc-rec-title { color: var(--text-primary); }
#vpConvertResult .vpcalc-rec-total { color: var(--accent); }

/* ============ 抽屉 / Drawer ============ */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.drawer {
  position: fixed; bottom: 0; left: 0; right: 0; max-height: 78vh; z-index: 201;
  background: var(--bg-card); border-radius: var(--radius) var(--radius) 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }
.drawer.open { transform: translateY(0); }
.drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.drawer-title { font-size: 16px; font-weight: 700; }
.drawer-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--bg-elevated); color: var(--text-secondary);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.drawer-search {
  display: flex; gap: 8px; padding: 10px 16px;
  background: var(--bg-primary); position: sticky; top: 0; z-index: 2;
}
.drawer-search input {
  flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-primary); font-size: 14px; outline: none;
}
.drawer-search select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-primary); font-size: 13px; outline: none;
}
.drawer-search .weapon-filter-bar {
  flex-shrink: 0;
  margin-bottom: 0;
  align-self: stretch;
  box-sizing: border-box;
  padding: 0 14px;
  font-size: 13px;
}
.drawer-list {
  flex: 1; overflow-y: auto; padding: 0 16px 8px; display: flex; flex-direction: column; gap: 4px;
}
.drawer-footer {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.drawer-confirm {
  width: 100%; font-size: 15px; padding: 12px;
}
.picker-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg-surface); border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.picker-item:hover { background: var(--bg-elevated); }
.picker-item.picked { background: rgba(255,70,85,0.08); border: 1px solid rgba(255,70,85,0.3); }
.picker-img { width: 42px; height: 42px; object-fit: contain; border-radius: 4px; background: var(--bg-elevated); }
.picker-info { flex: 1; min-width: 0; }
.picker-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-meta { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.picker-check {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
  background: var(--bg-elevated); color: var(--text-secondary);
}
.picker-item.picked .picker-check { background: var(--red); color: #fff; }

/* 详情页添加VP计算按钮 */
.btn-icon-add {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-primary); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.btn-icon-add:hover { background: var(--red); color: #fff; border-color: transparent; }
.btn-calc-in {
  background: rgba(255,70,85,0.2) !important; color: var(--red) !important; border-color: rgba(255,70,85,0.3) !important;
}
.btn-calc-in:hover { background: var(--red) !important; color: #fff !important; }

/* ===== 详情页底部固定评论栏 ===== */
.detail-bottom-bar {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-width); height: 56px;
  background: rgba(17,22,32,0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; padding: 0 16px; gap: 16px;
  z-index: 99;
}
.detail-bottom-input {
  flex: 1; height: 36px; background: var(--bg-surface);
  border-radius: var(--radius); display: flex; align-items: center;
  padding: 0 14px; color: var(--text-muted); font-size: 13px;
  cursor: pointer;
}
.detail-bottom-action {
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; color: var(--text-secondary);
}
.detail-bottom-icon { font-size: 22px; }
.detail-bottom-count { font-size: 12px; }

/* ===== 评论弹窗 ===== */
.review-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200; display: none; flex-direction: column; justify-content: flex-end;
}
.review-modal-mask {
  flex: 1; background: rgba(0,0,0,0.6);
}
.review-modal-body {
  background: var(--bg-card);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  max-height: 80vh;
  display: flex; flex-direction: column;
}
.review-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.review-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.review-modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.review-modal-textarea {
  width: 100%; min-height: 120px; max-height: 220px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 12px; color: var(--text-primary); font-size: 14px;
  resize: none; outline: none; margin-bottom: 10px;
  font-family: inherit;
}
.review-modal-textarea:focus { border-color: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.review-modal-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 8px;
}
.review-modal-tools { display: flex; gap: 12px; align-items: center; }
.review-tool-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.review-tool-btn:active { background: var(--bg-elevated); }
.review-modal-body .image-preview-list { margin-bottom: 10px; }

/* 表情面板 */
.emoji-panel {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 6px; padding: 10px 0; max-height: 180px; overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
}
.emoji-item {
  font-size: 22px; text-align: center; cursor: pointer;
  padding: 6px; border-radius: 4px; transition: background 0.2s;
}
.emoji-item:active { background: var(--bg-elevated); }

/* 详情页时隐藏底部 tab-bar */
body.detail-page .tab-bar { display: none; }
body.detail-page .detail-bottom-bar {
  bottom: env(safe-area-inset-bottom);
}