/* ==================== 全局基础 ==================== */
:root {
  --primary: #26A69A;
  --primary-light: #B2DFDB;
  --primary-dark: #00897B;
  --primary-bg: #E0F2F1;
  --bg: #F5F7FA;
  --white: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --border: #F0F0F0;
  --card-shadow: 0 1px 4px rgba(0,0,0,0.06);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--white);
  min-height: 100vh;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

/* ==================== 手机外壳（全屏适配） ==================== */
.phone-frame {
  width: 100%;
  height: 100vh;
  background: var(--white);
  overflow: hidden;
  position: relative;
  box-shadow: none;
}

/* ==================== 页面通用 ==================== */
.page {
  display: none;
  flex-direction: column;
  height: calc(100% - 70px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 70px;
  background: var(--white);
  z-index: 1;
}
.page.active { display: flex; }




.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  height: 48px;
  background: var(--white);
  box-shadow: 0 1px 0 var(--border);
  flex-shrink: 0;
  z-index: 5;
}
.header-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-primary);
  border-radius: 50%; cursor: pointer;
}
.header-btn:active { background: var(--bg); }
.header-title {
  font-size: 17px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.header-tabs {
  display: flex; gap: 2px;
  flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  margin: 0 6px;
  white-space: nowrap;
  /* 两端渐变阴影提示可滑动 */
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.header-tabs::-webkit-scrollbar { display: none; }
/* 消息页只有 2 个 tab，居中展示 */
#page-messages .header-tabs { justify-content: center; gap: 8px; }
.h-tab {
  padding: 6px 12px; border: none; background: none;
  font-size: 15px; color: var(--text-tertiary);
  font-weight: 500; cursor: pointer; border-radius: 16px;
  transition: color .25s ease, background .25s ease, font-weight .25s ease, transform .15s ease;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
}
.h-tab:active { transform: scale(0.94); }
.h-tab.active {
  color: var(--primary); background: var(--primary-bg); font-weight: 600;
}
/* 圈子 Tab 的头部：位置按钮 shrink:0，右侧工具 shrink:0，中间 tab 可滚动 */
#page-circles .location-btn {
  flex-shrink: 0;
  max-width: 110px;
}
#page-circles .location-btn span {
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-right-actions { display: flex; gap: 2px; flex-shrink: 0; }

.page-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.page-content::-webkit-scrollbar { display: none; }

/* ==================== 启动页 ==================== */
.splash-screen {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999; overflow: hidden;
  background: linear-gradient(145deg, #0D1B2A, #1B2D45, #1A3A4A);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, transform .5s ease;
}
.splash-screen.fade-out {
  opacity: 0; transform: scale(1.05);
  pointer-events: none;
}
.splash-screen.hidden { display: none; }

/* 背景光效 */
.splash-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.splash-circle {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.3;
}
.splash-circle.c1 {
  width: 250px; height: 250px; top: -60px; right: -40px;
  background: radial-gradient(circle, #26A69A, transparent);
  animation: splashFloat 6s ease-in-out infinite;
}
.splash-circle.c2 {
  width: 200px; height: 200px; bottom: 80px; left: -50px;
  background: radial-gradient(circle, #7C4DFF, transparent);
  animation: splashFloat 5s ease-in-out 1s infinite reverse;
}
.splash-circle.c3 {
  width: 160px; height: 160px; top: 40%; right: -30px;
  background: radial-gradient(circle, #FFB300, transparent);
  opacity: 0.2;
  animation: splashFloat 7s ease-in-out 0.5s infinite;
}
@keyframes splashFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-15px, 20px) scale(1.1); }
}

/* 内容 */
.splash-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%; padding: 0 40px;
  justify-content: center;
}

/* Logo */
.splash-logo { margin-bottom: 20px; }
.splash-logo-ring {
  width: 88px; height: 88px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(38,166,154,0.2), rgba(124,77,255,0.2));
  border: 1.5px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  animation: splashLogoIn .8s ease-out;
  position: relative;
}
.splash-logo-ring::before {
  content: '';
  position: absolute; inset: -3px; border-radius: 30px;
  background: conic-gradient(from 0deg, transparent, rgba(38,166,154,0.5), transparent, rgba(124,77,255,0.5), transparent);
  animation: splashRingSpin 3s linear infinite;
  z-index: -1;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  padding: 1.5px;
}
@keyframes splashRingSpin { to { transform: rotate(360deg); } }
.splash-logo-inner {
  width: 68px; height: 68px; border-radius: 20px;
  background: linear-gradient(135deg, #26A69A, #00897B);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #fff;
  font-family: -apple-system, "PingFang SC", sans-serif;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
  box-shadow: 0 8px 32px rgba(38,166,154,0.35);
}
@keyframes splashLogoIn {
  from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* 品牌文字 */
.splash-brand {
  font-size: 32px; font-weight: 800; color: #fff;
  letter-spacing: 6px; margin-bottom: 8px;
  animation: splashTextIn .6s ease-out .3s both;
}
.splash-slogan {
  font-size: 13px; color: rgba(255,255,255,0.45);
  letter-spacing: 2px; margin-bottom: 40px;
  animation: splashTextIn .6s ease-out .5s both;
}
@keyframes splashTextIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 加载条 */
.splash-loader {
  width: 120px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.1); overflow: hidden;
  margin-bottom: 60px;
  animation: splashTextIn .4s ease-out .7s both;
}
.splash-loader-bar {
  width: 0%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #26A69A, #7C4DFF);
  animation: splashLoad 2.2s ease-in-out .8s forwards;
}
@keyframes splashLoad {
  0% { width: 0%; }
  30% { width: 45%; }
  60% { width: 70%; }
  90% { width: 92%; }
  100% { width: 100%; }
}

/* 底部信息 */
.splash-footer {
  position: absolute; bottom: 50px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: splashTextIn .5s ease-out .6s both;
}
.splash-trust-icons {
  display: flex; align-items: center; gap: 10px;
}
.splash-ti {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: rgba(255,255,255,0.4);
}
.splash-ti-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.splash-version {
  font-size: 10px; color: rgba(255,255,255,0.2);
  letter-spacing: 1px;
}

/* ==================== AI 状态点 ==================== */
.ai-dot {
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(38,166,154,0.4); }
  50% { opacity: .8; box-shadow: 0 0 0 6px rgba(38,166,154,0); }
}

.ai-mini-icon {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 700;
}
.ai-search-btn {
  position: relative;
}
.ai-search-badge {
  position: absolute; top: -2px; right: -4px;
  font-size: 8px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6C72CB, #8B5CF6);
  padding: 1px 4px; border-radius: 4px;
  line-height: 1.2; letter-spacing: 0.5px;
}

