/* ── 全局设计令牌:Vital 风格(参考 vital_style_reference.md)──
   单一紫色主色 + 黑白灰层级:强调动作用黑,品牌用紫,其余靠灰度撑层级 */
page {
  /* 主色板 */
  --purple: #8b7cf6;
  --purple-light: #a99bf8;
  --purple-deep: #7563e0;
  --accent-dark: #2b2b30;

  /* 兼容旧变量名:六彩体系全部收敛到 Vital 色板,
     旧渐变 coral→tangerine 自动变为 紫→浅紫 */
  --coral: var(--purple);
  --tangerine: var(--purple-light);
  --lemon: var(--purple-light);
  --mint: #4bbe9a;
  --sky: var(--purple);
  --lilac: var(--purple);

  --pink: var(--purple);
  --pink-light: rgba(139, 124, 246, 0.12);
  --orange: var(--purple-light);
  --yellow: var(--purple-light);
  --green: var(--mint);
  --blue: var(--purple);
  --violet: var(--purple);
  --ink: #1b1b20;

  --bg-primary: #f1f2f6;
  --bg-page: #f1f2f6;

  --text-primary: #1b1b20;
  --text-secondary: #6e7280;
  --text-tertiary: #b9bdc6;

  /* 紫底上的半透明白(头部胶囊、次级卡片) */
  --on-primary: rgba(255, 255, 255, 0.22);
  --on-primary-strong: rgba(255, 255, 255, 0.32);

  /* 旧玻璃变量 → 实底白卡 */
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-edge: rgba(255, 255, 255, 0);

  --border-card: rgba(255, 255, 255, 0);
  --border-subtle: rgba(27, 27, 32, 0.06);

  /* 中性阴影:大模糊、低不透明度,光源一致来自上方 */
  --shadow-soft: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
  --shadow-card: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
  --shadow-pop: 0 12rpx 32rpx rgba(43, 43, 48, 0.22);

  --radius-sm: 20rpx;
  --radius-md: 32rpx;
  --radius-lg: 48rpx;
  --radius-full: 9999rpx;

  --tab-h: 112rpx;

  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 28rpx;
  line-height: 1.5;
  box-sizing: border-box;
}

/* ── 重置 ── */
view, text, image, button, input, textarea {
  box-sizing: border-box;
}

button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  line-height: 1;
  font-family: inherit;
}

button::after {
  border: none;
}

/* ── 通用卡片:纯白实底、大圆角、柔和中性阴影 ── */
.card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* ── 旧玻璃工具类 → 实底白卡(Vital 无毛玻璃,靠层叠和阴影做深度) ── */
.glass {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.glass-strong {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

/* ── 标签:白色小胶囊,不再旋转 ── */
.sticker-tag {
  position: absolute;
  background: #ffffff;
  color: var(--text-primary);
  font-size: 22rpx;
  font-weight: 600;
  padding: 10rpx 22rpx;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
}

.sticker-tag.tilt-r {
  transform: none;
}

/* ── 主按钮:黑色胶囊(Vital 的 CTA 用强调黑,不用主题色) ── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dark);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 28rpx;
  font-weight: 600;
  box-shadow: var(--shadow-pop);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-primary:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* ── 数字分级排版:整数超大加粗 + 小数/单位缩小变灰 ── */
.num-xl {
  font-size: 96rpx;
  font-weight: 700;
  letter-spacing: -2rpx;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.num-sub {
  font-size: 40rpx;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ── 信息行:左数字、右说明 + chevron,中间渐隐细线 ── */
.row-line {
  flex: 1;
  height: 2rpx;
  margin: 0 20rpx;
  background: linear-gradient(90deg, rgba(27, 27, 32, 0.10), rgba(27, 27, 32, 0.02));
}

.chevron {
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid var(--text-tertiary);
  border-right: 4rpx solid var(--text-tertiary);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── 页面顶部状态栏占位 ── */
.status-placeholder {
  height: env(safe-area-inset-top, 44rpx);
}

/* ── 紫色渐变淡出头部:从顶部主色向下融入页面背景,无分界线 ── */
.hero-fade {
  background: linear-gradient(180deg, #9181f4 0%, #a99bf8 55%, rgba(169, 155, 248, 0) 100%);
}

/* ── 滚动区通用 ── */
.scroll-view {
  width: 100%;
}

/* ── Hashtag 标签:主色淡紫底 ── */
.hashtag {
  display: inline-flex;
  align-items: center;
  font-size: 22rpx;
  font-weight: 600;
  color: var(--purple-deep);
  background: var(--pink-light);
  border-radius: var(--radius-full);
  padding: 6rpx 14rpx;
}

/* ── 在线绿点(语义色,保留但降饱和) ── */
.online-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
  box-shadow: 0 0 0 5rpx rgba(75, 190, 154, 0.16);
}

/* ── 骨架屏占位:中性冷灰 ── */
.skeleton {
  background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s infinite;
  border-radius: 12rpx;
}

@keyframes skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 固定顶栏:液态玻璃,置于图层顶层,高度固定(状态栏 + 导航栏) ──
   下层内容滚动/下拉时始终钉在顶部 */
.glass-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background:
    radial-gradient(120% 180% at 18% -50%, rgba(255, 255, 255, 0.42), transparent 60%),
    rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(40rpx) saturate(180%);
  -webkit-backdrop-filter: blur(40rpx) saturate(180%);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8rpx 28rpx rgba(27, 27, 32, 0.05),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
}

/* 顶栏上的标题:玻璃上用深色文字 */
.glass-topbar .topbar-logo,
.glass-topbar .navbar-title {
  color: #1b1b20;
}

.glass-topbar .logo-accent {
  color: var(--purple);
}

/* ── 顶栏图标按钮:线条化图标,右侧紧贴小程序胶囊按钮 ── */
.navbar-action {
  margin-left: auto;
  margin-right: 8rpx;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.navbar-action:active {
  opacity: 0.6;
}

/* 线条图标:单色 alpha 蒙版 + background-color 上色 */
.icon-line {
  width: 44rpx;
  height: 44rpx;
  background-color: #1b1b20;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* 搜索:线条放大镜 */
.icon-search-line {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIyMSIgY3k9IjIxIiByPSIxMi41Ii8+PHBhdGggZD0iTTMwLjUgMzAuNUw0MSA0MSIvPjwvZz48L3N2Zz4=");
}

/* 通知:线条铃铛 */
.icon-bell-line {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjQgN2ExMyAxMyAwIDAgMC0xMyAxM3Y3LjVMNyAzNWgzNGwtNC03LjVWMjBBMTMgMTMgMCAwIDAgMjQgN1oiLz48cGF0aCBkPSJNMTkuNSAzOC41YTQuOCA0LjggMCAwIDAgOSAwIi8+PC9nPjwvc3ZnPg==");
}

/* 图标按钮上的未读红点 */
.navbar-action.has-badge::after {
  content: '';
  position: absolute;
  top: 6rpx;
  right: 6rpx;
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: var(--purple);
  border: 2rpx solid #fff;
}

/* ── 安全区 ── */
.safe-top {
  background: transparent;
}

.safe-bottom {
  height: env(safe-area-inset-bottom, 0rpx);
}