/* 20261010-9 新增：图标块（我的页菜单 / 通知项 / 登录引导） */
.mi-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: #F0EBFF; color: #8963F4;
  display: inline-flex; align-items: center; justify-content: center;
}
.mi-ic svg { width: 17px; height: 17px; }
.mi-ic-inline { margin-right: 8px; vertical-align: -7px; }
.login-cta .login-cta-ic {
  width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%;
  background: #F0EBFF; color: #8963F4;
  display: flex; align-items: center; justify-content: center;
}
.login-cta .login-cta-ic svg { width: 28px; height: 28px; }
/* 水云电竞 H5 · 全站统一浅色视觉（2026-10-10 定稿）
 * 背景 #F4F5FB / 白卡 #FFFFFF / 主紫 #8963F4
 * 仅覆盖颜色/边框/阴影，不动布局与绑定；需在 app.css / mine.css / social style.css 之后加载 */
:root {
  --u-bg: #F4F5FB;
  --u-card: #FFFFFF;
  --u-sub: #F1EFFA;
  --u-text: #2B2738;
  --u-text-2: #6E6880;
  --u-text-3: #9A93AC;
  --u-purple: #8963F4;
  --u-purple-deep: #6D4AD8;
  --u-line: rgba(43, 39, 56, 0.08);
  --u-divider: rgba(43, 39, 56, 0.06);
}

/* ===== 基础 ===== */
body { background: var(--u-bg); color: var(--u-text); }
a { color: var(--u-purple); }

.topbar {
  background: rgba(244, 245, 251, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--u-divider);
}
.topbar .logo em { color: var(--u-purple); }
.topbar .tip { color: var(--u-text-3); }

.notice, .card {
  background: var(--u-card);
  border-color: var(--u-line);
  color: var(--u-text-2);
  box-shadow: 0 1px 3px rgba(43, 39, 56, 0.05);
}
.card .head, .card .nick { color: var(--u-text); }
.card .sub, .card .time { color: var(--u-text-3); }

.filters select {
  background: var(--u-card); color: var(--u-text-2); border-color: var(--u-line);
}

/* ===== 按钮 ===== */
.btn { border: 1px solid var(--u-line); background: var(--u-card); color: var(--u-text-2); }
.btn-main { background: var(--u-purple); border-color: var(--u-purple); color: #FFF; box-shadow: none; }
.btn-main:active { background: var(--u-purple-deep); }
.btn-ghost { background: transparent; border-color: var(--u-purple); color: var(--u-purple); }
.btn-gold { background: #FFF7E2; border-color: #F0DDA6; color: #A87B1F; }
.btn:disabled { opacity: .45; }

.empty { color: var(--u-text-3); }

/* ===== 表单 ===== */
.field .label { color: var(--u-text); }
.field .label .hint { color: var(--u-text-3); }
.field input, .field textarea {
  background: var(--u-sub); color: var(--u-text);
  border: 1px solid var(--u-line);
}
.field input::placeholder, .field textarea::placeholder { color: var(--u-text-3); }
.options .opt {
  background: var(--u-sub); color: var(--u-text-2); border: 1px solid transparent;
}
.options .opt.on {
  background: #EFE9FD; color: var(--u-purple-deep); border-color: var(--u-purple);
}

.cost-bar { background: var(--u-sub); border-color: var(--u-line); color: var(--u-text-2); }
.cost-bar .num { color: var(--u-purple-deep); }

/* ===== 弹层（筛选 / 登录）浅色 ===== */
.mask { background: rgba(43, 39, 56, 0.42); }
.sheet { background: var(--u-card); color: var(--u-text); box-shadow: 0 -8px 30px rgba(43, 39, 56, 0.12); }
.sheet h3 { color: var(--u-text); }
.gid-box { background: var(--u-sub); border-color: var(--u-line); color: var(--u-text); }
.gid-tip { color: var(--u-text-3); }

/* ===== 统一底部导航（白底 + 紫色选中 + SVG 线图标） ===== */
.tabbar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--u-divider);
  box-shadow: 0 -1px 8px rgba(43, 39, 56, 0.05);
}
.tabbar a { color: var(--u-text-3); }
.tabbar a.on, .tabbar a.active { color: var(--u-purple); }
.tabbar a svg { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }

