/* ==========================================================================
   HONEY 设计系统 - "Côte d'Azur" 轻奢
   米白底 + 紫粉渐变 + 玻璃拟态 + 衬线点缀
   ========================================================================== */

:root {
  /* 背景层级 */
  --bg:           #FBFAF7;   /* 主背景 米白 */
  --bg-2:         #F5F2EB;   /* 次背景 沙色 */
  --surface:      #FFFFFF;   /* 卡片白 */
  --surface-2:    #F8F5EE;   /* 浅米色 surface */
  --ink-inv:      #0A0A0A;   /* 深色 inverse */

  /* 文字色阶 */
  --ink-1:        #161618;   /* 主标题 */
  --ink-2:        #3D3D42;   /* 副文字 */
  --ink-3:        #75757E;   /* 弱化文字 */
  --ink-4:        #B0B0B8;   /* 占位/分割 */
  --line:         #ECE7DD;   /* 分割线 米色 */
  --line-2:       #F5F1E8;

  /* 品牌色 - 紫粉渐变主调 */
  --c-primary:    #C490E4;   /* 紫 */
  --c-primary-d:  #A475C9;
  --c-pink:       #FF8A8B;   /* 粉 */
  --c-pink-d:     #E07576;
  --c-rose:       #F5B5C7;   /* 浅粉辅助 */
  --c-lavender:   #D8C7E8;   /* 浅紫辅助 */

  /* 强调色 - 金色 VIP/付费 */
  --c-gold:       #C9A35E;
  --c-gold-l:     #E8C99A;
  --c-gold-d:     #8E6E33;

  /* 状态色 */
  --c-success:    #4FB68A;
  --c-warning:    #E8A33D;
  --c-danger:     #E5616A;
  --c-online:     #4FB68A;
  --c-offline:    #B0B0B8;

  /* 渐变 */
  --grad-primary: linear-gradient(135deg, #C490E4 0%, #FF8A8B 100%);
  --grad-soft:    linear-gradient(135deg, #F5D8E8 0%, #E5C5F0 50%, #D8E5F0 100%);
  --grad-gold:    linear-gradient(135deg, #F0DAA0 0%, #C9A35E 50%, #8E6E33 100%);
  --grad-dark:    linear-gradient(180deg, #0A0A0A 0%, #2A2A2A 100%);
  --grad-hero:    linear-gradient(135deg, #F5D8E8 0%, #E5C5F0 40%, #D8C7E8 100%);
  --grad-female:  linear-gradient(135deg, #FFE5EC 0%, #FFCFD9 100%);
  --grad-male:    linear-gradient(135deg, #DCE7F5 0%, #C5D8F0 100%);

  /* 圆角 */
  --r-xs:   6px;
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* 阴影 - 极弱克制 */
  --sh-1: 0 1px 2px rgba(20, 20, 20, .04);
  --sh-2: 0 4px 16px rgba(20, 20, 20, .06);
  --sh-3: 0 12px 32px rgba(20, 20, 20, .08);
  --sh-glow: 0 8px 24px rgba(196, 144, 228, .25);
  --sh-pink: 0 8px 24px rgba(255, 138, 139, .25);

  /* 字体 */
  --f-serif: 'Playfair Display', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --f-sans:  -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', '微软雅黑', sans-serif;
  --f-num:   'SF Pro Display', 'Helvetica Neue', 'DIN Alternate', 'Inter', var(--f-sans);

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* 安全区 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* 圆角规整 */
  --tabbar-h: 64px;
}

/* ==================== 基础重置 ==================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; color: inherit; }
img { display: block; max-width: 100%; }

/* ==================== 字号 ==================== */
.t-xs   { font-size: 10px; line-height: 1.4; }
.t-sm   { font-size: 12px; line-height: 1.4; }
.t-base { font-size: 14px; line-height: 1.5; }
.t-md   { font-size: 16px; line-height: 1.5; }
.t-lg   { font-size: 18px; line-height: 1.4; }
.t-xl   { font-size: 22px; line-height: 1.3; }
.t-2xl  { font-size: 28px; line-height: 1.2; }
.t-3xl  { font-size: 36px; line-height: 1.1; }
.t-num  { font-family: var(--f-num); font-feature-settings: 'tnum'; letter-spacing: -0.02em; }
.t-serif { font-family: var(--f-serif); }
.fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; }
.t-ink-1 { color: var(--ink-1); } .t-ink-2 { color: var(--ink-2); } .t-ink-3 { color: var(--ink-3); }
.t-primary { color: var(--c-primary); } .t-pink { color: var(--c-pink); } .t-gold { color: var(--c-gold); }

/* ==================== 工具 ==================== */
.flex { display: flex; } .iflex { display: inline-flex; } .grid { display: grid; }
.aic { align-items: center; } .jcb { justify-content: space-between; } .jcc { justify-content: center; }
.f1 { flex: 1; } .fcol { flex-direction: column; } .fwrap { flex-wrap: wrap; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================== 卡片 ==================== */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 16px;
}
.card-elev { box-shadow: var(--sh-2); }
.card-glass { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.5); }
.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* ==================== 按钮 ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 20px; height: 44px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--sh-glow); }
.btn-ghost { background: var(--surface-2); color: var(--ink-1); }
.btn-outline { background: transparent; color: var(--ink-1); border: 1px solid var(--line); }
.btn-gold { background: var(--grad-gold); color: #fff; }
.btn-dark { background: var(--ink-inv); color: #fff; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.btn-lg { height: 52px; font-size: 16px; padding: 0 24px; }
.btn-block { width: 100%; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; }

/* ==================== 标签 / 徽章 ==================== */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; line-height: 1.4; }
.tag-soft { background: var(--surface-2); color: var(--ink-2); }
.tag-primary { background: rgba(196, 144, 228, .12); color: var(--c-primary-d); }
.tag-pink { background: rgba(255, 138, 139, .12); color: var(--c-pink-d); }
.tag-gold { background: rgba(201, 163, 94, .15); color: var(--c-gold-d); }
.tag-online { background: rgba(79, 182, 138, .15); color: var(--c-online); }
.tag-glass { backdrop-filter: blur(8px); background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.4); color: #fff; }
.tag-glass-dark { backdrop-filter: blur(8px); background: rgba(0,0,0,.35); color: #fff; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.dot-online { background: var(--c-online); box-shadow: 0 0 0 2px rgba(79,182,138,.2); }
.dot-offline { background: var(--c-offline); }

/* ==================== 头像 ==================== */
.avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-2); flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 48px; height: 48px; font-size: 16px; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.avatar-xl { width: 88px; height: 88px; font-size: 28px; }
.avatar-grad { background: var(--grad-primary); }

/* ==================== 容器 ==================== */
.container { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; }
@media (min-width: 768px) {
  .container { box-shadow: 0 0 40px rgba(0,0,0,.06); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ==================== 滚动条 ==================== */
::-webkit-scrollbar { width: 0; height: 0; }

/* ==================== 动画 ==================== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.anim-fade { animation: fadeIn 0.4s ease both; }
.anim-pulse { animation: pulse 2s ease infinite; }

/* ==================== 安全区底部留白 ==================== */
.safe-pb { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }
.safe-pb-only { padding-bottom: var(--safe-bottom); }