/* ============================================================
   水云电竞 H5 · 整站改版主题（20261015-38）
   浅紫粉蓝玻璃 / 白卡 / 紫色主按钮 / 圆角文字标签 / 吉祥物气泡 · 耳机 · 城市装饰（全部原生 CSS/SVG 自绘）
   依据用户 2026-10-14 确认的 7 张设计参考图；在 app.css + ui-unified.css 之后加载。
   ============================================================ */
:root {
  --t-bg1: #EDE9FB;   /* 页面顶部淡紫 */
  --t-bg2: #F6EFF8;   /* 中段粉紫 */
  --t-bg3: #EAF0FC;   /* 底部淡蓝 */
  --t-card: rgba(255, 255, 255, 0.82);
  --t-card-solid: #FFFFFF;
  --t-ink: #2A2540;
  --t-sub: #7A7690;
  --t-faint: #A5A1B8;
  --t-purple: #8963F4;
  --t-purple-deep: #6C47E0;
  --t-purple-soft: #EFE9FD;
  --t-pink: #F269B4;
  --t-pink-soft: #FDECF5;
  --t-blue: #5E97F6;
  --t-blue-soft: #E8F1FE;
  --t-green: #35C28F;
  --t-line: rgba(96, 84, 168, 0.10);
  --t-shadow: 0 6px 18px rgba(112, 96, 190, 0.10);
}

/* ===== 页面底色：淡紫→粉→淡蓝纵向渐变 ===== */
html, body { overflow-x: hidden; }
body.t-theme {
  background:
    radial-gradient(120% 46% at 82% -4%, rgba(173, 142, 250, 0.35) 0%, rgba(173, 142, 250, 0) 60%),
    radial-gradient(110% 40% at 8% 12%, rgba(255, 173, 214, 0.30) 0%, rgba(255, 173, 214, 0) 55%),
    linear-gradient(180deg, var(--t-bg1) 0%, var(--t-bg2) 46%, var(--t-bg3) 100%);
  background-attachment: fixed;
  color: var(--t-ink);
}
body.t-theme .topbar { background: rgba(244, 241, 251, 0.85); }