/* ===== 首页（匹配） ===== */
.h-tt { color: var(--u-text); }
.h-filter-btn { background: var(--u-card); border-color: var(--u-line); color: var(--u-text-2); }
.h-filter-btn svg { stroke: var(--u-text-2); }
.h-fdot { background: var(--u-purple); }
.h-live { background: var(--u-card); border-color: var(--u-line); }
.h-live-title { color: var(--u-text); }
.h-live-hint { color: var(--u-text-3); }
.h-dot-off { background: #C6BFD8; }
.h-pal-av { background: var(--u-sub); border-color: var(--u-line); color: var(--u-text-3); }
.h-pal span { color: var(--u-text-3); }
.h-gzone { background: var(--u-card); border-color: var(--u-line); }
.h-g-title { color: var(--u-text); }
.h-g-more { color: var(--u-purple); }
.h-gcat { background: var(--u-sub); color: var(--u-text-2); }
.h-gcat.on { background: #EFE9FD; color: var(--u-purple-deep); }
.h-gcard { background: var(--u-sub); border-color: var(--u-line); }
.h-gc-name { color: var(--u-text); }
.h-gc-desc { color: var(--u-text-2); }
.h-gc-count { color: var(--u-text-3); }
.h-gc-go { color: var(--u-purple); border-color: var(--u-purple); background: transparent; }
.h-g-empty { color: var(--u-text-3); }
.h-sheet { background: var(--u-card); }
.h-sheet-grab { background: var(--u-line); }
.h-sheet-head h3 { color: var(--u-text); }
.h-sheet-x { background: var(--u-sub); color: var(--u-text-2); }
.h-f-label { color: var(--u-text-2); }
.h-f-opt { background: var(--u-sub); color: var(--u-text-2); border: 1px solid transparent; }
.h-f-opt.on { background: #EFE9FD; color: var(--u-purple-deep); border-color: var(--u-purple); }

/* 首页付费发布入口降为低权重（描边链接样式，功能与计费不变） */
.h-pub-entry {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; margin: 4px 16px 8px;
  border: 1px dashed rgba(137, 99, 244, 0.5); border-radius: 12px;
  color: var(--u-purple); font-size: 13px; font-weight: 600;
  background: transparent;
}
.h-pub-entry-sub { font-size: 11px; color: var(--u-text-3); text-align: center; margin: -2px 0 8px; }

/* ===== 搭子群卡片浅彩（不改免费意向逻辑） ===== */
.h-gc1 { background: #F1EDFE; }
.h-gc2 { background: #E9F5FF; }
.h-gc3 { background: #EAF8F2; }
.h-gc4 { background: #FEF3E4; }
.h-gc1 .h-gc-badge { background: rgba(137, 99, 244, 0.14); color: var(--u-purple-deep); }
.h-gc2 .h-gc-badge { background: rgba(74, 134, 232, 0.12); color: #3A6BC4; }
.h-gc3 .h-gc-badge { background: rgba(46, 168, 128, 0.12); color: #2E8C6E; }
.h-gc4 .h-gc-badge { background: rgba(232, 152, 62, 0.14); color: #B9741F; }

/* ===== 消息页 ===== */
.chat-item { background: var(--u-card); border-color: var(--u-line); }
.chat-item .name { color: var(--u-text); }
.chat-item .text { color: var(--u-text-2); }
.chat-item .time { color: var(--u-text-3); }
.chat-input { background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--u-divider); }
.chat-input input { background: var(--u-sub); color: var(--u-text); border-color: var(--u-line); }

/* ===== 我的 ===== */
.mine-head { background: var(--u-card); border-color: var(--u-line); }
.mine-head .nick { color: var(--u-text); }
.mine-head .sub { color: var(--u-text-3); }
.avatar { background: var(--u-sub); color: var(--u-purple-deep); border-color: var(--u-line); }
.wallet { background: var(--u-card); border-color: var(--u-line); }
.wallet-title, .wallet .t { color: var(--u-text-3); }
.wallet .d { color: #B98A2A; }
.menu { background: var(--u-card); border-color: var(--u-line); }
.menu .item { border-bottom-color: var(--u-divider); color: var(--u-text); }
.menu .item .arrow { color: var(--u-text-3); }
.login-cta { color: var(--u-text-2); }

/* ===== 广场预览（social-preview，仅配色统一；示例内容由预览自带横幅声明） ===== */
.preview-banner { background: #EFE9FD; color: var(--u-purple-deep); border-bottom-color: rgba(109, 74, 216, 0.12); }

/* ===== 登录引导卡（未登录态） ===== */
.login-cta {
  background: var(--u-card); border-radius: 18px;
  box-shadow: 0 4px 16px rgba(96, 84, 168, 0.07);
  color: var(--u-text); text-align: center;
}
.login-cta p { color: var(--u-text-2); }

/* ===== 表单与筛选在浅底下的细节 ===== */
.cost-bar { border-radius: 12px; }
.filters select { border-radius: 10px; }

/* toast 保持浅底深字 */
.toast { background: rgba(43, 39, 56, 0.88); color: #FFF; }

/* ===== 375/390/430 宽度适配：大屏居中限宽，小屏全宽 ===== */
@media (min-width: 431px) {
  .page, .topbar { max-width: 430px; margin-left: auto; margin-right: auto; }
  .tabbar { left: 50%; transform: translateX(-50%); max-width: 430px; }
  .chat-input { left: 50%; transform: translateX(-50%); max-width: 430px; }
}

.sheet { background: var(--u-card); color: var(--u-text); box-shadow: 0 -8px 30px rgba(43, 39, 56, 0.12); }
.sheet h3 { color: var(--u-text); }
.gid-box { background: var(--u-sub); border-color: var(--u-line); color: var(--u-text); }
.gid-tip { color: var(--u-text-3); }