/* ==================== 问亮仔 Tab（科技冷色风格） ==================== */
.ai-header {
  background: #F7F8FA !important;
  border-bottom: 1px solid #ECECF0;
  box-shadow: none;
}
.ai-header-title {
  color: #1A1A2E !important;
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.ai-logo-icon { color: #6C72CB; }
.ai-header-btn { color: #8E8EA0 !important; }
.ai-header-btn:active { background: #ECECF0 !important; }

.ai-page {
  background: #F7F8FA;
  padding: 0;
}

.ai-welcome {
  text-align: center;
  padding: 36px 20px 20px;
}
.ai-avatar-large {
  width: 60px; height: 60px; margin: 0 auto 18px;
  background: linear-gradient(135deg, #6C72CB, #8B5CF6);
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(108,114,203,0.2);
}
.ai-avatar-inner {
  display: flex; align-items: center; justify-content: center;
  color: white;
}
.ai-greeting {
  font-size: 13px; color: #8E8EA0; margin-bottom: 6px; font-weight: 400;
}
.ai-welcome h2 {
  font-size: 22px; margin-bottom: 6px;
  color: #1A1A2E; font-weight: 600;
}
.ai-subtitle { color: #8E8EA0; font-size: 13px; }

/* 快捷提示词卡片 */
.ai-prompts {
  padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-prompt-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid #ECECF0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-prompt-card:active {
  background: #F0F0F8;
  border-color: rgba(108,114,203,0.3);
  transform: scale(0.98);
}
.prompt-icon {
  width: 36px; height: 36px;
  background: #F0F0F8;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #6C72CB;
  flex-shrink: 0;
}
.prompt-text { flex: 1; min-width: 0; }
.prompt-title {
  font-size: 14px; font-weight: 500;
  color: #1A1A2E; margin-bottom: 2px;
}
.prompt-desc {
  font-size: 12px; color: #8E8EA0;
}
.prompt-arrow { color: #C5C5D2; flex-shrink: 0; }

/* 上下文信息条 */
.ai-context-bar {
  display: flex; gap: 8px;
  padding: 4px 16px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ai-context-bar::-webkit-scrollbar { display: none; }
.context-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  background: #FFFFFF;
  border: 1px solid #ECECF0;
  border-radius: 20px;
  font-size: 12px; color: #8E8EA0;
  white-space: nowrap; flex-shrink: 0;
}
.context-chip.highlight {
  border-color: rgba(108,114,203,0.3);
  color: #6C72CB;
  background: #F0F0F8;
}

/* AI 输入栏 */
.ai-input-bar {
  padding: 12px 16px 14px;
  background: #F7F8FA;
  border-top: 1px solid #ECECF0;
  flex-shrink: 0;
}
.input-action-btn {
  width: 32px; height: 32px; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0; border-radius: 50%;
}
.input-action-btn:active { background: #F0F0F0; }
.ai-input-wrap {
  display: flex; align-items: center;
  background: #FFFFFF;
  border: 1px solid #DCDCE4;
  border-radius: 24px;
  padding: 4px 4px 4px 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-input-wrap:focus-within {
  border-color: #6C72CB;
  box-shadow: 0 0 0 3px rgba(108,114,203,0.1);
}
.ai-input {
  flex: 1; height: 36px; border: none; border-radius: 0;
  padding: 0; font-size: 14px; outline: none;
  background: transparent; color: #1A1A2E;
}
.ai-input::placeholder { color: #B4B4C4; }
.input-send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: #6C72CB; border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.input-send-btn:hover { background: #7B80D4; }
.input-send-btn:active { transform: scale(0.92); background: #5B60BA; }

/* ==================== AI 对话页 ==================== */
.chat-content { background: #F7F8FA; padding: 16px; }

.chat-msg { margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
}
.chat-avatar.ai-avatar {
  background: linear-gradient(135deg, #6C72CB, #8B5CF6);
}
.chat-avatar.user-avatar { background: linear-gradient(135deg, #42A5F5, #1E88E5); }
.chat-bubble {
  max-width: 72%; padding: 12px 16px; border-radius: 18px;
  font-size: 14px; line-height: 1.6;
}
.chat-msg.ai .chat-bubble {
  background: #FFFFFF; border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.chat-msg.user .chat-bubble {
  background: #6C72CB; color: white; border-bottom-right-radius: 4px;
  box-shadow: 0 1px 4px rgba(108,114,203,0.3);
}

/* AI 推荐卡片 */
.chat-result-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-top: 8px;
  cursor: pointer;
}
.chat-result-card:active { background: var(--bg); }
.crc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.crc-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.crc-name { font-weight: 600; font-size: 14px; }
.crc-meta { font-size: 12px; color: var(--text-secondary); }
.crc-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.crc-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.crc-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: rgba(108,114,203,0.1); color: #6C72CB;
}
.crc-action {
  display: inline-block; padding: 6px 20px; background: #6C72CB;
  color: white; border: none; border-radius: 20px; font-size: 13px;
  cursor: pointer;
}
.crc-action:active { background: #5B60BA; }

.chat-typing {
  display: flex; gap: 4px; padding: 8px 0;
}
.chat-typing span {
  width: 6px; height: 6px; background: var(--text-tertiary);
  border-radius: 50%; animation: typing 1.4s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ==================== 圈子 Tab ==================== */
.location-btn {
  display: flex; align-items: center; gap: 3px;
  max-width: 110px; width: auto;
  font-size: 13px; color: var(--text-primary); font-weight: 600;
  padding: 4px 8px 4px 6px; border-radius: 8px;
  transition: background .15s;
}
.location-btn:active { background: rgba(0,0,0,0.04); }
.location-btn span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 热门区域标签 */
.city-hot-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px 16px 16px;
}
.city-hot-tag {
  padding: 6px 14px; border-radius: 16px; border: 1px solid #E8E8E8;
  background: #fff; font-size: 13px; color: #555;
  cursor: pointer; transition: all .15s;
}
.city-hot-tag:active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }

.my-circles-section {
  padding: 12px 16px 8px;
}
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.section-title { font-size: 16px; font-weight: 600; }
.section-actions { display: flex; gap: 8px; align-items: center; }
.text-btn {
  background: none; border: none; color: var(--primary);
  font-size: 13px; cursor: pointer;
}
.create-circle-btn {
  padding: 4px 12px; border-radius: 14px; border: 1px solid var(--primary);
  background: none; color: var(--primary); font-size: 12px; cursor: pointer;
}

.my-circles-avatars { display: flex; gap: 16px; }
.circle-avatar-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.circle-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  object-fit: cover; background: #ECECEC;
}
.circle-avatar-item span {
  font-size: 12px; color: var(--text-secondary);
  max-width: 56px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center;
}

/* 热门推荐 */
.hot-recommend-section {
  padding: 16px; margin-bottom: 8px;
}
.hot-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.hot-scroll::-webkit-scrollbar { display: none; }
.hot-card {
  min-width: 160px; flex-shrink: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
  background: var(--white); box-shadow: var(--card-shadow);
}
.hot-card:active { transform: scale(0.97); }
.hot-card-img {
  height: 90px; position: relative;
  display: flex; align-items: flex-end; padding: 8px;
}
.hot-badge {
  font-size: 11px; background: rgba(255,255,255,0.9);
  padding: 2px 8px; border-radius: 10px; font-weight: 500;
}
.hot-card-text { padding: 8px 10px 2px; font-size: 13px; font-weight: 500; }
.hot-card-meta { padding: 0 10px 8px; font-size: 11px; color: var(--text-tertiary); }

/* 圈子Tab面板 */
.circle-tab-panel { }

/* 关注页 更新提醒条 */
.following-update-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 12px; padding: 10px 14px;
  background: rgba(108,114,203,0.06); border-radius: 10px;
  font-size: 13px; color: #666;
}
.following-update-bar b { color: #6C72CB; font-weight: 700; }
.following-feed { padding: 0 0 8px; }

/* Feed 流 */
.feed-section { padding: 0 0 8px; }
.feed-section-header {
  padding: 6px 16px 8px;
}
.feed-card {
  background: var(--white); padding: 16px;
  margin: 0 12px 10px; cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.feed-card:active { background: #FAFAFA; }
.feed-card.compact { padding: 12px 16px; margin-bottom: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.feed-card.need-card { border-left: 3px solid #FF9800; }

.feed-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-user-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.feed-user-avatar.small { width: 32px; height: 32px; }
.feed-user-info { flex: 1; min-width: 0; }
.feed-username { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.feed-meta { font-size: 12px; color: var(--text-tertiary); display: block; }
.verified-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: var(--primary-bg); color: var(--primary); font-weight: 500;
}
.verified-badge.small { font-size: 9px; padding: 0 4px; }

.follow-btn {
  padding: 4px 14px; border-radius: 14px; border: 1px solid var(--primary);
  background: none; color: var(--primary); font-size: 12px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.follow-btn.following {
  background: var(--bg); border-color: var(--border); color: var(--text-tertiary);
}

.need-badge {
  display: inline-block; font-size: 12px; padding: 2px 10px;
  background: #FFF3E0; color: #E65100; border-radius: 10px;
  margin-bottom: 8px; font-weight: 500;
}

.feed-text { font-size: 14px; line-height: 1.7; color: var(--text-primary); margin-bottom: 10px; }
.feed-images { display: flex; gap: 6px; margin-bottom: 10px; overflow: hidden; }
.feed-img {
  width: 100px; height: 100px; border-radius: var(--radius-sm); flex-shrink: 0;
  object-fit: cover; background: #ECECEC;
}

.feed-circle-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--primary); padding: 3px 10px;
  background: var(--primary-bg); border-radius: 12px;
  margin-bottom: 10px; cursor: pointer;
}
.circle-tag-dot {
  width: 6px; height: 6px; background: var(--primary);
  border-radius: 50%;
}

.feed-actions { display: flex; gap: 24px; }
.feed-action {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-tertiary);
  font-size: 13px; cursor: pointer;
}
.feed-action.liked { color: #FF5252; }

/* Feed 丰富元素 */
.feed-level {
  font-size: 10px; padding: 1px 5px; border-radius: 6px;
  background: linear-gradient(135deg, #FFD54F, #FFB300); color: #fff;
  font-weight: 600; margin-left: 2px;
}
.feed-badges { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.feed-tag-urgent {
  font-size: 11px; padding: 1px 8px; border-radius: 10px;
  background: #FFEBEE; color: #D32F2F; font-weight: 600;
}
.feed-tag-tonight {
  font-size: 11px; padding: 1px 8px; border-radius: 10px;
  background: #E8F5E9; color: #2E7D32; font-weight: 600;
}
.feed-info-bar {
  display: flex; gap: 14px; padding: 8px 10px;
  background: #F8F9FA; border-radius: 8px; margin-bottom: 10px;
}
.feed-info-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-secondary);
}
.feed-comments-area {
  background: #F6F7F9; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px;
}
.feed-hot-comment {
  display: flex; align-items: flex-start; gap: 8px;
}
.feed-hot-comment + .feed-hot-comment {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #ECEDF0;
}
.feed-comment-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
}
.feed-comment-text {
  font-size: 13px; color: #666; line-height: 1.5; flex: 1;
}
.feed-comment-text .comment-name {
  color: #333; font-weight: 600; margin-right: 4px;
}
.feed-comments-more {
  margin-top: 8px; font-size: 12px; color: #999; cursor: pointer;
  padding-left: 30px;
}
.feed-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.feed-activity-bar {
  padding: 10px 12px; background: #FFF8E1; border-radius: 8px;
  margin-bottom: 10px;
}
.feed-activity-info { margin-bottom: 8px; }
.feed-activity-badge {
  font-size: 12px; font-weight: 600; color: #E65100;
}
.feed-activity-meta {
  font-size: 11px; color: var(--text-secondary); margin-left: 6px;
}
.feed-activity-progress { display: flex; align-items: center; gap: 8px; }
.progress-bar {
  flex: 1; height: 6px; background: #FFE0B2; border-radius: 3px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, #FF9800, #F57C00);
  border-radius: 3px;
}
.progress-text { font-size: 11px; color: #E65100; font-weight: 500; white-space: nowrap; }
.feed-join-avatars {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #F3E5F5; border-radius: 8px;
  margin-bottom: 10px;
}
.feed-join-label { font-size: 12px; color: #7B1FA2; font-weight: 500; }
.feed-join-faces { display: flex; margin-left: 2px; }
.feed-join-faces img {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #F3E5F5; margin-left: -6px;
}
.feed-join-faces img:first-child { margin-left: 0; }
.feed-join-btn {
  margin-left: auto; font-size: 12px; padding: 4px 12px;
  border-radius: 14px; border: none;
  background: #7B1FA2; color: white; cursor: pointer; font-weight: 500;
}
.feed-join-btn:active { background: #6A1B9A; }

/* 热门评论 */
.feed-hot-comment {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 8px 0 0;
  background: #F5F5F5; border-radius: 8px; font-size: 12px; color: #666;
}
.feed-hot-comment b { color: #333; font-weight: 500; }
.hot-comment-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.hot-comment-text { line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 通知卡片 */
.notice-card { border-left: 3px solid #1976D2; }

/* ==================== 消息 Tab ==================== */

/* AI助手入口 */
.msg-ai-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 10px 14px 0;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 14px; cursor: pointer;
}
.msg-ai-entry:active { opacity: 0.85; }
.msg-ai-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.msg-ai-avatar span { color: white; font-size: 18px; font-weight: 700; }
.msg-ai-pulse {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--primary); opacity: 0;
  animation: aiPulse 2s ease-out infinite;
}
@keyframes aiPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 0; }
}
.msg-ai-info { flex: 1; min-width: 0; }
.msg-ai-title {
  font-size: 14px; font-weight: 600; color: #1B5E20;
  display: flex; align-items: center; gap: 6px;
}
.msg-ai-online {
  font-size: 10px; color: #fff; background: #43A047;
  padding: 1px 6px; border-radius: 8px; font-weight: 500;
}
.msg-ai-desc { font-size: 12px; color: #4CAF50; margin-top: 2px; }
.msg-ai-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.msg-ai-time { font-size: 11px; color: #7CA67E; flex-shrink: 0; }
.msg-ai-desc-reminder {
  color: #5A4632; font-size: 12px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-ai-desc-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  color: #D95E1F; background: #FFE9D3;
  padding: 1px 5px; border-radius: 4px; margin-right: 4px;
}
.msg-ai-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #FF3B30; color: #fff;
  border-radius: 8px; border: 2px solid #E8F5E9;
  font-size: 10px; font-weight: 700; line-height: 12px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: content-box;
}

/* 搜索栏 */
.msg-search-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 14px 0; padding: 8px 12px;
  background: var(--bg); border-radius: 10px;
}
.msg-search-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 13px; color: #999;
}

/* 分组标题 */
.msg-group-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 6px; font-size: 12px; font-weight: 600; color: #999;
}
.msg-group-count {
  font-size: 11px; color: #FF5252; font-weight: 500;
  background: #FFF0F0; padding: 2px 8px; border-radius: 8px;
}

/* 消息列表 */
.msg-list { background: var(--white); }
.msg-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; position: relative;
}
.msg-item:active { background: var(--bg); }

/* 头像包裹 */
.msg-avatar-wrap { position: relative; flex-shrink: 0; }
.msg-avatar {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.msg-avatar-img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.msg-avatar-count {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 9px; color: #fff; background: rgba(0,0,0,0.45);
  padding: 1px 4px; border-radius: 6px; line-height: 1.2;
}
.msg-online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #43A047; border: 2px solid #fff;
}

.msg-content { flex: 1; min-width: 0; }
.msg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.msg-name { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.msg-time { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.msg-preview {
  font-size: 13px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.msg-source-tag {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: var(--primary-bg); color: var(--primary); flex-shrink: 0;
  font-weight: 500;
}
.msg-source-tag.hot {
  background: #FFF0F0; color: #FF5252;
}
.msg-sub-info {
  margin-top: 4px; font-size: 11px; color: #BDBDBD;
  display: flex; align-items: center; gap: 4px;
}
.msg-sub-item { display: flex; align-items: center; gap: 3px; }
.msg-role-tag {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: #FFF3E0; color: #E65100; font-weight: 500;
}
.msg-trust-score {
  color: #FFB300; font-weight: 500;
}
.msg-badge {
  position: absolute; top: 14px; right: 16px;
  background: #FF5252; color: white; font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; padding: 0 5px;
}

/* ===== 通知Panel ===== */
.notify-quick-entries {
  display: flex; gap: 0; padding: 16px 14px;
  background: var(--white); margin-bottom: 8px;
}
.notify-entry {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.notify-entry:active { opacity: 0.7; }
.notify-entry-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; position: relative;
}
.notify-entry-badge {
  position: absolute; top: -4px; right: -4px;
  background: #FF5252; color: #fff; font-size: 10px;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; padding: 0 4px;
}
.notify-entry-label { font-size: 11px; color: #666; }

/* 通知分组 */
.notify-section { padding: 0 14px; margin-bottom: 8px; }
.notify-section-title {
  font-size: 12px; color: #999; font-weight: 500;
  padding: 12px 0 8px;
}

/* 通知卡片 */
.notify-card {
  display: flex; gap: 12px; padding: 14px;
  background: var(--white); border-radius: 12px;
  margin-bottom: 8px;
}
.notify-card-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ai-notify-icon {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important;
  color: #2E7D32 !important;
}
.notify-card-body { flex: 1; min-width: 0; }
.notify-card-title {
  font-size: 14px; font-weight: 600; margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.notify-ai-tag {
  font-size: 9px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  padding: 1px 6px; border-radius: 6px; font-weight: 600;
}
.notify-card-desc {
  font-size: 13px; color: #666; line-height: 1.5;
}
.notify-card-desc b { color: #333; font-weight: 600; }
.notify-plus { color: #FFB300 !important; }
.notify-card-time { font-size: 11px; color: #BDBDBD; margin-top: 6px; }
.notify-card-actions {
  display: flex; gap: 8px; margin-top: 8px;
}
.notify-card-btn {
  font-size: 12px; padding: 5px 16px; border-radius: 14px;
  border: 1px solid #E0E0E0; background: #fff; color: #666;
  cursor: pointer; font-weight: 500;
}
.notify-card-btn.primary {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.notify-card-btn:active { opacity: 0.8; }

/* ==================== 我的 Tab ==================== */

/* 头部渐变区域 */
.pro-header {
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%);
  padding: 58px 16px 20px; color: #fff;
  position: relative; overflow: hidden;
}
.pro-header-deco {
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,114,203,0.25), transparent 70%);
  pointer-events: none;
}

/* 用户行 */
.pro-user-row {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px;
  position: relative; z-index: 1;
}
.pro-avatar-wrap { position: relative; flex-shrink: 0; }
.pro-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.3);
}
.pro-avatar-badge {
  position: absolute; bottom: -2px; right: -4px;
  font-size: 9px; font-weight: 700; color: #1A1A2E;
  background: linear-gradient(135deg, #FFD54F, #FFB300);
  padding: 2px 6px; border-radius: 8px;
  border: 2px solid #1A1A2E;
}
.pro-user-info { flex: 1; min-width: 0; padding-top: 2px; }
.pro-user-name { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.pro-user-bio { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.pro-user-loc {
  font-size: 11px; color: rgba(255,255,255,0.4);
  display: flex; align-items: center; gap: 3px;
}
.pro-edit-btn {
  flex-shrink: 0; font-size: 12px; padding: 5px 14px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  cursor: pointer; margin-top: 4px;
}
.pro-edit-btn:active { background: rgba(255,255,255,0.15); }

/* 兴趣标签 */
.pro-tags {
  display: flex; gap: 8px; margin-bottom: 16px;
  flex-wrap: wrap; position: relative; z-index: 1;
}
.pro-tag {
  font-size: 11px; padding: 4px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
}

/* 社交数据 */
.pro-stats-row {
  display: flex; align-items: center; justify-content: center; gap: 0;
  background: rgba(255,255,255,0.06); border-radius: 12px;
  padding: 14px 0; position: relative; z-index: 1;
}
.pro-stat { flex: 1; text-align: center; cursor: pointer; }
.pro-stat-num {
  font-size: 20px; font-weight: 700; display: block; line-height: 1.2;
  background: linear-gradient(135deg, #fff, #B0BEC5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pro-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); }
.pro-stat-divider {
  width: 1px; height: 24px; background: rgba(255,255,255,0.1); flex-shrink: 0;
}

/* 亮度卡片 */
.pro-trust-card {
  margin: -12px 14px 0; padding: 14px 16px;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  position: relative; z-index: 2;
  cursor: pointer;
}

/* ==================== 设置页 ==================== */
.set-account {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; background: #fff; margin-bottom: 12px;
  cursor: pointer;
}
.set-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.set-account-info { flex: 1; min-width: 0; }
.set-account-name { font-size: 17px; font-weight: 700; color: #222; display: flex; align-items: center; gap: 8px; }
.set-account-lv {
  font-size: 10px; font-weight: 700; color: #FF7A1F;
  background: #FFF4D6; padding: 2px 8px; border-radius: 10px;
}
.set-account-sub { font-size: 12px; color: #999; margin-top: 4px; }

.set-group { margin-bottom: 12px; }
.set-group-title {
  font-size: 12px; color: #999; font-weight: 500;
  padding: 10px 16px 6px;
}
.set-list { background: #fff; }
.set-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #F5F6F8;
  cursor: pointer;
}
.set-item:last-child { border-bottom: none; }
.set-item:active { background: #FAFAFA; }
.set-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.set-label { flex: 1; font-size: 14px; color: #222; }
.set-label.warn { color: #E53935; }
.set-value { font-size: 12px; color: #999; }
.set-value.warn { color: #E53935; font-weight: 600; }
.set-arrow { flex-shrink: 0; }

/* Switch */
.set-switch { position: relative; width: 42px; height: 24px; display: inline-block; flex-shrink: 0; }
.set-switch input { opacity: 0; width: 0; height: 0; }
.set-slider {
  position: absolute; inset: 0; background: #E0E1E6; border-radius: 24px;
  transition: 0.2s;
}
.set-slider::before {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.set-switch input:checked + .set-slider { background: #FF9A1F; }
.set-switch input:checked + .set-slider::before { transform: translateX(18px); }

.set-logout-wrap { padding: 20px 16px 8px; }
.set-logout {
  width: 100%; padding: 13px 0;
  background: #fff; color: #E53935;
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.set-logout:active { background: #FAFAFA; }
.set-footer {
  text-align: center; font-size: 11px; color: #BBB;
  line-height: 1.6; padding: 16px 0 8px;
}

/* ==================== 关于亮圈 ==================== */
.about-hero {
  padding: 32px 20px 24px;
  background: #fff;
  text-align: center;
  margin-bottom: 12px;
}
.about-logo {
  width: 84px; height: 84px; border-radius: 22px;
  background: linear-gradient(135deg, #FFB84D, #FF7A1F);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; margin: 0 auto 14px;
  box-shadow: 0 10px 24px rgba(255,122,31,0.3);
}
.about-name { font-size: 24px; font-weight: 800; color: #222; letter-spacing: 2px; }
.about-version { font-size: 12px; color: #999; margin-top: 4px; }
.about-slogan {
  font-size: 13px; color: #FF7A1F; margin-top: 10px;
  padding: 4px 14px; border-radius: 14px;
  background: #FFF4D6; display: inline-block; font-weight: 500;
}
.about-intro {
  margin: 0 14px 12px; padding: 16px;
  background: #fff; border-radius: 14px;
  font-size: 13px; color: #555; line-height: 1.7;
}
.about-stats {
  display: flex; margin: 0 14px 12px;
  background: #fff; border-radius: 14px;
  padding: 16px 0;
}
.about-stat { flex: 1; text-align: center; border-right: 1px solid #F0F1F3; }
.about-stat:last-child { border-right: none; }
.about-stat-num {
  font-size: 20px; font-weight: 800;
  background: linear-gradient(135deg, #FF9A1F, #FF7A1F);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.about-stat-label { font-size: 11px; color: #999; margin-top: 2px; }
.about-footer {
  text-align: center; font-size: 11px; color: #AAA;
  line-height: 1.8; padding: 20px 14px 8px;
}

/* ==================== 协议/隐私文档 ==================== */
.doc-wrap { padding: 20px 18px 8px; }
.doc-title {
  font-size: 20px; font-weight: 800; color: #222;
  text-align: center;
}
.doc-meta {
  font-size: 11px; color: #999;
  text-align: center; margin-top: 6px; margin-bottom: 16px;
}
.doc-notice {
  background: #FFF9EE; border: 1px solid #FFE8B8;
  border-radius: 10px; padding: 12px 14px;
  font-size: 12px; color: #8A6B2E; line-height: 1.6;
  display: flex; gap: 8px; margin-bottom: 18px;
}
.doc-notice-icon { flex-shrink: 0; }
.doc-h {
  font-size: 15px; font-weight: 700; color: #222;
  margin: 20px 0 10px;
}
.doc-wrap p {
  font-size: 13px; color: #555; line-height: 1.8;
  margin: 6px 0;
}
.doc-wrap p b { color: #222; font-weight: 700; }
.doc-end {
  text-align: center; font-size: 12px; color: #AAA;
  padding: 24px 0 8px;
}

/* ==================== 意见反馈 ==================== */
.fb-history { font-size: 13px; color: #FF9A1F; padding-right: 12px; }

.fb-section {
  background: #fff; margin-bottom: 10px;
  padding: 14px 16px 16px;
}
.fb-section-title {
  font-size: 13px; color: #222; font-weight: 600;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.fb-required { font-size: 11px; color: #E53935; font-weight: 500; }
.fb-optional { font-size: 11px; color: #999; font-weight: 400; }

.fb-types {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fb-type {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 6px;
  background: #F5F6F8; border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.fb-type.active {
  background: #FFF4D6; border-color: #FFD98A;
}
.fb-type-icon { font-size: 22px; margin-bottom: 4px; }
.fb-type-label { font-size: 12px; color: #555; }
.fb-type.active .fb-type-label { color: #FF7A1F; font-weight: 600; }

.fb-textarea-wrap {
  position: relative;
  background: #F5F6F8; border-radius: 10px;
  padding: 12px; padding-bottom: 28px;
}
.fb-textarea {
  width: 100%; min-height: 100px;
  border: none; background: transparent; resize: none;
  font-size: 14px; color: #222; line-height: 1.6;
  outline: none; font-family: inherit;
}
.fb-textarea::placeholder { color: #BBB; }
.fb-count {
  position: absolute; right: 12px; bottom: 8px;
  font-size: 11px; color: #BBB;
}
.fb-tips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.fb-tip {
  font-size: 11px; color: #666;
  padding: 4px 10px; background: #F5F6F8;
  border-radius: 12px;
  cursor: pointer;
}
.fb-tip:active { background: #FFF4D6; color: #FF7A1F; }

.fb-upload-list { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-upload-item {
  width: 68px; height: 68px;
  background: #F5F6F8;
  border: 1.5px dashed #D0D2D8;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
}
.fb-upload-plus { font-size: 24px; color: #BBB; font-weight: 300; line-height: 1; }
.fb-upload-text { font-size: 10px; color: #999; margin-top: 2px; }

.fb-contact { margin-bottom: 10px; }
.fb-input {
  width: 100%; padding: 12px 14px;
  background: #F5F6F8; border: none; border-radius: 10px;
  font-size: 14px; color: #222;
  outline: none; font-family: inherit;
  box-sizing: border-box;
}
.fb-input::placeholder { color: #BBB; }

.fb-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #666;
  cursor: pointer; user-select: none;
}
.fb-check input { display: none; }
.fb-check-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid #D0D2D8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: 0.15s;
}
.fb-check input:checked + .fb-check-box {
  background: #FF9A1F; border-color: #FF9A1F;
}
.fb-check input:checked + .fb-check-box::after {
  content: '✓'; color: #fff; font-size: 12px; font-weight: 700;
}

.fb-device-info {
  background: #FAFAFB; border-radius: 10px; padding: 4px 12px;
}
.fb-device-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #F0F1F3;
  font-size: 12px; color: #666;
}
.fb-device-row:last-child { border-bottom: none; }
.fb-device-row span:last-child { color: #999; }

.fb-submit-wrap { padding: 20px 16px 8px; }
.fb-submit {
  width: 100%; padding: 14px 0;
  background: linear-gradient(135deg, #FFB84D, #FF7A1F);
  color: #fff; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(255,122,31,0.3);
  cursor: pointer;
}
.fb-submit:active { transform: scale(0.98); }
.fb-notice {
  margin-top: 14px; text-align: center;
  font-size: 11px; color: #AAA; line-height: 1.6;
}
.fb-type { transition: all 0.15s; }
.fb-type:active { transform: scale(0.96); }

/* 反馈历史 */
.fbh-filter {
  display: flex; gap: 8px;
  padding: 12px 14px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.fbh-filter::-webkit-scrollbar { display: none; }
.fbh-f {
  flex-shrink: 0;
  font-size: 12px; color: #666;
  padding: 6px 14px; border-radius: 14px;
  background: #F5F6F8;
  cursor: pointer;
}
.fbh-f.active { background: #FFF4D6; color: #FF7A1F; font-weight: 600; }

.fbh-list { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.fbh-card {
  background: #fff; border-radius: 14px;
  padding: 14px 14px 12px;
}
.fbh-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fbh-type {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #FF7A1F; font-weight: 600;
  background: #FFF4D6; padding: 4px 10px; border-radius: 12px;
}
.fbh-status {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 10px;
}
.fbh-status.pending { background: #FFF3E0; color: #FB8C00; }
.fbh-status.replied { background: #E8F5E9; color: #43A047; }
.fbh-status.closed { background: #F0F1F3; color: #888; }

.fbh-content {
  font-size: 13px; color: #333; line-height: 1.6;
}
.fbh-imgs { display: flex; gap: 6px; margin-top: 10px; }
.fbh-img {
  width: 56px; height: 56px; border-radius: 8px;
}
.fbh-foot {
  display: flex; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #F5F6F8;
  font-size: 11px; color: #999;
}
.fbh-id { font-family: 'SF Mono', monospace; color: #BBB; }

.fbh-reply {
  margin-top: 10px; padding: 10px 12px;
  background: #FAFAFB; border-radius: 10px;
  border-left: 3px solid #FF9A1F;
}
.fbh-reply.pending-reply {
  border-left-color: #FB8C00;
  display: flex; align-items: center; gap: 8px;
}
.fbh-reply-icon { font-size: 14px; }
.fbh-reply-text { font-size: 12px; color: #FB8C00; }
.fbh-reply-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.fbh-reply-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF9A1F; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fbh-reply-name { font-size: 12px; color: #FF7A1F; font-weight: 600; }
.fbh-reply-date { font-size: 11px; color: #AAA; margin-left: auto; }
.fbh-reply-body {
  font-size: 12px; color: #555; line-height: 1.6;
}
.fbh-reply-actions { display: flex; gap: 8px; margin-top: 10px; }
.fbh-act {
  font-size: 11px; color: #666;
  padding: 5px 12px;
  background: #fff; border: 1px solid #E8EAEE;
  border-radius: 12px;
  cursor: pointer;
}
.fbh-act.helpful { color: #FF7A1F; border-color: #FFD98A; background: #FFF9EE; }
.fbh-empty-hint {
  text-align: center; font-size: 11px; color: #BBB;
  padding: 18px 0 8px;
}

/* ==================== 亮度详情页 ==================== */
.bd-header { background: transparent; border-bottom: none; position: absolute; left: 0; right: 0; top: 0; z-index: 10; color: #fff; }
.bd-header .header-title { color: #fff; }
.bd-header .header-btn { color: #fff; }

.bd-hero { position: relative; padding: 60px 20px 24px; overflow: hidden; }
.bd-hero-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #FFB84D 0%, #FF9A1F 45%, #FF7A1F 100%); }
.bd-hero-bg::before { content:''; position:absolute; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%); top:-80px; right:-60px; }
.bd-hero-bg::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%); bottom:-60px; left:-40px; }
.bd-hero-inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.bd-badge { position: relative; display: inline-block; margin-bottom: 10px; }
.bd-badge-ring {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 3px solid rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(255,122,31,0.35);
}
.bd-badge-emoji { font-size: 40px; }
.bd-badge-lv {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #FF7A1F; font-weight: 800; font-size: 12px;
  padding: 2px 10px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.bd-hero-title { font-size: 26px; font-weight: 800; margin-top: 14px; letter-spacing: 2px; }
.bd-hero-sub { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.bd-hero-points { margin-top: 14px; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.bd-points-num { font-size: 34px; font-weight: 800; line-height: 1; }
.bd-points-unit { font-size: 13px; opacity: 0.9; }
.bd-hero-bar {
  margin: 14px 10px 8px; height: 8px; border-radius: 10px;
  background: rgba(255,255,255,0.3); overflow: hidden;
}
.bd-hero-fill { height: 100%; background: linear-gradient(90deg, #fff, #FFE28A); border-radius: 10px; }
.bd-hero-next { font-size: 12px; opacity: 0.9; }
.bd-hero-next b { font-weight: 700; }

.bd-section { margin: 12px 14px; background: #fff; border-radius: 14px; padding: 14px 14px 16px; }
.bd-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.bd-section-title { font-size: 15px; font-weight: 700; color: #222; }
.bd-section-sub { font-size: 11px; color: #999; }
.bd-section-link { font-size: 12px; color: #FF9A1F; }

/* 成长阶梯 */
.bd-ladder { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 0 2px; }
.bd-ladder-item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 40px; }
.bd-ladder-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: #F0F1F3; color: #BBB; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #F0F1F3;
}
.bd-ladder-item.done .bd-ladder-dot { background: #FFF4D6; color: #FF9A1F; border-color: #FFD98A; }
.bd-ladder-item.current .bd-ladder-dot {
  background: linear-gradient(135deg, #FFB84D, #FF7A1F); color: #fff;
  border-color: #FFE28A; transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(255,122,31,0.35);
}
.bd-ladder-name { font-size: 11px; color: #666; margin-top: 6px; font-weight: 500; }
.bd-ladder-item.current .bd-ladder-name { color: #FF7A1F; font-weight: 700; }
.bd-ladder-pt { font-size: 10px; color: #AAA; margin-top: 1px; }
.bd-ladder-line { flex: 1; height: 2px; background: #F0F1F3; margin-top: 15px; border-radius: 2px; }
.bd-ladder-line.done { background: #FFD98A; }

/* 权益滚动卡片 */
.bd-perks-section { padding: 14px 0 14px; }
.bd-perks-section .bd-section-header { padding: 0 14px; }
.bd-perks-scroll {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 4px 14px 10px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bd-perks-scroll::-webkit-scrollbar { display: none; }
.bd-perk-card {
  flex: 0 0 calc(50% - 20px);
  scroll-snap-align: start;
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: #F7F8FA;
  border: 1.5px solid #ECEEF2;
  min-height: 200px;
  position: relative;
}
.bd-perk-card.current {
  background: linear-gradient(160deg, #FFF4D6 0%, #FFE9B8 100%);
  border-color: #FFD98A;
  box-shadow: 0 8px 24px rgba(255,154,31,0.18);
}
.bd-perk-card.next {
  background: linear-gradient(160deg, #F5F6F8 0%, #ECEEF2 100%);
  border-style: dashed;
  border-color: #D0D2D8;
}
.bd-perk-card-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bd-perk-card-emoji {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.bd-perk-card.current .bd-perk-card-emoji {
  background: #fff;
  box-shadow: 0 2px 8px rgba(255,154,31,0.25);
}
.bd-perk-card-info { flex: 1; min-width: 0; }
.bd-perk-card-lv { font-size: 14px; font-weight: 800; color: #222; }
.bd-perk-card.current .bd-perk-card-lv { color: #FF7A1F; }
.bd-perk-card.next .bd-perk-card-lv { color: #666; }
.bd-perk-card-tag {
  display: inline-block; margin-top: 3px;
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: #D0D2D8; color: #fff; font-weight: 600;
}
.bd-perk-card-tag.current { background: #FF7A1F; }
.bd-perk-card-tag.prev { background: #B0B2B8; }
.bd-perk-card-tag.next { background: #8A8C92; }
.bd-perk-card-list { display: flex; flex-direction: column; gap: 2px; }
.bd-perk-row {
  font-size: 12px; color: #555;
  padding: 3px 0; line-height: 1.4;
}
.bd-perk-card.current .bd-perk-row { color: #5A4220; }
.bd-perk-row.new {
  color: #FF7A1F; font-weight: 600;
}
.bd-perk-row.locked { color: #999; }
.bd-perk-card-cta {
  margin-top: 10px; padding: 8px 0; text-align: center;
  background: #fff; border-radius: 10px;
  font-size: 12px; color: #FF7A1F; font-weight: 700;
  border: 1px solid #FFD98A;
}
.bd-perks-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 2px;
}
.bd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #D8DADE;
}
.bd-dot.active { background: #FF7A1F; width: 18px; border-radius: 3px; }

/* 升级条件 */
.bd-cond-list { display: flex; flex-direction: column; gap: 2px; }
.bd-cond-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid #F5F6F8;
}
.bd-cond-item:last-child { border-bottom: none; }
.bd-cond-icon { font-size: 16px; }
.bd-cond-text { flex: 1; font-size: 13px; color: #333; }
.bd-cond-item.todo .bd-cond-text { color: #555; }
.bd-cond-progress { font-size: 11px; color: #999; }
.bd-cond-item.done .bd-cond-progress { color: #4CAF50; }
.bd-cond-go { font-size: 12px; color: #FF9A1F; font-weight: 600; }

/* 赚亮点任务 */
.bd-task-list { display: flex; flex-direction: column; gap: 2px; }
.bd-task-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid #F5F6F8;
}
.bd-task-item:last-child { border-bottom: none; }
.bd-task-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.bd-task-info { flex: 1; min-width: 0; }
.bd-task-name { font-size: 14px; font-weight: 600; color: #222; }
.bd-task-desc { font-size: 11px; color: #999; margin-top: 2px; }
.bd-task-reward {
  font-size: 13px; font-weight: 700; color: #FF9A1F;
  padding: 4px 10px; border-radius: 14px; background: #FFF4D6;
  flex-shrink: 0;
}
.bd-task-reward.hot { background: #FF7A1F; color: #fff; }
.bd-task-reward.done { background: #F0F1F3; color: #999; font-weight: 500; }

/* 亮点明细 */
.bd-log-list { display: flex; flex-direction: column; gap: 2px; }
.bd-log-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid #F5F6F8;
}
.bd-log-item:last-child { border-bottom: none; }
.bd-log-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.bd-log-info { flex: 1; min-width: 0; }
.bd-log-name {
  font-size: 13px; color: #222;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-log-time { font-size: 11px; color: #999; margin-top: 2px; }
.bd-log-pt { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.bd-log-pt.up { color: #FF9A1F; }

/* 信誉分 */
.bd-credit-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px;
}
.bd-credit-title { font-size: 15px; font-weight: 700; color: #222; }
.bd-credit-desc { font-size: 12px; color: #999; margin-top: 3px; }
.bd-credit-right { display: flex; align-items: center; gap: 8px; }
.bd-credit-num {
  font-size: 30px; font-weight: 800;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.bd-credit-tag {
  font-size: 11px; color: #2E7D32; background: #E8F5E9;
  padding: 3px 8px; border-radius: 10px; font-weight: 600;
}
.pro-trust-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; cursor: pointer;
}
.pro-trust-left { display: flex; align-items: center; gap: 10px; }
.pro-trust-icon { font-size: 28px; }
.pro-trust-title { font-size: 15px; font-weight: 600; display: block; }
.pro-trust-sub { font-size: 11px; color: #999; }
.pro-trust-bar {
  height: 6px; background: #F0F0F0; border-radius: 3px;
  overflow: hidden; margin-bottom: 10px;
}
.pro-trust-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FFD54F, #FFB300);
  transition: width 1s ease;
}
.pro-trust-perks { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-perk {
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: #F5F5F5; color: #999;
}
.pro-perk.done { background: #E8F5E9; color: #2E7D32; }
.pro-perk.next { background: #FFF8E1; color: #F57F17; }

/* 通用section */
.pro-section {
  background: var(--white); margin: 10px 0 0; padding: 16px;
}
.pro-section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.pro-section-title { font-size: 16px; font-weight: 600; }
.pro-section-link { font-size: 13px; color: var(--primary); cursor: pointer; }

/* 我的数据宫格 */
.pro-data-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.pro-data-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; cursor: pointer; border-radius: 12px;
  transition: background 0.2s;
}
.pro-data-item:active { background: var(--bg); }
.pro-data-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.pro-data-num { font-size: 18px; font-weight: 700; color: #333; line-height: 1; }
.pro-data-label { font-size: 11px; color: #999; }

/* 圈子管理中心 */
.pro-manage-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.pro-manage-item {
  text-align: center; padding: 12px 4px;
  background: var(--bg); border-radius: 10px; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.pro-manage-item:active { background: #E8E8E8; }
.pro-manage-item.alert::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: #FF5252;
}
.pro-manage-num {
  font-size: 22px; font-weight: 700; color: var(--primary); display: block;
  line-height: 1.2;
}
.pro-manage-label { font-size: 11px; color: var(--text-secondary); }

/* 近期成就 */
.pro-achieve-list { display: flex; flex-direction: column; gap: 0; }
.pro-achieve-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pro-achieve-item:last-child { border: none; }
.pro-achieve-icon { font-size: 28px; flex-shrink: 0; }
.pro-achieve-info { flex: 1; min-width: 0; }
.pro-achieve-name { font-size: 14px; font-weight: 600; display: block; margin-bottom: 2px; }
.pro-achieve-desc { font-size: 12px; color: #999; }
.pro-achieve-date { font-size: 11px; color: #BDBDBD; flex-shrink: 0; }
.pro-achieve-progress .pro-achieve-icon.dim { filter: grayscale(.5); opacity: .6; }
.pro-achieve-progress .pro-achieve-date { color: var(--primary); font-weight: 600; }
.pro-achieve-bar {
  width: 100%; height: 4px; background: #F0F0F0; border-radius: 2px; margin-top: 6px;
}
.pro-achieve-fill {
  height: 100%; background: linear-gradient(90deg, var(--primary), #4DB6AC); border-radius: 2px;
}

/* 常用工具 */
.pro-tools-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.pro-tool-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; cursor: pointer; border-radius: 8px;
  transition: background 0.2s;
}
.pro-tool-item:active { background: var(--bg); }
.pro-tool-icon { font-size: 22px; }
.pro-tool-item span:last-child { font-size: 12px; color: #666; }

/* ==================== 发现圈子页 ==================== */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px; padding: 0 12px; height: 40px;
  background: var(--white); border-radius: 20px;
  box-shadow: var(--card-shadow);
}
.search-ai-icon {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.search-input {
  flex: 1; border: none; outline: none; font-size: 14px;
  background: none; color: var(--text-primary);
}
.search-input::placeholder { color: var(--text-tertiary); }

.filter-bar {
  display: flex; gap: 8px; padding: 0 16px; overflow-x: auto;
  margin-bottom: 8px;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar.sub { margin-bottom: 12px; }
.filter-chip {
  padding: 5px 14px; border-radius: 16px; border: 1px solid #E0E0E0;
  background: var(--white); font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.filter-chip.small { padding: 3px 10px; font-size: 12px; }
.filter-chip.active {
  background: var(--primary); color: white; border-color: var(--primary);
}

.discover-list-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px; margin-bottom: 8px;
  font-size: 14px; font-weight: 600;
}
.discover-count { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }

.circle-list { padding: 0 16px; }
.circle-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--white); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer; box-shadow: var(--card-shadow);
}
.circle-list-item:active { background: #FAFAFA; }
.circle-list-avatar {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.circle-list-info { flex: 1; min-width: 0; }
.circle-list-top { display: flex; justify-content: space-between; align-items: center; }
.circle-list-name { font-size: 15px; font-weight: 600; }
.circle-list-dist { font-size: 12px; color: var(--primary); }
.circle-list-meta { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 4px; }
.circle-list-tags { display: flex; gap: 4px; }
.cl-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: var(--primary-bg); color: var(--primary);
}

.join-btn {
  padding: 5px 16px; border-radius: 16px;
  background: var(--primary); color: white; border: none;
  font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.join-btn:active { background: var(--primary-dark); }
.join-btn.joined {
  background: var(--bg); color: var(--text-tertiary); border: 1px solid var(--border);
}

/* ==================== 圈子详情页 ==================== */
.circle-back-btn {
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  box-shadow: var(--card-shadow);
}

/* 封面 */
.cd-cover { position: relative; height: 200px; overflow: hidden; }
.cd-cover img { width: 100%; height: 100%; object-fit: cover; }
.cd-cover-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.cd-cover-info {
  position: absolute; bottom: 14px; left: 16px; right: 16px;
  display: flex; align-items: flex-end; gap: 12px;
}
.cd-avatar-wrap { position: relative; flex-shrink: 0; }
.cd-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; border: 2.5px solid #fff; background: #E8F5E9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.cd-trust-lv {
  position: absolute; bottom: -4px; right: -4px;
  font-size: 9px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #FFB300, #FF8F00);
  padding: 1px 5px; border-radius: 6px; border: 1.5px solid #fff;
}
.cd-title-wrap { flex: 1; min-width: 0; }
.cd-title { color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 3px; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.cd-subtitle {
  font-size: 12px; color: rgba(255,255,255,0.8);
  display: flex; align-items: center; gap: 3px;
}

/* 数据条 */
.cd-stats-row {
  display: flex; align-items: center; justify-content: space-around;
  padding: 14px 16px; background: #fff;
}
.cd-stat { text-align: center; flex: 1; }
.cd-stat-num { font-size: 17px; font-weight: 700; color: var(--text-primary); display: block; line-height: 1.2; }
.cd-stat-label { font-size: 11px; color: var(--text-tertiary); }
.cd-stat-sep { width: 1px; height: 24px; background: #F0F0F0; }

/* 简介卡 */
.cd-intro-card {
  margin: 10px 14px 0; padding: 14px; background: #fff;
  border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.cd-intro-text { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 10px; }
.cd-intro-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cd-itag {
  font-size: 11px; padding: 4px 10px; border-radius: 8px;
  background: #F5F5F5; color: #666;
}

/* 团队卡 */
.cd-team-card {
  margin: 10px 14px 0; padding: 14px; background: #fff;
  border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.cd-team-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 12px; }
.cd-team-list { display: flex; gap: 20px; }
.cd-team-member { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cd-team-avatar { width: 40px; height: 40px; border-radius: 50%; }
.cd-team-name { font-size: 12px; color: #333; font-weight: 500; }
.cd-team-role {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: #F0F0F0; color: #999;
}
.cd-team-role.owner {
  background: linear-gradient(135deg, #FFB300, #FF8F00);
  color: #fff;
}

/* 置顶活动 */
.cd-event-card {
  margin: 10px 14px 0; padding: 14px; background: #fff;
  border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 3px solid var(--primary);
}
.cd-event-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.cd-event-badge { font-size: 12px; font-weight: 600; color: var(--primary); }
.cd-event-status {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 8px;
  background: #E8F5E9; color: #2E7D32;
}
.cd-event-status.hot { background: #FFF3E0; color: #E65100; }
.cd-event-title { font-size: 15px; font-weight: 600; color: #1A1A1A; margin-bottom: 8px; }
.cd-event-detail { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cd-event-row {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888;
}
.cd-event-footer {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px solid #F5F5F5;
}
.cd-event-faces { display: flex; }
.cd-event-faces img {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -6px; object-fit: cover;
}
.cd-event-faces img:first-child { margin-left: 0; }
.cd-event-count { flex: 1; font-size: 11px; color: #999; }
.cd-event-join {
  padding: 5px 16px; border-radius: 14px; border: none;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Tab栏 */
.cd-tabs {
  display: flex; background: #fff; padding: 0 14px;
  margin-top: 10px; position: sticky; top: 0; z-index: 5;
  box-shadow: 0 1px 0 #F0F0F0;
}
.cd-tab {
  padding: 11px 14px; border: none; background: none;
  font-size: 13px; color: #999; cursor: pointer;
  border-bottom: 2px solid transparent; font-weight: 500;
  display: flex; align-items: center; gap: 3px;
}
.cd-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cd-tab-num { font-size: 11px; opacity: 0.7; }

/* 圈内动态Feed */
.cd-feed { padding: 6px 14px 80px; background: var(--bg); }
.cd-feed-item {
  display: flex; gap: 10px; padding: 14px;
  background: #fff; border-radius: 12px;
  margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cd-feed-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.cd-feed-body { flex: 1; min-width: 0; }
.cd-feed-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.cd-feed-name { font-size: 13px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 4px; }
.cd-feed-time { font-size: 11px; color: #C0C0C0; }
.cd-role-tag {
  font-size: 9px; font-weight: 600; color: #fff; padding: 1px 5px;
  border-radius: 4px; background: linear-gradient(135deg, #26A69A, #00897B);
}
.cd-feed-text { font-size: 13px; color: #444; line-height: 1.6; margin-bottom: 8px; }

.cd-feed-imgs { display: flex; gap: 6px; margin-bottom: 8px; }
.cd-feed-img {
  width: 100px; height: 100px; border-radius: 8px; object-fit: cover;
}

.cd-feed-notice {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: #F0FAF8; border-radius: 8px;
  font-size: 12px; color: var(--primary); margin-bottom: 8px;
}

.cd-feed-reply-hint {
  padding: 8px 10px; background: #FAFAFA; border-radius: 8px;
  margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px;
}
.cd-reply-count { font-size: 11px; font-weight: 600; color: var(--primary); }
.cd-reply-preview { font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-feed-actions { display: flex; gap: 16px; }
.cd-feed-act {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: #C0C0C0;
  font-size: 12px; cursor: pointer;
}
.cd-feed-act.liked { color: #FF5252; }

/* 底部操作栏 */
.cd-bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #fff; box-shadow: 0 -1px 6px rgba(0,0,0,0.06); z-index: 20;
}
.cd-bottom-input {
  flex: 1; display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; background: #F5F5F5; border-radius: 20px;
  font-size: 13px; color: #C0C0C0; cursor: pointer;
}
.cd-bottom-join {
  padding: 9px 22px; border-radius: 20px; border: none;
  background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  flex-shrink: 0; transition: all .15s;
}
.cd-bottom-join:active { transform: scale(0.96); background: var(--primary-dark); }

/* ==================== 帖子详情页 ==================== */
.post-detail { background: var(--white); padding: 16px; }
.post-author { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.post-author-avatar { width: 44px; height: 44px; border-radius: 50%; }
.post-author-info { flex: 1; }
.post-author-name { font-size: 15px; font-weight: 600; display: block; }
.post-author-meta { font-size: 12px; color: var(--text-tertiary); }
.post-body { margin-bottom: 16px; }
.post-body p { font-size: 15px; line-height: 1.8; margin-bottom: 8px; }

.post-circle-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg); border-radius: var(--radius);
  margin-bottom: 16px; cursor: pointer;
}
.pcl-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pcl-info { flex: 1; }
.pcl-name { font-size: 14px; font-weight: 500; display: block; }
.pcl-meta { font-size: 12px; color: var(--text-tertiary); }
.pcl-arrow { font-size: 20px; color: var(--text-tertiary); }

.post-actions-bar {
  display: flex; justify-content: space-around;
  padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.pa-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-secondary);
  font-size: 13px; cursor: pointer;
}

/* 评论区 */
.comments-section { padding-top: 4px; }
.comments-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.comments-title { font-size: 16px; font-weight: 700; color: #1A1A1A; }
.comments-count {
  font-size: 12px; color: var(--text-tertiary); background: #F0F0F0;
  padding: 1px 8px; border-radius: 10px; font-weight: 500;
}
.comments-sort { margin-left: auto; display: flex; gap: 4px; }
.sort-btn {
  font-size: 12px; padding: 3px 10px; border-radius: 12px;
  border: none; background: #F0F0F0; color: #999; cursor: pointer;
}
.sort-btn.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }

.comment-item {
  display: flex; gap: 10px; padding-bottom: 16px;
  margin-bottom: 16px; border-bottom: 1px solid #F2F2F2;
}
.comment-item:last-child { border-bottom: none; margin-bottom: 0; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.comment-name { font-size: 14px; font-weight: 600; color: #333; }
.comment-location { font-size: 11px; color: #B0B0B0; }
.comment-text {
  font-size: 15px; line-height: 1.7; color: #2A2A2A; margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.comment-bottom {
  display: flex; justify-content: space-between; align-items: center;
}
.comment-time { font-size: 12px; color: #C0C0C0; }
.comment-actions { display: flex; gap: 16px; }
.comment-action-btn, .comment-like-btn {
  display: flex; align-items: center; gap: 3px;
  background: none; border: none; font-size: 12px;
  color: #B0B0B0; cursor: pointer; padding: 0;
}
.comment-action-btn:active, .comment-like-btn:active { opacity: 0.6; }
.comment-like-btn.liked { color: #FF4757; }

/* 子评论/楼主回复 */
.comment-reply {
  margin-top: 10px; padding: 10px 12px;
  background: #F7F8FA; border-radius: 10px;
}
.comment-reply-item {
  display: flex; align-items: flex-start; gap: 8px;
}
.comment-reply-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
}
.comment-reply-content { flex: 1; font-size: 13px; color: #555; line-height: 1.5; }
.comment-reply-name { font-weight: 600; color: #333; margin-right: 4px; }
.comment-reply-badge {
  font-size: 10px; padding: 0px 5px; border-radius: 4px;
  background: var(--primary); color: white; font-weight: 600;
  margin-right: 4px; vertical-align: middle;
}
.comment-reply-text { color: #555; }

/* 底部评论输入 */
.post-comment-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 12px; background: var(--white);
  border-top: 1px solid #F0F0F0; flex-shrink: 0;
}
.comment-input {
  flex: 1; height: 38px; border: 1px solid #ECECEC;
  border-radius: 20px; padding: 0 16px; font-size: 14px;
  outline: none; background: #F5F5F5; transition: all .2s;
}
.comment-input:focus { background: #FFF; border-color: var(--primary); }
.comment-send-btn {
  padding: 7px 18px; background: var(--primary); color: white;
  border: none; border-radius: 20px; font-size: 14px;
  cursor: pointer; font-weight: 500;
}
.comment-send-btn:active { background: var(--primary-dark); }

/* ==================== 底部导航栏 ==================== */
.tab-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 70px; background: var(--white);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; align-items: center;
  padding: 0 8px 12px;
  z-index: 50;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); position: relative;
  padding: 6px 12px;
}
.tab-item.active { color: var(--primary); }
.tab-icon { width: 24px; height: 24px; }
.tab-item.active .tab-icon { stroke: var(--primary); }
.tab-label { font-size: 11px; }
.tab-badge {
  position: absolute; top: 0; right: 4px;
  background: #FF5252; color: white; font-size: 10px;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; padding: 0 4px;
}


/* ==================== 发布页 ==================== */
.publish-btn {
  padding: 6px 20px; background: var(--primary); color: white;
  border: none; border-radius: 18px; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.publish-btn:active { background: var(--primary-dark); }

.create-type-bar {
  display: flex; gap: 6px; padding: 14px 12px;
  overflow-x: auto; border-bottom: 1px solid #F0F0F0;
  background: #FAFAFA;
}
.create-type-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 8px; border-radius: 14px;
  border: none; background: #fff;
  cursor: pointer; flex: 1; min-width: 0;
  transition: all .2s ease; position: relative;
  box-shadow: none;
}
.create-type-item:active { transform: scale(0.95); }
.create-type-item.active {
  background: transparent;
}
.create-type-item.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--type-color, var(--primary));
  opacity: 0.6;
}
.type-icon-wrap {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #F3F3F3;
  transition: all .2s;
}
.create-type-item.active .type-icon-wrap {
  background: var(--type-bg, #F3F3F3);
  transform: scale(1.04);
}
.type-emoji { font-size: 18px; line-height: 1; }
.type-label {
  font-size: 12px; font-weight: 600; color: #444;
  line-height: 1; white-space: nowrap;
}
.create-type-item.active .type-label {
  color: var(--type-color, var(--primary));
}
.type-desc {
  font-size: 9px; color: #BBB; line-height: 1;
  white-space: nowrap;
}
.create-type-item.active .type-desc {
  color: var(--type-color);
  opacity: 0.6;
}

.create-title-wrap { padding: 16px 16px 0; }
.create-title-input {
  width: 100%; border: none; outline: none;
  font-size: 18px; font-weight: 700; color: #1A1A1A;
  padding: 0; background: transparent;
}
.create-title-input::placeholder { color: #ccc; font-weight: 500; }

.create-body-wrap { padding: 12px 16px; }
.create-body-input {
  width: 100%; border: none; outline: none; resize: none;
  font-size: 15px; line-height: 1.8; color: #333;
  padding: 0; background: transparent;
  font-family: inherit;
}
.create-body-input::placeholder { color: #C0C0C0; }

.create-media-area { padding: 0 16px 12px; }
.create-media-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.create-media-add {
  width: 90px; height: 90px; border-radius: 10px;
  border: 1.5px dashed #D8D8D8; display: flex;
  flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; cursor: pointer;
  transition: all .15s;
}
.create-media-add span { font-size: 11px; color: #C0C0C0; }
.create-media-add:active { background: #F8F8F8; border-color: #BBB; }

.create-options {
  border-top: 8px solid #F5F5F5;
}
.create-option-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #F5F5F5;
  cursor: pointer;
}
.create-option-item:active { background: #FAFAFA; }
.create-option-left {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: #333;
}
.create-option-right {
  display: flex; align-items: center; gap: 4px;
}
.create-option-value { font-size: 13px; color: #666; }
.create-option-placeholder { font-size: 13px; color: #CCC; }

/* AI 润色区域 */
.ai-polish-area { margin: 8px 0 0; }

.create-ai-tip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 12px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(108,114,203,0.06), rgba(139,92,246,0.06));
  border-radius: 12px; border: 1px solid rgba(108,114,203,0.12);
  cursor: pointer; transition: all .2s;
}
.create-ai-tip:active { transform: scale(0.98); background: rgba(108,114,203,0.1); }
.create-ai-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(108,114,203,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.create-ai-text { flex: 1; font-size: 13px; color: #6C72CB; }
.create-ai-btn {
  padding: 5px 14px; border-radius: 14px; border: none;
  background: #6C72CB; color: white; font-size: 12px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.create-ai-btn:active { background: #5B60BA; }

/* 润色加载态 */
.ai-polish-loading {
  margin: 0 16px 12px; padding: 16px;
  background: linear-gradient(135deg, rgba(108,114,203,0.06), rgba(139,92,246,0.08));
  border-radius: 12px; border: 1px solid rgba(108,114,203,0.12);
}
.ai-polish-loading-inner {
  display: flex; align-items: center; gap: 12px;
}
.ai-polish-spinner {
  animation: aiSpin 1.5s linear infinite;
}
@keyframes aiSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.ai-polish-loading-title {
  font-size: 14px; font-weight: 600; color: #6C72CB; display: block;
}
.ai-polish-loading-sub {
  font-size: 11px; color: #9B9FCF; display: block; margin-top: 2px;
}
.ai-polish-progress {
  margin-top: 12px; height: 3px; background: rgba(108,114,203,0.12);
  border-radius: 3px; overflow: hidden;
}
.ai-polish-progress-bar {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #6C72CB, #8B5CF6);
  animation: aiProgress 2s ease-out forwards;
}
@keyframes aiProgress {
  0% { width: 0%; }
  60% { width: 75%; }
  100% { width: 95%; }
}

/* 润色结果面板 */
.ai-polish-result {
  margin: 0 16px 12px; border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(108,114,203,0.15);
  box-shadow: 0 2px 16px rgba(108,114,203,0.1);
  overflow: hidden;
  animation: polishSlideIn .3s ease;
}
@keyframes polishSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-polish-result-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: linear-gradient(135deg, rgba(108,114,203,0.08), rgba(139,92,246,0.06));
  border-bottom: 1px solid rgba(108,114,203,0.08);
}
.ai-polish-result-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #6C72CB;
}
.ai-polish-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: 6px; display: flex;
}
.ai-polish-close:active { background: rgba(0,0,0,0.05); }

/* 润色对比项 */
.ai-polish-item {
  padding: 12px 14px; border-bottom: 1px solid #F5F5F5;
}
.ai-polish-item:last-of-type { border-bottom: none; }
.ai-polish-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.ai-polish-tag {
  font-size: 11px; font-weight: 600; color: #999;
  background: #F2F2F2; padding: 2px 8px; border-radius: 4px;
}
.ai-polish-badge {
  font-size: 10px; font-weight: 600; color: #6C72CB;
  background: rgba(108,114,203,0.1); padding: 2px 6px; border-radius: 4px;
}
.ai-polish-before {
  font-size: 12px; color: #BBB; padding: 6px 10px;
  background: #FAFAFA; border-radius: 8px;
  text-decoration: line-through; line-height: 1.5;
}
.ai-polish-arrow {
  display: flex; justify-content: center; padding: 4px 0;
}
.ai-polish-after {
  font-size: 13px; color: #333; padding: 8px 10px;
  background: rgba(108,114,203,0.04); border-radius: 8px;
  border-left: 3px solid #6C72CB; line-height: 1.6;
}

/* 推荐标签行 */
.ai-polish-tags-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.ai-polish-tag-item {
  font-size: 12px; color: #6C72CB; padding: 4px 10px;
  background: rgba(108,114,203,0.08); border-radius: 12px;
  font-weight: 500;
}

/* 操作按钮 */
.ai-polish-actions {
  display: flex; gap: 10px; padding: 12px 14px;
  background: #FAFAFA; border-top: 1px solid #F2F2F2;
}
.ai-polish-retry {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 0; border-radius: 10px; font-size: 13px;
  background: #fff; border: 1px solid #E0E0E0; color: #888;
  cursor: pointer; font-weight: 500;
}
.ai-polish-retry:active { background: #F5F5F5; }
.ai-polish-apply {
  flex: 1.5; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 0; border-radius: 10px; font-size: 13px;
  background: linear-gradient(135deg, #6C72CB, #8B5CF6); border: none;
  color: white; cursor: pointer; font-weight: 600;
}
.ai-polish-apply:active { opacity: 0.85; }
.ai-polish-applied {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 0;
  font-size: 13px; font-weight: 600; color: #26A69A;
  animation: polishApplied .3s ease;
}
@keyframes polishApplied {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ==================== 底部弹窗 ==================== */
.bottom-sheet-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 100;
  display: none; align-items: flex-end;
}
.bottom-sheet-overlay.show { display: flex; }
.bottom-sheet {
  width: 100%; background: #fff; border-radius: 16px 16px 0 0;
  max-height: 70%; display: flex; flex-direction: column;
  animation: sheetUp .25s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid #F2F2F2;
}
.sheet-title { font-size: 16px; font-weight: 700; color: #1A1A1A; }
.sheet-close { background: none; border: none; padding: 4px; cursor: pointer; }
.sheet-body { overflow-y: auto; padding: 8px 0; }

/* 列表选项 */
.sheet-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
}
.sheet-list-item:active { background: #F8F8F8; }
.sheet-list-item .sheet-check { display: none; flex-shrink: 0; }
.sheet-list-item.active .sheet-check { display: block; }
.sheet-item-icon {
  width: 42px; height: 42px; border-radius: 12px;
  object-fit: cover; flex-shrink: 0;
}
.sheet-item-info { flex: 1; min-width: 0; }
.sheet-item-name { font-size: 15px; font-weight: 500; color: #333; display: block; }
.sheet-item-meta { font-size: 12px; color: #999; display: block; margin-top: 2px; }

/* 位置图标 */
.sheet-loc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #F5F5F5; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.sheet-loc-icon.auto { background: var(--primary-bg); }
.loc-icon-color {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sheet-auto-loc { background: #F8FDFC; border-bottom: 1px solid #E8F5E9; }
.sheet-auto-loc:active { background: #EDF8F6 !important; }
.sheet-loc-refresh {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(38,166,154,0.08); display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.sheet-group-title {
  font-size: 12px; color: #999; padding: 10px 16px 4px;
  font-weight: 500;
}

/* 搜索框 */
.sheet-search-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 16px 4px; padding: 8px 12px;
  background: #F5F5F5; border-radius: 10px;
}
.sheet-search-input {
  flex: 1; border: none; outline: none; font-size: 14px;
  background: transparent; color: #333;
}
.sheet-search-input::placeholder { color: #C0C0C0; }

/* 时间快捷按钮 */
.sheet-time-quick {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px;
}
.sheet-time-btn {
  padding: 10px 0; width: calc(33.33% - 7px);
  border: 1px solid #E8E8E8; border-radius: 10px;
  background: #fff; font-size: 13px; color: #333;
  cursor: pointer; text-align: center; font-weight: 500;
}
.sheet-time-btn:active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.sheet-divider { height: 1px; background: #F2F2F2; margin: 4px 16px; }

/* 可见范围选项 */
.sheet-scope-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
}
.sheet-scope-item:active { background: #F8F8F8; }
.sheet-scope-item .sheet-check { display: none; flex-shrink: 0; }
.sheet-scope-item.active .sheet-check { display: block; }
.sheet-scope-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sheet-scope-info { flex: 1; }
.sheet-scope-name { font-size: 15px; font-weight: 500; color: #333; display: block; }
.sheet-scope-desc { font-size: 12px; color: #999; display: block; margin-top: 2px; }

/* 可见范围-距离选择 */
.sheet-scope-subtitle {
  font-size: 12px; color: #999; font-weight: 500;
  padding: 12px 16px 6px; letter-spacing: 0.5px;
}
.sheet-scope-range {
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 10px 16px 16px; gap: 8px;
}
.sheet-range-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: transform 0.15s;
}
.sheet-range-item:active { transform: scale(0.92); }
.sheet-range-circle {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.sheet-range-item.active .sheet-range-circle {
  box-shadow: 0 0 0 3px rgba(38,166,154,0.2);
}
.sheet-range-label {
  font-size: 11px; color: #666; font-weight: 500;
}
.sheet-range-item.active .sheet-range-label {
  color: var(--primary); font-weight: 600;
}

/* ==================== 动画与过渡 ==================== */
.page { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==================== 历史会话侧边栏 ==================== */
.history-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 200;
  display: none;
}
.history-overlay.show { display: block; }
.history-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 280px; background: var(--white);
  padding: 60px 16px 20px;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 201;
}
.history-overlay.show .history-panel { transform: translateX(0); }
.history-panel h3 { margin-bottom: 4px; }
.new-chat-btn {
  width: 100%; padding: 10px; margin: 12px 0;
  background: var(--primary); color: white; border: none;
  border-radius: var(--radius-sm); font-size: 14px; cursor: pointer;
}
.history-group-title {
  font-size: 12px; color: var(--text-tertiary); font-weight: 600;
  margin: 16px 0 8px; text-transform: uppercase;
}
.history-item {
  padding: 10px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-secondary); cursor: pointer;
  margin-bottom: 2px;
}
.history-item:hover { background: var(--bg); }

/* ==================== 发现圈子页 ==================== */

/* 轮播图 Banner */
.discover-banner {
  margin: 10px 14px 0; border-radius: 14px; overflow: hidden;
  position: relative; height: 130px; background: #E8E8E8;
}
.discover-banner-track { position: relative; width: 100%; height: 100%; }
.discover-banner-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .5s ease;
}
.discover-banner-slide.active { opacity: 1; }
.discover-banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.discover-banner-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  padding: 24px 14px 12px; display: flex; flex-direction: column; gap: 3px;
}
.discover-banner-tag {
  font-size: 10px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.25); backdrop-filter: blur(4px);
  padding: 2px 8px; border-radius: 4px; align-self: flex-start;
}
.discover-banner-title {
  font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.discover-banner-dots {
  position: absolute; bottom: 8px; right: 12px;
  display: flex; gap: 5px;
}
.discover-banner-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.45); transition: all .3s;
}
.discover-banner-dot.active {
  width: 14px; border-radius: 3px; background: #fff;
}

/* 金刚位分类网格 */
.discover-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 14px 14px 6px; gap: 4px 0;
}
.dg-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 6px 2px; cursor: pointer;
  position: relative; transition: transform .12s;
}
.dg-item:active { transform: scale(0.92); }
.dg-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.dg-emoji { font-size: 22px; line-height: 1; }
.dg-name { font-size: 11px; color: #444; font-weight: 500; }
.dg-badge {
  position: absolute; top: 2px; right: 8px;
  font-size: 9px; font-weight: 600; color: #fff;
  background: #FF5252; padding: 0 4px; border-radius: 6px;
  line-height: 15px;
}

/* 附近圈子筛选条 */
.discover-filter-bar {
  padding: 8px 14px 4px;
}

/* 位置提示条（只读 + 点击跳到全局 sheet） */
.df-loc-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: #FFFBF5;
  border: 1px solid #FFE8CF;
  border-radius: 10px;
  font-size: 12px; color: #5A4632;
  cursor: pointer;
}
.df-loc-hint:active { background: #FFF4E6; }
.df-loc-ic { font-size: 13px; flex-shrink: 0; }
.df-loc-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-loc-text b { color: #FF7A1F; font-weight: 600; }
.df-loc-action {
  color: #FF7A1F; font-weight: 500; flex-shrink: 0;
  font-size: 11px;
}

/* 范围 chips */
.df-ranges {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.df-ranges::-webkit-scrollbar { display: none; }
.df-range {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 14px;
  border: none; background: #F5F6F8;
  font-size: 12px; color: #666; font-weight: 500;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.df-range:active { transform: scale(0.94); }
.df-range.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.25);
}
.df-sort-wrap { position: relative; flex-shrink: 0; }
.df-sort {
  display: flex; align-items: center; gap: 3px;
  padding: 5px 10px 5px 12px;
  border: 1px solid #EDEEF0; background: #fff;
  border-radius: 14px;
  font-size: 12px; color: #666; font-weight: 500;
  cursor: pointer;
}
.df-sort.open {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-bg);
}
.df-sort svg { transition: transform .2s; }
.df-sort.open svg { transform: rotate(180deg); }
.df-sort-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px; z-index: 100;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid #F0F0F2;
  padding: 6px;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.df-sort-menu.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.df-sort-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #222;
}
.df-sort-item:active { background: #F5F5F7; }
.df-sort-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.df-sort-hint {
  font-size: 10px; color: #999; font-weight: 400;
}
.df-sort-item.active .df-sort-hint { color: #FFA366; }

/* 列表头：行内排序文字链接 */
/* --- 附近热门排序下拉 --- */
.dlh-title { font-size: 14px; color: #333; font-weight: 600; }
.dlh-title .discover-count { font-weight: 400; color: #999; }
.dlh-actions { display: flex; align-items: center; gap: 8px; position: relative; }

/* --- 2 级：距离快筛 + 排序（同行） --- */
.df-row2 {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 4px;
  background: #fff;
}
.df-row2 .df-ranges {
  flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.df-row2 .df-ranges::-webkit-scrollbar { display: none; }
.df-row2-sort {
  flex-shrink: 0;
  padding-left: 10px;
  border-left: 1px solid #F0F0F2;
}
/* 2 级行内的 sort 更紧凑 */
.df-row2-sort .df-sort {
  padding: 6px 4px 6px 8px;
  border: none; background: transparent;
  color: var(--primary); font-weight: 600;
  font-size: 12px;
}
.df-row2-sort .df-sort.open { background: transparent; }

/* --- 4 级：智能快捷卡 section --- */
.quick-cards-section { margin-bottom: 14px; }
.quick-cards-label {
  padding: 0 16px 8px;
  font-size: 13px; font-weight: 600; color: #555;
}

/* --- 筛选按钮 --- */
.df-filter-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border: 1px solid #EDEEF0; background: #fff;
  border-radius: 14px;
  font-size: 12px; color: #666; font-weight: 500;
  cursor: pointer;
  position: relative;
}
.df-filter-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.df-filter-btn svg { opacity: 0.75; }
.df-filter-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #FF6B35; color: #fff;
  border-radius: 8px;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(255,107,53,0.4);
}

/* ===== 邀请好友 Bottom Sheet ===== */
.invite-sheet-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200; display: none;
  animation: fadeIn 0.2s ease;
}
.invite-sheet-mask.open { display: block; }
.invite-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100%;
  background: #fff;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  z-index: 201;
  max-height: 85%;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.25,.8,.3,1);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
}
.invite-sheet.open { transform: translateY(0); }

.inv-header {
  position: relative;
  padding: 16px 20px 12px;
  text-align: center;
}
.inv-drag {
  display: block; margin: 0 auto 12px;
  width: 36px; height: 4px;
  background: #E5E5E7; border-radius: 2px;
}
.inv-title {
  font-size: 16px; font-weight: 700; color: #222;
  margin: 0;
}
.inv-close {
  position: absolute; top: 14px; right: 16px;
  width: 28px; height: 28px;
  border: none; background: #F5F5F7;
  border-radius: 50%;
  font-size: 13px; color: #666;
  cursor: pointer;
}

/* 激励横幅 */
.inv-banner {
  margin: 0 16px 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF7EB, #FFF1F6);
  border: 1px solid #FFE0C2;
  border-radius: 14px;
}
.inv-banner-title {
  font-size: 13px; color: #5A4632;
  margin-bottom: 4px;
}
.inv-banner-title b { color: #FF7A1F; font-weight: 700; }
.inv-banner-sub {
  font-size: 11px; color: #8A7560;
  margin-bottom: 10px;
}
.inv-banner-stats {
  display: flex; gap: 14px;
  padding-top: 10px;
  border-top: 1px dashed #FFE0C2;
}
.inv-stat {
  flex: 1; text-align: center;
  font-size: 11px; color: #8A7560;
}
.inv-stat b {
  display: block;
  font-size: 18px; color: #FF7A1F; font-weight: 700;
  margin-bottom: 2px;
}

/* 邀请码 */
.inv-code-card {
  margin: 0 16px 16px;
  padding: 14px 16px;
  background: #F5F6F8;
  border-radius: 12px;
}
.inv-code-label {
  font-size: 12px; color: #888;
  margin-bottom: 8px;
}
.inv-code-row {
  display: flex; align-items: center; gap: 10px;
}
.inv-code {
  flex: 1;
  font-size: 22px; font-weight: 700; color: var(--primary);
  letter-spacing: 2px;
  font-family: "SF Mono", Menlo, monospace;
}
.inv-code-copy {
  padding: 6px 12px;
  background: #fff; border: 1px solid #E5E6EA;
  border-radius: 8px;
  font-size: 12px; color: #444;
  cursor: pointer;
}
.inv-code-copy:active { background: #F0F0F2; }

/* 分享渠道 */
.inv-channels { margin: 0 16px 16px; }
.inv-channels-title {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 12px;
}
.inv-channels-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
}
.inv-ch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  transition: transform 0.15s;
}
.inv-ch:active { transform: scale(0.92); }
.inv-ch-ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.inv-ch-name {
  font-size: 11px; color: #555;
}

/* 邀请记录 */
.inv-records {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #F0F0F2;
  border-radius: 10px;
  cursor: pointer;
}
.inv-records:active { background: #F5F5F7; }
.inv-records-l { font-size: 13px; color: #333; font-weight: 500; }
.inv-records-r { font-size: 12px; color: var(--primary); }

/* 分享文案预览 */
.inv-preview {
  margin: 0 16px 24px;
  padding: 12px 14px;
  background: #F9F9FA;
  border-radius: 10px;
}
.inv-preview-title {
  font-size: 11px; color: #888; font-weight: 500;
  margin-bottom: 6px;
}
.inv-preview-content {
  font-size: 12px; color: #555; line-height: 1.6;
}
.inv-preview-content b { color: var(--primary); font-weight: 700; }

/* --- 高级筛选抽屉（约束在 .phone-frame 内，phone-frame 用 transform 变为 fixed 的容器） --- */
.df-drawer-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200; display: none;
  animation: fadeIn 0.2s ease;
}
.df-drawer-mask.open { display: block; }
.df-drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100%;
  background: #fff;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  z-index: 201;
  max-height: 78%;
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(.25,.8,.3,1);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
}
.df-drawer.open { transform: translateY(0); }
.df-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #F2F3F5;
}
.df-drawer-header::before {
  content: ''; position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px; background: #E5E5E7; border-radius: 2px;
}
.df-drawer-header { position: relative; }
.df-drawer-title { font-size: 16px; font-weight: 700; color: #222; }
.df-drawer-close {
  width: 28px; height: 28px;
  border: none; background: #F5F5F7;
  border-radius: 50%;
  font-size: 14px; color: #666; cursor: pointer;
}
.df-drawer-close:active { background: #E5E5E7; }
.df-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 16px;
}
.df-group { margin-bottom: 16px; }
.df-group-label {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 8px;
}
.df-chips {
  display: flex; gap: 6px 8px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.df-chips::-webkit-scrollbar { display: none; }
/* 单选短选项组（距离）仍用横滑，避免换行 */
.df-chips[data-group="distance"] {
  flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.df-chips-wrap { flex-wrap: wrap; overflow: visible; }
.df-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: #F5F6F8;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 12px; color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  line-height: 1.4;
}
.df-chip:active { transform: scale(0.96); }
.df-chip.active {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.df-drawer-footer {
  display: flex; gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid #F2F3F5;
  background: #fff;
}
.df-drawer-reset {
  flex: 1; padding: 12px;
  background: #F5F5F7; border: none;
  border-radius: 10px;
  font-size: 14px; color: #555; font-weight: 500;
  cursor: pointer;
}
.df-drawer-apply {
  flex: 2; padding: 12px;
  background: var(--primary); border: none;
  border-radius: 10px;
  font-size: 14px; color: #fff; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,107,53,0.25);
}
.df-drawer-apply:active { opacity: 0.88; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.df-sort-wrap { position: relative; flex-shrink: 0; }
.df-sort {
  display: flex; align-items: center; gap: 3px;
  padding: 5px 10px 5px 12px;
  border: 1px solid #EDEEF0; background: #fff;
  border-radius: 14px;
  font-size: 12px; color: #666; font-weight: 500;
  cursor: pointer;
}
.df-sort.open { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.df-sort svg { transition: transform .2s; }
.df-sort.open svg { transform: rotate(180deg); }
.df-sort-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; z-index: 100;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid #F0F0F2;
  padding: 6px;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  pointer-events: none; transition: opacity .15s, transform .15s;
}
.df-sort-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.df-sort-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #222;
}
.df-sort-item:active { background: #F5F5F7; }
.df-sort-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.df-sort-hint { font-size: 10px; color: #999; font-weight: 400; }
.df-sort-item.active .df-sort-hint { color: #FFA366; }

.dlh-sort { display: flex; gap: 10px; align-items: center; }
.dlh-sort-item {
  font-size: 12px; color: #B0B0B3; cursor: pointer; font-weight: 500;
}
.dlh-sort-item.active { color: var(--primary); font-weight: 600; }

/* 更多分类 Sheet */
.mc-group { margin-bottom: 20px; }
.mc-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #333;
  padding: 0 4px; margin-bottom: 12px;
}
.mc-group-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.mc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px;
}
.mc-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 8px 4px; border-radius: 12px;
  cursor: pointer; transition: all .15s;
}
.mc-item:active { transform: scale(0.92); background: #F8F8F8; }
.mc-item.selected { background: var(--primary-bg); }
.mc-item.selected .mc-icon { box-shadow: 0 0 0 2px var(--primary); }
.mc-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: all .2s;
}
.mc-item span {
  font-size: 11px; color: #555; font-weight: 500; text-align: center;
}
.mc-item.selected span { color: var(--primary); font-weight: 600; }

/* ==================== 我的圈子 Panel ==================== */
/* 资产卡片 */
.my-circle-asset-card {
  margin: 12px 14px 0; padding: 18px 16px 16px;
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
  border-radius: 16px; color: #fff;
  position: relative; overflow: hidden;
}
.my-circle-asset-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,114,203,0.3), transparent 70%);
  pointer-events: none;
}
/* 用户行 */
.mca-user-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.mca-user-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
}
.mca-user-info { flex: 1; }
.mca-user-name { font-size: 15px; font-weight: 600; display: block; line-height: 1.3; }
.mca-user-id { font-size: 10px; color: rgba(255,255,255,0.4); }
.mca-trust-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,213,79,0.15); border: 1px solid rgba(255,213,79,0.3);
  border-radius: 10px; padding: 6px 12px; cursor: pointer;
}
.mca-trust-icon { font-size: 16px; line-height: 1; }
.mca-trust-lv { font-size: 11px; font-weight: 700; color: #FFD54F; }

/* 核心数据 */
.mca-stats { display: flex; justify-content: space-between; margin-bottom: 14px; }
.mca-stat { text-align: center; flex: 1; }
.mca-num {
  font-size: 22px; font-weight: 700; display: block;
  background: linear-gradient(135deg, #fff, #B0BEC5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.mca-label { font-size: 11px; color: rgba(255,255,255,0.45); }

/* 信任进度 */
.mca-progress {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px;
}
.mca-progress-header {
  display: flex; justify-content: space-between; align-items: center;
}
.mca-progress-label { font-size: 11px; color: rgba(255,255,255,0.5); }
.mca-progress-detail { font-size: 11px; color: #FFD54F; font-weight: 600; }
.mca-progress-bar {
  height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px;
  overflow: hidden;
}
.mca-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FFD54F, #FFB300);
  transition: width 1s ease;
}
.mca-progress-text { font-size: 10px; color: rgba(255,255,255,0.35); }

/* 本周活跃 */
.mca-weekly {
  background: rgba(255,255,255,0.06); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px;
}
.mca-weekly-title { font-size: 11px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 8px; }
.mca-weekly-bars {
  display: flex; gap: 6px; align-items: flex-end; height: 36px; margin-bottom: 6px;
}
.mca-bar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
  justify-content: flex-end;
}
.mca-bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: rgba(108,114,203,0.5); min-height: 4px;
  transition: height 0.5s ease;
}
.mca-bar.active { background: linear-gradient(180deg, #6C72CB, #8E99F5); }
.mca-bar.today { background: linear-gradient(180deg, #FFD54F, #FFB300); }
.mca-bar-item span { font-size: 9px; color: rgba(255,255,255,0.35); }
.mca-weekly-summary { font-size: 10px; color: rgba(255,255,255,0.4); }

/* 今日动态 */
.mca-today {
  display: flex; gap: 0; margin-bottom: 14px;
  background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden;
}
.mca-today-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; font-size: 10px; color: rgba(255,255,255,0.5);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.mca-today-item:last-child { border-right: none; }
.mca-today-icon { font-size: 16px; line-height: 1; }
.mca-today-text { text-align: center; line-height: 1.4; }
.mca-today-text b { color: #fff; font-weight: 600; }
.mca-today-plus {
  display: inline-block; font-size: 9px; color: #FFD54F;
  background: rgba(255,213,79,0.15); border-radius: 4px; padding: 1px 4px;
  margin-left: 2px;
}

/* 快捷操作 */
.mca-actions { display: flex; gap: 8px; }
.mca-act-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 0; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7); font-size: 12px; cursor: pointer;
  transition: all 0.2s;
}
.mca-act-btn:active {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
}
.mca-act-btn svg { stroke: rgba(255,255,255,0.6); }

/* ===== 我的圈子 — 单行极简筛选条 v4 ===== */
.mc-filter-pack {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: 6px 0 4px;
  margin-bottom: 2px;
}

/* 一行集成：角色 tab + 场景折叠 + 工具图标 */
.mc-fp-oneline {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 14px 0;
  border-bottom: 1px solid #EAEBEE;
  gap: 8px;
}
.mc-fp-tabs {
  display: flex; gap: 18px; flex-shrink: 0;
}
.mc-fp-tools {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0;
  padding-bottom: 6px;
}

/* Tab 角标（小红点） */
.mc-fp-tab-dot { position: relative; }
.mc-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 6px; right: -14px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: #FF5A4E; color: #fff;
  border-radius: 7px;
  font-size: 9px; font-weight: 700; font-style: normal;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(255, 90, 78, 0.35);
}

/* 工具图标通用 */
.mc-fp-ic {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: #555; border-radius: 6px;
}
.mc-fp-ic:active { background: #F0F0F2; }
.mc-fp-ic.active { color: var(--primary); }

/* 场景按钮 */
.mc-scene-wrap { position: relative; flex-shrink: 0; }
.mc-scene-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 12px; color: #555; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.mc-scene-btn:active { background: #F0F0F2; }
.mc-scene-btn.picked {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}
.mc-scene-btn svg { opacity: 0.7; }
.mc-scene-btn.picked svg { opacity: 1; }

.mc-scene-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 140px; z-index: 10;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid #F0F0F2;
  padding: 4px;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  pointer-events: none; transition: opacity .15s, transform .15s;
}
.mc-scene-menu.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.mc-scene-item {
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; color: #333;
  cursor: pointer;
  white-space: nowrap;
}
.mc-scene-item:active { background: #F5F5F7; }
.mc-scene-item.active {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}

/* "我管理" tab 点击红点弹出的待办浮层 */
.mc-todo-popover {
  position: absolute; z-index: 20;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid #F0F0F2;
  padding: 4px;
  min-width: 180px;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  pointer-events: none; transition: opacity .15s, transform .15s;
}
.mc-todo-popover.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.mc-todo-pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px;
  cursor: pointer;
  font-size: 13px; color: #333;
}
.mc-todo-pop-item:active { background: #F5F5F7; }
.mc-todo-pop-ic { font-size: 14px; width: 18px; text-align: center; }
.mc-todo-pop-txt { flex: 1; }
.mc-todo-pop-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #FF5A4E; color: #fff;
  border-radius: 9px;
  font-size: 10px; font-weight: 700;
}
.mc-fp-tab {
  position: relative;
  padding: 10px 0 11px;
  font-size: 14px; color: #999; font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-fp-tab em {
  font-style: normal; font-size: 11px;
  color: #C0C0C3; font-weight: 400;
}
.mc-fp-tab.active { color: #222; font-weight: 700; }
.mc-fp-tab.active em { color: var(--primary); font-weight: 600; }
.mc-fp-tab.active::after {
  content: ''; position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 22px; height: 2.5px;
  background: var(--primary);
  border-radius: 2px;
}

.mc-fp-icons { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.mc-fp-ic {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: #555; border-radius: 8px;
}
.mc-fp-ic:active { background: #F0F0F2; }
.mc-fp-ic.active { color: var(--primary); }

/* 排序下拉菜单 */
.mc-sort-wrap { position: relative; }
.mc-sort-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; z-index: 100;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid #F0F0F2;
  padding: 6px;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  pointer-events: none; transition: opacity .15s, transform .15s;
}
.mc-sort-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.mc-sort-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #222;
  white-space: nowrap;
}
.mc-sort-item:active { background: #F5F5F7; }
.mc-sort-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.mc-sort-hint { font-size: 10px; color: #999; font-weight: 400; }
.mc-sort-item.active .mc-sort-hint { color: #FFA366; }

/* 搜索框（点搜索图标展开） */
.mc-fp-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 14px 0;
  padding: 8px 12px;
  background: #F5F6F8;
  border-radius: 20px;
  animation: mcFpSearchIn 0.2s ease;
}
@keyframes mcFpSearchIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.mc-fp-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13px; color: #222;
}
.mc-fp-search-input::placeholder { color: #B0B0B3; }
.mc-fp-search-cancel {
  font-size: 12px; color: var(--primary); font-weight: 500;
  padding: 2px 4px; cursor: pointer;
}

/* 下行：场景 + 待办 紧凑 pill */
.mc-fp-chips {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px 2px;
  overflow-x: auto; scrollbar-width: none;
  white-space: nowrap;
}
.mc-fp-chips::-webkit-scrollbar { display: none; }
.mc-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid #E5E6EA;
  border-radius: 14px;
  font-size: 12px; color: #555; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.3;
}
.mc-pill:active { transform: scale(0.96); }
.mc-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(38, 166, 154, 0.25);
}
.mc-pill-alert {
  background: #FFF5F0;
  border-color: #FFE0C2;
  color: #D95E1F;
}
.mc-pill-alert b {
  color: #FF6B35; font-weight: 700;
  margin-left: 1px;
}
.mc-pill-alert.active {
  background: #FF6B35;
  color: #fff;
  border-color: #FF6B35;
}
.mc-pill-alert.active b { color: #FFE0C2; }
.mc-pill-divider {
  width: 1px; height: 16px;
  background: #E5E6EA;
  flex-shrink: 0;
  margin: 0 2px;
}

/* 圈子卡片列表 */
.mc-circle-list {
  padding: 0 14px 20px;
  display: flex; flex-direction: column;  /* 支持 order 排序 */
}

.mc-card {
  background: #fff; border-radius: 14px; margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden; cursor: pointer; transition: transform .12s;
}
.mc-card:active { transform: scale(0.98); }
.mc-card.hidden { display: none; }

/* 卡片头部 */
.mc-card-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px;
}
.mc-card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.mc-card-info { flex: 1; min-width: 0; }
.mc-card-name {
  font-size: 14px; font-weight: 600; color: #1A1A1A;
  display: flex; align-items: center; gap: 5px;
}
.mci-role {
  font-size: 9px; font-weight: 600; color: #fff; padding: 1px 5px;
  border-radius: 4px; flex-shrink: 0; white-space: nowrap;
}
.mci-role.owner { background: linear-gradient(135deg, #FFB300, #FF8F00); }
.mci-role.official { background: linear-gradient(135deg, #42A5F5, #1E88E5); }
.mc-card-meta { font-size: 11px; color: #999; margin-top: 2px; }
.mc-card-badge {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.mc-card-badge.unread { background: #FF5252; }
.mc-card-badge.event {
  background: linear-gradient(135deg, #7C4DFF, #B388FF);
  animation: eventPulse 2s ease infinite;
}
@keyframes eventPulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.6; }
}

/* 预览区 */
.mc-card-preview { padding: 0 14px; }

.mc-card-msg {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #FAFAFA; border-radius: 8px;
}
.mc-msg-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.mc-msg-text {
  flex: 1; font-size: 12px; color: #888; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-msg-time { font-size: 10px; color: #C0C0C0; flex-shrink: 0; }

/* 活动预览 */
.mc-card-event-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: #FFF5F5; border-radius: 8px;
  border: 1px solid #FFE0E0;
}
.mc-event-text { flex: 1; font-size: 12px; color: #D32F2F; font-weight: 500; }
.mc-event-btn {
  padding: 3px 12px; border-radius: 10px; border: none;
  background: #FF5252; color: #fff; font-size: 11px;
  font-weight: 600; cursor: pointer;
}

/* 闲置预览 */
.mc-card-items {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0;
}
.mc-item-thumb {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.mc-items-text { font-size: 11px; color: #999; margin-left: 2px; }

/* 卡片底部 */
.mc-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 12px; gap: 8px;
}
.mc-card-tags { display: flex; gap: 6px; flex: 1; overflow: hidden; }
.mc-ftag {
  font-size: 10px; padding: 3px 8px; border-radius: 6px;
  background: #F5F5F5; color: #888; white-space: nowrap;
}
.mc-ftag.quiet { color: #C0C0C0; }
.mc-card-action {
  padding: 4px 12px; border-radius: 10px; border: 1px solid var(--primary);
  background: none; color: var(--primary); font-size: 11px;
  font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.mc-card-faces {
  display: flex; align-items: center; gap: 2px;
}
.mc-card-faces img {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #fff; margin-left: -4px;
}
.mc-card-faces img:first-child { margin-left: 0; }
.mc-faces-text { font-size: 10px; color: #999; margin-left: 6px; }

/* 列表头 */
.discover-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 6px;
}
.discover-list-header h3 { font-size: 15px; font-weight: 600; color: #333; }
.discover-count { font-size: 12px; color: #999; }

/* 圈子卡片 */
.discover-cards { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.discover-card {
  background: #fff; border-radius: 14px;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  transition: transform .15s;
}
.discover-card:active { transform: scale(0.98); }

/* 卡片封面 */
.discover-card-cover {
  position: relative; height: 130px; overflow: hidden;
}
.discover-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.discover-card-dist {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.5); color: #fff;
  font-size: 11px; padding: 3px 8px; border-radius: 10px;
  backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: 3px;
}
.discover-card-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 10px;
}

/* 卡片内容 */
.discover-card-body { padding: 12px 14px 14px; }
.discover-card-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.discover-card-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.discover-card-info { flex: 1; min-width: 0; }
.discover-card-name {
  font-size: 15px; font-weight: 600; color: #1A1A1A;
  display: flex; align-items: center; gap: 6px;
  line-height: 1.3;
}
.discover-card-name .verified-badge {
  font-size: 10px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #26A69A, #00897B);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  flex-shrink: 0;
}
.discover-card-meta {
  font-size: 12px; color: #999; display: block; margin-top: 2px;
}
.discover-card-join {
  padding: 6px 16px; border-radius: 18px;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 600; border: none; cursor: pointer;
  flex-shrink: 0; transition: all .15s;
}
.discover-card-join:active { transform: scale(0.94); }

/* 描述 */
.discover-card-desc {
  font-size: 13px; color: #666; line-height: 1.55;
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 标签 */
.discover-card-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.dc-tag {
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: #F5F5F5; color: #666;
}
.dc-tag.hot { background: #FFF3E0; color: #E65100; }
.dc-tag.tonight { background: #E8F5E9; color: #2E7D32; }

/* 成员头像 */
.discover-card-members {
  display: flex; align-items: center; gap: 8px;
}
.dc-member-faces { display: flex; }
.dc-member-faces img {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; object-fit: cover;
  margin-left: -6px;
}
.dc-member-faces img:first-child { margin-left: 0; }
.dc-member-text { font-size: 11px; color: #999; }

/* ==================== 管理工作台 ==================== */

/* 今日概览 */
.mc-overview {
  margin: 10px 14px; padding: 16px;
  background: linear-gradient(135deg, #1A1A2E, #16213E);
  border-radius: 14px; color: #fff;
}
.mc-overview-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; font-size: 15px; font-weight: 600;
}
.mc-overview-date { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 400; }
.mc-overview-stats { display: flex; gap: 0; }
.mc-ov-stat {
  flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.mc-ov-num {
  font-size: 24px; font-weight: 700; line-height: 1.2;
  background: linear-gradient(135deg, #fff, #B0BEC5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.mc-ov-label { font-size: 11px; color: rgba(255,255,255,0.45); }
.mc-ov-trend {
  font-size: 10px; color: rgba(255,255,255,0.35);
  display: inline-block; margin-top: 2px;
}
.mc-ov-trend.up { color: #69F0AE; }
.mc-ov-trend.safe { color: #69F0AE; }

/* 通用section header */
.mc-sec-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 14px 10px;
}
.mc-sec-title { font-size: 16px; font-weight: 600; }
.mc-sec-badge {
  font-size: 11px; color: #FF5252; background: #FFF0F0;
  padding: 2px 8px; border-radius: 8px; font-weight: 500;
}
.mc-sec-link { font-size: 13px; color: var(--primary); cursor: pointer; }

/* 待处理卡片 */
.mc-todo-section { }
.mc-todo-card {
  background: var(--white); margin: 0 14px 10px; border-radius: 12px;
  padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.mc-todo-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.mc-todo-tag {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 6px; flex-shrink: 0;
}
.mc-todo-tag.review { background: #FFF3E0; color: #E65100; }
.mc-todo-tag.join { background: #E3F2FD; color: #1565C0; }
.mc-todo-tag.event { background: #F3E5F5; color: #7B1FA2; }
.mc-todo-title { font-size: 14px; font-weight: 500; flex: 1; }
.mc-todo-time { font-size: 11px; color: #BDBDBD; flex-shrink: 0; }

.mc-todo-items { display: flex; flex-direction: column; gap: 0; }
.mc-todo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.mc-todo-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.mc-todo-info { flex: 1; min-width: 0; }
.mc-todo-user { font-size: 13px; font-weight: 500; display: block; }
.mc-todo-desc { font-size: 12px; color: #999; display: block; margin-top: 1px; }
.mc-todo-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mc-todo-btn {
  font-size: 12px; padding: 4px 12px; border-radius: 12px;
  border: 1px solid #E0E0E0; background: #fff; color: #666;
  cursor: pointer; font-weight: 500;
}
.mc-todo-btn.pass { background: var(--primary); color: #fff; border-color: var(--primary); }
.mc-todo-btn.reject { background: #fff; color: #999; }
.mc-todo-btn.edit { background: #F5F5F5; color: #333; border-color: #E0E0E0; }
.mc-todo-btn:active { opacity: 0.7; }

/* 活动草稿 */
.mc-event-draft { padding-top: 8px; }
.mc-event-draft-info { margin-bottom: 10px; }
.mc-event-draft-name { font-size: 14px; font-weight: 600; display: block; margin-bottom: 4px; }
.mc-event-draft-meta { font-size: 12px; color: #666; display: block; margin-bottom: 2px; }
.mc-event-draft-status { font-size: 11px; color: #BDBDBD; display: block; }
.mc-event-draft-actions { display: flex; gap: 8px; }

/* 圈子管理卡片 */
.mc-circles-section { }
.mc-circle-manage-card {
  background: var(--white); margin: 0 14px 10px; border-radius: 14px;
  padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
}
.mc-circle-manage-card:active { background: #FAFAFA; }
.mc-cm-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mc-cm-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.mc-cm-info { flex: 1; }
.mc-cm-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mc-cm-role {
  font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: 6px; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.mc-cm-meta { font-size: 12px; color: #999; margin-top: 2px; }
.mc-cm-stats {
  display: flex; gap: 0; margin-bottom: 14px;
  background: var(--bg); border-radius: 10px; padding: 12px 0;
}
.mc-cm-stat-item { flex: 1; text-align: center; }
.mc-cm-stat-num { font-size: 18px; font-weight: 700; color: #333; display: block; line-height: 1.2; }
.mc-cm-stat-label { font-size: 10px; color: #999; }

/* 7日趋势 */
.mc-cm-trend {
  display: flex; align-items: flex-end; gap: 10px;
  margin-bottom: 14px;
}
.mc-cm-trend-label { font-size: 11px; color: #999; flex-shrink: 0; }
.mc-cm-trend-chart {
  flex: 1; display: flex; gap: 4px; align-items: flex-end; height: 32px;
}
.mc-cm-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: #E0E0E0; min-height: 4px;
}
.mc-cm-bar.active { background: linear-gradient(180deg, var(--primary), #4DB6AC); }
.mc-cm-bar.today { background: linear-gradient(180deg, #FFD54F, #FFB300); }

/* 快捷操作 */
.mc-cm-quick { display: flex; gap: 8px; }
.mc-cm-qbtn {
  flex: 1; font-size: 12px; padding: 8px 0; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); color: #333; cursor: pointer;
}
.mc-cm-qbtn:active { background: var(--bg); }

/* 数据洞察 */
.mc-insight-section { padding: 0 0 8px; }
.mc-insight-cards { padding: 0 14px; display: flex; flex-direction: column; gap: 8px; }
.mc-insight-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--white); border-radius: 10px; padding: 12px 14px;
}
.mc-insight-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.mc-insight-text { font-size: 13px; color: #666; line-height: 1.5; }
.mc-insight-text b { color: #333; font-weight: 600; }

/* 管理日志-折叠卡片 */
.mc-log-card {
  margin: 0 14px 14px; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04); overflow: hidden;
}
.mc-log-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer;
}
.mc-log-card-header:active { background: #FAFAFA; }
.mc-log-card-left { display: flex; align-items: center; gap: 6px; }
.mc-log-card-icon { font-size: 14px; }
.mc-log-card-title { font-size: 14px; font-weight: 600; color: #333; }
.mc-log-card-badge {
  font-size: 10px; color: #999; background: #F5F5F5;
  padding: 2px 7px; border-radius: 8px;
}
.mc-log-arrow { transition: transform .25s; flex-shrink: 0; }
.mc-log-card.open .mc-log-arrow { transform: rotate(180deg); }

.mc-log-preview {
  padding: 0 14px 12px; font-size: 12px; color: #666; line-height: 1.5;
}
.mc-log-card.open .mc-log-preview { display: none; }
.mc-log-preview-time { font-size: 11px; color: #BDBDBD; margin-left: 4px; }

.mc-log-expand {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.mc-log-card.open .mc-log-expand { max-height: 400px; }

/* 管理日志-列表（展开后） */
.mc-log-section { padding: 0 0 8px; }
.mc-log-list { padding: 0 14px 8px 28px; }
.mc-log-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; position: relative;
}
.mc-log-item::before {
  content: ''; position: absolute; left: -14px; top: 24px;
  bottom: -10px; width: 1px; background: #E0E0E0;
}
.mc-log-item:last-child::before { display: none; }
.mc-log-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 5px;
  position: relative; left: -20px; margin-right: -20px;
}
.mc-log-dot.warn { background: #FF9800; }
.mc-log-body { flex: 1; }
.mc-log-text { font-size: 13px; color: #333; display: block; line-height: 1.5; }
.mc-log-text b { font-weight: 600; }
.mc-log-time { font-size: 11px; color: #BDBDBD; }

/* ==================== 我的-圈子管理中心 ==================== */

/* 汇总待办 */
.pro-manage-summary {
  display: flex; gap: 0; margin: 0 14px 12px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
}
.pro-ms-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 12px 6px;
  border-right: 1px solid #F5F5F5;
}
.pro-ms-item:last-child { border-right: none; }
.pro-ms-num { font-size: 20px; font-weight: 700; color: #333; line-height: 1.2; }
.pro-ms-item.alert .pro-ms-num { color: #FF5252; }
.pro-ms-label { font-size: 10px; color: #999; }

/* 圈子摘要卡片 */
.pro-circle-cards {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 14px 14px;
}
.pro-cc {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer; transition: transform .12s;
}
.pro-cc:active { transform: scale(0.98); }
.pro-cc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.pro-cc-info { flex: 1; min-width: 0; }
.pro-cc-name {
  font-size: 13px; font-weight: 600; color: #333;
  display: flex; align-items: center; gap: 6px;
}
.pro-cc-role {
  font-size: 9px; font-weight: 600; color: #fff;
  padding: 1px 6px; border-radius: 4px; flex-shrink: 0;
}
.pro-cc-role.owner { background: linear-gradient(135deg, #FFB300, #FF8F00); }
.pro-cc-role.host { background: linear-gradient(135deg, #42A5F5, #1E88E5); }
.pro-cc-meta { font-size: 11px; color: #999; margin-top: 2px; }

/* 查看全部按钮 */
.pro-cc-more {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0 14px 14px; padding: 10px;
  background: #fff; border-radius: 10px;
  font-size: 13px; color: var(--primary); font-weight: 500;
  cursor: pointer; border: 1px dashed #D0E8E4;
  transition: all .15s;
}
.pro-cc-more:active { background: #F0FBF8; }

/* ==================== 管理工作台-多圈支持 ==================== */

/* 圈子Tab横滑筛选 */
.mc-circle-tabs {
  display: flex; gap: 8px; padding: 0 14px 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.mc-circle-tabs::-webkit-scrollbar { display: none; }
.mc-ctab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 14px 8px; border-radius: 12px;
  border: 1.5px solid #E8E8E8; background: #fff;
  cursor: pointer; white-space: nowrap; min-width: 68px;
  transition: all .2s; position: relative;
}
.mc-ctab:active { transform: scale(0.96); }
.mc-ctab.active {
  background: linear-gradient(135deg, #E8F5E9, #F0FBF8);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(38,166,154,0.15);
}
.mc-ctab-icon { font-size: 20px; line-height: 1; }
.mc-ctab-name {
  font-size: 11px; font-weight: 600; color: #666;
  line-height: 1.2;
}
.mc-ctab.active .mc-ctab-name { color: #333; }
.mc-ctab-role {
  font-size: 8px; font-weight: 600; color: #fff;
  padding: 1px 5px; border-radius: 3px;
}
.mc-ctab-role.owner { background: linear-gradient(135deg, #FFB300, #FF8F00); }
.mc-ctab-role.host { background: linear-gradient(135deg, #90CAF9, #64B5F6); }
.mc-ctab.active .mc-ctab-role.host { background: linear-gradient(135deg, #42A5F5, #1E88E5); }

/* 圈子面板切换 */
.mc-circle-panel { display: none; }
.mc-circle-panel.active { display: block; }

/* section count badge */
.mc-sec-count {
  font-size: 12px; color: #999; font-weight: 400;
  margin-left: 6px;
}

/* 角色徽章（管理工作台） */
.mc-cm-role.owner { background: linear-gradient(135deg, #FFB300, #FF8F00); }
.mc-cm-role.host { background: linear-gradient(135deg, #42A5F5, #1E88E5); }

/* Skill 装配 */
.mc-cm-skills {
  background: linear-gradient(135deg, #F8F6FF 0%, #FFF8F0 100%);
  border: 1px solid #EDE7FF; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.mc-cm-skills-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.mc-cm-skills-title {
  font-size: 13px; font-weight: 600; color: #333;
}
.mc-cm-skills-count {
  font-size: 11px; color: #7B61FF; font-weight: 600; margin-left: 4px;
}
.mc-cm-skills-link {
  font-size: 12px; color: #7B61FF; cursor: pointer;
}
.mc-cm-skills-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mc-cm-skill {
  font-size: 11px; padding: 5px 10px; border-radius: 10px;
  background: #F5F5F5; color: #666; border: 1px solid transparent;
  white-space: nowrap;
}
.mc-cm-skill.must { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
.mc-cm-skill.rec { background: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.mc-cm-skill.opt { background: #F5F5F5; color: #757575; border-color: #E0E0E0; }
.mc-cm-skill.unlock { background: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }
.mc-cm-skill.scene { background: #F3E5F5; color: #7B1FA2; border-color: #E1BEE7; }
.mc-cm-skill.ai { background: #EDE7F6; color: #5E35B1; border-color: #D1C4E9; }

/* 提醒标签 */
.mc-cm-alerts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.mc-cm-alert-item {
  font-size: 11px; padding: 4px 10px; border-radius: 8px;
  background: #F5F5F5; color: #666;
}
.mc-cm-alert-item.warn { background: #FFF3E0; color: #E65100; }
.mc-cm-alert-item.info { background: #E3F2FD; color: #1565C0; }
.mc-cm-alert-item.good { background: #E8F5E9; color: #2E7D32; }

/* 主理人权限展示 */
.mc-cm-host-perm {
  margin-bottom: 14px; padding: 12px;
  background: #FAFAFA; border-radius: 10px;
}
.mc-cm-perm-title {
  font-size: 11px; color: #999; font-weight: 500;
  display: block; margin-bottom: 8px;
}
.mc-cm-perm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-cm-perm {
  font-size: 11px; padding: 4px 10px; border-radius: 6px;
  font-weight: 500;
}
.mc-cm-perm.on { background: #E8F5E9; color: #2E7D32; }
.mc-cm-perm.off { background: #F5F5F5; color: #BDBDBD; text-decoration: line-through; }

/* 日志圈名标签 */
.mc-log-circle {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  background: #E3F2FD; color: #1565C0;
  margin-right: 4px;
}

/* ===== AI 洞察紧凑卡片 ===== */
.mc-insight-compact {
  background: #fff; border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mc-insight-head {
  display: flex; align-items: center; margin-bottom: 10px;
}
.mc-insight-ai-icon {
  font-size: 16px; margin-right: 4px;
}
.mc-insight-ai-title {
  font-size: 14px; font-weight: 700; color: #333; flex: 1;
}
.mc-insight-ai-link {
  font-size: 12px; color: var(--primary); font-weight: 500; cursor: pointer;
}
.mc-insight-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.mc-itag {
  display: inline-block; font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 20px;
  background: #F5F5F5; color: #666;
  line-height: 1.4; white-space: nowrap;
}
.mc-itag.hot {
  background: #FFF3E0; color: #E65100;
}
.mc-itag.fire {
  background: #FCE4EC; color: #C62828;
}
.mc-itag.event {
  background: #E8F5E9; color: #2E7D32;
}
.mc-itag.warn {
  background: #FFF8E1; color: #F57F17;
}
.mc-itag.up {
  background: #E3F2FD; color: #1565C0;
}

/* ==================== 成就页 ==================== */
/* 概览卡片 */
.achv-summary {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  border-radius: 16px; padding: 20px 0; margin-bottom: 16px;
}
.achv-sum-item { text-align: center; flex: 1; }
.achv-sum-num { display: block; font-size: 28px; font-weight: 800; color: #fff; }
.achv-sum-label { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.achv-sum-divider { width: 1px; height: 36px; background: rgba(255,255,255,.2); }

/* 分类 Tab */
.achv-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.achv-tabs::-webkit-scrollbar { display: none; }
.achv-tab {
  flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 500; border: 1px solid #E0E0E0;
  background: #fff; color: #666; cursor: pointer; white-space: nowrap;
}
.achv-tab.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* 成就分组 */
.achv-group { margin-bottom: 20px; }
.achv-group-title {
  font-size: 15px; font-weight: 700; color: #333; margin-bottom: 12px;
}
.achv-group-count {
  font-size: 12px; font-weight: 400; color: #999; margin-left: 4px;
}

/* 成就网格 */
.achv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

/* 成就卡片 */
.achv-card {
  background: #fff; border-radius: 14px; padding: 16px 12px;
  text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: relative;
}
.achv-card.earned { border: 1.5px solid #FFC107; }
.achv-card.progress { border: 1.5px solid #E0E0E0; }
.achv-card.locked { border: 1.5px solid #F5F5F5; opacity: .55; }
.achv-badge {
  font-size: 32px; line-height: 1; margin-bottom: 8px;
}
.achv-badge.dim { filter: grayscale(.6); opacity: .6; }
.achv-card-name {
  font-size: 14px; font-weight: 700; color: #333; margin-bottom: 4px;
}
.achv-card-desc {
  font-size: 11px; color: #999; line-height: 1.4; margin-bottom: 6px;
}
.achv-card-date {
  font-size: 11px; color: #BDBDBD;
}
.achv-card.earned .achv-card-date { color: #FF8F00; font-weight: 500; }

/* 进度条 */
.achv-progress-bar {
  width: 100%; height: 4px; background: #F0F0F0; border-radius: 2px;
  margin-bottom: 6px; overflow: hidden;
}
.achv-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--primary), #4DB6AC);
  border-radius: 2px;
}
.achv-card.progress .achv-card-date { color: var(--primary); font-weight: 600; }

/* ==================== 互助记录页 ==================== */
/* 概览 */
.help-summary {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  padding: 24px 20px 20px; margin: 0;
}
.help-sum-main {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.help-sum-big { text-align: left; }
.help-sum-num {
  display: block; font-size: 48px; font-weight: 800; color: #fff; line-height: 1;
}
.help-sum-label {
  font-size: 13px; color: rgba(255,255,255,.65); margin-top: 4px; display: block;
}
.help-sum-ring { position: relative; }
.help-ring-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center;
}
.help-ring-pct { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.help-ring-sub { font-size: 10px; color: rgba(255,255,255,.6); }

.help-sum-stats {
  display: flex; gap: 0; justify-content: space-between;
  background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px 8px;
}
.help-sum-stat { text-align: center; flex: 1; }
.help-stat-num { display: block; font-size: 18px; font-weight: 700; }
.help-stat-label { font-size: 11px; color: rgba(255,255,255,.6); }

/* Tabs */
.help-tabs {
  display: flex; gap: 0; padding: 12px 16px; background: #fff;
  border-bottom: 1px solid #F0F0F0; position: sticky; top: 0; z-index: 2;
}
.help-tab {
  flex: 1; padding: 8px 0; border: none; background: none;
  font-size: 14px; font-weight: 500; color: #999;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.help-tab.active {
  color: var(--primary); font-weight: 700;
  border-bottom-color: var(--primary);
}

/* 日期分割 */
.help-date-divider {
  padding: 12px 20px 6px; font-size: 12px; font-weight: 600; color: #BDBDBD;
  background: #F9F9F9;
}

/* 卡片列表 */
.help-list { background: #F9F9F9; padding-bottom: 10px; }

.help-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; margin: 0 12px 8px; padding: 14px;
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.help-card-badge {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.help-card-badge.gave { background: linear-gradient(135deg, #FF9800, #FF5722); }
.help-card-badge.got { background: linear-gradient(135deg, #26A69A, #00897B); }

.help-card-body { flex: 1; min-width: 0; }
.help-card-row1 {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.help-card-title {
  font-size: 15px; font-weight: 600; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.help-card-status {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px;
  flex-shrink: 0; margin-left: 8px;
}
.help-card-status.done { background: #E8F5E9; color: #2E7D32; }
.help-card-status.pending { background: #FFF3E0; color: #E65100; }

.help-card-row2 {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.help-card-avatar { width: 20px; height: 20px; border-radius: 50%; }
.help-card-who { font-size: 12px; color: #999; flex: 1; }
.help-card-points { font-size: 12px; font-weight: 600; color: #FF9800; flex-shrink: 0; }

.help-card-feedback { margin-top: 6px; }
.help-card-thanks {
  font-size: 12px; color: #666; font-style: italic; line-height: 1.4;
  background: #FFFDE7; padding: 6px 10px; border-radius: 8px; display: block;
}

/* ==================== 编辑资料页 ==================== */
.pe-avatar-section {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 0 16px; background: #fff;
}
.pe-avatar-wrap { position: relative; }
.pe-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(108,114,203,0.25);
}
.pe-avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #26A69A; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.pe-avatar-tip { margin-top: 10px; font-size: 12px; color: #999; }

.pe-card {
  margin: 10px 12px 0; background: #fff; border-radius: 12px;
  padding: 4px 14px; overflow: hidden;
}
.pe-card-title {
  font-size: 13px; font-weight: 600; color: #333;
  padding: 12px 0 8px; display: flex; align-items: center; justify-content: space-between;
}
.pe-card-sub { font-size: 11px; color: #999; font-weight: 400; }

.pe-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid #F0F0F2;
  min-height: 24px;
}
.pe-row:last-child { border-bottom: none; }
.pe-row-arrow { cursor: pointer; }

.pe-label {
  font-size: 14px; color: #333; flex-shrink: 0;
  min-width: 72px;
}
.pe-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: #333; text-align: right;
  font-family: inherit;
}
.pe-input::placeholder { color: #ccc; }
.pe-row-tail { font-size: 11px; color: #bbb; flex-shrink: 0; }
.pe-value { flex: 1; text-align: right; font-size: 14px; color: #666; }
.pe-value-muted { color: #bbb; }
.pe-arrow { flex-shrink: 0; }

.pe-seg {
  flex: 1; display: flex; justify-content: flex-end; gap: 8px;
}
.pe-seg-btn {
  border: 1px solid #E5E5E8; background: #fff; color: #666;
  font-size: 12px; padding: 5px 14px; border-radius: 14px;
  cursor: pointer; font-family: inherit;
}
.pe-seg-btn.active {
  background: #E0F2F1; border-color: #26A69A; color: #26A69A; font-weight: 600;
}

.pe-scene-grid {
  flex: 1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
.pe-scene {
  border: 1px solid #E5E5E8; background: #fff; color: #666;
  font-size: 12px; padding: 5px 10px; border-radius: 14px;
  cursor: pointer; font-family: inherit;
}
.pe-scene.active {
  background: #E0F2F1; border-color: #26A69A; color: #26A69A; font-weight: 600;
}

.pe-badge-verified {
  flex: 1; text-align: right; font-size: 12px;
  color: #26A69A; font-weight: 600;
}

.pe-tip {
  font-size: 11px; color: #999; padding: 8px 0 12px;
  line-height: 1.5;
}

.pe-tags-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0 14px;
}
.pe-tag {
  border: 1px solid #E5E5E8; background: #fff; color: #666;
  font-size: 12px; padding: 6px 12px; border-radius: 16px;
  cursor: pointer; font-family: inherit;
}
.pe-tag.active {
  background: #E0F2F1; border-color: #26A69A; color: #26A69A; font-weight: 600;
}

/* 我的标签 · 五维画像 */
.pe-mt-section {
  padding: 12px 0;
  border-bottom: 1px solid #F2F3F5;
}
.pe-mt-section:last-of-type { border-bottom: none; }
.pe-mt-title {
  font-size: 12px; font-weight: 600; color: #333;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.pe-mt-title em {
  font-style: normal; font-size: 10px; font-weight: 400; color: #999;
}
.pe-mt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-mt-chip {
  border: 1px solid #E5E5E8; background: #fff; color: #666;
  font-size: 11px; padding: 5px 10px; border-radius: 14px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.pe-mt-chip.active {
  background: #FFF4D6; border-color: #FFB84D; color: #FF7A1F; font-weight: 600;
}
.pe-mt-chip.verified.active {
  background: linear-gradient(135deg, #FFF4D6, #FFE0A8);
  border-color: #FFB84D;
}
.pe-mt-v {
  font-size: 9px; background: #FF7A1F; color: #fff;
  padding: 1px 5px; border-radius: 6px; font-weight: 600;
}
.pe-mt-v.l1 { background: #9E9E9E; }
.pe-mt-age {
  font-size: 9px; color: #999; font-weight: 500; margin-left: 3px;
}
.pe-mt-chip.active .pe-mt-age { color: #FF9A4D; }

/* 编辑页 · 身份与位置内联列表 */
.pe-places-inline { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pe-places-empty { font-size: 12px; color: #999; padding: 8px 0; }
.pe-place-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #F8F9FB;
  border-radius: 10px; cursor: pointer;
}
.pe-pi-icon { font-size: 22px; }
.pe-pi-main { flex: 1; min-width: 0; }
.pe-pi-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pe-pi-label { font-size: 13px; font-weight: 600; color: #333; }
.pe-pi-role {
  font-size: 10px; color: #FF7A1F; background: #FFF1E5;
  padding: 1px 6px; border-radius: 4px; font-weight: 500;
}
.pe-pi-verify {
  font-size: 9px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px; color: #fff;
}
.pe-pi-verify.l2 { background: #2EB86B; }
.pe-pi-verify.l1 { background: #FFB84D; }
.pe-pi-verify.l0 { background: #BDBDBD; }
.pe-pi-name { font-size: 11px; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* my-places 子页面 · 角色/验证行 */
.mp2-item-idrow {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.mp2-role {
  font-size: 11px; color: #FF7A1F; background: #FFF1E5;
  padding: 3px 8px; border-radius: 10px; font-weight: 500; cursor: pointer;
}
.mp2-role.add { color: #999; background: #F2F3F5; border: 1px dashed #D0D0D0; }
.mp2-verify {
  font-size: 10px; font-weight: 600;
  padding: 3px 7px; border-radius: 10px; color: #fff;
}
.mp2-verify.l2 { background: #2EB86B; }
.mp2-verify.l1 { background: #FFB84D; }
.mp2-verify.l0 { background: #fff; color: #999; border: 1px dashed #D0D0D0; cursor: pointer; }

/* 亮仔眼中的你 · 软画像卡片 */
.pro-liangzai-card {
  background: linear-gradient(135deg, #FFF7EB 0%, #FFF1F6 100%);
  border: 1px solid #FFE0C2;
}
.lz-summary {
  font-size: 12px; color: #666; line-height: 1.6;
  margin: 8px 0 12px; padding: 0 2px;
}
.lz-summary b { color: #FF7A1F; font-weight: 600; }
.lz-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lz-tag {
  font-size: 12px; color: #5A4632;
  background: #fff; border: 1px solid #FFD9A8;
  padding: 5px 10px; border-radius: 14px;
  line-height: 1.3;
}
/* 隐身态 */
.lz-hidden {
  text-align: center; padding: 18px 8px 10px;
}
.lz-hidden-icon { font-size: 32px; margin-bottom: 6px; }
.lz-hidden-title { font-size: 14px; font-weight: 600; color: #5A4632; margin-bottom: 4px; }
.lz-hidden-desc { font-size: 11px; color: #999; margin-bottom: 14px; line-height: 1.5; }
.lz-hidden-btn {
  font-size: 12px; color: #FF7A1F; background: #fff;
  border: 1px solid #FFD9A8; padding: 6px 18px;
  border-radius: 14px; cursor: pointer; font-weight: 500;
}
.lz-hidden-btn:active { background: #FFF3E0; }
.lz-tags.lz-fade { opacity: 0.3; transition: opacity 0.18s; }
.lz-refresh {
  color: #FF7A1F; font-weight: 600; padding: 2px 4px;
  cursor: pointer;
}
.lz-refresh:active { opacity: 0.6; }
.lz-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed #FFD9A8;
  font-size: 11px; color: #999;
}
.lz-action {
  color: #FF7A1F; padding: 2px 4px;
}
.lz-footer-text { color: #999; }
.pe-mt-chip.soft.active { background: #F5F6F8; border-color: #BDBDBD; color: #555; }
.pe-mt-chip.pe-mt-more { color: #FF7A1F; border-style: dashed; border-color: #FFB84D; background: #FFFDF7; }
.pe-mt-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #F2F3F5;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #999;
}
.pe-mt-count { color: #FF7A1F; font-weight: 600; }
.pe-mt-privacy { color: #26A69A; cursor: pointer; }
.pe-mt-hint {
  margin-top: 8px; padding: 8px 10px;
  background: #FFF8E1; border-left: 2px solid #FFB84D;
  font-size: 10px; color: #8B6A20; line-height: 1.5; border-radius: 0 6px 6px 0;
}

.pe-row-switch { align-items: center; }
.pe-switch-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pe-switch-info .pe-label { min-width: 0; }
.pe-switch-sub { font-size: 11px; color: #999; }
.pe-switch {
  width: 40px; height: 22px; border-radius: 11px; background: #E5E5E8;
  position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s;
}
.pe-switch.on { background: #26A69A; }
.pe-switch-dot {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: left .2s;
}
.pe-switch.on .pe-switch-dot { left: 20px; }

/* 全局 Toast */
.global-toast {
  position: fixed; left: 50%; top: 40%;
  transform: translate(-50%, -20px);
  background: rgba(40, 40, 50, 0.92);
  color: #fff; font-size: 13px;
  padding: 10px 18px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
  max-width: 280px;
  white-space: nowrap;
}
.global-toast.show {
  opacity: 1; transform: translate(-50%, 0);
}
.toast-icon { font-size: 14px; }

/* 完善资料赚亮点 */
.pe-reward-card {
  margin: 10px 12px 0;
  background: linear-gradient(135deg, #FFF9E6 0%, #FFF3D6 100%);
  border-radius: 12px; padding: 14px 14px 12px;
  border: 1px solid #FFE4A0;
}
.pe-reward-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pe-reward-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #5D4A1F;
}
.pe-reward-icon { font-size: 16px; }
.pe-reward-sum { font-size: 12px; color: #8B6F2C; }
.pe-reward-sum b { color: #F57C00; font-size: 14px; }
.pe-reward-bar {
  height: 6px; background: rgba(255,255,255,0.7); border-radius: 3px;
  overflow: hidden; margin-bottom: 10px;
}
.pe-reward-fill {
  height: 100%; background: linear-gradient(90deg, #FFB74D, #FF9800);
  border-radius: 3px;
}
.pe-reward-list {
  background: #fff; border-radius: 10px; padding: 4px 10px;
}
.pe-reward-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed #F0EAD6;
  font-size: 13px;
}
.pe-reward-item:last-child { border-bottom: none; }
.pe-reward-check {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.pe-reward-item.done .pe-reward-check { background: #E0F2F1; color: #26A69A; font-weight: 700; }
.pe-reward-item.todo .pe-reward-check { background: #fff; color: #BBB; border: 1px solid #DDD; }
.pe-reward-name { flex: 1; color: #555; }
.pe-reward-item.todo .pe-reward-name { color: #888; }
.pe-reward-pts {
  font-size: 11px; color: #BBB; flex-shrink: 0;
}
.pe-reward-pts.earned { color: #F57C00; font-weight: 600; font-size: 12px; }
.pe-reward-pts.todo { color: #FF9800; font-weight: 600; font-size: 12px; }
.pe-reward-item.pe-reward-pack {
  background: #FFF8E1; margin: 2px -10px; padding: 8px 10px; border-radius: 6px;
  border-bottom: 1px dashed #F0EAD6;
}
.pe-reward-foot {
  font-size: 11px; color: #8B6F2C; margin-top: 10px; line-height: 1.5;
}

/* 我的页 亮度卡片内 赚亮点入口 */
.pro-trust-task {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, #FFF3D6, #FFE4A0);
  border-radius: 10px; cursor: pointer;
}
.pro-trust-task-icon { font-size: 16px; }
.pro-trust-task-text { flex: 1; font-size: 13px; color: #5D4A1F; }
.pro-trust-task-text b { color: #F57C00; font-size: 15px; }
.pro-trust-task-go { font-size: 12px; color: #F57C00; font-weight: 600; }

.pe-badge-pending {
  flex: 1; text-align: right; font-size: 12px;
  color: #FF9800; font-weight: 600;
}

/* 多地点列表 */
.pe-places-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 2px 10px;
}
.pe-places-sub { font-size: 11px; color: #999; }
.pe-places-list { display: flex; flex-direction: column; gap: 8px; }
.pe-places-empty {
  text-align: center; color: #aaa; font-size: 12px; padding: 18px 0;
  background: #fafafa; border-radius: 10px;
}
.pe-place-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f7f9fa;
  border-radius: 12px; border: 1px solid transparent;
  transition: all .2s;
}
.pe-place-card.is-default {
  background: linear-gradient(135deg, #E8F5F2 0%, #F0F9F7 100%);
  border-color: #26A69A33;
}
.pe-place-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pe-place-main { flex: 1; min-width: 0; }
.pe-place-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pe-place-label {
  font-size: 13px; font-weight: 600; color: #333;
}
.pe-place-default {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: #26A69A; color: #fff; font-weight: 600;
}
.pe-place-setdefault {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: #fff; color: #26A69A; border: 1px solid #26A69A55;
}
.pe-place-name {
  font-size: 13px; color: #222; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-place-detail {
  font-size: 11px; color: #888; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-place-del {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: #fff; color: #bbb;
  font-size: 12px; cursor: pointer; flex-shrink: 0;
}
.pe-place-del:active { background: #ffebee; color: #f44336; }
.pe-add-place {
  width: 100%; margin-top: 10px;
  padding: 10px; border-radius: 10px;
  border: 1px dashed #26A69A;
  background: #fff; color: #26A69A;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pe-add-place:active { background: #E8F5F2; }
.pe-add-icon { font-size: 15px; margin-right: 2px; }
/* 位置选择页 — 单页表单 */
.sl-section-label {
  font-size: 13px; font-weight: 600; color: #333;
  margin: 14px 2px 8px;
}
.sl-section-label .sl-section-sub {
  font-size: 11px; color: #999; font-weight: 400; margin-left: 6px;
}
.sl-cat-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sl-cat {
  padding: 8px 14px; border-radius: 20px;
  background: #f7f9fa; border: 1px solid transparent;
  font-size: 13px; color: #555; cursor: pointer;
}
.sl-cat.active {
  background: #E8F5F2; color: #26A69A;
  border-color: #26A69A; font-weight: 600;
}
.sl-form-row {
  padding: 12px 14px; background: #f7f9fa; border-radius: 10px;
}
.sl-form-input {
  width: 100%; border: none; background: transparent;
  font-size: 14px; color: #222; outline: none;
}
.sl-form-tip {
  margin-top: 16px; font-size: 12px; color: #888;
  padding: 10px 12px; background: #FFF8E1; border-radius: 10px;
}

.mp-hint {
  font-size: 12px; color: #888; line-height: 1.6;
  padding: 10px 12px; background: #f7f9fa; border-radius: 10px;
}

/* ============ 我的地点 v2 ============ */
.mp2-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 18px 18px;
  background: linear-gradient(135deg, #E8F5F2 0%, #F0F9F7 100%);
}
.mp2-hero-emoji {
  width: 52px; height: 52px; border-radius: 14px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(38,166,154,0.12);
}
.mp2-hero-title { font-size: 17px; font-weight: 700; color: #1a3a36; }
.mp2-hero-sub { font-size: 12px; color: #5a8a84; margin-top: 3px; }

.mp2-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 14px 4px;
  background: #F5F6F8;
}
.mp2-cat {
  flex: 0 0 calc(33.333% - 6px);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px; border-radius: 12px;
  background: #fff; border: 1.5px solid transparent;
  font-size: 13px; color: #555; cursor: pointer;
  transition: all .2s;
}
.mp2-cat.active {
  background: #fff; border-color: #26A69A;
  color: #26A69A; font-weight: 600;
  box-shadow: 0 4px 12px rgba(38,166,154,0.15);
}
.mp2-cat-emoji { font-size: 15px; }
.mp2-cat-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #f0f0f0;
  color: #888; font-size: 10px; font-weight: 600;
}
.mp2-cat.active .mp2-cat-n { background: #26A69A; color: #fff; }

.mp2-form {
  margin: 14px; padding: 18px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.mp2-step { margin-bottom: 18px; }
.mp2-step:last-of-type { margin-bottom: 10px; }
.mp2-step-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 10px;
}
.mp2-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: #26A69A; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

.mp2-search-wrap { margin-bottom: 8px; }
.mp2-search-box {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #F5F6F8;
  border-radius: 10px; border: 1.5px solid transparent;
  transition: border-color .2s;
}
.mp2-search-box:focus-within { border-color: #26A69A; background: #fff; }
.mp2-search-input {
  flex: 1; border: none; background: transparent;
  font-size: 14px; color: #222; outline: none;
}
.mp2-search-clear {
  border: none; background: #ccc; color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; cursor: pointer; padding: 0;
}
.mp2-poi-list {
  margin-top: 6px; max-height: 200px; overflow-y: auto;
}
.mp2-poi-list .mp-poi-item {
  padding: 10px 12px; border-radius: 8px;
  border-bottom: none; margin-bottom: 4px;
}
.mp2-poi-list .mp-poi-item:hover,
.mp2-poi-list .mp-poi-item.selected { background: #F0F9F7; }
.mp2-poi-list .mp-poi-empty { padding: 10px; }

.mp2-selected {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-top: 8px;
  background: #E8F5F2; border-radius: 10px;
}
.mp2-selected-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #26A69A; flex-shrink: 0;
}
.mp2-selected-name { font-size: 13px; color: #26A69A; font-weight: 600; }
.mp2-selected-addr { font-size: 11px; color: #888; margin-top: 2px; }

/* 子字段覆盖：更干净 */
#mpFields .mp-field-row {
  padding: 11px 12px; background: #F5F6F8;
  border: 1.5px solid transparent; border-radius: 10px;
}
#mpFields .mp-field-row:focus-within { border-color: #26A69A; background: #fff; }
#mpFields .mp-field-label {
  font-size: 12px; color: #888; font-weight: 500; width: 60px;
}
#mpFields .mp-field-input {
  font-size: 13px;
}
#mpFields .mp-field-combo .mp-field-input {
  padding: 8px 10px; background: #fff;
  border: 1px solid #e8e8e8;
}
#mpFields .mp-field-chip {
  padding: 5px 11px; border-radius: 12px;
  background: #fff; border: 1px solid #e0e0e0;
}

/* 标签覆盖 */
#mpLabels { gap: 8px; }
#mpLabels .mp-label-chip {
  padding: 8px 16px; font-size: 13px; border-radius: 16px;
}

.mp2-submit {
  width: 100%; padding: 14px; margin-top: 6px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, #26A69A 0%, #1E8A80 100%);
  color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(38,166,154,0.25);
}
.mp2-submit:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(38,166,154,0.2); }

.mp2-list-section { margin: 6px 14px 14px; }
.mp2-list-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 4px 10px;
}
.mp2-list-title { font-size: 13px; font-weight: 600; color: #666; }
.mp2-list-count {
  font-size: 11px; color: #999;
  padding: 2px 7px; background: #fff; border-radius: 8px;
}
.mp2-list { display: flex; flex-direction: column; gap: 8px; }
.mp2-list .mp2-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #fff; border-radius: 12px;
}
.mp2-list .mp2-item.is-default { box-shadow: 0 0 0 1.5px #26A69A inset; }
.mp2-item-emoji {
  width: 36px; height: 36px; border-radius: 10px;
  background: #F5F6F8; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.mp2-item-main { flex: 1; min-width: 0; }
.mp2-item-top { display: flex; align-items: center; gap: 6px; }
.mp2-item-label { font-size: 13px; font-weight: 600; color: #222; }
.mp2-item-cat { font-size: 10px; color: #999; padding: 1px 6px; background: #F5F6F8; border-radius: 6px; }
.mp2-item-default-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: #26A69A; color: #fff; font-weight: 600;
}
.mp2-item-name { font-size: 12px; color: #555; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp2-item-detail { font-size: 11px; color: #999; margin-top: 1px; }
.mp2-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mp2-item-btn {
  border: none; background: #F5F6F8; color: #888;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; cursor: pointer;
}
.mp2-item-btn:active { background: #e8e8e8; }
.mp2-list-empty {
  text-align: center; padding: 24px; color: #bbb; font-size: 12px;
}
.mp-cat-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 14px 12px;
}
.mp-cat-tab {
  padding: 7px 12px; border-radius: 18px;
  background: #f7f9fa; border: 1px solid transparent;
  font-size: 13px; color: #555; cursor: pointer;
  white-space: nowrap;
}
.mp-cat-tab.active {
  background: #26A69A; color: #fff; font-weight: 600;
  border-color: #26A69A;
}
.mp-cat-count {
  display: inline-block; min-width: 16px; padding: 0 5px;
  margin-left: 4px; border-radius: 8px;
  background: rgba(0,0,0,0.08); color: inherit;
  font-size: 11px; text-align: center;
}
.mp-cat-tab.active .mp-cat-count {
  background: rgba(255,255,255,0.25); color: #fff;
}
.mp-body { padding: 0 14px; }
.mp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mp-add-card {
  background: #fafcfc; border: 1px dashed #26A69A66;
  border-radius: 12px; padding: 14px;
}
.mp-add-title {
  font-size: 13px; font-weight: 600; color: #26A69A;
  margin-bottom: 10px;
}
.mp-add-row {
  padding: 10px 12px; background: #fff; border-radius: 8px;
  margin-bottom: 8px; border: 1px solid #eee;
}
.mp-add-input {
  width: 100%; border: none; background: transparent;
  font-size: 13px; color: #222; outline: none;
}
.mp-add-btn {
  width: 100%; margin-top: 10px; padding: 10px;
  border: none; border-radius: 8px;
  background: #26A69A; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.mp-add-btn:active { background: #1e8a80; }

/* 地址搜索 */
.mp-search-wrap { margin-bottom: 10px; }
.mp-search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #fff;
  border: 1px solid #eee; border-radius: 8px;
}
.mp-search-input {
  flex: 1; border: none; background: transparent;
  font-size: 13px; color: #222; outline: none;
}
.mp-search-clear {
  border: none; background: #e0e0e0; color: #888;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; cursor: pointer; padding: 0;
}
.mp-poi-list {
  margin-top: 6px; max-height: 200px; overflow-y: auto;
  background: #fff; border-radius: 8px; border: 1px solid #f0f0f0;
}
.mp-poi-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}
.mp-poi-item:last-child { border-bottom: none; }
.mp-poi-item:active, .mp-poi-item.selected { background: #E8F5F2; }
.mp-poi-pin { font-size: 14px; flex-shrink: 0; }
.mp-poi-info { flex: 1; min-width: 0; }
.mp-poi-name {
  font-size: 13px; color: #222; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-poi-addr {
  font-size: 11px; color: #999; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-poi-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: #aaa;
}

/* 已选摘要 */
.mp-selected {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  background: #E8F5F2; border-radius: 8px;
  border: 1px solid #26A69A33;
}
.mp-selected-icon { font-size: 16px; }
.mp-selected-info { flex: 1; min-width: 0; }
.mp-selected-name { font-size: 13px; color: #26A69A; font-weight: 600; }
.mp-selected-addr { font-size: 11px; color: #777; margin-top: 1px; }

/* 子字段 */
.mp-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mp-field-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #fff;
  border: 1px solid #eee; border-radius: 8px;
}
.mp-field-label {
  font-size: 12px; color: #666; font-weight: 600;
  width: 56px; flex-shrink: 0;
}
.mp-field-input {
  flex: 1; border: none; background: transparent;
  font-size: 13px; color: #222; outline: none;
}
.mp-field-combo-row { align-items: flex-start; }
.mp-field-combo {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.mp-field-combo .mp-field-input {
  padding: 6px 10px; background: #fafafa;
  border: 1px solid #eee; border-radius: 6px;
}
.mp-field-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mp-field-chip {
  padding: 5px 10px; border-radius: 12px;
  background: #f5f5f5; border: 1px solid transparent;
  font-size: 12px; color: #666; cursor: pointer;
}
.mp-field-chip.active {
  background: #E8F5F2; color: #26A69A;
  border-color: #26A69A; font-weight: 600;
}

/* 标签 chips */
.mp-labels-title {
  font-size: 12px; color: #666; font-weight: 600;
  margin-bottom: 6px;
}
.mp-labels {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 4px;
}
.mp-label-chip {
  padding: 6px 12px; border-radius: 14px;
  background: #fff; border: 1px solid #e0e0e0;
  font-size: 12px; color: #555; cursor: pointer;
}
.mp-label-chip.active {
  background: #26A69A; color: #fff; border-color: #26A69A;
  font-weight: 600;
}

/* 位置标签输入 */
.sl-label-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-top: 8px;
  background: #f7f9fa; border-radius: 10px;
}
.sl-label-title { font-size: 13px; color: #333; font-weight: 600; }
.sl-label-input {
  flex: 1; border: none; background: transparent;
  font-size: 13px; color: #222; outline: none;
}

/* ==================== 实名认证页 ==================== */
.vr-hero {
  background: linear-gradient(135deg, #26A69A 0%, #1E88A8 100%);
  padding: 28px 20px 24px; text-align: center;
  color: #fff;
}
.vr-hero-shield {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  border: 2px solid rgba(255,255,255,0.3);
}
.vr-hero-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.vr-hero-sub { font-size: 12px; opacity: 0.85; }

.vr-card {
  margin: 12px; background: #fff; border-radius: 12px;
  padding: 14px 16px;
}
.vr-card-title {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 12px;
}

.vr-benefits { display: flex; flex-direction: column; gap: 12px; }
.vr-benefit { display: flex; align-items: flex-start; gap: 12px; }
.vr-benefit-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.vr-benefit-info { flex: 1; }
.vr-benefit-name { font-size: 13px; color: #333; font-weight: 600; margin-bottom: 2px; }
.vr-pts { color: #F57C00; font-weight: 700; margin-left: 4px; }
.vr-benefit-desc { font-size: 11px; color: #999; line-height: 1.5; }

.vr-field {
  padding: 12px 0; border-bottom: 1px solid #F0F0F2;
}
.vr-field:last-child { border-bottom: none; }
.vr-field-label {
  display: block; font-size: 12px; color: #999; margin-bottom: 6px;
}
.vr-field-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 15px; color: #333; padding: 4px 0;
  font-family: inherit;
}
.vr-field-input::placeholder { color: #ccc; font-size: 14px; }

.vr-field-row {
  display: flex; align-items: center; cursor: pointer;
}
.vr-face-info { flex: 1; }
.vr-field-sub { font-size: 11px; color: #999; }
.vr-face-action { display: flex; align-items: center; gap: 4px; }
.vr-face-status { font-size: 13px; color: #FF9800; font-weight: 600; }
.vr-face-status.done { color: #26A69A; }

.vr-privacy { background: #F8FAFB; }
.vr-privacy-row { display: flex; gap: 10px; }
.vr-privacy-icon { font-size: 18px; flex-shrink: 0; }
.vr-privacy-text {
  font-size: 12px; color: #666; line-height: 1.7;
}
.vr-privacy-text b { color: #333; font-size: 13px; }

.vr-agree {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 16px 4px;
}
.vr-checkbox {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #CCC; flex-shrink: 0;
  margin-top: 1px; cursor: pointer; position: relative;
}
.vr-checkbox.checked {
  background: #26A69A; border-color: #26A69A;
}
.vr-checkbox.checked::after {
  content: '✓'; color: #fff; font-size: 11px; font-weight: 700;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%);
}
.vr-agree-text { font-size: 11px; color: #999; line-height: 1.6; }
.vr-agree-text a { color: #26A69A; }

.vr-submit-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 16px 20px;
  background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0));
}
.vr-submit-btn {
  width: 100%; height: 46px; border-radius: 23px;
  background: linear-gradient(135deg, #26A69A, #1E88A8);
  color: #fff; font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(38,166,154,0.3);
  font-family: inherit;
}
.vr-submit-btn:active { opacity: 0.85; }

/* ==================== 位置选择页 ==================== */
.sl-scene-tabs {
  display: flex; gap: 8px; padding: 12px 12px 4px;
  overflow-x: auto; background: #fff;
}
.sl-scene-tabs::-webkit-scrollbar { display: none; }
.sl-scene-tab {
  flex-shrink: 0; border: 1px solid #E5E5E8; background: #fff; color: #666;
  font-size: 13px; padding: 6px 14px; border-radius: 16px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.sl-scene-tab.active {
  background: #E0F2F1; border-color: #26A69A; color: #26A69A; font-weight: 600;
}

.sl-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px; padding: 10px 14px;
  background: #fff; border-radius: 22px;
  border: 1px solid #EEE;
}
.sl-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: #333; font-family: inherit;
}
.sl-search input::placeholder { color: #bbb; }

.sl-current {
  display: flex; align-items: center; gap: 12px;
  margin: 0 12px 10px; padding: 14px;
  background: #fff; border-radius: 12px;
  cursor: pointer;
  border: 1px solid #E0F2F1;
}
.sl-current-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #E0F2F1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sl-current-info { flex: 1; }
.sl-current-title { font-size: 14px; font-weight: 600; color: #26A69A; }
.sl-current-desc { font-size: 12px; color: #888; margin-top: 2px; }
.sl-current-badge {
  font-size: 11px; color: #26A69A; background: #E0F2F1;
  padding: 3px 8px; border-radius: 10px; font-weight: 600;
}

.sl-section-title {
  padding: 14px 16px 8px;
  font-size: 13px; color: #666; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.sl-section-sub { font-size: 11px; color: #999; font-weight: 400; }

.sl-list {
  margin: 0 12px; background: #fff; border-radius: 12px;
  overflow: hidden;
}
.sl-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid #F5F5F7;
}
.sl-item:last-child { border-bottom: none; }
.sl-item.selected {
  background: #F1FBF9;
}
.sl-item.selected .sl-item-name { color: #26A69A; }
.sl-item-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #F5F5F7;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.sl-item.selected .sl-item-icon { background: #E0F2F1; }
.sl-item-info { flex: 1; min-width: 0; }
.sl-item-name {
  font-size: 14px; color: #333; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-item-addr {
  font-size: 11px; color: #999; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-item-tag {
  font-size: 10px; color: #FF9800; background: #FFF3E0;
  padding: 2px 7px; border-radius: 8px; font-weight: 600;
  flex-shrink: 0;
}

.sl-empty {
  padding: 24px; text-align: center;
  font-size: 13px; color: #999;
}

.sl-detail {
  margin: 14px 12px 0; padding: 14px; background: #fff;
  border-radius: 12px; border: 1px solid #E0F2F1;
}
.sl-detail-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
.sl-detail-selected {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #26A69A; font-weight: 600;
  margin-bottom: 12px;
}
.sl-detail-fields { display: flex; flex-direction: column; gap: 10px; }
.sl-detail-field {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #F8F9FA; border-radius: 8px;
}
.sl-detail-field label {
  font-size: 13px; color: #666; min-width: 68px; flex-shrink: 0;
}
.sl-detail-field input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: #333; text-align: right;
  font-family: inherit;
}
.sl-detail-field input::placeholder { color: #ccc; font-size: 12px; }
.sl-detail-tip {
  margin-top: 10px; font-size: 11px; color: #999; line-height: 1.6;
}

/* ==================== 创建圈子 4 步向导 ==================== */
.cc-stepper {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: #fff; gap: 4px;
}
.cc-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.cc-step span {
  width: 26px; height: 26px; border-radius: 50%;
  background: #E8E8ED; color: #999;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transition: all 0.2s;
}
.cc-step em {
  font-size: 11px; color: #999; font-style: normal; font-weight: 500;
}
.cc-step.active span { background: #FF7A1F; color: #fff; }
.cc-step.active em { color: #FF7A1F; font-weight: 600; }
.cc-step.done span { background: #FFE0B2; color: #FF7A1F; }
.cc-step.done span::after { content: '✓'; }
.cc-step.done span > * { display: none; }
.cc-line {
  flex: 1; height: 2px; background: #E8E8ED; margin: 0 4px;
  position: relative; top: -8px;
}

.cc-step-panel {
  display: none;
  padding: 16px 14px 100px;
}
.cc-step-panel.active { display: block; }

.cc-tip {
  background: #FFF8E1; border-left: 3px solid #FFB84D;
  padding: 10px 12px; border-radius: 6px;
  font-size: 12px; color: #9A6700; line-height: 1.6;
  margin-bottom: 14px;
}

/* Step 1 场景卡片 */
.cc-scene-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cc-scene-card {
  background: #fff; border-radius: 14px; padding: 14px 12px;
  border: 2px solid transparent; cursor: pointer;
  transition: all 0.2s;
}
.cc-scene-card.active {
  border-color: #FF7A1F; background: #FFF8E6;
  box-shadow: 0 4px 14px rgba(255,122,31,0.15);
}
.cc-scene-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 10px;
}
.cc-scene-name { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 4px; }
.cc-scene-desc { font-size: 11px; color: #888; line-height: 1.5; min-height: 32px; }
.cc-scene-req {
  display: inline-block; margin-top: 8px;
  font-size: 10px; color: #FF7A1F; background: #FFF4D6;
  padding: 2px 7px; border-radius: 8px;
}

/* Step 2 标签 */
.cc-tag-section { margin-bottom: 16px; background: #fff; padding: 14px; border-radius: 12px; }
.cc-tag-title {
  font-size: 13px; font-weight: 600; color: #222; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.cc-tag-title span { font-size: 11px; color: #999; font-weight: 400; }
.cc-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip {
  background: #F5F6F8; color: #555;
  padding: 6px 12px; border-radius: 14px;
  font-size: 12px; cursor: pointer;
  border: 1px solid transparent;
}
.cc-chip.active {
  background: #FFF4D6; color: #FF7A1F;
  border-color: #FFB84D; font-weight: 600;
}
.cc-tag-count {
  text-align: center; font-size: 12px; color: #999; margin-top: 8px;
}

/* Step 3 ServiceScope 类型切换器 */
.cc-scope-types {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: #fff; padding: 12px; border-radius: 12px; margin-bottom: 12px;
}
.cc-scope-type {
  background: #F5F6F8; border: 1.5px solid transparent; border-radius: 10px;
  padding: 12px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cc-scope-type.active { background: #FFF4D6; border-color: #FFB84D; }
.cc-scope-ic { font-size: 20px; }
.cc-scope-nm { font-size: 12px; font-weight: 600; color: #222; }
.cc-scope-type.active .cc-scope-nm { color: #FF7A1F; }
.cc-scope-d { font-size: 9px; color: #999; text-align: center; line-height: 1.3; }
.cc-radius-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cc-radius-opt {
  background: #F5F6F8; color: #555; border: 1px solid transparent;
  padding: 7px 14px; border-radius: 14px; font-size: 12px; cursor: pointer;
}
.cc-radius-opt.active { background: #FFF4D6; color: #FF7A1F; border-color: #FFB84D; font-weight: 600; }
.cc-chip-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cc-scope-policy {
  background: #fff; border-radius: 12px; padding: 14px; margin-top: 12px;
}
.cc-scope-policy-title { font-size: 12px; color: #888; margin-bottom: 10px; }

/* Step 3 自动推导加入提示 */
.cc-scope-auto { margin-top: 12px; }
.cc-auto-box {
  background: linear-gradient(135deg, #FFF7EB, #FFF1F6);
  border: 1px solid #FFE0C2; border-radius: 12px;
  padding: 12px 14px;
}
.cc-auto-title {
  font-size: 12px; font-weight: 600; color: #FF7A1F;
  margin-bottom: 6px;
}
.cc-auto-body {
  font-size: 12px; color: #5A4632; line-height: 1.6;
}
.cc-auto-body b { color: #FF7A1F; font-weight: 600; }

/* Step 3 搜索 + 多选 UI */
.cc-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #F6F6F7; border-radius: 10px;
  padding: 9px 12px; margin-top: 10px;
}
.cc-search-wrap::before {
  content: '🔍'; font-size: 13px; opacity: 0.6;
}
.cc-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13px; color: #222;
}
.cc-search-input::placeholder { color: #B0B0B3; }

.cc-pick-list {
  margin-top: 10px;
  max-height: 260px; overflow-y: auto;
  background: #fff; border-radius: 10px;
  border: 1px solid #F0F0F2;
}
.cc-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid #F5F5F7;
  cursor: pointer;
}
.cc-pick-row:last-child { border-bottom: none; }
.cc-pick-row:active { background: #FFF7EB; }
.cc-pick-row.selected { background: #FFF7EB; }
.cc-pick-ic { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.cc-pick-main { flex: 1; min-width: 0; }
.cc-pick-name {
  font-size: 13px; font-weight: 500; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-pick-sub {
  font-size: 11px; color: #999; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-pick-type {
  font-size: 10px; color: #FF7A1F;
  background: #FFF1E3; border-radius: 4px;
  padding: 1px 6px; margin-left: 6px;
}
.cc-pick-check, .cc-pick-add {
  font-size: 16px; color: #C8C8CC; flex-shrink: 0;
}
.cc-pick-row.selected .cc-pick-check,
.cc-pick-row.selected .cc-pick-add { color: #FF7A1F; }
.cc-pick-empty {
  padding: 24px; text-align: center;
  font-size: 12px; color: #B0B0B3;
}

.cc-picked-poi {
  margin-top: 10px;
  background: #FFF7EB; border: 1px solid #FFE0C2; border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px; color: #5A4632;
  display: flex; align-items: center; gap: 8px;
}
.cc-picked-poi b { color: #FF7A1F; font-weight: 600; }

.cc-selected-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; min-height: 28px;
}
.cc-sel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FFF1E3; border: 1px solid #FFD5A8;
  color: #FF7A1F; border-radius: 14px;
  padding: 4px 10px; font-size: 12px;
}
.cc-sel-chip em {
  font-style: normal; cursor: pointer;
  color: #FF7A1F; opacity: 0.7; font-size: 14px; line-height: 1;
}
.cc-sel-chip em:active { opacity: 1; }
.cc-sel-empty {
  font-size: 11px; color: #B0B0B3; padding: 6px 2px;
}

/* 按距离 - 当前定位卡片 */
.cc-current-loc { margin-top: 10px; }
.cc-cur-card {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #FFF7EB, #FFF1F6);
  border: 1px solid #FFE0C2; border-radius: 12px;
  padding: 12px 12px 12px 14px;
}
.cc-cur-card.active {
  background: linear-gradient(135deg, #FFE8CF, #FFD5A8);
  border-color: #FF7A1F;
}
.cc-cur-card.loading { opacity: 0.7; }
.cc-cur-ic { font-size: 22px; flex-shrink: 0; }
.cc-cur-main { flex: 1; min-width: 0; }
.cc-cur-title {
  font-size: 11px; color: #FF7A1F; font-weight: 600;
  margin-bottom: 2px;
}
.cc-cur-name {
  font-size: 14px; font-weight: 600; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-cur-addr {
  font-size: 11px; color: #8A7560;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.cc-cur-btn {
  flex-shrink: 0;
  border: 1px solid #FF7A1F; background: #fff;
  color: #FF7A1F; font-size: 12px;
  border-radius: 14px; padding: 6px 10px;
  cursor: pointer;
}
.cc-cur-btn:active { background: #FFF1E3; }
.cc-cur-btn.refresh {
  padding: 6px 8px; font-size: 14px;
  border-color: #FFD5A8;
}
.cc-cur-card.loading .cc-cur-btn.refresh { animation: cc-cur-spin 0.8s linear infinite; }
@keyframes cc-cur-spin {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

/* 行政区域级联面包屑 */
.cc-region-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 10px; padding: 10px 12px;
  background: #FFFBF5; border: 1px solid #FFE8CF; border-radius: 10px;
  font-size: 12px; line-height: 1.4;
}
.cc-crumb-seg {
  color: #7A6552; cursor: pointer; padding: 2px 2px;
}
.cc-crumb-seg.current {
  color: #FF7A1F; font-weight: 600;
}
.cc-crumb-sep { color: #D4B896; font-size: 11px; }

/* 行政区域行：左侧主区 + 右侧"选此级"按钮 */
.cc-pick-row-split { padding: 0; cursor: default; }
.cc-pick-row-split:active { background: #fff; }
.cc-pick-row-split.selected { background: #FFFBF5; }
.cc-pick-body {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
}
.cc-pick-body:active { background: #FFF7EB; }
.cc-pick-drill {
  font-size: 18px; color: #C8C8CC; flex-shrink: 0;
}
.cc-pick-action {
  flex-shrink: 0;
  font-size: 11px; color: #FF7A1F;
  padding: 6px 10px; margin-right: 10px;
  border: 1px solid #FFD5A8; border-radius: 14px;
  background: #fff; cursor: pointer;
  white-space: nowrap;
}
.cc-pick-action:active { background: #FFF1E3; }
.cc-pick-action.picked {
  background: #FF7A1F; color: #fff; border-color: #FF7A1F;
}
.cc-pick-action.locked {
  color: #B0B0B3; border-color: #E8E8EA; background: #F5F5F7;
  cursor: not-allowed;
}
.cc-pick-action.replace {
  color: #fff; background: #FFB15A; border-color: #FFB15A;
}
.cc-pick-row-split.covered { opacity: 0.55; }
.cc-pick-row-split.covered .cc-pick-body { cursor: pointer; }

/* Step 4 AudienceTag */
.cc-aud-section {
  background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.cc-aud-title {
  font-size: 13px; font-weight: 600; color: #222; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.cc-aud-sub { font-size: 10px; color: #999; font-weight: 400; }
.cc-aud-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #fff; border-radius: 12px;
  font-size: 12px; color: #999;
}
.cc-aud-clear {
  background: none; border: none; color: #FF7A1F; font-size: 12px; cursor: pointer;
}

/* Step 3 位置 */
.cc-loc-form { background: #fff; border-radius: 12px; padding: 4px 16px; }
.cc-field {
  padding: 14px 0; border-bottom: 1px solid #F2F3F5;
}
.cc-field:last-child { border-bottom: none; }
.cc-field label {
  display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 8px;
}
.cc-field label span { font-size: 11px; color: #999; font-weight: 400; margin-left: 4px; }
.cc-select {
  padding: 10px 12px; background: #F5F6F8; border-radius: 8px;
  font-size: 14px; color: #222; cursor: pointer;
}
.cc-radius {
  padding: 10px 12px; background: #FFF8E1; border-radius: 8px;
  font-size: 13px; color: #9A6700;
}
.cc-notice {
  margin-top: 12px; background: #FFEBEE; color: #C62828;
  padding: 10px 12px; border-radius: 8px; font-size: 12px;
}

/* Step 4 表单 */
.cc-form { background: #fff; border-radius: 12px; padding: 4px 16px; margin-bottom: 14px; }
.cc-form-row {
  padding: 14px 0; border-bottom: 1px solid #F2F3F5; position: relative;
}
.cc-form-row:last-child { border-bottom: none; }
.cc-label { display: block; font-size: 12px; color: #888; margin-bottom: 8px; }
.cc-label em { color: #F44336; font-style: normal; }
.cc-input {
  width: 100%; border: none; outline: none;
  background: #F5F6F8; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; color: #222; box-sizing: border-box;
}
.cc-textarea {
  width: 100%; border: none; outline: none; resize: none;
  background: #F5F6F8; padding: 10px 12px; border-radius: 8px;
  font-size: 13px; color: #222; box-sizing: border-box;
  min-height: 72px; font-family: inherit;
}
.cc-count {
  position: absolute; right: 0; bottom: 16px;
  font-size: 10px; color: #bbb;
}
.cc-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-icon-item {
  width: 40px; height: 40px; border-radius: 10px;
  background: #F5F6F8; display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; border: 2px solid transparent;
}
.cc-icon-item.active { background: #FFF4D6; border-color: #FF7A1F; }
.cc-radio-group { display: flex; gap: 8px; }
.cc-radio {
  flex: 1; padding: 10px; background: #F5F6F8; border-radius: 8px;
  text-align: center; font-size: 13px; color: #666; cursor: pointer;
  position: relative;
}
.cc-radio input { position: absolute; opacity: 0; }
.cc-radio input:checked + span { color: #FF7A1F; font-weight: 600; }
.cc-radio:has(input:checked) { background: #FFF4D6; }

.cc-summary {
  background: #fff; border-radius: 12px; padding: 14px 16px;
  border: 1px dashed #FFB84D;
}
.cc-summary-title { font-size: 13px; color: #FF7A1F; font-weight: 600; margin-bottom: 10px; }
.cc-summary-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 6px 0; font-size: 12px; gap: 12px;
}
.cc-summary-row span { color: #999; flex-shrink: 0; }
.cc-summary-row b { color: #222; text-align: right; font-weight: 500; }

.cc-footer {
  background: #fff; padding: 12px 14px;
  display: flex; gap: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
  z-index: 10;
  flex-shrink: 0;
}
.cc-btn-prev, .cc-btn-next {
  flex: 1; padding: 12px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.cc-btn-prev { background: #F5F6F8; color: #666; }
.cc-btn-prev:disabled { color: #CCC; cursor: not-allowed; }
.cc-btn-next { background: #FF7A1F; color: #fff; }

/* (Old location/range Step 2 styles removed in v3 rewrite) */

/* Skill auto-equip hint in Step 4 (lightweight) */
.cc-skill-auto {
  display: flex; gap: 14px; margin: 16px 16px 0;
  padding: 16px; background: linear-gradient(135deg, #F8F6FF 0%, #FFF8F0 100%);
  border: 1px solid #EDE7FF; border-radius: 14px;
}
.cc-skill-auto-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #FFE0B2, #FFD54F);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.cc-skill-auto-body { flex: 1; min-width: 0; }
.cc-skill-auto-title { font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; }
.cc-skill-auto-title b { color: #FF7A1F; font-size: 18px; font-weight: 800; }
.cc-skill-auto-sub { font-size: 12px; color: #999; margin-top: 4px; line-height: 1.5; }
.cc-skill-auto-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.cc-skill-auto-tag {
  font-size: 11px; padding: 4px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.8); color: #666;
  border: 1px solid #E8E8E8;
}
.cc-skill-auto-hint {
  display: flex; gap: 8px; align-items: center;
  margin: 10px 16px 0; padding: 10px 14px;
  background: #FFFBF5; border: 1px solid #FFE8CF;
  border-radius: 10px; font-size: 12px; color: #8A6B2E; line-height: 1.5;
}

/* Step 5: Confirmation */
.cc-threshold { margin: 16px; padding: 16px; background: #fff; border-radius: 14px; border: 1px solid #F0F0F2; }
.cc-threshold-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 14px; }
.cc-threshold-list { display: flex; flex-direction: column; gap: 10px; }
.cc-threshold-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F9FBF9; }
.cc-threshold-item.pass { background: #F1F8E9; }
.cc-threshold-item.fail { background: #FFF3E0; }
.cc-threshold-icon { font-size: 16px; }
.cc-threshold-text { flex: 1; font-size: 13px; color: #333; }
.cc-threshold-req { font-size: 11px; color: #999; }

.cc-final-preview { margin: 16px; padding: 16px; background: #fff; border-radius: 14px; border: 1px solid #F0F0F2; }
.cc-final-card { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #F5F5F7; }
.cc-final-icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #FFF3E0, #FFE0B2); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.cc-final-info { flex: 1; }
.cc-final-name { font-size: 16px; font-weight: 700; color: #1A1A1A; margin-bottom: 4px; }
.cc-final-meta { font-size: 12px; color: #999; margin-bottom: 2px; }
.cc-final-loc { font-size: 12px; color: #666; }
.cc-final-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cc-final-skill { font-size: 11px; padding: 5px 10px; border-radius: 10px; background: #FFF3E0; color: #E65100; border: 1px solid #FFE0B2; }
.cc-final-skill.summary { background: linear-gradient(135deg, #F8F6FF, #FFF8F0); color: #666; border-color: #EDE7FF; font-size: 12px; font-weight: 500; }

.cc-success-hint { margin: 16px; padding: 20px; text-align: center; background: linear-gradient(135deg, #FFF8F0, #F8F6FF); border-radius: 14px; border: 1px solid #FFE0B2; }
.cc-success-icon { font-size: 40px; margin-bottom: 10px; }
.cc-success-text { font-size: 14px; color: #333; margin-bottom: 6px; line-height: 1.6; }
.cc-success-text b { color: #FF6B35; }
.cc-success-sub { font-size: 12px; color: #999; }

/* ===== 创建圈子 v2: 3步向导新增样式 ===== */

/* (Old toggle/tabs Step 2 styles removed in v3 rewrite) */

/* AI tag generation */
.cc-tag-gen-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(108,114,203,0.06), rgba(139,92,246,0.06));
  border: 1px solid rgba(108,114,203,0.15);
  font-size: 13px; color: #6C72CB; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.cc-tag-gen-btn:active { transform: scale(0.98); background: rgba(108,114,203,0.1); }

.cc-tag-result { margin-top: 12px; }
.cc-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cc-tag-item {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--primary-bg); color: var(--primary);
  font-size: 13px; font-weight: 500;
}
.cc-tag-item .cc-tag-x {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,0.08); display: flex;
  align-items: center; justify-content: center;
  font-size: 10px; color: #999; cursor: pointer;
  line-height: 1;
}
.cc-tag-item .cc-tag-x:active { background: rgba(0,0,0,0.15); }
.cc-tag-refresh {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #6C72CB; cursor: pointer;
  padding: 4px 0;
}
.cc-tag-refresh:active { opacity: 0.6; }

/* (Old AOI/drill-down/admin styles removed in v3 rewrite) */

/* Ability preview in Step 3 */
.cc-ability-card {
  margin: 0 0 12px; padding: 14px; background: #fff;
  border-radius: 12px; border: 1px solid #F0F0F2;
}
.cc-ability-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #F5F5F5;
}
.cc-ability-row:last-child { border-bottom: none; }
.cc-ability-left { display: flex; align-items: center; gap: 8px; }
.cc-ability-icon { font-size: 16px; }
.cc-ability-name { font-size: 14px; color: #333; font-weight: 500; }
.cc-ability-count { font-size: 12px; color: #999; }
.cc-ability-status { font-size: 12px; color: #999; }
.cc-ability-status.on { color: var(--primary); font-weight: 600; }
.cc-ability-toggle {
  position: relative; width: 40px; height: 22px; display: inline-block;
}
.cc-ability-toggle input { opacity: 0; width: 0; height: 0; }
.cc-ability-slider {
  position: absolute; inset: 0; background: #E0E1E6; border-radius: 22px;
  transition: 0.2s; cursor: pointer;
}
.cc-ability-slider::before {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cc-ability-toggle input:checked + .cc-ability-slider { background: var(--primary); }
.cc-ability-toggle input:checked + .cc-ability-slider::before { transform: translateX(18px); }

/* Preview card in Step 3 */
.cc-preview-card {
  padding: 16px; background: #fff; border-radius: 14px;
  border: 1.5px dashed #FFD98A; margin-bottom: 12px;
}
.cc-preview-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid #F5F5F5;
}
.cc-preview-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: #FFF4D6;
}
.cc-preview-info { flex: 1; min-width: 0; }
.cc-preview-name { font-size: 16px; font-weight: 700; color: #1A1A1A; }
.cc-preview-join { font-size: 11px; color: #999; margin-top: 2px; }
.cc-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-preview-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 10px;
  background: var(--primary-bg); color: var(--primary);
}
.cc-preview-rows { display: flex; flex-direction: column; gap: 8px; }
.cc-preview-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #666;
}
.cc-preview-row b { color: #333; font-weight: 600; text-align: right; }

/* (Old section-divider/range-section/city-picker/aoi-selected styles removed in v3 rewrite) */

/* ===== 发现圈子 — 重新设计（简洁现代） ===== */

/* 1 级：场景 Tab — 扁平下划线式，去掉繁重胶囊 */
.scene-tabs {
  display: flex; gap: 0; padding: 10px 16px 0;
  overflow-x: auto; scrollbar-width: none;
  background: #fff;
  position: relative;
}
.scene-tabs::after {
  content: ''; position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px; background: #F0F0F2;
}
.scene-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none;
  padding: 10px 14px 12px;
  font-size: 13px; color: #999; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  position: relative;
  transition: color 0.15s;
}
.sc-tab .sc-emoji { font-size: 14px; opacity: 0.8; }
.sc-tab:first-child { padding-left: 0; }
.sc-tab.active {
  color: #222; font-weight: 700;
}
.sc-tab.active .sc-emoji { opacity: 1; }
.sc-tab.active::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  z-index: 1;
}

/* 2 级：距离 chip — 更轻量无边框 */
/* 覆盖前面的 .df-range 样式 */

/* 4 级：智能快捷卡 section + 卡片 */
.quick-cards-section {
  padding: 14px 0 8px;
  background: #fff;
}
.quick-cards-label {
  padding: 0 16px 10px;
  font-size: 13px; font-weight: 600; color: #222;
  display: flex; align-items: center; gap: 6px;
}
.quick-cards-label::before {
  content: ''; width: 3px; height: 14px;
  background: linear-gradient(180deg, #FF9F2E, #FF6B35);
  border-radius: 2px;
}
.quick-cards {
  display: flex; gap: 10px; padding: 0 16px 6px;
  overflow-x: auto; scrollbar-width: none;
  background: transparent;
}
.quick-cards::-webkit-scrollbar { display: none; }
.quick-card {
  flex-shrink: 0;
  width: 136px; min-height: 94px;
  border-radius: 14px; padding: 12px 12px 10px;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s;
}
.quick-card:active { transform: scale(0.97); }
.quick-card .qc-emoji {
  font-size: 22px; margin-bottom: 4px;
}
.quick-card .qc-title {
  font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.quick-card .qc-sub {
  font-size: 10px; opacity: 0.92; margin-top: 2px;
  line-height: 1.4;
}
.quick-card .qc-scene {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(4px);
  font-size: 9px; padding: 2px 7px; border-radius: 10px;
  font-weight: 500;
}

.pro-top-actions {
  position: absolute; top: 14px; left: 16px; right: 16px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 2;
}
.pro-top-actions button { border: none; cursor: pointer; }

/* Profile header — 抖音式胶囊/汉堡按钮 */
.pro-add-friend-btn {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff !important;
  box-shadow: none !important;
  display: flex; align-items: center; gap: 5px;
}
.pro-add-friend-btn:active { background: rgba(0,0,0,0.5) !important; }
.pro-add-friend-btn span { font-size: 13px; font-weight: 500; }


.pro-menu-btn {
  margin-left: auto;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08) inset;
  display: flex; align-items: center; justify-content: center;
}
.pro-menu-btn:active { background: rgba(0,0,0,0.5) !important; }

/* Add Friend page */
#page-add-friend { background: #F5F6F8; }
#page-add-friend .page-content { padding: 12px 14px 24px; }

.af-search-wrap { margin-bottom: 14px; }
.af-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 11px 14px;
  border: 1px solid #EEE;
}
.af-search input {
  flex: 1; border: none; outline: none; font-size: 13px; background: transparent;
}
.af-search input::placeholder { color: #BBB; }

/* 我的名片 — 沿用 profile 页深色导航氛围 */
.af-mycard {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,52,96,0.25);
}
.af-mycard::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,114,203,0.35), transparent 70%);
  pointer-events: none;
}
.af-mycard-left { display: flex; align-items: center; gap: 12px; position: relative; }
.af-mycard-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
}
.af-mycard-name {
  color: #fff; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.af-mycard-lv {
  font-size: 10px; font-weight: 600; color: #FFD580;
  background: rgba(255,184,77,0.18);
  padding: 2px 7px; border-radius: 8px;
}
.af-mycard-id { color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 5px; letter-spacing: 0.2px; }
.af-mycard-qr {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0; position: relative;
}
.af-mycard-qr svg { width: 20px; height: 20px; stroke: #fff; }
.af-mycard-qr span { font-size: 10px; white-space: nowrap; color: rgba(255,255,255,0.9); }

/* 快捷入口 — 统一金色系 */
.af-quick {
  background: #fff; border-radius: 14px; padding: 2px 16px; margin-bottom: 14px;
}
.af-quick-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid #F2F3F5; cursor: pointer;
}
.af-quick-item:last-child { border-bottom: none; }
.af-quick-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #FFF4D6 !important;
  display: flex; align-items: center; justify-content: center;
  color: #FF7A1F; flex-shrink: 0;
}
.af-quick-icon svg { stroke: #FF7A1F; }
.af-quick-info { flex: 1; min-width: 0; }
.af-quick-name { font-size: 14px; color: #222; font-weight: 500; }
.af-quick-sub { font-size: 11px; color: #999; margin-top: 3px; }
.af-quick-badge {
  background: #FF5252; color: #fff; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px; margin-right: 4px;
}
.af-arrow { flex-shrink: 0; }

/* 可能认识 */
.af-section {
  background: #fff; border-radius: 14px; padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.af-section-header {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
.af-section-title { font-size: 14px; color: #222; font-weight: 600; }
.af-section-sub { font-size: 11px; color: #999; }

.af-rec-list { display: flex; flex-direction: column; gap: 16px; }
.af-rec-item { display: flex; align-items: center; gap: 12px; }
.af-rec-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 600; flex-shrink: 0;
}
.af-rec-info { flex: 1; min-width: 0; }
.af-rec-name {
  font-size: 14px; color: #222; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.af-rec-lv {
  font-size: 10px; font-weight: 600; color: #FF7A1F;
  background: #FFF4D6; padding: 2px 7px; border-radius: 8px;
}
.af-rec-tag {
  font-size: 10px; font-weight: 500; color: #6C72CB;
  background: rgba(108,114,203,0.12);
  padding: 2px 7px; border-radius: 8px;
}
.af-rec-tag.auth { color: #1E88E5; background: rgba(30,136,229,0.1); }
.af-rec-reason { font-size: 11px; color: #888; margin-top: 3px; }
.af-rec-mutual { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.af-mutual-dots { display: flex; }
.af-mutual-dots span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #fff; margin-left: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff;
}
.af-mutual-dots span:first-child { margin-left: 0; }
.af-rec-mutual-text { font-size: 10px; color: #999; }
.af-rec-btn {
  background: #FF7A1F; color: #fff;
  border: none; border-radius: 14px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.af-rec-btn.followed {
  background: #F2F3F5; color: #999; font-weight: 500;
}
.af-more {
  text-align: center; font-size: 12px; color: #888;
  padding: 14px 0 2px; margin-top: 4px;
  border-top: 1px solid #F2F3F5; cursor: pointer;
}
.af-tip {
  font-size: 11px; color: #AAA; text-align: center;
  padding: 16px 20px 0; line-height: 1.6;
}

/* 我的二维码弹层 */
.qr-sheet {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 0 28px;
}
.qr-sheet.show { display: flex; animation: qrFade 0.2s ease; }
@keyframes qrFade { from { opacity: 0; } to { opacity: 1; } }
.qr-card {
  width: 100%; max-width: 320px;
  background: linear-gradient(180deg, #1A1A2E 0%, #16213E 45%, #0F3460 100%);
  border-radius: 20px; padding: 22px 20px 18px; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  animation: qrPop 0.25s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes qrPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.qr-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,114,203,0.35), transparent 70%);
}
.qr-card-header { text-align: center; position: relative; margin-bottom: 16px; }
.qr-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: #6C72CB; color: #fff; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px; border: 3px solid rgba(255,255,255,0.18);
}
.qr-name {
  font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.qr-lv {
  font-size: 10px; font-weight: 600; color: #FFD580;
  background: rgba(255,184,77,0.18);
  padding: 2px 7px; border-radius: 8px;
}
.qr-id { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 5px; }
.qr-loc { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 3px; }

.qr-code-box {
  background: #fff; border-radius: 14px;
  padding: 18px 16px 14px; text-align: center;
  position: relative; margin-bottom: 14px;
}
.qr-code-img { display: flex; justify-content: center; }
.qr-code-img svg { display: block; }
.qr-hint {
  font-size: 11px; color: #888; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed #EEE;
}

.qr-actions {
  display: flex; justify-content: space-around;
  padding: 4px 0 12px;
}
.qr-action {
  background: none; border: none; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 6px 10px; border-radius: 10px;
}
.qr-action:active { background: rgba(255,255,255,0.08); }
.qr-action svg {
  width: 36px; height: 36px;
  background: rgba(255,122,31,0.15); padding: 8px; border-radius: 50%;
  box-sizing: border-box;
}
.qr-action span { font-size: 11px; color: rgba(255,255,255,0.85); }
.qr-close {
  width: 100%; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15); color: #fff;
  padding: 10px; border-radius: 12px; font-size: 13px;
  cursor: pointer; position: relative;
}
.qr-close:active { background: rgba(255,255,255,0.14); }

/* ==================== 团购圈详情页（Skill 装配演示） ==================== */
#page-circle-groupon { background: #F5F5F7; }
.gd-header { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.gd-content { padding: 0 0 88px 0; }

/* Hero */
.gd-hero { position: relative; background: #fff; padding: 16px 16px 14px; margin-bottom: 10px; overflow: hidden; }
.gd-hero-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 110px;
  background: linear-gradient(135deg, #FFE0B2 0%, #FFCCBC 60%, #FFAB91 100%);
  opacity: 0.55;
}
.gd-hero-main { position: relative; display: flex; gap: 12px; }
.gd-avatar {
  width: 64px; height: 64px; border-radius: 16px;
  background: #FFF3E0; display: flex; align-items: center; justify-content: center;
  font-size: 36px; box-shadow: 0 4px 12px rgba(255,107,53,0.18); flex-shrink: 0;
}
.gd-hero-info { flex: 1; min-width: 0; }
.gd-name-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.gd-name { font-size: 18px; font-weight: 700; color: #1A1A1A; margin: 0; }
.gd-lv {
  background: linear-gradient(135deg, #FFB74D, #FF7043); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
}
.gd-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #6B6B70; }
.gd-meta-dot { color: #C0C0C5; }
.gd-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: #8C8C92; }
.gd-stats b { font-size: 15px; color: #1A1A1A; font-weight: 700; margin-right: 2px; }
.gd-credit b { color: #FF6B35; }
.gd-intro {
  position: relative; margin-top: 12px; font-size: 13px; color: #4A4A4F; line-height: 1.6;
  background: #FAFAFB; padding: 10px 12px; border-radius: 10px;
}

/* Sections */
.gd-section { background: #fff; padding: 14px 16px; margin-bottom: 10px; }
.gd-section-row { display: flex; gap: 10px; padding: 14px 16px; }
.gd-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gd-section-title { font-size: 15px; font-weight: 700; color: #1A1A1A; }
.gd-section-sub { font-size: 11px; color: #B0B0B5; font-weight: 500; margin-left: 4px; }
.gd-section-link { font-size: 12px; color: #FF6B35; cursor: pointer; }

/* Skill grid */
.gd-skill-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.gd-skill-card {
  position: relative; background: #FAFAFB; border-radius: 12px;
  padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform 0.15s;
}
.gd-skill-card:active { transform: scale(0.96); }
.gd-skill-card.on { background: #fff; border: 1px solid #F0F0F2; }
.gd-skill-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 6px;
}
.gd-skill-name { font-size: 11px; color: #1A1A1A; font-weight: 600; text-align: center; }
.gd-skill-tag {
  position: absolute; top: 4px; right: 4px;
  font-size: 9px; padding: 1px 5px; border-radius: 6px; font-weight: 600;
}
.gd-skill-tag.must { background: #FFE0B2; color: #E65100; }
.gd-skill-tag.rec { background: #E1F5FE; color: #0277BD; }
.gd-skill-tag.unlock { background: #C8E6C9; color: #2E7D32; }
.gd-skill-tag.scene { background: #F3E5F5; color: #6A1B9A; }
.gd-skill-tag.ai { background: #EDE7F6; color: #4527A0; }
.gd-skill-card.add { background: #FAFAFB; border: 1px dashed #D5D5DA; }
.gd-skill-icon.add-icon { background: transparent; color: #B0B0B5; font-size: 24px; font-weight: 300; }
.gd-skill-card.add .gd-skill-name { color: #B0B0B5; }

/* 拼团 横向滚动 */
.gd-pin-scroll {
  display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 0 16px 4px;
}
.gd-pin-scroll::-webkit-scrollbar { display: none; }
.gd-pin-card {
  flex-shrink: 0; width: 220px; background: #fff; border-radius: 14px;
  border: 1px solid #F0F0F2; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.gd-pin-cover {
  width: 100%; height: 90px; display: flex; align-items: center; justify-content: center;
  font-size: 44px;
}
.gd-pin-body { padding: 10px 12px 12px; }
.gd-pin-title { font-size: 13px; font-weight: 600; color: #1A1A1A; line-height: 1.4; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.gd-pin-price { font-size: 12px; color: #FF6B35; margin-bottom: 8px; }
.gd-pin-price b { font-size: 17px; font-weight: 700; margin-right: 4px; }
.gd-pin-price s { color: #B0B0B5; font-size: 11px; margin-right: 4px; }
.gd-pin-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gd-pin-bar { flex: 1; height: 5px; background: #FFF3E0; border-radius: 3px; overflow: hidden; }
.gd-pin-fill { height: 100%; background: linear-gradient(90deg, #FFB74D, #FF6B35); border-radius: 3px; }
.gd-pin-stat { font-size: 10px; color: #6B6B70; }
.gd-pin-stat b { color: #FF6B35; font-weight: 700; }
.gd-pin-foot { display: flex; align-items: center; justify-content: space-between; }
.gd-pin-time { font-size: 10px; color: #B0B0B5; }
.gd-pin-btn {
  background: linear-gradient(135deg, #FF8A65, #FF6B35); color: #fff;
  border: none; padding: 5px 14px; border-radius: 12px; font-size: 11px; font-weight: 600;
  cursor: pointer;
}

/* 自提点 */
.gd-pickup-card { background: #FAFAFB; border-radius: 12px; padding: 4px 12px; }
.gd-pickup-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F0F0F2; }
.gd-pickup-row:last-of-type { border-bottom: none; }
.gd-pickup-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.gd-pickup-info { flex: 1; min-width: 0; }
.gd-pickup-name { font-size: 13px; font-weight: 600; color: #1A1A1A; }
.gd-pickup-meta { font-size: 11px; color: #8C8C92; margin-top: 2px; }
.gd-pickup-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
  background: #FFE0B2; color: #E65100; font-weight: 600;
}
.gd-pickup-badge.alt { background: #E1F5FE; color: #0277BD; }
.gd-pickup-banner {
  margin: 6px -12px -4px; padding: 10px 12px;
  background: linear-gradient(90deg, #FFF3E0, #FFE0B2);
  font-size: 12px; color: #5D4037; border-radius: 0 0 12px 12px;
}
.gd-pickup-banner b { color: #E65100; }

/* Mini cards (AA / 担保) */
.gd-mini-card {
  flex: 1; background: #fff; border-radius: 14px; padding: 14px;
  border: 1px solid #F0F0F2;
}
.gd-mini-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gd-mini-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.gd-mini-title { font-size: 12px; color: #6B6B70; font-weight: 600; }
.gd-mini-num { font-size: 22px; font-weight: 700; color: #1A1A1A; }
.gd-mini-unit { font-size: 12px; color: #8C8C92; font-weight: 500; }
.gd-mini-sub { font-size: 11px; color: #8C8C92; margin-top: 4px; }

/* 亮仔助手 */
.gd-liangzai-card {
  background: linear-gradient(135deg, #EDE7F6 0%, #F3E5F5 100%);
  border-radius: 14px; padding: 14px;
}
.gd-lz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gd-lz-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #7C4DFF, #B388FF);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 2px 8px rgba(124,77,255,0.25);
}
.gd-lz-name { font-size: 13px; font-weight: 700; color: #311B92; }
.gd-lz-time { font-size: 10px; color: #7E57C2; margin-top: 2px; }
.gd-lz-body { font-size: 13px; color: #4A148C; line-height: 1.6; }
.gd-lz-body b { color: #311B92; font-weight: 700; }
.gd-lz-actions { display: flex; gap: 8px; margin-top: 12px; }
.gd-lz-btn {
  background: #7C4DFF; color: #fff; border: none;
  padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.gd-lz-btn.ghost { background: rgba(255,255,255,0.6); color: #5E35B1; }

/* 圈子团队 */
.gd-team { display: flex; gap: 18px; }
.gd-team-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gd-team-avatar {
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.gd-team-name { font-size: 12px; color: #1A1A1A; font-weight: 500; }
.gd-team-role {
  font-size: 10px; color: #8C8C92;
  background: #F0F0F2; padding: 1px 6px; border-radius: 6px;
}
.gd-team-role.owner { background: #FFE0B2; color: #E65100; font-weight: 600; }

/* tabs */
.gd-tabs { background: #fff; margin-bottom: 0; }

/* feed */
.gd-feed { background: #fff; padding: 4px 16px 16px; }
.gd-feed-item { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid #F5F5F7; }
.gd-feed-item:last-child { border-bottom: none; }
.gd-feed-avatar {
  width: 38px; height: 38px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.gd-feed-body { flex: 1; min-width: 0; }
.gd-feed-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gd-feed-name { font-size: 13px; font-weight: 600; color: #1A1A1A; }
.gd-role-tag {
  font-size: 9px; background: #FFE0B2; color: #E65100;
  padding: 1px 5px; border-radius: 4px; font-weight: 600;
}
.gd-role-tag.mini { background: #E1F5FE; color: #0277BD; }
.gd-feed-time { font-size: 11px; color: #B0B0B5; margin-left: auto; }
.gd-feed-text { font-size: 13px; color: #2A2A2E; line-height: 1.6; margin-bottom: 8px; }
.gd-feed-pin-attach {
  display: flex; align-items: center; gap: 10px;
  background: #FFF8F3; border: 1px solid #FFE0B2; border-radius: 10px;
  padding: 8px 10px; cursor: pointer;
}
.gd-attach-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.gd-attach-info { flex: 1; min-width: 0; }
.gd-attach-title { font-size: 12px; font-weight: 600; color: #1A1A1A; }
.gd-attach-sub { font-size: 11px; color: #FF6B35; margin-top: 2px; }
.gd-attach-btn {
  background: #FF6B35; color: #fff; border: none;
  padding: 5px 12px; border-radius: 10px; font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.gd-feed-imgs { display: flex; gap: 6px; }
.gd-feed-imgs img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
.gd-feed-rate { display: inline-flex; align-items: center; gap: 6px; background: #FFF8F3; padding: 4px 10px; border-radius: 8px; }
.gd-rate-stars { color: #FFB300; font-size: 13px; letter-spacing: 1px; }
.gd-rate-text { font-size: 11px; color: #6B6B70; }

/* bottom bar */
.gd-bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #F0F0F2;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}
.gd-bb-icon {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: #6B6B70; font-size: 10px; cursor: pointer;
}
.gd-bb-cta {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #FF8A65, #FF6B35); color: #fff;
  border: none; padding: 12px; border-radius: 24px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,107,53,0.3);
}

/* 视角徽章 */
.gd-mode-pill {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 8px; margin-left: 6px; vertical-align: middle;
}
.gd-mode-pill.owner { background: #FFE0B2; color: #E65100; }
.gd-mode-pill.member { background: #E1F5FE; color: #0277BD; }

/* 圈主待办 */
.gd-todo-section { padding: 14px 16px 16px; }
.gd-todo-title { font-size: 14px; font-weight: 700; color: #1A1A1A; margin-bottom: 12px; }
.gd-todo-sub { font-size: 11px; color: #B0B0B5; font-weight: 500; margin-left: 4px; }
.gd-todo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gd-todo-item {
  background: #FAFAFB; border-radius: 12px; padding: 12px 4px;
  display: flex; flex-direction: column; align-items: center;
}
.gd-todo-item.alert { background: #FFF3E0; }
.gd-todo-num { font-size: 22px; font-weight: 700; color: #1A1A1A; line-height: 1.2; }
.gd-todo-item.alert .gd-todo-num { color: #FF6B35; }
.gd-todo-label { font-size: 11px; color: #6B6B70; margin-top: 2px; }

/* 用户视角：已加入 pill */
.gd-joined-pill {
  background: #E8F5E9; color: #2E7D32;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 8px;
}

/* 用户视角：我的订单提醒 */
.gd-myorder-section {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #FFF8F3 0%, #FFF3E0 100%);
  border-left: 3px solid #FF6B35;
  margin-bottom: 10px; cursor: pointer;
}
.gd-myorder-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.gd-myorder-body { flex: 1; min-width: 0; }
.gd-myorder-title { font-size: 13px; color: #1A1A1A; font-weight: 600; }
.gd-myorder-title b { color: #FF6B35; }
.gd-myorder-sub { font-size: 11px; color: #8C8C92; margin-top: 2px; }
.gd-myorder-arrow { color: #FF6B35; font-size: 18px; }

/* 用户视角：圈子能力（只读列表） */
.gd-cap-list { display: flex; flex-direction: column; gap: 8px; }
.gd-cap-row {
  display: flex; align-items: center; gap: 12px;
  background: #FAFAFB; padding: 10px 12px; border-radius: 10px;
}
.gd-cap-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.gd-cap-text { font-size: 13px; color: #4A4A4F; }
.gd-cap-text b { color: #1A1A1A; font-weight: 600; margin-right: 4px; }

/* 团长名片（用户视角） */
.gd-owner-card {
  display: flex; align-items: center; gap: 12px;
  background: #FAFAFB; padding: 14px; border-radius: 12px;
}
.gd-team-avatar.lg { width: 52px; height: 52px; font-size: 20px; flex-shrink: 0; }
.gd-owner-info { flex: 1; min-width: 0; }
.gd-owner-name-row { display: flex; align-items: center; gap: 8px; }
.gd-owner-name { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.gd-owner-stats { font-size: 11px; color: #8C8C92; margin-top: 3px; }
.gd-owner-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.gd-otag {
  font-size: 10px; padding: 2px 7px; border-radius: 6px;
  background: #fff; color: #6B6B70; border: 1px solid #F0F0F2;
}
.gd-owner-im {
  width: 36px; height: 36px; border-radius: 50%;
  background: #FF6B35; color: #fff; border: none;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}

/* 我的tab - 圈子管理中心 我管理的圈子列表 */
.pro-mc-list {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 12px -16px 0; padding: 0 16px 4px;
}
.pro-mc-list::-webkit-scrollbar { display: none; }
.pro-mc-card {
  flex-shrink: 0; width: 168px; background: #fff; border-radius: 12px;
  border: 1px solid #F0F0F2; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: transform 0.15s;
  position: relative;
}
.pro-mc-card:active { transform: scale(0.97); }
.pro-mc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.pro-mc-info { flex: 1; min-width: 0; }
.pro-mc-name {
  font-size: 12px; font-weight: 600; color: #1A1A1A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pro-mc-meta { font-size: 10px; color: #8C8C92; margin-top: 2px; }
.pro-mc-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #FF5252; color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pro-mc-card.more {
  width: 80px; flex-direction: column; gap: 4px; justify-content: center;
  background: #FAFAFB; border: 1px dashed #D5D5DA;
}
.pro-mc-more-icon { font-size: 22px; color: #B0B0B5; line-height: 1; }
.pro-mc-more-text { font-size: 11px; color: #B0B0B5; }

/* ==================== 账号体系 · 共用组件 ==================== */
.login-input-wrap {
  display: flex; align-items: center; gap: 0;
  background: #F5F6F8; border-radius: 10px;
  padding: 4px 14px;
  margin-bottom: 12px;
  position: relative;
}
.login-input-prefix {
  font-size: 14px; color: #333; font-weight: 500;
  padding-right: 10px;
  border-right: 1px solid #E0E0E5;
  margin-right: 10px;
}
.login-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: #222;
  padding: 12px 0;
}
.login-input::placeholder { color: #B0B0B3; }
.login-code-btn {
  flex-shrink: 0;
  background: transparent; border: none;
  color: var(--primary); font-size: 13px; font-weight: 500;
  padding: 6px 4px;
  cursor: pointer;
}
.login-code-btn:disabled { color: #B0B0B3; cursor: not-allowed; }
.login-eye {
  flex-shrink: 0;
  background: transparent; border: none;
  font-size: 16px; cursor: pointer;
  padding: 6px 4px; opacity: 0.5;
}

.login-agreement {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; color: #888; line-height: 1.5;
  margin: 4px 2px 14px;
  cursor: pointer;
}
.login-agreement input { margin-top: 2px; flex-shrink: 0; }
.login-agreement a { color: var(--primary); }

.login-btn, .reg-next, .lg-confirm-btn {
  width: 100%;
  background: var(--primary); color: #fff;
  border: none; border-radius: 10px;
  padding: 13px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(38,166,154,0.25);
  transition: all 0.15s;
}
.login-btn:active, .reg-next:active { transform: scale(0.98); }
.login-btn:disabled, .reg-next:disabled, .lg-confirm-btn:disabled {
  background: #C5E4E1; box-shadow: none; cursor: not-allowed;
}

.login-links {
  display: flex; justify-content: space-between;
  padding: 14px 4px 0;
}
.login-link { color: #666; font-size: 13px; cursor: pointer; }
.login-link:active { color: var(--primary); }

.login-tip {
  text-align: center;
  font-size: 11px; color: #B0B0B3;
  margin: 20px 0 0;
}

/* 密码强度条 */
.pwd-strength {
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px; margin: -4px 0 12px;
}
.pwd-strength span {
  flex: 1; height: 3px;
  background: #E5E6EA; border-radius: 1.5px;
}
.pwd-strength i {
  font-style: normal; font-size: 11px;
  color: #999; margin-left: 6px;
}
.pwd-strength.s1 span:nth-child(1) { background: #FF6B6B; }
.pwd-strength.s1 i { color: #FF6B6B; }
.pwd-strength.s2 span:nth-child(-n+2) { background: #FFA726; }
.pwd-strength.s2 i { color: #FFA726; }
.pwd-strength.s3 span { background: #26A69A; }
.pwd-strength.s3 i { color: #26A69A; }

/* ==================== 引导页 ==================== */
#page-onboarding {
  background: #fff;
}
.on-wrap {
  display: flex; flex-direction: column; height: 100%;
  padding: 50px 30px 30px;
  position: relative;
}
.on-skip {
  position: absolute; top: 18px; right: 20px;
  background: transparent; border: none;
  font-size: 13px; color: #999; cursor: pointer;
  padding: 6px 12px;
}
.on-slides {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.on-slide { display: none; text-align: center; }
.on-slide.active { display: block; animation: fadeIn 0.4s ease; }
.on-illus {
  width: 180px; height: 180px; border-radius: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px;
  margin: 0 auto 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.on-title {
  font-size: 24px; font-weight: 700; color: #222;
  margin: 0 0 12px;
}
.on-desc {
  font-size: 14px; color: #888;
  line-height: 1.7;
  margin: 0;
}
.on-dots {
  display: flex; justify-content: center; gap: 8px;
  padding: 30px 0;
}
.on-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E5E6EA;
  transition: all 0.2s;
}
.on-dot.active { width: 24px; background: var(--primary); border-radius: 4px; }
.on-btn {
  width: 100%;
  background: var(--primary); color: #fff;
  border: none; border-radius: 28px;
  padding: 16px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(38,166,154,0.3);
}
.on-btn:active { transform: scale(0.98); }

/* ==================== 登录页 ==================== */
#page-login { background: #fff; }
.login-content {
  padding: 60px 28px 40px !important;
  position: relative;
}
.login-close {
  position: absolute; top: 16px; left: 16px;
  width: 30px; height: 30px; border: none;
  background: #F5F5F7; border-radius: 50%;
  font-size: 12px; color: #666; cursor: pointer;
}
.login-brand {
  text-align: center; margin-bottom: 40px;
}
.login-logo {
  width: 70px; height: 70px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #26A69A, #4ECDC4);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(38,166,154,0.3);
}
.login-name {
  font-size: 26px; font-weight: 700; color: #222;
  margin: 0 0 4px;
}
.login-slogan {
  font-size: 13px; color: #888; margin: 0;
}

.login-social {
  margin-top: 50px;
}
.login-social-divider {
  text-align: center; position: relative;
  margin-bottom: 20px;
}
.login-social-divider::before {
  content: ''; position: absolute;
  top: 50%; left: 0; right: 0;
  border-top: 1px solid #EAEBEE; z-index: 1;
}
.login-social-divider span {
  position: relative; z-index: 2;
  background: #fff; padding: 0 14px;
  font-size: 11px; color: #888;
}
.login-social-btns {
  display: flex; justify-content: center; gap: 40px;
}
.login-social-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
}
.lsb-ic {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.lsb-lbl { font-size: 11px; color: #888; }

/* ==================== 注册向导 ==================== */
.reg-header {
  padding: 14px 14px 8px;
}
.reg-progress {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px;
}
.reg-progress-bar {
  flex: 1; height: 4px;
  background: #EAEBEE; border-radius: 2px;
  overflow: hidden;
}
.reg-progress-fill {
  height: 100%; width: 16%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(.25,.8,.3,1);
}
.reg-progress-text {
  font-size: 12px; color: #999;
  flex-shrink: 0;
}
.reg-progress-text em {
  font-style: normal; color: var(--primary); font-weight: 600;
}

.reg-content {
  padding: 24px 24px 100px !important;
  background: #fff !important;
}
.reg-step { display: none; animation: fadeIn 0.2s ease; }
.reg-step.active { display: block; }
.reg-title {
  font-size: 22px; font-weight: 700; color: #222;
  margin: 0 0 8px;
}
.reg-sub {
  font-size: 13px; color: #888;
  margin: 0 0 24px;
  line-height: 1.6;
}
.reg-sub b { color: #FF7A1F; }

.reg-form { display: flex; flex-direction: column; }

.reg-footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 24px 18px;
  background: #fff;
  border-top: 1px solid #F0F0F2;
  display: flex; gap: 10px;
  z-index: 5;
}
.reg-skip {
  padding: 13px 28px;
  background: #F5F5F7; border: none;
  border-radius: 10px;
  font-size: 14px; color: #555; font-weight: 500;
  cursor: pointer;
}
.reg-next { flex: 1; }

/* Step 2: 生命阶段 */
.reg-stage-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.reg-stage-card {
  background: #F9FAFB;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.reg-stage-card:active { transform: scale(0.97); }
.reg-stage-card.active {
  background: var(--primary-bg);
  border-color: var(--primary);
}
.reg-stage-ic { font-size: 32px; margin-bottom: 6px; }
.reg-stage-name { font-size: 14px; font-weight: 600; color: #222; }
.reg-stage-card.active .reg-stage-name { color: var(--primary); }
.reg-stage-age { font-size: 10px; color: #999; margin-top: 2px; }

/* Step 3: 位置 */
.reg-place-tabs {
  display: flex; gap: 8px;
  margin-bottom: 16px;
}
.reg-place-tab {
  flex: 1;
  padding: 10px;
  background: #F5F6F8; border: none;
  border-radius: 10px;
  font-size: 14px; color: #666; font-weight: 500;
  cursor: pointer;
}
.reg-place-tab.active {
  background: var(--primary-bg);
  color: var(--primary); font-weight: 600;
}
.reg-search-wrap {
  padding: 8px 14px;
}
.reg-place-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.reg-place-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #F9FAFB; border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.reg-place-item.active {
  background: var(--primary-bg);
  border-color: var(--primary);
}
.reg-place-ic { font-size: 22px; }
.reg-place-info { flex: 1; min-width: 0; }
.reg-place-name { font-size: 14px; font-weight: 600; color: #222; }
.reg-place-addr { font-size: 11px; color: #888; margin-top: 2px; }

/* Step 4: 资料 */
.reg-avatar-area {
  text-align: center; margin-bottom: 20px;
}
.reg-avatar {
  width: 80px; height: 80px; margin: 0 auto 8px;
  background: linear-gradient(135deg, #26A69A, #4ECDC4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(38,166,154,0.25);
}
.reg-avatar-tip { font-size: 12px; color: #888; }
.reg-avatar-grid {
  display: flex; justify-content: center; gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.reg-avatar-opt {
  width: 40px; height: 40px;
  background: #F5F6F8; border: 2px solid transparent;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  transition: all 0.15s;
}
.reg-avatar-opt.active {
  background: var(--primary-bg);
  border-color: var(--primary);
}

/* Step 5: 兴趣 */
.reg-interest-grid {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.reg-interest {
  padding: 8px 14px;
  background: #F5F6F8;
  border: 1.5px solid transparent;
  border-radius: 18px;
  font-size: 13px; color: #555;
  cursor: pointer;
  transition: all 0.15s;
}
.reg-interest:active { transform: scale(0.96); }
.reg-interest.active {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.reg-interest-count {
  text-align: right;
  font-size: 12px; color: #999;
}
.reg-interest-count b { color: var(--primary); font-weight: 700; }

/* Step 6: 邀请码 */
.reg-invite-tip {
  background: #FFF7EB;
  border: 1px solid #FFE0C2;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px; color: #D95E1F;
  margin-bottom: 12px;
}
.reg-invite-input input {
  font-size: 18px !important; letter-spacing: 2px;
  font-weight: 600;
  font-family: "SF Mono", Menlo, monospace;
  text-align: center;
  padding: 14px 0 !important;
}
.reg-invite-user {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; margin-bottom: 20px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF7EB, #FFF1F6);
  border: 1px solid #FFE0C2;
  border-radius: 12px;
}
.reg-inviter-avatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #26A69A, #4ECDC4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.reg-inviter-info { flex: 1; min-width: 0; }
.reg-inviter-name { font-size: 13px; font-weight: 600; color: #5A4632; }
.reg-inviter-meta { font-size: 11px; color: #8A7560; margin-top: 2px; }
.reg-inviter-check {
  color: var(--primary); font-size: 18px; font-weight: 700;
}
.reg-invite-bonus {
  margin-top: 16px;
  padding: 14px;
  background: #F9FAFB;
  border-radius: 12px;
}
.rib-title {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 8px;
}
.rib-item {
  font-size: 12px; color: #666;
  line-height: 1.8;
}

/* ==================== 重置/修改密码 ==================== */
.rp-content, .as-content, .lg-content {
  padding: 20px 20px 100px !important;
  background: #F5F6F8;
}
.cp-tip {
  background: #FFF7EB;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px; color: #8A7560;
  margin-top: 14px;
}

/* ==================== 账号与安全 ==================== */
.as-section { margin-bottom: 16px; }
.as-section-title {
  font-size: 12px; color: #888; font-weight: 500;
  padding: 8px 4px;
}
.as-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.as-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #F0F0F2;
  cursor: pointer;
}
.as-row:last-child { border-bottom: none; }
.as-row:active { background: #F9FAFB; }
.as-row-l { flex: 1; min-width: 0; }
.as-row-name {
  font-size: 14px; font-weight: 500; color: #222;
  display: flex; align-items: center; gap: 6px;
}
.as-row-sub {
  font-size: 11px; color: #888;
  margin-top: 3px;
}
.as-row-action {
  font-size: 13px; color: var(--primary);
  flex-shrink: 0;
}
.as-badge-ok {
  font-size: 10px; color: var(--primary);
  background: var(--primary-bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.as-arrow {
  font-size: 16px; color: #C8C8CC;
  margin-left: 6px;
}
.as-danger { color: #E53935 !important; }

/* ==================== 注销账号 ==================== */
.lg-warn-card {
  display: flex; align-items: center; gap: 12px;
  background: #FFF3F3;
  border: 1px solid #FFCDD2;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.lg-warn-ic {
  font-size: 28px; flex-shrink: 0;
}
.lg-warn-title {
  font-size: 14px; font-weight: 700; color: #C62828;
  margin-bottom: 2px;
}
.lg-warn-sub { font-size: 12px; color: #AD3B3B; }

.lg-section {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.lg-section-title {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 10px;
}
.lg-items { display: flex; flex-direction: column; gap: 8px; }
.lg-item {
  font-size: 13px; color: #555;
  line-height: 1.7;
  padding-left: 4px;
}
.lg-item-ic { margin-right: 4px; }
.lg-item b { color: #E53935; font-weight: 600; }

.lg-agree {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #333;
  cursor: pointer;
  padding: 4px 0;
}
.lg-agree input { margin-top: 2px; flex-shrink: 0; }

.lg-confirm-btn {
  background: #E53935 !important;
  box-shadow: 0 2px 8px rgba(229,57,53,0.25) !important;
  margin-bottom: 10px;
}
.lg-confirm-btn:disabled {
  background: #FFCDD2 !important;
  box-shadow: none !important;
}
.lg-cancel-btn {
  width: 100%;
  background: #fff;
  border: 1px solid #E5E6EA;
  border-radius: 10px;
  padding: 13px;
  font-size: 14px; color: #555; font-weight: 500;
  cursor: pointer;
}

/* ==================== 邀请"如何使用"说明区 ==================== */
.inv-howto {
  margin: 0 16px 16px;
  padding: 14px;
  background: #F8FCFB;
  border: 1px solid #D6EAE7;
  border-radius: 12px;
}
.inv-howto-title {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 12px;
}
.inv-howto-item {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
}
.inv-howto-item:last-of-type { margin-bottom: 0; }
.inv-howto-num {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  margin-top: 1px;
}
.inv-howto-body { flex: 1; }
.inv-howto-name {
  font-size: 13px; color: #222; font-weight: 500;
}
.inv-howto-name b { color: var(--primary); font-weight: 700; }
.inv-howto-desc {
  font-size: 11px; color: #888;
  margin-top: 2px; line-height: 1.5;
}
.inv-howto-preview {
  margin-top: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  text-align: center;
  font-size: 12px; color: var(--primary); font-weight: 500;
  cursor: pointer;
}
.inv-howto-preview:active { background: #F0F9F7; }

/* ==================== 邀请记录页 ==================== */
.ih-content {
  padding: 16px !important;
  background: #F5F6F8;
}
.ih-summary {
  background: linear-gradient(135deg, #FFF7EB, #FFF1F6);
  border: 1px solid #FFE0C2;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 14px;
}
.ih-summary-title {
  font-size: 12px; color: #8A7560;
  margin-bottom: 4px;
}
.ih-summary-num {
  font-size: 32px; font-weight: 800; color: #FF7A1F;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.ih-summary-num span { font-size: 14px; font-weight: 500; margin-left: 2px; }
.ih-summary-stats {
  display: flex; align-items: center; justify-content: space-around;
  padding: 12px 0;
  border-top: 1px dashed #FFE0C2;
  margin-bottom: 12px;
}
.ih-stat { text-align: center; }
.ih-stat b {
  display: block;
  font-size: 16px; color: #5A4632; font-weight: 700;
  margin-bottom: 2px;
}
.ih-stat span { font-size: 11px; color: #8A7560; }
.ih-sep { width: 1px; height: 24px; background: #FFE0C2; }
.ih-invite-btn {
  width: 100%;
  padding: 11px;
  background: #FF7A1F; color: #fff;
  border: none; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,122,31,0.25);
}
.ih-invite-btn:active { transform: scale(0.98); }

.ih-tabs {
  display: flex; gap: 6px;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
}
.ih-tab {
  flex: 1; text-align: center;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px; color: #666;
  cursor: pointer;
  transition: all 0.15s;
}
.ih-tab em {
  font-style: normal; font-size: 11px;
  margin-left: 3px; opacity: 0.7;
}
.ih-tab.active {
  background: var(--primary);
  color: #fff; font-weight: 600;
}

.ih-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ih-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #F5F5F7;
}
.ih-item:last-child { border-bottom: none; }
.ih-item-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.ih-item-info { flex: 1; min-width: 0; }
.ih-item-name {
  font-size: 13px; font-weight: 500; color: #222;
  display: flex; align-items: center; gap: 6px;
}
.ih-item-stat {
  display: inline-flex; align-items: center;
  font-size: 10px; padding: 2px 6px;
  border-radius: 4px; font-weight: 400;
}
.ih-item-stat.ok { color: var(--primary); background: var(--primary-bg); }
.ih-item-stat.pending { color: #FF9500; background: #FFF3E0; }
.ih-item-meta {
  font-size: 11px; color: #999;
  margin-top: 2px;
}
.ih-item-reward {
  font-size: 14px; color: #FF7A1F; font-weight: 700;
  flex-shrink: 0;
}
.ih-item-remind {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #FFE0C2;
  border-radius: 14px;
  font-size: 12px; color: #FF7A1F; font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.ih-item-remind:active { background: #FFF7EB; }

.ih-rules {
  background: #FAFAFB;
  border-radius: 10px;
  padding: 12px 14px;
}
.ih-rules-title {
  font-size: 12px; color: #666; font-weight: 600;
  margin-bottom: 8px;
}
.ih-rules-text {
  font-size: 11px; color: #888;
  line-height: 1.8;
}

/* ==================== H5 邀请落地页 ==================== */
#page-invite-landing {
  background: linear-gradient(180deg, #FFF7EB 0%, #fff 40%, #fff 100%);
}
#page-invite-landing .page-content { padding: 0 !important; background: transparent !important; }
.il-wrap {
  padding: 50px 20px 20px;
  min-height: 100%;
  position: relative;
}
.il-close {
  position: absolute; top: 16px; left: 16px;
  width: 30px; height: 30px; border: none;
  background: rgba(255,255,255,0.7); backdrop-filter: blur(6px);
  border-radius: 50%;
  font-size: 12px; color: #666; cursor: pointer;
  z-index: 2;
}
.il-source-tag {
  position: absolute; top: 18px; right: 16px;
  font-size: 10px; color: #888;
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.il-hero {
  text-align: center;
  padding: 30px 0 24px;
}
.il-gift {
  font-size: 56px; margin-bottom: 16px;
  animation: il-bounce 2s ease infinite;
}
@keyframes il-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.il-inviter {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  display: inline-flex;
}
.il-inviter-avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #26A69A, #4ECDC4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700;
}
.il-inviter-name { font-size: 13px; color: #333; font-weight: 500; }

.il-reward { margin-top: 8px; }
.il-reward-title {
  font-size: 13px; color: #8A7560;
  margin-bottom: 4px;
}
.il-reward-num {
  font-size: 32px; font-weight: 800; color: #FF7A1F;
  letter-spacing: 1px;
}

.il-code-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.il-code-label {
  font-size: 11px; color: #888;
  margin-bottom: 8px;
}
.il-code-box {
  display: flex; align-items: center; justify-content: space-between;
}
.il-code-text {
  font-size: 22px; font-weight: 700; color: var(--primary);
  font-family: "SF Mono", Menlo, monospace;
  letter-spacing: 2px;
}
.il-code-tip {
  font-size: 11px; color: var(--primary);
  background: var(--primary-bg);
  padding: 3px 10px;
  border-radius: 10px;
}

.il-downloads {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.il-dl-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.il-dl-btn:active { transform: scale(0.98); }
.il-dl-ios {
  background: #000; color: #fff;
}
.il-dl-android {
  background: linear-gradient(135deg, #3DDC84, #2EAC68); color: #fff;
}
.il-dl-ic { font-size: 26px; }
.il-dl-txt {
  display: flex; flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.il-dl-small { font-size: 11px; opacity: 0.8; }
.il-dl-big { font-size: 16px; font-weight: 700; }

.il-already {
  text-align: center;
  font-size: 12px; color: #888;
  padding: 8px 0 16px;
}
.il-already a {
  color: var(--primary); font-weight: 600;
  cursor: pointer;
}

.il-intro {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.il-intro-title {
  font-size: 13px; font-weight: 600; color: #333;
  margin-bottom: 12px;
}
.il-intro-items { display: flex; flex-direction: column; gap: 12px; }
.il-intro-item {
  display: flex; align-items: center; gap: 12px;
}
.il-intro-ic {
  width: 42px; height: 42px; border-radius: 12px;
  background: #F5F6F8;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.il-intro-name {
  font-size: 13px; font-weight: 600; color: #222;
}
.il-intro-desc {
  font-size: 11px; color: #888;
  margin-top: 2px;
}

.il-footer-tip {
  text-align: center;
  font-size: 11px; color: #888;
  line-height: 1.7;
  padding: 0 10px;
}
.il-footer-tip b { color: var(--primary); font-weight: 600; }

/* ==================== 退出登录 · 二次确认对话框 ==================== */
.logout-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300; display: none;
  animation: fadeIn 0.18s ease;
}
.logout-mask.open { display: block; }
.logout-dialog {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 280px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 20px;
  text-align: center;
  z-index: 301;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(.25,.8,.3,1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.logout-dialog.open {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.logout-dlg-icon {
  font-size: 44px;
  margin-bottom: 8px;
}
.logout-dlg-title {
  font-size: 17px; font-weight: 700; color: #222;
  margin: 0 0 10px;
}
.logout-dlg-desc {
  font-size: 13px; color: #888;
  line-height: 1.7;
  margin: 0 0 20px;
}
.logout-dlg-btns {
  display: flex; gap: 10px;
}
.logout-dlg-cancel, .logout-dlg-confirm {
  flex: 1;
  padding: 11px;
  border: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.logout-dlg-cancel {
  background: #F5F5F7; color: #555;
}
.logout-dlg-confirm {
  background: #E53935; color: #fff;
  box-shadow: 0 2px 8px rgba(229,57,53,0.25);
}
.logout-dlg-confirm:active { opacity: 0.88; }

/* ==================== 附近的亮圈人 ==================== */
.np-content {
  padding: 0 !important;
  background: #F5F6F8;
}

/* 顶部位置 + 筛选 */
.np-header {
  background: #fff;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #F0F0F2;
}
.np-loc {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #333;
  margin-bottom: 10px;
}
.np-loc-name { flex: 1; font-weight: 500; }
.np-loc-switch {
  font-size: 12px; color: var(--primary);
  cursor: pointer;
}
.np-filters {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.np-filters::-webkit-scrollbar { display: none; }
.np-chip {
  flex-shrink: 0;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid #E5E6EA;
  border-radius: 14px;
  font-size: 12px; color: #555; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.np-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}
.np-chip-advanced {
  padding: 5px 9px;
  font-size: 13px;
}

/* 隐私提示条 */
.np-privacy-tip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #F8FCFB;
  font-size: 11px; color: #666;
  border-bottom: 1px solid #E5EFEE;
}
.np-privacy-ic { font-size: 13px; flex-shrink: 0; }
.np-privacy-txt { flex: 1; }
.np-privacy-set {
  color: var(--primary); font-weight: 500;
  cursor: pointer; flex-shrink: 0;
}

/* ====== 地图视图 ====== */
.np-map-view {
  padding: 14px;
}
.np-map-bg {
  position: relative;
  height: 360px;
  background: radial-gradient(ellipse at center, #E8F5F3 0%, #F5F6F8 70%);
  border-radius: 14px;
  overflow: hidden;
}
.np-map-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.np-map-me {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #26A69A, #4ECDC4);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(38,166,154,0.4);
  position: relative; z-index: 2;
}
.np-map-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(38,166,154,0.5);
  border-radius: 50%;
  animation: npPulse 2s ease-out infinite;
}
.np-map-pulse-2 { animation-delay: 1s; }
@keyframes npPulse {
  0% { width: 40px; height: 40px; opacity: 1; }
  100% { width: 220px; height: 220px; opacity: 0; }
}
.np-map-legend {
  position: absolute; inset: 0;
  pointer-events: none;
}
.np-map-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(38,166,154,0.2);
  border-radius: 50%;
}
.np-map-ring-1 { width: 120px; height: 120px; }
.np-map-ring-2 { width: 220px; height: 220px; }
.np-map-ring-3 { width: 320px; height: 320px; }

.np-map-dot {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.15s;
}
.np-map-dot:active { transform: scale(0.9); }
.np-map-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border: 2px solid #fff;
}
.np-map-dist {
  font-size: 9px; color: #666;
  background: rgba(255,255,255,0.85);
  padding: 1px 5px;
  border-radius: 6px;
  white-space: nowrap;
}
.np-map-tip {
  text-align: center;
  font-size: 11px; color: #888;
  margin-top: 10px;
}

/* ====== 列表视图 ====== */
.np-section {
  background: #fff;
  margin-top: 10px;
  padding: 14px;
}
.np-section:first-child { margin-top: 8px; }
.np-section-title {
  font-size: 14px; font-weight: 700; color: #222;
  margin-bottom: 2px;
}
.np-section-sub {
  font-size: 11px; color: #888;
  margin-bottom: 12px;
}
.np-list { display: flex; flex-direction: column; gap: 12px; }

.np-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px;
  background: #FAFAFB;
  border-radius: 12px;
  transition: transform 0.15s;
}
.np-card:active { transform: scale(0.99); }
.np-card-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.np-card-info { flex: 1; min-width: 0; }
.np-card-name {
  font-size: 14px; font-weight: 600; color: #222;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 3px;
}
.np-card-lv {
  font-size: 10px; color: #FF7A1F;
  background: #FFF1E3;
  padding: 1px 6px; border-radius: 4px;
  font-weight: 500;
}
.np-card-verified {
  font-size: 10px; color: var(--primary);
  background: var(--primary-bg);
  padding: 1px 6px; border-radius: 4px;
  font-weight: 500;
}
.np-card-verified.host {
  color: #6C72CB; background: #E8EAF6;
}
.np-card-meta {
  font-size: 11px; color: #777;
  margin-bottom: 6px;
}
.np-card-meta b { color: #333; font-weight: 600; }
.np-card-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
}
.np-tag {
  font-size: 10px; color: #666;
  background: #fff;
  border: 1px solid #EAEBEE;
  padding: 2px 7px;
  border-radius: 4px;
}
.np-tag.same-circle {
  color: var(--primary);
  background: var(--primary-bg);
  border-color: transparent;
  font-weight: 500;
}
.np-card-bridge {
  font-size: 11px; color: var(--primary);
  background: var(--primary-bg);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 2px;
}
.np-card-bridge b { font-weight: 700; }

.np-card-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 16px;
  color: var(--primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  align-self: center;
}
.np-card-btn:active { transform: scale(0.96); }
.np-card-btn.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(38,166,154,0.25);
}

.np-loadmore {
  text-align: center;
  padding: 16px;
  font-size: 12px; color: #888;
  background: #fff;
  margin-top: 10px;
  cursor: pointer;
}
.np-loadmore:active { background: #F5F5F7; }

.np-rules {
  margin: 10px 14px;
  padding: 12px 14px;
  background: #F9FAFB;
  border-radius: 10px;
}
.np-rules-title {
  font-size: 12px; font-weight: 600; color: #666;
  margin-bottom: 6px;
}
.np-rules-text {
  font-size: 11px; color: #888;
  line-height: 1.8;
}

/* ==================== 用户详情页（他人视角） ==================== */
.ud-content {
  padding: 0 !important;
  background: #F5F6F8;
}

/* Hero 区域（深色渐变） */
.ud-hero {
  position: relative;
  background: linear-gradient(135deg, #1A1A2E 0%, #26A69A 100%);
  padding: 56px 20px 24px;
  color: #fff;
}
.ud-back, .ud-more {
  position: absolute;
  top: 14px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: none; border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.ud-back { left: 14px; }
.ud-more { right: 14px; }
.ud-back:active, .ud-more:active { background: rgba(255,255,255,0.25); }

.ud-avatar-wrap {
  position: relative;
  width: 84px; height: 84px;
  margin: 0 auto 14px;
}
.ud-avatar {
  width: 84px; height: 84px;
  background: linear-gradient(135deg, #FFB74D, #FF7A1F);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700;
  color: #fff;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.ud-lv-badge {
  position: absolute;
  bottom: -4px; right: -4px;
  padding: 2px 8px;
  background: #FFC107;
  color: #5A4632;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
  border: 2px solid #1A1A2E;
}

.ud-name-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ud-name {
  font-size: 20px; font-weight: 700; color: #fff;
  margin: 0;
}
.ud-verified {
  font-size: 10px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.ud-bio {
  text-align: center;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 12px;
  line-height: 1.5;
  padding: 0 20px;
}

.ud-meta {
  display: flex; justify-content: center;
  gap: 6px; align-items: center;
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 16px;
}
.ud-meta-sep { opacity: 0.5; }

/* 共同连接 */
.ud-bridge {
  display: flex; align-items: center; justify-content: space-around;
  padding: 12px 16px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  margin-top: 4px;
}
.ud-bridge-item {
  text-align: center; flex: 1;
}
.ud-bridge-num {
  display: block;
  font-size: 18px; font-weight: 700;
  margin-bottom: 1px;
}
.ud-bridge-lbl {
  font-size: 10px;
  opacity: 0.85;
}
.ud-bridge-sep {
  width: 1px; height: 22px;
  background: rgba(255,255,255,0.2);
}

/* 主操作行 */
.ud-actions {
  display: flex; gap: 8px;
  padding: 14px;
  background: #fff;
  border-bottom: 1px solid #F0F0F2;
}
.ud-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 9px;
  background: #F5F6F8;
  border: none;
  border-radius: 10px;
  font-size: 13px; color: #333; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ud-btn:active { transform: scale(0.97); }
.ud-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(38,166,154,0.25);
}
.ud-btn.following {
  background: #F5F6F8;
  color: #555;
  box-shadow: none;
}
.ud-btn-icon {
  flex: 0 0 40px;
  padding: 9px;
}

/* 亮度 + 信誉卡 */
.ud-trust-card {
  display: flex;
  margin: 10px 14px 0;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
}
.ud-trust-item {
  flex: 1; text-align: center;
}
.ud-trust-sep {
  width: 1px;
  background: #EAEBEE;
}
.ud-trust-val {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 700; color: #222;
  margin-bottom: 3px;
}
.ud-trust-val em {
  font-style: normal;
  font-size: 13px;
  color: #FF7A1F;
  margin-left: 2px;
}
.ud-trust-ic { font-size: 16px; }
.ud-trust-lbl {
  font-size: 11px; color: #888;
  margin-bottom: 2px;
}
.ud-trust-sub {
  font-size: 10px; color: #B0B0B5;
}

/* 数据总览 */
.ud-stats {
  display: flex;
  margin: 10px 14px;
  padding: 14px 8px;
  background: #fff;
  border-radius: 12px;
}
.ud-stat { flex: 1; text-align: center; }
.ud-stat-num {
  font-size: 17px; font-weight: 700; color: #222;
  margin-bottom: 2px;
}
.ud-stat-lbl {
  font-size: 11px; color: #888;
}

/* 通用分段 */
.ud-section {
  background: #fff;
  margin: 10px 14px;
  padding: 16px;
  border-radius: 12px;
}
.ud-section-title {
  font-size: 14px; font-weight: 700; color: #222;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.ud-section-sub {
  font-size: 11px; color: #888;
  font-weight: 400;
}

/* 身份标签 */
.ud-tags-group { display: flex; flex-direction: column; gap: 10px; }
.ud-tags-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ud-tags-lbl {
  font-size: 11px; color: #999;
  min-width: 56px; flex-shrink: 0;
}
.ud-tag {
  display: inline-block;
  padding: 3px 9px;
  background: #F5F6F8;
  border-radius: 12px;
  font-size: 11px; color: #555;
}
.ud-tag-stage { background: #FFF1E3; color: #FF7A1F; }
.ud-tag-role { background: #E8F5F3; color: var(--primary); }

/* 共同圈子 */
.ud-circle-list { display: flex; flex-direction: column; gap: 8px; }
.ud-circle-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: #F9FAFB;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.ud-circle-card:active { transform: scale(0.98); }
.ud-circle-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ud-circle-info { flex: 1; min-width: 0; }
.ud-circle-name {
  font-size: 13px; font-weight: 600; color: #222;
  margin-bottom: 2px;
}
.ud-circle-meta {
  font-size: 11px; color: #888;
}
.ud-circle-badge {
  font-size: 10px; color: var(--primary);
  background: var(--primary-bg);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}

/* 互助履历 */
.ud-help-summary { display: flex; flex-direction: column; gap: 12px; }
.ud-help-item {
  display: flex; align-items: flex-start; gap: 10px;
}
.ud-help-ic { font-size: 20px; }
.ud-help-info { flex: 1; }
.ud-help-txt {
  font-size: 13px; color: #333;
}
.ud-help-txt b { color: var(--primary); font-weight: 700; font-size: 15px; margin: 0 2px; }
.ud-help-sub {
  font-size: 11px; color: #888;
  margin-top: 2px;
}

/* 内容 Tab */
.ud-feed-section { padding-top: 4px; }
.ud-feed-tabs {
  display: flex; gap: 20px;
  border-bottom: 1px solid #F0F0F2;
  padding: 0 4px;
  margin-bottom: 12px;
}
.ud-feed-tab {
  position: relative;
  padding: 10px 0 12px;
  font-size: 14px; color: #888; font-weight: 500;
  cursor: pointer;
}
.ud-feed-tab em {
  font-style: normal; font-size: 11px;
  color: #BBB; font-weight: 400;
  margin-left: 3px;
}
.ud-feed-tab.active {
  color: #222; font-weight: 700;
}
.ud-feed-tab.active em { color: var(--primary); }
.ud-feed-tab.active::after {
  content: ''; position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 22px; height: 2.5px;
  background: var(--primary);
  border-radius: 2px;
}

.ud-feed-panel { display: none; }
.ud-feed-panel.active { display: block; }

.ud-feed-item {
  padding: 12px;
  background: #FAFAFB;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.ud-feed-item:active { transform: scale(0.99); }
.ud-feed-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.ud-feed-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
}
.ud-feed-tag.need { color: #FF7A1F; background: #FFF1E3; }
.ud-feed-tag.share { color: var(--primary); background: var(--primary-bg); }
.ud-feed-tag.activity { color: #6C72CB; background: #E8EAF6; }
.ud-feed-tag.help-done { color: var(--primary); background: var(--primary-bg); }
.ud-feed-time {
  font-size: 10px; color: #999;
  margin-left: auto;
}
.ud-feed-text {
  font-size: 13px; color: #333;
  line-height: 1.6;
  margin-bottom: 6px;
}
.ud-feed-images {
  display: flex; gap: 6px;
  margin-bottom: 6px;
}
.ud-feed-img {
  width: 56px; height: 56px;
  background: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border: 1px solid #F0F0F2;
}
.ud-feed-stats {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: #999;
}

.ud-feed-more {
  text-align: center;
  padding: 10px;
  font-size: 12px; color: var(--primary);
  cursor: pointer;
}

/* 闲置 grid */
.ud-idle-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.ud-idle-card {
  position: relative;
  padding: 10px;
  background: #FAFAFB;
  border-radius: 10px;
  text-align: center;
}
.ud-idle-img {
  width: 100%; aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: 6px;
  border: 1px solid #F0F0F2;
}
.ud-idle-name {
  font-size: 11px; color: #333;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ud-idle-price {
  font-size: 11px; color: #FF7A1F; font-weight: 700;
}
.ud-idle-status {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}
.ud-idle-status.sold {
  background: #B0B0B5;
}

/* 底部操作 */
.ud-footer-actions {
  display: flex; gap: 12px;
  padding: 16px 20px;
}
.ud-footer-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1px solid #EAEBEE;
  border-radius: 10px;
  font-size: 12px; color: #888;
  cursor: pointer;
}
.ud-footer-btn:active { background: #F5F5F7; }

/* 更多操作面板 */
.ud-more-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200; display: none;
  animation: fadeIn 0.2s ease;
}
.ud-more-mask.open { display: block; }
.ud-more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.25,.8,.3,1);
  padding: 8px 14px 14px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
}
.ud-more-sheet.open { transform: translateY(0); }
.ud-more-item {
  padding: 14px 4px;
  font-size: 15px; color: #333;
  cursor: pointer;
  border-bottom: 1px solid #F0F0F2;
}
.ud-more-item:active { background: #F9FAFB; }
.ud-more-item.warn { color: #E53935; }
.ud-more-cancel {
  padding: 14px 4px;
  text-align: center;
  font-size: 15px; color: #888; font-weight: 500;
  cursor: pointer;
  margin-top: 6px;
  background: #F5F5F7;
  border-radius: 10px;
}

/* 任何带 data-user-profile 属性的元素都展示可点击光标 */
[data-user-profile] { cursor: pointer; }
[data-user-profile]:active { opacity: 0.7; }

/* ==================== 问亮仔 · 豆包风格（清爽浅色 + 柔和品牌色） ==================== */

/* 页面整体 */
#page-ai {
  background: #FAFBFC;
}

/* 极简顶栏（白底+细底边） */
.zi-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  z-index: 10;
}
.zi-top-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: #555;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}
.zi-top-btn:active { background: rgba(0,0,0,0.05); }
.zi-top-title {
  display: flex; flex-direction: column; align-items: center;
  flex: 1;
}
.zi-top-name {
  font-size: 15px; font-weight: 700; color: #222;
  letter-spacing: 0.3px;
}
.zi-top-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: #888;
  margin-top: 1px;
}
.zi-status-dot {
  width: 5px; height: 5px;
  background: #00C853;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,200,83,0.6);
}

/* 空对话态（启动页） */
.zi-empty {
  position: absolute; inset: 50px 0 160px 0;
  display: flex; flex-direction: column;
  padding: 0 24px;
  justify-content: center;
  z-index: 2;
}
.zi-empty-hero {
  text-align: center;
  margin-bottom: 40px;
}
.zi-logo-glow {
  width: 96px; height: 96px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(124,92,255,0.15) 0%, rgba(66,159,255,0.08) 40%, transparent 70%);
  border-radius: 50%;
  position: relative;
  animation: ziBreathe 3s ease-in-out infinite;
}
@keyframes ziBreathe {
  0%,100% { transform: scale(1); filter: hue-rotate(0deg); }
  50% { transform: scale(1.08); filter: hue-rotate(20deg); }
}
.zi-logo-core {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 30px rgba(124,92,255,0.25);
}
.zi-empty-greet {
  font-size: 26px; font-weight: 700; color: #222;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.zi-empty-sub {
  font-size: 14px; color: #888;
  margin: 0;
}
.zi-empty-suggestions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.zi-sug-card {
  padding: 14px 12px;
  background: #fff;
  border: 1px solid #EAEBEE;
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.zi-sug-card:active {
  background: #F5F7FF;
  border-color: #C5CDFF;
  transform: scale(0.98);
}
.zi-sug-emoji { font-size: 20px; }
.zi-sug-text {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

/* 对话流 */
.zi-chat {
  position: absolute; top: 50px; bottom: 160px; left: 0; right: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 14px 20px;
  -webkit-overflow-scrolling: touch;
}
.zi-chat::-webkit-scrollbar { width: 0; }

/* 消息通用 */
.zi-msg {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  animation: ziFadeIn 0.3s ease;
}
.zi-msg-ai { display: block; }
@keyframes ziFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 用户消息（右对齐，渐变彩色胶囊） */
.zi-msg-user {
  justify-content: flex-end;
}
.zi-msg-user .zi-msg-text {
  max-width: 78%;
  padding: 11px 16px;
  background: linear-gradient(135deg, #7C5CFF 0%, #5B8CFF 100%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 4px 14px rgba(124,92,255,0.2);
}

/* AI 消息（无头像·卡片撑满宽度） */
.zi-msg-ai {
  justify-content: flex-start;
}
/* 隐藏亮仔头像 */
.zi-ai-avatar { display: none; }
.zi-msg-body {
  width: 100%;
  max-width: 100%;
  color: #333;
  display: flex; flex-direction: column;
  gap: 8px;
}
/* 内容容器本身透明，子元素各自成块平铺 */
.zi-msg-content {
  padding: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1.7;
  color: #222;
  display: flex; flex-direction: column;
  gap: 10px;
}
/* 纯文本段落（没有 class 的 div）自动加气泡 */
.zi-msg-content > div:not([class]) {
  padding: 12px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid #F0F0F2;
}
.zi-msg-content b {
  color: #7C5CFF;
  font-weight: 700;
}

/* 推荐卡（平铺独立卡片·有层次感） */
.zi-rec-card {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #EEF0F2;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04),
              0 1px 3px rgba(0,0,0,0.03);
}
.zi-rec-card:hover {
  box-shadow: 0 4px 14px rgba(124,92,255,0.08),
              0 2px 6px rgba(0,0,0,0.04);
  border-color: #DFE3FB;
}
.zi-rec-card:active {
  transform: scale(0.98);
  background: #F8F9FB;
}
.zi-rec-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.zi-rec-info { flex: 1; min-width: 0; }
.zi-rec-name {
  font-size: 13px; font-weight: 600; color: #222;
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
}
.zi-rec-lv {
  font-size: 10px; color: #FF7A1F;
  background: #FFF1E3;
  padding: 1px 6px; border-radius: 3px;
  font-weight: 500;
}
.zi-rec-verified {
  font-size: 10px; color: #00A86B;
  background: #E8F5EC;
  padding: 1px 6px; border-radius: 3px;
  font-weight: 500;
}
.zi-rec-meta {
  font-size: 11px; color: #888;
  margin-top: 3px;
}
.zi-rec-why {
  font-size: 11px; color: #7C5CFF;
  margin-top: 5px;
  padding: 3px 7px;
  background: rgba(124,92,255,0.08);
  border-radius: 5px;
  display: inline-block;
}
.zi-rec-btn {
  padding: 5px 12px;
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  color: #fff;
  border: none; border-radius: 14px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(124,92,255,0.25);
}
.zi-rec-btn:active { transform: scale(0.94); }
.zi-rec-arrow {
  color: #C8C8CC; font-size: 16px;
  flex-shrink: 0;
}

/* 活动卡（浅紫粉渐变，平铺独立） */
.zi-event-card {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #F3F0FF 0%, #FDF2F8 100%);
  border: 1px solid #E5DCFF;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(124,92,255,0.08),
              0 1px 3px rgba(0,0,0,0.03);
}
.zi-event-card:hover {
  box-shadow: 0 6px 18px rgba(124,92,255,0.15),
              0 2px 6px rgba(0,0,0,0.05);
}
.zi-event-card:active { transform: scale(0.98); }
.zi-event-when {
  flex-shrink: 0;
  text-align: center;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px;
  min-width: 52px;
}
.zi-event-day {
  font-size: 11px; color: #6C72CB; font-weight: 600;
}
.zi-event-hour {
  font-size: 14px; font-weight: 700; color: #222;
  margin-top: 2px;
}
.zi-event-info { flex: 1; min-width: 0; }
.zi-event-name {
  font-size: 13px; font-weight: 600; color: #222;
}
.zi-event-meta {
  font-size: 11px; color: #666;
  margin-top: 3px;
}
.zi-event-who {
  font-size: 11px; color: #888;
  margin-top: 2px;
}
.zi-event-btn {
  padding: 5px 12px;
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  color: #fff;
  border: none; border-radius: 14px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(124,92,255,0.2);
}

/* 对话后续问题 chip + action */
.zi-msg-followup {
  margin: 4px 2px 0;
  font-size: 12px;
  color: #888;
}
.zi-action-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 2px 0 0;
}
.zi-action-btn {
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #E5E6EA;
  border-radius: 16px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  transition: all 0.15s;
}
.zi-action-btn:active { transform: scale(0.96); background: #F5F6F8; }
.zi-action-btn.primary {
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  color: #fff; font-weight: 600;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(124,92,255,0.25);
}

/* 跟进芯片（AI 回复末尾） */
.zi-followup-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 4px 0 0;
}
.zi-followup-chips .zi-chip {
  background: #fff;
  border: 1px solid #E5E6EA;
  color: #555;
}

/* AI 消息工具栏（复制/重生成/朗读等） */
.zi-msg-toolbar {
  display: flex; gap: 6px;
  margin-top: 8px;
  padding-left: 6px;
}
.zi-tool {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #999;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.zi-tool:active {
  background: #F0F0F2;
  color: #333;
}
.zi-tool.active {
  color: #7C5CFF;
}

/* 思考中气泡 */
.zi-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 14px;
}
.zi-typing span {
  width: 6px; height: 6px;
  background: #B0B0B5;
  border-radius: 50%;
  animation: ziTyping 1.4s infinite;
}
.zi-typing span:nth-child(2) { animation-delay: 0.2s; }
.zi-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ziTyping {
  0%,60%,100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* 顶部今日提醒专区（独立 section，与对话流视觉分离） */
.zi-reminder-zone {
  margin: 4px 0 14px;
  padding: 10px 12px 12px;
  background: linear-gradient(135deg, #FFFBF3 0%, #FFF4F7 100%);
  border: 1px solid #FFE0C2;
  border-radius: 14px;
  position: relative;
}
.zi-reminder-zone-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.zi-reminder-zone-title {
  font-size: 12px; font-weight: 700; color: #D95E1F;
}
.zi-reminder-zone-count {
  display: inline-block; min-width: 16px; height: 16px;
  padding: 0 5px; margin-left: 4px;
  background: #FF3B30; color: #fff;
  border-radius: 8px; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center;
}
.zi-reminder-zone-close {
  width: 22px; height: 22px; border: none; background: rgba(255,255,255,0.6);
  border-radius: 50%; color: #AA8866; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.zi-reminder-zone-close:active { background: rgba(255,255,255,0.9); }
.zi-reminder-zone .zi-proactive {
  margin: 0; border: none; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* 主动提醒卡（浅橙渐变） */
.zi-proactive {
  margin: 20px 0 14px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF7EB 0%, #FFF1F6 100%);
  border: 1px solid #FFE0C2;
  border-radius: 14px;
}
.zi-proactive-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.zi-proactive-ic { font-size: 14px; }
.zi-proactive-title {
  font-size: 12px; font-weight: 600; color: #D95E1F;
  flex: 1;
}
.zi-proactive-time {
  font-size: 10px; color: #AA8866;
}
.zi-proactive-body {
  font-size: 13px; color: #5A4632;
  line-height: 1.7;
}
.zi-proactive-body b { color: #FF7A1F; }
.zi-proactive-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}

/* 底部常用区 */
.zi-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(250,251,252,0) 0%, #FAFBFC 30%);
  padding-top: 12px;
  z-index: 8;
}

/* 场景 chips 横滑 */
.zi-quickbar {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 0 14px 10px;
}
.zi-quickbar::-webkit-scrollbar { display: none; }
.zi-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #E5E6EA;
  border-radius: 14px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.zi-chip:active {
  background: #F5F7FF;
  border-color: #C5CDFF;
  color: #7C5CFF;
}

/* 输入栏（大号胶囊，浅色） */
.zi-input-area {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 12px;
}
.zi-input-plus {
  width: 38px; height: 38px;
  background: #F0F2F5;
  border: none;
  border-radius: 50%;
  color: #555;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.zi-input-plus:active {
  background: #E5E6EA;
  transform: scale(0.94);
}
.zi-input-plus.active {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  color: #fff;
}
.zi-input-box {
  flex: 1;
  background: #F0F2F5;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 6px 14px;
  min-height: 38px;
  display: flex; align-items: center;
  transition: all 0.2s;
}
.zi-input-box:focus-within {
  border-color: #C5CDFF;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,92,255,0.08);
}
.zi-input {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  resize: none;
  color: #222;
  font-size: 14px;
  line-height: 1.4;
  max-height: 100px;
  overflow-y: auto;
  padding: 5px 0;
  font-family: inherit;
}
.zi-input::placeholder { color: #B0B0B3; }
.zi-voice-btn, .zi-send-btn {
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.zi-voice-btn {
  background: #F0F2F5;
  color: #555;
}
.zi-voice-btn:active {
  background: #E5E6EA;
  transform: scale(0.94);
}
.zi-send-btn {
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,92,255,0.3);
}
.zi-send-btn:active { transform: scale(0.94); }

/* 工具面板（浅色毛玻璃） */
.zi-tools-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 12; display: none;
}
.zi-tools-mask.open { display: block; }
.zi-tools-panel {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 140px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #EAEBEE;
  border-radius: 18px;
  padding: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
  z-index: 13;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s cubic-bezier(.25,.8,.3,1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.zi-tools-panel.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.zi-tool-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  transition: transform 0.15s;
}
.zi-tool-item:active { transform: scale(0.92); }
.zi-tool-ic {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.zi-tool-lbl {
  font-size: 11px;
  color: #555;
}

/* 更多菜单（浅色，无需覆盖默认 aa-more-*） */
#page-ai .aa-more-sheet { background: #fff; color: #333; }

/* ==================== 亮仔智能助手（已废弃，保留兼容） ==================== */
#page-ai-assistant { background: #F5F6F8; }
.aa-header {
  background: #fff;
  padding: 10px 14px !important;
}
.aa-header-info {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px;
}
.aa-header-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #6C72CB, #CB69C1);
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aa-header-text { flex: 1; min-width: 0; }
.aa-header-name {
  font-size: 15px; font-weight: 700; color: #222;
  display: flex; align-items: center; gap: 6px;
}
.aa-header-tag {
  font-size: 10px;
  background: linear-gradient(135deg, #667EEA, #764BA2);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.aa-header-sub {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #888;
  margin-top: 1px;
}
.aa-online-dot {
  width: 6px; height: 6px;
  background: #00C853; border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,200,83,0.6);
}

.aa-content {
  padding: 16px 14px 130px !important;
  background: #F5F6F8;
}
.aa-date-divider {
  text-align: center;
  font-size: 11px; color: #999;
  background: rgba(0,0,0,0.06);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  margin: 0 auto 14px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* 消息气泡 */
.aa-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  max-width: 100%;
}
.aa-msg-ai { justify-content: flex-start; }
.aa-msg-user { justify-content: flex-end; }

.aa-msg-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #6C72CB, #CB69C1);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.aa-msg-bubble {
  max-width: 80%;
  padding: 10px 14px;
  background: #fff;
  border-radius: 4px 14px 14px 14px;
  font-size: 14px; color: #222;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.aa-msg-user .aa-msg-bubble {
  background: var(--primary);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.aa-msg-time {
  font-size: 10px; color: #B0B0B5;
  align-self: flex-end;
  margin-bottom: 2px;
}
.aa-msg-user .aa-msg-time {
  margin-right: 2px; margin-left: 8px;
  margin-bottom: 4px;
}

/* 能力列表 */
.aa-cap-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px;
  font-size: 13px; color: #444;
}
.aa-cap-item { padding-left: 4px; }

/* 推荐卡（用户/圈子） */
.aa-rec-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 10px;
  background: #F9FAFB;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.aa-rec-card:active { transform: scale(0.98); }
.aa-rec-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.aa-rec-info { flex: 1; min-width: 0; }
.aa-rec-name {
  font-size: 13px; font-weight: 600; color: #222;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.aa-rec-lv {
  font-size: 10px; color: #FF7A1F;
  background: #FFF1E3;
  padding: 1px 5px; border-radius: 3px;
  font-weight: 500;
}
.aa-rec-verified {
  font-size: 10px; color: var(--primary);
  background: var(--primary-bg);
  padding: 1px 5px; border-radius: 3px;
  font-weight: 500;
}
.aa-rec-meta {
  font-size: 11px; color: #888;
  margin-top: 2px;
}
.aa-rec-why {
  font-size: 11px; color: var(--primary);
  margin-top: 4px;
  padding: 3px 6px;
  background: var(--primary-bg);
  border-radius: 4px;
  display: inline-block;
}
.aa-rec-btn {
  padding: 5px 11px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 14px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.aa-rec-btn:active { opacity: 0.85; }
.aa-rec-arrow {
  color: #C8C8CC; font-size: 16px;
  flex-shrink: 0;
}

/* 活动卡 */
.aa-event-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 10px;
  background: linear-gradient(135deg, #F3F0FF 0%, #FDF2F8 100%);
  border: 1px solid #EEE0FF;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.aa-event-card:active { transform: scale(0.98); }
.aa-event-when {
  flex-shrink: 0;
  text-align: center;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px;
  min-width: 50px;
}
.aa-event-day {
  font-size: 11px; color: #6C72CB; font-weight: 600;
}
.aa-event-hour {
  font-size: 14px; font-weight: 700; color: #222;
  margin-top: 2px;
}
.aa-event-info { flex: 1; min-width: 0; }
.aa-event-name {
  font-size: 13px; font-weight: 600; color: #222;
}
.aa-event-meta {
  font-size: 11px; color: #666;
  margin-top: 3px;
}
.aa-event-who {
  font-size: 11px; color: #888;
  margin-top: 2px;
}
.aa-event-btn {
  padding: 5px 11px;
  background: #6C72CB; color: #fff;
  border: none; border-radius: 14px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* 动作按钮行 */
.aa-action-row {
  display: flex; gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.aa-action-btn {
  padding: 6px 12px;
  background: #F5F6F8;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 12px; color: #444;
  cursor: pointer;
  transition: all 0.15s;
}
.aa-action-btn:active { transform: scale(0.96); }
.aa-action-btn.primary {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* 快捷回复 */
.aa-quick-replies {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.aa-quick-replies .aa-quick-chip {
  background: #fff;
  border: 1px solid #E5E6EA;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
}

/* 主动提醒卡 */
.aa-proactive {
  margin: 14px 0 10px 38px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF7EB, #FFF1F6);
  border: 1px solid #FFE0C2;
  border-radius: 12px;
}
.aa-proactive-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.aa-proactive-ic { font-size: 14px; }
.aa-proactive-title {
  font-size: 12px; font-weight: 600; color: #D95E1F;
  flex: 1;
}
.aa-proactive-time {
  font-size: 10px; color: #AA8866;
}
.aa-proactive-body {
  font-size: 13px; color: #5A4632;
  line-height: 1.6;
}
.aa-proactive-body b { color: #FF7A1F; }
.aa-proactive-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
}

/* 底部快捷 chips 行（吸底） */
.aa-quick-bar {
  position: absolute; left: 0; right: 0;
  bottom: 56px;
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 8px 14px;
  background: rgba(245,246,248,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #EAEBEE;
}
.aa-quick-bar::-webkit-scrollbar { display: none; }
.aa-quick-chip {
  flex-shrink: 0;
  padding: 5px 11px;
  background: #fff;
  border: 1px solid #E5E6EA;
  border-radius: 14px;
  font-size: 12px; color: #555;
  cursor: pointer;
  white-space: nowrap;
}
.aa-quick-chip:active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* 输入栏 */
.aa-input-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border-top: 1px solid #EAEBEE;
  z-index: 5;
}
.aa-input-ic {
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.aa-input-ic:active { background: #F0F0F2; }
.aa-input {
  flex: 1;
  border: none;
  background: #F5F6F8;
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}
.aa-send-btn {
  width: 34px; height: 34px;
  background: var(--primary);
  border: none; border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(38,166,154,0.3);
}
.aa-send-btn:active { transform: scale(0.94); }

/* 更多菜单 */
.aa-more-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200; display: none;
  animation: fadeIn 0.2s ease;
}
.aa-more-mask.open { display: block; }
.aa-more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.25,.8,.3,1);
  padding: 8px 14px 14px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
}
.aa-more-sheet.open { transform: translateY(0); }
.aa-more-item {
  padding: 14px 4px;
  font-size: 15px; color: #333;
  cursor: pointer;
  border-bottom: 1px solid #F0F0F2;
}
.aa-more-item:active { background: #F9FAFB; }
.aa-more-cancel {
  padding: 14px 4px;
  text-align: center;
  font-size: 15px; color: #888; font-weight: 500;
  cursor: pointer;
  margin-top: 6px;
  background: #F5F5F7;
  border-radius: 10px;
}


/* ==================== 广场 FAB · 创建圈子 ==================== */
.circles-fab {
  position: absolute;
  right: 16px;
  bottom: 20px;
  width: 52px; height: 52px;
  border: none; padding: 0; cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C5CFF 0%, #429FFF 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 2px 6px rgba(66, 159, 255, 0.25),
    0 8px 24px rgba(124, 92, 255, 0.28);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease, box-shadow .25s ease;
  z-index: 20;
  /* 仅在广场 tab 激活时显示（由 JS 控制） */
  opacity: 0; pointer-events: none; transform: scale(0.7) translateY(10px);
}
.circles-fab.visible {
  opacity: 1; pointer-events: auto; transform: scale(1) translateY(0);
}
.circles-fab:active {
  transform: scale(0.92);
  box-shadow:
    0 1px 3px rgba(66, 159, 255, 0.3),
    0 4px 12px rgba(124, 92, 255, 0.35);
}
/* 柔散光晕，衬出"漂浮感"而不是"色块" */
.circles-fab-glow {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(124, 92, 255, 0.35) 0%, transparent 60%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}
.circles-fab-icon {
  position: relative; z-index: 1;
}
/* 滚动中瘦身（JS 控制 .shrink） */
.circles-fab.shrink {
  transform: scale(0.82);
  opacity: 0.72;
}

/* ==================== 广场分类筛选条 ==================== */
.plaza-cat-bar {
  display: flex; gap: 6px;
  padding: 10px 14px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.plaza-cat-bar::-webkit-scrollbar { display: none; }
.plaza-cat {
  flex-shrink: 0;
  font-size: 13px; color: var(--text-secondary);
  padding: 5px 12px; border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  transition: color .2s, background .2s, font-weight .2s;
}
.plaza-cat.active {
  color: var(--primary);
  background: var(--primary-bg);
  font-weight: 600;
}
.plaza-cat:active { transform: scale(0.96); }

/* ==================== Tab 条内联工具按钮（试验：跟随滚动） ==================== */
.h-tab-divider {
  flex-shrink: 0;
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 4px; align-self: center;
}
.h-tab-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-secondary);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.h-tab-btn:active { transform: scale(0.9); background: var(--bg); }
.h-tab-btn .ai-search-badge {
  position: absolute; top: -3px; right: -5px;
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 6px;
  background: linear-gradient(135deg,#7C5CFF,#429FFF);
  color: #fff;
}

/* ==================== 圈主分身卡（核心C位） ==================== */
.cd-agent-card {
  margin: 14px 14px 0;
  padding: 18px 16px 14px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FF7E5F 0%, #FD8A5B 35%, #FEB47B 100%);
  box-shadow: 0 10px 30px rgba(253, 138, 91, 0.28);
  color: #fff;
}
.cd-agent-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 40%),
    radial-gradient(circle at 10% 85%, rgba(255,255,255,0.12) 0%, transparent 45%);
  pointer-events: none;
}

.cd-agent-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}

.cd-agent-avatar-wrap {
  position: relative; width: 54px; height: 54px; flex-shrink: 0;
}
.cd-agent-avatar {
  width: 54px; height: 54px; border-radius: 27px;
  background: rgba(255,255,255,0.25);
  border: 2.5px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
}
.cd-agent-pulse {
  position: absolute; inset: -4px; border-radius: 31px;
  border: 2px solid rgba(255,255,255,0.8);
  animation: cdAgentPulse 2s ease-out infinite;
  opacity: 0;
}
@keyframes cdAgentPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}
.cd-agent-online-dot {
  position: absolute; right: 0; bottom: 2px;
  width: 14px; height: 14px; border-radius: 7px;
  background: #4ADE80;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

.cd-agent-info { flex: 1; min-width: 0; }
.cd-agent-name-row {
  display: flex; align-items: center; gap: 8px;
}
.cd-agent-name {
  font-size: 19px; font-weight: 800; letter-spacing: 0.5px;
}
.cd-agent-ai-tag {
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,0.25);
  padding: 2px 6px; border-radius: 4px;
  backdrop-filter: blur(6px);
}
.cd-agent-identity {
  font-size: 12px; color: rgba(255,255,255,0.9);
  margin-top: 3px;
}
.cd-agent-status {
  font-size: 11px; color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.cd-agent-status b {
  color: #fff; font-weight: 700;
}

.cd-agent-speech {
  background: rgba(255,255,255,0.2);
  padding: 14px 18px 14px 26px;
  border-radius: 14px;
  position: relative;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}
.cd-agent-quote-left, .cd-agent-quote-right {
  position: absolute;
  font-size: 30px; font-weight: 900;
  color: rgba(255,255,255,0.35);
  font-family: 'Georgia', serif;
  line-height: 1;
}
.cd-agent-quote-left { top: 4px; left: 8px; }
.cd-agent-quote-right { bottom: -6px; right: 10px; transform: rotate(180deg); }
.cd-agent-speech-text {
  font-size: 13px; line-height: 1.65;
  color: #fff; margin: 0;
}

.cd-agent-caps {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.cd-agent-cap {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.15);
  padding: 7px 10px; border-radius: 10px;
  backdrop-filter: blur(4px);
}
.cd-agent-cap-ic { font-size: 14px; }
.cd-agent-cap-txt {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.95);
}

.cd-agent-actions {
  display: flex; gap: 8px;
}
.cd-agent-chat-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 0;
  background: #fff;
  color: #E55A2B;
  border: none; border-radius: 22px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform .15s;
}
.cd-agent-chat-btn svg { stroke: #E55A2B; }
.cd-agent-chat-btn:active { transform: scale(0.96); }
.cd-agent-human-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 22px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.cd-agent-human-btn:active { background: rgba(255,255,255,0.3); }

/* ==================== 本期在团服务卡 ==================== */
.cd-service-card {
  margin: 12px 14px 0;
  padding: 14px 14px 4px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.cd-service-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.cd-service-title {
  font-size: 15px; font-weight: 700; color: #1A1A1A;
}
.cd-service-count {
  font-size: 11px; color: #fff;
  background: #FF7043; padding: 2px 7px; border-radius: 8px;
  font-weight: 600;
}
.cd-service-more {
  margin-left: auto;
  font-size: 12px; color: #999;
  cursor: pointer;
}

.cd-service-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F0F0F2;
}
.cd-service-item:last-child { border-bottom: none; }
.cd-service-thumb {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF8E1, #FFE0B2);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.cd-service-info { flex: 1; min-width: 0; }
.cd-service-name {
  font-size: 13px; font-weight: 600; color: #222;
  margin-bottom: 4px;
}
.cd-service-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #888;
  margin-bottom: 6px;
}
.cd-service-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #CCC;
}
.cd-service-progress {
  height: 4px;
  background: #F0F0F2;
  border-radius: 2px; overflow: hidden;
}
.cd-service-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFB75E, #ED8F03);
  border-radius: 2px;
}
.cd-service-action {
  padding: 7px 16px;
  background: linear-gradient(135deg, #FF7E5F, #FEB47B);
  color: #fff;
  border: none; border-radius: 16px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(253, 138, 91, 0.35);
}
.cd-service-action:active { transform: scale(0.95); }

/* ==================== 圈主分身特色入口 Banner ==================== */
.featured-agent-banner {
  margin: 10px 12px 14px;
  padding: 14px 14px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 22px rgba(253, 138, 91, 0.35);
  cursor: pointer;
  transition: transform 0.15s;
}
.featured-agent-banner:active { transform: scale(0.98); }
.fab-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #FF7E5F 0%, #FD8A5B 40%, #FEB47B 100%);
  z-index: 0;
}
.fab-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,255,255,0.2) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.15) 0%, transparent 45%);
}
.fab-left {
  flex: 1; min-width: 0; position: relative; z-index: 1;
}
.fab-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.25);
  padding: 3px 8px; border-radius: 4px;
  backdrop-filter: blur(6px);
  margin-bottom: 6px;
}
.fab-title {
  font-size: 17px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.fab-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 6px;
}
.fab-meta {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
}
.fab-right {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.fab-avatar {
  width: 52px; height: 52px; border-radius: 26px;
  background: rgba(255,255,255,0.3);
  border: 2.5px solid rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.fab-cta {
  font-size: 11px; font-weight: 700;
  color: #E55A2B;
  background: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}