/* ===== 品牌头部 ===== */
.t-hero {
  position: relative;
  padding: 20px 16px 16px;
  overflow: hidden;
}
.t-hero-row { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.t-hero-row > div { min-width: 0; }
.t-brand { display: flex; align-items: center; gap: 8px; }
.t-brand-name { font-size: 23px; font-weight: 800; color: #453390; letter-spacing: 1px; white-space: nowrap; }
.t-wave { width: 30px; height: 22px; color: var(--t-purple); flex: 0 0 auto; }
.t-slogan { margin-top: 6px; font-size: 12.5px; color: #6E6880; line-height: 1.55; max-width: 240px; }
.t-slogan-side {
  font-size: 12px; color: #7A64B8; text-align: right; line-height: 1.9;
  transform: rotate(-4deg); font-weight: 600; white-space: nowrap; flex: 0 0 auto;
  padding-top: 4px;
}
.t-slogan-side .t-heart { color: var(--t-pink); }
.t-hero-city { position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 72%; object-fit: cover; object-position: bottom; opacity: .3; pointer-events: none; }

/* ===== 玻璃白卡 ===== */
.t-card {
  background: var(--t-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  box-shadow: var(--t-shadow);
  padding: 14px;
  margin: 0 12px 12px;
}
.t-card-title { white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--t-ink); }
.t-card-title .t-ic { width: 22px; height: 22px; color: var(--t-purple); flex: 0 0 auto; }
.t-card-note { font-size: 11px; color: var(--t-faint); }

/* ===== 首页匹配区：随缘大卡 + 右列两卡 ===== */
.t-match-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; margin: 0 12px 12px; }
.t-card-casual {
  position: relative; overflow: hidden; border-radius: 18px; padding: 14px;
  background: linear-gradient(150deg, #CBB6FA 0%, #E3BDF3 48%, #F9D8EE 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--t-shadow);
  color: #3D2C74;
  display: flex; flex-direction: column;
}
.t-casual-top { display: grid; grid-template-columns: minmax(0, 1fr) 80px; align-items: center; gap: 8px; }
.t-casual-txt { display: contents; }
.t-card-casual .t-casual-title { grid-column: 1 / -1; white-space: nowrap; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.t-card-casual .t-casual-sub { font-size: 12px; margin-top: 3px; color: #5A4693; line-height: 1.5; }
.t-mascots { grid-column: 2; grid-row: 2; width: 80px; height: 80px; object-fit: contain; pointer-events: none; }
.t-want { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; color: #4A3A80; }
.t-want-label { display: block; }
.t-want-chips { display: flex; gap: 6px; flex-wrap: nowrap; }
.t-want-chips .t-opt { white-space: nowrap; padding: 5px 10px; font-size: 12px; line-height: 1; }
.t-go-match {
  margin-top: 10px; width: 100%; border: none; cursor: pointer;
  height: 46px; border-radius: 999px;
  background: linear-gradient(180deg, #9B79FF 0%, #7C55EA 100%);
  color: #FFF; font-size: 16px; font-weight: 700; letter-spacing: 2px; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 14px rgba(124, 85, 234, 0.35);
  overflow: hidden;
}
.t-go-match:active { transform: translateY(1px); }
.t-go-match .t-arrow { width: 18px; height: 18px; }
.t-free-line { margin-top: 8px; text-align: center; font-size: 11px; color: #5A4693; display: flex; align-items: center; justify-content: center; gap: 4px; }
.t-free-line .t-q { width: 13px; height: 13px; opacity: .75; }
.t-tentative { display: block; text-align: center; font-size: 10px; color: #6D5AA8; margin-top: 3px; }

.t-col { display: flex; flex-direction: column; gap: 10px; }
.t-side-card { position: relative; overflow: hidden; border-radius: 16px; padding: 12px; min-height: 108px; flex: 1; box-shadow: var(--t-shadow); border: 1px solid rgba(255,255,255,0.7); }
.t-side-rank { background: linear-gradient(150deg, #D9E7FE 0%, #E8E2FD 100%); color: #2F4E86; }
.t-side-city { background: linear-gradient(150deg, #FCD9EC 0%, #F3E3FA 100%); color: #8A3D6E; }
.t-side-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; }
.t-side-name .t-ic { width: 18px; height: 18px; }
.t-side-sub { font-size: 11px; margin-top: 4px; line-height: 1.6; color: inherit; opacity: .85; }
.t-fee-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 8px;
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75); color: #6D5AA8; border: 1px solid rgba(137, 99, 244, 0.25);
}
.t-fee-badge .t-q { width: 11px; height: 11px; }
.t-side-city .t-city-mini { position: absolute; right: 4px; bottom: 4px; width: 74px; height: 52px; opacity: .85; pointer-events: none; }
.t-side-rank .t-people { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 40px; color: #7B96E8; opacity: .9; pointer-events: none; }

/* ===== 音色匹配横条 ===== */
.t-voice-bar { display: flex; align-items: center; gap: 8px; }
.t-voice-ic { width: 44px; height: 44px; color: var(--t-purple); flex: 0 0 auto; }
.t-voice-main { flex: 1; min-width: 0; }
.t-voice-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.t-soon-badge { flex: 0 0 auto; font-size: 10px; color: var(--t-faint); background: #F1EFF8; border-radius: 999px; padding: 2px 8px; font-weight: 600; white-space: nowrap; }
.t-voice-sub { font-size: 11px; color: var(--t-sub); margin-top: 2px; }
.t-voice-headphones { width: 84px; height: 60px; object-fit: contain; flex: 0 0 auto; }
.t-voice-btn {
  flex: 0 0 auto; border: 1.5px solid var(--t-purple); color: var(--t-purple); background: #FFF;
  border-radius: 999px; font-size: 12px; font-weight: 700; padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.t-voice-btn:active { background: var(--t-purple-soft); }

/* ===== 权益三列 ===== */
.t-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.t-perk { background: #F7F5FD; border: 1px solid var(--t-line); border-radius: 14px; padding: 10px 8px; }
.t-perk-name { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--t-ink); }
.t-perk-name .t-ic { width: 14px; height: 14px; color: var(--t-purple); flex: 0 0 auto; }
.t-perk-sub { font-size: 10px; color: var(--t-sub); margin-top: 4px; line-height: 1.6; }

/* ===== 一起组队（真实在线列表） ===== */
.t-online-head { display: flex; align-items: center; justify-content: space-between; }
.t-online-note { font-size: 11px; color: var(--t-faint); display: flex; align-items: center; gap: 5px; }
.t-online-list { margin-top: 10px; display: flex; flex-direction: column; }
.t-online-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(96, 84, 168, 0.06); }
.t-online-row:last-child { border-bottom: none; }
.t-ava-wrap { position: relative; flex: 0 0 auto; }
.t-ava { width: 42px; height: 42px; border-radius: 50%; background: #E4E0F5; color: #6D5AA8; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; overflow: hidden; border: 2px solid #FFF; box-shadow: 0 2px 6px rgba(112, 96, 190, 0.16); }
.t-ava img { width: 100%; height: 100%; object-fit: cover; }
.t-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--t-green); border: 2px solid #FFF; }
.t-online-info { flex: 1; min-width: 0; }
.t-online-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.t-gender { width: 13px; height: 13px; flex: 0 0 auto; }
.t-gender.f { color: var(--t-pink); }
.t-gender.m { color: #5E8BE8; }
.t-online-chips { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.t-chip { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #F1EFF8; color: var(--t-sub); border: 1px solid transparent; white-space: nowrap; }
.t-chip.plat { background: var(--t-purple-soft); color: var(--t-purple-deep); }
.t-chip.rank { background: var(--t-blue-soft); color: #3A66B8; }
.t-hi-btn {
  flex: 0 0 auto; border: 1.5px solid rgba(137, 99, 244, 0.55); background: #FFF; color: var(--t-purple);
  border-radius: 999px; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.t-hi-btn .t-ic { width: 13px; height: 13px; }
.t-hi-btn:active { background: var(--t-purple-soft); }
.t-online-empty { padding: 18px 0 8px; text-align: center; font-size: 12px; color: var(--t-faint); }

/* ===== 分段标签（动态/开黑频道 · 全部/私聊/通知） ===== */
.t-seg { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 12px 10px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 3px; }
.t-seg-item {
  flex: 1; text-align: center; border: none; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--t-sub); padding: 7px 0; border-radius: 999px;
}
.t-seg-item.on { background: linear-gradient(180deg, #9B79FF 0%, #7C55EA 100%); color: #FFF; box-shadow: 0 3px 8px rgba(124, 85, 234, 0.3); }

/* ===== 子标签（推荐/最新/关注）+ 发布按钮 ===== */
.t-subtabs { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; }
.t-subtab { border: none; background: transparent; font-size: 13px; color: var(--t-sub); font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.t-subtab.on { background: var(--t-purple); color: #FFF; }
.t-subtabs .t-pub {
  margin-left: auto; border: none; cursor: pointer; border-radius: 999px;
  background: linear-gradient(180deg, #9B79FF 0%, #7C55EA 100%); color: #FFF;
  font-size: 12px; font-weight: 700; padding: 8px 16px; display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 10px rgba(124, 85, 234, 0.3);
}
.t-subtabs .t-pub .t-ic { width: 14px; height: 14px; }

/* ===== 动态卡 ===== */
.t-feed { margin: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.t-post { background: var(--t-card-solid); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; box-shadow: var(--t-shadow); padding: 12px; }
.t-post-head { display: flex; align-items: center; gap: 9px; }
.t-post-name { font-size: 14px; font-weight: 700; color: var(--t-ink); display: flex; align-items: center; gap: 5px; }
.t-post-time { font-size: 11px; color: var(--t-faint); margin-top: 2px; }
.t-post-follow { margin-left: auto; border: 1.5px solid var(--t-purple); color: var(--t-purple); background: #FFF; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 4px 12px; cursor: pointer; }
.t-post-follow.on { border-color: var(--t-line); color: var(--t-faint); background: #F4F3FA; }
.t-post-text { font-size: 14px; color: var(--t-ink); line-height: 1.7; margin-top: 8px; word-break: break-word; white-space: pre-wrap; }
.t-post-imgs { display: grid; gap: 6px; margin-top: 8px; border-radius: 12px; overflow: hidden; }
.t-post-imgs.two { grid-template-columns: 1fr 1fr; }
.t-post-imgs img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; display: block; }
.t-post-foot { display: flex; align-items: center; gap: 18px; margin-top: 10px; color: var(--t-sub); }
.t-post-act { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; background: transparent; border: none; cursor: pointer; color: var(--t-sub); padding: 0; }
.t-post-act .t-ic { width: 18px; height: 18px; }
.t-post-act.liked { color: var(--t-pink); }
.t-post-more { margin-left: auto; background: transparent; border: none; color: var(--t-faint); cursor: pointer; padding: 2px; }
.t-post-more .t-ic { width: 18px; height: 18px; }

/* ===== 开黑频道招募卡 ===== */
.t-recruit-status { margin-left: auto; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.t-recruit-status.open { background: var(--t-pink-soft); color: var(--t-pink); }
.t-recruit-status.closed { background: #F0EFF5; color: var(--t-faint); }
.t-recruit-text { font-size: 13px; color: var(--t-ink); line-height: 1.7; margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
.t-room-row {
  margin-top: 9px; display: flex; align-items: center; gap: 8px;
  background: #F6F4FE; border: 1px solid rgba(137, 99, 244, 0.18); border-radius: 12px; padding: 8px 10px;
}
.t-room-label { font-size: 11px; color: var(--t-sub); display: inline-flex; align-items: center; gap: 4px; }
.t-room-label .t-ic { width: 14px; height: 14px; color: var(--t-purple); }
.t-room-code { font-size: 16px; font-weight: 800; color: var(--t-purple-deep); letter-spacing: 1px; }
.t-copy-btn {
  margin-left: auto; border: 1.5px solid rgba(137, 99, 244, 0.55); background: #FFF; color: var(--t-purple);
  border-radius: 999px; font-size: 11px; font-weight: 700; padding: 5px 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.t-copy-btn .t-ic { width: 12px; height: 12px; }
.t-copy-btn:active { background: var(--t-purple-soft); }
.t-end-btn { border: none; background: transparent; color: var(--t-faint); font-size: 11px; cursor: pointer; margin-left: 8px; text-decoration: underline; }
.t-back-latest {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  background: #FFF; color: var(--t-purple); border: 1px solid rgba(137, 99, 244, 0.35);
  border-radius: 999px; font-size: 12px; font-weight: 700; padding: 8px 16px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(112, 96, 190, 0.25); z-index: 30;
  display: inline-flex; align-items: center; gap: 4px;
}
.t-back-latest .t-ic { width: 13px; height: 13px; }

/* ===== 通知项 ===== */
.t-notice-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(96, 84, 168, 0.06); }
.t-notice-row:last-child { border-bottom: none; }
.t-notice-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.t-notice-ic .t-ic { width: 20px; height: 20px; }
.t-notice-ic.bell { background: var(--t-pink-soft); color: var(--t-pink); }
.t-notice-ic.star { background: var(--t-purple-soft); color: var(--t-purple); }
.t-notice-main { flex: 1; min-width: 0; }
.t-notice-title { font-size: 14px; font-weight: 700; }
.t-notice-text { font-size: 12px; color: var(--t-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-notice-side { flex: 0 0 auto; text-align: right; }
.t-notice-time { font-size: 10px; color: var(--t-faint); display: block; }
.t-notice-badge { display: inline-block; min-width: 17px; height: 17px; border-radius: 999px; background: #F269B4; color: #FFF; font-size: 10px; line-height: 17px; padding: 0 4px; font-weight: 700; margin-top: 3px; }
.t-notice-row.unread .t-notice-title { color: var(--t-purple-deep); }

/* ===== 会话行 ===== */
.t-sess-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(96, 84, 168, 0.06); cursor: pointer; }
.t-sess-row:last-child { border-bottom: none; }
.t-sess-main { flex: 1; min-width: 0; }
.t-sess-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.t-sess-text { font-size: 12px; color: var(--t-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-sess-side { flex: 0 0 auto; text-align: right; }

/* ===== 表单（发布/编辑资料/招募） ===== */
.t-form { margin: 0 12px 12px; background: var(--t-card-solid); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; box-shadow: var(--t-shadow); padding: 14px; }
.t-form-label { font-size: 13px; font-weight: 700; color: var(--t-ink); margin: 12px 0 6px; display: flex; align-items: center; }
.t-form-label:first-child { margin-top: 0; }
.t-form-label .opt-tag { font-size: 10px; color: var(--t-faint); font-weight: 500; margin-left: 5px; }
.t-input, .t-textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--t-line); background: #F7F6FB;
  border-radius: 12px; font-size: 14px; color: var(--t-ink); padding: 11px 12px; outline: none;
}
.t-textarea { min-height: 96px; resize: none; line-height: 1.6; }
.t-input:focus, .t-textarea:focus { border-color: var(--t-purple); background: #FFF; }
.t-counter { text-align: right; font-size: 11px; color: var(--t-faint); margin-top: 4px; }
.t-opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.t-opt {
  border: 1px solid var(--t-line); background: #F7F6FB; color: var(--t-sub);
  border-radius: 999px; font-size: 12px; padding: 7px 15px; cursor: pointer; font-weight: 600;
  white-space: nowrap;
}
.t-opt.on { background: var(--t-purple-soft); border-color: var(--t-purple); color: var(--t-purple-deep); }
.t-submit {
  margin-top: 16px; width: 100%; border: none; cursor: pointer; height: 46px; border-radius: 999px;
  background: linear-gradient(180deg, #9B79FF 0%, #7C55EA 100%); color: #FFF;
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 6px 14px rgba(124, 85, 234, 0.35);
}
.t-submit:disabled { opacity: .55; }
.t-upload-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.t-upload-slot {
  width: 84px; height: 84px; border-radius: 12px; border: 1.5px dashed rgba(137, 99, 244, 0.45);
  background: #F8F6FE; color: var(--t-purple); font-size: 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.t-upload-slot .t-ic { width: 20px; height: 20px; }
.t-upload-thumb { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; }
.t-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-upload-thumb .t-del {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(42, 37, 64, 0.7); color: #FFF; border: none; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; padding: 0;
}

/* ===== 次级页头（返回 + 标题） ===== */
.t-subhead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: rgba(244, 241, 251, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.t-subhead .t-back { background: transparent; border: none; color: var(--t-ink); cursor: pointer; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; }
.t-subhead .t-back .t-ic { width: 20px; height: 20px; }
.t-subhead .t-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: var(--t-ink); margin-right: 30px; }

/* ===== 开关（隐私设置） ===== */
.t-switch { position: relative; width: 46px; height: 27px; border-radius: 999px; background: #E4E1F0; border: none; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.t-switch.on { background: var(--t-purple); }
.t-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left .15s; }
.t-switch.on::after { left: 22px; }

/* ===== 匹配等待页 ===== */
.t-wait-visual { width: 168px; height: 150px; object-fit: contain; margin: 26px auto 10px; display: block; }
.t-wait-title { text-align: center; font-size: 18px; font-weight: 800; color: var(--t-ink); }
.t-wait-sub { text-align: center; font-size: 12px; color: var(--t-sub); margin-top: 6px; line-height: 1.8; }
.t-steps { margin-top: 16px; display: flex; flex-direction: column; }
.t-step { display: flex; gap: 10px; }
.t-step-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.t-step-dot { width: 11px; height: 11px; border-radius: 50%; background: #DCD8EC; flex: 0 0 auto; }
.t-step.active .t-step-dot { background: var(--t-purple); box-shadow: 0 0 0 4px rgba(137, 99, 244, 0.18); }
.t-step-line { width: 2px; flex: 1; min-height: 26px; background: #E7E4F3; }
.t-step-txt { padding-bottom: 18px; }
.t-step-name { font-size: 14px; font-weight: 700; color: var(--t-faint); }
.t-step.active .t-step-name { color: var(--t-ink); }
.t-step-sub { font-size: 11px; color: var(--t-faint); margin-top: 3px; }

/* ===== 空态 ===== */
.t-empty { text-align: center; padding: 36px 16px; color: var(--t-faint); font-size: 13px; }
.t-empty .t-ic { width: 44px; height: 44px; opacity: .6; }

/* ===== 他人主页封面 ===== */
.t-pf-cover { position: relative; height: 150px; overflow: hidden; }
.t-pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-pf-head { margin: -44px 12px 12px; position: relative; z-index: 2; }
.t-pf-row { display: flex; align-items: flex-end; gap: 10px; }
.t-pf-ava { width: 76px; height: 76px; border-radius: 50%; background: #E4E0F5; color: #6D5AA8; border: 3px solid #FFF; box-shadow: 0 4px 12px rgba(112, 96, 190, 0.2); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; flex: 0 0 auto; }
.t-pf-ava img { width: 100%; height: 100%; object-fit: cover; }
.t-pf-info { flex: 1; min-width: 0; padding-bottom: 4px; }
.t-pf-name { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.t-pf-id { font-size: 11px; color: var(--t-faint); margin-top: 2px; }
.t-pf-online { font-size: 10px; color: var(--t-green); background: rgba(53, 194, 143, 0.12); padding: 2px 8px; border-radius: 999px; margin-left: auto; margin-bottom: 8px; }
.t-pf-intro { font-size: 12px; color: var(--t-sub); margin-top: 8px; line-height: 1.7; }
.t-pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.t-pf-btns { display: flex; gap: 10px; margin-top: 12px; }
.t-pf-btns .t-btn-hi { flex: 1; height: 42px; border-radius: 999px; border: 1.5px solid rgba(137, 99, 244, 0.55); background: #FFF; color: var(--t-purple); font-size: 14px; font-weight: 700; cursor: pointer; }
.t-pf-btns .t-btn-follow { flex: 1; height: 42px; border-radius: 999px; border: none; background: linear-gradient(180deg, #9B79FF 0%, #7C55EA 100%); color: #FFF; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 12px rgba(124, 85, 234, 0.3); }
.t-pf-btns .t-btn-follow.on { background: #E9E6F5; color: var(--t-faint); box-shadow: none; }
.t-game-grid { display: flex; gap: 10px; margin-top: 10px; }
.t-game-cell { flex: 1; background: #F7F5FD; border: 1px solid var(--t-line); border-radius: 12px; padding: 9px 10px; }
.t-game-cell .lb { font-size: 10px; color: var(--t-faint); display: block; }
.t-game-cell .val { font-size: 13px; font-weight: 700; color: var(--t-ink); margin-top: 3px; word-break: break-all; }

/* ===== 我的页主视图（原图4：头像昵称 + 游戏名片 + 简洁菜单） ===== */
.mp-head { display: flex; align-items: center; gap: 12px; margin: 4px 14px 6px; }
.mp-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(150deg, #E3D9FB, #F3CBE4); color: #6D5AA8;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
  border: 2px solid #FFF; box-shadow: 0 4px 12px rgba(112, 96, 190, 0.18); overflow: hidden;
}
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-head-info { flex: 1; min-width: 0; }
.mp-nick { font-size: 20px; font-weight: 800; color: var(--t-ink); }
.mp-id { font-size: 12px; color: var(--t-faint); margin-top: 2px; }
.mp-edit {
  flex: 0 0 auto; border: 1.5px solid var(--t-purple); background: #FFF; color: var(--t-purple);
  border-radius: 999px; font-size: 13px; font-weight: 700; padding: 8px 16px; cursor: pointer;
}
.mp-edit:active { background: var(--t-purple-soft); }
.mp-intro { margin: 0 16px 6px; font-size: 13px; color: var(--t-sub); line-height: 1.6; }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 16px 10px; }
.mp-chip { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--t-purple-soft); color: var(--t-purple-deep); }
.mp-chip.mp-chip-pink { background: var(--t-pink-soft); color: var(--t-pink); }

.mp-gamecard { margin: 0 12px 12px; }
.mp-game-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mp-game-tab {
  font-size: 13px; font-weight: 700; color: var(--t-sub); padding: 5px 12px; border-radius: 999px;
  background: #F4F2FB; cursor: pointer; border: 1px solid transparent;
}
.mp-game-tab.on { background: var(--t-purple); color: #FFF; }
.mp-game-name { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--t-ink); display: flex; align-items: center; gap: 6px; }
.mp-game-name svg { width: 18px; height: 18px; color: var(--t-purple); }
.field select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--t-line); background: #F7F6FB;
  border-radius: 12px; font-size: 14px; color: var(--t-ink); padding: 11px 12px; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239A93AC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select:focus { border-color: var(--t-purple); background-color: #FFF; }
.mp-game-grid .t-game-cell { background: #F7F5FD; }
.mp-game-grid .t-game-cell .lb { color: var(--t-faint); }
.mp-game-grid .t-game-cell .val { color: var(--t-ink); }

.mp-menu { margin: 0 12px 12px; padding: 4px 0; }
.mp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid rgba(96, 84, 168, 0.06);
  font-size: 14px; color: var(--t-ink); text-decoration: none; cursor: pointer;
}
.mp-row:last-child { border-bottom: none; }
.mp-row:active { background: #F7F5FD; }
.mp-arrow { color: var(--t-faint); margin-left: auto; }
.mp-banner { display: flex; align-items: center; gap: 12px; margin: 0 12px 12px; padding: 16px; border-radius: 16px; box-shadow: var(--t-shadow); border: 1px solid rgba(255,255,255,.7); }
.mp-banner.sec-banner { background: linear-gradient(150deg, #DCE9FE, #E8E0FC); color: #2F4E86; }
.mp-banner.srv-banner { background: linear-gradient(150deg, #FCD9EC, #F0E4FB); color: #8A3D6E; }
.mp-banner-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.75); display: inline-flex; align-items: center; justify-content: center; }
.mp-banner-ic svg { width: 22px; height: 22px; }
.mp-banner-t { font-size: 15px; font-weight: 800; }
.mp-banner-s { font-size: 11px; opacity: .8; margin-top: 3px; }

/* ===== 私聊：资料卡 + 头像气泡 + 破冰条 ===== */
.t-pm-ava {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: #E4E0F5; color: #6D5AA8; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; overflow: hidden; border: 1px solid #FFF; box-shadow: 0 2px 5px rgba(112,96,190,.15);
}
.t-pm-ava.lg { width: 46px; height: 46px; font-size: 18px; }
.t-pm-ava img { width: 100%; height: 100%; object-fit: cover; }
/* 私聊顶栏 */
.t-pm-topbar { position: sticky; top: 0; z-index: 24; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(244,241,251,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.t-pm-back { background: transparent; border: none; color: var(--t-ink); cursor: pointer; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; }
.t-pm-back svg { width: 20px; height: 20px; }
.t-pm-top-main { min-width: 0; }
.t-pm-top-name { font-size: 15px; font-weight: 800; color: var(--t-ink); }
.t-pm-top-status { font-size: 11px; color: var(--t-green); margin-top: 1px; }
.t-private-peer { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 12px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: var(--t-shadow); }
.t-private-main { min-width: 0; }
.t-private-name { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: var(--t-ink); }
.t-private-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.t-private-tags span { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--t-purple-soft); color: var(--t-purple-deep); }
.pm-msg { align-items: flex-start; }
.pm-msg .t-pm-ava { margin-top: 14px; }
.pm-ice { position: fixed; left: 0; right: 0; bottom: 58px; z-index: 24; display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; }
.pm-ice::-webkit-scrollbar { display: none; }
.pm-ice button { flex: 0 0 auto; border: 1px solid rgba(137,99,244,.35); background: #FFF; color: var(--t-purple); border-radius: 999px; font-size: 12px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.pm-ice button:active { background: var(--t-purple-soft); }
.mp-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.mp-ic svg { width: 18px; height: 18px; }
.ic-purple { background: #EFE9FD; color: #8963F4; }
.ic-gold { background: #FBF3DF; color: #C08A1F; }
.ic-blue { background: #E8F1FE; color: #4A84E8; }
.ic-green { background: #E6F6EF; color: #2E9C76; }
.ic-cyan { background: #E3F5F7; color: #2AA6B4; }
.ic-pink { background: #FDEAF4; color: #E2548C; }
.ic-gray { background: #F1F0F5; color: #8A8698; }



/* Independent final polish: compact readable tags and private-chat detail. */
.t-perk-name{font-size:11px;line-height:1.5;white-space:nowrap;gap:3px}.t-perk{min-width:0}.t-perk-name .t-ic{width:12px;flex:0 0 12px}.t-game-cell{min-width:0;padding:9px 7px}.t-game-cell .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal}
.t-private-peer{margin:0 14px 28px;padding:14px 16px;border:1px solid rgba(137,99,244,.10);background:rgba(255,255,255,.86);border-radius:18px}.t-private-name{font-size:15px;font-weight:700;color:#302546}.t-private-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.t-private-tags span{padding:4px 11px;background:#f1ecfc;border-radius:999px;font-size:12px;color:#77648e}.t-private-detail .tabbar{display:none!important}.t-private-detail .mc-input{bottom:0!important}.t-private-detail .mc-room-body{background:transparent}.t-private-detail .mc-chat-list{min-height:calc(100vh - 260px);background:transparent}.t-private-detail .mc-msg.mine .mc-bub{background:linear-gradient(135deg,#a980ff,#8657ee);color:#fff}.t-private-detail .mc-msg .mc-bub{border-radius:16px;line-height:1.7}.t-private-detail .mc-room-hero{background:transparent}.t-private-detail .mc-room-hero::after{display:none}